about:debugging (before Firefox 68) - Firefox Developer Tools
you restart firefox. the big advantages of this method, compared with installing an add-on from an xpi, are: you don't have to rebuild an xpi and reinstall when you change the add-on's code you can load an add-on without signing it and without needing to disable signing. updating a temporary add-on if you install the add-on in this way, what happens when you update the add-on's files? before firefox 48 if you change files that are loaded on demand, like content scripts or popups, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown. if you change files that stay loaded the whole time, like background scripts, then you can pick up changes you've made by disabling and then re-enabling the add-on in t...
...content script is loaded or the popup is shown. if you change files that stay loaded the whole time, like background scripts, then you can pick up changes you've made by disabling and then re-enabling the add-on in the about:addons page. if you change files that are only parsed at install time, like the manifest.json file, you'll need to restart firefox, then load the add-on again. note that before firefox 48, loading the add-on again by pressing "load temporary add-on" without restarting firefox does not work. firefox 48 onwards from firefox 48 onwards: as before: if you change files that are loaded on demand, like content scripts or popups, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown. the...
...tton, labeled "start": click this to start the service worker. clicking "debug" connects the javascript debugger and console to this worker. you can set breakpoints, step through code, watch variables, evaluate code, and so on: registering workers at first, you won't see any workers listed under service workers or shared workers. as soon as a worker is registered, the listing is updated: before firefox 47, service workers were only shown when they were actually running. unregistering service workers new in firefox 48. starting in firefox 48, you'll see a link named "unregister" next to each registered service worker: click the link to unregister the service worker. sending push events to service workers sending push events in about:debugging is new in firefox 47. to debug ...

HTMLElement: beforeinput event - Web APIs
the dom beforeinput event fires when the value of an <input>, <select>, or <textarea> element is about to be modified. the event also applies to elements with contenteditable enabled, and to any element when designmode is turned on. in the case of contenteditable and designmode, the event target is the editing host. if these properties apply to multiple elements, the editing host is the nearest ancestor element whose parent isn't editable. ...
...tiple elements, the editing host is the nearest ancestor element whose parent isn't editable. ...
...ult action update the dom element examples this example logs current value of the element immediately before replacing that value with the new one applied to the <input> element. html <input placeholder="enter some text" name="name"/> <p id="values"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('values'); input.addeventlistener('beforeinput', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; } result specifications specification status ui eventsthe definition of 'beforeinput event' in that specification. working draft ...

Document.onbeforescriptexecute - Web APIs
fired when the code in a <script> element declared in an html document is about to start executing. does not fire if the element is added dynamically, eg with appendchild(). syntax document.onbeforescriptexecute = funcref; funcref is a function reference, called when the event is fired. the event's target attribute is set to the script element that is about to be executed. ...
...does not fire if the element is added dynamically, eg with appendchild(). syntax document.onbeforescriptexecute = funcref; funcref is a function reference, called when the event is fired. the event's target attribute is set to the script element that is about to be executed. ...

WindowEventHandlers.onbeforeprint - Web APIs
the onbeforeprint property of the windoweventhandlers mixin is the eventhandler for processing beforeprint events for the current window. these events are raised before the print dialog window is opened. the beforeprint and afterprint events allow pages to change their content before printing starts (perhaps to remove a banner, for example) and then revert those changes after printing has completed. in general, you should prefer the use of an @media print css at-rule, but it may be necessary to use these events in some cases. syntax window.addeventlistener("beforeprint", function(event) { ... }); window.onbeforeprint = function(event) { ... }; polyfill safari does not implement these events, but you can create an equivalent result to the beforeprint event with window.matchmedia('print'). ...
...istener("beforeprint", function(event) { ... }); window.onbeforeprint = function(event) { ... }; polyfill safari does not implement these events, but you can create an equivalent result to the beforeprint event with window.matchmedia('print'). var mediaquerylist = window.matchmedia('print'); mediaquerylist.addlistener(function(mql) { if(mql.matches) { console.log('webkit equivalent of onbeforeprint'); } }); specification specification status comment html living standardthe definition of 'onbeforeprint' in that specification. living standard ...

ReferenceError: can't access lexical declaration`X' before initialization - JavaScript
the javascript exception "can't access lexical declaration `variable' before initialization" occurs when a lexical variable was accessed before it was initialized. this happens within any block statement, when let or const declarations are accessed before they are defined. message referenceerror: use before delaration (edge) referenceerror: can't access lexical declaration `x' before initialization (firefox) referenceerror: 'x' is not defined (chrome) error type referenceerror what went wrong? a lexical variable was accessed before it was initialized. this happens within any block statement, when let or const declarations are accessed before they are defined. examples invalid cases in this case, the variable "foo" is redeclared in the block statement using let. function test() { le...
...as accessed before it was initialized. this happens within any block statement, when let or const declarations are accessed before they are defined. examples invalid cases in this case, the variable "foo" is redeclared in the block statement using let. function test() { let foo = 33; if (true) { let foo = (foo + 55); // referenceerror: can't access lexical // declaration `foo' before initialization } } test(); valid cases to change "foo" inside the if statement, you need to remove the let that causes the redeclaration. function test(){ let foo = 33; if (true) { foo = (foo + 55); } } test(); ...

MozBeforeResize - Archive of obsolete content
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). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...

beforecopy - Archive of obsolete content
the beforecopy event was part of copy logic override, a feature of the clipboard api added in january 2014 and removed in april 2016. ...

beforecut - Archive of obsolete content
the beforecut event was part of copy logic override, a feature of the clipboard api added in january 2014 and removed in april 2016. ...

beforepaste - Archive of obsolete content
the beforepaste event was part of copy logic override, a feature of the clipboard api added in january 2014 and removed in april 2016. ...

beforeselected - Archive of obsolete content
this is set automatically set when needed and you shouldn't adjust it manually. this is primarily useful for themes so that they can adjust the appearance of the area around the selected tab. ...

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. ...

onbeforeaccept - Archive of obsolete content
« xul reference home onbeforeaccept type: script code the code in this attribute is called when the ok button is pressed or the acceptdialog method is called. returning false doesn't currently prevent the dialog from closing, but does prevent saving (bug 474527). ...

resizebefore - Archive of obsolete content
closest the element immediately to the left or above the splitter resizes. farthest the element that is the farthest away from the splitter to the left or above the splitter resizes. flex the closest flexible element resizes. ...

PR_INSERT_BEFORE
inserts an element before another element in a circular list. syntax #include <prclist.h> pr_insert_before ( prclist *elemp1 prclist *elemp2); parameters elemp1 a pointer to the element to be inserted. elemp2 a pointer to the element before which elemp1 is to be inserted. description pr_insert_before inserts the element specified by elemp1 into the circular list, before the element specified by elemp2. ...

BeforeInstallPromptEvent.prompt() - Web APIs
the prompt() method of the beforeinstallpromptevent interface allows a developer to show the install prompt at a time of their own choosing. syntax beforeinstallpromptevent.prompt() parameters none. returns an empty promise. example var istoosoon = true; window.addeventlistener("beforeinstallprompt", function(e) { if (istoosoon) { e.preventdefault(); // prevents prompt display // prompt later instead: settimeout(function() { istoosoon = false; e.prompt(); // throws if called more than once or default not prevented }, 10000); } // the event was re-dispatched in response to our request // ... }); ...

Element: beforescriptexecute event - Web APIs
cancelling the event prevents the script from executing. it is a proprietary event specific to gecko (firefox). ...

NodeIterator.pointerBeforeReferenceNode - Web APIs
the nodeiterator.pointerbeforereferencenode read-only property returns a boolean flag that indicates whether the nodefilter is anchored before (if this value is true) or after (if this value is false) the anchor node indicated by the nodeiterator.referencenode property. syntax flag = nodeiterator.pointerbeforereferencenode; example var nodeiterator = document.createnodeiterator( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); flag = nodeiterator.pointerbeforereferencenode; specifications specification status comment domthe definition of 'nodeiterator.pointerbeforereferencenode' in that specification. living standard initial definition. ...

Range.setEndBefore() - Web APIs
the range.setendbefore() method sets the end position of a range relative to another node. the parent node of end of the range will be the same as that for the referencenode. syntax range.setendbefore(referencenode); parameters referencenode the node to end the range before. example var range = document.createrange(); var referencenode = document.getelementsbytagname("div").item(0); range.setendbefore(referencenode); specifications specification status comment domthe definition of 'range.setendbefore()' in that specification. living standard no change. document object model (dom) level 2 traversal and range specificationthe definition of 'range.setendbefore()' in that specification. obsolete initial specification. ...

Range.setStartBefore() - Web APIs
the range.setstartbefore() method sets the start position of a range relative to another node. the parent node of the start of the range will be the same as that for the referencenode. syntax range.setstartbefore(referencenode); parameters referencenode the node before which the range should start. example var range = document.createrange(); var referencenode = document.getelementsbytagname("div").item(0); range.setstartbefore(referencenode); specifications specification status comment domthe definition of 'range.setstartbefore()' in that specification. living standard no change. document object model (dom) level 2 traversal and range specificationthe definition of 'range.setstartbefore()' in that specification. obsolete initial specif...

Window.onmozbeforepaint - Web APIs
obsolete since gecko 11 (firefox 11 / thunderbird 11 / seamonkey 2.8)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. summary an event handler for the mozbeforepaint event. this is used in concert with the window.mozrequestanimationframe() method to perform smooth, synchronized animations from javascript code. syntax window.onmozbeforepaint = funcref; funcref is the handler function. example see window.mozrequestanimationframe() for an example. notes this event fires immediately before the browser window is repainted, if the event has been requested by one or more scripts calling window.mozrequestanimationframe(). the event handler receives as an input parameter an event whos...

substring-before - XPath
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the substring-before function returns a string that is the part of a given string before a given substring. syntax substring-before(haystack ,needle ) arguments haystack the string to be evaluated. part of this string will be returned. needle the substring to search for. everything before the first occurrence ofneedle inhaystack will be returned. returns a string. examples xpath example output substring-before('aa-bb','-') aa substring-before('aa-bb','a') (empty string) substring-before('aa-bb','b') aa- substring-before('aa-bb','q') (empty string) defined xpath 1.0 4.2 gecko support supported. ...

Index - Web APIs
tcontroller.abortcontroller() api, abortcontroller, constructor, experimental, fetch, reference the abortcontroller() constructor creates a new abortcontroller object instance. 8 abortcontroller.abort() api, abortcontroller, experimental, fetch, method, reference, abort() the abort() method of the abortcontroller interface aborts a dom request (e.g. a fetch request) before it has completed. this is able to abort fetch requests, consumption of any response body, and streams. 9 abortcontroller.signal api, abortcontroller, experimental, fetch, property, reference, signal the signal read-only property of the abortcontroller interface returns an abortsignal object instance, which can be used to communicate with/abort a dom request as desired. ...
...status api, guide, mobile, obsolete, overview the battery status api, more often referred to as the battery api, provides information about the system's battery charge level and lets you be notified by events that are sent when the battery level or charging status change. this can be used to adjust your app's resource usage to reduce battery drain when the battery is low, or to save changes before the battery runs out in order to prevent data loss. 264 batterymanager api, battery api, device api, interface, obsolete, reference, référence(2) the batterymanager interface provides ways to get information about the system's battery charge level. 265 batterymanager.charging api, battery api, needsmarkupwork, property, reference, référence(2) a boole...
...e events. these events occur when the battery level is updated. 273 beacon api guide, overview, web performance, user behavior tracker, user tracker the beacon interface is used to schedule an asynchronous and non-blocking request to a web server. beacon requests use the http post method and requests typically do not require a response. ...
...And 94 more matches

Index - Archive of obsolete content
avascript:tools, tools, web development, web development:tools in versions of firefox prior to firefox 3, all javascript exceptions were always logged into the error console if they remained unhandled at the time execution returned back into c++ code. as a result, if, for example, c++ code called a javascript component, which threw an exception, that exception would be logged to the console before control was returned to the c++ caller. 434 existing content this is a list of existing mozilla.org documentation. it needs to be checked, prioritized, and migrated. 435 extension frequently asked questions this is quick set of answers to the most common issues with extension development. they are currently written with mostly firefox in mind, but most ...
... first run jetpack lets you specify arbitrary content that will be shown to your users when they install your jetpack. you can also register a callback that will be called after installation. 511 me the jetpack.me namespace provides mechanisms for introspecting the dynamic state of your jetpack. the namespace currently lives in the future and must be imported before it is used: 512 settings the jetpack.storage.settings namespace allows jetpacks to specify user-configurable settings. jetpack will automatically generate a user interface based on the specification. the settings persist across browser sessions and are stored using the jetpack [simple storage api][]. settings are private to each jetpack and are not accessible by other jetpac...
...pps from internet explorer to mozilla when netscape started the mozilla browser, it made the conscious decision to support w3c standards. as a result, mozilla is not fully backwards-compatible with netscape navigator 4.x and microsoft internet explorer legacy code; for example, mozilla does not support <layer> as i will discuss later. browsers, like internet explorer 4, that were built before the conception of w3c standards inherited many quirks. in this article, i will describe mozilla's quirks mode, which provides strong backwards html compatibility with internet explorer and other legacy browsers. 557 modularization techniques mozilla, xpcom the purpose of this document is provide all the information you need to create a new mozilla module or break existing cod...
...And 17 more matches

sslfnc.html
error code. description nss_init opens the certn.db, keyn.db, and secmod.db files (wheren is a numeric digit) in the specified directory. nss_init isnot idempotent, so call it only once. nss_init opens the database files read-only. if you are performing operations that require write permission, for example s/mime operations such as adding a certificate, use nss_initreadwrite instead. before calling nss_init, your program must call pr_init. the policy flags for all cipher suites are turned off by default, disallowing all cipher suites. therefore, an application cannot use nss to perform any cryptographic operations until after it enables appropriate cipher suites by calling one of the ssl export policy functions: nss_setdomesticpolicy, nss_setexportpolicy, and nss_setfrancepoli...
...ieve the error code. description nss_initreadwrite opens the certn.db, keyn.db, and secmod.db files (wheren is a numeric digit) with both read and write permission in the specified directory. nss_initreadwrite isnot idempotent, so call it only once. use nss_initreadwrite rather than nss_init if you are performing operations that require write permission, such as some s/mime operations. before calling nss_initreadwrite, your program must call pr_init. the policy flags for all cipher suites are turned off by default, disallowing all cipher suites. therefore, an application cannot use nss to perform any cryptographic operations until after it enables appropriate cipher suites by calling one of the ssl export policy functions. nss_nodb_init performs tasks required to run network s...
...success. if unsuccessful, secfailure. use pr_geterror to retrieve the error code. description nss_nodb_init opens only the temporary database and the internal pkcs #112 module. unlike nss_init, nss_nodb_init allows applications that do not have access to storage for databases to run raw crypto, hashing, and certificate functions. nss_nodb_init isnot idempotent, so call it only once. before calling nss_nodb_init, your program must call pr_init. the policy flags for all cipher suites are turned off by default, disallowing all cipher suites. therefore, an application cannot use nss to perform any cryptographic operations until after it enables appropriate cipher suites by calling one of the ssl export policy functions. ssl_optionsetdefault changes the default value of a spec...
...And 14 more matches

Observer Notifications
rs. this occurs after any profile migration. profile-after-change this is fired after all the observers for profile-do-change have been notified. you can register with nsicategorymanager to receive this notification. prior to firefox 3.5, this was available to observers observing the app-startup/xpcom-startup notification. final-ui-startup triggered just before the first window for the application is displayed. sessionstore-windows-restored sent by the session restore process to indicate that all initial browser windows have opened. note that while the window are open and the chrome loaded the tabs in the windows may still be being restored after this notification. note: this notification is specific to firefox and seamonkey 2.
...n' or 'restart'. profile-change-net-teardown the network connection is going offline at this point. note: the data value for this notification is always 'shutdown-persist'. profile-change-teardown part of the shutdown, profile data is still available at this point. note: the data value for this notification is always 'shutdown-persist'. ...
... profile-change-net-teardown the network connection is going offline at this point. note: the data value for this notification is always 'shutdown-persist'. profile-change-teardown part of the shutdown, profile data is still available at this point. note: the data value for this notification is always 'shutdown-persist'. profile-before-change called just before the profile is lost. ...
...And 14 more matches

WebRequest.jsm
o write cross-browser add-on code. there are some differences between this api and chrome's, though: see chrome incompatibilities for the details. usage to import webrequest, use code like: let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); the webrequest object has the following properties, each of which corresponds to a specific stage in executing a web request: onbeforerequest onbeforesendheaders onsendheaders onheadersreceived onresponsestarted oncompleted each of these objects defines two functions: addlistener(callback, filter, opt_extrainfospec) removelistener(callback) adding listeners use addlistener to add a listener to a particular event. it takes one mandatory argument and two optional arguments, as detailed below. name type ...
...opt_extrainfospec argument lets you pass extra instructions for the handling of events. the instructions you can pass here vary depending on the event you're listening to: see the event-specific documentation for details. in particular, "blocking" may be passed to several event types, and will make the event dispatch synchronous, so the browser will wait for the event listener to return before continuing with the request. this then enables the event listener to modify or cancel the request. see modifying & canceling requests. some examples of using addlistener(). to remove a listener for an event, call removelistener on the event in question, passing it the listener to remove. filtering the filter argument is the second argument to addlistener(). if you don't pass filter,...
...hat is, the webrequest event that your listener is attached to. for example, it obviously doesn't make sense to cancel a network request after it has completed. the general approach to modifying and canceling requests is this: first, pass an array containing the string "blocking" as the third argument to your addlistener() call. this tells the browser to wait for your event listener to return before continuing with the request. next, return an object from the listener that contains instructions for what the browser should do with this request. there are four things you can do with a request: cancel it redirect it modify request headers modify response headers. to perform one of these operations, include a property with the appropriate name in the object returned from the listener,...
...And 12 more matches

Menu - Archive of obsolete content
me or content, as popup menus or context menus. two namespaces are associated with this api: jetpack.menu, which provides access to the browser's menus, and jetpack.menu, the constructor for making new menus. the api is fairly comprehensive, so you may want to start by reading through some examples. because it is still under development, the api currently lives in the future and must be imported before it is used: jetpack.future.import("menu"); menus all menus in jetpack are jetpack.menu objects, including both built-in firefox menus and menus that features create. to create a new menu, use one of the jetpack.menu constructors below. constructors jetpack.menu() creates an empty menu. jetpack.menu(menuitems) creates a menu with the given items. parameters menuitems an array of m...
...items) creates a menu with the given items. parameters menuitems an array of menuitems. jetpack.menu(properties) creates a menu with specific properties. parameters properties an object defining any of the properties below. the items property may be used to define an array of menuitems. ...
... menuitems an array of menuitems. jetpack.menu(properties) creates a menu with specific properties. parameters properties an object defining any of the properties below. the items property may be used to define an array of menuitems. properties property type description beforehide function a function invoked just before the menu is hidden. if the menu is a context menu, it is called as beforehide(menu, context) and otherwise as beforehide(menu). menu is the menu object to which beforehide is attached. context is an object describing the context in which the menu was shown. beforeshow function a function invoked just before the menu is shown. if the menu is a context menu, it is calle...
...And 10 more matches

Drawing graphics - Learn web development
e: you should generally set the size of the image using html attributes or dom properties, as explained above. you could use css, but the trouble then is that the sizing is done after the canvas has rendered, and just like any other image (the rendered canvas is just an image), the image could become pixellated/distorted. getting the canvas context and final setup we need to do one final thing before we can consider our canvas template finished. to draw onto the canvas we need to get a special reference to the drawing area called a context. this is done using the htmlcanvaselement.getcontext() method, which for basic usage takes a single string as a parameter representing the type of context you want to retrieve. in this case we want a 2d canvas, so add the following javascript line below th...
...vas.getcontext('2d'); note: other context values you could choose include webgl for webgl, webgl2 for webgl 2, etc., but we won't need those in this article. so that's it — our canvas is now primed and ready for drawing on! the ctx variable now contains a canvasrenderingcontext2d object, and all drawing operations on the canvas will involve manipulating this object. let's do one last thing before we move on. we'll color the canvas background black to give you a first taste of the canvas api. add the following lines at the bottom of your javascript: ctx.fillstyle = 'rgb(0, 0, 0)'; ctx.fillrect(0, 0, width, height); here we are setting a fill color using the canvas' fillstyle property (this takes color values just like css properties do), then drawing a rectangle that covers the entire ar...
...erences: we have set the last parameter of arc() to true, meaning that the arc is drawn counterclockwise, which means that even though the arc is specified as starting at -45 degrees and ending at 45 degrees, we draw the arc around the 270 degrees not inside this portion. if you were to change true to false and then re-run the code, only the 90 degree slice of the circle would be drawn. before calling fill(), we draw a line to the center of the circle. this means that we get the rather nice pac-man-style cutout rendered. if you removed this line (try it!) then re-ran the code, you'd get just an edge of the circle chopped off between the start and end point of the arc. this illustrates another important point of the canvas — if you try to fill an incomplete path (i.e. one that is not ...
...And 10 more matches

nsIHttpChannel
attribute is a hint to the channel to indicate whether or not the underlying http transaction should be allowed to be pipelined with other transactions. this should be set to false, for example, if the application knows that the corresponding document is likely to be very large. this attribute is true by default, though other factors may prevent pipelining. this attribute may only be set before the channel is opened. exceptions thrown ns_error_failure if set after the channel has been opened. redirectionlimit unsigned long this attribute specifies the number of redirects this channel is allowed to make. if zero, the channel will fail to redirect and will generate a ns_error_redirect_loop failure status. note: an http redirect r...
...he redirected channel's redirectionlimit attribute. the initial value for this attribute may be a configurable preference (depending on the implementation). referrer nsiuri get or set the uri of the http referer: header. this is the address (uri) of the resource from which this channel's uri was obtained (see rfc2616 section 14.36). this attribute may only be set before the channel is opened. note: the channel may silently refuse to set the referer: header if the uri does not pass certain security checks (e.g., a "https://" url will never be sent as the referrer for a plaintext http request). the implementation is not required to throw an exception when the referrer uri is rejected. exceptions thrown ns_error_in_progress if se...
... ns_error_in_progress if set after the channel has been opened. ns_error_failure if used for setting referrer during visitrequestheaders(). getting the value will not throw. requestmethod acstring set or get the http request method (default is "get"). setter is case insensitive; getter returns an uppercase string. this attribute may only be set before the channel is opened. note: the data for a "post" or "put" request can be configured via nsiuploadchannel. however, after setting the upload data, it may be necessary to set the request method explicitly. the documentation for nsiuploadchannel has further details. exceptions thrown ns_error_in_progress if set after the channel has been opened. ...
...And 10 more matches

WebIDL bindings
rface, you need to do the following: if your interface doesn't inherit from any other interfaces, inherit from nswrappercache and hook up the class to the cycle collector so it will trace the wrapper cache properly. note that you may not need to do this if your objects can only be created, never gotten from other objects. if you also inherit from nsisupports, make sure the nsisupports comes before the nswrappercache in your list of parent classes. if your interface does inherit from another interface, just inherit from the c++ type that the other interface corresponds to. if you do need to hook up cycle collection, it will look like this in the common case of also inheriting from nsisupports: // add strong pointers your class holds here. if you do, change to using // ns_impl_cycle_co...
...ring& (outparam) nsastring& (outparam) nsstring& (outparam) nsstring any any is represented in three different ways, depending on use: any arguments become js::handle<js::value>. they will be in the compartment of the passed-in jscontext. any return values become a js::mutablehandle<js::value> out param appended to the argument list. this comes after all idl arguments, but before the errorresult&, if any, for the method. the return value is allowed to be in any compartment; bindings will wrap it into the context compartment as needed. any dictionary members and sequence elements become js::value. the dictionary members and sequence elements are guaranteed to be marked by whomever puts the sequence or dictionary on the stack, using sequencerooter and dictionaryrooter. ...
... correspond to these c++ function declarations: float myattr(); void setmyattr(float value); double mymethod(const nullable<double>& arg); domstring strings are reflected in three different ways, depending on use: string arguments become const nsastring&. string return values become a mozilla::dom::domstring& out param appended to the argument list. this comes after all idl arguments, but before the errorresult&, if any, for the method. note that this allows callees to declare their methods as taking an nsastring& or nsstring& if desired. strings in sequences, dictionaries, owning unions, and variadic arguments become nsstring. nullable strings are represented by the same types as non-nullable ones, but the string will return true for domstringisnull(). returning null as a string valu...
...And 10 more matches

Box-shadow generator - CSS: Cascading Style Sheets
ype="move-up"> </div> <div class="button" data-type="move-down"> </div> </div> <div id="stack_container"></div> </div> <div id="preview_zone"> <div id="layer_menu" class="col span_12"> <div class="button" id="element" data-type="subject" data-title="element"> element </div> <div class="button" id="before" data-type="subject" data-title=":before"> :before <span class="delete" data-type="disable"></span> </div> <div class="button" id="after" data-type="subject" data-title=":after"> :after <span class="delete" data-type="disable"></span> </div> <div class="u...
...ta-title=":before"> :before <span class="delete" data-type="disable"></span> </div> <div class="button" id="after" data-type="subject" data-title=":after"> :after <span class="delete" data-type="disable"></span> </div> <div class="ui-checkbox" data-topic='before' data-label=":before"></div> <div class="ui-checkbox" data-topic='after' data-label=":after"></div> </div> <div id="preview"> <div id="obj-element"> <div class="content"> </div> <div id="obj-before"> </div> <div id="obj-after"> </div> </div> </div> ...
...s="menu"></div> <div class="title"> css code </div> <div class="group" style="border-top-left-radius: 0;"> <div class="output" data-topic="element" data-name="element" data-prop="width height background-color position=[relative] box-shadow"> </div> <div class="output" data-topic="before" data-name="element:before" data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> </div> <div class="output" data-topic="after" data-name="element:after" data-prop="content=[&quot;&quot;] position=[absolute] w...
...And 10 more matches

Introduction to Public-Key Cryptography - Archive of obsolete content
" information on digital signatures is available from "digital signatures." public-key cryptography is a set of well-established techniques and standards for protecting communications from eavesdropping, tampering, and impersonation attacks. encryption and decryption allow two communicating parties to disguise information they send to each other. the sender encrypts, or scrambles, information before sending it. the receiver decrypts, or unscrambles, the information after receiving it. while in transit, the encrypted information is unintelligible to an intruder. tamper detection allows the recipient of information to verify that it has not been modified in transit. any attempt to modify data or substitute a false message for a legitimate one will be detected. authentication allows the recip...
...t, or other commonly used personal ids, a certificate provides generally recognized proof of a person's identity. public-key cryptography uses certificates to address the problem of impersonation. to get a driver's license, you typically apply to a government agency, such as the department of motor vehicles, which verifies your identity, your ability to drive, your address, and other information before issuing the license. to get a student id, you apply to a school or college, which performs different checks (such as whether you have paid your tuition) before issuing the id. to get a library card, you may need to provide only your name and a utility bill with your address on it. certificates work much the same way as any of these familiar forms of identification. certificate authorities (cas) ...
...s. they can be either independent third parties or organizations running their own certificate-issuing server software (such as red hat certificate system). the methods used to validate an identity vary depending on the policies of a given ca-just as the methods to validate other forms of identification vary depending on who is issuing the id and the purpose for which it will be used. in general, before issuing a certificate, the ca must use its published verification procedures for that type of certificate to ensure that an entity requesting a certificate is in fact who it claims to be. the certificate issued by the ca binds a particular public key to the name of the entity the certificate identifies (such as the name of an employee or a server). certificates help prevent the use of fake publi...
...And 9 more matches

UI pseudo-classes - Learn web development
t setting and controlling validation constraints in our next article — client-side form validation — but for now we'll keep things simple with regards to form validation, so it doesn't confuse things. styling inputs based on whether they are required or not one of the most basic concepts with regards to client-side form validation is whether a form input is required (it has to be filled in before the form can be submitted) or optional. <input>, <select>, and <textarea> elements have a required attribute available which, when set, means that you have to fill in that control before the form will successfully submit. for example: <form> <fieldset> <legend>feedback form</legend> <div> <label for="fname">first name: </label> <input id="fname" name="fname" type="text" re...
... buttons has the required attribute, all the radio buttons will be invalid until one is selected, but only the one with the attribute assigned will actually match :required. using generated content with pseudo-classes in previous articles, we've seen the usage of generated content, but we thought now would be a good time to talk about it in a bit more detail. the idea is that we can use the ::before and ::after pseudo-elements along with the content property to make a chunk of content appear before or after the affected element. the chunk of content is not added to the dom, so is invisible to screenreaders; it is part of the document's styles. because it is a pseudo element, it can be targetted with styles in the same way that any actual dom node can. this is really useful when you want to ...
...s in the same way that any actual dom node can. this is really useful when you want to add a visual indicator to an element, such as a label or icon, but don't want it to be picked up by assistive technologies. ...
...And 9 more matches

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
and to repeatedly execute a block of code asynchronously until you tell it to stop. these functions are: settimeout() execute a specified block of code once after a specified time has elapsed. setinterval() execute a specified block of code repeatedly with a fixed time delay between each call. requestanimationframe() the modern version of setinterval(). ...
...depending on how processor-intensive these operations are, they can delay your async code even further, as any async code will execute only after the main thread is available. ...
...ode will execute only after the main thread is available. (in other words, when the stack is empty.) you will learn more on this matter as you progress through this article. in any case, these functions are used for running constant animations and other background processing on a web site or application. in the following sections we will show you how they can be used. settimeout() as we said before, settimeout() executes a particular block of code once after a specified time has elapsed. it takes the following parameters: a function to run, or a reference to a function defined elsewhere. a number representing the time interval in milliseconds (1000 miliseconds equals 1 second) to wait before executing the code. if you specify a value of 0 (or simply omit the value), the function will ru...
...And 9 more matches

CustomizableUI.jsm
awidgetid, aarea, aoldposition, anewposition) fired when a widget is moved within its area. awidgetid is the widget that was moved, aarea the area it was moved in, aoldposition its old position, and anewposition its new position. onwidgetremoved(awidgetid, aarea) fired when a widget is removed from its area. awidgetid is the widget that was removed, aarea the area it was removed from. ...
...t is moved within its area. awidgetid is the widget that was moved, aarea the area it was moved in, aoldposition its old position, and anewposition its new position. onwidgetremoved(awidgetid, aarea) fired when a widget is removed from its area. awidgetid is the widget that was removed, aarea the area it was removed from. onwidgetbeforedomchange(anode, anextnode, acontainer, aisremoval) fired before a widget's dom node is acted upon by customizableui (to add, move or remove it). anode is the dom node changed, anextnode the dom node (if any) before which a widget will be inserted, acontainer the actual dom container (could be an overflow panel in case of an overflowable toolbar), and awasremoval is true iff the action about to happen is the removal of the dom node. onwidgetafterdomchange(ano...
... onwidgetreset(anode, acontainer) fired after a reset to default placements moves a widget's node to a different location. ...
...And 9 more matches

NSS environment variables
w. variable type description introduced in version nsrandcount integer (byte count) sets the maximum number of bytes to read from the file named in the environment variable nsrandfile (see below). makes nsrandfile usable with /dev/urandom. 3.12.3 nsrandfile string (file name) uses this file to seed the pseudo random number generator. before 3.0 nss_allow_weak_signature_alg boolean (any non-empty value to enable) enables the use of md2 and md4 inside signatures. this was allowed by default before nss 3.12.3. 3.12.3 nss_debug_pkcs11_module string (module name) name the pkcs#11 module to be traced. pkcs #11 module logger 3.6 nss_default_db_type string ("dbm", "sql", or "exter...
...n. the default setting for this option is false. 3.12.5 nss_ssl_server_cache_mutex_timeout integer (seconds) timeout time to detect dead or hung process in multi-process ssl server. default is 30 seconds. 3.4 nss_strict_nofork string ("1", "disabled", or any other non-empty value) it is an error to try to use a pkcs#11 crypto module in a process before it has been initialized in that process, even if the module was initialized in the parent process. beginning in nss 3.12.3, softoken will detect this error. this environment variable controls softoken's response to that error. if set to to "1" or unset, softoken will trigger an assertion failure in debug builds, and will report an error in non-debug builds. if set to "disabled", s...
... in non-debug builds. if set to "disabled", softoken will ignore forks, and behave as it did in older versions. if set to any other non-empty value, softoken will report an error in both debug and non-debug builds. 3.12.3 nss_strict_shutdown string (any non-empty value) will trigger an assertion failure in debug builds when a program tries to shutdown nss before freeing all the resources it acquired from nss while nss was initialized. 3.5 nss_trace_ocsp boolean (any value to enable) enables ocsp tracing. the trace information is written to the file pointed by nspr_log_file (default stderr). see nss tracing 3.12 nss_use_decoded_cka_ec_point boolean (any value to enable) tells nss to send ec key points across...
...And 9 more matches

Bytecode Descriptions
eating objects newinit stack: ⇒ obj create and push a new object with no properties. format: jof_ic newobject, newobjectwithgroup operands: (uint32_t baseobjindex) stack: ⇒ obj create and push a new object of a predetermined shape. the new object has the shape of the template object script->getobject(baseobjindex). subsequent initprop instructions must fill in all slots of the new object before it is used in any other way. for jsop::newobject, the new object has a group based on the allocation site (or a new group if the template's group is a singleton). for jsop::newobjectwithgroup, the new object has the same group as the template object. format: jof_object, jof_ic object operands: (uint32_t objectindex) stack: ⇒ obj push a preconstructed object. going one step further than jsop:...
...jsop::resume. implements: generatoryield and asyncgeneratoryield. format: jof_resumeindex isgenclosing stack: val ⇒ val, res pushes a boolean indicating whether the top of the stack is magicvalue(js_generator_closing). asyncawait stack: value, gen ⇒ promise arrange for this async function to resume asynchronously when value becomes resolved. this is the last thing an async function does before suspending for an await expression. it coerces the awaited value to a promise and effectively calls .then() on it, passing handler functions that will resume this async function call later. see js::asyncfunctionawait. this instruction must appear only in non-generator async function scripts. gen must be the internal generator object for the current frame. after this instruction, the script should...
...etoawait gen asyncawait # resultpromise getaliasedvar ".generator" # resultpromise gen await # resolved gen resumekind afteryield asyncawait arranges for this frame to be resumed later and pushes its result promise. await then suspends the frame and removes it from the stack, returning the result promise to the caller. (if this async call hasn't awaited before, the caller may be user code. otherwise, the caller is self-hosted code using resumegenerator.) in async generators: ... # valuetoawait getaliasedvar ".generator" # valuetoawait gen await # resolved gen resumekind afteryield asyncawait is not used, so (1) the value returned to the caller by await is valuetoawait, not resultpromise; and (2) the ...
...And 9 more matches

Animated PNG graphics
o be displayed. the contents of the canvas are not necessarily available to the decoder. as per the png specification, if a 'bkgd' chunk exists it may be used to fill the canvas if there is no preferrable background. the output buffer is a pixel array with dimensions specified by the width and height parameters of the png 'ihdr' chunk. conceptually, each frame is constructed in the output buffer before being composited onto the canvas. the contents of the output buffer are available to the decoder. the corners of the output buffer are mapped to the corners of the canvas. fully transparent black means red, green, blue and alpha components are all set to zero. for purposes of chunk descriptions, an unsigned int shall be a 32-bit unsigned integer in network byte order limited to the range 0 to (...
... for purposes of chunk descriptions, an unsigned int shall be a 32-bit unsigned integer in network byte order limited to the range 0 to (2^32)-1; an unsigned short shall be a 16-bit unsigned integer in network byte order with the range 0 to (2^16)-1; and a byte shall be an 8-bit unsigned integer with the range 0 to (2^8)-1. error handling apng is designed to allow incremental display of frames before the entire image has been read. this implies that some errors may not be detected until partway through the animation. it is strongly recommended that when any error is encountered decoders should discard all subsequent frames, stop the animation, and revert to displaying the default image. a decoder which detects an error before the animation has started should display the default image. an erro...
...etects an error before the animation has started should display the default image. an error message may be displayed to the user if appropriate. structure an apng stream is a normal png stream as defined in the png specification, with three additional chunk types describing the animation and providing additional frame data. to be recognized as an apng, an 'actl' chunk must appear in the stream before any 'idat' chunks. the 'actl' structure is described below. conceptually, at the beginning of each play the output buffer must be completely initialized to a fully transparent black rectangle, with width and height dimensions from the 'ihdr' chunk. the default image may be included as the first frame of the animation by the presence of a single 'fctl' chunk before 'idat'. otherwise, the default...
...And 9 more matches

Index
stealing the master password. now you might be interest in how to get the nss sources, building and testing nss. 3 building nss guide, nss, security this page has detailed information on how to build nss. because nss is a cross-platform library that builds on many different platforms and has many options, it may be complex to build. please read these instructions carefully before attempting to build. 4 cert_findcertbydercert nss no summary! 5 cert_findcertbyissuerandsn nss no summary! 6 certificate functions nss the public functions listed here are used to interact with certificate databases. 7 cryptography functions nss the public functions listed here perform cryptographic operations bas...
...fig_string pass a configuration string for the module being added to the database. -tempdir temporary-directory give a directory location where temporary files are created during the installation by the -jar option. if no temporary directory is specified, the current directory is used. usage and examples creating database files before any operations can be performed, there must be a set of security databases available. modutil can be used to create these files. the only required argument is the database that where the databases will be located. modutil -create -dbdir [sql:]directory adding a cryptographic module adding a pkcs #11 module means submitting a supporting library file, enabling its ciphers, and...
...ry relative to which files should be installed; for example, it may be the server's root directory. the %temp% directory is created at the beginning of the installation and destroyed at the end. the purpose of %temp% is to hold executable files (such as setup programs) or files that are used by these programs. files destined for the temporary directory are guaranteed to be in place before any executable file is run; they are not deleted until all executable files have finished. absolutepath specifies the destination directory of the file as an absolute path. executable specifies that the file is to be executed during the course of the installation. typically, this string is used for a setup program provided by a module vendor, such as a self-extracting setup ex...
...And 8 more matches

Using IndexedDB - Web APIs
stores, or delete object stores from the previous version that are no longer needed. if you need to change an existing object store (e.g., to change the keypath), then you must delete the old object store and create it again with the new options. (note that this will delete the information in the object store! if you need to save that information, you should read it out and save it somewhere else before upgrading the database.) trying to create an object store with a name that already exists (or trying to delete an object store with a name that does not already exist) will throw an error. if the onupgradeneeded event exits successfully, the onsuccess handler of the open database request will then be triggered. blink/webkit supports the current version of the spec, as shipped in chrome 23+ a...
...plicates // so we can't use a unique index. objectstore.createindex("name", "name", { unique: false }); // create an index to search customers by email. we want to ensure that // no two customers have the same email, so use a unique index. objectstore.createindex("email", "email", { unique: true }); // use transaction oncomplete to make sure the objectstore creation is // finished before adding data into it. objectstore.transaction.oncomplete = function(event) { // store values in the newly created objectstore. var customerobjectstore = db.transaction("customers", "readwrite").objectstore("customers"); customerdata.foreach(function(customer) { customerobjectstore.add(customer); }); }; }; as indicated previously, onupgradeneeded is the only place where ...
...tore has the key generator, the key for the name value is generated automatically. // the added records would be like: // key : 1 => value : "bill" // key : 2 => value : "donna" customerdata.foreach(function(customer) { objstore.add(customer.name); }); }; for more details about the key generator, please see "w3c key generators". adding, retrieving, and removing data before you can do anything with your new database, you need to start a transaction. transactions come from the database object, and you have to specify which object stores you want the transaction to span. once you are inside the transaction, you can access the object stores that hold your data and make your requests. next, you need to decide if you're going to make changes to the database or if you jus...
...And 8 more matches

Splitters - Archive of obsolete content
e the size of the sidebar panel by dragging the bar in-between the two frames. you can also hide the sidebar by clicking the notch. splitter element this feature is accomplished using an element called a splitter. it creates a skinny bar between two sections which allows these sections to be resized. ...
... state indicates the state of the splitter. ...
... state indicates the state of the splitter. set this to open, the default, to have the split panel initially open, or set it to collapsed to have one of the panels shrunk down (collapsed) and the other occupying all of the space. ...
...And 7 more matches

create fancy boxes - Learn web development
css boxes are the building blocks of any web page styled with css. making them nice looking is both fun and challenging. it's fun because it's all about turning a design idea into working code; it's challenging because of annoying constraints and crazy freedom in the use of css. let's do some fancy boxes. before we start getting into the practical side of it, make sure you are familiar with the css box model. it's also a good idea, but not a prerequisite, to be familiar with some css layout basics. on the technical side, creating fancy boxes are all about mastering css border and background properties and how to apply them to a given box. but beyond the technics its also all about unleashing your creativity. it will not be done in one day, and some web developers spend their whole life...
...mple piece of html possible, a simple element: <div class="fancy">hi! i want to be fancy.</div> ok, that's a very small bit of html, what can we tweak on that element? all of the following: its box model properties: width, height, padding, border, etc. its background properties: background, background-color, background-image, background-position, background-size, etc. its pseudo-element: ::before and ::after and some aside properties like: box-shadow, transform, outline, etc. so we have a very large playground. let the fun begin. box model tweak the box model alone allows us to do some basic stuff, like adding simple borders, making squares, etc.. it starts to get interesting when you push the properties to the limit by having negative padding and/or- margin by having border-radius l...
...ll get an ellipsis rather than a circle ;) */ width : 4em; height : 4em; /* and let's turn the square into a circle */ border-radius: 100%; } yes, we get a circle: backgrounds when we talk about a fancy box, the core properties to handle that are background-* properties. when you start fiddling with backgrounds it's like your css box is turned into a blank canvas you'll fill. before we jump to some practical examples, let's step back a bit as there are two things you should know about backgrounds. it's possible to set several backgrounds on a single box. they are stacked on top of each other like layers. backgrounds can be either solid colors or images: solid color always fills the whole surface but images can be scaled and positioned. <div class="fancy">hi! i want to...
...And 7 more matches

Index - Learn web development
rtain way. the enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. for example, take the following line of content: 40 how the web works beginner, client, dns, http, ip, infrastructure, learn, server, tcp, l10n:priority this theory is not essential to writing web code in the short term, but before long you'll really start to benefit from understanding what's happening in the background. 41 installing basic software beginner, browser, learn, setup, tools, webmechanics, l10n:priority, text editor that looks like a scary list, but fortunately, you can get started in web development without knowing anything about most of these. in this article, we'll just set you up with a...
... useful background on the web — how it came about, what web standard technologies are, how they work together, why "web developer" is a great career to choose, and what kinds of best practices you'll learn about through the course. 45 what will your website look like? assets, beginner, composing, content, deprecated, design, fonts, learn, simple, l10n:priority, step by step before doing anything, you need some ideas. what should your website actually do? a website can do basically anything, but, for your first try, you should keep things simple. we'll start by creating a simple webpage with a heading, an image, and a few paragraphs. 46 how to contribute to the learning area on mdn beginner, contribute, documentation, guide, learn, mdn meta, l10n:priority ...
...econd), discusses what they are useful for, and considers their inherent issues. 52 general asynchronous programming concepts javascript, learn, promises, threads, asynchronous, blocking in this article, we'll run through a number of important concepts relating to asynchronous programming, and how this looks in web browsers and javascript. you should understand these concepts before working through the other articles in the module. 53 graceful asynchronous programming with promises beginner, codingscripting, guide, javascript, learn, promises, async, asynchronous, catch, finally, then promises are a comparatively new feature of the javascript language that allow you to defer further actions until after a previous action has completed, or respond to its f...
...And 7 more matches

content - CSS: Cascading Style Sheets
annot be combined with other values */ content: normal; content: none; /* <image> values */ content: url("http://www.example.com/test.png"); content: linear-gradient(#e66465, #9198e5); /* alt text for generated content, added in the level 3 specification */ content: url("http://www.example.com/test.png") / "this is the alt text"; /* values below can only be applied to generated content using ::before and ::after */ /* <string> value */ content: "prefix"; /* <counter> values */ content: counter(chapter_counter); content: counters(section_counter, "."); /* attr() value linked to the html attribute value */ content: attr(value string); /* language- and position-dependent keywords */ content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote; /* except for nor...
...dependent keywords */ content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote; /* except for normal and none, several values can be used simultaneously */ content: open-quote chapter_counter; /* global values */ content: inherit; content: initial; content: unset; syntax values none the pseudo-element is not generated. normal computes to none for the ::before and ::after pseudo-elements. <string> specifies the "alt text" for the element. this value can be any number of text characters. non-latin characters must be encoded using their unicode escape sequences: for example, \000a9 represents the copyright symbol. <image> an <image>, denoted by the <url> or <gradient> data type, or part of the webpage, defined by the element() function, denoting the ...
...er combinations will not announce it. if the content conveys information that is critical to understanding the page's purpose, it is better to include it in the main document. accessibility support for css generated content – tink explanation of wcag, guideline 1.3 – mdn understanding success criterion 1.3.1 | w3c understanding wcag 2.0 formal definition initial valuenormalapplies to::before and ::after pseudo-elementsinheritednocomputed valueon elements, always computes to normal. on ::before and ::after, if normal is specified, computes to none. otherwise, for uri values, the absolute uri; for attr() values, the resulting string; for other keywords, as specified.animation typediscrete formal syntax normal | none | [ <content-replacement> | <content-list> ] [/ <string> ]?where <co...
...And 7 more matches

Event reference
fic browsers; for example, mozilla-specific events are listed so that add-ons can use them to interact with the browser. most common categories resource events event name fired when error a resource failed to load. abort the loading of a resource has been aborted. load a resource and its dependent resources have finished loading. beforeunload the window, the document and its resources are about to be unloaded. unload the document or a dependent resource is being unloaded. network events event name fired when online the browser has gained access to the network. offline the browser has lost access to the network. focus events event name fire...
...ioniteration a css animation is repeated. css transition events event name fired when transitionstart a css transition has actually started (fired after any delay). transitioncancel a css transition has been cancelled. transitionend a css transition has completed. ...
... been cancelled. transitionend a css transition has completed. transitionrun a css transition has begun running (fired before any delay starts). form events event name fired when reset the reset button is pressed submit the submit button is pressed printing events event name fired when beforeprint the print dialog is opened afterprint the print dialog is closed text composition events event name fired when compositionstart the composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition). compositionupdate a character is added to a passage...
...And 7 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
languages, data types in computer science, a boolean is a logical data type that can have only the values true or false. 37 boot2gecko boot2gecko, firefox os, glossary, infrastructure, intro boot2gecko (b2g) is the engineering codename for firefox os and refers to builds that haven't yet received official firefox os branding. (firefox os was also often called boot2gecko before the project had an official name.) 38 bootstrap bootstrap, css, glossary, intro, framework bootstrap is a free, open source html, css, and javascript framework for quickly building responsive websites. 39 bounding box bounding box, codingscripting, design, glossary the bounding box of an element is the smallest possible rectangle (aligned with the axes of...
...roperties. 190 gzip compression glossary, compression, gzip gzip is a file format used for file compression and decompression. it is based on the deflate algorithm that allows files to be made smaller in size which allows for faster network transfers. gzip is commonly supported by web servers and modern browsers, meaning that servers can automatically compress files with gzip before sending them, and browsers can uncompress files upon receiving them. 191 hmac cryptography, glossary, hash, security hmac is a protocol used for cryptographically authenticating messages. 192 hpkp glossary, security http public key pinning (hpkp) is a security feature that tells a web client to associate a specific cryptographic public key with a certain ...
...to achieve hardware-accelerated rendering. 301 openssl glossary, security openssl is an open-source implementation of ssl and tls. 302 opera browser browser, glossary, navigation, opera, opera browser opera is the fifth most used web browser, publicly released in 1996 and initially running on windows only. opera uses blink as its layout engine since 2013 (before that, presto). opera also exists in mobile and tablet versions. 303 operand codingscripting, glossary an operand is the part of an instruction representing the data manipulated by the operator. for example, when you add two numbers, the numbers are the operand and "+" is the operator. 304 operator codingscripting, glossary reserved syntax consisting of pu...
...And 6 more matches

How to build custom form controls - Learn web development
ss how, when, and whether building your own control makes sense, and what to consider when building a control is a requirement. note: we'll focus on building the control, not on how to make the code generic and reusable; that would involve some non-trival javascript code and dom manipulation in an unknown context, and that is out of the scope of this article. design, structure, and semantics before building a custom control, you should start by figuring out exactly what you want. this will save you some precious time. in particular, it's important to clearly define all the states of your control. to do this, it's good to start with an existing control whose states and behavior are well known, so that you can simply mimic those as much as possible. in our example, we will rebuild the <selec...
...ons are obvious so we will handle them, but it can be a real problem for exotic new controls. when it comes to standardized elements, of which the <select> is one, the specification authors spent an inordinate amount of time specifying all interactions for every use case for every input device. creating new controls is not that easy, especially if you are creating something that has not been done before, and therefore which nobody has the slightest idea of what the expected behaviors and interactions are. at least select has been done before, so we know how it should behave! designing new interactions is generally only an option for very large industry players who have enough reach that an interaction they create can become a standard. for example, apple introduced the scroll wheel with the ipo...
...l to life with javascript now that our design and structure are ready, we can write the javascript code to make the control actually work. warning: the following is educational code, not production code, and should not be used as-is. it is neither future-proof nor will not work on legacy browsers. it also has redundant parts that should be optimized in production code. why isn't it working? before starting, it's important to remember javascript in the browser is an unreliable technology. custom controls rely on javascript to tie everything together. however, there are cases in which javascript isn't able to run in the browser: the user has turned off javascript: this is unusual; very few people turn off javascript nowadays. the script did not load: this is one of the most common cases,...
...And 6 more matches

What is JavaScript? - Learn web development
ike a factory that takes in raw materials (the code) and outputs a product (the web page). a very common use of javascript is to dynamically modify html and css to update a user interface, via the document object model api (as mentioned above). note that the code in your web documents is generally loaded and executed in the order it appears on the page. if the javascript loads and tries to run before the html and css it is affecting has been loaded, errors can occur. you will learn ways around this later in the article, in the script loading strategies section. browser security each browser tab has its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separat...
...splay. if you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the browser developer console — typeerror: para is undefined. this means that the para object does not exist yet, so we can't add an event listener to it. note: this is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them. interpreted versus compiled code you might hear the terms interpreted and compiled in the context of programming. in interpreted languages, the code is run from top to bottom and the result of running the code is immediately returned. you don't have to transform the code into a different form before the browser runs it. the code is received in its programmer-friend...
...for example, c/c++ are compiled into machine code that is then run by the computer. ...
...And 6 more matches

Shell global objects
lace any callback set by setinterruptcallback. interruptif(cond) requests interrupt callback if cond is true. if a callback function is set via timeout or setinterruptcallback, it will be called. no-op otherwise. invokeinterruptcallback(fun) forcefully set the interrupt flag and invoke the interrupt handler. if a callback function is set via timeout or setinterruptcallback, it will be called. before returning, fun is called with the return value of the interrupt handler. setinterruptcallback(func) sets func as the interrupt callback function. calling this function will replace any callback set by timeout. enablelastwarning() enable storing the last warning. disablelastwarning() disable storing the last warning. getlastwarning() returns an object that represents the last warning. cle...
...fun did. hook gets passed the requested code's url, and should return a string. notes: spidermonkey may assert if the returned code isn't close enough to the script's real code, so this function is not fuzzer-safe. the runtime can have only one source retrieval hook active at a time. if fun is not careful, hook could be asked to retrieve the source code for compilations that occurred long before it was set, and that it knows nothing about. the reverse applies as well: the original hook, that we reinstate after the call to fun completes, might be asked for the source code of compilations that fun performed, and which, presumably, only hook knows how to find. wrapwithproto(obj) wrap an object into a noop wrapper with prototype semantics. note: this is not fuzzing safe because it ca...
..., 'shrinking']) run the garbage collector. when obj is given, gc only its zone. if zone is given, gc any zones that were scheduled for gc via schedulegc. if shrinking is passed as the optional second argument, perform a shrinking gc rather than a normal gc. minorgc([abouttooverflow]) run a minor collector on the nursery. when abouttooverflow is true, marks the store buffer as about-to-overflow before collecting. gcparam(name [, value]) wrapper for js_[gs]etgcparameter. the name is one of: maxbytes maxmallocbytes gcbytes gcnumber mode unusedchunks totalchunks slicetimebudget markstacklimit highfrequencytimelimit highfrequencylowlimit highfrequencyhighlimit highfrequencyheapgrowthmax highfrequencyheapgrowthmin lowfrequencyheapgrowth dynamicheapgrowth dynami...
...And 6 more matches

nsITreeView
itreeview in lieu of dom methods for tree creation can improve performance dramatically, and removes the need to make changes to the tree manually when changes to the database occur. further information about creating treeviews is given in the xul tutorial. ...
...ree creation can improve performance dramatically, and removes the need to make changes to the tree manually when changes to the database occur. further information about creating treeviews is given in the xul tutorial. ...
... nsitreeselection the selection for this view. constants constant value description progress_normal 1 note: renamed from progressnormal in gecko 1.8 progress_undetermined 2 note: renamed from progressundetermined in gecko 1.8 progress_none 3 note: renamed from progressnone in gecko 1.8 drop_before -1 drop_on 0 drop_after 1 indropbefore 0 obsolete since gecko 1.8 indropon 1 obsolete since gecko 1.8 indropafter 2 obsolete since gecko 1.8 methods candrop() methods used by the drag feedback code to determine if a drag is allowable at the current location. to get the behavior where drops are only allowe...
...And 6 more matches

splitter - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element which should appear before or after an element inside a container. when the splitter is dragged, the sibling elements of the splitter are resized. if a grippy is placed inside the splitter, one sibling element of the splitter is collapsed when the grippy is clicked. more information is available in the xul tutorial. attributes collapse, resizeafter, resizebefore, state, substate style classes tree-splitter examples <!-- this bar has some styling associated with it. the vbox is used to hold the .png image that a user clicks on to resize the search bar.--> <splitter tooltiptext="resize the search box" oncommand="alert('the splitter was dragged')"> <vbox id="example...
...litter was dragged')"> <vbox id="example_vbox" /> </splitter> attributes collapse type: one of the values below determines which side of the splitter is collapsed when its grippy is clicked. if this attribute is not specified, the splitter will not cause a collapse. you should put a grippy element inside the splitter when it is used for collapsing. none no collapsing occurs. ...
...r> attributes collapse type: one of the values below determines which side of the splitter is collapsed when its grippy is clicked. if this attribute is not specified, the splitter will not cause a collapse. you should put a grippy element inside the splitter when it is used for collapsing. none no collapsing occurs. ...
...And 5 more matches

nsIContentPolicy - Archive of obsolete content
ument 6 indicates a dom document at the top-level (that is, directly within a browser tab). type_subdocument 7 indicates a document contained within another document (for example, <iframe> and <frame> elements). note: gecko uses type_internal_frame and type_internal_iframe in order to discern the difference internally. these types are mapped to type_subdocument before being passed into the implementation of the content policy and should not be used outside gecko code. type_refresh 8 indicates a timed refresh. shouldload() will never get this, because it does not represent content to be loaded (the actual load triggered by the refresh will go through shouldload() as expected). shouldprocess() will get this for, for example ...
...th window and worker contexts. type_imageset 21 indicates a request to load an <img> (with the srcset attribute or <picture>. type_web_manifest 22 indicates a request to load a web manifest. type_internal_script 23 an internal constant used to represent scripts loaded using <script> elements. important: this type is mapped to type_script before being passed to content policy implementations, and should not be used outside gecko core code. type_internal_worker 24 an internal constant used to represent scripts loaded through a dedicated worker. important: this type is mapped to type_script before being passed to content policy implementations, and should not be used outside gecko core code. ...
...nt scripts loaded through a dedicated worker. important: this type is mapped to type_script before being passed to content policy implementations, and should not be used outside gecko core code. type_internal_shared_worker 25 an internal constant used to represent scripts loaded through a shared worker. important: this type is mapped to type_script before being passed to content policy implementations, and should not be used outside gecko core code. type_internal_embed 26 an internal constant used to represent content loaded from <embed> elements. important: this type is mapped to type_object before being passed to content policy implementations, and should not be used outside gecko core code. ...
...And 5 more matches

Pseudo-classes and pseudo-elements - Learn web development
first line of the first paragraph bold you could chain the :first-child and ::first-line selectors together. try editing the previous live example so it uses the following css. we are saying that we want to select the first line, of the first <p> element, which is inside an <article> element. ...
... inserting strings of text from css isn't really something we do very often on the web however, as that text is inaccessible to some screen readers and might be hard for someone to find and edit in the future. ...
... more valid use of these pseudo-elements is to insert an icon, for example the little arrow added in the example below, which is a visual indicator that we wouldn't want read out by a screenreader: these pseudo-elements are also frequently used to insert an empty string, which can then be styled just like any element on the page. ...
...And 5 more matches

Looping code - Learn web development
final-expression) { // code to run } here we have: the keyword for, followed by some parentheses. inside the parentheses we have three items, separated by semi-colons: an initializer — this is usually a variable set to a number, which is incremented to count the number of times the loop has run. it is also sometimes referred to as a counter variable. a condition — as mentioned before, this defines when the loop should stop looping. this is generally an expression featuring a comparison operator, a test to see if the exit condition has been met. a final-expression — this is always evaluated (or run) each time the loop has gone through a full iteration. it usually serves to increment (or in some cases decrement) the counter variable, to bring it closer to the point where t...
...ortant: with for — as with all loops — you must make sure that the initializer is incremented or, depending on the case, decremented, so that it eventually reaches the point where the condition is not true. if not, the loop will go on forever, and either the browser will force it to stop, or it will crash. this is called an infinite loop. exiting loops with break if you want to exit a loop before all the iterations have been completed, you can use the break statement. we already met this in the previous article when we looked at switch statements — when a case is met in a switch statement that matches the input expression, the break statement immediately exits the switch statement and moves onto the code after it. it's the same with loops — a break statement will immediately exit the...
...f all we have some variable definitions — we have an array of contact information, with each item being a string containing a name and phone number separated by a colon. next, we attach an event listener to the button (btn), so that when it is pressed, some code is run to perform the search and return the results. we store the value entered into the text input in a variable called searchname, before then emptying the text input and focusing it again, ready for the next search. note that we also run the tolowercase() method on the string, so that searches will be case-insensitive. now onto the interesting part, the for loop: we start the counter at 0, run the loop until the counter is no longer less than contacts.length, and increment i by 1 after each iteration of the loop. inside ...
...And 5 more matches

Handling common JavaScript problems - Learn web development
e. when developers make use of new/nascent javascript features (for example ecmascript 6 / ecmascript next features, modern web apis...) in their code, and find that such features don't work in older browsers. we'll explore all these problems and more below. fixing general javascript problems as we said in the previous article on html/css, you should make sure your code is working generally, before going on to concentrate on the cross-browser issues. if you are not already familiar with the basics of troubleshooting javascript, you should study that article before moving on. there are a number of common javascript problems that you will want to be mindful of, such as: basic syntax and logic problems (again, check out troubleshooting javascript). making sure variables, etc. are defined i...
... scope. incorrectly using functions inside loops — for example, in bad-for-loop.html (see source code), we loop through 10 iterations, each time creating a paragraph and adding an onclick event handler to it. ...
...this kind of operation has been made easier to handle by the introduction of promises to the javascript language. ...
...And 5 more matches

AsyncShutdown.jsm
managing safe shutdown of asynchronous services. firefox shutdown is composed of phases that take place sequentially. typically, each shutdown phase removes some capabilities from the application. for instance, at the end of phase profilebeforechange, no service is permitted to write to the profile directory (with the exception of telemetry). consequently, if any service has requested i/o to the profile directory before or during phase profilebeforechange, the system must be informed that these requests need to be completed before the end of phase profilebeforechange. failing to inform the system of this requirement can (and has been known to) cause data loss. example at some point during shutdown, the add-on manager needs to ensure that all add-ons have safely written their data to d...
...file directory before or during phase profilebeforechange, the system must be informed that these requests need to be completed before the end of phase profilebeforechange. failing to inform the system of this requirement can (and has been known to) cause data loss. example at some point during shutdown, the add-on manager needs to ensure that all add-ons have safely written their data to disk, before writing its own data. since the data is saved to the profile, this must be completed during phase profilebeforechange. asyncshutdown.profilebeforechange.addblocker( "add-on manager: shutting down", function condition() { let promise = ... // do whatever must be done before the end of phase profilebeforechange return promise; }, function info() { let status = ... // collect an...
...r( "add-on manager: shutting down", function condition() { let promise = ... // do whatever must be done before the end of phase profilebeforechange return promise; }, function info() { let status = ... // collect any information that may be useful for debugging shutdown issues with this blocker return status; } }); in this example, at some point during phase profilebeforechange, function condition will be called. phase profilebeforechange is guaranteed to not terminate until promise is either resolved or rejected. if, for some reason, promise is never resolved/rejected, firefox will crash during shutdown to avoid blocking system shutdown, preventing the user from restarting firefox or burning through a battery. in this case, a crash report is produced, with inform...
...And 5 more matches

NSS Tools modutil
rpose of "%temp%" is to hold executable files (such as setup programs) or files that are used by these programs. for example, a windows installation might consist of a setup.exe installation program, a help file, and a .cab file containing compressed information. all these files could be installed in the temporary directory. files destined for the temporary directory are guaranteed to be in place before any executable file is run; they are not deleted until all executable files have finished. absolutepath specifies the destination directory of the file as an absolute path. if both relativepath and absolutepath are specified, the installer attempts to use the relative path; if it is unable to determine a relative path, it uses the absolute path. executable specifies that the file is to be...
...en creating database files this example creates a set of security management database files in the specified directory: modutil -create -dbdir c:\databases the security module database tool displays a warning: warning: performing this operation while communicator is running couldcause corruption of your security databases. if communicator iscurrently running, you should exit communicator before continuing thisoperation. type 'q <enter>' to abort, or <enter> to continue: after you press enter, the tool displays the following: creating "c:\databases\key3.db"...done.creating "c:\databases\cert8.db"...done.creating "c:\databases\secmod.db"...done. displaying module information this example gives detailed information about the specified module: modutil -list "netscape internal pkcs...
...fied module a default provider for the rsa, dsa, and rc2 security mechanisms: modutil -default "cryptographic module" -dbdir c:\databases -mechanisms rsa:dsa:rc2 the security module database tool displays a warning: warning: performing this operation while communicator is running couldcause corruption of your security databases. if communicator iscurrently running, you should exit communicator before continuing thisoperation. type 'q <enter>' to abort, or <enter> to continue: after you press enter, the tool displays the following: using database directory c:\databases...successfully changed defaults. enabling a slot this example enables a particular slot in the specified module: modutil -enable "cryptographic module" -slot "cryptographic reader" -dbdir c:\databases the security modu...
...And 5 more matches

TPS Bookmark Lists
ark title. optional. defaults to the bookmark uri. loadinsidebar: true or false. optional. toggles the "load in sidebar" property. description: the bookmark description. optional. tags: an array of tags for the bookmark. optional. keyword: the keyword for the bookmark. optional. after: the title of the bookmark item expected to be found after this bookmark; used only in verify and modify actions. before: the title of the bookmark item expected to be found before this bookmark; used only in verify and modify actions. changes: an object containing new properties to be set for this bookmark when this asset list is used in a modify action. the properties for this object include the uri, title, loadinsidebar, description, tags, keyword properties above, plus two additional properties: location: the ...
...uri: "http://www.google.com", title: "google", loadinsidebar: false, tags: [ "google", "computers", "misc" ] } livemark objects valid properties are: livemark: the livemark name. required. siteuri: the livemark's uri. optional. feeduri: the livemark's feed uri. required. after: the title of the bookmark item expected to be found after this livemark; used only in verify and modify actions. before: the title of the bookmark item expected to be found before this livemark; used only in verify and modify actions. changes: an object containing new properties to be set for this livemark when this asset list is used in a modify action. the properties for this object include the livemark, siteuri, feeduri properties above, plus two additional properties: location: the full path of the folder tha...
...ark: "livemarkone", feeduri: "http://rss.wunderground.com/blog/jeffmasters/rss.xml", siteuri: "http://www.wunderground.com/blog/jeffmasters/show.html" } folder objects valid properties are: folder: the folder's name. required. description: the folder's description. optional. after: the title of the bookmark item expected to be found after this folder; used only in verify and modify actions. before: the title of the bookmark item expected to be found before this folder; used only in verify and modify actions. changes: an object containing new properties to be set for this folder when this asset list is used in a modify action. the properties for this object include the folder, description properties above, plus two additional properties: location: the full path of the folder that this fold...
...And 5 more matches

Index
is faq usually just refers back directly to the appropriate answer, there. if you're looking here just to learn about nscomptrs, you'll get a better introduction in the getting started guide. 81 getting started guide xpcom an nscomptr is an owning reference. whatever it points to has been addrefed, counting the nscomptr as one of its `owners'. an nscomptr always calls release before letting go, whether the nscomptr is letting go so that it can point to a different object, or because the nscomptr is going out of scope. any time a new value is assigned into an nscomptr, the nscomptr automatically always releases its old referent, if any, and (unless you tell it you already have) addrefs the new. 82 reference manual xpcom this section will help you if you'r...
...bject, or because the nscomptr is going out of scope. any time a new value is assigned into an nscomptr, the nscomptr automatically always releases its old referent, if any, and (unless you tell it you already have) addrefs the new. 82 reference manual xpcom this section will help you if you're already familiar with nscomptr but you need details. if you've never use nscomptrs before, you might want to read the getting started guide first. if you're trying to fix a broken build, the faq might lead you to the answer more quickly. 83 status, recent changes, and plans xpcom no summary! 84 using nsiclassinfo xpcom if you use a c++ class which implements nsiclassinfo from javascript, then you don't have to explicitly call queryinterface on...
... 89 using the clipboard add-ons, clipboard, extensions, guide, mozilla, xpcom this section provides information about cutting, copying, and pasting to and from the clipboard. 90 weak reference xpcom in xpcom, a weak reference is a special object that contains a pointer to an xpcom object, but doesnot keep that object alive. if the referent object is destroyed before the weak reference, the pointer inside the weak reference is set to nsnull. 91 working with multiple versions of interfaces add-ons, extensions, xpcom in this short note we illustrate how one can update an xpcom module in order for it to work in both firefox 2 and firefox 3, even if the interfaces have changed in the interim. 92 working with out parameters add-...
...And 5 more matches

IAccessibleText
pically this feature would not be implemented by an application. however, if the application developer was not satisfied with how screen readers have handled the reading of sentences this boundary type could be implemented and screen readers could use the application's version of a sentence rather than the screen reader's. the rest of the boundary types must be supported. this enum is used in textbeforeoffset(), textatoffset(), and textafteroffset(). method overview hresult addselection([in] long startoffset, [in] long endoffset ); [propget] hresult attributes([in] long offset, [out] long startoffset, [out] long endoffset, [out] bstr textattributes ); [propget] hresult caretoffset([out] long offset ); [propget] hresult characterextents([in] long offset, [in] enum ia2coordinatetype coord...
...hresult addselection( [in] long startoffset, [in] long endoffset ); parameters startoffset starting offset ( 0 based). endoffset offset of first character after new selection() (0 based). return value e_inv...
...objects, then the offset in the higher level text() object would be at the embed character representing child text() object that contains the caret. for example, if the string "one two three" is implemented as a two text() objects, with a top level text() object containing an embed character "one ? three" and a child text() object containing "two" and if the caret is in the descendant object just before the 'o' in "two", then: the caretoffset for the "one ? three" object would be 4, matching the embed character</li> the caretoffset for "two" would be 2, matching the "o" the caret position/offset is that of the character logically following it, for example to the right of it in a left to right language. [propget] hresult caretoffset( [out] long offset ); parameters offset the returned offse...
...And 5 more matches

Drawing and Event Handling - Plugins
led by the browser: npp_handleevent: deliver a platform-specific event to the instance. npp_print: request a platform-specific print operation for the instance. npp_setwindow: set the window in which a plug-in draws. browser-side methods, called by the plug-in: npn_forceredraw: force a paint message to a windowless plug-in. npn_invalidaterect: invalidate an area in a windowless plug-in before repainting or refreshing. npn_invalidateregion: invalidate a region in a windowless plug-in before repainting or refreshing. printing the plug-in the browser calls the npp_print method to ask the plug-in instance to print itself. void npp_print(npp instance, npprint *printinfo); the instance parameter represents the current plug-in. the printinfo parameter determines the print mode. it is...
...n can set the pluginprinted field in its printinfo parameter to false (the default). this is a field of the _npfullprint substructure of the npprint structure. the browser displays the necessary print dialog boxes and calls npp_print again. this time, printinfo->mode should be set to np_embed. a full-page plug-in handles the print dialog boxes and printing process as it sees fit. in this case, before the browser displays any print dialog boxes, npp_print is called with printinfo->mode equal to np_full. on mac os, full-page printing requires that the field printinfo contain a standard mac os thprint (see printing.h). of course, npp_print is also called with printinfo->mode equal to np_embed when the instance is embedded. in this case, platformprint->embedprint.window contains the window in w...
...hese coordinates to call setorigin(portx, porty) to place the upper-left corner of its rectangle at (0,0). the mac os grafport structure's cliprgn field should be set to the clipping rectangle for the instance in port coordinates. because the plug-in and the browser share the same graphics port, they share the responsibility for managing it correctly. the browser sets up the port for the plug-in before passing the plug-in an update event in two ways: the browser calls setorigin(npport->portx, npport->porty). this method makes the instance's upper-left coordinate equal to (0,0). the browser sets the port's clip region to the region of the plug-in currently visible (not scrolled off the page, obscured by floating palettes, or otherwise hidden). however, for the plug-in to draw at any other ...
...And 5 more matches

Element.insertAdjacentElement() - Web APIs
the insertadjacentelement() method of the element interface inserts a given element node at a given position relative to the element it is invoked upon. syntax targetelement.insertadjacentelement(position, element); parameters position a domstring representing the position relative to the targetelement; must match (case-insensitively) one of the following strings: 'beforebegin': before the targetelement itself. 'afterbegin': just inside the targetelement, before its first child. 'beforeend': just inside the targetelement, after its last child. 'afterend': after the targetelement itself. element the element to be inserted into the tree. return value the element that was inserted, or null, if the insertion failed. exceptions exception explanation ...
...he targetelement itself. element the element to be inserted into the tree. return value the element that was inserted, or null, if the insertion failed. exceptions exception explanation syntaxerror the position specified is not a recognised value. typeerror the element specified is not a valid element. ...
...e inserted into the tree. return value the element that was inserted, or null, if the insertion failed. exceptions exception explanation syntaxerror the position specified is not a recognised value. typeerror the element specified is not a valid element. ...
...And 5 more matches

WebKit CSS extensions - CSS: Cascading Style Sheets
webkit-only properties note: avoid using on websites. these properties will only work in webkit applications. ...
...note: avoid using on websites. these properties will only work in webkit applications. ...
...these properties will only work in webkit applications. ...
...And 5 more matches

test/utils - Archive of obsolete content
helper methods used in the commonjs unit testing suite. usage before and after helper functions before() and after() are available for running a function before or after each test in a suite. they're useful when you need to guarantee a particular state before running a test, and to clean up after your test. let { before, after } = require('sdk/test/utils'); let { search } = require('sdk/places/bookmarks'); exports.testcountbookmarks = function (assert, done) { search().on('end', function (results) { assert.equal(results, 0, 'should be no bookmarks'); done(); }); }; before(exports, function (name, assert) { removeallbookmarks(); }); require('sdk/test').run(exports); both before and after may be asynchronous. to make them asynchronous, pass a third argument done, which is ...
...(assert, done) { search().on('end', function (results) { assert.equal(results, 0, 'should be no bookmarks'); done(); }); }; before(exports, function (name, assert) { removeallbookmarks(); }); require('sdk/test').run(exports); both before and after may be asynchronous. ...
... asynchronous. to make them asynchronous, pass a third argument done, which is a function to call when you have finished: let { before, after } = require('sdk/test/utils'); let { search } = require('sdk/places/bookmarks'); exports.testcountbookmarks = function (assert, done) { search().on('end', function (results) { assert.equal(results, 0, 'should be no bookmarks'); done(); }); }; before(exports, function (name, assert, done) { removeallbookmarksasync(function () { done(); }); }); require('sdk/test').run(exports); globals functions before(exports, beforefn) runs beforefn before each test in the file. ...
...And 4 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
if you want to partition your everyday browsing environment from your development environment in firefox, set up a second profile for development. to create this dev profile start firefox with firefox.exe -no-remote -p dev on the first start the profile manager will appear, where you can create the dev profile and configure its home-path. change your preferences for more efficient development before you get to work developing your extension, you’ll want to change some of your firefox preferences. this isn’t a requirement for extension development, but i recommend it as a way to work more efficiently. preference description value nglayout.debug.disable_xul_cache (not present in firefox 3.5+) ordinarily, firefox will cache xul documents after they h...
...e it in the spot numbered fixme: figure 5: finding merge points for overlays using the dom inspector putting overlays on the browser window now that you know the merge point for your overlay, you can create the overlay.xul file that will insert it (listing 3). in line 4, we identify the merge point as the menupop element; in lines 5–7, we have the code that adds the new menu item. the insertbefore attribute determines where the element gets added. test install and operational check this brings us to the point where we finally install our hello world extension. using the normal xpi-style installer would just be added trouble in this case, so we won’t use it. for source files under development, we do test installs. placing pointer files first, navigate to the profile folder of the curr...
...t the contents of that file to be the full path to the work folder for your extension source files, c:\extensions\helloworld. listing 3: additional content for overlay.xul <?xml version="1.0"?> <overlay id="helloworldoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="menu_toolspopup"> <menuitem id="helloworldmenuitem" label="hello, world!" insertbefore="sanitizeseparator" oncommand="window.opendialog('chrome://helloworld/content/clock.xul','clock','chrome,centerscreen,modal');"/> </menupopup> </overlay> phase 2: adding a function to display the time in phase 2, we will make it so that selecting the hello world menu item we created in phase 1 will display a window with the time (figure 6). fixme: figure 6: clock window produced by p...
...And 4 more matches

Template and Tree Listeners - Archive of obsolete content
lds the first of these is the simplest and involves two methods, willrebuild and didrebuild. you would implement this object with these two methods if you wish to be notified when the template is rebuilt using the builder's rebuild call. the template builder might also force a rebuild when the underlying data change notifications require it. the primary use of this listener is to store some state before the template is rebuilt and restore it afterwards. recall that when a template is rebuilt, all of the existing content will be removed and generated fresh. the willrebuild method of any listeners will be called before the content is removed, and didrebuild method will be called when the content has been regenerated. this listener will also work for tree builders, and will call the appropriate met...
...to assign a builder listener to a builder, use the addlistener method. ...
...handle the adding or removing of rows, but will call the observer so that it can perform some task. the tree builder observer implements the nsixultreebuilderobserver interface and may be attached to a tree builder using the builder's addobserver method. you can add more than one observer if needed, and can remove them again with the builder's removeobserver method. the observer is always invoked before the appropriate operation is performed. for instance, the ontoggleopenstate method of any observers will be called before the tree item is opened. after the observers have finished, the tree builder opens the row and adds any child rows inside. note that you cannot cancel the operation from within the observer. some useful functions of the observer are the drag and drop related callbacks to handl...
...And 4 more matches

Client-side storage - Learn web development
nting our database. we will use this in a few places, so we've declared it globally here to make things easier. 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. if this doesn't already exist, it will be...
...ucture) of our database; that is, the set of columns (or fields) it contains. here we first grab a reference to the existing database from e.target.result (the event target's result property), which is the request object. this is equivalent to the line db = request.result; inside the onsuccess handler, but we need to do this separately here because the onupgradeneeded handler (if needed) will run before the onsuccess handler, meaning that the db value wouldn't be available if we didn't do this. we then use idbdatabase.createobjectstore() to create a new object store inside our opened database called notes_os. this is equivalent to a single table in a conventional database system. we've given it the name notes, and also specified an autoincrement key field called id — in each new record this...
...the idbdatabase.transaction() method. this transaction object allows us to access the object store so we can do something to it, e.g. add a new record. access the object store using the idbtransaction.objectstore() method, saving the result in the objectstore variable. add the new record to the database using idbobjectstore.add(). this creates a request object, in the same fashion as we've seen before. add a bunch of event handlers to the request and the transaction to run code at critical points in the lifecycle. once the request has succeeded, we clear the form inputs ready for entering the next note. once the transaction has completed, we run the displaydata() function again to update the display of notes on the page. displaying the data we've referenced displaydata() twice in our code ...
...And 4 more matches

Componentizing our React app - Learn web development
react doesn’t have any hard rules for what is and isn’t a component – that’s up to you! in this article we will show you a sensible way to break our app up into components. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. objective: to show a sensible way of breaking our todo list app into components. ...
...ially valuable: making a component out of common ui elements allows you to change your code in one place and see those changes everywhere that component is used. you don't have to break everything out into components right away, either. let's take the second bullet point as inspiration and make a component out of the most reused, most important piece of the ui: a todo list item. ...
...oint as inspiration and make a component out of the most reused, most important piece of the ui: a todo list item. make a <todo /> before we can make a component, we should create a new file for it. in fact, we should make a directory just for our components. the following commands make a components directory and then, within that, a file called todo.js. make sure you're in the root of your app before you run these! mkdir src/components touch src/components/todo.js our new todo.js file is currently empty! open it up and give it its first line: import react from "react"; since we're going to make a component called todo, you can start adding the code for that to todo.js too, as follows. in this code, we define the function and export it on the same line: export default function todo() { ...
...And 4 more matches

IME handling guide
this document explains how gecko handles ime. introduction ime is an abbreviation of input method editor. this is a technical term from windows but these days, this is used on other platforms as well. ime is a helper application of a user's text input. it handles native key events before or after focused application (depending on the platform) and creates a composition string (a.k.a. preedit string), suggests a list of what the user attempts to input, commits composition string as a selected item off the list and commits composition string without any conversion. ime is used by chinese, japanese, korean and taiwan users for inputting chinese characters because the number of them is beyond thousands and cannot be input from the keyboard directly. however, especially on mobile devices n...
...ncommit this is used internally only. this is dispatched when a composition is committed with specific string. the mdata value is the commit string. this causes a dom text event without clause information and a dom compositionend event. ...
...event after dispatching ecompositionupdate event and/or ecompositionchange event if necessary. one of the other important jobs of this is, when a focused editor handles a dispatched ecompositionchange event, this modifies the stored composition string and its clause information. the editor refers the stored information for creating or modifying a text node representing a composition string. and before dispatching ecomposition* events, this class removes ascii control characters from dispatching composition event's data in the default settings. although, this can be disabled with "dom.compositionevent.allow_control_characters" pref. finally, this class guarantees that requesting to commit or cancel current composition to ime is perefored synchronously. see forcibly committing composition secti...
...And 4 more matches

OS.File for the main thread
see the promise object documentation for details. ...
... if true, file will be opened for writing. the file must not exist. if the file already exists, throw an error. cannot be used with truncate or existing. existing if true, the file must already exist. if the file does not exist, throw an error. cannot be used with create. append if true, the file will be opened for appending, meaning the equivalent of .setposition(0, pos_end) is executed before each write. the default is true, i.e. opening a file for appending. specify append: false to open the file in regular mode. optionsoptional platform-specific options for opening the file. for advanced users only. most users will never have need of these options. to specify options, pass an object that may contain some of the following flags: unixflags (ignored under non-unix platforms...
...let options = { winshare: 0 // exclusive lock on windows }; if (os.constants.libc.o_exlock) { // exclusive lock on *nix options.unixflags = os.constants.libc.o_exlock; } let file = yield os.file.open(..., options); then when you want to unlock the file so it can be edited from other places, close the file. file.close(); this example is from stackoverflow: os.file check last modified date before os.read os.file.openunique() creates and opens a file with a unique name. by default, generate a random hex number and use it to create a unique new file name. promise<object> openunique( in string path, [optional] in object options ) throws os.file.error arguments path the full native name of the file to open. optionsoptional additional options for file opening. this implementation...
...And 4 more matches

Index
69 js::sourcebufferholder jsapi reference, refe...
...ter, which is only called if the exception for an oom bubbles up and is not caught, the js::outofmemorycallback is called immediately at the oom site to allow the embedding to capture the current state of heap allocation before anything is freed. if the large-allocation-failure callback is called at all (not all allocation sites call the large-allocation-failure callback on failure), it is called before the out-of-memory callback; the out-of-memory callback is only called if the allocation still fails after the large-allocation-failure callback has returned. 69 js::sourcebufferholder jsapi reference, reference, référence(2), spidermonkey js::sourcebufferholder is the container class for passing in script source buffers to the js engine. this not only groups the buffer and ...
...rimitive value in *vp. 95 jsdeletepropertyop jsapi reference, reference, spidermonkey jsdeletepropertyop callback is a hook that applications may install to be called at some point during property access. a jsdeletepropertyop may be installed on a jsclass to hook property deletes. 96 jsenumerateop jsapi reference, spidermonkey jsenumerateop is called just before an object is enumerated (via a for...in statement, an array comprehension, or a call to js_enumerate). it should define any remaining lazy properties that should be enumerable but are not yet defined in obj. this hook does not implement iteration: once the properties are defined, the javascript engine can enumerate them. 97 jserrorformatstring jsapi reference, reference, référenc...
...And 4 more matches

Using microtasks in JavaScript with queueMicrotask() - Web APIs
a microtask is a short function which is executed after the function or program which created it exits and only if the javascript execution stack is empty, but before returning control to the event loop being used by the user agent to drive the script's execution environment. this event loop may be either the browser's main event loop or the event loop driving a web worker. this lets the given function run without the risk of interfering with another script's execution, yet also ensures that the microtask runs before the user agent has the opportunity to react to actions taken by the microtask. javascript promises and the mutation observer api both use the microtask queue to run their callbacks, but there are other times when the ability to defer work until the current event loop pass is wrapp...
...checks to see if the task is returning control to other javascript code. if not, it runs all of the microtasks in the microtask queue. the microtask queue is, then, processed multiple times per iteration of the event loop, including after handling events and other callbacks. second, if a microtask adds more microtasks to the queue by calling queuemicrotask(), those newly-added microtasks execute before the next task is run. that's because the event loop will keep calling microtasks until there are none left in the queue, even if more keep getting added. warning: since microtasks can themselves enqueue more microtasks, and the event loop continues processing microtasks until the queue is empty, there's a real risk of getting the event loop endlessly processing microtasks. be cautious with how ...
...alling microtasks until there are none left in the queue, even if more keep getting added. warning: since microtasks can themselves enqueue more microtasks, and the event loop continues processing microtasks until the queue is empty, there's a real risk of getting the event loop endlessly processing microtasks. be cautious with how you go about recursively adding microtasks. using microtasks before getting farther into this, it's important to note again that most developers won't use microtasks much, if at all. they're a highly specialized feature of modern browser-based javascript development, allowing you to schedule code to jump in front of other things in the long set of things waiting to happen on the user's computer. abusing this capability will lead to performance problems. enqueuei...
...And 4 more matches

SVGNumberList - Web APIs
tempts to modify the object will result in an exception being thrown. note: starting in gecko 5.0,the svgnumberlist dom interface is now indexable and can be accessed like arrays. ...
...modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. initialize(in svgnumber newitem) svgnumber clears all existing current items from the list and re-initializes the list to hold the single item specified by newitem. if the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. the return value is the item inserted into the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. getitem(in unsigned long index) svgnumber returns t...
...eturns the specified item from the list. the returned item is the item itself and not a copy. any changes made to the item are immediately reflected in the list. the first item is number 0. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. insertitembefore(in svgnumber newitem, in unsigned long index) svgnumber inserts a new item into the list at the specified position. the first item is number 0. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to insert...
...And 4 more matches

SVGPathSegList - Web APIs
st interface this interface defines a list of svgpathseg objects. ...
...err is raised when the list cannot be modified. initialize(in svgpathseg newitem) svgpathseg clears all existing current items from the list and re-initializes the list to hold the single item specified by newitem. if the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. the return value is the item inserted into the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list cannot be modified. getitem(in unsigned long index) svg...
... returns the specified item from the list. the returned item is the item itself and not a copy. any changes made to the item are immediately reflected in the list. the first item is number 0. exceptions: a domexception with code no_modification_allowed_err is raised when the list cannot be modified. insertitembefore(in svgpathseg newitem, in unsigned long index) svgpathseg inserts a new item into the list at the specified position. the first item is number 0. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. if the item is already in th...
...And 4 more matches

SVGPointList - Web APIs
s read only, which means that attempts to modify the object will result in an exception being thrown. ...
...orresponds to a read only attribute or when the object itself is read only. initialize(in svgpoint newitem) svgpoint clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. if the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. the return value is the item inserted into the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. getitem(in unsigne...
... returned item is the item itself and not a copy. any changes made to the item are immediately reflected in the list. the first item is number 0. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. insertitembefore(in svgpoint newitem, in unsigned long index) svgpoint inserts a new item into the list at the specified position. the first item is number 0. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item...
...And 4 more matches

SVGTransformList - Web APIs
fy the object will result in an exception being thrown. ...
..._allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. initialize(in svgtransform newitem) svgtransform clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. if the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. the return value is the item inserted into the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. getitem(in unsigned long index) svgtransform return...
...eturns the specified item from the list. the returned item is the item itself and not a copy. any changes made to the item are immediately reflected in the list. the first item is number 0. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. insertitembefore(in svgtransform newitem, in unsigned long index) svgtransform inserts a new item into the list at the specified position. the first item is number 0. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to inser...
...And 4 more matches

Advanced techniques: Creating and sequencing audio - Web APIs
the key here is connecting the graph correctly, and also starting both oscillators: lfo.connect(amp.gain); osc.connect(amp).connect(audioctx.destination); lfo.start(); osc.start(); osc.stop(audioctx.currenttime + pulsetime); note: we also don't have to use the default wave types for either of these oscillators we're creating — we could use a wavetable and the periodic wave method as we did before. there is a multitude of possibilities with just a minimum of nodes. pulse user controls for the ui controls, let's expose both frequencies of our oscillators, allowing them to be controlled via range inputs. one will change the tone and the other will change how the pulse modulates the first wave: <label for="hz">hz</label> <input name="hz" id="hz" type="range" min="660" max="1320" value="88...
...th frequencies of our oscillators, allowing them to be controlled via range inputs. one will change the tone and the other will change how the pulse modulates the first wave: <label for="hz">hz</label> <input name="hz" id="hz" type="range" min="660" max="1320" value="880" step="1" /> <label for="lfo">lfo</label> <input name="lfo" id="lfo" type="range" min="20" max="40" value="30" step="1" /> as before, we'll vary the parameters when the range input values are changed by the user. let pulsehz = 880; const hzcontrol = document.queryselector('#hz'); hzcontrol.addeventlistener('input', function() { pulsehz = number(this.value); }, false); let lfohz = 30; const lfocontrol = document.queryselector('#lfo'); lfocontrol.addeventlistener('input', function() { lfohz = number(this.value); }, fal...
... audio api comes with two types of filter nodes: biquadfilternode and iirfilternode. for the most part a biquad filter will be good enough — it comes with different types such as lowpass, highpass, and bandpass. if you're looking to do something more bespoke, however, the iir filter might be a good option — see using iir filters for more information. wiring this up is the same as we've seen before. we create the biquadfilternode, configure the properties we want for it and connect it through our graph. different types of biquad filters have different properties — for instance setting the frequency on a bandpass type adjusts the middle frequency, however on a lowpass it would set the top frequency. let bandpass = audioctx.createbiquadfilter(); bandpass.type = 'bandpass'; bandpass.frequen...
...And 4 more matches

Window - Web APIs
these are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest. this interface inherits event handlers from the eventtarget interface and implements event handlers from windoweventhandlers. window.onappinstalled called when the page is installed as a webapp. see appinstalled event. window.onbeforeinstallprompt an event handler property dispatched before a user is prompted to save a web site to a home screen on mobile. window.ondevicelight an event handler property for any ambient light levels changes window.ondevicemotion called if accelerometer detects a change (for mobile devices) window.ondeviceorientation called when the orientation is changed (for mobile devices) window.ondevi...
...rientation changes. window.ondeviceproximity an event handler property for device proximity event 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). window.onmozbeforepaint an event handler property for the mozbeforepaint event, which is sent before repainting the window if the event has been requested by a call to the window.mozrequestanimationframe() method. window.onpaint an event handler property for paint events on the window. window.onrejectionhandled an event handler for handled promise rejection events. window.onuserproximity an event handler pro...
...window.onuserproximity an event handler property for user proximity events. event handlers implemented from elsewhere globaleventhandlers.onabort called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress windoweventhandlers.onafterprint called when the print dialog box is closed. see afterprint event. windoweventhandlers.onbeforeprint called when the print dialog box is opened. see beforeprint event. windoweventhandlers.onbeforeunload an event handler property for before-unload events on the window. globaleventhandlers.onblur called after the window loses focus, such as due to a popup. globaleventhandlers.onchange an event handler property for change events on the window. globaleventhandlers.onclick called after ...
...And 4 more matches

Value definition syntax - CSS: Cascading Style Sheets
ackets enclose several entities, combinators, and multipliers, then transform them as a single component. they are used to group components to bypass the precedence rules. bold [ thin && <length> ] this example matches the following values: bold thin 2vh bold 0 thin bold thin 3.5em but not: thin bold 3em, as bold is juxtaposed with the component defined by the brackets, it must appear before it. juxtaposition placing several keywords, literals or data types, next to one another, only separated by one or several spaces, is called juxtaposition. all juxtaposed components are mandatory and should appear in the exact order. bold <length> , thin this example matches the following values: bold 1em, thin bold 0, thin bold 2.5cm, thin bold 3vh, thin but not: thin 1em, bold, ...
... must appear at most one single time. bold, as it isn't a keyword allowed as value of any of the entity. note: the double ampersand has precedence over the double bar, meaning that bold || thin && <length> is equivalent to bold || [ thin && <length> ]. it describes bold, thin <length>, bold thin <length>, or thin <length> bold but not <length> bold thin as bold, if not omitted, must be placed before or after the whole thin && <length> component. single bar separating two or more entities by a single bar, |, means that all entities are exclusive options: exactly one of these options must be present. this is typically used to separate a list of possible keywords. <percentage> | <length> | left | center | right | top | bottom this example matches the following values: 3% 0 3.5em left...
...e time. note that multipliers cannot be added and have all precedence over combinators. asterisk (*) the asterisk multiplier indicates that the entity may appear zero, one or several times. bold smaller* this example matches the following values: bold bold smaller bold smaller smaller bold smaller smaller smaller, and so on. but not: smaller, as bold is juxtaposed, and must appear before any smaller keyword. plus (+) the plus multiplier indicates that the entity may appear one or several times. bold smaller+ this example matches the following values: bold smaller bold smaller smaller bold smaller smaller smaller, and so on. but not: bold, as smaller must appear at least one time. smaller, as bold is juxtaposed and must appear before any smaller keyword. question...
...And 4 more matches

Proxy Auto-Configuration (PAC) file - HTTP
xpression is translated to a regexp via subsitution of [.*?]. for a reliable way to use these regexp syntaxes, just use regexp instead. examples shexpmatch("http://home.netscape.com/people/ari/index.html" , "*/ari/*"); // returns true shexpmatch("http://home.netscape.com/people/montulli/index.html", "*/ari/*"); // returns false weekdayrange() syntax weekdayrange(wd1, wd2, [gmt]) note: (before firefox 49) wd1 must be less than wd2 if you want the function to evaluate these parameters as a range. see the warning below. parameters wd1 and wd2 one of the ordered weekday strings: "sun"|"mon"|"tue"|"wed"|"thu"|"fri"|"sat" gmt is either the string "gmt" or is left out. only the first parameter is mandatory. either the second, the third, or both may be left out. if only one pa...
...r, times are taken to be in gmt. otherwise, they are assumed to be in the local timezone. if both wd1 and wd1 are defined, the condition is true if the current weekday is in between those two ordered weekdays. bounds are inclusive, but the bounds are ordered. if the "gmt" parameter is specified, times are taken to be in gmt. otherwise, the local timezone is used. the order of the days matters; before firefox 49, weekdayrange("sun", "sat") will always evaluate to true. now weekdayrange("wed", "sun") will only evaluate true if the current day is wednesday or sunday. examples weekdayrange("mon", "fri"); // returns true monday through friday (local timezone) weekdayrange("mon", "fri", "gmt"); // returns true monday through friday (gmt timezone) weekdayrange("sat"); // retu...
...see the warning below. parameters day is the ordered day of the month between 1 and 31 (as an integer). 1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31 month is one of the order...
...And 4 more matches

panel - Archive of obsolete content
the screenshot below shows a panel whose content is built from the list of currently open tabs: panels are useful for presenting temporary interfaces to users in a way that is easier for users to ignore and dismiss than a modal dialog, since panels are hidden the moment users interact with parts of the application interface outside them. a panel's content is loaded as soon as it is created, before the panel is shown, and the content remains loaded when a panel is hidden, so it is possible to keep a panel around in the background, updating its content as appropriate in preparation for the next time it is shown. your add-on can receive notifications when a panel is shown or hidden by listening to its show and hide events. opening a panel will close any panel created by the panel() construc...
... urls point to scripts to load into the panel. the scripts must be packaged with the add-on under the add-on's data directory. that is, they can't refer to remote scripts. the urls are usually constructed using self.data.url(). from firefox 34, you can use "./my-script.js" as an alias for self.data.url("my-script.js"). content scripts specified by this property are loaded before those specified by the contentscript property. contentscript string,array a string or an array of strings containing the texts of content scripts to load. content scripts specified by this property are loaded after those specified by the contentscriptfile property. contentstylefile string, array a url or an array of urls. the urls point to css style...
... property. contentstylefile string, array a url or an array of urls. the urls point to css stylesheets to load into the panel. the stylesheets must be packaged with the add-on under the add-on's data directory. that is, they can't refer to remote stylesheets. the urls are usually constructed using self.data.url(). stylesheets specified by this property are loaded before those specified by the contentstyle property. contentstyle string, array a string or an array of strings containing the texts of stylesheets to load. stylesheets specified by this property are loaded after those specified by the contentstylefile property. contentscriptwhen string when to load the content scripts. this may take one of the following v...
...And 3 more matches

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
t is outside of the window element. if you put the toolbarpalette element inside the window element in your overlay, some weird errors will begin to happen. always set the label and tooltiptext attributes of a toolbarbutton. in the case of a toolbaritem element (discussed later), use the title attribute instead of label. tooltips are very important for users that want to know what a button does before clicking it. setting the image for a toolbar button is done with css: #xulschoolhello-hello-world-button { list-style-image: url("chrome://xulschoolhello/skin/hello-world.png"); } it's not really that simple to set the image for a toolbar button, because we need to consider the appearance of the button on different systems, and also consider the different button states, but we'll get into ...
...s add our own toolbar. this is done in the overlay as well. <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 os x: <window id="main-window"> and </window> are not required) our toolbar is added as a child of the toolbox element in the main browser window. the toolbox is the collection of toolbars in firefox, including the main menu bar. let's look at the attributes we used: the toolbarname is the name that will appear on the view > toolbar...
...t doesn't need to be implemented again. the defaultset attribute lists the ids of the icons you want to include on your toolbar by default. it's a comma-separated list of ids, and it can also include other special values: spacer, separator and spring. spacer represents an empty button space, separator a vertical separation line and spring a flexible empty area that stretches. finally, the insertbefore attribute places our toolbar above the bookmarks toolbar. this is a matter of personal preference, but the mac os theme seems to be designed so that the bookmarks toolbar is always the last one (it has a lighter color than the rest). it also makes sense from a usability perspective, since bookmarks should be very easy to access for the user. that's it for the basics. with this knowledge you sho...
...And 3 more matches

MMgc - Archive of obsolete content
nters to these destroyed objects. if you get a crash dereferencing a pointer to a gc object, and the pointer was a member variable in an unmanaged (non-gc) object, check whether the unmanaged object is a gcroot. if it isn't, maybe it needs to be. finding missing write barriers there are some automatic aids in the mmgc library which can help you find missing write barriers. look in mmgc/gc.cpp. // before sweeping we check for missing write barriers bool gc::incrementalvalidation = false; // check for missing write barriers at every alloc bool gc::incrementalvalidationpedantic = false; if you suspect you have missing write barriers, turn these switches on in a debug build. (the second switch will slow your application down a lot more than the first switch, so you could try the first, then the se...
...hem. the problem with going from reference counting to pure mark/sweep garbage collection is that a lot of time may be spent in the garbage collector. this time will pause the entire application, and give the impression of poor performance. even with an incremental collector that doesn't have big pauses, a gc sweep only kicks in every so often, so memory usage can grow very quickly to a high peak before the gc collects unused objects. so, some kind of reference counting is still attractive to lower the amount of work the gc has to do, and to get more immediacy on memory reclamation. however, reference counting is also slow because the reference counts need to be constantly maintained. so, it's attractive to find some form of reference counting that doesn't require maintaining reference counts fo...
...s go through two steps, from gray to black and white to gray. whenever a pointer to a white object is written to a black object we have to intercept that write and remember to go back and put the white object in the work queue, that's what a write barrier does. ...
...And 3 more matches

Index - Archive of obsolete content
31 browserid xul, xul reference no summary! 32...
...titlebarcolor xul attributes, xul reference no summary! 158 increment xul attributes, xul reference no summary! 159 index xul attributes, xul reference no summary! 160 inputtooltiptext xul attributes, xul reference no summary! 161 insertafter xul attributes, xul reference no summary! 162 insertbefore xul attributes, xul reference no summary! 163 instantapply xul attributes, xul reference no summary! 164 inverted xul attributes, xul reference no summary! 165 iscontainer xul attributes, xul reference no summary! 166 isempty xul attributes, xul reference no summary! 167 key xul attributes...
...a change event is fired in different ways for different xul input elements as...
...And 3 more matches

PopupEvents - Archive of obsolete content
: contextmenu this event is fired when a request is made to open a context menu, whether by the keyboard or mouse. this event will be fired even for elements that don't have a context menu associated with them. for more information about how to use this event, see context menu events. popupshowing this event is fired on a menupopup, panel or tooltip just before it is made visible. this event is most commonly used to add or adjust items on the popup based on the context. popupshown this event is fired on a menupopup, panel or tooltip once it is visible on screen. popuphiding this event is fired on a menupopup, panel or tooltip once it is about to be hidden. this may happen because the user selec...
... popuphiding this event is fired on a menupopup, panel or tooltip once it is about to be hidden. this may happen because the user selected an item from the menu, or it may be because the popup was closed by clicking elsewhere. popuphidden this event is fired on a menupopup, panel or tooltip once it has been hidden. the popupshowing event just before a popup is about to be displayed, a popupshowing event will fired on the popup. this will occur regardless of how the popup is opened, either from user interaction or from a script calling the openpopup or openpopupatscreen methods. the typical usage of a listener of the popupshowing event is to adjust the content of the popup based on context. for instance, right clicking on an image might displ...
...n methods. the typical usage of a listener of the popupshowing event is to adjust the content of the popup based on context. for instance, right clicking on an image might display items on a context menu pertaining to images, whereas clicking on a link would display only those items pertaining to links. within the listener for the popupshowing event, you can append to or modify the menu as needed before it is displayed. for examples of the use of the popupshowing event when used with context menus, see hiding and showing menu items based on context. however, this technique can be applied to any type of popup. in this example, a label within a panel is initialized with the current time. <panel id="time-panel" onpopupshowing="this.lastchild.value = (new date()).tolocaleformat('%t')"> <label valu...
...And 3 more matches

Positioning - Archive of obsolete content
e context menu just by clicking in the same location. for a tooltip, the position attribute controls how the tooltip is anchored to the element with the tooltip attribute. you wouldn't normally use the position attribute on a tooltip; instead you would just want the tooltip to appear at its default position which is near the mouse pointer. ...
...there are several possible values for the position attribute, described here, along with images which show how a popup would be aligned in each case. the following assumes a left to right user interface. ...
...ch that the bottom-left corner of the anchor is aligned with the upper-left corner of the popup. simple alignment values positions specified as a single word string are shortcuts for the values above. the following table shows the valid values, corresponding explicit (ie, 2 word) alignment values and an example of the alignment. single word alignment values example before_start the left side of the popup is aligned with the left side of the anchor, and the bottom of the popup is aligned along the top of the anchor. equivalent to topleft bottomleft before_end the right side of the popup is aligned with the right side of the anchor, and the bottom of the popup is aligned along the top of the anchor. equivalent to topright bottomright ...
...And 3 more matches

Audio for Web games - Game development
ur code on several devices and platforms to see how it works. volume programmatic volume control may be disabled in mobile browsers. the reason often given is that the user should be in control of the volume at the os level and this shouldn't be overridden. buffering and preloading likely as an attempt to mitigate runaway mobile network data use, we also often find that buffering is disabled before playback has been initiated. buffering is the process of the browser downloading the media in advance, which we often need to do to ensure smooth playback. the htmlmediaelement interface comes with lots of properties to help determine whether a track is in a state to be playable. note: in many ways the concept of buffering is an outdated one. as long as byte-range requests are accepted (which ...
......
...we can do this with javascript's async/await functionality. once they are available to play, we need to make sure they start at the correct point that other tracks might be playing at, so they sync up. let's create our audio context: // for cross browser compatibility const audiocontext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocont...
...And 3 more matches

Styling web forms - Learn web development
styling essentials too. as well as the basic css tools covered above, we've also been provided with several selectors — ui pseudo-classes — that enable styling based on the current state of the ui. we cover these in detail in the next article, ui pseudo-classes. we'll walk through an example at the end of this article to give you some more ideas on basic form control styling and placement. before we do that however, we'd like to say a few words about specific aspects of form styling that are worth knowing about. fonts and text css font and text features can be used easily with any widget (and yes, you can use @font-face with form widgets). however, browser behavior is often inconsistent. by default, some widgets do not inherit font-family and font-size from their parents. many browsers ...
...valent input types! there's a lot of debate as to whether forms look better using the system default styles, or customized styles designed to match your content. this decision is yours to make, as the designer of your site, or web application. box sizing all text fields have complete support for every property related to the css box model, such as width, height, padding, margin, and border. as before, however, browsers rely on the system default styles when displaying these widgets. it's up to you to define how you wish to blend them into your content. if you want to keep the native look and feel of the widgets, you'll face a little difficulty if you want to give them a consistent size. this is because each widget has their own rules for border, padding and margin. to give the same size to s...
...ly:</label> <input type="email" id="mail" name="user_email"> </div> <div id="message"> <label for="msg">your message:</label> <textarea id="msg" name="user_message"></textarea> </div> <div class="button"> <button type="submit">send your message</button> </div> </form> add the above code into the body of your html. organizing your assets this is where the fun begins! before we start coding, we need three additional assets: the postcard background — download this image and save it in the same directory as your working html file. a typewriter font: the "secret typewriter" font from fontsquirrel.com — download the ttf file into the same directory as above. a handdrawn font: the "journal" font from fontsquirrel.com — download the ttf file into the same direct...
...And 3 more matches

Front-end web developer - Learn web development
welcome to our front-end web developer learning pathway! here we provide you with a structured course that will teach you all you need to know to become a front-end web developer. simply work through each section, learning new skills (or improving existing ones) as you go along. each section includes exercises and assessments to test your understanding before you move forward. subjects covered the subjects covered are: basic setup and learning how to learn web standards and best practices (such as accessibility and cross-browser compatibility) html, the language that gives web content structure and meaning css, the language used to style web pages javascript, the scripting language used to create dynamic functionality on the web tooling that is used to facilitate modern client-side w...
...each one is also self-contained. for example, if you already know html, you can skip ahead to the css section. prerequisites you don't need any previous knowledge to start this course. all you need is a computer that can run modern web browsers, an internet connection, and a willingness to learn. if you are not sure if front-end web development is for you, and/or you want a gentle introduction before starting a longer and more complete course, work through our getting started with the web module first. getting help we have tried to make learning front-end web development as comfortable as possible, but you will probably still get stuck because you don't understand something, or some code is just not working. don't panic. we all get stuck, whether we are beginner or professional web develop...
...he subject matter. completing the assessments confirms that you are ready to move on to the next module. modules introduction to html (15–20 hour read/exercises) multimedia and embedding (15–20 hour read/exercises) html tables (5–10 hour read/exercises) styling and layout with css time to complete: 90–120 hours prerequisites it is recommended that you have basic html knowledge before starting to learn css. you should at least study introduction to html first. how will i know i'm ready to move on? the assessments in each module are designed to test your knowledge of the subject matter. completing the assessments confirms that you are ready to move on to the next module. modules css first steps (10–15 hour read/exercises) css building blocks (35–45 hour read/exercis...
...And 3 more matches

Graceful asynchronous programming with Promises - Learn web development
used in that example. the trouble with callbacks to fully understand why promises are a good thing, it helps to think back to old-style callbacks and to appreciate why they are problematic. let's talk about ordering pizza as an analogy. there are certain steps that you have to take for your order to be successful, which doesn't really make sense to try to execute out of order, or in order but before each previous step has quite finished: you choose what toppings you want. this can take a while if you are indecisive, and may fail if you just can't make up your mind, or decide to get a curry instead. you then place your order. this can take a while to return a pizza and may fail if the restaurant does not have the required ingredients to cook it. you then collect your pizza and eat. this ...
...we're able to chain multiple asynchronous actions to occur one after another this way because each .then() block returns a new promise that resolves when the .then() block is done running. clever, right? using arrow functions, you can simplify the code even further: choosetoppings() .then(toppings => placeorder(toppings) ) .then(order => collectorder(order) ) .then(pizza => eatpi...
...element, add the following line: let promise = fetch('coffee.jpg'); this calls the fetch() method, passing it the url of the image to fetch from the network as a parameter. this can also take an options object as an optional second parameter, but we are just using the simplest version for now. we are storing the promise object returned by fetch() inside a variable called promise. as we said before, this object represents an intermediate state that is initially neither success nor failure — the official term for a promise in this state is pending. to respond to the successful completion of the operation whenever that occurs (in this case, when a response is returned), we invoke the .then() method of the promise object. the callback inside the .then() block (referred to as the execut...
...And 3 more matches

Inheritance in JavaScript - Learn web development
this function basically allows you to call a function defined somewhere else, but in the current context. the first parameter specifies the value of this that you want to use when running the function, and the other parameters are those that should be passed to the function when it is invoked. we want the teacher() constructor to take the same parameters as the person() ...
...evious addition: teacher.prototype = object.create(person.prototype); here our friend create() comes to the rescue again. in this case we are using it to create a new object and make it the value of teacher.prototype. the new object has person.prototype as its prototype and will therefore inherit, if and when needed, all the methods available on person.prototype. we need to do one more thing before we move on. after adding the last line, teacher.prototype's constructor property is now equal to person(), because we just set teacher.prototype to reference an object that inherits its properties from person.prototype! try saving your code, loading the page in a browser, and entering teacher.prototype.constructor into the console to verify. this can become a problem, so we need to set this righ...
...structor function that represents our person class. greeting() and farewell() are class methods. any methods you want associated with the class are defined inside it, after the constructor. in this example, we've used template literals rather than string concatenation to make the code easier to read. we can now instantiate object instances using the new operator, in just the same way as we did before: let han = new person('han', 'solo', 25, 'male', ['smuggling']); han.greeting(); // hi! i'm han let leia = new person('leia', 'organa', 19, 'female', ['government']); leia.farewell(); // leia has left the building. bye for now note: under the hood, your classes are being converted into prototypal inheritance models — this is just syntactic sugar. but i'm sure you'll agree that it's easier ...
...And 3 more matches

TypeScript support in Svelte - Learn web development
file to a scripts folder inside your project's root folder, and then run node scripts/setuptypescript.js. you can even use degit to download the script. that's what we will do to start porting our application to typescript. note: remember that you can run npx degit opensas/mdn-svelte-tutorial/07-typescript-support svelte-todo-typescript to get the complete to-do list application in javascript before you start porting it to typescript. go to the root directory of the project and enter these commands: npx degit sveltejs/template/scripts scripts # download script file to a scripts folder node scripts/setuptypescript.js # run it converted to typescript. you will need to re-run your dependency manager to get started. npm install ...
...te project you'd like to convert to typescript. just take into account that the svelte community is constantly improving svelte typescript support, so you should run npm update regularly to take advantage of the latest changes. note: if you find any trouble working with typescript inside a svelte application, have a look at this troubleshooting/faq section about typescript support. as we said before, typescript is a superset of javascript, so your application will run without modifications. currently you will be running a regular javascript application with typescript support enabled, without taking advantage of any of the features that typescript provides. you can now start adding types progressively. once you have typescript configured, you can start using it from a svelte component by ju...
...ce the export let todo line with the following: import type { todotype } from '../types/todo.type' export let todo: todotype note: another reminder — when importing a .ts file you have to omit the extension. check the import section of the typescript manual for more information. now from todos.svelte, we will instantiate a todo component with a literal object as its parameter before the call to the moreactions component, like this: <hr /> <todo todo={ { name: 'a new task with no id!', completed: false } } /> <!-- moreactions --> <moreactions {todos} add the lang='ts' to the <script> tag of the todos.svelte component, so that it knows to use the type checking we have specified. we will get the following error: by now you should get an idea about the kind...
...And 3 more matches

Setting up your own test automation environment - Learn web development
n enter the following command: node google_test_multiple if you are using a mac and do decide to test safari, you might get an error message along the lines of "could not create a session: you must enable the 'allow remote automation' option in safari's develop menu to control safari via webdriver." if you get this, follow the given instruction and try again. so here we've done the test as before, except that this time we've wrapped it inside a function, searchtest(). we've created new browser instances for multiple browsers, then passed each one to the function so the test is performed on all three browsers! fun huh? let's move on, look at the basics of webdriver syntax, in a bit more detail. webdriver syntax crash course let's have a look at a few key features of the webdriver syntax...
...xt, let's try entering some text into one of the form elements. add the following code and try running your test again: const input = driver.findelement(by.id('name')); input.sendkeys('filling in my form'); you can submit key presses that can't be represented by normal characters using properties of the webdriver.key object. ...
...e represented by normal characters using properties of the webdriver.key object. for example, above we used this construct to tab out of the form input before submitting it: driver.sleep(1000).then(function() { driver.findelement(by.name('q')).sendkeys(webdriver.key.tab); }); waiting for something to complete there are times where you'll want to make webdriver wait for something to complete before carrying on. for example if you load a new page, you'll want to wait for the page's dom to finish loading before you try to interact with any of its elements, otherwise the test will likely fail. in our google_test.js test for example, we included this block: driver.sleep(2000).then(function() { driver.gettitle().then(function(title) { if(title === 'webdriver - google search') { con...
...And 3 more matches

Command line crash course - Learn web development
contents page by page: less, cat manipulate and transform streams of text (for example changing all the instances of <div>s in an html file to <article>): awk, tr, sed note: there are a number of good tutorials on the web that go much deeper into the command line on the web — this is only a brief introduction! let's move forward and look at using a few of these tools on the command line. before you go any further, open your terminal program! navigation on the command line when you visit the command line you will inevitably need to navigate to a particular directory to "do something". all the operating systems (assuming a default setup) will launch their terminal program in your "home" directory, and from there you’re likely to want to move to a different place. the cd command lets ...
...as "wild card" characters, meaning "any sequence of characters". this allows you to run an operation against a potentially large number of files at once, all of which match the specified pattern. as an example, rm mdn-* would delete all files beginning with mdn-. rm mdn-*.bak would delete all files that start with mdn- and end with .bak. terminal — considered harmful? we’ve alluded to this before, but to be clear — you need to be careful with the terminal. simple commands do not carry too much danger, but as you start putting together more complex commands, you need to think carefully about what the command will do, and try testing them out first before you finally run them in the intended directory. let’s say you had 1000 text files in a directory, and you wanted to go through them ...
...o follow redirects using the -l flag. let's also look at the headers that developer.mozilla.org returns using curl's -i flag, and print all the location redirects it sends to the terminal, by piping the output of curl into grep (we will ask grep to return all the lines that contain the word "location"). ...
...And 3 more matches

Deploying our app - Learn web development
chunked, have tree-shaking applied, and that versions are "cache busted". running tests: these can range from "is this code formatted properly?" to "does this thing do what i expect?", and ensuring failing tests prevent deployment. actually deploying the updated code to a live url: or potentially a staging url so it can be reviewed first. note: cache busting is a new term that we haven't met before in the module. this is the strategy of breaking a browser's own caching mechanism, which forces the browser to download a new copy of your code. parcel (and indeed many other tools) will generate filenames that are unique to each new build. this unique filename "busts" your browser's cache, thereby making sure the browser downloads the fresh code each time an update is made to the deployed code. ...
...//github.com/new and create your own repository to host this code. give your repository a short, memorable name, without spaces in it (use hyphens to separate words), and a description, then click create repository at the bottom of the page. you should now have a "remote" url that points to your new github repo. this remote location needs to be added to our local git repository before we can push it up there, otherwise it won't be able to find it. you'll need to run a command with the following structure (use the provided https option for now — especially if you are new to github — not the ssh option): git remote add github https://github.com/yourname/repo-name.git so if your remote url was https://github.com/remy/super-website.git, as in the screenshot above, your c...
...l was https://github.com/remy/super-website.git, as in the screenshot above, your command would be git remote add github https://github.com/remy/super-website.git change the url to your own repository, and run it now. now we're ready to push our code to github; run the following command now: git push github master at this point you'll be prompted to enter a username and password before git will allow the push to be sent. this is because we used the https option rather than the ssh option, as seen in the screenshot earlier. for this you need your github username and then — if you do not have two-factor authentication (2fa) turned on — your github password. we would always encourage you to use 2fa if possible, but bear in mind that if you do, you'll also need to use a "person...
...And 3 more matches

Introducing a complete toolchain - Learn web development
t carefully. the smallest toolchain is one that has no links at all. you would handcode the html, use "vanilla javascript" (meaning no frameworks or intermediary languages), and manually upload it all to a server for hosting. however, more complicated software requirements will likely benefit from the usage of tools to help simplify the development process. in addition, you should include tests before you deploy to your production server to ensure your software works as intended — this already sounds like a necessary toolchain. for our sample project, we'll be using a toolchain specifically designed to aid our software development and support the technical choices made during the software design phase. we will however be avoiding any superfluous tooling, with the aim of keeping complexity t...
...ifically designed to aid our software development and support the technical choices made during the software design phase. we will however be avoiding any superfluous tooling, with the aim of keeping complexity to a minimum. for example, we could have included a tool to minimize our svg file sizes during build. however, this project has only 4 svg images, which were manually minified using svgo before adding them to the project. a couple of prerequisites besides the tools we're going to install that contribute to our toolchain, we mentioned two web services in the above list of tools. let's take this opportunity to make sure we are set up with them before we continue. you will need to create accounts with each of github and netlify if you wish to complete the tutorial. as mentioned previo...
...r from the install process, installing npm also installs a complimentary tool called npx. we will use npx later on this chapter to help run tools that are installed as local dependencies to the project. npm will be used to install subsequent parts of our toolchain. first of all, however, we'll install git to help with revision control. code revision control it's possible you've heard of "git" before. git is currently the most popular source code revision control tool available to developers — revision control provides many advantages, such as a way to backup your work in a remote place, and a mechanism to work in a team on the same project without fear of overwriting each other's code. it might be obvious to some, but it bears repeating: git is not the same thing as github. git is the rev...
...And 3 more matches

HTML parser threading
by obtaining a mutex once instead of having to synchronize thread on a per-tree op basis.) if the executor isn't reading from a stage, it calls nshtml5parser::parseuntilblocked() to parse potential document.write()-generated data into tree ops. the outer loop then has an inner loop that iterates over the tree ops in the executor's queue and calls perform on each one. parser termination is checked before each tree op for an early return, because, unfortunately, gecko expects parsers to be able to terminate immediately. after each tree op except the last one in the queue, the clock time is checked to see if runflushloop() has spent too much time without returning to the event loop. if too much time has been spent, a runnable for calling runflushloop() again is dispatched and an early return made b...
...e tree op stage), an owning reference to the nshtml5owningutf16buffer that contains the starting point of the speculation, an index into the nshtml5owningutf16buffer defining the exact starting point within the buffer, the line number of the tokenizer at that point and a snapshot of the tree op state. the line number and the snapshot are also added to the tree op that attempts to execute scripts (before flushing it). the tree builder snapshot contains a copy of the tree builder stack, a copy of the list of open formatting elements and copies of various fields that define the tree builder state. it contains all the information that is necessary to load back into the tree builder to restore it into a behaviorally equivalent state. the flush timer is disengaged, because it's not useful to make the ...
...er will produce tree ops so that they get flushed into the queue in the speculation object. if another tree op that attempts to execute a script is generated while speculating, another speculation object is initialized as described above and placed in the queue of speculation objects after the previous one. it is possible that the parser thread ends up parsing all remaining data into speculations before the main thread is ready to receive more tree ops. attempting to execute a script on the main thread, when the tree op executor executes a tree op that attempts to execute a script, the tree op is first checked for a tree builder state snapshot. there will be a snapshot if the tree op came from the parser thread. there won't be one if the tree op came from document.write() on the main thread (dis...
...And 3 more matches

Sqlite.jsm
ion is automatically rolled back. this makes code easy to write and read. javascript-y api. sqlite.jsm feels like a pure javascript module. the complexities of xpcom are mostly hidden from view. javascript programmers should feel right at home using sqlite.jsm. note: the sqlite.jsm javascript code module can only be used from chrome -- that is, from within the application itself or an add-on. before you can use this module, you need to import it into your scope: components.utils.import("resource://gre/modules/sqlite.jsm") obtaining a connection sqlite.jsm exports the sqlite symbol. this symbol is an object with a single function: openconnection. this function takes an object defining connection options: path (required) the database file to open. this can be an absolute or relative pat...
...pragma shrink_memory statement, which tells sqlite to shrink its memory usage (by clearing caches, etc). while calling this has the benefit of shrinking memory, it can make your database slower, especially if you will be interacting with it shortly after calling this function. this is because sqlite will need to page the database back into memory from disk. therefore, caution should be exercised before calling this function. this returns a promise that is resolved when the operation completes. discardcachedstatements() this function is used to discard cached statement instances, freeing memory in the process. active cached statements will not be discarded. therefore, it is safe to call this any time. this returns an integer count of the number of cached statements that were discarded. tabl...
...ee notes below. onrow (optional) function that is called when a row has been received. the return value is a promise that is resolved when the statement has finished execution. when a statement is executed via executecached(), the prepared statement object is cached inside the opened connection. the next time this same sql statement is executed (the sql argument is identical to one passed in before), the old statement object is reused. this saves time associated with parsing the sql statement and creating a new statement object. the downside is the cached statement object lingers in the opened connection, taking up memory. when a statement is executed via execute(), the underlying statement object is thrown away as soon as the statement finishes execution. executecached() is recommended f...
...And 3 more matches

NSS tools : signtool
d a file, it is difficult to claim later that you didn't sign it. in some situations, a digital signature may be considered as legally binding as a handwritten signature. therefore, you should take great care to ensure that you can stand behind any file you sign and distribute. ...
...digital signature may be considered as legally binding as a handwritten signature. therefore, you should take great care to ensure that you can stand behind any file you sign and distribute. for example, if you are a software developer, you should test your code to make sure it is virus-free before signing it. similarly, if you are a network administrator, you should make sure, before signing any code, that it comes from a reliable source and will run correctly with the software installed on the machines to which you are distributing it. before you can use netscape signing tool to sign files, you must have an object-signing certificate, which is a special certificate whose associated private key is used to create digital signatures. for testing purposes only...
...at will be distributed over the internet. * ca server software running on your corporate intranet or extranet. netscape certificate management system provides a complete management solution for creating, deploying, and managing certificates, including cas that issue object-signing certificates. you must also have a certificate for the ca that issues your signing certificate before you can sign files. if the certificate authority's certificate isn't already installed in your copy of communicator, you typically install it by clicking the appropriate link on the certificate authority's web site, for example on the page from which you initiated enrollment for your signing certificate. this is the case for some test certificates, as well as certificates issued by...
...And 3 more matches

How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
ce? in the case of html, whitespace is largely ignored — whitespace in between words is treated as a single character, and whitespace at the start and end of elements and outside elements is ignored. take the following minimal example: <!doctype html> <h1> hello world! </h1> this source code contains a couple of line feeds after the doctype and a bunch of space characters before, after, and inside the <h1> element, but the browser doesn’t seem to care at all and just shows the words "hello world!" as if these characters didn’t exist at all: this is so that whitespace characters don't impact the layout of your page. creating space around and inside elements is the job of css. what does happen to whitespace? they don't just disappear, however. any whitespace cha...
... which contains a space, and the word "world!"). another text node (consisting only of tabs and spaces). because of this, it establishes what is called an inline formatting context. this is one of the possible layout rendering contexts that browser engines work with. ...
...nly of tabs and spaces). because of this, it establishes what is called an inline formatting context. this is one of the possible layout rendering contexts that browser engines work with. ...
...And 3 more matches

EventTarget.addEventListener() - Web APIs
ified type occurs. this must be an object implementing the eventlistener interface, or a javascript function. see the event listener callback for details on the callback itself. options optional an options object specifies characteristics about the event listener. the available options are: capture a boolean indicating that events of this type will be dispatched to the registered listener before being dispatched to any eventtarget beneath it in the dom tree. once a boolean indicating that the listener should be invoked at most once after being added. if true, the listener would be automatically removed when invoked. passive a boolean that, if true, indicates that the function specified by listener will never call preventdefault(). if a passive listener does call preventdefault(),...
... generate a console warning. see improving scrolling performance with passive listeners to learn more. mozsystemgroup a boolean indicating that the listener should be added to the system group. available only in code running in xbl or in the chrome of the firefox browser. usecapture optional a boolean indicating whether events of this type will be dispatched to the registered listener before being dispatched to any eventtarget beneath it in the dom tree. events that are bubbling upward through the tree will not trigger a listener designated to use capture. event bubbling and capturing are two ways of propagating events that occur in an element that is nested within another element, when both elements have registered a handle for that event. the event propagation mode determines the o...
...t) { // unable to preventdefault inside passive event listener invocation. event.preventdefault(); alert('inner1, passive, open new page'); } function nonepassivehandler(event) { event.preventdefault(); //event.stoppropagation(); alert('inner2, none-passive, default, not open new page'); } result click the outer, middle, inner containers respectively to see how the options work. before using a particular value in the options object, it's a good idea to ensure that the user's browser supports it, since these are an addition that not all browsers have supported historically. see safely detecting option support for details. other notes why use addeventlistener()? addeventlistener() is the way to register an event listener as specified in w3c dom. the benefits are as follows: ...
...And 3 more matches

HTMLSelectElement.add() - Web APIs
if this parameter is null (or the index does not exist), the new element is appended to the end of the collection. exceptions a domerror of the type hierarchyrequesterror if the item passed to the method is an ancestor of the htmlselectelement. ...
...if this parameter is null (or the index does not exist), the new element is appended to the end of the collection. exceptions a domerror of the type hierarchyrequesterror if the item passed to the method is an ancestor of the htmlselectelement. ...
...so the following is accepted. ... sel.add(opt1); sel.add(opt2); ... append to an existing collection var sel = document.getelementbyid("existinglist"); var opt = document.createelement("option"); opt.value = "3"; opt.text = "option: value 3"; sel.add(opt, null); /* takes the existing following select object: <select id="existinglist"> <option value="1">optio...
...And 3 more matches

KeyboardEvent.key - Web APIs
key is held down further and the key produces a character key, then the event continues to be emitted in a platform implementation dependent interval and the keyboardevent.repeat read only property is set to true. if the key produces a character key that would result in a character being inserted into possibly an <input>, <textarea> or an element with htmlelement.contenteditable set to true, the beforeinput and input event types are fired in that order. note that some other implementations may fire keypress event if supported. the events will be fired repeatedly while the key is held down. a keyup event is fired once the key is released. this completes the process. in sequence 1 & 3, the keyboardevent.key attribute is defined and is set appropriately to a value according to the rules defined...
...g'), btnclearconsole = document.getelementbyid('btn-clear-console'); function logmessage(message) { document.getelementbyid("console-log").innerhtml += message + "<br>"; } textarea.addeventlistener('keydown', (e) => { if (!e.repeat) logmessage(`key "${e.key}" pressed [event: keydown]`); else logmessage(`key "${e.key}" repeating [event: keydown]`); }); textarea.addeventlistener('beforeinput', (e) => { logmessage(`key "${e.data}" about to be input [event: beforeinput]`); }); textarea.addeventlistener('input', (e) => { logmessage(`key "${e.data}" input [event: input]`); }); textarea.addeventlistener('keyup', (e) => { logmessage(`key "${e.key}" released [event: keyup]`); }); btnclearconsole.addeventlistener('click', (e) => { let child = consolelog.firstchild; while...
... case 1 when the shift key is pressed, a keydown event is first fired, and the key property value is set to the string shift. as we keep holding this key, the keydown event does not continue to fire repeatedly because it does not produce a character key. when key 2 is pressed, another keydown event is fired f...
...And 3 more matches

PerformanceResourceTiming - Web APIs
ring representing the type of resource that initiated the performance entry, as specified in performanceresourcetiming.initiatortype. performanceresourcetiming.nexthopprotocolread only a string representing the network protocol used to fetch the resource, as identified by the alpn protocol id (rfc7301). performanceresourcetiming.workerstartread only returns a domhighrestimestamp immediately before dispatching the fetchevent if a service worker thread is already running, or immediately before starting the service worker thread if it is not already running. if the resource is not intercepted by a service worker the property will always return 0. performanceresourcetiming.redirectstartread only a domhighrestimestamp that represents the start time of the fetch which initiates the redirect. ...
...always return 0. performanceresourcetiming.redirectstartread only a domhighrestimestamp that represents the start time of the fetch which initiates the redirect. performanceresourcetiming.redirectendread only a domhighrestimestamp immediately after receiving the last byte of the response of the last redirect. performanceresourcetiming.fetchstartread only a domhighrestimestamp immediately before the browser starts to fetch the resource. performanceresourcetiming.domainlookupstartread only a domhighrestimestamp immediately before the browser starts the domain name lookup for the resource. performanceresourcetiming.domainlookupendread only a domhighrestimestamp representing the time immediately after the browser finishes the domain name lookup for the resource. performanceresourceti...
...timing.domainlookupstartread only a domhighrestimestamp immediately before the browser starts the domain name lookup for the resource. performanceresourcetiming.domainlookupendread only a domhighrestimestamp representing the time immediately after the browser finishes the domain name lookup for the resource. performanceresourcetiming.connectstartread only a domhighrestimestamp immediately before the browser starts to establish the connection to the server to retrieve the resource. performanceresourcetiming.connectendread only a domhighrestimestamp immediately after the browser finishes establishing the connection to the server to retrieve the resource. ...
...And 3 more matches

SVGLengthList - Web APIs
hat attempts to modify the object will result in an exception being thrown. ...
...fication_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. initialize(in svglength newitem) svglength clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. if the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. the return value is the item inserted into the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. getitem(in unsigned long index) svglength returns the sp...
... returns the specified item from the list. the returned item is the item itself and not a copy. any changes made to the item are immediately reflected in the list. the first item is number 0. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. insertitembefore(in svglength newitem, in unsigned long index) svglength inserts a new item into the list at the specified position. the first item is number 0. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to insert befor...
...And 3 more matches

SVGStringList - Web APIs
defines a list of domstring objects. an svgstringlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
...cation_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. initialize(in domstring newitem) domstring clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. if the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. the return value is the item inserted into the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. getitem(in unsigned long index) domstring returns t...
...eturns the specified item from the list. the returned item is the item itself and not a copy. any changes made to the item are immediately reflected in the list. the first item is number 0. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. insertitembefore(in domstring newitem, in unsigned long index) domstring inserts a new item into the list at the specified position. the first item is number 0. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to insert befo...
...And 3 more matches

Writing WebSocket servers - Web APIs
programming experience. depending on language support, knowledge of tcp sockets may be required. the scope of this guide is to present the minimum knowledge you need to write a websocket server. note: read the latest official websockets specification, rfc 6455. sections 1 and 4-7 are especially interesting to server implementors. section 10 discusses security and you should definitely peruse it before exposing your server. a websocket server is explained on a very low level here. websocket servers are often separate and specialized servers (for load-balancing or other practical reasons), so you will often use a reverse proxy (such as a regular http server) to detect websocket handshakes, pre-process them, and send those clients to a real websocket server. this means that you don't have to bl...
...ses, but if it chooses any port other than 80 or 443, it may have problems with firewalls and/or proxies. browsers generally require a secure connection for websockets, although they may offer an exception for local devices. the handshake is the "web" in websockets. it's the bridge from http to websockets. in the handshake, details of the connection are negotiated, and either party can back out before completion if the terms are unfavorable. the server must be careful to understand everything the client asks for, otherwise security issues can occur. tip: the request-uri (/chat here) has no defined meaning in the spec. so, many people use it to let one server handle multiple websocket applications. for example, example.com/chat could invoke a multiuser chat app, while /game on the same serve...
...ed (browsers do not display it). if the server doesn't understand that version of websockets, it should send a sec-websocket-version header back that contains the version(s) it does understand. in the example above, it indicates version 13 of the websocket protocol. the most interesting header here is sec-websocket-key. let's look at that next. note: regular http status codes can be used only before the handshake. after the handshake succeeds, you have to use a different set of codes (defined in section 7.4 of the spec). server handshake response when the server receives the handshake request, it should send back a special response that indicates that the protocol will be changing from http to websocket. that header looks something like the following (remember each header line ends with \...
...And 3 more matches

Rendering and the WebXR frame animation callback - Web APIs
an xrsession created to represent an ongoing xr environment session, you need to provide frames of the scene to the xr device for rendering. this article covers the process of driving the frames of the xr scene to the device in the rendering loop, using the xrsession to obtain an xrframe object representing each frame, which is then used to prepare the framebuffer for delivery to the xr device. before you can render the virtual environment, you need to establish a webxr session by creating an xrsession using the navigator.xr.requestsession() method; you also need to associate the session with a framebuffer and perform other setup tasks. these setup tasks are described in the article setting up and shutting down a webxr session. preparing the renderer once the xr session has been set up, with...
...fresh boundary, you can wind up with a tearing effect. tearing occurs when the the display hardware starts the next refresh cycle while the previous frame is still being drawn to the screen. as a result, you wind up with the visual effect of the top part of the screen showing the new frame, while the bottom part of the frame shows some combination of the previous frame and possibly even the frame before that one. your mission, then, is to keep your code tight and lightweight enough that you don't overrrun the time available to you or otherwise cause dropped frames or excessively abuse the main thread. for these reasons, unless your renderer is fairly small and lightweight, with little to do, you should consider offloading everything you can to a worker so you can be computing the next frame wh...
...ou don't overrrun the time available to you or otherwise cause dropped frames or excessively abuse the main thread. for these reasons, unless your renderer is fairly small and lightweight, with little to do, you should consider offloading everything you can to a worker so you can be computing the next frame while the browser handles other things. by simply having your computations and data ready before the frame is actually called for, you can make your site or app render much more efficiently, improving main thread performance and generally making the user experience better. fortunately, there are some tricks you can use to further reduce your impact and optimize performance if your renderering needs are particularly heavy. see the webxr performance guide for recommendations and tips that wil...
...And 3 more matches

Cognitive accessibility - Accessibility
people with cognitive disabilities may require more time to read content, or to perform functions such as filling out forms. solutions include providing users enough additional time to complete tasks or eliminate time constraints altogether. timers options for adjusting time requirements include: allowing the user to turn off or adjust the time to at least 10 times the original limit before encountering it. alerting the user and providing a buffer of at least 20 seconds to extend the timeout duration by a factor of 10 with a simple action, such as hitting the space bar. provide a toggle on content that allows users to enable a longer session time limit, or no session time limit at all. examples of timed content include forms, timed reading exercises, and training materials. if t...
... updates by providing a way to request content updates rather than updating automatically. also, enable a way to make nonessential alerts optional. ensure that people can continue an activity without loss of data after re-authenticating an expired session, for example, saving the state of a questionnaire. make sure to save data in such a way that it can be modified after a user re-authenticates. before re-authenticating, encode the data as hidden or encrypted. providing warnings about inactivity that could result in data loss. when a timeout is used, tell people exactly how much time will cause the session to time out and result in lost data. the exception to this is preserving data for more than 20 hours when no actions are taken. navigation guideline 2.4 states "provide ways to help users...
...fuse users with cognitive disabilities, and should therefore only occur when it is clear that such a change will happen in response to the user's action. changing state should require intentional user action. examples of this are checking a checkbox, entering data or changing a select option. also be sure to provide a submit button to initiate the change of context, and describe what will happen before the change is made. keep navigation consistent throughout the site keep the navigation order consistent between pages. for example, if you have a navigation bar on multiple pages, make that navigation uniform across the site with the same links in the same location. this doesn't just apply to navigation: present all repeated components in the same relative order each time they appear. ...
...And 3 more matches

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
ly need to support msaa on the non-standard controls in your app. so, it's not too bad. mostly myth: microsoft is abandoning msaa in longhorn reality: microsoft's accessibility strategy is changing to a new api in longhorn. msaa will still be supported through an emulation layer, but that will probably be a very slow solution. we'll have to wait and see how good the msaa support in longhorn is, before we can call this one. msaa decision-making guide use msaa whenever you have created custom controls where you're handling the drawing, mouse and keyboard accessibility in your own code. msaa is the only way to let all at's know what your code is doing. don't use msaa if you're not running on a windows platform ... hope that one was obvious. don't use msaa if you're only windows target fo...
...d_sizegrip objid_sound objid_sysmenu objid_titlebar objid_vscroll objid_window [important, but implemented automatically by microsoft windows. will return object of type role_window. see windowfromaccessibleobject quirk explanation below.] dealing with the quirks of msaa msaa has a well deseved reputation for quirkiness. it is not "plug and play", and will take a lot of testing/refinement before your solution works with any product. here are some of it's quirks and some solutions/workarounds: msaa can be crash prone problem: many of msaa's crash occur because more than one process is refcounting the same objects, and because pointers are being shared between processes. when your application closes, different signals are typically broadcast. for example, the application window closes an...
...ive technology will use one of these signals to release the objects of yours that is is refcounting. this can lead to crashes where it releases something and the wrong time, when some of your dll's are unloaded but not others, and a destructor is called in an unloaded dll. solution: create a "shutdown" method for each internal accessible object, to remove any references to other internal objects before any of your dll's are unloaded. in order to do this effectively, you will have to keep track of every accessible object that you create. the shutdown method for an accessibility object should be called whenever the document or ui object it refers to goes away. the easiest way to do that is to keep a pointer to an accessible in each internal ui object. if that pointer is non-null, then there is an...
...And 3 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background-color: #f00; } .ui-color-picker .picker { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 1px solid #fff; position: absolute; top: 45%; left: 45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } .ui-color-picker .hue { background: url("images/hue_mask.png"); background: -moz-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, ...
...c="hexa"] > input { width: 90px; height: 24px; padding: 2px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* preview color */ .ui-color-picker .preview { width: 95px; height: 53px; margin: 5px; margin-top: 10px; border: 1px solid #ddd; background-image: url("images/alpha.png"); float: left; position: relative; } .ui-color-picker .preview:before { height: 100%; width: 50%; left: 50%; top: 0; content: ""; background: #fff; position: absolute; z-index: 1; } .ui-color-picker .preview-color { width: 100%; height: 100%; background-color: rgba(255, 0, 0, 0.5); position: absolute; z-index: 1; } .ui-color-picker .switch_mode { width: 10px; height: 20px; position: relative; border-radius: 5px 0 0 5px; border: 1px solid #ddd; ...
...rue'] { opacity: 1; z-index: 1; } .gradient-axis:after { content: ""; width: 25px; height: 100%; background-color: #ccc; position: absolute; left: 0; top: 0; } .gradient-axis .gradient-line { width: 80%; height: 100%; margin: 0px auto; position: relative; } .gradient-axis .gradient-line:hover { cursor: pointer; } .gradient-axis .gradient-line:after, .gradient-axis .gradient-line:before { content: ""; width: 1px; height: 100px; background-color: #ccc; position: absolute; top: -48px; } .gradient-axis .gradient-line:after { left: -1px; } .gradient-axis .gradient-line:before { right: -1px; } .gradient-axis .gradient-point { width: 16px; height: 16px; margin: 0 0 0 -8px; top: -7px; border-radius: 50%; background-color: #fff; border: 1px solid #999; position: absol...
...And 3 more matches

Expressions and operators - JavaScript
mation about operator precedence. assignment operators comparison operators arithmetic operators bitwise operators logical operators string operators conditional (ternary) operator comma operator unary operators relational operators javascript has both binary and unary operators, and one special ternary operator, the conditional operator. a binary operator requires two operands, one before the operator and one after the operator: operand1 operator operand2 for example, 3+4 or x*y. a unary operator requires a single operand, either before or after the operator: operator operand or operand operator for example, x++ or ++x. assignment operators an assignment operator assigns a value to its left operand based on the value of its right operand. the simple assignment operator...
... that means that (x = y) returns y, (x += y) returns the resulting sum x + y, (x **= y) returns the resulting power x ** y, and so on. in the case of logical assignments, (x &&= y), (x ||= y), and (x ??= y), the return value is that of the logical operation without the assignment, so x && y, x || y, and x ?? y, respectively. note that the return values are always based on the operands’ values before the operation. when chaining these expressions, each assignment is evaluated right-to-left. consider these examples: w = z = x = y is equivalent to w = (z = (x = y)) or x = y; z = y; w = y z += x *= y is equivalent to z += (x *= y) or tmp = x * y; x *= y; z += tmp (except without the tmp). destructuring for more complex assignments, the destructuring assignment syntax is a javascript expr...
...e not of the same type, javascript attempts to convert them to an appropriate type for the comparison. this behavior generally results in comparing the operands numerically. the sole exceptions to type conversion within comparisons involve the === and !== operators, which perform strict equality and inequality comparisons. these operators do not attempt to convert the operands to compatible types before checking equality. the following table describes the comparison operators in terms of this sample code: var var1 = 3; var var2 = 4; comparison operators operator description examples returning true equal (==) returns true if the operands are equal. 3 == var1 "3" == var1 3 == '3' not equal (!=) returns true if the operands are not equal. ...
...And 3 more matches

Object.create() - JavaScript
object.create() will result in an empty array being returned. var obj = object.create({ a: 1, b: 2 }); > console.log(object.entries(obj)); // shows "[]" some non-solutions a good solution for the missing object-methods is not immediately apparent. ...
...object-method > ocn.tostring() // error: function.prototype.tostring requires that 'this' be a function adding the missing object-method directly to new object's "prototype" does not work either, since the new object does not have a real prototype (which is really the cause of all these problems) and one cannot be directly added: ocn = object.create( null ); // create "null" object (same as before) ocn.prototype.tostring = object.tostring; // error: cannot set property 'tostring' of undefined ocn.prototype = {}; // try to create a prototype ocn.prototype.tostring = object.tostring; // since new object lacks method then try assigning it from standard-object > ocn.tostring() // error: ocn.tostring is not a function adding the missing object-method by using the ...
...however, adding the generic method directly, does: ocn = object.create( null ); // create "null" object (sa...
...And 3 more matches

String.prototype.localeCompare() - JavaScript
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the new locales and options arguments let applications specify the language whose sort order should be used and customize the behavior of the function. in older implementations, which ignore the locales and options arguments, the locale and sort order used are entirely implementation-dependent. ...
...tion and let applications specify the language whose formatting conventions should be used. in implementations which ignore the locales and options arguments, the locale used and the form of the string returned are entirely implementation-dependent. see the intl.collator() constructor for details on these parameters and how to use them. ...
...he form of the string returned are entirely implementation-dependent. see the intl.collator() constructor for details on these parameters and how to use them. return value a negative number if referencestr occurs before comparestring; positive if the referencestr occurs after comparestring; 0 if they are equivalent. description returns an integer indicating whether the referencestr comes before, after or is equivalent to the comparestring. ...
...And 3 more matches

Strict mode - JavaScript
ents enclosed in {} braces; attempting to apply it to such contexts does nothing. eval code, function code, event handler attributes, strings passed to windowtimers.settimeout(), and related functions are entire scripts, and invoking strict mode in them works as expected. strict mode for scripts to invoke strict mode for an entire script, put the exact statement "use strict"; (or 'use strict';) before any other statements. // whole-script strict mode syntax 'use strict'; var v = "hi! i'm a strict mode script!"; this syntax has a trap that has already bitten a major site: it isn't possible to blindly concatenate conflicting scripts. consider concatenating a strict mode script with a non-strict mode script: the entire concatenation looks strict! the inverse is also true: non-strict plus stric...
...of wrapping the entire contents of a script in a function and having that outer function use strict mode. this eliminates the concatenation problem and it means that you have to explicitly export any shared variables out of the function scope. strict mode for functions likewise, to invoke strict mode for a function, put the exact statement "use strict"; (or 'use strict';) in the function's body before any other statements. function strict() { // function-level strict mode syntax 'use strict'; function nested() { return 'and so am i!'; } return "hi! i'm a strict mode function! " + nested(); } function notstrict() { return "i'm not strict."; } strict mode for modules ecmascript 2015 introduced javascript modules and therefore a 3rd way to enter strict mode. the entire contents of ...
...the normal code may duplicate property names, with the last one determining the property's value. but since only the last one does anything, the duplication is simply a vector for bugs, if...
...And 3 more matches

Navigation and resource timings - Web Performance
al resource, the value will be the same as performancetiming.fetchstart. domainlookupstart when the domain lookup starts. if a persistent connection is used, or the information is stored in a cache or a local resource, the value will be the same as performancetiming.fetchstart. fetchstart when the browser is ready to fetch the document using an http request. this moment is before the check to any application cache. requeststart when the browser sent the request to obtain the actual document, from the server or from a cache. if the transport layer fails after the start of the request and the connection is reopened, this property will be set to the time corresponding to the new request. responsestart when the browser received the first byte of the re...
...ishes. if there is no previous document, or if the previous document, or one of the needed redirects, is not of the same origin, the value returned is 0. dominteractive when the parser finished its work on the main document, that is when its document.readystate changes to 'interactive' and the corresponding readystatechange event is thrown. domcontentloadedeventstart right before the parser sent the domcontentloaded event, that is right after all the scripts that need to be executed right after parsing have been executed. domcontentloadedeventend right after all the scripts that need to be executed as soon as possible, in order or not, have been executed. domcomplete when the parser finished its work on the main document, that is when its document.
...e for first-paint and first-contentful-paint. we use performance.getentriesbytype('navigation') and performance.getentriesbytype('resource') to query the navigation and resource timings respectively. navigation timing when a user requests a web site or application, to populate the browser the user agent goes through a series of steps, including a dns lookup, tcp handshake, and ssl negotiation, before the user agent makes the actual request and the servers return the requested assets. the browser then parses the content received, builds the dom, cssom, accessibility, and render trees, eventually rendering the page. once the user agent stops parsing the document, the user agent sets the document readiness to interactive. if there are deferred scripts needing to be parsed, it will do so, then fi...
...And 3 more matches

Understanding WebAssembly text format - WebAssembly
local.get 2) the instruction local.get 0 would get the i32 parameter, local.get 1 would get the f32 parameter, and local.get 2 would get the f64 local. ...
...ems simply by including a name prefixed by a dollar symbol ($) just before the type declaration. thus you could rewrite our previous signature like so: (func (param $p1 i32) (param $p2 f32) (local $loc f64) …) and then could write local.get $p1 instead of local.get 0, etc. (note that when this text gets converted to binary, though, the binary will contain only the integer.) stack machines before we can write a function body, we have to talk about one more thing: stack machines. although the browser compiles it to something more efficient, wasm execution is defined in terms of a stack machine where the basic idea is that every type of instruction pushes and/or pops a certain number of i32/i64/f32/f64 values to/from a stack. for example, local.get is defined to push the value of the local...
...alue — the result of the expression ($p + $p), which is handled by i32.add. the return value of a function is just the final value left on the stack. the webassembly validation rules ensure the stack matches exactly: if you declare a (result f32), then the stack must contain exactly one f32 at the end. if there is no result type, the stack must be empty. our first function body as mentioned before, the function body is simply a list of instructions that are followed as the function is called. putting this together with what we have already learned, we can finally define a module containing our own simple function: (module (func (param $lhs i32) (param $rhs i32) (result i32) local.get $lhs local.get $rhs i32.add)) this function gets two parameters, adds them together, and re...
...And 3 more matches

Using the WebAssembly JavaScript API - WebAssembly
two instead can work together, drawing on each other’s strengths. loading our wasm module without streaming if you can't or don't want to use the streaming methods as described above, you can use the non-streaming methods webassembly.compile / webassembly.instantiate instead. these methods don't directly access the byte code, so require an extra step to turn the response into an arraybuffer before compiling/instantiating the wasm module. the equivalent code would look like this: fetch('simple.wasm').then(response => response.arraybuffer() ).then(bytes => webassembly.instantiate(bytes, importobject) ).then(results => { results.instance.exports.exported_func(); }); viewing wasm in developer tools in firefox 54+, the developer tool debugger panel has functionality to expose the text...
...a memory export (via instance.prototype.exports). more involved memory example let’s make the above assertions clearer by looking at a more involved memory example — a webassembly module that imports the memory instance we defined earlier, populates it with an array of integers, then sums them. you can find this at memory.wasm. make a local copy of memory.wasm in the same directory as before. ...
...dule that imports the memory instance we defined earlier, populates it with an array of integers, then sums them. you can find this at memory.wasm. make a local copy of memory.wasm in the same directory as before. note: you can see the module’s text representation at memory.wat. ...
...And 3 more matches

Intercepting Page Loads - Archive of obsolete content
f the loaded page, just like you normally would for xul and html documents. you can't, however, easily cancel the page load. you can close the tab, redirect the tab to about:blank or another page, or tell the browser to stop loading this page, but in general you don't want to do this because it will be visible to the user and it will look like a bug. there are better ways to intercept page loads before any content is downloaded, and before the user sees anything in the tab. http observers another common way of detecting and intercepting loads is using http observer topics. this is how the tamper data extension and others do it. http notifications are fired for all http requests originating from firefox. they are window-independent, so it is better to keep your observer code in non-chrome obj...
...results.ns_binding_aborted); } } } this example shows how you can obtain the url for the request, analyze it using regular expressions, and perform actions on it such as modifying http headers, or even canceling the request. http observers are great for load detection, and filtering by url. you can also use these in conjunction with nsitraceablechannel to get and modify the response text before it gets to the original requester. you won't be able to make dom modifications like with the load events, since these notifications are triggered before the response arrives and is parsed into dom tree, so this is not the best approach for the typical greasemonkey-style extensions. notes on usage: efficiency is very important when adding http observers. remember that your observe method will b...
...f the first things we do is check if the url is of interest to us, otherwise we let it go. avoid heavy, time-consuming operations, or the user's browsing experience will become exasperating. . you have to take into account that a page load may involve several http requests, specially when redirects are involved. if you enter gmail.com in your browser, you will probably be redirected a few times before reaching the page that actually displays any content. all of these "hops" will involve a call to your observer. . the aforementioned observer notifications page has more information about these notifications and links to other useful documentation. webprogresslisteners when used in the chrome, this is a more sophisticated way of intercepting and modifying the various stages in page loads. but...
...And 2 more matches

The Essentials of an Extension - Archive of obsolete content
notation, and they're just common practice. as long as your id has some uniqueness to it, it's ok to use either form. <em:name>xul school hello world</em:name> <em:description>welcome to xul school!</em:description> <em:version>0.1</em:version> <em:creator>appcoast</em:creator> <em:homepageurl>https://developer.mozilla.org/docs/xul_school</em:homepageurl> this is the data that is displayed before and after the extension is installed, that you can see in the add-ons manager. there are many other tags that can be added, for contributors and translators. the full specification of the install.rdf file has all the details. since extensions can be translated to multiple languages, it is often necessary to translate the extension's description, or even its name. a localized description and name...
...tml, so you'll see many similarities between the two. however, xul is also an improvement over html, having learned from many of the mistakes made during the evolution of html. xul allows you to create richer and more interactive interfaces than the ones you can create with html, or at least xul makes it easier. xul files usually define one of two things: windows or overlays. the file you opened before, downloads.xul, has the code that defines the downloads window. the xul file included in the hello world extension is an overlay. an overlay extends an existing window, adding new elements to it or replacing some of the elements in it. the line that we skipped in the chrome.manifest file states that this xul file is an overlay for the main browser window: overlay chrome://browser/content/brows...
..., it is recommended that you add it there. otherwise, the root menu might be your only recourse. ...
...And 2 more matches

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
var ldaphost = "example.com"; var ldapbase = "dc=company,dc=local"; if( userinfo.envuser ) { var ldapfilter = "samaccountname=" + userinfo.envuser; } else { throw("couldn't get uid from the environment"); } // ldap attributes to retrieve from the server var ldapattrs = new array( "cn", "mail", "samaccountname" ); // add more attributes here, if needed) // define how to process ldap results before we make the call function processldapvalues(queryresults) { if( queryresults ) { // build the userinfo object for later use for( var attr in ldapattrs ) { userinfo[ ldapattrs[attr] ] = getldapvalue( queryresults, ldapattrs[attr] ); } } else { throw( "no ldap results" ); } } // call upon ldap for the values in ldapattrs array, // uses the previous processldapvalues() ge...
...lockpref("mail.server.server3.type", "nntp"); lockpref("mail.server.server3.username", env_user); //call to ldap to get user's attribute. getldapattributes("ldap2.int-evry.fr", "ou=people,dc=int-evry,dc=fr", "uid=" +env_user, "uid,cn,mail"); } catch(e) { displayerror("lockedpref", e); } eop print $page; windows peculiarities without web base cgi file, beware that in windows, the original (before encoding) mozilla.js file must start with: //begin ce prefs , if not you'll get "failed to read configuration file..." message, and mozilla won't start :-( in windows environment variables like user or home, are username and homepath, that's why we must create a different pair of configuration files (cfg and cgi) for both systems (linux/windows). perhaps there's a way in javascript to detect ope...
... allows users to use a single javascript for both systems (linux and windows) with a subtle if... else test on environment variables. ldap fail-over creating an array of possible running ldap servers permits an ldap fail-over, then a shuffle function allows us to randomly pick up a running ldap server. ...
...And 2 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
introduction when netscape started the mozilla browser, it made the conscious decision to support w3c standards. as a result, mozilla is not fully backwards-compatible with netscape navigator 4.x and microsoft internet explorer legacy code; for example, mozilla does not support <layer> as i will discuss later. browsers, like internet explorer 4, that were built before the conception of w3c standards inherited many quirks. in this article, i will describe mozilla's quirks mode, which provides strong backwards html compatibility with internet explorer and other legacy browsers. i'll also cover nonstandard technologies, such as xmlhttprequest and rich text editing, that mozilla does support because no w3c equivalent existed at the time. they include: html 4.01, xhtml 1.0 and xhtml 1.1 ...
...access protocol: soap 1.1 ecma-262, revision 3 (javascript 1.5): ecma-262 general cross-browser coding tips even though web standards do exist, different browsers behave differently (in fact, the same browser may behave differently depending on the platform). many browsers, such as internet explorer, also support pre-w3c apis and have never added extensive support for the w3c-compliant ones. before i go into the differences between mozilla and internet explorer, i'll cover some basic ways you can make a web application extensible in order to add new browser support later. since different browsers sometimes use different apis for the same functionality, you can often find multiple if() else() blocks throughout the code to differentiate between the browsers. the following code shows blocks d...
...akes a copy of the node it is called on and returns the copy. if adeep is true, it copies over the node's entire subtree. createelement( atagname ) creates and returns a new and parentless dom node of the type specified by atagname. createtextnode( atextvalue ) creates and returns a new and parentless dom textnode with the data value specified by atextvalue. insertbefore( anewnode, achildnode ) inserts anewnode before achildnode, which must be a child of the current node. removechild( achildnode ) removes achildnode and returns a reference to it. replacechild( anewnode, achildnode ) replaces achildnode with anewnode and returns a reference to the removed node. document fragments for performance reasons, you can create documents ...
...And 2 more matches

Dynamically modifying XUL-based user interface - Archive of obsolete content
iframe>, <browser>, or a <tabbrowser> element. you must be sure to always manipulate the correct document. (read more about this in working with windows in chrome code.) when your script is included using a <script> tag, the document property references the dom document that includes the script. examples: using dom methods this section demonstrates the use of appendchild(), createelement(), insertbefore(), and removechild() dom methods. removing all children of an element this example removes all children of an element with id=someelement from the current document, by calling removechild() method to remove the first child, until there are no children remaining. note, that haschildnodes() and firstchild are also part of the dom api. var element = document.getelementbyid("someelement"); while(el...
...that haschildnodes() and firstchild are also part of the dom api. var element = document.getelementbyid("someelement"); while(element.haschildnodes()){ element.removechild(element.firstchild); } inserting menu items to a menu this example adds two new menu items to a <menupopup>: to the start and to the end of it. ...
...thod to create the items, and insertbefore() with appendchild() to insert the created xml elements within the document. note: document.createelementns() creates an element, but does not put it anywhere in the document. you need to use other dom methods, such as appendchild() to insert the newly created element in the document. appendchild() appends the node after all other nodes, while insertbefore() inserts the node before the node referenced by its second parameter. function createmenuitem(alabel) { const xul_ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var item = document.createelementns(xul_ns, "menuitem"); // create a new xul menuitem item.setattribute("label", alabel); return item; } var popup = document.getelementbyid("mypopup"); // a <menupopup> ele...
...And 2 more matches

Static Content - Archive of obsolete content
one interesting thing about this example is that only one menupopup will be created, even...
...tion> <menupopup> <menuitem uri="?country" label="?countrytitle" value="?country"/> </menupopup> </action> </template> </menulist> the only difference between the previous example and this one is that the menulist element has some additional content added before the template. the content will be displayed just like it would be as if the template wasn't present. that is, before the template is examined, the menulist would have one item in it, with the label 'all'. the template generates two results as before, one for each country, and appends a menuitem for each one. one interesting thing about this example is that only one menupopup will be created, even though there are two in the code, one outside the template and another one inside the action body. this demonstrates...
...dy present as long as some element with the same tag name exists. if you were to change the static content to be some other element besides a menupopup, it won't match, so the builder will create a new one when handling the action. this becomes useful when using multiple rules and we'll see some examples of this later. here is the example to try. ...
...And 2 more matches

Tree Widget Changes - Archive of obsolete content
sort column, and position and size info about the columns. for the most part these objects are readonly; you can modify the columns by just adjusting the treecol attributes directly. the tree and view methods no longer take ids as arguments when columns are used. instead, they use nsitreecolumns. for example, nsitreeview.getcellvalue() takes a row index and a nsitreecolumn as arguments, whereas before it took a row index and a column id. to get a column in javascript: tree.columns.getcolumnfor(treecolelement); tree.columns.getnamedcolumn(treecolid); tree.columns.getcolumnat(index); you can also just use array syntax to get a column: tree.columns["lastname"]; tree.columns[5]; once you have a column, you can get various properties of it: column.index - the index of the column in displa...
... the column column.width - the width of the column in c++ code, you can also get the atom attribute of nsitreecolumn which returns an nsiatom for the column, making it fast to do comparisons. nscomptr<nsiatom> atom; acol->getatom(getter_addrefs(atom)); if (atom = kmycol) ... one feature that has been added is restorenaturalorder which may be used to restore the original order of the columns before the user moved them around. tree.columns.restorenaturalorder() there is also a command on the end of the tree's column picker which the user may use to restore the original column order. this will be hidden if the column redordering is disabled using enablecolumndrag="false". some specific changes you should now get the tree selection object from the view, not the box object, meaning use tre...
...validatecell(row, tree.columns.getprimarycolumn()). this may be used to redraw a cell after it or its data has been changed. the nsitreeview.cycleheader() method has been changed, cycleheader(colid, element) is now just cycleheader(column), since the code can get the element from the column object. ...
...And 2 more matches

panel - Archive of obsolete content
noautohide type: boolean if false, the default value, the panel will be hidden when the user clicks outside the panel or switches focus to another application. if true, the panel will only be closed when the hidepopup method is called. norestorefocus type: boolean if false, the default value, then when the panel is hidden, the keyboard focus will be restored to whatever had the focus before the panel was opened. if true, the focus will not be reset, although it will be cleared if the focus is within the panel. onpopuphidden type: script code this event is sent to a popup after it has been hidden. this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden. example: <menupopup id="top" onpopuphidden="consol...
...enu id="submenu2" label="submenu 1"> <menupopup id="submenu2-popup"> <menuitem label="submenu2 item 1"/> <menuitem label="submenu2 item 2"/> </menupopup> </menu> <menupopup/> onpopuphiding type: script code this event is sent to a popup when it is about to be hidden. onpopupshowing type: script code this event is sent to a popup just before it is opened. this handler is usually used to dynamically set the contents when the user requests to display it. returning false from this event handler prevents the popup from appearing. onpopupshown type: script code this event is sent to a popup after it has been opened, much like the onload event is sent to a window when it is opened. position type: string the position attri...
... second word). the anchor value (ie, the first word) can be one of topleft, topright, bottomleft, bottomright, leftcenter, rightcenter, topcenter or bottomcenter. the popup value (ie, the second word) can be one of topleft, topright, bottomleft or bottomright. positions specified as a single word string are shortcuts for the values above. valid single-word values are after_start, after_end, before_start, before_end, end_after, end_before, start_after, start_before, overlap, at_pointer or after_pointer. for more details, including examples, please see popup positioning titlebar type: string set the panel's titlebar attribute to the value normal to display a panel with a titlebar. the noautohide attribute must be set to true. top type: integer overrides the vertical positio...
...And 2 more matches

Using IO Timeout And Interrupt On NT - Archive of obsolete content
ing netscape portable runtime's (nspr) io timeout and interrupt on windows nt 3.51 and 4.0. ...
...if the thread gets interrupted by another thread's <tt>pr_interrupt()</tt> call, the io function returns with <tt>pr_pending_interrupt_error</tt>. on windows nt, nspr io is implemented using nt's overlapped (also called asynchronous) io. ...
...reads) monitoring the io completion port for completed io requests. if a completed io request appears at the io completion port, an idle thread fetches it and wakes up the thread that issued the io request earlier. this is the normal way the thread is awakened. io timeout and interrupt however, nspr may wake up the thread in two other situations: if the overlapped io request is not completed before the specified timeout. (note that we can't specify timeout on overlapped io requests, so the timeouts are all handled at the nspr level.) in this case, the error is <tt>pr_io_timeout_error</tt>. if the thread gets interrupted by another thread's <tt>pr_interrupt()</tt> call. in this case, the error is <tt>pr_pending_interrupt_error</tt>. these two errors are generated by the nspr layer, so the ...
...And 2 more matches

Cascade and inheritance - Learn web development
city, and inheritance — which control how css is applied to html and how conflicts are resolved. while working through this lesson may seem less immediately relevant and a little more academic than some other parts of the course, an understanding of these things will save you much pain later on! we encourage you to work through this section carefully, and check that you understand the concepts before moving on. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the cascade and specificity, and how inheritance works in css. conflicting rules css stands for cascading style sheets, and that...
...the <a> element — for example a { color: red; }? resetting all property values the css shorthand property all can be used to apply one of these inheritance values to (almost) all properties at once. its value can be any one of the inheritance values (inherit, initial, unset, or revert). it's a convenient way to undo changes made to styles so that you can get back to a known starting point before beginning new changes. in the below example we have two blockquotes. the first has styling applied to the blockquote element itself, the second has a class applied to the blockquote which sets the value of all to unset. try setting the value of all to some of the other available values and observe what the difference is. understanding the cascade we now understand why a paragraph nested de...
... the first two selectors are competing over the styling of the link's background color — the second one wins and makes the background color blue ...
...And 2 more matches

Tips for authoring fast-loading HTML pages - Learn web development
ending on a browser's cache settings, it may send a request with the if-modified-since header for each referenced file, asking whether the file has been modified since the last time it was downloaded. too much time spent querying the last modified time of the referenced files can delay the initial display of the web page, since the browser must check the modification time for each of these files, before rendering the page. if you use background images a lot in your css, you can reduce the number of http lookups needed by combining the images into one, known as an image sprite. then you just apply the same image each time you need it for a background and adjust the x/y coordinates appropriately. this technique works best with elements that will have limited dimensions, and will not work for ever...
...e download page content first, along with any css or javascript that may be required for its initial display, so that the user gets the quickest apparent response during the page loading. this content is typically text, and can, therefore, benefit from text compression in transit, thus providing an even quicker response to the user. any dynamic features that require the page to complete loading before being used, should be initially disabled, and then only enabled after the page has loaded. this will cause the javascript to be loaded after the page contents, which will improve the overall appearance of the page load. reduce the number of inline scripts inline scripts can be expensive for page loading since the parser must assume that an inline script could modify the page structure while par...
...</table> see also: css flexible box layout and css grid layout specifications. minify and compress svg assets svg produced by most drawing applications often contains unnecessary metadata which can be removed. configure your servers, apply gzip compression for svg assets. minify and compress your images large images cause your page to take more time to load. consider compressing your images before adding them to your page, using compression features built into image-manipulation tools such as photoshop, or using a specialized tool such as compress jpeg or tiny png,. specify sizes for images and tables if the browser can immediately determine the height and/or width of your images and tables, it will be able to display a web page without having to reflow the content. this not only speeds ...
...And 2 more matches

Video and audio content - Learn web development
is for controlling them. we'll not be looking at javascript here — just the basic foundations that can be achieved with html. we won't be teaching you how to produce audio and video files — that requires a completely different skillset. we have provided you with sample audio and video files and example code for your own experimentation, in case you are unable to get hold of your own. note: before you begin here, you should also know that there are quite a few ovps (online video providers) like youtube, dailymotion, and vimeo, and online audio providers like soundcloud. such companies offer a convenient, easy way to host and consume videos, so you don't have to worry about the enormous bandwidth consumption. ovps even usually offer ready-made code for embedding video/audio in your webpages...
...for the film, and english captions for the commentary. the audio and video tracks within the container hold data in the appropriate format for the codec used to encode that media. different formats are used for audio tracks versus video tracks. each audio track is encoded using an audio codec, while video tracks are encoded using (as you probably have guessed) a video codec. as we talked about before, different browsers support different video and audio formats, and different container formats (like mp3, mp4, and webm, which in turn can contain different types of video and audio). for example: a webm container typically packages vorbis or opus audio with vp8/vp9 video. this is supported in all modern browsers, though older versions may not work. an mp4 container often packages aac or mp3...
...t of the page is loading. you are advised not to use autoplaying video (or audio) on your sites, because users can find it really annoying. loop makes the video (or audio) start playing again whenever it finishes. this can also be annoying, so only use if really necessary. muted causes the media to play with the sound turned off by default. poster the url of an image which will be displayed before the video is played. it is intended to be used for a splash screen or advertising screen. preload used for buffering large files; it can take one of three values: "none" does not buffer the file "auto" buffers the media file "metadata" buffers only the metadata for the file you can find the above example available to play live on github (also see the source code.) note that we ...
...And 2 more matches

Choosing the right approach - Learn web development
cks settimeout() settimeout() is a method that allows you to run a function after an arbitrary amount of time has passed. useful for... single delayed operation repeating operation multiple sequential operations multiple simultaneous operations yes yes (recursive timeouts) yes (nested timeouts) no code example here the browser will wait two seconds before executing the anonymous function, then will display the alert message (see it running live, and see the source code): let mygreeting = settimeout(function() { alert('hello, mr. universe!'); }, 2000) pitfalls you can use recursive settimeout() calls to run a function repeatedly in a similar fashion to setinterval(), using code like this: let i = 1; settimeout(function run() { console.log(i...
...the interval will be the same regardless of how long the code takes to run. with setinterval(), the interval we choose includes the time taken to execute the code we want to run in. let's say that the code takes 40 milliseconds to run — the interval then ends up being only 60 milliseconds. when your code has the potential to take longer to run than the time interval you’ve a...
...otes.requires a vendor prefix or different name for use.requires a vendor prefix or different name for use. further information cooperative asynchronous javascript: timeouts and intervals, in particular requestanimationframe() requestanimationframe() reference promises promises are a javascript feature that allows you to run asynchronous operations and wait until it is definitely complete before running another operation based on its result. promises are the backbone of modern asynchronous javascript. useful for... single delayed operation repeating operation multiple sequential operations multiple simultaneous operations no no yes see promise.all(), below code example the following code fetches an image from the server and displays it inside...
...And 2 more matches

Arrays - Learn web development
in the above example, each element is a string, but in an array we can store various data types — strings, numbers, objects, and even other arrays. we can also mix data types in a single array — we do not have to limit ourselves to storing only numbers in one array, and in another only strings. for example: let sequence = [1, 1, 2, 3, 5, 8, 13]; let random = ['tree', 795, [0, 1, 2]]; before proceeding, create a few example arrays. accessing and modifying array items you can then access individual items in the array using bracket notation, in the same way that you accessed the letters in a string. enter the following into your console: shopping[0]; // returns "bread" you can also modify an item in an array by simply giving a single array item a new value. try this: shopp...
...sing bracket notation, in the same way that you accessed the letters in a string. enter the following into your console: shopping[0]; // returns "bread" you can also modify an item in an array by simply giving a single array item a new value. try this: shopping[0] = 'tahini'; shopping; // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ] note: we've said it before, but just as a reminder — computers start counting from 0! note that an array inside an array is called a multidimensional array. you can access an item inside an array that is itself inside another array by chaining two sets of square brackets together. for example, to access one of the items inside the array that is the third item inside the random array (see previous section), we could do...
... is called a multidimensional array. you can access an item inside an array that is itself inside another array by chaining two sets of square brackets together. for example, to access one of the items inside the array that is the third item inside the random array (see previous section), we could do something like this: random[2][2]; try making some more modifications to your array examples before moving on. play around a bit, and see what works and what doesn't. finding the length of an array you can find out the length of an array (how many items are in it) in exactly the same way as you find out the length (in characters) of a string — by using the length property. try the following: shopping.length; // should return 5 this has other uses, but it is most commonly used to tell a l...
...And 2 more matches

Basic math in JavaScript — numbers and operators - Learn web development
te to a greater number of decimal places). we even have different types of number systems! decimal is base 10 (meaning it uses 0–9 in each column), but we also have things like: binary — the lowest level language of computers; 0s and 1s. octal — base 8, uses 0–7 in each column. hexadecimal — base 16, uses 0–9 and then a–f in each column. you may have encountered these numbers before when setting colors in css. before you start to get worried about your brain melting, stop right there! for a start, we are just going to stick to decimal numbers throughout this course; you'll rarely come across a need to start thinking about other types, if ever. the second bit of good news is that unlike some other programming languages, javascript only has one data type for numbers, both i...
... tools javascript console. first of all, let's declare a couple of variables and initialize them with an integer and a float, respectively, then type the variable names back in to check that everything is in order: let myint = 5; let myfloat = 6.667; myint; myfloat; number values are typed in without quote marks — try declaring and initializing a couple more variables containing numbers before you move on. now let's check that both our original variables are of the same datatype. there is an operator called typeof in javascript that does this. enter the below two lines as shown: typeof myint; typeof myfloat; you should get "number" returned in both cases — this makes things a lot easier for us than if different numbers had different data types, and we had to deal with them in di...
...um2 holds the value 50 and num1 holds the value 10 (as originally stated above): num2 + num1 / 8 + 2; as a human being, you may read this as "50 plus 10 equals 60", then "8 plus 2 equals 10", and finally "60 divided by 10 equals 6". but the browser does "10 divided by 8 equals 1.25", then "50 plus 1.25 plus 2 equals 53.25". this is because of operator precedence — some operators are applied before others when calculating the result of a calculation (referred to as an expression, in programming). operator precedence in javascript is the same as is taught in math classes in school — multiply and divide are always done first, then add and subtract (the calculation is always evaluated from left to right). if you want to override operator precedence, you can put parentheses round the parts ...
...And 2 more matches

Aprender y obtener ayuda - Learn web development
cific subjects, getting into deep problem solving, and improving your mastery of the techniques required — strengthening the neural pathways in your brain where that information is stored. it isn't however very good at getting an understanding of "the big picture", and unlocking new neural pathways when you are trying to understand new subjects or solve new problems that you haven't come across before. for that, you need diffuse thinking. this is the opposite of focus — you let your brain wander around the wider landscape, searching around for connections you didn't have before, touching on new things (or new combinations of things) that you can then focus on later, to strengthen them and start to really understand what they mean. this is why it is usually good to read some introductory m...
... it is also why you can sometimes get really stuck on a problem, but then figure out the answer when you go for a coffee break (or a walk). you might: know how to fix problem a with tool a. know how to fix problem b with tool b. ...
... the room — most people we have are distracted by their phone a lot, so you should leave it somewhere else. take regular breaks. it is not good for your motivation to keep working away for hours with no break, especially if you are finding it hard or getting stuck on a problem. that just leads to frustration — it is often better to take a break, move around for a bit, then relax with a drink before getting back to work, and as we said earlier, the diffuse learning you do in that time can often help you to figure out a solution to the problem you were facing. it is also physically bad to work for too long without a break — looking at a monitor for too long can hurt your eyes, and sitting still for too long can be bad for your back or legs. we'd recommend taking a 15 minutes break every hou...
...And 2 more matches

Website security - Learn web development
d by flooding a target site with fake requests so that access to a site is disrupted for legitimate users. the requests may simply be numerous, or they may individually consume large amounts of resource (e.g., slow reads or uploading of large files). dos defenses usually work by identifying and blocking "bad" traffic while allowing legitimate messages through. these defenses are typically located before or in the web server (they are not part of the web application itself). directory traversal (file and disclosure). in this attack, a malicious user attempts to access parts of the web server file system that they should not be able to access. this vulnerability occurs when the user is able to pass filenames that include file system navigation characters (for example, ../../). the solution is to ...
...server (they are not part of the web application itself). directory traversal (file and disclosure). in this attack, a malicious user attempts to access parts of the web server file system that they should not be able to access. this vulnerability occurs when the user is able to pass filenames that include file system navigation characters (for example, ../../). the solution is to sanitize input before using it. file inclusion. in this attack, a user is able to specify an "unintended" file for display or execution in data passed to the server. when loaded, this file might be executed on the web server or the client-side (leading to an xss attack). the solution is to sanitize input before using it. command injection. command injection attacks allow a malicious user to execute arbitrary system ...
...tended" file for display or execution in data passed to the server. when loaded, this file might be executed on the web server or the client-side (leading to an xss attack). the solution is to sanitize input before using it. command injection. command injection attacks allow a malicious user to execute arbitrary system commands on the host operating system. the solution is to sanitize user input before it might be used in system calls. for a comprehensive listing of website security threats see category: web security exploits (wikipedia) and category: attack (open web application security project). a few key messages almost all of the security exploits in the previous sections are successful when the web application trusts data from the browser. whatever else you do to improve the security ...
...And 2 more matches

Accessibility in React - Learn web development
ove between each of the filter buttons. keep going until the focus indicator is around the first "edit" button. press enter. the <todo /> component will switch templates, as we designed, and you'll see a form that lets us edit the name of the task. but where did our focus indicator go? when we switch between templates in our <todo /> component, we completely remove the elements that were there before to replace them with something else. that means the element that we were focused on vanishes, and nothing is in focus at all. this could confuse a wide variety of users — particularly users who rely on the keyboard, or users who use a screen reader. to improve the experience for keyboard and screen-reader users, we should manage the browser’s focus ourselves. focusing between templates whe...
... editfieldref.current.focus(); } else { editbuttonref.current.focus(); } }, [isediting]); this kind of mostly works. head back to your browser and you’ll see that your focus moves between edit <input> and "edit" button as you start and end an edit. however, you may have noticed a new problem — the "edit" button in the final <todo /> component is focussed immediately on page load, before we even interact with the app! our useeffect() hook is behaving exactly as we designed it: it runs as soon as the component renders, sees that isediting is false, and focuses the "edit" button. because there are three instances of <todo />, we see focus on the last "edit" button. we need to refactor our approach so that focus changes only when isediting changes from one value to another. more ...
...at focus changes only when isediting changes from one value to another. more robust focus management in order to meet our refined criteria, we need to know not just the value of isediting, but also when that value has changed. in order to do that, we need to be able to read the previous value of the isediting constant. using pseudocode, our logic should be something like this: if (wasnoteditingbefore && iseditingnow) { focusoneditfield() } if (waseditingbefore && isnoteditingnow) { focusoneditbutton() } the react team had discussed ways to get a component’s previous state, and has provided an example custom hook we can use for the job. paste the following code near the top of todo.js, above your todo() function. function useprevious(value) { const ref = useref(); useeffect(() => ...
...And 2 more matches

React interactivity: Events and state - Learn web development
ully add and delete tasks, and toggle tasks as completed. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. objective: to learn about handling events and state in react, and use those to start making the case study app interactive. handling events if you've only written vanilla javascript before now, you might be used to having a separate javascript file, where you query for some dom nodes and attach listeners to them. for example: const btn = document.queryselector('button'); btn.addeventlistener('click', () => { alert("hi!"); }); in react, we write event handlers directly on the elements in our jsx, like this: <button type="button" onclick={() => alert("hi!")} > say hi! </b...
...bute to the form’s input, and set its value to name. your browser will render "use hooks!" inside the input. <input type="text" id="new-todo-input" classname="input input__lg" name="text" autocomplete="off" value={name} /> change "use hooks!" to an empty string once you're done; this is what we want for our initial state. const [name, setname] = usestate(''); reading user input before we can change the value of name, we need to capture a user's input as they type. for this, we can listen to the onchange event. let’s write a handlechange() function, and listen for it on the <input /> tag. // near the top of the `form` component function handlechange(e) { console.log("typing!"); } // down in the return statement <input type="text" id="new-todo-input" classname="input...
...thing, and try your app again — now you can add tasks without getting that warning about duplicate ids. detour: counting tasks now that we can add new tasks, you may notice a problem: our heading reads 3 tasks remaining, no matter how many tasks we have! we can fix this by counting the length of tasklist and changing the text of our heading accordingly. add this inside your app() definition, before the return statement: const headingtext = `${tasklist.length} tasks remaining`; hrm. this is almost right, except that if our list ever contains a single task, the heading will still use the word “tasks”. we can make this a variable, too. update the code you just added as follows: const tasksnoun = tasklist.length !== 1 ? 'tasks' : 'task'; const headingtext = `${tasklist.length} ${tasksnou...
...And 2 more matches

The Firefox codebase: CSS Guidelines
en specify the styles in css. classlist is generally better than classname. there's less chance of overwriting an existing class. only use generic selectors such as :last-child, when it is what you mean semantically. if not, using a semantic class name is more descriptive and usually better. boilerplate make sure each file starts with the standard copyright header (see license boilerplate). before adding more css it is good practice to check if the css that is being written is needed, it can be the case that a common component has been already written could be reused with or without changes. most of the time, the common component already follows the a11y/theme standards defined in this guide. so, when possible, always prefer editing common components to writing your own. also, it is good...
...a common class when the new element you are styling reuses some styles from another element, this allows the maintenance cost and the amount of code duplication to be reduced. formatting spacing & indentation 2 spaces indentation is preferred add a space after each comma, except within color functions: linear-gradient(to bottom, black 1px, rgba(255,255,255,0.2) 1px) always add a space before !important. omit units on 0 values do this: margin: 0; not this: margin: 0px; use expanded syntax it is often harder to understand what the shorthand is doing and the shorthand can also hide some unwanted default values. it is good to privilege expanded syntax to make your intentions explicit. do this: border-color: red; not this: border: red; put multiple selectors on...
...true"]. avoid id selectors unless it is really the wanted goal, since ids have higher specificity and therefore are harder to override. using descendant selectors is good practice for performance when possible: for example: .autocomplete-item[selected] > .autocomplete-item-title would be more efficient than .autocomplete-item[selected] .autocomplete-item-title overriding css before overriding any css rules, check whether overriding is really needed. sometimes, when copy-pasting older code, it happens that the code in question contains unnecessary overrides. this could be because the css that it was overriding got removed in the meantime. in this case, simply dropping the override should work. it is also good practice to look at whether the rule you are overriding is still ...
...And 2 more matches

Performance best practices for Firefox front-end engineers
friends at google, which itself is well worth the read. for a very down-to-earth explanation of the style, layout, paint and composite steps of the pipeline, this hacks blog post does a great job of explaining it. to achieve a 60 fps frame rate, all of the above has to happen in 16 milliseconds or less, every frame. note that requestanimationframe() lets you queue up javascript to run right before the style flush occurs. this allows you to put all of your dom writes (most importantly, anything that could change the size or position of things in the dom) just before the style and layout steps of the pipeline, combining all the style and layout calculations into a single batch so it all happens once, in a single frame tick, instead of across multiple frames. see detecting and avoiding synchr...
...t the style information you’re asking for has something to do with size or position, you may also cause a layout recalculation (also referred to as layout flush or reflow), which is also an expensive step (see detecting and avoiding synchronous reflow below). to avoid this: avoid reading style information if you can. if you must read style information, do so at the very beginning of the frame, before any changes have been made to the dom since the last time a style flush occurred. 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. if you want to queue up some javascript to run after the next "natural" style and layout flush, try: // suppose we want to get the computed "disp...
... vaguest sense of what it is—and to only know to avoid it. this section will attempt to demystify things. the first time a document (xul or html) loads, we parse the markup, and then apply styles. once the styles have been calculated, we then need to calculate where things are going to be placed on the page. this layout step can be seen in the “16ms” pipeline graphic above, and occurs just before we paint things to be composited for the user to see. it is expected that over time, script will update the dom, requiring us to recalculate styles, and then update layout. normally, however, the changes to the dom just result in the standard style calculation that occurs immediately after the javascript has finished running during the 16ms window. interruptible reflow since the early days, ge...
...And 2 more matches

Download
lly downloaded data that can be used when restarting a failed or canceled download. this property is relevant while the download is in progress, and also if it failed or has been canceled. if the download has been completed successfully, this property is not relevant anymore. whether partial data can actually be retained depends on the saver and the download source, and may not be known before the download is started. hasprogress read only boolean indicates whether this download's progress property is able to report partial progress while the download proceeds, and whether the value in totalbytes is relevant. this depends on the saver and the download source. launchwhensucceeded boolean if this property is true when the download finishes successfully,...
...rties (for example, the succeeded property) instead. saver read only downloadsaver saver object associated with this download. source read only downloadsource source of this download. starttime read only date indicates the start time of the download. when the download starts, this property is set to a valid date object. the default value is null before the download starts. stopped read only boolean indicates that the download never started, has been completed successfully, failed, or has been canceled. this property becomes false when a download is started for the first time, or when a failed or canceled download is restarted. succeeded read only boolean this propery is true if the download has been completed suc...
...tarted for the first time, or when a failed or canceled download is restarted. succeeded read only boolean this propery is true if the download has been completed successfully. target read only downloadtarget target of this download. totalbytes read only number when hasprogress is true, this indicates the total number of bytes to be transferred before the download finishes; this value can be zero if the file is empty. note: this property's value may not match the actual final size of the downloaded file if the download is encoded during the network transfer. you can use the downloadtarget.size property to get the actual size of the completely-downloaded file once the download has succeeded. when hasprogress is false, this property is...
...And 2 more matches

Localizing with Koala
he magnifying glass icon on the right side of the bar. requirements mercurial, linux, windows or mac os x. instructions preparation install komodo edit. install koala extension. go to tools > add-ons. search for "koala". click add to komodo edit... restart komodo when the installation is complete. you should see a new button in komodo's toolbar, with two options: startpage and management. before you can use them, you need to create a new koala project. creating a new project create a new koala project by going to file > new > new project from template... choose "koala" in the categories list. choose "koala" in the templates list. choose a name for your project (e.g. l10n.kpf). choose the directory in which the project will live in (e.g. c:\mozilla\l10n on windows, /home/user/mozill...
...s used in the tooltip that appears when you hover over the magnifying glass icon in the search bar. once you translated the searchendcap.label entity, add the other one from this file, i.e. cmd_enginemanager.label. you can right-click it and choose "add entity" as you did previously, or just double-click the entity name to add it to the file. note how koala is smart enough to insert this entity before searchendcap.label. this is helpful for keeping the localization files clean and tidy at all times. the string to translated is selected so that you can translate it without any further clicking. when you are done with translating the cmd_enginemanager.label entity, save the file. now let's create the other file. double-click on search.properties and click "ok" when koala asks if you want to cre...
...just a simple key=value mapping. save the file to save your work. re-running the comparison a common scheme of working with the compare-locales tools (included in koala) is to incrementally translate and commit the files and then re-run comparison to see what is left to be translated. to make sure you're always translating the most recent en-us reference, you should update the source repository before you start working. open koala's start page. in "last used compares" click "update repo" to update the en-us repository to the most recent version. or, you can select firefox (3.6), en-us (included) and x-testing (3.6) in the "open" section below, and click "update repos" on the right. koala will re-run the comparison of your local localization files with the newest en-us reference and display t...
...And 2 more matches

Mozilla DOM Hacking Guide
y "correct behavior", i mean "the intended behavior with respect to the specification or de facto standard". we will see that class info is mainly used to implement the dom level 0. the w3c dom is mainly implemented in idl. the goals of class info are twofold: interface flattening, and implementing behaviors that are not possible with idl alone. a brief introduction to javascript and xpconnect. before we begin the explanation of class info, i'd like to introduce quickly the javascript engine and xpconnect. in javascript, there is no knowledge of types, like there is in c++. a function for example can be represented by a jsfunction, a jsobject, a jsval, ... this means that when we use the dom from javascript, we pass arguments that have no type. however, since the dom is coded in c++, we expect...
...sinfodata &data = sclassinfodata[aid]; data.mcachedclassinfo = data.u.mconstructorfptr(&data); ns_addref(data.mcachedclassinfo); } return sclassinfodata[aid].mcachedclassinfo; } here is the short explanation: this method returns the mcachedclassinfo member of the nsdomclassinfodata structure that corresponds to aid in the sclassinfodata array, if it exists, i.e. if this method has been called before. if it is called for the first time however, mcachedclassinfo is still a null pointer, and the function will create a new instance of the relevant helper class, and cache it in the mcachedclassinfo pointer, then return it. and for those interested, here the longer explanation. the first time getclassinfoinstance() is called, passing in an aid, mcachedclassinfo for that class will still be null.
...s. this is not for the faint of heart, and is not absolutely necessary, so you might want to skip this section if you don't have too much time (and i suppose you don't). user's guide to class info warning: this document has not yet been reviewed by the dom gurus, it might contain some errors. specifically, due to some changes that happened around, april 2002, some things that were not possible before are now possible. i will try to update this guide as soon as possible. please send any comment to fabian guisset. when should domclassinfo be used to add a new interface to an existing dom object to expose a new dom object to javascript to add a new js external constructor, like "new image()" to bypass the default behavior of xpconnect to implement a "replaceable" property to mess with ...
...And 2 more matches

How to embed the JavaScript engine
jsautorequest ar(cx); // in practice, you would want to exit this any // time you're spinning the event loop js::rootedobject global(cx, js_newglobalobject(cx, &global_class, nullptr)); if (!global) return 1; js::rootedvalue rval(cx); { // scope for jsautocompartment jsautocompartment ac(cx, glob...
... jsautorequest ar(cx); // in practice, you would want to exit this any // time you're spinning the event loop js::rootedobject global(cx, js_newglobalobject(cx, &global_class, nullptr, js::fireonnewglobalhook)); if (!global) return 1; js::rootedvalue rval(cx); { // scope for jsautocompartment jsau...
... jsautorequest ar(cx); // in practice, you would want to exit this any // time you're spinning the event loop js::rootedobject global(cx, js_newglobalobject(cx, &global_class, nullptr, js::fireonnewglobalhook)); if (!global) return 1; js::rootedvalue rval(cx); { // scope for jsautocompartment jsau...
...And 2 more matches

JSAPI User Guide
nullptr, nullptr, nullptr, nullptr, js_globalobjecttracehook }; // the error reporter callback. void reporterror(jscontext *cx, const char *message, jserrorreport *report) { fprintf(stderr, "%s:%u:%s\n", report->filename ? report->filename : "[no filename]", (unsigned int) report->lineno, message); } int run(jscontext *cx) { // enter a request before running anything in the context. jsautorequest ar(cx); // create the global object and a new compartment. rootedobject global(cx); global = js_newglobalobject(cx, &globalclass, nullptr, js::dontfireonnewglobalhook); if (!global) return 1; // enter the new global object's compartment. jsautocompartment ac(cx, global); // po...
...stack. several more examples of throwing and catching exceptions can be found in the jsapi phrasebook. error reports todo your custom errorreporter todo when errors are reported automatic handling of uncaught exceptions the js_compile*, js_call*, js_execute*, and js_evaluate* functions automatically pass exceptions to the error reporter in certain cases. each of these functions checks, just before it returns, to see if an exception is pending in the current jscontext. if so, it then checks to see if there is any other javascript script or function on the stack in that jscontext. if so, then the exception might yet be caught, so spidermonkey does nothing and returns false, allowing the exception to propagate. but if nothing is on the javascript stack, then the uncaught exception is passed t...
.../ my_static_props, my_static_methods); running scripts /* these should indicate source location for diagnostics. */ char *filename; unsigned int lineno; /* * the return value comes back here -- if it could be a gc thing, you must * add it to the gc's "root set" with js_add*root(cx, &thing) where thing * is a jsstring *, jsobject *, or jsdouble *, and remove the root before * rval goes out of scope, or when rval is no longer needed. */ jsval rval; jsbool ok; /* * some example source in a c string. larger, non-null-terminated buffers * can be used, if you pass the buffer length to js_evaluatescript. */ char *source = "x * f(y)"; ok = js_evaluatescript(cx, globalobj, source, strlen(source), filename, lineno, &rval); if (ok) { /* sho...
...And 2 more matches

SpiderMonkey 31
ted on x86, x86_64, and arm architectures. on some other platforms (sparc, mips), the jit is provided but not supported. on all other platforms the jit is simply disabled; javascript code runs in an interpreter, as in previous versions. it's the same language, just not as fast. migrating to spidermonkey 31 the first change most embedders will notice is that spidermonkey must now be initialized before it can be used, using the newly-repurposed js_init method. after this method is called, normal jsapi operations are permitted. when all jsapi operation has completed, the corresponding js_shutdown method (currently non-mandatory, but highly recommended as it may become mandatory in the future) uninitializes spidermonkey, cleaning up memory and allocations performed by js_init. a major change t...
... flag. these and other changes are explained in detail below. new javascript language features javascript 31 includes significant updates to language features, yo. new c++ apis jsapi is now a c++-only api. please note that spidermonkey reserves the js:: namespace for itself (and the js:: namespace for internal use). js_init is a new function which must be used to initialize the js engine before any jsruntimes are created or other jsapi methods are called. this method pairs with the existing (currently non-mandatory) js_shutdown method, which uninitializes the js engine after all runtimes have been destroyed. js_seticumemoryfunctions is a new function which can be used to set the allocation and deallocation functions used by the icu internationalization library. this is unlikely to be...
...isting (currently non-mandatory) js_shutdown method, which uninitializes the js engine after all runtimes have been destroyed. js_seticumemoryfunctions is a new function which can be used to set the allocation and deallocation functions used by the icu internationalization library. this is unlikely to be of interest to embedders unless you are doing detailed memory profiling. it must be called before js_init is called. obsolete apis js_convertarguments "j" type deleted apis js_newgrowablestring (can be replaced with js_newucstring) js_isconstructing (can be replaced with callargs::isconstructing or callreceiver::isconstructing) js_valuetoboolean (replaced by js::toboolean) js_valuetonumber (can be replaced with js::tonumber) js_valuetoint64 (replaced by js::toint64) js_valuetou...
...And 2 more matches

Redis Tips
exity - each command's complexity is given in big-o notation. this is immensely helpful. related commands - an ever-growing list of related commands is given on the right-hand side of the page. recipes - at the bottom of many pages is a section that gives usage patterns or recipes for the command under discussion. there are many insightful ideas to be found here. getting started with redis before you go any further in this document, make sure you have played with redis for at least 5 or 10 minutes. if you have not, here is a fantastic on-line, interactive redis tutorial: http://try.redis.io/ for reference later on, you'll want the source of all things redis: https://redis.io you'll want to run a redis-server on your machine, and use the redis-cli at the command-line for hacking. n...
..., incrby, and incrbyfloat all increment counters. they are also atomic operations. they return the post-increment value of your key. redis> set foo 42 ok redis> incr foo (integer) 43 redis> incrby foo 17 (integer) 60 notice that these results come back as numbers, not strings. incrbyfloat is in redis 2.6. getset is awesome. it sets the value of a key, and returns the value the key had before you changed it. redis> del foo (integer) 1 redis> get foo (nil) redis> getset foo 3 (nil) redis> getset foo 4 "3" efficient multiple queries and transaction blocks you'll often want to do several queries together. each redis command results in one network round trip. so chaining lots of commands together is going to waste a lot of time. redis has a solution for this: transaction blocks...
...he others still all execute! (try this by breaking one of the set statements by leaving out the value argument.) you'll get one return value for each operation that didn't crash. this sounds terrifying, but it's not actually such a big deal in practice. commands will only crash if you feed them the wrong arguments or wrong number of arguments. and you'll probably find problems like that long before you go into production. optimistic locking your transactions are atomic once they start, but of course you can't guarantee that you'll get there first. the redis command watch lets you name keys you're worried about; it causes your next transaction to be immediately aborted if any of the watched keys has been modified by anyone else. for example, here's some node code: var redis = requi...
...And 2 more matches

Mozilla internal string guide
y() - the fastest way of determining if the string has any value. use this instead of testing string.length == 0 .equals(string) - true if the given string has the same value as the current string. common methods that modify the string: .assign(string) - assigns a new value to the string. .append(string) - appends a value to the string. .insert(string, position) - inserts the given string before the code unit at position. .truncate(length) - shortens the string to the given length. complete documentation can be found in the appendix. read-only strings the const attribute on a string determines if the string is writable. if a string is defined as a const nsastring then the data in the string cannot be manipulated. if one tries to call a non-const method on a const string the compiler...
...== *cur) { len -= 1; end -= 1; if (cur < end) memmove(cur, cur + 1, (end - cur) * sizeof(char16_t)); } else { cur += 1; } } data.setlength(len); } note that using beginwriting() to make a string longer is not ok. beginwriting() must not be used to write past the logical length of the string indicated by endwriting() or length(). calling setcapacity() before beginwriting() does not affect what the previous sentence says. to make the string longer, call setlength() before beginwriting() or use the bulkwrite() api described below. bulk write bulkwrite() allows capacity-aware cache-friendly low-level writes to the string's buffer. capacity-aware means that the caller is made aware of how the caller-requested buffer capacity was rounded up to mozjemal...
...sspan()) or via component accessors named consistently with those on span: elements() and length() the latter is not the logical length of the string but the writable length of the buffer. the buffer exposed via these methods includes the prefix that you may have requested to be preserved. it's up to you to skip past it so as to not overwrite it. if there's a need to request a different capacity before you are ready to call finish(), you can call restartbulkwrite() on the handle. it takes three arguments that match the first three arguments of bulkwrite(). it returns mozilla::result<mozilla::ok, nsresult> to indicate success or oom. calling restartbulkwrite() invalidates previously-obtained span, raw pointer or length. once you are done writing, call finish(). it takes two arguments: the new l...
...And 2 more matches

nsINavHistoryResultViewObserver
drop_on 0 the drag operation wishes to drop the dragged item onto the indicated row. drop_after 1 the drag operation wishes to insert the dragged item after the indicated row. methods candrop() implement this method to report whether or not a drop is permitted onto the speci...
...n column); void onselectionchanged(); void onperformaction(in wstring action); void onperformactiononrow(in wstring action, in long row); void onperformactiononcell(in wstring action, in long row, in nsitreecolumn column); constants constant value description drop_before -1 the drag operation wishes to insert the dragged item before the indicated row. drop_on 0 the drag operation wishes to drop the dragged item onto the indicated row. drop_after 1 the drag operation wishes to insert the dragged item after the indicated row. methods candrop() implement this method to report whether or not a drop is permitted onto the specified location. to provide behavior similar to the folder pane in thun...
...underbird, where drops are only permitted on items themselves instead of on the pane as a whole, always return false when the orientation isn't drop_on. warning: do not change the content of the observer list. boolean candrop( in long index, in long orientation ); parameters index the item over which the drag is currently located. ...
...And 2 more matches

nsITextInputProcessor
pecified with non-zero keycode attribute value, this causes throwing an excepction since it doesn't make sense. key_dont_dispatch_modifier_key_event 0x00000020 one of akeyflags. textinputprocessor manages modifier state with every modifier key events. in other words, when you need to specify modifier key state of dispatching keyboard events, you need to dispatch modifier key events before and after that. however, especially for keeping compatibility with legacy api, you may want to modify only the modifier state of a textinputprocessor instance. in this case, you can suppress textinputprocessor dispatches modifier key events with this flag. if this is specified for non-modifier key, it causes throwing an exception since it doesn't make sense. methods appendclausetopendingc...
...f alength must be same as the length of astring of setpendingcompositionstring(). void appendclausetopendingcomposition(in unsigned long alength, in unsigned long aattribute); parameters alength the length of appending clause. aattribute the attribute of appending clause. must be one of attr_* constants. begininputtransaction() this must be called before starting composition every time. this tries to get the rights to create composition on the window. if no other instance is composing on the window, this associates the instance with the window and registers the callback to the instance. boolean begininputtransaction(in nsidomwindow awindow, in nsitextinputprocessorcallback acallback); parameters awindow the do...
...in nsitextinputprocessorcallback acallback); parameters awindow the dom window which has focused editor. this must not be null. acallback the callback object. this must not be null. see the document of nsitextinputprocessorcallback for the details. return value returns true if the instance could create composition. otherwise, false. begininputtransactionfortests() this must be called before starting composition for automated tests every time. this tries to get the rights to create composition on the window. if no other instance is composing on the window, this associates the instance with the window and registers the callback to the instance if it's specified. boolean begininputtransactionfortests(in nsidomwindow awindow, in nsitextinputprocess...
...And 2 more matches

Basic operations - Firefox Developer Tools
to enable it, open the developer tool settings, and check the "memory" box under "default firefox developer tools": from firefox 50 onwards, the memory tool is enabled by default. taking a heap snapshot to take a snapshot of the heap, click the "take snapshot" button, or the camera icon on the left: the snapshot will occupy the large pane on the right-hand side. on the left, you'll see an entry for the new snapshot, including its timestamp, size, and controls to save or clear this snapshot: clearing a snapshot to remove a snapshot, click the "x" icon: saving and loading snapshots if you close the memory tool, all unsaved snapshots will be discarded. ...
...lick the "x" icon: saving and loading snapshots if you close the memory tool, all unsaved snapshots will be discarded. to save a snapshot click "save": you'll be prompted for a name and location, and the file will be saved with an .fxsnapshot extension. ...
...the tool then shows you the differences between the two snapshots: when you're looking at a comparison, you can't use the dominators view or the tree map view. ...
...And 2 more matches

BiquadFilterNode() - Web APIs
s://github.com/mdn/browser-compat-data and send us a pull request. ...
...s before chrome 59, the default values were not supported.edge full support ≤79firefox full support 53ie no support noopera full support 42notes full support 42notes notes before opera 46, the default values were not supported.safari ? ...
... noopera full support 42notes full support 42notes notes before opera 46, the default values were not supported.safari ? ...
...And 2 more matches

Using images - Web APIs
if the hosting domain permits cross-domain access to the image, the image can be used in your canvas without tainting it; otherwise using the image will taint the canvas. using other canvas elements just as with normal images, we access other canvas elements using either the document.getelementsbytagname() or document.getelementbyid() method. be sure you've drawn something to the source canvas before using it in your target canvas. one of the more practical uses of this would be to use a second canvas element as a thumbnail view of the other larger canvas. creating an image from scratch another option is to create new htmlimageelement objects in our script. to do this, you can use the convenient image() constructor: var img = new image(); // create new img element img.src = 'myimage.png...
...s a thumbnail view of the other larger canvas. creating an image from scratch another option is to create new htmlimageelement objects in our script. to do this, you can use the convenient image() constructor: var img = new image(); // create new img element img.src = 'myimage.png'; // set source path when this script gets executed, the image starts loading. ...
...onvenient image() constructor: var img = new image(); // create new img element img.src = 'myimage.png'; // set source path when this script gets executed, the image starts loading. if you try to call drawimage() before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception). so you need to be sure to use the load event so you don't try this before the image has loaded: var img = new image(); // create new img element img.addeventlistener('load', function() { // execute drawimage statements here }, false); img.src = 'myimage.png'; // set source path if you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever. it's beyond the scope of this tut...
...And 2 more matches

EffectTiming.fill - Web APIs
the web animations api's effecttiming dictionary's fill property specifies a fill mode, which defines how the element to which the animation is applied should look when the animation sequence is not actively running, such as before the time specified by iterationstart or after animation's end time. for example, setting fill to "none" means the animation's effects are not applied to the element if the current time is outside the range of times during which the animation is running, while "forwards" ensures that once the animation's end time has been passed, the element will continue to be drawn in the state it was in at its last rendered frame. note that authors are discouraged from using fill modes to persist the effect of an animation indefinitely. see the alternatives to fill mode...
...rm: "rotate(90deg)" } ]; the boxrotationkeyframes object is an array of keyframes, each describing the state of the affected element at a point in the animation process. in this case, we have just two keyframes; the first defines what affect is applied to the element immediately after the animation first begins to play, and the second defines the effect applied to the element in the last moment before it ends. those phrases are crucial. let's look at why. the first keyframe says that when the animation begins, the element should be rotated 90° to the left. that means that unless we specify otherwise using the fill property, the instant the animation is started the element will be rotated to the left 90°, and then it will animate smoothly from there. since by default the box isn't rotated, ...
...default the box isn't rotated, the last keyframe says that the animation's final frame should draw the animation rotated 90° to the right from its original orientation. var boxrotationtiming = { duration: 2000, iterations: 1, fill: "none" }; the boxrotationtiming object describes how long the animation should take to run, how many times it should run, what state the element should be in before the animation begins and after it ends, and so forth. here we specify that the animation should take 2000 milliseconds (2 seconds) to complete, should only run once, and that the fill mode should be "none". as defined above, the "none" fill mode means that the element will be rendered in its natural, unaltered condition anytime the animation isn't actively running. document.getelementbyid("anim...
...And 2 more matches

Event - Web APIs
and the processing order of such events depends on the event bubbling and capture settings of each handler triggered. interfaces based on event below is a list of interfaces which are based on the main event interface, with links to their respective documentation in the mdn api reference. note that all event interfaces have names which end in "event". ...
...g order of such events depends on the event bubbling and capture settings of each handler triggered. interfaces based on event below is a list of interfaces which are based on the main event interface, with links to their respective documentation in the mdn api reference. note that all event interfaces have names which end in "event". ...
...e documentation in the mdn api reference. note that all event interfaces have names which end in "event". ...
...And 2 more matches

HTMLTableElement - Web APIs
ption> that is a child of this element is removed from the tree, if any. htmltableelement.thead is a htmltablesectionelement representing the first <thead> that is a child of the element, or null if none is found. when set, if the object doesn't represent a <thead>, a domexception with the hierarchyrequesterror name is thrown. if a correct object is given, it is inserted in the tree immediately before the first element that is neither a <caption>, nor a <colgroup>, or as the last child if there is no such element, and the first <thead> that is a child of this element is removed from the tree, if any. htmltableelement.tfoot is a htmltablesectionelement representing the first <tfoot> that is a child of the element, or null if none is found. when set, if the object doesn't represent a <tfoot>, ...
...thead> that is a child of this element is removed from the tree, if any. htmltableelement.tfoot is a htmltablesectionelement representing the first <tfoot> that is a child of the element, or null if none is found. when set, if the object doesn't represent a <tfoot>, a domexception with the hierarchyrequesterror name is thrown. if a correct object is given, it is inserted in the tree immediately before the first element that is neither a <caption>, a <colgroup>, nor a <thead>, or as the last child if there is no such element, and the first <tfoot> that is a child of this element is removed from the tree, if any. htmltableelement.rowsread only returns a live htmlcollection containing all the rows of the element, that is all <tr> that are a child of the element, or a child of one of its <thead...
... domstring containing the length in pixels or in percentage of the desired width fo the entire table. it reflects the obsolete width attribute. methods inherits methods from its parent, htmlelement. htmltableelement.createthead() returns an htmlelement representing the first <thead> that is a child of the element. if none is found, a new one is created and inserted in the tree immediately before the first element that is neither a <caption>, nor a <colgroup>, or as the last child if there is no such element. htmltableelement.deletethead() removes the first <thead> that is a child of the element. htmltableelement.createtfoot() returns an htmlelement representing the first <tfoot> that is a child of the element. if none is found, a new one is created and inserted in the tree immediatel...
...And 2 more matches

PerformanceNavigationTiming - Web APIs
following performanceresourcetiming properties for navigation performance entry types by qualifying and constraining them as follows: performanceresourcetiming.initiatortyperead only returns "navigation". the interface also supports the following properties: performancenavigationtiming.domcomplete read only a domhighrestimestamp representing a time value equal to the time immediately before the browser sets the current document readiness of the current document to complete. performancenavigationtiming.domcontentloadedeventend read only a domhighrestimestamp representing the time value equal to the time immediately after the current document's domcontentloaded event completes. performancenavigationtiming.domcontentloadedeventstart read only a domhighrestimestamp representing th...
...iness of the current document to complete. performancenavigationtiming.domcontentloadedeventend read only a domhighrestimestamp representing the time value equal to the time immediately after the current document's domcontentloaded event completes. performancenavigationtiming.domcontentloadedeventstart read only a domhighrestimestamp representing the time value equal to the time immediately before the user agent fires the domcontentloaded event at the current document. performancenavigationtiming.dominteractive read only a domhighrestimestamp representing a timestamp representing the time value equal to the time immediately before the user agent sets the current document readiness of the current document to interactive. performancenavigationtiming.loadeventend read only a domhighrest...
... performancenavigationtiming.redirectcount read only a number representing the number of redirects since the last non-redirect navigation under the current browsing context. ...
...And 2 more matches

SVGSVGElement - Web APIs
h the given ui event occurred. when the browser actually knows the physical size of a "screen unit", this float attribute will express that information; otherwise, user agents will provide a suitable default value (such as .28mm). svgsvgelement.screenpixeltomillimetery corresponding size of a screen pixel along the y-axis of the viewport. svgsvgelement.usecurrentview the initial view (i.e., before magnification and panning) of the current innermost svg document fragment can be either the "standard" view, i.e., based on attributes on the <svg> element such as viewbox) or on a "custom" view (i.e., a hyperlink into a particular <view> or other element). if the initial view is the "standard" view, then this attribute is false. if the initial view is a "custom" view, then this attribute is true...
... be either the "standard" view, i.e., based on attributes on the <svg> element such as viewbox) or on a "custom" view (i.e., a hyperlink into a particular <view> or other element). if the initial view is the "standard" view, then this attribute is false. if the initial view is a "custom" view, then this attribute is true. svgsvgelement.currentview an svgviewspec defining the initial view (i.e., before magnification and panning) of the current innermost svg document fragment. the meaning depends on the situation: if the initial view was a "standard" view, then: the values for viewbox, preserveaspectratio and zoomandpan within currentview will match the values for the corresponding dom attributes that are on svgsvgelement directly the values for transform and viewtarget within currentview ...
...ns that are defined within the svg document fragment, causing the animation clock to continue from the time at which it was suspended. svgsvgelement.animationspaused() returns true if this svg document fragment is in a paused state. svgsvgelement.getcurrenttime() returns the current time in seconds relative to the start time for the current svg document fragment. ...
...And 2 more matches

Using Service Workers - Web APIs
finally fix these issues. service worker syntax is more complex than that of appcache, but the trade off is that you can use javascript to control your appcache-implied behaviors with a fine degree of granularity, allowing you to handle this problem and many more. using a service worker you can easily set an app up to use cached assets first, thus providing a default experience even when offline, before then getting more data from the network (commonly known as offline first). this is already available with native apps, which is one of the main reasons native apps are often chosen over web apps. setting up to play with service workers many service workers features are now enabled by default in newer versions of supporting browsers. if however you find that demo code is not working in your inst...
... callback. let’s compare a traditional synchronous callback structure to its asynchronous promise equivalent. ...
...t for myfunction() to run and return value before any more of the code can execute. in the second example, myfunction() returns a promise for value, then the rest of the code can carry on running. when the promise resolves, the code inside then will be run, asynchronously. now for a real example — what if we wanted to load images dynamically, but we wanted to make sure the images were loaded before we tried to display them? this is a standard thing to want to do, but it can be a bit of a pain. we can use .onload to only display the image after it’s loaded, but what about events that start happening before we start listening to them? we could try to work around this using .complete, but it’s still not foolproof, and what about multiple images? and, ummm, it’s still synchronous, so bloc...
...And 2 more matches

Starting up and shutting down a WebXR session - Web APIs
you will learn how to do these things in this article. ...
... tools panel that lets you control the position and orientation of the headset and any hand controllers, as well as button presses on the controllers. emulator usage while somewhat awkward compared to using an actual headset, this makes it possible to experiment with and developer webxr code on a desktop computer, where webxr isn't normally available. ...
...h and developer webxr code on a desktop computer, where webxr isn't normally available. it also lets you perform some basic testing before taking your code to a real device. be aware, however, that the emulator does not yet completely emulate all of the webxr api, so you may run into problems you're not expecting. again, carefully read the readme file and make sure you're aware of the limitations before you begin. important: you should always test your code on actual ar and/or vr hardware before releasing or shipping a product! emulated, simulated, or polyfilled environments are not an adequate substitute for actual testing on physical devices. getting the extension download the webxr api emulator for your supported browser below: google chrome mozilla firefox the source code for the ex...
...And 2 more matches

Using XMLHttpRequest - Web APIs
ontaining a parsed xml document. this could prove difficult to manipulate and analyze. there are four primary ways of analyzing this xml document: using xpath to address (or point to) parts of it. manually parsing and serializing xml to strings or objects. using xmlserializer to serialize dom trees to strings or to files. regexp can be used if you always know the content of the xml document beforehand. you might want to remove line breaks, if you use regexp to scan with regard to line breaks. however, this method is a "last resort" since if the xml code changes slightly, the method will likely fail. note: xmlhttprequest can now interpret html for you using the responsexml property. read the article about html in xmlhttprequest to learn how to do this. processing a responsetext propert...
...cult to manipulate and analyze. there are three primary ways to analyze and parse this raw html string: use the xmlhttprequest.responsexml property as covered in the article html in xmlhttprequest. inject the content into the body of a document fragment via fragment.body.innerhtml and traverse the dom of the fragment. regexp can be used if you always know the content of the html responsetext beforehand. you might want to remove line breaks, if you use regexp to scan with regard to linebreaks. however, this method is a "last resort" since if the html code changes slightly, the method will likely fail. handling binary data although xmlhttprequest is most commonly used to send and receive textual data, it can be used to send and receive binary content. there are several well tested methods ...
....log("the transfer is complete."); } function transferfailed(evt) { console.log("an error occurred while transferring the file."); } function transfercanceled(evt) { console.log("the transfer has been canceled by the user."); } lines 3-6 add event listeners for the various events that are sent while performing a data transfer using xmlhttprequest. note: you need to add the event listeners before calling open() on the request. otherwise the progress events will not fire. the progress event handler, specified by the updateprogress() function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's total and loaded fields. however, if the lengthcomputable field is false, the total length is not known and will be zero. ...
...And 2 more matches

Color picker tool - CSS: Cascading Style Sheets
inear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background-color: #f00; } .ui-color-picker .picker { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; position: absolute; top: 45%; left: 45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } .ui-color-picker .hue { background: url("https://mdn.mozillademos.org/files/5701/hue.png") center; background: -moz-linear-gradient(left, #f00 0%, #f...
... height: 24px; padding: 2px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* preview color */ .ui-color-picker .preview { width: 95px; height: 53px; margin: 5px; margin-top: 10px; border: 1px solid #ddd; background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); float: left; position: relative; } .ui-color-picker .preview:before { height: 100%; width: 50%; left: 50%; top: 0; content: ""; background: #fff; position: absolute; z-index: 1; } .ui-color-picker .preview-color { width: 100%; height: 100%; background-color: rgba(255, 0, 0, 0.5); position: absolute; z-index: 1; } .ui-color-picker .switch_mode { width: 10px; height: 20px; position: relative; border-radius: 5px 0 0 5px; border: 1px solid #ddd; ...
...: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; width: 100%; height: 12px; top: -12px; z-index: 2; } #picker-samples #add-icon { width: 100%; height: 100%; position: relative; box-shadow: inset 0px 0px 2px 0px #ddd; } #picker-samples #add-icon:hover { cursor: pointer; border-color: #ddd; box-shadow: inset 0px 0px 5px 0px #ccc; } #picker-samples #add-icon:before, #picker-samples #add-icon:after { content: ""; position: absolute; background-color: #eee; box-shadow: 0 0 1px 0 #eee; } #picker-samples #add-icon:before { width: 70%; height: 16%; top: 42%; left: 15%; } #picker-samples #add-icon:after { width: 16%; height: 70%; top: 15%; left: 42%; } #picker-samples #add-icon:hover:before, #picker-samples #add-icon:hover:after { background-color...
...And 2 more matches

Printing - Developer guides
ontent. there are a number of possible scenarios: you wish to adjust layout to take advantage of the size and shape of the paper. you wish to use different styles to enhance the appearance of your content on paper. you wish to use higher resolution images for a better result. you want to adjust the user experience of printing, such as presenting a specially-formatted version of your content before printing begins. there may be other cases in which you want to manage the printing process, but these are some of the most common scenarios. this article provides tips and techniques for helping your web content print better. using a print style sheet add the following to your <head> tag. <link href="/path/to/print.css" media="print" rel="stylesheet" /> using media queries to improve layou...
...se are some of the most common scenarios. this article provides tips and techniques for helping your web content print better. using a print style sheet add the following to your <head> tag. ...
... examples here are some common examples. ...
...And 2 more matches

Control flow and error handling - JavaScript
sions. block statement the most basic statement is a block statement, which is used to group statements. the block is delimited by a pair of curly brackets: { statement_1; statement_2; ⋮ statement_n; } example block statements are commonly used with control flow statements (if, for, while). while (x < 10) { x++; } here, { x++; } is the block statement. important: javascript before ecmascript2015 (6th edition) does not have block scope! in older javascript, variables introduced within a block are scoped to the containing function or script, and the effects of setting them persist beyond the block itself. in other words, block statements do not define a scope. "standalone" blocks in javascript can produce completely different results from what they would produce in c or ja...
...f setting them persist beyond the block itself. in other words, block statements do not define a scope. "standalone" blocks in javascript can produce completely different results from what they would produce in c or java. for example: var x = 1; { var x = 2; } console.log(x); // outputs 2 this outputs 2 because the var x statement within the block is in the same scope as the var x statement before the block. (in c or java, the equivalent code would have outputted 1.) since ecmascript2015, the let and const variable declarations are block-scoped. see the let and const reference pages for more information. conditional statements a conditional statement is a set of commands that executes if a specified condition is true. javascript supports two conditional statements: if...else and switch...
...ou want the try block to succeed—but if it does not, you want control to pass to the catch block. if any statement within the try block (or in a function called from within the try block) throws an exception, control immediately shifts to the catch block. if no exception is thrown in the try block, the catch block is skipped. the finally block executes after the try and catch blocks execute but before the statements following the try...catch statement. the following example uses a try...catch statement. the example calls a function that retrieves a month name from an array based on the value passed to the function. if the value does not correspond to a month number (1–12), an exception is thrown with the value "invalidmonthno" and the statements in the catch block set the monthname variable...
...And 2 more matches

Using Promises - JavaScript
essentially, a promise is a returned object to which you attach callbacks, instead of passing callbacks into a function. ...
...n(successcallback, failurecallback); that's shorthand for: const promise = createaudiofileasync(audiosettings); promise.then(successcallback, failurecallback); we call this an asynchronous function call. this convention has several advantages. we will explore each one. guarantees unlike old-fashioned passed-in callbacks, a promise comes with some guarantees: callbacks will never be called before the completion of the current run of the javascript event loop. callbacks added with then(), as above, will be called even after the success or failure of the asynchronous operation. multiple callbacks may be added by calling then() several times. each callback is executed one after another, in the order in which they were inserted. one of the great things about using promises is chaining. c...
...atch, which is useful to accomplish new actions even after an action failed in the chain. read the following example: new promise((resolve, reject) => { console.log('initial'); resolve(); }) .then(() => { throw new error('something failed'); console.log('do this'); }) .catch(() => { console.error('do that'); }) .then(() => { console.log('do this, no matter what happened before'); }); this will output the following text: initial do that do this, no matter what happened before note: the text do this is not displayed because the something failed error caused a rejection. error propagation you might recall seeing failurecallback three times in the pyramid of doom earlier, compared to only once at the end of the promise chain: dosomething() .then(result => dosomethi...
...And 2 more matches

Web video codec guide - Web media technologies
e this, and to improve seek time through the video data, periodic key frames (also known as intra-frames or i-frames) are placed into the video file. the key frames are full frames, which are used to repair any damage or artifact residue that's currently visible. aliasing aliasing is a general term for anything that upon being reconstructed from the encoded data does not look the same as it did before compression. there are many forms of aliasing; the most common ones you may see include: moiré patterns a unknown prefix: moiré pattern. is a large-scale spatial interference pattern produced when a pattern in the source image and the manner in which the encoder operates are slightly out of alignment spatially. the artifacts generated by the encoder then introduce strange, s...
... there are forms of motion compensation that allow for variable block sizes, and even for blocks to overlap. there are, however, artifacts that can occur due to motion compensation. these occur along block borders, in the form of sharp edges that produce false ringing and other edge effects. these are due to the mathematics involved in the coding of the residual frames, and can be easily noticed before being repaired by the next key frame. reduced frame size in certain situations, it may be useful to reduce the video's dimensions in order to improve the final size of the video file. while the immediate loss of size or smoothness of playback may be a negative factor, careful decision-making can result in a good end result. if a 1080p video is reduced to 720p prior to encoding, the resulting vi...
...to accomplish even more for you. for exmaple, instead of computing motion differences for two frames that are two pixels apart due to inter-frame motion, skipping every other frame could lead to computing a difference that comes out to four pixels of movement. this lets the overall movement of the camera be represented by fewer residual frames. the absolute minimum frame rate that a video can be before its contents are no longer perceived as motion by the human eye is about 12 frames per second. less than that, and the video becomes a series of still images. motion picture film is typically 24 frames per second, while standard definition television is about 30 frames per second (slightly less, but close enough) and high definition television is between 24 and 60 frames per second. anything from...
...And 2 more matches

Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
read on to find out more. ...
...; } this is really useful for responsive layouts, but unfortunately it causes the jank problem to return — the above css overrides the width and height attribute information, meaning that if the image has not loaded for some reason, its height will be set to 0. when the image finally loads, the same jank will occur as the page layout is shifted to make space for it. a new way of sizing images before loading completes recognizing the problem, a wicg community group formed to propose an intrinsicsize attribute. folks from mozilla then expanded on this thinking, working on a proposal in the css box sizing level 4 draft to define an aspect-ratio property and propose the idea of using the width and height attributes to compute layout. fantasai & jen simmons collaborated with emilio, who worked o...
...e width and height attributes to compute layout. fantasai & jen simmons collaborated with emilio, who worked on an experimental implementation to prove it would work. mozilla then brought the idea up in the wicg community group and discussed it further until representatives from chrome were onboard with the idea. due to this work, browsers are working on adding a new mechanism for sizing images before the actual image is loaded. firefox has added an internal aspect-ratio property (in version 69 onwards) that applies to replaced elements, and other related elements that accept width and height attributes. this appears in the browser's internal ua stylesheet, similar to the following: img, input[type="image"], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(hei...
...And 2 more matches

Communicating With Other Scripts - Archive of obsolete content
see content scripts: communicating with the add-on: content script to content script. page scripts if a page includes its own scripts using <script> tags, either embedded in the page or linked to it using the src attribute, there are a couple of ways a content script can communicate with it: using the dom postmessage() api using custom dom events using the dom postmessage api note that before firefox 31 code in content scripts can't use window to access postmessage() and addeventlistener() and instead must use document.defaultview. see the section below on using postmessage() before firefox 31. you can communicate between the content script and page scripts using window.postmessage(). messaging from content script to page script suppose we have a page called "listen.html" hosted a...
...so the content scripts in the above examples need to be rewritten like this: // content-script.js document.defaultview.postmessage("message from content script", "...
...so the content scripts in the above examples need to be rewritten like this: // content-script.js document.defaultview.postmessage("message from content script", "http://my-domain.org/"); // content-script.js document.defaultview.a...
...using postmessage() you can use custom dom events to communicate between page scripts and content scripts. messaging from content script to page script from firefox 30 onwards, the execution environment for content scripts has changed, so content scripts can't directly share objects with page scripts. this affects the use of custom events to send messages from content scripts to page scripts. before firefox 30 here's an example showing how to use custom dom events to send a message from a content script to a page script, before firefox 30. first, "main.js" will create a page-mod that will attach "content-script.js" to the target web page, and will then load the target web page: var tabs = require("sdk/tabs"); var mod = require("sdk/page-mod"); var self = require("sdk/self"); var pageurl...

Interacting with page scripts - Archive of obsolete content
issions” key in package.json, and set it to true. "permissions": { "unsafe-content-script": true } this is only a temporary migration aid, and will be removed eventually. communicating with page scripts there are two different ways a content script can communicate with a page script: using the dom postmessage() api using custom dom events using the dom postmessage api note that before firefox 31 code in content scripts can't use window to access postmessage() and addeventlistener() and instead must use document.defaultview. see the section below on using postmessage() before firefox 31. you can communicate between the content script and page scripts using window.postmessage(). content script to page script suppose we have a page called "listen.html" hosted at "my-domain.or...
...so the content scripts in the above examples need to be rewritten like this: // talk.js document.defaultview.postmessage("message from content script", "http://my-...
...so the content scripts in the above examples need to be rewritten like this: // talk.js document.defaultview.postmessage("message from content script", "http://my-domain.org/"); // listen.js document.defaultview.addeventlistener('m...
...alternative to using postmessage() you can use custom dom events to communicate between page scripts and content scripts. content script to page script from firefox 30 onwards, the execution environment for content scripts has changed, so content scripts can't directly share objects with page scripts. this affects the use of custom events to send messages from content scripts to page scripts. before firefox 30 here's an example showing how to use custom dom events to send a message from a content script to a page script, before firefox 30. first, "main.js" will create a page-mod that will attach "content-script.js" to the target web page, and will then load the target web page: var tabs = require("sdk/tabs"); var mod = require("sdk/page-mod"); var self = require("sdk/self"); var pageurl...

widget - Archive of obsolete content
optional object describing permissions for the content. it should contain a single key named script whose value is a boolean that indicates whether or not to execute script in the content. script defaults to true. contentscriptfile string,array a local file url or an array of local file urls of content scripts to load. content scripts specified by this property are loaded before those specified by the contentscript property. contentscript string,array a string or an array of strings containing the texts of content scripts to load. content scripts specified by this property are loaded after those specified by the contentscriptfile property. contentscriptwhen string when to load the content scripts. this may take one of the f...
...the texts of content scripts to load. content scripts specified by this property are loaded after those specified by the contentscriptfile property. contentscriptwhen string when to load the content scripts. this may take one of the following values: "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". contentscriptoptions ...
...tscriptfile a local file url or an array of local file urls of content scripts to load. contentscript a string or an array of strings containing the texts of content scripts to load. contentscriptwhen when to load the content scripts. this may have one of the following values: "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 contentscriptoptions read-only value exposed to content scripts under self.options property. any kin...
...ptfile a local file url or an array of local file urls of content scripts to load. contentscript a string or an array of strings containing the texts of content scripts to load. contentscriptwhen when to load the content scripts. this may have one of the following values: "start": load content scripts immediately after the document element for the widget view 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 view has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property. an...

lang/functional - Archive of obsolete content
imeout(function () { ... }, 0)), except that the wrapped function may be reused and does not need to be repeated each time. this also enables you to use these functions as event listeners. let { defer } = require("sdk/lang/functional"); let fn = defer(function myevent (event, value) { console.log(event + " : " + value); }); fn("click", "#home"); console.log("done"); // this will print 'done' before 'click : #home' since // we deferred the execution of the wrapped `myevent` // function, making it non-blocking and executing on the // next event loop parameters fn : function the function to be deferred. returns function : the new, deferred function. remit() an alias for defer. invoke(callee, params, self) invokes callee, passing params as an argument and self as this. returns the valu...
...!"; function greet (name) { return "hi: " + name; } function exclaim (statement) { return statement + "!"; } parameters fn... : function takes a variable number of functions as arguments and composes them from right to left. returns function : the composed function. wrap(fn, wrapper) returns the first function passed as an argument to the second, allowing you to adjust arguments, run code before and after, and conditionally execute the original function. let { wrap } = require("sdk/lang/functional"); let wrappedhello = wrap(hello, function (fn, name) { return "before, " + fn(name) + "after"; }); wrappedhello("moe"); // "before, hello: moe, after" function hello (name) { return "hello: " + name; } parameters fn : function the function to be passed into the wrapper function. wrap...
...on of the function which, when invoked, will not be executed until it has not been invoked for wait milliseconds. this means that if the function's called many times in quick succession the function will only execute once, after the blizzard of calls has finished. this could be useful, for example, if we are checking the user's keyboard input, and want to wait until they've paused in their typing before we do so. parameters fn : function the function to debounce. wait : integer the number of milliseconds to wait before the function is executed. returns function : the debounced version of fn. throttle(fn, wait, options) this function is new in firefox 30. from underscore's throttle() function: this takes a function and returns a new version of the function which, when invoked repeated...
...bounced version of fn. throttle(fn, wait, options) this function is new in firefox 30. from underscore's throttle() function: this takes a function and returns a new version of the function which, when invoked repeatedly, will not excute the function more than once per wait milliseconds. parameters fn : function the function to debounce. wait : integer the number of milliseconds to wait before the function is executed. options : object by default the function is called as soon as it is invoked (the leading edge of the wait period), and at the end of wait (the trailing edge of the wait period). pass {leading : false} to stop the function being called at the leading edge, and {trailing : false} to stop it being called at the trailing edge. returns function : the throttled version of ...

Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
in your extension include: need for high-performance beyond what can be delivered by javascript code. use of third-party libraries written in c or c++. use of mozilla interfaces that are not exposed via xpcom (e.g. nspr). note: with the modern jit javascript engine in gecko and js-ctypes more extension code can be written only in javascript than ever before. please consider all of your options carefully before deciding to use native code (c++) in your extension. in addition, binary components need to be recompiled for every major firefox release, which can be frustrating. this article describes how to set up the development environment for a large, complex firefox extension with any or all of the above-mentioned requirements. i should also s...
...y and so forth. so it behooves us to piggyback on this infrastructure to build our extension. first of all, think of a catchy name for your extension and create a directory with that name under the /mozilla/extensions/ directory. use only lowercase letters. you should see a bunch of other directories (inspector/, reporter/ and so forth) at the same level in the build tree. note that before actually building anything, the mozilla build system invokes a configuration process that generates the actual makefiles used for the build from makefile templates called makefile.in. the actual makefiles tend to be very similar or identical to the templates, but the extra flexibility gained from having the makefiles generated dynamically is one of the things that makes the build system so powerf...
...s. (if something goes wrong, figure out what, fix it and then come back here and add it to this article.) to make sure that the build really finished, launch firefox and check that your extension is listed when you select tools/extensions. if you are using firefox as your regular browser (and if you're not, why not!?), you might be annoyed by the fact that you have to close regular firefox before running your custom-built version. if so, try setting the moz_no_remote environment variable to "1" before running the development version of firefox. you'll also need to use a different profile for your development version: firefox -p development where development is replaced with the name of the extra profile you've created. this will let you run both versions of firefox simultane...
...e. in this case, i would recommend placing the entire library distribution inside the project or subproject that uses it. so if library acmelib is used inside the multifarious/ subproject in the above example, it would be placed as a subdirectory underneath that subproject (at the same level as public/ and src/). of course, this means that you will have to build acmelib manually on all platforms before launching the mozilla build. but at least you can then refer to include files and import libraries from your component using relative paths. building for multiple platforms todo original document information author: matthew gertner - july 26, 2005. permission granted to migrate in jan 2006, including permission to relicense under the cc:by-sa. original source: http://www.allpeers.com/blo...

Enhanced Extension Installation - Archive of obsolete content
atibility is checked for by the new _getinstalldata function. this function returns the guid, version, and type of the item, and also an error code listing either success, or the reason for a failure, such as invalid guid, version, or incompatible item. depending on the failure, the install function may take several steps. if the item is found incompatible, a version update check is performed as before. if updated compatibility information is found this is written into the in-memory representation of the the temporary install manifest and the install function is called recursively, supplying this updated install manifest as the source for _getinstalldata. if the item is determined compatible by either of the above processes, a copy of the item's file is staged into the install location directo...
...add it to the extension container and set the same set of initial setup properties on it that we used to, with the addition of the installlocation key and the type value. at this stage we rewrite the extensions-startup.manifest and extensions.ini manifests and create the .autoreg file in the profile directory. ...
...n of the installlocation key and the type value. at this stage we rewrite the extensions-startup.manifest and extensions.ini manifests and create the .autoreg file in the profile directory. finalization on the next startup, the startup system discovers the .autoreg file (as before) and starts the extension system with the dirty flag, which causes the system to scan for items to be installed as before. ...
...rectory. finalization on the next startup, the startup system discovers the .autoreg file (as before) and starts the extension system with the dirty flag, which causes the system to scan for items to be installed as before. regardless of whether or not the extension system is called from the startup process with the dirty flag set to true (i.e. the startup process discovered the .autoreg file, before pending operations are finalized the extension system reads the extensions-startup.manifest and scans all of the install locations looking for items that match the following criteria: item in install location is not listed in startup manifest (new item being installed by just appearing in the install location). item in install location is listed in startup manifest, but its mtime is different...

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
note: if you want to contribute to this document please follow the guidelines on the contribute page. « previousnext » this document was authored by hiroshi shimoda of clear code inc. and was originally published in japanese for the firefox developers conference summer 2007. shimoda-san is a co-author of firefox 3 hacks (o'reilly japan, 2008). before you learn how to develop extensions, let's learn about xul, the xml-based user-interface language, which is one of the building blocks for extensions. introduction an overview of xul xul is an xml-based language, and was developed to be the gui markup language for the mozilla browser. there are earlier experiments going back a long way in developing user interfaces using a combination of html and scripting languages, and xul could b...
... <button label="mixed4"/> </hbox> listing 3: horizontal and vertical boxes figure 1: output of listing 3 there is also a grid element, which can be used for layouts similar to those achieved using the html table element, a stack element for layering other elements, and so on. all on-screen widgets are laid out using these boxes, making complex interface designs possible. common attributes before we look at the various interface objects, let's look at some of their common attributes, especially the frequently used ones. id and class the attributes id and class fill the same role that the xhtml attributes of the same names fill. id is used to define a unique name for an element, and class is used to classify elements; both of these provide convenient ways to refer to elements in css and ...
...attributes and values merged with the overlay document. try overwriting the contents of overlaydocument.xul with listing 25 and re-saving. <?xml version="1.0" encoding="utf-8"?> <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox id="box1" align="center" style="border: 1px solid; margin: 1em;"> <button label="button 1"/> <button label="button 2" insertbefore="label1"/> </hbox> <button label="button 3"/> </overlay> listing 25: substitute code for overlaydocument.xul let's open base.xul in a firefox window again. as shown in figure 20, the style attribute from the element with the id "box1" in the overlay document has been merged with the markup for the button with that id in the base document, and inserted into the box. figure 20: output fr...
...ting 25: substitute code for overlaydocument.xul let's open base.xul in a firefox window again. as shown in figure 20, the style attribute from the element with the id "box1" in the overlay document has been merged with the markup for the button with that id in the base document, and inserted into the box. figure 20: output from listing 23 and 25 furthermore, following the declaration insertbefore="label1", the "button2" button now has been inserted before the element with the id "label1". conversely, if we wanted to insert it directly after, we could have used the attribute insertafter. we can also use the position attribute as a way to locate an element numerically at any position; for example, using position="4" would insert it as the fourth element. external entities being a form of ...

Appendix F: Monitoring DOM changes - Archive of obsolete content
nt identifier (hash) or more recently via the history.pushstate method. the former triggers a hashchange event while the latter triggers a popstate event. event listeners for those events are the preferred method for detecting dom modifications when feasible. often times, this must be used in combination with a slight delay, or even polling, via settimeout, for cases where the url change happens before the page is fully loaded. this method works particularly well with services like google instant, and the gawker family of sites. network listeners ajax-based page changes are almost universally tied to xmlhttprequests. these requests can be tracked from chrome code using a variety of methods, including web progress listeners, http observers, and content policies. while these are not exceptiona...
...observers, and content policies. while these are not exceptionally efficient (they run for every http request, and considerably more often for some methods), they work very well for certain applications pure css pure css can be more powerful than most people suspect. it is often possible to do things for which people have traditionally resorted to javascript with css alone. in particular, the ::before and ::after pseudo-elements, and pseudo-classes like :hover and :active can be used to achieve extremely complex dynamic behavior. late binding and event delegation often times, it suffices to bind event listeners to top-level elements and check for matching elements when the event fires. for instance, rather than watching for the creation of <a> elements and adding event listeners to them as t...
... doawesomerdomstuff(res, arguments); return res; }; } now, whenever doawesomedomstuff() is called, the original function will be called, followed by your own doawesomerdomstuff() function, which can then further modify the dom as needed. variations on this method include modifying the arguments passed to the wrapped function, modifying its return value, and making changes both before and after the original method is called. this scheme is highly flexible and can be made to work under most circumstances. css animation events this technique, which works on firefox 5+, has some particular advantages. because it is based on css, it can be keyed to match new elements of any arbitrary css selector. and because it is css-based, and is triggered when css is being applied anyway, it...
... ...

Extensions support in SeaMonkey 2 - Archive of obsolete content
f you add your own. ordinary popups are fine of course. the statusbar in firefox 3 a new vbox has been added, called "browser-bottombox", which encloses the find bar and status bar at the bottom of the browser window. although this doesn't affect the appearance of the display, it may affect your extension if it overlays chrome relative to these elements. ...
... a new vbox has been added, called "browser-bottombox", which encloses the find bar and status bar at the bottom of the browser window. although this doesn't affect the appearance of the display, it may affect your extension if it overlays chrome relative to these elements. ...
... display, it may affect your extension if it overlays chrome relative to these elements. ...
...it overlays chrome relative to these elements. ...

Session store API - Archive of obsolete content
interfaces.nsiconsoleservice) .logstringmessage("restoring tab: " + uri); }; document.addeventlistener("sstabrestoring", myextensionhandlerestore, false); simply replace the contents of the function myextensionhandlerestore() with whatever you need to do when the tab is restored. in this example, nsiconsoleservice is used to display a message to the console. ...
... restoring without restarting firefox 3.6 note this section applies to firefox 3.6 and later. firefox 3.6 knows how to save session store data when the last browser window closes, even if there are still other windows open. ...
...ab's persistent xul attributes (those saved due to calls to persisttabattribute()) and permissions are restored. the sstabrestoring event is sent. the tab is told to load the url it should be displaying. when the page is finished loading, text fields and scroll state are restored. finally, the sstabrestored event is sent. if you want to set permissions or otherwise manipulate a restored tab before the page is loaded into it, you should watch sstabrestoring. if you want to do something after the page is loaded, you should watch sstabrestored. both events are always sent for each tab being restored. you can determine which tab is being restored by looking at the event's originaltarget field. there's not really a way to determine when the last tab has been restored unless you determine how ...
...s["@mozilla.org/browser/sessionstore;1"] .getservice(components.interfaces.nsisessionstore); var currenttab = gbrowser.selectedtab; ss.deletetabvalue(currenttab, "key-name-here"); remarks the window value save and restore functions work exactly like the tab-based functions by similar names. starting in firefox 3.5, notifications are sent after reading session store data and before using it, as well as immediately before writing it back to disk. see the list in observer notifications. using the session store api in seamonkey there are a number of differences between the session store api 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"] .gets...

Developing New Mozilla Features - Archive of obsolete content
and of course, we have a set of coding practices to help everyone live together. ...
...and of course, we have a set of coding practices to help everyone live together. life will be much easier if your team has one or more members who are already familiar with and to the mozilla world. ...
...equent patches, so much the better. if you think your feature can only be implemented and reviewed in one enormous chunk, ask for design help in the appropriate newsgroup and/or from the developers with whom you have established relationships. if it is not possible to submit your feature in manageable size patches and you submit a 500k patch, be prepared for several months of review and revision before the patch is ready to be checked in it may not take this long. but if your team has worked for months on a feature, it is going to take reviewers new to the code a long time to work their way through it. and if it’s not possible to design the feature in bite-size chunks, it probably won’t be possible to review it that way either. we expect our reviewers to understand the code they approve fo...
...s a good contact for project management discussions. let us know what you’re doing. if you can find the resources, designate someone on your team as the liaison to mozilla.org for project management issues. review and super-review take time improving the code as requested by the reviewers takes time. poor quality code also takes time. we’ve opted to spend the time improving code consistency before check-in when the pain is limited to the developers and the reviewers rather than everyone in the tree. we’re committed to this style of development, but recognize that vigilance is necessary to make sure newcomers and their features don’t get lost. if you’re having a particularly bad experience or if you’ve got suggestions on how to improve our process, please let mozilla.org staff know.

Creating XPI Installer Modules - Archive of obsolete content
tents of the archive to mozilla's chrome registry; as long as the explanation is accurate, the contents can be arranged in almost any way you want. in the package you create in this tutorial, for example, all of the resources are located under the content/ subdirectory, but they could just as easily have been archived directly at the top--along with skin and locale resources, if you wanted. ...
... manifest.rdf file described the resources in an entire package directory or archive, now contents.rdf files can be used for as large or as small a part of your package description as you want; you can use several contents.rdf files in your package to describe the various parts (e.g., one for the skin of your package, another for the content, and so on), or you can use a single one, as was common before. mozilla is alerted to these content specifications and the resources they manage either through registration as part of an installation process (as described in this tutorial) or by way of a shortcut file called installed-chrome.txt, in which developers can point at their new contents.rdf files and have them registered as they develop (a process we do not describe here). one way of another, the ...
...h a couple of buttons and an image element. one of the buttons, labeled "show aphids", displays an alert dialog by calling a function defined in the javascript file barley.js. since we are not updating the mozilla ui to provide special access to this window (e.g., an item in the tasks menu or elsewhere), the measure of the success of the installation of the barley package is that the user can, as before, invoke our software by using a special startup option: mozilla -chrome chrome://barley/content this option tells mozilla to load a chrome other than the default, which is the main browser window. for this option to work, the designated chrome must have been installed and registered properly with mozilla. the chrome:// url pointer corresponds to the directory mozilla/bin/chrome/barley/content, w...
... of the xul file does not refer to any new skin, but imports communicator.css to make use of that skin's basic widget styles. the javascript file barley.js contains a single function, bar(), defined as follows: function bar() { alert("aphids"); } if you want to use the same gif image that is used in the barley package, it can be grabbed from here. while you are developing these resources and before you have made them a package of their own, you can test the basic layout and functionality by opening barley.xul from within mozilla by using file -> open. though mozilla will not display the file as a separate window (much less interpret it as a separate package), you ought to be able to see the image and the javascript function working as defined in barley.js (provided that both all three files...

Attribute (XUL) - Archive of obsolete content
« xul reference home acceltext accessible accesskey activetitlebarcolor afterselected align allowevents allownegativeassertions alternatingbackground alwaysopenpopup attribute autocheck autocompleteenabled autocompletepopup autocompletesearch autocompletesearchparam autofill autofillaftermatch autoscroll beforeselected buttonaccesskeyaccept buttonaccesskeycancel buttonaccesskeydisclosure buttonaccesskeyextra1 buttonaccesskeyextra2 buttonaccesskeyhelp buttonalign buttondir buttondisabledaccept buttonlabelaccept buttonlabelcancel buttonlabeldisclosure buttonlabelextra1 buttonlabelextra2 buttonlabelhelp buttonorient buttonpack buttons checked checkstate clicktoscroll class closebutton closemenu coalesceduplicatearcs collapse collapsed colo...
...xed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline multiple name negate newlines next noautofocus noautohide noinitialfocus nomatc...
...isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline multiple name negate newlines next noautofocus noautohide noinitialfocus nomatch norestorefocus object observes onbeforeaccept onbookmarkgroup onchange onclick onclosetab oncommand oncommandupdate ondialogaccept ondialogcancel ondialogclosure ondialogextra1 ondialogextra2 ondialoghelp onerror onerrorcommand onextra1 onextra2 oninput onload onnewtab onpageadvanced onpagehide onpagerewound onpageshow onpaneload onpopuphidden onpopuphiding onpopupshowing onpopupshown onsearchcomplete onse...
...ontextrevert ontextreverted onunload onwizardback onwizardcancel onwizardfinish onwizardnext open ordinal orient pack pageid pageincrement pagestep parent parsetype persist persistence phase pickertooltiptext placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabscrolling targets ...

findbar - Archive of obsolete content
xamples | attributes | properties | methods | related ] in gecko 1.9, the findbar widget moved into toolkit, so it's available to any xul application, as well as extensions. for example, the standard findbar in firefox 3.5 looks like this on the mac: you may attach a findbar to a particular browser element by either setting the findbar's browserid attribute to the id of the browser element before the findbar element is bound, or by setting the findbar's browser property to the browser element itself. attributes browserid, findnextaccesskey, findpreviousaccesskey, highlightaccesskey, matchcaseaccesskey properties browser, findmode methods close, onfindagaincommand, open, startfind, togglehighlight example <browser type="content-primary" flex="1" ...
...aredocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata close() return type: no return value ...
...close() return type: no return value closes the notification or findbar and removes it from its enclosing notificationbox or findbar. open( mode ) return type: no return value opens the findbar using the specified mode, which should be one of find_normal, find_typeahead, or find_links. if you don't pass a mode, the last-used mode for the same findbar is used. if the findbar hasn't been used before, find_normal is the default. onfindagaincommand( findprevious ) return type: no return value call this method to handle your application's "find next" and "find previous" commands. you should specify true as the input parameter to perform a "find previous" operation, or false to perform a "find next." startfind( mode ) return type: no return value call this method to handle your application'...
...on's "find" command. this opens the findbar, focuses the edit field for the search term, and selects its contents. the first time this is called for a given findbar, the findbar will flash to draw attention to itself. the mode should be one of find_normal, find_typeahead, or find_links. if you don't pass a mode, the last-used mode for the same findbar is used. if the findbar hasn't been used before, find_normal is the default. togglehighlight( highlight ) return type: no return value turns highlighting of text matching the search term on and off; specify false to disable highlighting or true to enable it. ...

insertItem - Archive of obsolete content
the third argument can be used to wrap the new item in another element. usually, the last argument will be null as it is mainly for the use of the customize dialog. the id should match an element in the toolbar's toolbarpalette. ...
...the third argument can be used to wrap the new item in another element. usually, the last argument will be null as it is mainly for the use of the customize dialog. the id should match an element in the toolbar's toolbarpalette. ...
...the third argument can be used to wrap the new item in another element. usually, the last argument will be null as it is mainly for the use of the customize dialog. the id should match an element in the toolbar's toolbarpalette. ...
...the third argument can be used to wrap the new item in another element. usually, the last argument will be null as it is mainly for the use of the customize dialog. the id should match an element in the toolbar's toolbarpalette. ...

Extensions - Archive of obsolete content
adding a new menu the main menu bar in firefox has the id 'main-menubar'. to add a new menu onto the main application menubar, you will need to overlay this menubar. for instance: <menubar id="main-menubar"> <menu label="search" insertbefore="tools-menu"> <menupopup> <menuitem label="web"/> <menuitem label="mail"/> </menupopup> </menu> </menubar> this menu is added to the main menu bar just before the tools menu. the insertbefore attribute is set to 'tools-menu' to ensure that the new menu is added at the right place. note that the menu will not appear until it has a <menupopup>. adding a new menuitem you might wish to add a new item to one of the menus. this can be done by overlaying the popup to append the item to. for a list of the ids of the menus for fi...
...to append the item to. for a list of the ids of the menus for firefox, see firefox menus. for example, to add an item to the end of the tools menu, use the following: <menupopup id="menu_toolspopup"> <menuitem label="thesaurus"/> </menupopup> note that other extensions may be adding their own items into the same menus. because of this, the new item might not appear at the end of the menu but before a menuitem added by another extension, depending on the order in which the overlays are applied. as you cannot predict this order, you should not rely on any menuitems being in particular positions in the presence of other extensions. modifying the context menu an extension may wish to modify the context menu associated with the browser area. normally, this menu displays menu items specific to ...
...="thumbnail-show" label="view thumbnail" oncommand="thumbnails.view();"/> </popup> note that the popup element is used rather than the menupopup element as this is the element that firefox uses. the code above will append the new item at the end of the context menu. if you want to place the item at a specific location within the context menu rather than at the end, you can use either the insertbefore or insertafter attributes to insert it before or after another item specified by an id. for example, the following may be used to insert a command just after the 'select all' command: <popup id="contentareacontextmenu"> <menuitem label="select links" oncommand="thumbnails.selectalllinks();" insertafter="context-selectall"/> </popup> see firefox context menu for a list of the ids ...
...in this example, the thumbnailsshowhideitems function will be called when the popup is about to be shown. this function retrieves the menuitem with the id 'thumbnail-show' that was added by the extension and hides it if an image was not the target of the context menu. the popupnode property of the document holds the target of the context menu. for more details abo...

Localization - Archive of obsolete content
will occur as it won't be able to find the entities. to do this, add a line of the following form somewhere near the top of the xul file: <!doctype window system "chrome://findfile/locale/findfile.dtd"> this line specifies that the url indicated is to be used as a dtd for the file. in this case, we have declared that we want to use the findfile.dtd dtd file. this line is typically placed just before the window element. you also need to add the locale to the chrome.manifest file, for example: locale findfile en-us locale/ declaring entities the entities are declared using a simple syntax as shown below: <!entity findlabel "find"> this example creates an entity with the name findlabel and the value "find". this means that wherever the text "&findlabel;" appears in the xul file, it will...
...play: none;" flex="1"> <treecols> <treecol id="name" label="&results.filename;" flex="1"/> <treecol id="location" label="&results.location;" flex="2"/> <treecol id="size" label="&results.size;" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="mozilla"/> <treecell label="/usr/local"/> <treecell label="&bytes.before;2520&bytes.after;"/> </treerow> </treeitem> </treechildren> </tree> <splitter id="splitbar" resizeafter="grow" style="display: none;"/> <spacer class="titlespace"/> <hbox> <progressmeter id="progmeter" value="50%" style="display: none;"/> <spacer flex="1"/> <button id="find-button" label="&button.find;" oncommand="dofind()"/> <button id="cancel-button"...
... is not important. in the example above, words in entities have been separated with periods. you don't have to do this. the entity names here follow similar conventions as the rest of the mozilla code. you might notice that the text '2520 bytes' has been replaced by two entities. this is because the phrase structure may be different in another locale. for example, the number might need to appear before the equivalent of 'bytes' instead of after. of course, this might need to be more complicated in order to display kb or mb as needed. the access keys and keyboard shortcuts have also been translated into entities because they will likely be different in a different locale. next, the dtd file - findfile.dtd: <!entity findwindow.title "find files"> <!entity filemenu.label "file"> <!entity editme...
...by using the chrome system to add the dtd file to a different locale, the same xul file can be used in any language. find files example so far: source next, we'll look at property files. « previousnext » ...

datepicker - Archive of obsolete content
value type: string the initial value of the datepicker in the form yyyy-mm-dd. properties date type: integer the currently selected date of the month from 1 to 31. set this property to change the selected date. dateleadingzero type: boolean a read only value indicating whether a leading zero should be displayed before the date when it is less than 10. datevalue type: date the date that is currently entered or selected in the datepicker as a date object. disabled type: boolean gets and sets the value of the disabled attribute. month type: integer the currently selected month from 0 to 11. set this property to change the selected month. ...
...ed in the datepicker as a date object. disabled type: boolean gets and sets the value of the disabled attribute. month type: integer the currently selected month from 0 to 11. set this property to change the selected month. monthleadingzero type: boolean a read only value indicating whether a leading zero should be displayed before the month when it is less than 10. open type: boolean for popup type datepickers, specifies whether the popup is open. set this property to open or close the popup. for non-popup datepickers, this property is always false. readonly type: boolean if set to true, then the user cannot modify the value of the element. tabindex type: int...
...in the form yyyy-mm-dd. unlike the month property, months in this value range from 01 to 12. set this property to change the selected date. year type: integer the currently selected year from 1 to 9999. set this property to change the selected year. yearleadingzero type: boolean a read only value indicating whether a leading zero should be displayed before the year when it is less than 1000. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbyt...
...aredocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsidomxulcontrole...

menupopup - Archive of obsolete content
enu id="submenu2" label="submenu 1"> <menupopup id="submenu2-popup"> <menuitem label="submenu2 item 1"/> <menuitem label="submenu2 item 2"/> </menupopup> </menu> <menupopup/> onpopuphiding type: script code this event is sent to a popup when it is about to be hidden. onpopupshowing type: script code this event is sent to a popup just before it is opened. this handler is usually used to dynamically set the contents when the user requests to display it. returning false from this event handler prevents the popup from appearing. onpopupshown type: script code this event is sent to a popup after it has been opened, much like the onload event is sent to a window when it is opened. position type: string the position attri...
... second word). the anchor value (ie, the first word) can be one of topleft, topright, bottomleft, bottomright, leftcenter, rightcenter, topcenter or bottomcenter. the popup value (ie, the second word) can be one of topleft, topright, bottomleft or bottomright. positions specified as a single word string are shortcuts for the values above. valid single-word values are after_start, after_end, before_start, before_end, end_after, end_before, start_after, start_before, overlap, at_pointer or after_pointer. for more details, including examples, please see popup positioning top type: integer overrides the vertical position of the popup specified by the showpopup method. properties accessibletype type: integer a value indicating the type of accessibility ob...
...node(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata hidepopup() return type: ...
...supply an anchor node and set the position to a string indicating the manner in which the popup should be anchored. the anchor node does not need to be in the same document as the popup. unanchored popups may be created by supplying null as the anchor node. the direction in which the popup is oriented depends on the direction of the anchor. position possible values for position are: before_start, before_end, after_start, after_end, start_before, start_after, end_before, end_after, overlap, and after_pointer. check positioning of the popup guide for a precise description of the effect of the different values. x, y for an anchored popup, the x and y arguments may be used to offset the popup from its anchored position by some number, measured in css pixels. an unanchored...

prefwindow - Archive of obsolete content
tcher.openwindow() with a null parentwindow. this does not work with prefwindows, breaking the general behavior of the window and in particular the list of prefpanes. prefer the classical window.opendialog() with the following window features: "chrome,titlebar,toolbar,centerscreen,dialog=yes". ...
.... 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. this affects only on mac os x. lastselected type: string set this to the id of the last selected pane. it will be opened by default the next time the preferences dialog is opened. onbeforeaccept type: script code the code in this attribute is called when the ok button is pressed or the acceptdialog method is called. returning false doesn't currently prevent the dialog from closing, but does prevent saving (bug 474527). ondialogaccept type: script code the code in this attribute is called when the accept button is pressed, or when the acceptdialog method is called. if th...
...node(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata acceptdialog() return type...
...opened via document.documentelement and not via window. therefore, an example call to opensubdialog() would look like this: document.documentelement.opensubdialog("chrome://myextension/content/options-sub.xul", "", null) issues when using prefpanes in prefwindow when you wish to put non-<prefpane> elements to prefwindow, you should place them after all of <prefpane>s. if you put other elements before the first <prefpane>, you possibly see strange behaviors about switching panes. this is due to bug 296418. should not: <prefwindow> <script src="config.js"/> <prefpane label="pane1" src="pane1.xul"/> <prefpane label="pane2" src="pane2.xul"/> </prefwindow> should: <prefwindow> <prefpane label="pane1" src="pane1.xul"/> <prefpane label="pane2" src="pane2.xul"/> <script src="config.j...

timepicker - Archive of obsolete content
he value of the disabled attribute. hideseconds type: boolean indicates whether the seconds field is visible or not. hour type: integer the currently selected hour from 0 to 23. set this property to change the selected hour. hourleadingzero type: boolean a read only value indicating whether a leading zero should be displayed before the hour when it is less than 10. increment type: integer gets and sets the value of the increment attribute. is24hourclock type: boolean a read only value indicating whether a 12-hour or 24-hour clock is used to display times. with a 12-hour clock, an extra field allows the user to pick between am and pm. this value is determined from the user's lo...
...'s locale. ispm type: boolean if false, the hour is between 0 and 11, and if true, the hour is 12 or greater. minute type: integer the currently selected minute from 0 to 59. set this property to change the selected minute. minuteleadingzero type: boolean a read only value indicating whether a leading zero should be displayed before the minute when it is less than 10. pmindicator type: string the string value displayed for hours between noon and midnight, defaulting to pm. this value is determined from the user's locale. readonly type: boolean if set to true, then the user cannot modify the value of the element. second type: integer the currently selecte...
...e user's locale. readonly type: boolean if set to true, then the user cannot modify the value of the element. second type: integer the currently selected second from 0 to 59. set this property to change the selected second. secondleadingzero type: boolean a read only value indicating whether a leading zero should be displayed before the second when it is less than 10. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string the currently entered time of the form hh:mm:ss. set this property to change the time. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(),...
...aredocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsidomxulcontrol...

toolbar - Archive of obsolete content
he id of the toolbox this toolbar is a member of. this will either be the toolbox's parent (if it's in a toolbox), or, if the toolbar is an external toolbar (that is, one not contained in a toolbox), the id of the toolbox it should be considered to be part of. this makes it possible to have toolbars that are not contained within toolboxes, such as the add-on bar. ...
...this toolbar is a member of. this will either be the toolbox's parent (if it's in a toolbox), or, if the toolbar is an external toolbar (that is, one not contained in a toolbox), the id of the toolbox it should be considered to be part of. this makes it possible to have toolbars that are not contained within toolboxes, such as the add-on bar. ...
...(that is, one not contained in a toolbox), the id of the toolbox it should be considered to be part of. this makes it possible to have toolbars that are not contained within toolboxes, such as the add-on bar. methods insertitem( id, beforenode, wrapper, beforepermanent ) not in seamonkey 1.x return type: element add an item with the given id to the toolbar. the new item is added just before the item given by the second argument. if the second argument is null, but the beforepermanent argument is true, the item is added to the beginning of the toolbar before the first permanent item. otherwise, if the beforepermanent argument is false, the new item is added to the end of the toolbar. the third argument can be used to wrap the new item in another element. usually, the last argument wi...
...aredocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes chromeclass-t...

tooltip - Archive of obsolete content
<menu id="submenu2" label="submenu 1"> <menupopup id="submenu2-popup"> <menuitem label="submenu2 item 1"/> <menuitem label="submenu2 item 2"/> </menupopup> </menu> <menupopup/> onpopuphiding type: script code this event is sent to a popup when it is about to be hidden. onpopupshowing type: script code this event is sent to a popup just before it is opened. this handler is usually used to dynamically set the contents when the user requests to display it. returning false from this event handler prevents the popup from appearing. onpopupshown type: script code this event is sent to a popup after it has been opened, much like the onload event is sent to a window when it is opened. page type: boolean setting the pag...
... second word). the anchor value (ie, the first word) can be one of topleft, topright, bottomleft, bottomright, leftcenter, rightcenter, topcenter or bottomcenter. the popup value (ie, the second word) can be one of topleft, topright, bottomleft or bottomright. positions specified as a single word string are shortcuts for the values above. valid single-word values are after_start, after_end, before_start, before_end, end_after, end_before, start_after, start_before, overlap, at_pointer or after_pointer. for more details, including examples, please see popup positioning properties accessibletype type: integer a value indicating the type of accessibility object for the element. label type: string gets and sets the value of the label attribut...
...node(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata hidepopup() return type: n...
...supply an anchor node and set the position to a string indicating the manner in which the popup should be anchored. the anchor node does not need to be in the same document as the popup. unanchored popups may be created by supplying null as the anchor node. the direction in which the popup is oriented depends on the direction of the anchor. position possible values for position are: before_start, before_end, after_start, after_end, start_before, start_after, end_before, end_after, overlap, and after_pointer. check positioning of the popup guide for a precise description of the effect of the different values. x, y for an anchored popup, the x and y arguments may be used to offset the popup from its anchored position by some number, measured in css pixels. an unanchored...

where - Archive of obsolete content
should be reversed. the where clause matches if the condition is false, and does not match if the condition is true. rel type: one of the values below the type of comparison to perform. equals the subject and value must match exactly. ...
... the condition is false, and does not match if the condition is true. rel type: one of the values below the type of comparison to perform. equals the subject and value must match exactly. less the numeric value of the subject must be less than the value greater the numeric value of the subject must be greater than the value before the string value of subject must come before value alphabetically after the string value of subject must come after value alphabetically startswith the value of subject must start with the value endswith the value of subject must end with the value contains the value of subject must contain the value as a substring subject type: string the variable or string to compare. value type: string the value to c...
...in the value as a substring subject type: string the variable or string to compare. value type: string the value to compare. ...
...aredocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...

Sunbird Theme Tutorial - Archive of obsolete content
erent icons on the buttons. but a theme cannot provide an extra button. what do you need to make a theme? to make a theme, you usually need these tools: a jar tool or zip tool an editor for plain text files software for creating and editing images note: some zip tools only work with files whose names have <tt>.zip</tt> at the end. you can use this kind of zip tool if you rename each file before and after using the tool. you also need knowledge of: using your operating system to create files and directories using the tools listed above css graphic design knowledge of xul, xbl and javascript is useful for advanced themes. making a theme a theme consists of: a unique identifier a file containing information about the theme a file that registers the theme with sunbird some fil...
...if the <tt>extensions</tt> directory is empty, you are in the wrong place—start again and follow the instructions more carefully. creating a unique identifier create an identifier that is likely to be unique, in the form: <tt>something@domain-name</tt> it must contain an at-sign (<tt>@</tt>), making it look something like an e-mail address, but it does not need to be a real e-mail address. before and after the at-sign, it can only contain the characters a-z, a-z, 0-9, full stop, hyphen and underscore. if you do not own a domain name, you can make up something else. if you want to make it clear that your made-up name is not a real domain, add <tt>.invalid</tt> to the end. create a new directory in the <tt>extensions</tt> directory. use the identifer as your new directory's name. this new d...
...as sunbird's classic theme. modifying your theme to modify your theme, change the css and image files in any way you like. for testing purposes, go to the <tt>calendar</tt> directory that you have just pasted. edit the file <tt>calendar.css</tt> there. add this line at the end: label {color: red;} save the file. fixing bug 320823 if you are using the sunbird 0.3a1 release, or a test build before 2005-12-21, then you must apply a fix for bug 320823 to allow sunbird to use themes. go to sunbird's program directory, then to the <tt>defaults</tt> directory there. in the <tt>pref</tt> directory, edit the file <tt>sunbird.js</tt> and search for the <tt>pref("extensions</tt> entries. add the line: pref("extensions.dss.enabled", false); save the file. using your theme to use your theme, res...
...hrome</tt> directory. from the unpacked <tt>skin/classic</tt> directory, copy the extra directories into your theme. in your <tt>chrome.manifest</tt> file, add lines like this: skin communicator testing chrome/communicator/ skin global testing chrome/global/ skin help testing chrome/help/ skin mozapps testing chrome/mozapps/ replacing <tt>testing</tt> with your theme's one-word internal name as before. to understand the user interface provided by these other components, unpack the other jar files. packaging your theme you can package your theme and make it available on a web site for other users to download and install. there are two methods: a simple method, and the normal method. simple packaging note: if you use this simple method to package your theme, then it can take up much more ...

Browser Feature Detection - Archive of obsolete content
e bottom true true true captionside true false true clear true true true clip true true true content true false true counterincrement true false true counterreset true false true cue true false false cueafter true false false cuebefore true false false cursor true true true direction true true true elevation true false false emptycells true false true fontsizeadjust true false true fontstretch true false true left true true true markeroffset true false true marks tr...
... true ie7 only true orphans true false true outline true false true outlinecolor true false true outlinestyle true false true outlinewidth true false true overflow true true true page true false true pagebreakafter true true true pagebreakbefore true true true pagebreakinside true false true pause true false true pauseafter true false true pausebefore true false true pitch true false false pitchrange true false true playduring false false false position true true true quotes ...
... false}, {name: 'bottom', 'supported': false}, {name: 'captionside', 'supported': false}, {name: 'clear', 'supported': false}, {name: 'clip', 'supported': false}, {name: 'content', 'supported': false}, {name: 'counterincrement', 'supported': false}, {name: 'counterreset', 'supported': false}, {name: 'cue', 'supported': false}, {name: 'cueafter', 'supported': false}, {name: 'cuebefore', 'supported': false}, {name: 'cursor', 'supported': false}, {name: 'direction', 'supported': false}, {name: 'elevation', 'supported': false}, {name: 'emptycells', 'supported': false}, {name: 'fontsizeadjust', 'supported': false}, {name: 'fontstretch', 'supported': false}, {name: 'left', 'supported': false}, {name: 'markeroffset', 'supported': false}, {name: 'marks', 'supported'...
...'minwidth', 'supported': false}, {name: 'orphans', 'supported': false}, {name: 'outline', 'supported': false}, {name: 'outlinecolor', 'supported': false}, {name: 'outlinestyle', 'supported': false}, {name: 'outlinewidth', 'supported': false}, {name: 'overflow', 'supported': false}, {name: 'page', 'supported': false}, {name: 'pagebreakafter', 'supported': false}, {name: 'pagebreakbefore', 'supported': false}, {name: 'pagebreakinside', 'supported': false}, {name: 'pause', 'supported': false}, {name: 'pauseafter', 'supported': false}, {name: 'pausebefore', 'supported': false}, {name: 'pitch', 'supported': false}, {name: 'pitchrange', 'supported': false}, {name: 'playduring', 'supported': false}, {name: 'position', 'supported': false}, {name: 'quotes', 'supported'...

Anatomy of a video game - Game development
, it will probably make your job easier. some code needs to be run frame-by-frame so why attach that function to anything other than the browser's redraw schedule? on the web, window.requestanimationframe() will be the foundation of most well-programmed per-frame main loops. a callback function must be passed in to it when it is called. that callback function will be executed at a suitable time before the next repaint. here is an example of a simple main loop: window.main = function () { window.requestanimationframe( main ); // whatever your main loop needs to do }; main(); // start the cycle note: in each of the main() methods discussed here, we schedule a new requestanimationframe before performing our loop contents. that is not by accident and it is considered best practice. callin...
...ction does some work and also tells the browser to call itself next frame with window.requestanimationframe(). the second statement calls the main() function, defined in the first statement. because main() is called once in the second statement and every call of it places itself in the queue of things to do next frame, main() is synchronized to your framerate. of course this loop is not perfect. before we discuss ways to change it, let us discuss what it already does well. timing the main loop to when the browser paints to the display allows you to run your loop as frequently as the browser wants to paint. you are given control over each frame of animation. it is also very simple because main() is the only function getting looped. a first person shooter (or a similar game) presents a new scene...
...occur at different rates. you will also need to consider how gracefully your game will fail if the user's system cannot keep up with the workload. let us start by assuming that you will handle user input and update the game state every time you draw. we will branch out later. note: changing how your main loop deals with time is a debugging nightmare, everywhere. think about your needs carefully before working on your main loop. what most browser games should look like if your game can hit the maximum refresh rate of any hardware you support then your job is fairly easy. you can simply update, render, and then do nothing until vsync. /* * starting with the semicolon is in case whatever line of code above this example * relied on automatic semicolon insertion (asi). the browser could acciden...
.... * * update() calculates the game state as of a given point in time. it should always * increment by ticklength. it is the authority for game state. it is passed * the domhighrestimestamp for the time it represents (which, again, is always * last update + mygame.ticklength unless a pause feature is added, etc.) * * setinitialstate() performs whatever tasks are leftover before the mainloop must run. * it is just a generic example function that you might have added. */ ;(function () { function main( tframe ) { mygame.stopmain = window.requestanimationframe( main ); var nexttick = mygame.lasttick + mygame.ticklength; var numticks = 0; // if tframe < nexttick then 0 ticks need to be updated (0 is default for numticks). // if tfram...

Building up a basic demo with PlayCanvas editor - Game development
e playcanvas editor. this can be a more pleasant working environment if you are not someone who likes to code. creating an account the playcanvas editor is free — all you have to do to begin with is register your account and login: when you first sign up, you are taken straight into the editor and given a simple starter tutorial involving editing a 3d rolling ball game. you can finish this before you continue our tutorial if you like. when you are ready to continue with our tutorial, go to your canvas homepage — for example mine is https://playcanvas.com/end3r. here's what the page looks like — you can create projects and manage them, change their settings etc. creating a new project start a brand new project by clicking on the new button: the resulting dialog box will show a few...
...ion value of -2. adding other shapes involves a very similar process to adding the box. click on the root folder in the hierarchy panel (to make sure that the new shape appears in the root, and not as a child of the box) then click on the big add entity (plus) button and select cylinder from the dropdown list — it will add a new cylinder shape to the scene. now follow the same steps as we did before when coloring the cube: create a new material using the add asset (plus) button. make sure the new material in the assets panel is selected, to bring up the entity inspector. give the material a new name, along the lines of cylindermaterial. click diffuse, then click the color picker — give it an orange color (we used ff9500.) drag and drop the cylindermaterial icon onto the cylinder obj...
...on.js. if you double click on it, you'll be moved to a code editor. as you can see, the file contains some boilerplate code already: pc.script.create('boxanimation', function (app) { // creates a new boxanimation instance var boxanimation = function (entity) { this.entity = entity; }; boxanimation.prototype = { // called once after all resources are loaded and before the first update initialize: function () { }, // called every frame, dt is time in seconds since last update update: function (dt) { } }; return boxanimation; }); the most interesting part is the update() function, which is where we can put any code that we want repeated on every frame. add the following line inside this function, to rotate the c...
...e the setposition() method — add the code below to the update() function: this.timer += dt; this.entity.setposition(2, math.sin(this.timer*2), 0); the position of the cone will be animated on each frame by being passed the math.sin() value of the timer at each point in time — we have doubled the this.timer value to make it move higher. add the coneanimation.js script to the cone object, as before. test the demo out launch the demo to see the effects — all the shapes should animate. congratulations, you've completed the tutorial! summary now you can check the playcanvas engine article if you haven't seen it yet, go back to the building up a basic demo with playcanvas page, or go back a level higher to the main 3d games on the web page. ...

Plug-in Development Overview - Gecko Plugin API Reference
", string 4: "aiff audio", and string 5: "jpeg image format." str#' 126: string 1 can contain a descriptive message about the plug-in. this message, which is in html format, is displayed by the browser in its "about plug-ins" page. string 2 can contain the name of the plug-in, thus allowing the name the user sees to be different from the name of the file on disk. ...
... the browser calls these plug-in methods: npp_getvalue: query the plug-in for information. npp_print: request a platform-specific print operation for the instance. npp_setvalue: set the browser information. ...
...set the window or other target in which it draws, arrange for redrawing, and handle events. a windowless plug-in can call the following netscape methods to draw itself: npn_forceredraw: force a paint message for windowless plug-ins. npn_invalidaterect: invalidate an area in a windowless plug-in before repainting or refreshing. npn_invalidateregion: invalidate an area in a windowless plug-in before repainting or refreshing. the browser calls these plug-in methods: npp_getvalue: query the plug-in for information. npp_print: request a platform-specific print operation for the instance. npp_setvalue: set the browser information. npp_setwindow: set the window in which a plug-in draws. npp_handleevent: deliver a platform-specific event to the instance. the plug-in can call these netsc...
...nformation about these processes, see drawing and event handling. handling memory plug-in developers can take advantage of the memory features provided in the plug-in api to allocate and free memory. use the npn_memalloc method to allocate memory from the browser. use the npn_memfree method to free memory allocated with npn_memalloc. use the npn_memflush method to free memory (mac os only) before calling memory-intensive mac toolbox calls. sending and receiving streams streams are objects that represent urls and the data they contain. a stream is associated with a specific instance of a plug-in, but a plug-in can have more than one stream per instance. streams can be produced by the browser and consumed by a plug-in instance, or produced by an instance and consumed by the browser. each...

Grids - Learn web development
ifferent positive values to your tracks, for example if you change the definition like so: .container { display: grid; grid-template-columns: 2fr 1fr 1fr; } the first track now gets 2fr of the available space and the other two tracks get 1fr, making the first track larger. you can mix fr units and fixed length tracks — in such a case the space needed for the fixed tracks is taken away before the space is distributed to the other tracks. simple grid example with fr units body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 2fr 1fr 1fr; } .container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); ...
...letproof. .container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; gap: 20px; } repeating track listings you can repeat all, or a section of, your track listing using repeat notation. change your track listing to the following: .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; } you will now get 3 1fr tracks just as before. the first value passed to the repeat function is how many times you want the listing to repeat, while the second value is a track listing, which may be one or more tracks that you want to repeat. the implicit and explicit grid we have only specified column tracks so far, and yet rows are being created to hold our content. this is an example of the explicit versus the implicit grid. the explici...
...ollowing css. ...
...ide> <footer>contact me@mysite.com</footer> </div> if you use the firefox grid inspector to overlay the grid lines on your design, you can see how our 12 column grid works. test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: grids. summary in this overview we have toured the main features of css grid layout. you should be able to start using it in your designs. to dig further into the specification, read our guides to grid layout, which can be found below. see also css grid guides css grid inspector: examine grid layouts previous overview: css layout next in thi...

Using CSS generated content - Learn web development
u specify content in your stylesheet that requires translation, you have to put those parts of your stylesheet in different files and arrange for them to be linked with the appropriate language versions of your doucment. this issue does not arise if the content you specify consists of symbols or images that apply in all languages and cultures. ...
... have to put those parts of your stylesheet in different files and arrange for them to be linked with the appropriate language versions of your doucment. this issue does not arise if the content you specify consists of symbols or images that apply in all languages and cultures. examples text content css can insert text content before or after an element. to specify this, make a rule and add ::before or ::after to the selector. ...
...u specify consists of symbols or images that apply in all languages and cultures. examples text content css can insert text content before or after an element. to specify this, make a rule and add ::before or ::after to the selector. in the declaration, specify the content property with the text content as its value. html a text where i need to <span class="ref">something</span> css .ref::before { font-weight: bold; color: navy; content: "reference "; } output the character set of a stylesheet is utf-8 by default, but it can also be specified in the link, in the stylesheet itself, or in other ways. for details, see 4.4 css style sheet representation in the css specification. individual characters can also be specified by an escape mechanism that uses backslash as the escape ch...
....4 css style sheet representation in the css specification. individual characters can also be specified by an escape mechanism that uses backslash as the escape character. for example, "\265b" is the chess symbol for a black queen ♛. for details, see referring to characters not represented in a character encoding and characters and case in the css specification. image content to add an image before or after an element, you can specify the url of an image file in the value of the content property. this rule adds a space and an icon after every link that has the class glossary: html <a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a> css a.glossary::after { content: " " url("https://mdn.mozillademos.org/files/16322/glossary-icon.gif"); } ...

Fundamental text and font styling - Learn web development
ntent effectively behaves like a series of inline elements, being laid out on lines adjacent to one another, and not creating line breaks until the end of the line is reached, or unless you force a line break manually using the <br> element. note: if the above paragraph leaves you feeling confused, then no matter — go back and review our box model article, to brush up on the box model theory, before carrying on. the css properties used to style text generally fall into two categories, which we'll look at separately in this article: font styles: properties that affect the font that is applied to the text, affecting what font is applied, how big it is, whether it is bold, italic, etc. text layout styles: properties that affect the spacing and other layout features of the text, allowing m...
...ndependently of its actual font size. font-stretch: switch between possible alternative stretched versions of a given font. text-underline-position: specify the position of underlines set using the text-decoration-line property underline value. text-rendering: try to perform some text rendering optimization. text layout styles: text-indent: specify how much horizontal space should be left before the beginning of the first line of the text content. text-overflow: define how overflowed content that is not displayed is signaled to users. white-space: define how whitespace and associated line breaks inside the element are handled. word-break: specify whether to break lines within words. direction: define the text direction (this depends on the language and usually it's better to let html...
...y whether to break lines within words. direction: define the text direction (this depends on the language and usually it's better to let html handle that part as it is tied to the text content.) hyphens: switch on and off hyphenation for supported languages. line-break: relax or strengthen line breaking for asian languages. text-align-last: define how the last line of a block or a line, right before a forced line break, is aligned. text-orientation: define the orientation of the text in a line. overflow-wrap: specify whether or not the browser may break lines within words in order to prevent overflow. writing-mode: define whether lines of text are laid out horizontally or vertically and the direction in which subsequent lines flow. font shorthand many font properties can also be set th...
...cle, and already did some skill testing in our active learning section, but can you remember the most important information going forward? you can find an assessment to verify that you've retained this information at the end of the module — see typesetting a community school homepage. this assessment tests all the knowledge discussed in this module, so you might want to read the other articles before moving on to it. summary we hoped you enjoyed playing with text in this article! the next article will give you all you need to know about styling html lists. overview: styling text next in this module fundamental text and font styling styling lists styling links web fonts typesetting a community school homepage ...

Learn to style HTML using CSS - Learn web development
out. for example, you can use css to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites you should learn the basics of html before attempting any css. we recommend that you work through our introduction to html module first. in that module, you will learn about: css, starting with the introduction to css module more advanced html modules javascript, and how to use it to add dynamic functionality to web pages once you understand the fundamentals of html, we recommend that you learn html and css at the same time, moving...
... more advanced html modules javascript, and how to use it to add dynamic functionality to web pages once you understand the fundamentals of html, we recommend that you learn html and css at the same time, moving back and forth between the two topics. this is because html is far more interesting and much more fun to learn when you apply css, and you can't really learn css without knowing html. before starting this topic, you should also be familiar with using computers and using the web passively (i.e., just looking at it, consuming the content). you should have a basic work environment set up as detailed in installing basic software and understand how to create and manage files, as detailed in dealing with files — both of which are parts of our getting started with the web complete beginne...
...he web passively (i.e., just looking at it, consuming the content). you should have a basic work environment set up as detailed in installing basic software and understand how to create and manage files, as detailed in dealing with files — both of which are parts of our getting started with the web complete beginner's module. it is recommended that you work through getting started with the web before proceeding with this topic. however, doing so isn't absolutely necessary as much of what is covered in the css basics article is also covered in our css first steps module, albeit in a lot more detail. modules this topic contains the following modules, in a suggested order for working through them. you should definitely start with the first one. css first steps css (cascading style sheets) ...
...with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. this module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more. the aim here is to provide you with a toolkit for writing competent css and help you understand all the essential theory, before moving on to more specific disciplines like text styling and css layout. styling text with the basics of the css language covered, the next css topic for you to concentrate on is styling text — one of the most common things you'll do with css. here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows and other text features. ...

Advanced form styling - Learn web development
fferent browsers handle this in many different, often ugly ways: browser rendering firefox 71 (macos) firefox 57 (windows 10) chrome 77 (macos), safari 13, opera chrome 63 (windows 10) internet explorer 11 (windows 10) edge 16 (windows 10) using appearence: none on radios/checkboxes as we showed before, you can remove the default appearance of a checkbox or radio button altogether with appearance:none; let's take this example html: <form> <fieldset> <legend>fruit preferences</legend> <p> <label> <input type="checkbox" name="fruit-1" value="cherry"> i like cherry </label> </p> <p> <label> <input type="checkbox" name="fruit-2" value="b...
... :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: black; background: #ddd; color: gray; } you'll find more out about such pseudo-class...
...differs across browsers. it also tends to change if you increase the size of the select box, or resize in an ugly fashion. to fix this in our example we first used our old friend appearance: none to get rid of the icon altogether: select { -webkit-appearance: none; appearance: none; } we then created our own icon using generated content. ...
...st fallback html in case the script fails. there are many reasons why scripts may fail, especially in the mobile world, and you need to design your web site or app to handle these cases as well as possible. test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: advanced styling. bear in mind that some questions in this assessment series assume knowledge of the next article too, so you might want to work through that article first before attempting it. summary while there are still difficulties using css with html forms, there are ways to get around many of the problems. there are no clean, universal solutions, but...

Client-side form validation - Learn web development
this is called client-side form validation, and helps ensure data submitted matches the requirements set forth in the various form controls. this article leads you through basic concepts and examples of client-side form validation. prerequisites: computer literacy, a reasonable understanding of html, css, and javascript. objective: to understand what client-side form validation is, why it's important, and how to apply various techniques to implement it. ...
... need to create it all (or use a library). using built-in form validation one of the most significant features of html5 form controls is the ability to validate most user data without relying on javascript. this is done by using validation attributes on form elements. we've seen many of these earlier in the course, but to recap: required: specifies whether a form field needs to be filled in before the form can be submitted. minlength and maxlength: specifies the minimum and maximum length of textual data (strings) min and max: specifies the minimum and maximum values of numerical input types type: specifies whether the data needs to be a number, an email address, or some other specific preset type. pattern: specifies a regular expression that defines a pattern the entered data needs t...
...ton>submit</button> </form> this simple form uses the novalidate attribute to turn off the browser's automatic validation; this lets our script take control over validation. however, this doesn't disable support for the constraint validation api nor the application of css pseudo-classes like :valid, etc. that means that even though the browser doesn't automatically check the validity of the form before sending its data, you can still do it yourself and style the form accordingly. our input to validate is an <input type="email">, which is required, and has a minlength of 8 characters. let's check these using our own code, and show a custom error message for each one. we are aiming to show the error messages inside a <span> element. the aria-live attribute is set on that <span> to make sure tha...
... on your own. the difficult part is to make it generic enough to use both cross-platform and on any form you might create. there are many libraries available to perform form validation, such as validate.js. test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: form validation. summary client-side form validation sometimes requires javascript if you want to customize styling and error messages, but it always requires you to think carefully about the user. always remember to help your users correct the data they provide. to that end, be sure to: display explicit error messages. be permissive about the input for...

Images in HTML - Learn web development
there are other types of multimedia to consider, but it is logical to start with the humble <img> element, used to embed a simple image in a webpage. in this article we'll look at how to use it in depth, including the basics, annotating it with captions using <figure>, and detailing how it relates to css background images. ...
... requires a minimum of one attribute to be useful — src (sometimes spoken as its full title, source). the src attribute contains a path pointing to the image you want to embed in the page, which can be a relative or absolute url, in the same way as href attribute values in <a> elements. note: you should read a quick primer on urls and paths to refresh your memory on relative and absolute urls before continuing. so for example, if your image is called dinosaur.jpg, and it sits in the same directory as your html page, you could embed the image like so: <img src="dinosaur.jpg"> if the image was in an images subdirectory, which was inside the same directory as the html page (which google recommends for seo/indexing purposes), then you'd embed it like this: <img src="images/dinosaur.jpg"> a...
...n't alter the size of your images using html attributes. if you set the image size too big, you'll end up with images that look grainy, fuzzy, or too small, and wasting bandwidth downloading an image that is not fitting the user's needs. the image may also end up looking distorted, if you don't maintain the correct aspect ratio. you should use an image editor to put your image at the correct size before putting it on your webpage. note: if you do need to alter an image's size, you should use css instead. image titles as with links, you can also add title attributes to images, to provide further supporting information if needed. in our example, we could do this: <img src="images/dinosaur.jpg" alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp ...
...in terms of your content, you should use an html image. if an image is purely decoration, you should use css background images. note: you'll learn a lot more about css background images in our css topic. test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: html images. summary that's all for now. we have covered images and captions in detail. in the next article we'll move it up a gear, looking at how to use html to embed video and audio in web pages. overview: multimedia and embedding next in this module images in html video and audio content from <object> to <iframe> — other embedding techno...

Responsive images - Learn web development
al size, which can be found by inspecting the image file on your computer (for example, on a mac you can select the image in finder and press cmd + i to bring up the info screen). sizes defines a set of media conditions (e.g. screen widths) and indicates what image size would be best to choose, when certain media conditions are true — these are the hints we talked about earlier. in this case, before each comma we write: a media condition ((max-width:600px)) — you'll learn more about these in the css topic, but for now let's just say that a media condition describes a possible state that the screen can be in. in this case, we are saying "when the viewport width is 600 pixels or less". a space the width of the slot the image will fill when the media condition is true (480px) note: fo...
.... just as we saw with <img> above, <source> can take a srcset attribute with multiple images referenced, as well as a sizes attribute. so, you could offer multiple images via a <picture> element, but then also offer multiple resolutions of each one. realistically, you probably won't want to do this kind of thing very often. in all cases, you must provide an <img> element, with src and alt, right before </picture>, otherwise no images will appear. this provides a default case that will apply when none of the media conditions return true (you could actually remove the second <source> element in this example), and a fallback for browsers that don't support the <picture> element. this code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below: no...
...lows us to display a suitable image on both wide screen and narrow screen displays, as shown below: note: you should use the media attribute only in art direction scenarios; when you do use media, don't also offer media conditions within the sizes attribute. why can't we just do this using css or javascript? when the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's css and javascript. that mechanism is useful in general for reducing page load times, but it is not helpful for responsive images — hence the need to implement solutions like srcset. for example, you couldn't load the <img> element, then detect the viewport width with javascript, and then dynamically change the source image to a small...
...have fun! ...

General asynchronous programming concepts - Learn web development
prerequisites: basic computer literacy, a reasonable understanding of javascript fundamentals. objective: to understand the basic concepts behind asynchronous programming, and how they manifest in web browsers and javascript. ...
...mitigate all the time. why is this? the answer is because javascript, generally speaking, is single-threaded. at this point, we need to introduce the concept of threads. threads a thread is basically a single process that a program can use to complete tasks. each thread can only do a single task at once: task a --> task b --> task c each task will be run sequentially; a task has to complete before the next one can be started. as we said earlier, many computers now have multiple cores, so can do multiple things at once. programming languages that can support multiple threads can use multiple cores to complete multiple tasks simultaneously: thread 1: task a --> task b thread 2: task c --> task d javascript is single-threaded javascript is traditionally single-threaded. even with multiple...
... is not blocked. main thread: task a --> task c worker thread: expensive task b with this in mind, have a look at simple-sync-worker.html (see it running live), again with your browser's javascript console open. this is a rewrite of our previous example that calculates the 10 million dates in a separate worker thread. now when you click the button, the browser is able to display the paragraph before the dates have finished calculating. the first operation no longer blocks the second. asynchronous code web workers are pretty useful, but they do have their limitations. a major one is they are not able to access the dom — you can't get a worker to directly do anything to update the ui. we couldn't render our 1 million blue circles inside our worker; it can basically just do the number crunc...
...available at the same time, then we might be ok, but this is unlikely. if task d tries to run when one of its inputs is not yet available, it will throw an error. to fix such problems, browsers allow us to run certain operations asynchronously. features like promises allow you to set an operation running (e.g. the fetching of an image from the server), and then wait until the result has returned before running another operation: main thread: task a task b promise: |__async operation__| since the operation is happening somewhere else, the main thread is not blocked while the async operation is being processed. we'll start to look at how we can write asynchronous code in the next article. exciting stuff, huh? keep reading! conclusion modern software design increasi...

Introducing asynchronous JavaScript - Learn web development
response = fetch('myimage.png'); let blob = response.blob(); // display your image blob in the ui somehow that's because you don't know how long the image will take to download, so when you come to run the second line it will throw an error (possibly intermittently, possibly every time) because the response is not yet available. instead, you need your code to wait until the response is returned before it tries to do anything else to it. there are two main types of asynchronous code style you'll come across in javascript code, old-style callbacks and newer promise-style code. in the below sections we'll review each of these in turn. async callbacks async callbacks are functions that are specified as arguments when calling a function which will start executing code in the background. when the...
...er, we then create a loadasset() function that takes a callback as a parameter, along with a url to fetch and a content type. it uses xmlhttprequest (often abbreviated to "xhr") to fetch the resource at the given url, then pass the response to the callback to do something with. in this case the callback is waiting on the xhr call to finish downloading the resource (using the onload event handler) before it passes it to the callback. callbacks are versatile — not only do they allow you to control the order in which functions are run and what data is passed between them, they also allow you to pass data to different functions depending on circumstance. so you could have different actions to run on the response downloaded, such as processjson(), displaytext(), etc. note that not all callbacks a...
... function will be executed when passing a callback to a third-party library. the nature of asynchronous code let's explore an example that further illustrates the nature of async code, showing what can happen when we are not fully aware of code execution order and the problems of trying to treat asynchronous code like synchronous code. the following example is fairly similar to what we've seen before (see it live, and the source). one difference is that we've included a number of console.log() statements to illustrate an order that you might think the code would execute in. console.log ('starting'); let image; fetch('coffee.jpg').then((response) => { console.log('it worked :)') return response.blob(); }).then((myblob) => { let objecturl = url.createobjecturl(myblob); image = documen...
..., except that in that case the second message is blocked on the promise chain fetching a resource then displaying it on screen, rather than a click. in a less trivial code example, this kind of setup could cause a problem — you can't include an async code block that returns a result, which you then rely on later in a sync code block. you just can't guarantee that the async function will return before the browser has processed the sync block. to see this in action, try taking a local copy of our example, and changing the fourth console.log() call to the following: console.log ('all done! ' + image.src + 'displayed.'); you should now get an error in your console instead of the third message: typeerror: image is undefined; can't access its "src" property this is because at the time the brow...

What went wrong? Troubleshooting JavaScript - Learn web development
ogic somewhere — the game is not returning an error; it just isn't playing right. search for the randomnumber variable, and the lines where the random number is first set. ...
.... 0.5675493843. math.random() next, we pass the result of invoking math.random() through math.floor(), which rounds the number passed to it down to the nearest whole number. we then add 1 to that result: math.floor(math.random()) + 1 rounding a random decimal number between 0 and 1 down will always return 0, so adding 1 to it will always return 1. we need to multiply the random number by 100 before we round it down. the following would give us a random number between 0 and 99: math.floor(math.random()*100); hence us wanting to add 1, to give us a random number between 1 and 100: math.floor(math.random()*100) + 1; try updating both lines like this, then save and refresh — the game should now play like we are intending it to! other common errors there are other common errors you'll co...
....floor(math.random()*100); hence us wanting to add 1, to give us a random number between 1 and 100: math.floor(math.random()*100) + 1; try updating both lines like this, then save and refresh — the game should now play like we are intending it to! other common errors there are other common errors you'll come across in your code. this section highlights most of them. syntaxerror: missing ; before statement this error generally means that you have missed a semicolon at the end of one of your lines of code, but it can sometimes be more cryptic. for example, if we change this line inside the checkguess() function: var userguess = number(guessfield.value); to var userguess === number(guessfield.value); it throws this error because it thinks you are trying to do something different. you s...
...=== number(guessfield.value); it throws this error because it thinks you are trying to do something different. you should make sure that you don't mix up the assignment operator (=) — which sets a variable to be equal to a value — with the strict equality operator (===), which tests whether one value is equal to another, and returns a true/false result. note: see our syntaxerror: missing ; before statement reference page for more details about this error. the program always says you've won, regardless of the guess you enter this could be another symptom of mixing up the assignment and strict equality operators. for example, if we were to change this line inside checkguess(): if (userguess === randomnumber) { to if (userguess = randomnumber) { the test would always return true, caus...

Getting started with Ember - Learn web development
ded html structure, which eliminates small differences between implementations, allowing for easier comparison. later on in the tutorial, we'll focus on adding code to our application to fix some of todomvc's biggest faults. installing the ember tooling ember uses a command-line interface (cli) tool for building and scaffolding parts of your application. you'll need node and npm installed before you can install ember-cli. go here to find out how to install node and npm, if you haven't already got them. now type the following into your terminal to install ember-cli: npm install -g ember-cli this tool provides the ember program in your terminal, which is used to create, build, develop, test, and scaffold your application (run ember --help for a full list of commands and their o...
...reate, build, develop, test, and scaffold your application (run ember --help for a full list of commands and their options). to create a brand new application, type the following in your terminal. this creates a new directory inside the current directory you are in called todomvc, containing the scaffolding for a new ember app. make sure you navigate to somewhere appropriate in the terminal before you run it. (good suggestions are your "desktop" or "documents" directories, so that it is easy to find): ember new todomvc or, on windows: npx ember-cli new todomvc this generates a production-ready application development environment that includes the following features by default: development server with live reload. plugin-architecture that allows for third-party packages t...
... babel and webpack integration. automated testing environment that runs your tests in the browser, allowing you to test like a user. transpilation, and minification, of both css and javascript for production builds. conventions for minimizing the differences between applications (allowing easier mental context switching). getting ready to build our ember project you'll need a code editor before continuing to interact with your brand new project. if you don't have one configured already, the ember atlas has some guides on how to set up various editors. installing the shared assets for todomvc projects installing shared assets, as we're about to do, isn't normally a required step for new projects, but it allows us to use existing shared css so we don't need to try to guess at what css i...
...r shared css files, so that they become part of our build without having to explicitly @import them into the app.css file (this would require url rewrites at build time and therefore be less efficient and more complicated to set up). in ember-cli-build.js, find the following code: let app = new emberapp(defaults, { // add options here }); add the following lines underneath it before saving the file: app.import('node_modules/todomvc-common/base.css'); app.import('node_modules/todomvc-app-css/index.css'); for more information on what ember-cli-build.js does, and for other ways in which you can customize your build / pipeline, the ember guides have a page on addons and dependencies. finally, find app.css, located at app/styles/app.css, and paste in the following...

React interactivity: Editing, filtering, conditional rendering - Learn web development
e={task.name} completed={task.completed} key={task.id} toggletaskcompleted={toggletaskcompleted} deletetask={deletetask} edittask={edittask} /> )); now open todo.js. we’re going to do some refactoring. a ui for editing in order to allow users to edit a task, we have to provide a user interface for them to do so. first, import usestate into the todo component like we did before with the app component, by updating the first import statement to this: import react, { usestate } from "react"; we'll now use this to set an isediting state, the default state of which should be false. add the following line just inside the top of your todo(props) { … } component definition: const [isediting, setediting] = usestate(false); next, we're going to rethink the <todo /> componen...
...condition to change what is rendered by the browser. to write a condition in jsx, we can use a ternary operator. in the case of our <todo /> component, our condition is "is this task being edited?" change the return statement inside todo() so that it reads like so: return <li classname="todo">{isediting ? editingtemplate : viewtemplate}</li>; your browser should render all your tasks just like before. to see the editing template, you will have to change the default isediting state from false to true in your code for now; we will look at making the edit button toggle this in the next section! toggling the <todo /> templates at long last, we are ready to make our final core feature interactive. to start with, we want to call setediting() with a value of true when a user presses the "edit" but...
...nter; once they submit the form, we need to use a callback prop to update our state with the new name of the task. we'll start by making a new hook for storing and setting the new name. still in todo.js, put the following underneath the existing hook: const [newname, setnewname] = usestate(''); next, create a handlechange() function that will set the new name; put this underneath the hooks but before the templates: function handlechange(e) { setnewname(e.target.value); } now we'll update our editingtemplate's <input /> field, setting a value attribute of newname, and binding our handlechange() function to its onchange event. update it as follows: <input id={props.id} classname="todo-text" type="text" value={newname} onchange={handlechange} /> finally, we need to create a funct...
...ttribute values change accordingly. however, our buttons still don't actually filter the todos in the ui! let's finish this off. filtering tasks in the ui right now, our tasklist constant in app() maps over the tasks state and returns a new <todo /> component for all of them. this is not what we want! a task should only render if it is included in the results of applying the selected filter. before we map over the tasks state, we should filter it (with array.prototype.filter()) to eliminate objects we don't want to render. update your tasklist like so: const tasklist = tasks .filter(filter_map[filter]) .map(task => ( <todo id={task.id} name={task.name} completed={task.completed} key={task.id} toggletaskcompleted={toggletaskcompleted} deletetask=...

Beginning our React todo list - Learn web development
prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. objective: to introduce our todo list case study, and get the basic app structure and styling in place. our app's user stories in software development, a user story is an actionable goal from the perspective of the user. defining user stories before we begin our work will help us focus our work. our app should fulfill the following stories: as a user, i can read a list of tasks. add a task using the mouse or keyboard. mark any task as completed, using the mouse or keyboard. delete any task, using the mouse or keyboard. edit any task, using the mouse or keyboard. view a specific subset of tasks: all tasks, only the active task, or on...
...defaultchecked will be "true" — a string literal. remember — this is actually javascript, not html! the aria-pressed attribute used in our earlier code snippet has a value of true because aria-pressed is not a true boolean attribute in the way checked is. ...
...rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-height: 1.25; display: block; position: relative; min-height: 44px; padding-left: 40px; clear: left; } .c-cb > label::before, .c-cb > input[type="checkbox"] { box-sizing: border-box; top: -2px; left: -2px; width: 44px; height: 44px; } .c-cb > input[type="checkbox"] { -webkit-font-smoothing: antialiased; cursor: pointer; position: absolute; z-index: 1; margin: 0; opacity: 0; } .c-cb > label { font-size: inherit; font-family: inherit; line-height: inherit; display: inline-block; margin-bot...
...px; height: 44px; } .c-cb > input[type="checkbox"] { -webkit-font-smoothing: antialiased; cursor: pointer; position: absolute; z-index: 1; margin: 0; opacity: 0; } .c-cb > label { font-size: inherit; font-family: inherit; line-height: inherit; display: inline-block; margin-bottom: 0; padding: 8px 15px 5px; cursor: pointer; touch-action: manipulation; } .c-cb > label::before { content: ""; position: absolute; border: 2px solid currentcolor; background: transparent; } .c-cb > input[type="checkbox"]:focus + label::before { border-width: 4px; outline: 3px dashed #228bec; } .c-cb > label::after { box-sizing: content-box; content: ""; position: absolute; top: 11px; left: 9px; width: 18px; height: 7px; transform: rotate(-45deg); border: solid;...

Starting our Svelte Todo list app - Learn web development
ill issue the following warning: (!) plugin svelte: a11y: <img> element should have an alt attribute src/components/todos.svelte 1: <h1>svelte to-do list</h1> 2: 3: <img height="32" width="88" src="https://udn.realityripple.com/samples/b0/98dase3c7d.png"> ^ created public/build/bundle.js in 220ms [2020-07-15 04:07:43] waiting for changes... moreover, our editor can display this warning even before calling the compiler: you can tell svelte to ignore this warning for the next block of markup with a comment beginning with svelte-ignore, like this: <!-- svelte-ignore a11y-missing-attribute --> <img height="32" width="88" src="https://udn.realityripple.com/samples/b0/98dase3c7d.png"> note: with vscode you can automatically add this ignore comment by clicking on the quick fix... link or p...
.... svelte aims to implement all of them in its compiler, and most of them have already been ported to svelte. on github you can see which accessibility checks are still missing. you can check the meaning of each rule by clicking on its link. styling our markup let's make the todo list look a little better. ...
...rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-height: 1.25; display: block; position: relative; min-height: 44px; padding-left: 40px; clear: left; } .c-cb > label::before, .c-cb > input[type="checkbox"] { box-sizing: border-box; top: -2px; left: -2px; width: 44px; height: 44px; } .c-cb > input[type="checkbox"] { -webkit-font-smoothing: antialiased; cursor: pointer; position: absolute; z-index: 1; margin: 0; opacity: 0; } .c-cb > label { font-size: inherit; font-family: inherit; line-height: inherit; display: inline-block; margin-bot...
...px; height: 44px; } .c-cb > input[type="checkbox"] { -webkit-font-smoothing: antialiased; cursor: pointer; position: absolute; z-index: 1; margin: 0; opacity: 0; } .c-cb > label { font-size: inherit; font-family: inherit; line-height: inherit; display: inline-block; margin-bottom: 0; padding: 8px 15px 5px; cursor: pointer; touch-action: manipulation; } .c-cb > label::before { content: ""; position: absolute; border: 2px solid currentcolor; background: transparent; } .c-cb > input[type="checkbox"]:focus + label::before { border-width: 4px; outline: 3px dashed #228bec; } .c-cb > label::after { box-sizing: content-box; content: ""; position: absolute; top: 11px; left: 9px; width: 18px; height: 7px; transform: rotate(-45deg); border: solid;...

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
pens to the nameel variable. to start with, add the following line at the beginning of the newtodo.svelte <script> section: import { onmount } from 'svelte' and these lines at the end of it: console.log('initializing:', nameel) onmount( () => { console.log('mounted:', nameel) }) now remove the if (autofocus) nameel.focus() line to avoid throwing the error we were seeing before. the app will now work again, and you'll see the following in your console: initializing: undefined mounted: <input id="todo-0" class="input input__lg" type="text" autocomplete="off"> as you can see, while the component is initializing nameel is undefined, which makes sense because the node input doesn't even exist yet. after the component has been mounted, svelte assigned a reference...
...uld also call the removeeventlistener() function when the node is destroyed. note: all this is just standard webapi functionality; nothing here is specific to svelte. we could achieve all this in our todo component whenever we add or remove the <input> from the dom, but we would have to be very careful to add the event listener after the node has been added to the dom, and remove the listener before the node is removed from the dom. in addition, our solution would not be very reusable. that's where svelte actions come into play. basically they let us run a function whenever an element has been added to the dom, and after removal from the dom. in our immediate use case, we will define a function called selectonfocus() that will receive a node as parameter. the function will add an event lis...
...from inside todo.svelte; add the following import statement just below the others: import { selectonfocus } from '../actions.js' and remove the selectonfocus() definition from todo.svelte — we no longer need it there. reusing our action to demonstrate our action's reusability, let's make use of it in newtodo.svelte. import selectonfocus() from actions.js in this file too, as before: import { selectonfocus } from '../actions.js' add the use:selectonfocus directive to the <input>, like this: <input bind:value={name} bind:this={nameel} use:selectonfocus type="text" id="todo-0" autocomplete="off" class="input input__lg" /> with a few lines of code we can add functionality to regular html elements, in a very reusable and declarative way. it just takes an import...
...instead: const focusoninit = (node) => node && typeof node.focus === 'function' && node.focus() and then in our markup we just need to add another use: directive: <input bind:value={name} use:selectonfocus use:focusoninit ... our onedit() function can now be much simpler: function onedit() { editing = true // enter editing mode } as a last example before we move on, let's go back to our todo.svelte component and give focus to the edit button after the user presses save or cancel. we could try just reusing our focusoninit action again, adding use:focusoninit to the edit button. but we'd be introducing a subtle bug. when you add a new todo, the focus will be put on the edit button of the recently added todo. that's because the focusoninit action i...

Focus management with Vue refs - Learn web development
ned". this seems weird. your button ref was defined when you activated the "edit" button, but now it’s not. what is going on? well, remember that when we change isediting to true, we no longer render the section of the component featuring the "edit" button. this means there's no element to bind the ref to, so it becomes undefined. you might now be thinking "hey, don’t we set isediting=false before we try to access the ref, so therefore shouldn't the v-if now be displaying the button?” this is where the virtual dom comes into play. because vue is trying to optimize and batch changes, it won't immediately update the dom when we set isediting to false. so when we call focusonedit(), the "edit" button has not been rendered yet. instead, we need to wait until after vue undergoes the next dom...
... is in a different component to our "edit" button, we can't just set focus inside the "edit" button’s click event handler. instead, we can use the fact that we remove and re-mount our todoitemeditform component whenever the "edit" button is clicked to handle this. so how does this work? well, vue components undergo a series of events, known as a lifecycle. this lifecycle spans from all the way before elements are created and added to the vdom (mounted), until they are removed from the vdom (destroyed). vue lets you run methods at various stages of this lifecycle using lifecycle methods. this can be useful for things like data fetching, where you may need to get your data before your component renders, or after a property changes. the list of lifecycle methods are below, in the order that the...
...re created and added to the vdom (mounted), until they are removed from the vdom (destroyed). vue lets you run methods at various stages of this lifecycle using lifecycle methods. this can be useful for things like data fetching, where you may need to get your data before your component renders, or after a property changes. the list of lifecycle methods are below, in the order that they fire. beforecreate() — runs before the instance of your component is created. data and events are not yet available. created() — runs after your component is initialized but before the component is added to the vdom. this is often where data fetching occurs. beforemount() — runs after your template is compiled, but before your component is rendered to the actual dom. mounted() — runs after your com...
...nt is created. data and events are not yet available. created() — runs after your component is initialized but before the component is added to the vdom. this is often where data fetching occurs. beforemount() — runs after your template is compiled, but before your component is rendered to the actual dom. mounted() — runs after your component is mounted to the dom. can access refs here. beforeupdate() — runs whenever data in your component changes, but before the changes are rendered to the dom. updated() — runs whenever data in your component has changed and after the changes are rendered to the dom. beforedestroy() — runs before a component is removed from the dom. destroyed() — runs after a component has been removed from the dom activated() — only used in components w...

Styling Vue components with CSS - Learn web development
avascript objects that manage the app's data and an html-based template syntax that maps to the underlying dom structure. for installation, and to use some of the more advanced features of vue (like single file components or render functions), you'll need a terminal with node + npm installed. objective: to learn about styling vue components. styling vue components with css before we move on to add more advanced features to our app, we should add some basic css to make it look better. vue has three common approaches to styling apps: external css files. global styles in single file components (.vue files). component-scoped styles in single file components. to help familiarize you with each one, we'll use a combination of all three to give our app a nicer look and fee...
...e src/assets directory. files in this folder get processed by webpack. this means we can use css pre-processors (like scss) or post-processors (like postcss). while this tutorial will not be using such tools, it's good to know that when including such code in the assets folder it will be processed automatically. ...
...n and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ next, in your src/main.js file, import the reset.css file like so: import './assets/reset.css'; this will cause the file to get picked up during the build step and automatically added to our site. the reset styles should be applied to the app now. the images below show the look of the app before and after the reset is applied. before: after: noticeable changes include the removal of the list bullets, background color changes, and changes to the base button and input styles. adding global styles to single file components now that we've reset our css to be uniform across browsers, we need to customize the styles a bit more. there are some styles that we want to apply across componen...
...ed; cursor: pointer; position: absolute; z-index: 1; top: -2px; left: -2px; width: 44px; height: 44px; margin: 0; opacity: 0; } .custom-checkbox > .checkbox-label { font-size: inherit; font-family: inherit; line-height: inherit; display: inline-block; margin-bottom: 0; padding: 8px 15px 5px; cursor: pointer; touch-action: manipulation; } .custom-checkbox > label::before { content: ""; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 40px; height: 40px; border: 2px solid currentcolor; background: transparent; } .custom-checkbox > input[type="checkbox"]:focus + label::before { border-width: 4px; outline: 3px dashed #228bec; } .custom-checkbox > label::after { box-sizing: content-box; content: ""; position: absolute; ...

Handling common accessibility problems - Learn web development
ncrementally. non-native complicated form controls are problematic because they tend to involve a lot of nested <div>s, and the browser does not know what to do with them by default. if you are inventing them yourself, you need to make sure that they are keyboard accessible; if you are using some kind of third-party framework, carefully review the options available to see how accessible they are before diving in. bootstrap looks to be fairly good for accessibility, for example, although making bootstrap a little more accessible by rhiana heath explores some of its issues (mainly related to color contrast), and looks at some solutions. regularly updated dynamic content can be a problem because screenreader users might miss it, especially if it updates unexpectedly. if you have a single-page app...
...t screenreader usage and what works best for screenreaders. also see screen reader user survey #6 results for some interesting screenreader usage statistics. voiceover voiceover (vo) comes free with your mac/iphone/ipad, so it's useful for testing on desktop/mobile if you use apple products. we'll be testing it on mac os x on a macbook pro. to turn it on, press cmd + f5. if you've not used vo before, you will be given a welcome screen where you can choose to start vo or not, and run through a rather useful tutorial to learn how to use it. to turn it off again, press cmd + f5 again. note: you should go through the tutorial at least once — it is a really useful way to learn vo. when vo is on, the display will look mostly the same, but you'll see a black box at the bottom left of the scre...
... regularly gives you reminders of what commands to use in certain places. have a play with vo now; you can then go on to play with some of our examples in the screenreader testing section. nvda nvda is windows-only, and you'll need to install it. download it from nvaccess.org. you can choose whether to make a donation or download it for free; you'll also need to give them your e-mail address before you can download it. once downloaded, install it — you double click the installer, accept the license and follow the prompts. to start nvda, double click on the program file/shortcut, or use the keyboard shortcut ctrl + alt + n. you'll see the nvda welcome dialog when you start it. here you can choose from a couple of options, then press the ok button to get going. nvda will now be active o...
...r" — this is a key that you need to press in addition to the actual nvda keyboard shortcuts to get them to work. using a modifier like this is common with screenreaders, to enable them to keep their commands from clashing with other commands. in the case of nvda, the modifier can either be insert (the default), or capslock (can be chosen by checking the first checkbox in the nvda welcome dialog before pressing ok). note: nvda is more subtle than voiceover in terms of how it highlights where it is and what it is doing. when you are scrolling through headings, lists, etc., items you are selected on will generally be highlighted with a subtle outline, but this is not always the case for all things. if you get completely lost, you can press ctrl + f5 to refresh the current page and begin from th...

Introduction to automated testing - Learn web development
ons. once loaded, you can perform live, interactive cross-browser testing with a website. if you notice an issue with the ui, then you can share it with your colleagues by capturing a screenshot of your vm with the screenshot button. you can also record a video of your test session by hitting the recorder button in your test session. with the in-built image editor, highlight your screenshot before you push it to your colleagues. using the mark as bug button you can push bugs to numerous third-party tools such as jira, asana, trello, and more. that way you can log a bug directly from your test session on lambdatest to your project management instance. check out all the third-party lambdatest integrations. note: all the videos and images captured inside a test session are captured i...
... then pass the test results back to sauce labs. it has several clients available to allow you to make calls to the api using your favourite environment, be it php, java, node.js, etc. let's have a brief look at how we'd access the api using node.js and node-saucelabs. first, set up a new npm project to test this out, as detailed in setting up node and npm. use a different directory name than before, like sauce-test for example. install the node sauce labs wrapper using the following command: npm install saucelabs create a new file inside your project root called call_sauce.js. give it the following contents: const saucelabs = require('saucelabs'); let myaccount = new saucelabs({ username: "your-sauce-username", password: "your-sauce-api-key" }); myaccount.getaccountdetails(fun...
...ally retrieve details of your account plan, sessions, builds, etc. it has several clients available to allow you to make calls to the api using your favourite environment, be it php, java, node.js, etc. let's have a brief look at how we'd access the api using node.js. first, set up a new npm project to test this out, as detailed in setting up node and npm. use a different directory name than before, like bstack-test for example. create a new file inside your project root called call_bstack.js. give it the following contents: const request = require("request"); let bsuser = "browserstack_username"; let bskey = "browserstack_access_key"; let baseurl = "https://" + bsuser + ":" + bskey + "@www.browserstack.com/automate/"; function getplandetails(){ request({uri: baseurl + "plan.json"}...
...recordable by manual testing alone. testingbot has several api clients you can use to interact with the api, including clients for nodejs, python, ruby, java and php. below is an example on how to interact with the testingbot api with the nodejs client testingbot-api. first, set up a new npm project to test this out, as detailed in setting up node and npm. use a different directory name than before, like tb-test for example. install the node testingbot wrapper using the following command: npm install testingbot-api create a new file inside your project root called tb.js. give it the following contents: const testingbot = require('testingbot-api'); let tb = new testingbot({ api_key: "your-tb-key", api_secret: "your-tb-secret" }); tb.gettests(function (err, tests) { console.lo...

Implementing feature detection - Learn web development
rentposition(function(position) { // show the location on a map, perhaps using the google maps api }); } else { // give the user a choice of static maps instead perhaps } it is probably better to use an established feature detection library however, rather than writing your own all the time. modernizr is the industry standard for feature detection tests, and we'll look at that later on. before we move on, we'd like to say one thing upfront — don't confuse feature detection with browser sniffing (detecting what specific browser is accessing the site) — this is a terrible practice that should be discouraged at all costs. see using bad browser sniffing code for more details. writing your own feature detection tests in this section, we'll look at implementing your own feature detecti...
... look at the different effects these two files have by manually changing the css file referred to by the second <link> element, but let's instead implement some javascript to automatically swap them as needed. first, remove the contents of the second <link> element's href attribute. we will fill this in dynamically later on. next, add a <script></script> element at the bottom of your body (just before the closing </body> tag). give it the following contents: const conditional = document.queryselector('.conditional'); const testelem = document.createelement('div'); if (testelem.style.flex !== undefined && testelem.style.flexflow !== undefined) { conditional.setattribute('href', 'flex-layout.css'); } else { conditional.setattribute('href', 'float-layout.css'); } here we are grabbing a...
... as modernizr-css.html and modernizr-css.css. update your <link> element in your html so it points to the correct css file (you should also update your <title> element to something more suitable!): <link href="modernizr-css.css" rel="stylesheet"> above this <link> element, add a <script> element to apply the modernizr library to the page, as shown below. this needs to be applied to the page before any css (or javascript) that might make use of it. <script src="modernizr-custom.js"></script> now edit your opening <html> tag, so that it looks like this: <html class="no-js"> at this point, try loading your page, and you'll get an idea of how modernizr works for css features. if you look at the dom inspector of your browser's developer tools, you'll see that modernizr has updated yo...
...s attaching the google maps api to the page. next, fill in the your-api-key placeholder text in the second <script> element (as it is now) with a valid google maps api key. to get a key, sign in to a google account, go to the get a key/authentication page, then click the blue get a key button and follow the instructions. ...

Introduction to cross browser testing - Learn web development
ssible of being able to use your content. this is one of the great challenges of web development. note: we'll cover defensive coding later in the module too. why do cross browser issues occur? there are many different reasons why cross browser issues occur, and note that here we are talking about issues where things behave different across different browsers / devices / browsing preferences. before you even get to cross browser issues, you should have already fixed out bugs in your code (see debugging html, debugging css, and what went wrong? troubleshooting javascript from previous topics to refresh your memory if needed). cross browser issues commonly occur because: sometimes browsers have bugs, or implement features differently. this situation is a lot less bad than it used to be; ba...
...still creep through sometimes. some browsers may have different levels of support for technology features than others. this is inevitable when you are dealing with bleeding edge features that browsers are just getting round to implementing, or if you have to support really old browsers that are no longer being developed, which may have been frozen (i.e. no more new work done on them) a long time before a new feature was even invented. as an example, if you want to use cutting edge javascript features in your site, they might not work in older browsers. if you need to support older browsers, you might have to not use those, or convert your code to old fashioned syntax using some kind of cross-compiler where needed. some devices may have constraints that cause a web site to run slowly, or displa...
...ble experience on ie 8 and 9, and be accessible with wcag aa compliance. now you know your target testing platforms, you should go back and review the required featureset and what technologies you are going to use. for example, if the e-commerce site owner wants a webgl-powered 3d tour of each product built into the product pages, they will need to accept that this just won't work in ie versions before 11. you'd have to agree to provide a version of the site without this feature to users of older ie versions. you should compile a list of the potential problem areas. note: you can find browser support information for technologies by looking up the different features on mdn — the site you're on! you should also consult caniuse.com, for some further useful details. once you've agreed on the...
...en isn't going to give the same visual experience as a 4" mobile screen, regardless of how you program your site. accept that your site just isn't going to work in some older browsers, and move on. this is ok, provided your client/userbase is ok with it. normally your development will involve a combination of the above three approaches. the most important thing is that you test each small part before committing it — don't leave all the testing till the end! testing/discovery after each implementation phase, you will need to test the new functionality. to start with, you should make sure there are no general issues with your code that are stopping your feature from working: test it in a couple of stable browsers on your system, like firefox, safari, chrome, or ie/edge. do some lo-fi ac...

Client-side tooling overview - Learn web development
a single project. equally, a single configuration file for a tool like webpack can be hundreds of lines long, most of which are magical incantations that seem to do the job but which only a master engineer will fully understand! from time to time, even the most experienced of web developers get stuck on a tooling problem; it is possible to waste hours attempting to get a tooling pipeline working before even touching a single line of application code. if you have found yourself struggling in the past, then don’t worry — you are not alone. in these articles, we won’t answer every question about web tooling, but we will provide you with a useful starting point of understanding the fundamentals, which you can then build from. as with any complex topic, it is good to start small, and graduall...
...a code formatter, which we’ll make use of later on in the module. bundlers/packagers these are tools that get your code ready for production, for example by “tree-shaking” to make sure only the parts of your code libraries that you are actually using are put into your final production code, or "minifying" to remove all the whitespace in your production code, making it as small as possible before it is uploaded to a server. parcel is a particularly clever tool that fits into this category — it can do the above tasks, but also helps to package assets like html, css, and image files into convenient bundles that you can then go on to deploy, and also adds dependencies for you automatically whenever you try to use them. it can even handle some code transformation duties for you. webpack i...
...ing frameworks, auditing tools, and more. this stage of the development process is one that you want the least amount of active interaction with so that once it is configured, it runs mostly automatically, only popping up to say hello if something has gone wrong. testing tools these generally take the form of a tool that will automatically run tests against your code to make sure it is correct before you go any further (for example, when you attempt to push changes to a github repo). this can including linting, but also more sophisticated procedures like unit tests, where you run part of your code, making sure they behave as they should. frameworks for writing tests include jest, mocha, and jasmine. automated test running and notification systems include travis ci, jenkins, circle ci, and...
... you aren’t already in the web community, it is hard to find out exactly which ones to go for! this is one reason we wrote this series of articles, to hopefully provide that first step that is hard to find otherwise. you’ll probably need a combination of the following things: experienced teachers, mentors, fellow students, or colleagues that have some experience, have solved such problems before, and can give advice. a useful specific place to search. general web searches for front-end developer tools are generally useless unless you already know the name of the tool you are searching for. if you are using the npm package manager to manage your dependencies for example, it is a good idea to go to the npm homepage and search for the type of tool you are looking for, for example try...

Creating Sandboxed HTTP Connections
ice (nsiobserverservice) is used to send general notifications, including the two cookie ones. the addobserver method is used to add an observer for a certain topic and takes in three agruments: an object than implements nsiobserver the topic to listen for. for cookies, the two topics are: http-on-modify-request - happens after the cookie data has been loaded into the request, but before the request is sent. http-on-examine-response - happens after the response is received, but before the cookies are processed whether to hold a weak reference to the observer argument. use false. in order to avoid memory leaks, the observer needs to be removed at one point. the removeobserver method takes in the listener object and the topic and removes it from the notification l...
... new value is appened, otherwise the old value is overwritten. getresponseheader(aheader) - returns the response header value for the requested header. setresponseheader(aheader, avalue, amerge) - sets the response header's value. if amerge is true, the new value is appened, otherwise the old value is overwritten. ...
... true, the new value is appened, otherwise the old value is overwritten. these methods provide all the required functionality needed to modify cookies before they are processed/sent, allowing for sandboxed cookie connections that don't affect the user's cookies. http referrer if the http request needs to have a referrer set, two additional steps are needed after the nsichannel is created, but before it is opened. first, a nsiuri needs to be generated for the referrer url. ...
...ds provide all the required functionality needed to modify cookies before they are processed/sent, allowing for sandboxed cookie connections that don't affect the user's cookies. http referrer if the http request needs to have a referrer set, two additional steps are needed after the nsichannel is created, but before it is opened. first, a nsiuri needs to be generated for the referrer url. ...

Old Thunderbird build
d that you only use options that you fully understand. for example, to create a debug build instead of a release build, that file would contain: ac_add_options --enable-debug for more on configuration options, see the page configuring build options. note that if you use an moz_objdir it cannot be a sibling folder to your source directory. use an absolute path to be sure! building thunderbird before you start, make sure that the version you checked out is not busted. for hg tip, you should see green bs on https://treeherder.mozilla.org/#/jobs?repo=comm-central to start the build, cd into the comm-central subdirectory, and run: ./mozilla/mach build mach is our command-line tool to streamline common developer tasks. see the mach article for more. building can take a significant amount of ...
...tion listed under running below. building thunderbird and lightning if you've set up your build environment as above, then all you need to do is: echo 'ac_add_options --enable-calendar' >> mozconfig in the comm-central directory, or just add the ac_add_options --enable-calendar line to your mozconfig with your favorite editor. then just re-run the mach command above (you can do the addition before running mach for the first time). running to run your build, you can use ./mozilla/mach run there are various command line parameters you can add, e.g. to specify a profile. various temporary files, libraries, and the thunderbird executable will be found in your object directory (under comm-central/), which is prefixed with obj-. the exact name depends on your system and os. for example, a m...
...able in particular, and its dependencies, are located under the dist/bin folder under the object directory. to run the executable from your comm-central working directory: windows: obj-.../dist/bin/thunderbird.exe linux: obj-.../dist/bin/thunderbird os x: obj-.../dist/daily.app/contents/macos/thunderbird how to update and build again in your comm-central directory, run the same command as before: python client.py checkout then just re-run the mach command above. this will only recompile files that changed, but it's still a long haul. rebuilding to build after making changes, run ./mozilla/mach build again. this will only rebuild what is necessary for these changes. it is also possible to rebuild specifically. if you changed c or c++ files, run: ./mozilla/mach build binaries i...
...tual error is. check if your mozilla/ is a symlink. a symlink there is not supported. check for @topsrcdir@ or relative paths in your mozconfig. those have caused several problems historically and tend to be poorly tested when the build system changes. if on windows you get link errors like "lnk1102: out of memory" or "lnk1318: unexpected pdb error; ok (0)", try deleting the largest .pdb files before rushing out the door to buy more ram. clobbering (see below) will also remove those files. try with a clean obj-dir. you can clean out previous build artefacts using ./mozilla/mach clobber references general build documentation comm-central using the mozilla symbol server ...

Eclipse CDT Manual Setup
ring indexing, and so on.) it's recommended that you have a separate workspace containing only a single project for each mozilla source tree [rational], and that you choose a directory outside the mozilla source. something like $home/eclipse-workspaces/mozilla-tree-1, for example. after selecting an appropriate directory, click ok, then close the "welcome" tab when the main eclipse window opens. before you proceed any further, check that your changes to eclipse's memory limits have taken effect and are present in eclipse/help > about eclipse > installation details > configuration. to avoid confusion in this and the following sections, note that "workspace preferences" and "project properties" are different things (we'll get to the details below). whenever you create a new workspace for a mozi...
...tion details > configuration. to avoid confusion in this and the following sections, note that "workspace preferences" and "project properties" are different things (we'll get to the details below). whenever you create a new workspace for a mozilla source tree, you should be sure to turn off the following two settings in the workspace preferences (window > preferences, or eclipse > preferences) before creating a project in that workspace: in "general > workspace", disable "build automatically" in "c/c++ > indexer", disable "automatically update the index" turning off automatic indexing prevents the cpu intensive indexer from running at various stages during the steps below before we're ready. select "general > content types", expand "text > c source file > c++ source file", click "add" ...
...ing a list of all the files in the source tree). click on the little green button beside this message to open the "progress" tab, and keep an eye on the "refreshing workspace" item as you continue with the steps below. (if an "indexing" item starts after the "refreshing the workspace" item has finished, click the little red box beside that item to cancel it, since we want to configure the project before the indexer runs.) initial project properties so that the indexer will run faster and give better results, and so that eclipse doesn't give results for irrelevant files, you should add some resource filters to have eclipse ignore certain non-source files and directories. note, you must not make eclipse ignore your (main) object directory. that object directory is needed to resolve include paths...
...ot selected. highlight (select) "cdt gcc build output parser", then in the "language settings provider options" that appear below, make sure that "share setting entries between projects (global provider)" is not ticked. if the main object directory for your source tree is a fennec build: in the "cdt gcc build output parser", change the compiler command pattern to (.*gcc)|(.*[gc]\+\+)|(clang) (before this change it should have been "(gcc)|([gc]\+\+)|(clang)"). this pattern is what cdt uses to identify compiler commands when parsing the build output. by default, it recognizes commands of the form "gcc", "g++", "c++", and "clang". this is fine for a desktop build, where the commands are in fact "gcc" and "g++". for fennec builds, however, most of the commands are something like "arm-linux-andro...

Experimental features in Firefox
version of the firefox browser, firefox nightly, every day. these nightly builds of firefox typically include experimental or partially-implemented features, including those for proposed or cutting-edge web platform standards. this page lists features that are in nightly versions of firefox along with information on how to activate them, if necessary. you can test your web sites and applications before these features get released and ensure everything will still work with the latest web technology capabilities. to test these experimental features, you need to download firefox nightly or firefox developer edition. which you need is described alongside each feature's description below. editor's note: when adding features to these tables, please try to include a link to the relevant bug or bugs...
... the user's device or computer. the specification is still a work-in-progress. see bug 1602129 for our progress on this api. release channel version added enabled by default? nightly 73 no developer edition 73 no beta 73 no release 73 no preference name dom.webgpu.enabled html dom api global event: beforeinput the global beforeinput event is sent to an <input> element—or any element whose contenteditable attribute is enabled—immediately before the element's value changes. release channel version added enabled by default? nightly 74 no developer edition 74 no beta 74 no release 74 no preference name dom...
...see bug 934425 for more details. ...
... version added enabled by default? nightly 77 yes developer edition 77 no beta 77 no release 77 no preference name network.ftp.enabled developer tools mozilla's developer tools are constantly evolving. we experiment with new ideas, add new features, and test them on the nightly and developer edition channels before letting them go through to beta and release. the features below are the current crop of experimental developer tool features. color scheme simulation adds an option to simulate different color schemes allowing to test @prefers-color-scheme media queries. using this media query lets your style sheet specify whether it prefers a light or dark user interface. this feature lets you test your code w...

DeferredTask.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/deferredtask.jsm"); use this, for instance, if you write data to a file and you expect that you may have to rewrite data very soon afterwards. ...
...lves when the new execution terminates. if the task is not running and the timer is not armed, the method returns a resolved promise. promise finalize(); example firefox 28 note this section describes about deferredtask.jsm in firefox 28.0 or higher. set up a function or an asynchronous task whose execution can be triggered after a defined delay. multiple attempts to run the task before the delay has passed are coalesced. the task cannot be re-entered while running, but can be executed again after a previous run finished. a common use case occurs when a data structure should be saved into a file every time the data changes, using asynchronous calls, and multiple changes to the data may happen within a short time: let savedeferredtask = new deferredtask(function* () { yield o...
...n be disarmed to reset the delay, or just to cancel execution: savedeferredtask.disarm(); savedeferredtask.arm(); // the task will be executed in 2 seconds from now. when the internal timer fires and the execution of the task starts, the task cannot be canceled anymore. it is, however, possible to arm the timer again during the execution of the task, in which case the task will need to finish before the timer is started again, thus guaranteeing a time of inactivity between executions that is at least equal to the provided delay. the "finalize" method can be used to ensure that the task terminates properly. the promise it returns is resolved only after the last execution of the task is finished. to guarantee that the task is executed for the last time, the method prevents any attempt to arm ...
...at this point, then one last execution from start to finish will happen again, immediately after the current execution terminates. if the timer is not armed, the "finalize" method only ensures that any running task terminates. ...

Localization sign-off reviews
qa measure for maintaining a localization from release-to-release. only evaluates new l10n work. this is done by generating a diff between the new release revision being considered and the previously approved release revision. focuses on technical accuracy and completion of l10n work, not translation quality. evaluates new release revisions, not entire l10n repos. does not need to be approved before revision merge between release channels, although it is recommended. sign-off review criteria since the scope of each qa review process varies, the criteria used to evaluate a localizer's work also varies. in principle, they share basic elements, but sign-off reviews are only for evaluating the changes between your latest approved revision and the new revision you've submitted for release approv...
...ng your localization's files. newly translated strings that shouldn't have been translated self-explanatory enough, right? access key changes we ensure that when access keys are changed that they are consistent with the keyboard layout for that particular locale and not blended between two or more distinct layouts. how it all works a large part of the review process takes place before you even submit your request for a sign-off review. to put it simply, when we receive your request, we expect that you have spent time testing your work and making sure all strings have been localized and that your changes are relatively functional. your review request symbolically represents that you have worked on your localization, tested it successfully, and found it to represent the best of ...
...it your request for a sign-off review. to put it simply, when we receive your request, we expect that you have spent time testing your work and making sure all strings have been localized and that your changes are relatively functional. your review request symbolically represents that you have worked on your localization, tested it successfully, and found it to represent the best of your work. so before you request your sign-off review, be sure that it is as ready as it can be. there is a specific process to follow in bugzilla for requesting these reviews: file a bug requesting the review. attach your files to the bug. once attached, open the attachment details. in the attachment details, select the ? from the dropdown menu next to the appropriate approval flags (see image). this will displa...
...ecific bugzilla bugs. as your work is approved, you'll see a green circle in the farthest column to the right. if bugs are discovered, your technical review/sign-off is rejected and the bugs are filed in bugzilla. once filed, they appear on your dashboard for you to fix. once they are fixed, push your fix to your repo, attach it to the corresponding bug using the same mercurial revision number as before, and then request another review. the process is then repeated until the bug is fixed to satisfaction. the diff generated for sign-off reviews the image to the right illustrates the revisions diff between the current release revision and your newly proposed release revision. this is generated from the revision attachment in your bugzilla bug and evaluated to verify the technical accuracy of your...

Localization technical reviews
gs in the file toolkit/chrome/global/intl.properties. for more info about utf-7 in firefox, see bug 441876. ...
...to put it simply, when we receive your request, we expect that you have spent time testing your work and making sure all strings have been localized and that your language pack is relatively functional. ...
...r request for a technical review. to put it simply, when we receive your request, we expect that you have spent time testing your work and making sure all strings have been localized and that your language pack is relatively functional. your review request symbolically represents that you have worked on your localization, tested it successfully, and found it to represent the best of your work. so before you request your technical review, be sure that it is as ready as it can be. there is a specific process to follow in bugzilla for requesting these reviews: file a bug requesting the review. attach your files to the bug. once attached, open the attachment details. in the attachment details, select the ? from the dropdown menu next to the review flag. this will display a text box to assign t...
...ays: within the bug and through your team's dashboard. if your work is approved, you'll see a + review flag next to your attached revision in your request bug. if bugs are discovered, your technical review is rejected (- review flag) and the bugs are filed in bugzilla. once they are fixed, push your fix to your repo, attach it to the corresponding bug using the same mercurial revision number as before, and then request another review. the process is then repeated until the bug is fixed to satisfaction. these bugs are also pulled into the dashboards, which track your revision's progress. in order to ultimately have your revision included as an official build, your dashboards must be at 100% green. to the right, you'll see the current dashboard page for a german localization. revisions are appr...

DMD
dmd report once you have it activated. note that stack information you get will likely be less detailed, due to being unable to symbolicate. you will be able to get function names, but not line numbers. desktop firefox (linux) build build firefox with these options: ac_add_options --enable-dmd if building via try server, modify browser/config/mozconfigs/linux64/common-opt or a similar file before pushing. launch use mach run --dmd; use --mode to choose the mode. add --debug to run under gdb. trigger there are three ways to trigger a dmd snapshot. visit about:memory and click the dmd button (depending on how old your build is, it might be labelled "save" or "analyze reports" or "dmd"). the button won't be present in non-dmd builds, and will be grayed out in dmd builds if dmd isn't e...
... or more seconds and may make firefox freeze temporarily. if you see the "opened" line, it tells you where the file was saved. it's always in a temp directory, and the filenames are always of the form dmd-<pid>. desktop firefox (mac) build build with these options: ac_add_options --enable-dmd if building via try server, modify browser/config/mozconfigs/macosx64/common-opt or a similar file before pushing. launch use mach run --dmd; use --mode to choose the mode. add --debug to run under lldb. trigger follow the trigger instructions for linux. note that on mac this step can take 30+ seconds. desktop firefox (windows) build build with these options: ac_add_options --enable-dmd if building via try server, modify browser/config/mozconfigs/win32/common-opt. also, add this line to bui...
...md prep in order to prepare your device for running fennec with dmd enabled, you will need to do a few things. first, you will need to push the libdmd.so library to the device so that it can by dynamically loaded by fennec. you can do this by running: adb push $objdir/dist/bin/libdmd.so /sdcard/ second, you will need to make an executable wrapper for fennec which sets an environment variable before launching it. (if you are familiar with the recommended "--es env0" method for setting environment variables when launching fennec, note that you cannot use this method here because those are processed too late in the startup process. if you are not familiar with that method, you can ignore this parenthetical note.) first make the executable wrapper on your host machine using the editor of your c...
... from other source, adjust the app identifier as necessary. adb shell su # you need root access for the setprop command to take effect setprop wrap.org.mozilla.fennec_$username "/data/local/tmp/dmd_fennec" once this is set up, starting the org.mozilla.fennec_$username app will use the wrapper script. launch launch fennec either by tapping on the icon as usual, or from the command line (as before, be sure to replace org.mozilla.fennec_$username with the app identifier as appropriate). adb shell am start -n org.mozilla.fennec_$username/.app trigger use the existing memory-report dumping hook: adb shell am broadcast -a org.mozilla.gecko.memory_dump in logcat, you should see output similar to this: i/dmd (20731): opened /storage/emulated/0/download/memory-reports/dmd-default-2073...

pkfnc.html
returns the function returns one of these values: if successful, a pointer to a certificate structure. if unsuccessful, null. description a nickname is an alias for a certificate subject. there may be multiple certificates with the same subject, and hence the same nickname. this function will return the newest certificate that matches the subject, based on the notbefore / notafter fields of the certificate. when you are finished with the certificate structure returned by pk11_findcertfromnickname, you must free it by calling cert_destroycertificate. the pk11_findcertfromnickname function calls the password callback function set with pk11_setpasswordfunc and passes it the pointer specified by the wincx parameter. pk11_findkeybyanycert finds the private key ...
...owing parameter: slot a pointer to a slot info structure. returns the function returns one of these values: if successful, a pointer to the name of the slot (a string). if unsuccessful, null. description if the slot is freed, the string with the slot name may also be freed. if you want to preserve it, copy the string before freeing the slot. do not try to free the string yourself. pk11_gettokenname gets the name of the token. syntax #include <pk11func.h> char *pk11_gettokenname(pk11slotinfo *slot); parameters this function has the following parameter: slot a pointer to a slot info structure. returns the function returns one of these valu...
...ing parameter: slot a pointer to a slot info structure. returns the function returns one of these values: if successful, a pointer to the name of the token (a string). if unsuccessful, null. description if the slot is freed, the string with the token name may also be freed. if you want to preserve it, copy the string before freeing the slot. do not try to free the string yourself. pk11_ishw finds out whether a slot is implemented in hardware or software. syntax #include <pk11func.h> #include <prtypes.h> prbool pk11_ishw(pk11slotinfo *slot); parameters this function has the following parameter: slot a pointer to a slot info structure. retur...
...etry argument is pr_true, indicating that the password was tried and is wrong, the callback function should return null to indicate that it is unsuccessful, rather than attempting to return the same password again. failing to terminate when the retry argument is pr_true can result in an endless loop. several functions in the nss libraries use the password callback function to obtain the password before performing operations that involve the protected information. the third parameter to the password callback function is application-defined and can be used for any purpose. for example, communicator uses the parameter to pass information about which window is associated with the modal dialog box requesting the password from the user. when nss libraries call the password callback function, the valu...

sslintro.html
ed in this document, the ssl reference. other apis that may be exposed in the header files are not supported for application use. initialization initialization includes setting up configuration files, setting global defaults, and setting up callback functions. functions used in the initialization part of an application can include the following: pr_init. initializes nspr. must be called before any other nss functions. pk11_setpasswordfunc. sets the global callback function to obtain passwords for pkcs #11 modules. required. nss_init. sets up configuration files and performs other tasks required to run network security services. nss_init is not idempotent, so call it only once. required. ssl_optionsetdefault. changes default values for all subsequently opened sockets as long as...
...called once for each default value that needs to be changed. optional. nss_setdomesticpolicy, nss_setexportpolicy, nss_setfrancepolicy, or ssl_cipherpolicyset. these functions tell the library which cipher suites are permitted by policy (for example, to comply with export restrictions). cipher suites disabled by policy cannot be enabled by user preference. one of these functions must be called before any cryptographic operations can be performed with nss. ssl_cipherprefsetdefault. enables all ciphers chosen by user preference. optional. initializing caches ssl peers frequently reconnect after a relatively short time has passed. to avoid the overhead of repeating the full ssl handshake in situations like this, the ssl protocol supports the use of a session cache, which retains informat...
...r_enumeratehostent pr_connect pr_getconnectstatus when an application imports a socket into ssl after the tcp connection on that socket has already been established, it must call ssl_resethandshake to determine whether ssl should behave like an ssl client or an ssl server. note that this step would not be necessary if the socket weren't already connected. for an ssl socket that is configured before it is connected, ssl figures this out when the application calls pr_connect or pr_accept. if the socket is already connected before ssl gets involved, you must provide this extra hint. functions that can be used by both clients and servers during communication include the following: pr_send or pr_write pr_read or pr_recv pr_geterror pr_getpeername pr_sleep pr_malloc pr_free pr_po...
...r example, http) determines which end has responsibility to talk first. the end that has to talk first should call pr_send or pr_write, and the other end should call pr_read or pr_recv. use ssl_forcehandshake when the socket has been prepared for a handshake but neither end has anything to say immediately. this occurs, for example, when an https server has received a request and determines that before it can answer the request, it needs to request an authentication certificate from the client. at the http protocol level, nothing more is being said (that is, no http request or response is being sent), so the server first uses ssl_rehandshake to begin a new handshake and then call ssl_forcehandshake to drive the handshake to completion. functions used by callbacks an ssl application typical...

Hacking Tips
hared.h, it is composed of the return address, a descriptor (a small value), the jsfunction (if it is even) or a jsscript (if the it is odd, remove it to dereference the pointer) and the frame ends with the number of actual arguments (a small value too). if you want to know at which lir the code is failing at, the js::ion::codegenerator::generatebody function can be intrumented to dump the lir id before each instruction. for (; iter != current->end(); iter++) { ionspew(ionspew_codegen, "instruction %s", iter->opname()); […] masm.store16(imm32(iter->id()), address(stackpointer, -8)); // added if (!iter->accept(this)) return false; […] } this modification will add an instruction which abuse the stack pointer to store an immediate value (the lir id) to a location...
...1 passes. /* open your png viewer with the result of iongraph */ this gdb instrumentation is supposed to work with debug builds, or with optimized build compiled with --enable-jitspew configure flag. external programs such as iongraph, dot, and your png viewer are search into the path, otherwise custom one can either be configured with environment variables (gdb_iongraph, gdb_dot, gdb_pngviewer) before starting gdb, or with gdb parameters (set iongraph-bin <path>, set dot-bin <path>, set pngviewer-bin <path>) within gdb. enabling gdb instrumentation may require launching a js shell executable that shares a directory with a file name "js-gdb.py". if js/src/js does not provide the "iongraph" command, try js/src/shell/js. gdb may complain that ~/.gdbinit requires modification to authorize user s...
...d you want to build a 32-bits browser, it might be hard to find the relevant 32-bits dependencies. you can use padenot's scripts which will magically setup a chrooted 32-bits environment and do all the things (c) for you (you just need to modify the mozconfig file). using rr on a test get the command line for your test run using -s: ./jit_test.py -s $js_shell saved-stacks/async.js insert 'rr' before the shell invocation: rr $js_shell -f $js_src/jit-test/lib/prolog.js --js-cache $js_src/jit-test/.js-cache -e "const platform='linux2'; const libdir='$js_src/jit-test/lib/'; const scriptdir='$js_src/jit-test/tests/saved-stacks/'" -f $js_src/jit-test/tests/saved-stacks/async.js (note that the above is an example; simply setting js_shell and js_src will not work). or if this is an intermittent, r...
...o measure with the datenow() function call which returns the number of milliseconds, with a decimal part for sub-milliseconds. js> datenow() - datenow() -0.0009765625 benchmarking with sub-milliseconds (browser) in a simillar way as datenow() in the js shell, you can use performance.now() in the javascript code of a page. dumping the javascript heap from the shell, you can call the dumpheap before firefox function to dump out all gc things (reachable and unreachable) that are present in the heap. by default the function writes to stdout, but a filename can be specified as an argument. example output might look as follows: 0x1234abcd b global object ========== # zone 0x56789123 # compartment http://gmail.com [in zone 0x56789123] # compartment http://gmail.com/iframe [in zone 0x56789123] ...

Garbage collection
e to do a bit of marking work, then let the mutator (javascript program) run a bit, then do another bit of marking work. thus, instead of one long pause for marking, the gc does a series of short pauses. the pauses can be set to be 10ms or less. there is always a possibility that a long pause will be required. if the allocation rate is high during incremental gc, the engine may run out of memory before finishing the incremental gc. if so, the engine must immediately restart a full, non-incremental gc in order to reclaim some memory and continue execution. incremental write barrier the problem that requires a write barrier incremental gc requires a write barrier for correctness. todo decent diagrams the basic problem is as follows (see dictionary for color terms). say object a is black and ...
... the mutator resumes. if the mutator stores b into a, so that a contains a pointer to b, and deletes all existing pointers to b, then: b is live, because a is black and contains a pointer to b. b will not be marked, because b is only reachable through a and we are all done with a, because a is black. thus, b is live but will be collected. the write barrier is a piece of code that runs just before a pointer store occurs and records just enough information to make sure that live objects don't get collected. the spidermonkey incremental write barrier spidermonkey uses a (relatively!) simple, common incremental write barrier called a snapshot-at-the-beginning allocate-black barrier. to understand how this barrier works, first assume that we're going to do an incremental gc during which no ...
...hen we encounter them during gc graph traversal. instead, we append them to a list. after marking everything live we scan through the list to null out references to garbage. but this also means that pre-barriers are inadequate to prevent incremental gc from missing edges due to graph mutation. live cells will be marked either because they're reachable or because they were marked by a pre-barrier before being removed from the graph. but reachable weak references aren't traced! so you could read one out and write it behind the frontier and no pre-barriered removal will mark it (it's not being removed, just read). so we barrier the read instead; if you ever read a weak reference in the middle of an ongoing incremental gc, then the target of the weak ref will be marked. implementation details wri...
...dled specially. the private field itself is opaque to the engine, but it may point to things that need to be marked, e.g., an array of jsobject pointers. in this example, if the private field is overwritten, the jsobject pointers could be 'lost', so a write barrier must be invoked to mark them. js::nativeobject::privatewritebarrierpre takes care of this by invoking the jsobject's class trace hook before the private field is set. another detail is that write barriers can be skipped when initializing fields of newly allocated objects, because no pointer is being overwritten. sweeping todo generational gc todo gc statistics api you can access the light statistics the gc keeps at runtime through the gc statistics api. source files gc/gc.{h,cpp} defines gc internal api functions, including ...

Secure Development Guidelines
\0 terminated! buffer bounds validations (bbv) thou shalt check the array bounds of all strings (indeed, all arrays), for surely where thou typest "foo" someone someday shall type "supercalifragilisticexpialidocious". ...
...o_something(); delete ptr1; do_something_else(); ptr2 = new char[-1] // oom } catch (...) { delete ptr1; delete ptr2; } new will throw an exception — ptr1 is already freed in the try block then freed again in the catch block freeing un-initialized data free data in the catch block assumption is that it’s initialized in the try block if the try block throws before the variable is initialized, the catch block will operate on un-intialized data freeing un-initialized data example: int main(){ char *ptr; try { ptr = new char[-1]; // oom } catch(...) { delete ptr; } } freeing un-initialized data: prevention be careful when freeing data in catch blocks make sure the try block can’t throw before data is initia...
...) { delete ptr; } } freeing un-initialized data: prevention be careful when freeing data in catch blocks make sure the try block can’t throw before data is initialized initialize variables when they’re declared; for example, set pointers to null memory leaks usually occur when memory is allocated in a try block after the allocation, something throws in the try block before memory is freed in the try block the catch block does not foresee this and doesn't free the memory freeing un-initialized data example: int main(){ char *p; try { p = new char [1000]; ... code that might throw an exception ... delete p; } catch (...) { ... } } memory leaks: prevention any acquired resource in a try block should ...
...does not foresee this and doesn't free the memory freeing un-initialized data example: int main(){ char *p; try { p = new char [1000]; ... code that might throw an exception ... delete p; } catch (...) { ... } } memory leaks: prevention any acquired resource in a try block should be freed in a catch block (if the try block throws before the resource is freed) might be helpful to initialize variables null for pointers -1 for file descriptors ...

Avoiding leaks in JavaScript XPCOM components
nguages, functions have access to the variables that are in scope where they are created. a closure is a code × environment pair: function objects are not just the code; they're also the environment. since all the variables in that environment are reachable from the function object, the objects referenced by those variables are reachable from the function. to understand closures a little better before examining how they can cause leaks, consider the following example, in which there are two pairs of function objects, and each pair has an instance of the private_data variable: // this function returns an array containing two functions. function function_array() { // once this function is done running, this variable is still // accessible to the functions created here. var private_d...
...the iterator object is an xpcom object that is wrapped so the javascript code can use it. the _filterradiogroup object is a javascript function that is wrapped so that xpcom code can use it. the reason closures matter here is that the _filterradiogroup function has access to the iterator variable. ...
...however, a better fix is to move the filter function outside of the function, since the power of closures is not necessary in this case (and there's also no need to create a new function object for the filter each time this code is executed). this same problem can also happen if the function is inside of an object. ...
...ce(components.interfaces.nsiobserverservice); service.addobserver(observer, "open-new-tab-request", false); in this example, there is a similar cycle between observe and service. (but since service is a global variable, just fixing the cycle doesn't fix the leak.) don't store short-lived objects as javascript properties of short-lived dom nodes i mentioned earlier that, in versions of mozilla before 1.8, setting arbitrary javascript properties on elements (or using xbl fields) causes that element's javascript wrapper to be rooted until the document stops being displayed. this can be a problem if there are large objects reachable from that wrapper that should go away before the document stops being displayed. the worst example of this problem is tabbrowser. tabbrowser is an xbl binding that ...

mozIStorageStatement
the given sql statement. void initialize( in mozistorageconnection adbconnection, in autf8string asqlstatement ); parameters adbconnection a mozistorageconnection database connection. asqlstatement string key representing the sql statement. finalize() finalizes a statement which releases all resources that were allocated for it. you must call this method on every active statement before you try to call mozistorageconnection.close(). void finalize(); note: this method does not need to be used from native callers because you have to release the statement in order to not leak. finalize will be called for you when the reference count on the statement goes to zero. clone() creates a copy of the statement whose state will be mozistoragestatement.moz_storage_statement_ready. mozi...
...g with the of the column name for the specified index. getcolumnindex() obtains the index of the column with the specified name. unsigned long getcolumnindex( in autf8string aname ); parameters aname name of the column. return value the zero-based numerical index for the column to get data from. reset() resets the bound parameters and statement execution state. this must be called before reusing the statement. note: javascript callers should always wrap their execution in a try block, and have a reset statement in a finally block. see the overview document on storage for more details. void reset() escapestringforlike() escapes a string for sql like search. note: consumers will have to use same escape char when doing statements such as: ...like '?1' escape '/'.... see the s...
...tion functions these functions are discussed in more detail with sample code in the overview document. executeasync() starts the execution of a query asynchronously using the currently bound parameters. the optional callback routine receives notifications about the progress of the query. for sample code and more details, see the overview document. note: the statement does not have to be reset before being reused. mozistoragependingstatement executeasync( [optional] mozistoragestatementcallback acallback ); parameters acallback a callback object that will be notified of progress, errors, and query completion. this parameter is optional. return value a mozistoragependingstatement object that can be used to cancel the execution of the statement. executestep() executes a query with...
...d of progress, errors, and query completion. this parameter is optional. return value a mozistoragependingstatement object that can be used to cancel the execution of the statement. executestep() executes a query with the currently bound parameters, and steps through the results one row at a time. for sample code and more details, see the overview document. note: the statement must be reset before being reused. boolean executestep(); return value returns a boolean indicating whether there are more rows or not. row data may be accessed using mozistoragevaluearray methods on the statement. step() identical to calling executestep(), and then calling reset() when no more rows are returned. note: this method may only be called from javascript code. boolean step() return value true if ...

nsIDOMEvent
ventdefault() has been called for this event. read only. eventphase unsigned short used to indicate which phase of event flow is currently being evaluated. read only. explicitoriginaltarget nsidomeventtarget the explicit original target of the event. if the event was retargeted for some reason other than an anonymous boundary crossing, this will be set to the target before the retargeting occurs. for example, mouse events are retargeted to their parent node when they happen over text nodes (bug 185889), and in that case .target will show the parent and .explicitoriginaltarget will show the text node. .explicitoriginaltarget differs from .originaltarget in that it will never contain anonymous content. read only. istrusted boolean read only. ...
... parent node when they happen over text nodes (bug 185889), and in that case .target will show the parent and .explicitoriginaltarget will show the text node. .explicitoriginaltarget differs from .originaltarget in that it will never contain anonymous content. read only. istrusted boolean read only. originaltarget nsidomeventtarget the original target of the event, before any retargetings. read only. target nsidomeventtarget used to indicate the eventtarget to which the event was originally dispatched. read only. timestamp domtimestamp used to specify the time (in milliseconds relative to the epoch) at which the event was created. due to the fact that some systems may not provide this information the value of timestamp may be not ava...
...alnsevent(); parameters none. return value getpreventdefault() note: use the defaultprevented attribute instead. this method will be removed in future releases, see bug 691151. boolean getpreventdefault(); parameters none. return value initevent() this method is used to initialize the value of an event created through the documentevent interface. this method may only be called before the event has been dispatched via the dispatchevent method, though it may be called multiple times during that phase if necessary. if called multiple times the final invocation takes precedence. if called from a subclass of event interface only the values specified in the initevent method are modified, all other attributes are left unchanged. void initevent( in domstring eventtypearg, in boo...
...ed and, unlike stoppropagation() its effect is immediate. void stopimmediatepropagation(); parameters none. stoppropagation() the stoppropagation method is used prevent further propagation of an event during event flow. if this method is called by any eventlistener the event will cease propagating through the tree. the event will complete dispatch to all listeners on the current eventtarget before event flow stops. this method may be used during any stage of event flow. void stoppropagation(); parameters none. ...

nsIDocShell
sidocumentcharsetinfo interface were merged into nsidocshell in gecko 12.0. eldestpresshell nsipresshell presentation shell for the oldest document, if this docshell is currently transitioning between documents. read only. native code only! forcedcharset nsiatom a character set to override the page's default character set while processing; this is tried before using any other character set during page loads. note: prior to gecko 12.0, this attribute was part of a separate nsidoccharsetinfo interface. hasfocus boolean tells the docshell that it now has focus or has lost focus. obsolete since gecko 1.9.2 historyid unsigned long long the id of the docshell in the session history. read only. isact...
...p tab docshell in some cases, such as when handling link clicks. docshells are not app tabs unless told otherwise. isexecutingonloadhandler boolean returns true if the docshell is currently executing the onload handler. read only. isinunload boolean find out whether the docshell is currently in the middle of a page transition (after the onunload event has fired, but before the new document has been set up) read only. isoffscreenbrowser boolean if true, this docshell is not visible in the traditional sense, but is being actively rendered to the screen (such as by being painted to a canvas), and should be treated accordingly. layouthistorystate nsilayouthistorystate loadedtransindex long keeps track of the previous sht...
...of the apptype attribute used by thunderbird and seamonkey to indicate that email messages or web pages are composed in this window. busy_flags_none 0 returned by the busyflags attribute when the nsidocshell is not loading a document. busy_flags_busy 1 returned by the busyflags attribute when the nsidocshell is loading a document from the network. busy_flags_before_page_load 2 returned by the busyflags attribute when the nsidocshell has started loading a document from the network, but no data has been received yet. busy_flags_page_loading 4 returned by the busyflags attribute when the nsidocshell is receiving data from the network. load_cmd_normal 0x1 returned by the loadtype attribute for normal loads. load_cmd_...
... defined in nsiwebnavigation. note that using flags outside load_flags_mask is only allowed if passing in a non-null loadinfo. and even some of those might not be allowed. use at your own risk. firstparty true if this is the master top-level document. preparefornewcontentmodel() reset state to a new content model within the current document and the document viewer. called by the document before initiating an out of band document.write(). void preparefornewcontentmodel(); parameters none. resumerefreshuris() restart the xpcom timers for each meta-refresh uri in this docshell, and this docshell's children, recursively. if the timers are already running, this has no effect. void resumerefreshuris(); parameters none. native code only!setchildoffset set the offset of this child in its con...

nsINavBookmarkObserver
toolkit/components/places/nsinavbookmarksservice.idlscriptable this interface is an observer for bookmark changes. ...
...ted(in long long aitemid, in long long avisitid, in prtime atime, in unsigned long atransitiontype, in nsiuri auri, in long long aparentid, in acstring aguid, in acstring aparentguid); void onseparatoradded(in print64 parent, in print32 index); obsolete since gecko 1.9 void onseparatorremoved(in print64 parent, in print32 index); obsolete since gecko 1.9 methods onbeforeitemremoved() obsolete since gecko 21.0 (firefox 21.0 / thunderbird 21.0 / seamonkey 2.18) note: this method was removed in gecko 21.0 as part of bug 826409. this method notifies this observer that an item is about to be removed. it is called before the actual removal takes place. void onbeforeitemremoved( in long long aitemid, in unsigned short aitemtype, in long long ap...
... item the item which was replaced. newitem the new item which replaced item. onitemvisited() this method notifies that the item was visited. can be invoked only for type_bookmark items. normally in bookmarks we use the last visit date, and normally the time will be a new visit that will be more recent, but this is not guaranteed. you should check to see if it is actually more recent before using this new time. see onitemchanged() method property = "cleartime" for when all visit dates are deleted for the uri. note: the reported time is the time of the visit that was added, which may be well in the past since the visit time can be specified. this means that the visit the observer is told about may not be the most recent visit for that page. void onitemvisited( in long long aitemid,...
...s parent. index the separator's index inside its parent. onseparatorremoved() obsolete since gecko 1.9 (firefox 3) notify this observer that a separator has been removed. void onseparatorremoved( in print64 parent, in print32 index ); parameters parent the id of the separator's parent. index the separator's old index in its parent. using onbeforeitemremoved() in gecko 1.9.1 if you wish to support onbeforeitemremoved() in applications based on gecko 1.9.1, you must implement your observer's queryinterface() method to match on both nsinavbookmarkobserver and nsinavbookmarkobserver_mozilla_1_9_1_additions, as shown below. queryinterface: function(iid) { if (iid.equals(ci.nsinavbookmarkobserver) || iid.equals(ci.nsinavbookmarkobserver...

nsINavHistoryObserver
on the global history. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 21.0 (firefox 21.0 / thunderbird 21.0 / seamonkey 2.18) warning: if you are in the middle of a batch transaction, there may be a database transaction active. you can still access the database in this situation but be careful (of what?). ...
...ed(in nsiuri auri, in astring apagetitle); void onvisit(in nsiuri auri, in long long avisitid, in prtime atime, in long long asessionid, in long long areferringid, in unsigned long atransitiontype, in acstring aguid, out unsigned long aadded); constants constant value description attribute_favicon 3 the page's favicon changed. methods onbeforedeleteuri() obsolete since gecko 21.0 (firefox 21.0 / thunderbird 21.0 / seamonkey 2.18) note: this method was removed in gecko 21.0 as part of bug 826409. the specified page and all its visits are about to be deleted. note: the page does not necessarily have to have ever existed for this function to be called. delete notifications aren't quite 100% accurate. batch delete ope...
... to have ever existed for this function to be called. delete notifications aren't quite 100% accurate. batch delete operations take place in two steps; the notifications come first, followed by a bulk delete. if an error occurs in between these two steps (for example, an out of memory error), then you may get a notification even though the page doesn't wind up getting deleted. note: see using onbeforedeleteuri() in gecko 1.9.1 for how to implement this in gecko 1.9.1 void onbeforedeleteuri( in nsiuri auri, in acstring aguid ); parameters auri the uri of the page about to be deleted. aguid the unique id associated with the page. onbeginupdatebatch() notifies you that a batch of things are about to change. you should avoid doing any heavy-duty processing until onendupdate...
...about to be removed; this is one of the nsinavbookmarksservice.constants defined in the nsinavbookmarksservice interface. aguid the unique id associated with the page. aadded incremented by query nodes when the visited uri belongs to them. if no such query exists, the history result creates a new query node dynamically. it is used in places views only and can be ignored. using onbeforedeleteuri() in gecko 1.9.1 if you wish to support onbeforedeleteuri() in applications based on gecko 1.9.1, you must implement your observer's queryinterface() method to match on both nsinavhistoryobserver and nsinavhistoryobserver_mozilla_1_9_1_additions, as shown below. queryinterface: function(iid) { if (iid.equals(ci.nsinavhistoryobserver) || iid.equals(ci.nsinavhistoryobserver_mozilla...

nsITransactionListener
nsitransactionmanager calls the nsitransaction.undo() method of a transaction. void didundo( in nsitransactionmanager amanager, in nsitransaction atransaction, in nsresult aundoresult ); parameters amanager the nsitransactionmanager undoing the transaction. atransaction the transaction being undone. aundoresult the nsresult returned after undoing the transaction. willbeginbatch() called before a nsitransactionmanager begins a batch. boolean willbeginbatch( in nsitransactionmanager amanager ); parameters amanager the nsitransactionmanager beginning a batch. return value willdo() called before a nsitransactionmanager calls a transaction's nsitransaction.dotransaction() method. boolean willdo( in nsitransactionmanager amanager, in nsitransaction atransaction ); parameters aman...
...nsactionmanager beginning a batch. return value willdo() called before a nsitransactionmanager calls a transaction's nsitransaction.dotransaction() method. boolean willdo( in nsitransactionmanager amanager, in nsitransaction atransaction ); parameters amanager the nsitransactionmanager doing the transaction. atransaction the transaction being executed. return value willendbatch() called before a nsitransactionmanager ends a batch. boolean willendbatch( in nsitransactionmanager amanager ); parameters amanager the nsitransactionmanager ending a batch. return value willmerge() called before a nsitransactionmanager tries to merge a transaction, that was just executed, with the transaction at the top of the undo stack. boolean willmerge( in nsitransactionmanager amanager, in nsitr...
...ecuted, with the transaction at the top of the undo stack. boolean willmerge( in nsitransactionmanager amanager, in nsitransaction atoptransaction, in nsitransaction atransactiontomerge ); parameters amanager the nsitransactionmanager ending a batch. atoptransaction the transaction at the top of the undo stack. atransactiontomerge the transaction to merge. ...
...boolean willundo( in nsitransactionmanager amanager, in nsitransaction atransaction ); parameters amanager the nsitransactionmanager undoing the transaction. atransaction the transaction being undone. ...

nsIXULTemplateQueryProcessor
the reference variable, while the variable ?id would be the member variable, since it is the unique value that identifies a result. each result will have the four variables referred to defined for it and the values may be retrieved using the result's nsixultemplateresult.getbindingfor() and nsixultemplateresult.getbindingobjectfor() methods. the template builder must call initializeforbuilding() before the other methods, except for translateref(). the builder will then call compilequery() for each query in the template to compile the queries. when results need to be generated, the builder will call generateresults(). the initializeforbuilding(), compilequery() and addbinding() methods may not be called after generateresults() has been called until the builder indicates that the generated output...
... the sort hints are the flags in nsixulsortservice. return value -1 if aleft < aright 0 if aleft == aright 1 if aleft > aright compilequery() compile a query from a node. the result of this function will later be passed to generateresults() for result generation. if null is returned, the query will be ignored. the template builder will call this method once for each query within the template, before any results can be generated using generateresults(), but after initializeforbuilding() has been called. this method should not be called again for the same query unless the template is rebuilt. the reference variable may be used by the query processor as a placeholder for the reference point, or starting point in the query. the member variable is determined from the member attribute on the templ...
...atasources the list of nsiuri objects and/or nsidomnode objects. arootnode the root node the builder is attached to. aistrusted true if the template is in a trusted document. abuilder the template builder. ashoulddelaybuilding whether the builder should wait to build the content or not. return value a datasource object. initializeforbuilding() initialize for query generation. this will be called before the rules are processed and whenever the template is rebuilt. this method must be called once before any of the other query processor methods except for translateref(). void initializeforbuilding( in nsisupports adatasource, in nsixultemplatebuilder abuilder, in nsidomnode arootnode ); parameters adatasource datasource for the data. abuilder the template builder. arootnode the root node t...
...tring into a result. this is used as the reference point by the template builder when generating the first level of content. for recursive generation, the result from the parent generation phase will be used directly as the reference so a translation is not needed. this allows all levels to be generated using objects that all implement the nsixultemplateresult interface. this method may be called before initializeforbuilding(), so the implementation may use the supplied datasource if it is needed to translate the reference. nsixultemplateresult translateref( in nsisupports adatasource, in astring arefstring ); parameters adatasource datasource for the data. arefstring the ref attribute string. return value the translated ref. see also a tutorial on how to implement a custom xul query pro...

Setting HTTP request headers
rfc6648 notifications the question that may be coming to your mind right now is, how do you get the nsihttpchannel when an http request is made. in the case your code initiates the request, you probably already have one. trapping other requests is done with notifications, which are a lot like events or signals found in other languages and frameworks. in particular, to get the nsihttpchannel just before the http request is made we need to observe the "http-on-modify-request" topic. (and yes, "http-on-modify-request" is a string.) note: there are many topics, besides just "http-on-modify-request", that you can get notifications about, for example "http-on-examine-response" and "xpcom-shutdown". you can also make up your own topics and send out your own notifications. for more information about...
...will be the nsihttpchannel. however, it is passed to us as an nsisupports. so we need to change the nsisupports into a nsihttpchannel which is what the queryinterface call does. and yes, converting objects from one kind to another is very ugly, and lacks (what is usually called) syntactic sugar. the second line of code in the if block should already be familiar to you. it is the same code we used before, earlier in this article, to add the http request header. the name of this object -- httprequestobserver -- isn't important. we could have named it anything we liked. registering after we've created the observer, we need to register it. in our case, we want to register it for the "http-on-modify-request" topic. we can do this with the code below. var observerservice = cc["@mozilla.org/observer-se...
...vice.addobserver(httprequestobserver, "http-on-modify-request", false); the first statement gets the object that will let us register with topics that we want to get notified about. the second statement does the actual registering. we are saying we want httprequestobserver to be notified (by calling its observe method) when a "http-on-modify-request" topic takes place (which we know happens just before each http request). unregistering you should unregister the observer on shutdown. failing to do that may cause memory leaks. to unregister the observer use nsiobserverservice.removeobserver as follows: observerservice.removeobserver(httprequestobserver, "http-on-modify-request"); all-in-one example here is a slightly different version of our httprequestobserver object. while the previous version ...
... request). unregistering you should unregister the observer on shutdown. failing to do that may cause memory leaks. to unregister the observer use nsiobserverservice.removeobserver as follows: observerservice.removeobserver(httprequestobserver, "http-on-modify-request"); all-in-one example here is a slightly different version of our httprequestobserver object. while the previous version we showed before was good for learning, in an actual real-world application, you'd probably want to code it more like the following. var httprequestobserver = { observe: function(subject, topic, data) { if (topic == "http-on-modify-request") { var httpchannel = subject.queryinterface(ci.nsihttpchannel); httpchannel.setrequestheader("x-hello", "world", false); } }, get observerservice(...

Getting Started Guide
if you're already familiar with nscomptrs, then you might want to skip ahead to the reference manual or the faq. don't worry; the getting started guide is short. introduction what is nscomptr? nscomptr is a tool to help prevent leaks. nscomptr is a "smart pointer". it is a template class that acts, syntactically, just like an ordinary pointer in c or c++, i.e., you can apply * or -> to it to "get to" what it points at. nscomptr is smart in that, unlike a raw c++ pointer to an xpcom object, nscomptr manages addref, release, and queryinterface for you. ...
...y implement many interfaces. each interface is (at least conceptually) separately `reference counted'. that is, the interface keeps a count of the number of clients holding references to it. when that count goes to zero, the interface may delete itself. clients are expected to keep this reference count accurate by incrementing it when they acquire a reference to the interface, and decrementing it before they let go. to facilitate this, all interfaces inherit from an abstract base class that provides the member functions addref, and release. a rule of xpcom is that any function that creates or returns an interface pointer will have already addrefed it. the caller can then hold onto the reference indefinitely, calling release when it no longer needs it. when the last pointer to an interface is re...
... nscomptr<nsifoo> myfoo = ...; f( address_of(myfoo) ); void f( nscomptr<t>& ) do pass an nscomptr by reference for `in/out' parameters this is the prefered scheme for providing `in/out' parameters. ...
...'t know what ownership relationship the caller had to the input value, and hence, couldn't know whether to release it or not before assigning in the new value. by declaring the parameter as an nscomptr&, the relationship is explicit. summary an nscomptr is an owning reference. whatever it points to has been addrefed, counting the nscomptr as one of its `owners'. an nscomptr always calls release before letting go, whether the nscomptr is letting go so that it can point to a different object, or because the nscomptr is going out of scope. any time a new value is assigned into an nscomptr, the nscomptr automatically always releases its old referent, if any, and (unless you tell it you already have) addrefs the new. you use an nscomptr exactly as you would a raw xpcom interface pointer in almost ...

Plug-in Development Overview - Plugins
", string 4: "aiff audio", and string 5: "jpeg image format." str#' 126: string 1 can contain a descriptive message about the plug-in. this message, which is in html format, is displayed by the browser in its "about plug-ins" page. string 2 can contain the name of the plug-in, thus allowing the name the user sees to be different from the name of the file on disk. ...
... the browser calls these plug-in methods: npp_getvalue: query the plug-in for information. npp_print: request a platform-specific print operation for the instance. npp_setvalue: set the browser information. ...
...set the window or other target in which it draws, arrange for redrawing, and handle events. a windowless plug-in can call the following netscape methods to draw itself: npn_forceredraw: force a paint message for windowless plug-ins. npn_invalidaterect: invalidate an area in a windowless plug-in before repainting or refreshing. npn_invalidateregion: invalidate an area in a windowless plug-in before repainting or refreshing. the browser calls these plug-in methods: npp_getvalue: query the plug-in for information. npp_print: request a platform-specific print operation for the instance. npp_setvalue: set the browser information. npp_setwindow: set the window in which a plug-in draws. npp_handleevent: deliver a platform-specific event to the instance. the plug-in can call these netsc...
...nformation about these processes, see drawing and event handling. handling memory plug-in developers can take advantage of the memory features provided in the plug-in api to allocate and free memory. use the npn_memalloc method to allocate memory from the browser. use the npn_memfree method to free memory allocated with npn_memalloc. use the npn_memflush method to free memory (mac os only) before calling memory-intensive mac toolbox calls. sending and receiving streams streams are objects that represent urls and the data they contain. a stream is associated with a specific instance of a plug-in, but a plug-in can have more than one stream per instance. streams can be produced by the browser and consumed by a plug-in instance, or produced by an instance and consumed by the browser. each...

Streams - Plugins
er, pulled by the plug-in, or saved to a local file and passed to the plug-in. normal mode: the browser uses the npp_write method to "push" stream data to the instance incrementally as it is available. random-access mode: the plug-in calls the npn_requestread method to "pull" stream data. in general, this mode is more expensive, because the entire stream must be downloaded to a temporary file before use unless the stream comes from a local file or an http server that supports the byte-range extension to http. file mode: the browser saves the entire stream to a local file and passes the file path to the plug-in instance through the npp_streamasfile method. use this feature only as a last resort; plug-ins should implement an incremental stream-based interface wherever possible. streams sent...
...ak: the user canceled the stream directly by clicking the stop button or indirectly by some action, such as by deleting the instance or initiating higher-priority network operations. npres_network_err: the stream failed because of problems with the network, disk i/o error, lack of memory, or some other problem. finding out how much data the plug-in can accept after a call to npp_newstream and before writing data to the plug-in, the browser calls npp_writeready to determine the maximum number of bytes that the plug-in can consume. this function allows the browser to send only as much data to the instance as it can handle at one time, and it helps both the browser and the plug-in to use their resources efficiently. after a call to npp_newstream, in which the plug-in requested a normal-mode st...
...ows the browser to send only as much data to the instance as it can handle at one time, and it helps both the browser and the plug-in to use their resources efficiently. after a call to npp_newstream, in which the plug-in requested a normal-mode stream, the browser delivers the data in the stream progressively in a series of calls to npp_writeready and npp_write. the browser calls npp_writeready before each call to npp_write. the value returned by npp_writeready indicates how many bytes the plug-in instance can accept for this stream. if the plug-in allocates memory for the entire stream at once, it can return a large number. this number tells the browser that it can pass as much data to the instance as possible in a single call to npp_write. the browser can write a smaller amount of data if d...
...: if you want to be sure that the npn_*stream functions are called in the order you want and behave the way you expect, combine npn_newstream, npn_write, and npn_destroy_stream in the same callback. sending the stream in random-access mode in random-access mode, the plug-in "pulls" stream data by calling the npn_requestread method. the browser must download the entire stream to a temporary file before it can be used, unless the stream comes from a local file or an http server that supports the byte-range extension to http. this mode consumes more resources than the others. random-access mode is determined in npp_newstream by setting the mode np_seek. this mode gives the plug-in instance random access to stream data as needed, through calls to npn_requestread. if the stream is not seekable, th...

AudioBufferSourceNode.AudioBufferSourceNode() - Web APIs
ithub.com/mdn/browser-compat-data and send us a pull request. ...
... ≤79firefox full support 53ie no support noopera full support 42safari ? ...
...i ? webview android full support 55notes full support 55notes notes before version 59, the default values were not supported.chrome android full support 55notes full support 55notes notes before version 59, the default values were not supported.firefox android full support 53opera android full support 42safari ios ? samsung internet android full support 6.0notes full support 6.0no...
...9, the default values were not supported.firefox android full support 53opera android full support 42safari ios ? ...

DelayNode() - Web APIs
ut https://github.com/mdn/browser-compat-data and send us a pull request. ...
... ≤79firefox full support 53ie no support noopera full support 42safari ? ...
...i ? webview android full support 55notes full support 55notes notes before version 59, the default values were not supported.chrome android full support 55notes full support 55notes notes before version 59, the default values were not supported.firefox android full support 53opera android full support 42safari ios ? samsung internet android full support 6.0notes full support 6.0no...
...9, the default values were not supported.firefox android full support 53opera android full support 42safari ios ? ...

DynamicsCompressorNode() - Web APIs
thub.com/mdn/browser-compat-data and send us a pull request. ...
... ≤79firefox full support 53ie no support noopera full support 42safari ? ...
...i ? webview android full support 55notes full support 55notes notes before version 59, the default values were not supported.chrome android full support 55notes full support 55notes notes before chrome 59, the default values were not supported.firefox android full support 53opera android full support 42safari ios ? samsung internet android full support 6.0notes full support 6.0not...
...9, the default values were not supported.firefox android full support 53opera android full support 42safari ios ? ...

Element.insertAdjacentHTML() - Web APIs
reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element. this avoids the extra step of serialization, making it much faster than direct innerhtml manipulation. ...
...ement it is being used on, and thus it does not corrupt the existing elements inside that element. this avoids the extra step of serialization, making it much faster than direct innerhtml manipulation. ...
... elements inside that element. this avoids the extra step of serialization, making it much faster than direct innerhtml manipulation. syntax element.insertadjacenthtml(position, text); parameters position a domstring representing the position relative to the element; must be one of the following strings: 'beforebegin': before the element itself. 'afterbegin': just inside the element, before its first child. 'beforeend': just inside the element, after its last child. ...
...ition relative to the element; must be one of the following strings: 'beforebegin': before the element itself. 'afterbegin': just inside the element, before its first child. 'beforeend': just inside the element, after its last child. 'afterend': after the element itself. text the string to be parsed as html or xml and inserted into the tree. visualization of position names <!-- beforebegin --> <p> <!-- afterbegin --> foo <!-- beforeend --> </p> <!-- afterend --> note: the beforebegin and afterend positions work only if the node is in the dom tree and has a parent element. example // <div id="one">one</div> var d1 = document.getelementbyid('one'); d1.insertadjacenthtml('afterend', '<div id="two">two</div>'); // at this point, the new structure is: // <div id="one">on...

Element.insertAdjacentText() - Web APIs
the insertadjacenttext() method of the element interface inserts a given text node at a given position relative to the element it is invoked upon. syntax element.insertadjacenttext(position, element); parameters position a domstring representing the position relative to the element; must be one of the following strings: 'beforebegin': before the element itself. 'afterbegin': just inside the element, before its first child. 'beforeend': just inside the element, after its last child. 'afterend': after the element itself. element a domstring representing the text to be inserted into the tree. return value void. exceptions exception explanation syntaxerror the position specified is not a recognised value. visualization of position names...
...nt, before its first child. 'beforeend': just inside the element, after its last child. 'afterend': after the element itself. element a domstring representing the text to be inserted into the tree. return value void. exceptions exception explanation syntaxerror the position specified is not a recognised value. visualization of position names <!-- beforebegin --> <p> <!-- afterbegin --> foo <!-- beforeend --> </p> <!-- afterend --> note: the beforebegin and afterend positions work only if the node is in a tree and has an element parent. ...
...return value void. exceptions exception explanation syntaxerror the position specified is not a recognised value. visualization of position names <!-- beforebegin --> <p> <!-- afterbegin --> foo <!-- beforeend --> </p> <!-- afterend --> note: the beforebegin and afterend positions work only if the node is in a tree and has an element parent. example beforebtn.addeventlistener('click', function() { para.insertadjacenttext('afterbegin',textinput.value); }); afterbtn.addeventlistener('click', function() { para.insertadjacenttext('beforeend',textinput.value); }); have a look at our insertadjacenttext.html demo on github (see the source code too.) here we have a simple paragraph. you can enter some text into the form element, then press the insert...
...tn.addeventlistener('click', function() { para.insertadjacenttext('afterbegin',textinput.value); }); afterbtn.addeventlistener('click', function() { para.insertadjacenttext('beforeend',textinput.value); }); have a look at our insertadjacenttext.html demo on github (see the source code too.) here we have a simple paragraph. you can enter some text into the form element, then press the insert before and insert after buttons to insert it before or after the existing paragraph text using insertadjacenttext(). note that the existing text node is not added to — further text nodes are created containing the new additions. polyfill you can polyfill the insertadjacenttext() method in internet explorer 5.5 (maybe earlier) and higher with the following code: if (!element.prototype.insertadjacent...

GainNode() - Web APIs
out https://github.com/mdn/browser-compat-data and send us a pull request. ...
... ≤79firefox full support 53ie no support noopera full support 42safari ? ...
...ri ? webview android full support 55notes full support 55notes notes before chrome 59, the default values were not supported.chrome android full support 55notes full support 55notes notes before chrome 59, the default values were not supported.firefox android full support 53opera android full support 42safari ios ? samsung internet android full support 6.0notes full support 6.0not...
...9, the default values were not supported.firefox android full support 53opera android full support 42safari ios ? ...

Ajax navigation example - Web APIs
rms and uploading files. first_page.php: <?php $page_title = "first page"; $as_json = false; if (isset($_get["view_as"]) && $_get["view_as"] == "json") { $as_json = true; ob_start(); } else { ?> <!doctype html> <html> <head> <?php include "include/header.php"; echo "<title>" . $page_title . ...
...\n</html>"; } ?> second_page.php: <?php $page_title = "second page"; $as_json = false; if (isset($_get["view_as"]) && $_get["view_as"] == "json") { $as_json = true; ob_start(); } else { ?> <!doctype html> <html> <head> <?php include "include/header.php"; echo "<title>" . $page_title . ...
....php</strong>. this content is stored into a php variable.</p>"; if (isset($_get["view_as"]) && $_get["view_as"] == "json") { echo json_encode(array("page" => $page_title, "content" => $page_content)); } else { ?> <!doctype html> <html> <head> <?php include "include/header.php"; echo "<title>" . $page_title . ...
...ader { position: fixed; display: table; top: 0; left: 0; width: 100%; height: 100%; } #ajax-loader > div { display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center; background-color: #000000; opacity: 0.65; } include/after_content.php: <p>this is the footer. ...

IIRFilterNode() - Web APIs
ttps://github.com/mdn/browser-compat-data and send us a pull request. ...
... ≤79firefox full support 53ie no support noopera full support 42safari ? ...
...i ? webview android full support 55notes full support 55notes notes before version 59, the default values were not supported.chrome android full support 55notes full support 55notes notes before version 59, the default values were not supported.firefox android full support 53opera android full support 42safari ios ? samsung internet android full support 6.0notes full support 6.0no...
...9, the default values were not supported.firefox android full support 53opera android full support 42safari ios ? ...

NotificationEvent - Web APIs
opera full support 37safari ? webview android no support nochrome android full support 42firefox android full support ...
... opera full support 37safari ? webview android no support nochrome android full support 42firefox android full support ...
... opera no support nosafari ? webview android no support nochrome android full support 48firefox android full support ...
... opera full support 37safari ? webview android no support nochrome android full support 42firefox android full support ...

OfflineAudioCompletionEvent.OfflineAudioCompletionEvent() - Web APIs
com/mdn/browser-compat-data and send us a pull request. ...
... ≤79firefox full support 53ie no support noopera full support 42safari ? ...
...i ? webview android full support 57notes full support 57notes notes before version 59, the default values were not supported.chrome android full support 57notes full support 57notes notes before chrome 59, the default values were not supported.firefox android full support 53opera android full support 42safari ios ? samsung internet android full support 6.0notes full support 6.0not...
...9, the default values were not supported.firefox android full support 53opera android full support 42safari ios ? ...

PerformanceEventTiming - Web APIs
the performanceeventtiming interface of the event timing api provides timing information for the event types listed below. auxclick beforeinput click compositionend compositionstart compositionupdate contextmenu dblclick dragend dragenter dragleave dragover dragstart drop input keydown keypress keyup mousedown mouseenter mouseleave mouseout mouseover mouseup pointerover pointerenter pointerdown pointerup pointercancel pointerout pointerleave gotpointercapture lostpointercapture touchstart touchend touchcancel properties performanceeventtiming.processingstart returns the time at which event dispatch started. performanceeventtiming.processingend returns the time at which the event dispatch ended. performanceeventtiming.cancelable returns th...
...ot removed. methods performanceeventtiming.tojson() converts the performanceeventtiming object to json. examples the following example shows how to use the api for all events: const observer = new performanceobserver(function(list) { const perfentries = list.getentries().foreach(entry => { // full duration const inputduration = entry.duration; // input delay (before processing event) const inputdelay = entry.processingstart - entry.starttime; // synchronous event processing time (between start and end dispatch). const inputsyncprocessingtime = entry.processingend - entry.processingstart; }); }); // register observer for event. observer.observe({entrytypes: ["event"]}); we can also directly query the first input delay. // keep t...
...processingstart; }); }); // register observer for event. observer.observe({entrytypes: ["event"]}); we can also directly query the first input delay. // keep track of whether (and when) the page was first hidden, see: // https://github.com/w3c/page-visibility/issues/29 // note: ideally this check would be performed in the document <head> // to avoid cases where the visibility state changes before this code runs. let firsthiddentime = document.visibilitystate === 'hidden' ? 0 : infinity; document.addeventlistener('visibilitychange', (event) => { firsthiddentime = math.min(firsthiddentime, event.timestamp); }, {once: true}); // sends the passed data to an analytics endpoint. this code // uses `/analytics`; you can replace it with your own url. function sendtoanalytics(data) { const bod...
... // report the fid value to an analytics endpoint. sendtoanalytics({fid}); } } // create a performanceobserver that calls `onfirstinputentry` for each entry. const po = new performanceobserver((entrylist) => { entrylist.getentries().foreach(onfirstinputentry); }); // observe entries of type `first-input`, including buffered entries, // i.e. entries that occurred before calling `observe()` below. po.observe({ type: 'first-input', buffered: true, }); } catch (e) { // do nothing if the browser doesn't support this api. } specifications specification status comment unknownthe definition of '[[member]]' in that specification. unknown initial definition. ...

Range.compareNode() - Web APIs
obsolete since gecko 1.9 (firefox 3)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. the range.comparenode() returns a constant indicating the position of the node. the possible values are: node_before (0) node starts before the range node_after (1) node ends after the range node_before_and_after (2) node starts before and ends after the range node_inside (3) node starts after and ends before the range, i.e. the node is completely selected by the range. warning: this method has been removed from gecko 1.9 (firefox 3) and will not exist in future versions of firefox, which was the only browser implementing it; you should switch to range.compareboundarypoints() as soon as poss...
...e versions of firefox, which was the only browser implementing it; you should switch to range.compareboundarypoints() as soon as possible. ...
... example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); returnvalue = range.
..., node) { var noderange = node.ownerdocument.createrange(); try { noderange.selectnode(node); } catch (e) { noderange.selectnodecontents(node); } var nodeisbefore = range.compareboundarypoints(range.start_to_start, noderange) == 1; var nodeisafter = range.compareboundarypoints(range.end_to_end, noderange) == -1; if (nodeisbefore && !nodeisafter) return 0; if (!nodeisbefore && nodeisafter) return 1; if (nodeisbefore && nodeisafter) return 2; return 3; } syntax returnvalue = range.comparenode( referencenode ); parameters referencenode the node to compare with the range. example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); returnvalue = range.comparenode(document.getelementsbytagname("p").item...

WaveShaperNode.WaveShaperNode() - Web APIs
tps://github.com/mdn/browser-compat-data and send us a pull request. ...
... ≤79firefox full support 53ie no support noopera full support 42safari ? ...
...ri ? webview android full support 55notes full support 55notes notes before chrome 59, the default values were not supported.chrome android full support 55notes full support 55notes notes before chrome 59, the default values were not supported.firefox android full support 53opera android full support 42safari ios ? samsung internet android full support 6.0notes full support 6.0not...
...9, the default values were not supported.firefox android full support 53opera android full support 42safari ios ? ...

Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
this way, we avoid the risk of offers colliding. automatic rollback in setremotedescription() a key component to perfect negotiation is the concept o...
...n it needs to throw away a received offer if it's currently waiting for a reply to an offer it's already sent. the code checks to see if the message is an offer, and if so, if the local signaling state isn't stable. if it's not stable, and the local peer is the polite one, we need to trigger rollback so we can replace the outgoing offer with the new incoming one. and these must both be completed before we can proceed with handling the received offer. since there isn't a single "roll back and use this offer instead", performing this change on the polite peer requires two steps, executed in the context of promise.all(), which is used to ensure that both statements execute completely before continuing to handle the received offer. the first statement triggers rollback and the second sets the remo...
...caldescription() to create and set an appropriate local description, then we send it to the remote peer over the signaling server. on receiving an ice candidate on the other hand, if the received message is an ice candidate—indicated by the json object containing a candidate member—we deliver it to the local ice layer by calling the rtcpeerconnection method addicecandidate(). errors are, as before, ignored if we have just discarded an offer. explicit restartice() method added the techniques previously used to trigger an ice restart while handling the eventnegotiationneeded have significant flaws. these flaws have made it difficult to safely and reliably trigger a restart during negotiation. the perfect negotiation improvements have fixed this by adding a new restartice() method to rtcpee...
...ag to the next ice message sent. problem solved! rollback no longer supported in the pranswer state the last of the api changes that stand out is that you can no longer roll back when in either of the have-remote-pranswer or the have-local-pranswer states. fortunately, when using perfect negotiation there's no need to do this anyway, since the situations that cause this are caught and prevented before rolling these back ever becomes necessary. thus, attempting to trigger rollback while in one of the two pranswer states will now throw an invalidstateerror. ...

Movement, orientation, and motion: A WebXR example - Web APIs
api's specification. by importing this polyfill, we allow the example to work on many browsers that don't yet have webxr implementations in place, and we smooth out any transient deviations from the specification that occur during these still somewhat experimental days of the webxr specification. options this example has a number of options you can configure by adjusting the values of constants before you load it in the browser. the code looks like this: const xrotationdegreespersecond = 25; const yrotationdegreespersecond = 15; const zrotationdegreespersecond = 35; const enablerotation = true; const allowmouserotation = true; const allowkeyboardmotion = true; const enableforcepolyfill = false; //const session_type = "immersive-vr"; const session_type = "inline"; const mouse_speed = 0.003; ...
...tly firing the end event. by running the event handler directly, we complete the close-out process manually in this situation. starting up the webxr session the sessionstarted() function handles actually setting up and starting the session, by setting up event handlers, compiling and installing the glsl code for the vertex and fragment shaders, and attaching the webgl layer to the webxr session before kicking off the rendering loop. it gets called as the handler for the promise returned by issessionsupported(). function sessionstarted(session) { let refspacetype; xrsession = session; xrbutton.innertext = "exit webxr"; xrsession.addeventlistener("end", sessionended); let canvas = document.queryselector("canvas"); gl = canvas.getcontext("webgl", { xrcompatible: true }); if (all...
...nvas is the right size to allow us to do this, we set its width to be equal to the individual xrview width multiplied by the number of views; the canvas height is always the same as the viewport's height. the two lines of code that adjust the canvas size are not needed in regular webxr rendering loops. applying the user inputs the applyviewercontrols() function, which is called by drawframe() before beginning to render anything, takes the offsets in each of the three directions, the yaw offset, and the pitch offset as recorded by the handlekeydown() and handlepointermove() functions in response to the user pressing keys and dragging their mouse with the right mouse button pressed. it takes as input the base reference space for the object, and returns a new reference space that alters the loc...
...the rest of the code is identical to that found in the earlier examples: initshaderprogram() initializes the glsl shader program, calling loadshader() to load and compile each shader's program, then attaching each one to the webgl context. once they're compiled, the program is linked and returned to the caller. loadshader() creates a shader object and loads the specified source code into it before compiling the code and checking to ensure that the compiler succeeded before returning the newly compiled shader to the caller. if an error occurs, nil is returned instead. initbuffers() initializes the buffers that contain data to be passed into webgl. these buffers include the array of vertex positions, the array of vertex normals, the texture coordinates for each surface of the cube, and the...

Using the Web Audio API - Web APIs
de functionality to play/pause the sound, alter the track's volume, and pan it from left to right. controlling sound programmatically from javascript code is covered by browsers' autoplay support policies, as such is likely to be blocked without permission being granted by the user (or a whitelist). autoplay policies typically require either explicit permission or a user engagement with the page before scripts can trigger audio to play. these special requirements are in place essentially because unexpected sounds can be annoying and intrusive, and can cause accessibility problems. you can learn more about this in our article autoplay guide for media and web audio apis. since our scripts are playing audio in response to a user input event (a click on a play button, for instance), we're in good...
...esponse to a user input event (a click on a play button, for instance), we're in good shape and should have no problems from autoplay blocking. so, let's start by taking a look at our play and pause functionality. we have a play button that changes to a pause button when the track is playing: <button data-playing="false" role="switch" aria-checked="false"> <span>play/pause</span> </button> before we can play our track we need to connect our audio graph from the audio source/input node to the destination. we've already created an input node by passing our audio element into the api. for the most part, you don't need to create an output node, you can just connect your other nodes to baseaudiocontext.destination, which handles the situation for you: track.connect(audiocontext.destination);...
...sing a gainnode, which represents how big our sound wave is. there are two ways you can create nodes with the web audio api. you can use the factory method on the context itself (e.g. audiocontext.creategain()) or via a constructor of the node (e.g. new gainnode()). we'll use the factory method in our code: const gainnode = audiocontext.creategain(); now we have to update our audio graph from before, so the input is connected to the gain, then the gain node is connected to the destination: track.connect(gainnode).connect(audiocontext.destination); this will make our audio graph look like this: the default value for gain is 1; this keeps the current volume the same. gain can be set to a minimum of about -3.4 and a max of about 3.4. here we'll allow the boombox to move the gain up to 2 (...
... creating nodes is not supported by all browsers at this time. the older factory methods are supported more widely. here our values range from -1 (far left) and 1 (far right). ...

Visualizations with Web Audio API - Web APIs
more information on how to use them. to capture data, you need to use the methods analysernode.getfloatfrequencydata() and analysernode.getbytefrequencydata() to capture frequency data, and analysernode.getbytetimedomaindata() and analysernode.getfloattimedomaindata() to capture waveform data. these methods copy data into a specified array, so you need to create a new array to receive the data before invoking one. the first one produces 32-bit floating point numbers, and the second and third ones produce 8-bit unsigned integers, therefore a standard javascript array won't do — you need to use a float32array or uint8array array, depending on what data you are handling. so for example, say we are dealing with an fft size of 2048. we return the analysernode.frequencybincount value, which is h...
...oscilloscope to create the oscilloscope visualisation (hat tip to soledad penadés for the original code in voice-change-o-matic), we first follow the standard pattern described in the previous section to set up the buffer: analyser.fftsize = 2048; var bufferlength = analyser.frequencybincount; var dataarray = new uint8array(bufferlength); next, we clear the canvas of what had been drawn on it before to get ready for the new visualization display: canvasctx.clearrect(0, 0, width, height); we now define the draw() function: function draw() { in here, we use requestanimationframe() to keep looping the drawing function once it has been started: var drawvisual = requestanimationframe(draw); next, we grab the time domain data and copy it into our array analyser.getbytetimedomaindata(dataarr...
...waveform display that updates several times a second: creating a frequency bar graph another nice little sound visualization to create is one of those winamp-style frequency bar graphs. we have one available in voice-change-o-matic; let's look at how it's done. first, we again set up our analyser and data array, then clear the current canvas display with clearrect(). the only difference from before is that we have set the fft size to be much smaller; this is so that each bar in the graph is big enough to actually look like a bar rather than a thin strand. analyser.fftsize = 256; var bufferlength = analyser.frequencybincount; console.log(bufferlength); var dataarray = new uint8array(bufferlength); canvasctx.clearrect(0, 0, width, height); next, we start our draw() function off, again sett...
...e in a certain lower frequency range. we don't want to display loads of empty bars, therefore we simply shift the ones that will display regularly at a noticeable height across so they fill the canvas display. we also set a barheight variable, and an x variable to record how far across the screen to draw the current bar. var barwidth = (width / bufferlength) * 2.5; var barheight; var x = 0; as before, we now start a for loop and cycle through each value in the dataarray. for each one, we make the barheight equal to the array value, set a fill colour based on the barheight (taller bars are brighter), and draw a bar at x pixels across the canvas, which is barwidth wide and barheight/2 tall (we eventually decided to cut each bar in half so they would all fit on the canvas better.) the one value...

Using Web Workers - Web APIs
ipt and executes it. any global objects from each script may then be used by the worker. if the script can't be loaded, network_error is thrown, and subsequent code will not be executed. previously executed code (including code deferred using window.settimeout()) will still be functional though. function declarations after the importscripts() method are also kept, since these are always evaluated before the rest of the code. note: scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into importscripts() . this is done synchronously; importscripts() does not return until all the scripts have been loaded and executed. shared workers a shared worker is accessible by multiple scripts — even if they are being accessed by different windows, ifr...
...sharedworker('worker.js'); one big difference is that with a shared worker you have to communicate via a port object — an explicit port is opened that the scripts can use to communicate with the worker (this is done implicitly in the case of dedicated workers). ...
... before any messages can be posted. calling start() is only needed if the message event is wired up via the addeventlistener() method. note: when using the start() method to open the port connection, it needs to be called from both the parent thread and the worker thread if two-way communication is needed. sending messages to and from a shared worker now messages can be sent to the worker as before, but the postmessage() method has to be invoked through the port object (again, you'll see similar constructs in both multiply.js and square.js): squarenumber.onchange = function() { myworker.port.postmessage([squarenumber.value,squarenumber.value]); console.log('message posted to worker'); } now, on to the worker. there is a bit more complexity here as well (worker.js): onconnect = functi...
...sages can be sent to and from the main thread by using postmessage(), and the message event's data attribute contains data passed back from the worker. example.html: (the main page): var myworker = new worker('my_task.js'); myworker.onmessage = function(oevent) { console.log('worker said : ' + oevent.data); }; myworker.postmessage('ali'); my_task.js (the worker): postmessage("i\'m working before postmessage(\'ali\')."); onmessage = function(oevent) { postmessage('hi ' + oevent.data); }; the structured cloning algorithm can accept json and a few things that json can't — like circular references. passing data examples example #1: advanced passing json data and creating a switching system if you have to pass some complex data and have to call many different functions both on the ma...

Window.open() - Web APIs
be off. example: status=yes, status=1, and status have identical results. menubar if this feature is on, then the new secondary window renders the menubar. if windowfeatures is non-empty, menubar detaults to off. toolbar if this feature is on, then the new secondary window renders the toolbar buttons (back, forward, reload, stop buttons). in addition to the toolbar buttons, firefox (before 76) will render the tab bar if it is visible, present in the parent window. (if this feature is set to off, all toolbars in the window will be invisible). if windowfeatures is non-empty, toolbar detaults to off. location if this feature is on, then the new secondary window renders the location bar or the address bar. if windowfeatures is non-empty, location detaults to off. status if th...
...erty <property_name or method_name>. why is that? it is because of the cross-domain script security restriction (also referred as the "same origin policy"). a script loaded in a window (or frame) from a distinct origin (domain name) cannot get nor set properties of another window (or frame) or the properties of any of its html objects coming from another distinct origin (domain name). therefore, before executing a script targeting a secondary window, the browser in the main window will verify that the secondary window has the same domain name. more reading on the cross-domain script security restriction: http://www.mozilla.org/projects/secu...me-origin.html usability issues avoid resorting to window.open() generally speaking, it is preferable to avoid resorting to window.open() for several...
...n't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. so a user who tries to return to the origin will be confused by a grayed out back button." quote from the top ten new mistakes of web design: 2. opening new browser windows, jakob nielsen, may 1999 when extreme changes in context are explicitly identified before they occur, then the users can determine if they wish to proceed or so they can be prepared for the change: not only they will not be confused or feel disoriented, but more experienced users can better decide how to open such links (in a new window or not, in the same window, in a new tab or not, in "background" or not). references "if your link spawns a new window, or causes another windows ...
...references "if your link spawns a new window, or causes another windows to 'pop up' on your display, or move the focus of the system to a new frame or window, then the nice thing to do is to tell the user that something like that will happen." world wide web consortium accessibility initiative regarding popups "use link titles to provide users with a preview of where each link will take them, before they have clicked on it." ten good deeds in web design, jakob nielsen, october 1999 using link titles to help users predict where they are going, jakob nielsen, january 1998 example "new window" icons & cursors always use the target attribute if javascript support is disabled or non-existent, then ...

Window: unload event - Web APIs
the unload event is fired when the document or a child resource is being unloaded. ...
...er: 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). ...
...more 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). ...
... specifications sp...

ARIA: listbox role - Accessibility
ore clearly identifies the role of the listbox. screen readers will often read this value to the user after reading the label (if there is one), in place of saying "listbox". ...
...of saying "listbox". (for further details and a full list of aria states and properties see the aria listbox (role) documentation.) keyboard interactions when a single-select listbox receives focus: if none of the options are selected before the listbox receives focus, the first option receives focus. optionally, the first option may be automatically selected. if an option is selected before the listbox receives focus, focus is set on the selected option. ...
... down arrow: moves focus to the next option. ...
... down arrow: moves focus to the next option. optionally, in a single-select listbox, selection may also move with focus. up arrow: moves focus to the previous option. ...

:valid - CSS: Cascading Style Sheets
we then absolutely position different generated content dependi...
...we then absolutely position different generated content depending on whether the form's data is valid or invalid — a green check or a red cross, respectively. to add a bit of extra urgency ...
...t name *: </label> <input id="fname" name="fname" type="text" required> <span></span> </div> to provide these indicators, we use the following css: input + span { position: relative; } input + span::before { position: absolute; right: -20px; top: 5px; } input:invalid { border: 2px solid red; } input:invalid + span::before { content: '✖'; color: red; } input:valid + span::before { content: '✓'; color: green; } we set the <span>s to position: relative so that we can position the generated content relative to them. we then absolutely position different generated content depending on whether the form's data is valid or invalid — a green check or a red cross, respectively. to add a bit of extra urgency to the invalid data, we've also given the inputs a thick red bor...
... we set the <span>s to position: relative so that we can position the generated content relative to them. we then absolutely position different generated content depending on whether the form's data is valid or invalid — a green check or a red cross, respectively. to add a bit of extra urgency to the invalid data, we've also given the inputs a thick red border when invalid. note: we've used ::before to add these labels, as we were already using ::after for the "required" labels. you can try it below: notice how the required text inputs are invalid when empty, but valid when they have something filled in. the email input on the other hand is valid when empty, as it is not required, but invalid when it contains something that is not a proper email address. accessibility concerns the col...

Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
fully understanding how these properties work with growing and shrinking items is the real key to mastering flexbox. a first look our three properties control the following aspects of a flex item's flexibility: flex-grow: how much of the positive free space does this item get? flex-shrink: how much negative free space can be removed from this item? flex-basis: what is the size of the item before growing and shrinking happens? the properties are usually expressed as the shorthand flex property. the following code would set the flex-grow property to 2, flex-shrink to 1 and flex-basis to auto. .item { flex: 2 1 auto; } if you have read the article basic concepts of flexbox, then you will have already had an introduction to the properties. here we will explore them in depth in order th...
...rink to 1 and flex-basis to auto. .item { flex: 2 1 auto; } if you have read the article basic concepts of flexbox, then you will have already had an introduction to the properties. here we will explore them in depth in order that you can fully understand what the browser is doing when you use them. important concepts when working on the main axis there are a few concepts worth digging into before looking at how the flex properties work to control ratios along the main axis. these relate to the natural size of flex items before any growing or shrinking takes place, and to the concept of free space. flex item sizing in order to work out how much space there is available to lay out flex items, the browser needs to know how big the item is to start with. how is this worked out for items tha...
...l width of all the items with the container width. you could equally try out each example with flex-direction: column. the main axis would then be the column, and you would then need to compare the height of the items and that of the container they are in to work out the positive and negative free space. the flex-basis property the flex-basis property specifies the initial size of the flex item before any space distribution happens. the initial value for this property is auto. if flex-basis is set to auto then to work out the initial size of the item the browser first checks if the main size of the item has an absolute size set. this would be the case if you had given your item a width of 200 pixels. in that case 200px would be the flex-basis for this item. if your item is instead auto-sized,...
...e it is usually subtle, defined in the specification is one reason why flex-shrink isn’t quite the same for negative space as flex-grow is for positive space: “note: the flex shrink factor is multiplied by the flex base size when distributing negative space. this distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.” the second reason is that flexbox prevents small items from shrinking to zero size during this removal of negative free space. the items will be floored at their min-content size — the size that they become if they take advantage of any soft wrapping opportunities available to them. you can see this min-content flooring happen in the below exampl...

Using CSS transitions - CSS: Cascading Style Sheets
{ transition-property: opacity, left; transition-duration: 3s, 5s, 2s, 1s; } this gets interpreted as: div { transition-property: opacity, left; transition-duration: 3s, 5s; } using transitions when highlighting menus a common use of css is to highlight items in a menu as the user hovers the mouse cursor over them. it's easy to use transitions to make the effect even more attractive. before we look at code snippets, you might want to take a look at the live demo (assuming your browser supports transitions). first, we set up the menu using html: <nav> <a href="#">home</a> <a href="#">about</a> <a href="#">contact us</a> <a href="#">links</a> </nav> then we build the css to implement the look and feel of our menu. the relevant portions are shown here: a { color: #fff; ...
...javascript examples care should be taken when using a transition immediately after: adding the element to the dom using .appendchild() removing an element's display: none; property. this is treated as if the initial state had never occurred and the element was always in its final state. the easy way to overcome this limitation is to apply a window.settimeout() of a handful of milliseconds before changing the css property you intend to transition to. using transitions to make javascript functionality smooth transitions are a great tool to make things look much smoother without having to do anything to your javascript functionality. take the following example. <p>click anywhere to move the ball</p> <div id="foo"></div> using javascript you can make the effect of moving the ball to a ...
...ompleted. elapsedtime a float indicating the number of seconds the transition had been running at the time the event fired. this value isn't affected by the value of transition-delay. ...
...tener("transitionend", updatetransition, true); you detect the beginning of a transition using transitionrun (fires before any delay) and transitionstart (fires after any delay), in the same kind of fashion: el.addeventlistener("transitionrun", signalstart, true); el.addeventlistener("transitionstart", signalstart, true); note: the transitionend event doesn't fire if the transition is aborted before the transition is completed because either the element is made display: none or the animating property's value is changed. specifications specification status comment css transitions working draft initial definition ...

CSS reference - CSS: Cascading Style Sheets
elayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotationannotation()attr()b::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size<basic-shape>::before (:before)bleed (@page)<blend-mode>block-sizeblur()borderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-stylebor...
...leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottom@bottom-centerbox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()ccalc()caption-sidecaret-colorch@character-variantcharacter-variant()@charset:checkedcircle()clamp()clearclipclip-pathcm<color>colorcolor-adjustcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradient()containcontentcontrast()<counter>counter-incrementcounter-resetcounter-set@counter-stylecou...
...overflow-anchoroverflow-blockoverflow-inlineoverflow-wrapoverflow-xoverflow-yoverscroll-behavioroverscroll-behavior-blockoverscroll-behavior-inlineoverscroll-behavior-xoverscroll-behavior-yppad (@counter-style)paddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepage-break-afterpage-break-beforepage-break-insidepaint()paint-orderpath()pc<percentage>perspectiveperspective()perspective-originplace-contentplace-itemsplace-self::placeholderpointer-eventspolygon()<position>positionprefix (@counter-style)ptpxqqquotesrradradial-gradient()range (@counter-style)<ratio>:read-only:read-writerect()remrepeat()repeating-linear-gradient()repeating-radial-gradient():requiredresize<resolution>revertrgb()...
...is a child of b" or "a is adjacent to b." adjacent sibling combinator a + b specifies that the elements selected by both a and b have the same parent and that the element selected by b immediately follows the element selected by a horizontally. general sibling combinator a ~ b specifies that the elements selected by both a and b share the same parent and that the element selected by a comes before—but not necessarily immediately before—the element selected by b. child combinator a > b specifies that the element selected by b is the direct child of the element selected by a. descendant combinator a b specifies that the element selected by b is a descendant of the element selected by a, but is not necessarily a direct child. column combinator a || b specifies that the element sel...

position - CSS: Cascading Style Sheets
xploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpositionchrome full support 1edge full support 12firefox full support 1notes full support 1notes notes before firefox 57, absolute positioning did not work correctly when applied to elements inside tables that have border-collapse applied to them (bug 1379306).notes before firefox 30, absolute positioning of table rows and row groups was not supported (bug 63895).ie full support 4opera full support 4safari ...
... 4safari full support 1webview android full support ≤37chrome android full support 18firefox android full support 4notes full support 4notes notes before firefox 57, absolute positioning did not work correctly when applied to elements inside tables that have border-collapse applied to them (bug 1379306).notes before firefox 30, absolute positioning of table rows and row groups was not supported (bug 63895).opera android full support 14safari ios full support ...
...firefox and the specification have been modified to mimic chrome and safari's long-time behavior.ie full support 7notes full support 7notes notes in internet explorer, fixed positioning doesn't work if the document is in quirks mode...
...firefox and the specification have been modified to mimic chrome and safari's long-time behavior.opera android full support 14safari ios full support 1samsung internet android full support ...

will-change - CSS: Cascading Style Sheets
important: will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. it should not be used to anticipate performance problems. ...
... important: will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. it should not be used to anticipate performance problems. ...
...ons that the browser make is to remove the optimizations as soon as it can and revert back to normal. but adding will-change directly in a stylesheet implies that the targeted elements are always a few moments away from changing and the browser will keep the optimizations for much longer time than it would have otherwise. so it is a good practice to switch will-change on and off using script code before and after the change occurs. don't apply will-change to elements to perform premature optimization. if your page is performing well, don't add the will-change property to elements just to wring out a little more speed. will-change is intended to be used as something of a last resort, in order to try to deal with existing performance problems. it should not be used to anticipate performance ...
...complex rendering to occur as the browser attempts to prepare for the possible change. this will lead to worse performance. give it sufficient time to work. this property is intended as a method for authors to let the user-agent know about properties that are likely to change ahead of time. then the browser can choose to apply any ahead-of-time optimizations required for the property change before the property change actually happens. so it is important to give the browser some time to actually do the optimizations. find some way to predict at least slightly ahead of time that something will change, and set will-change then. be aware, that will-change may actually influence the visual appearance of elements, when used with property values, that create a stacking context (e.g. will-ch...

Cross-browser audio basics - Developer guides
type is used to inform the browser of the file type. if omitted, most browsers will attempt to guess this from the file extension. if the <audio> element is not supported then <audio> and <source> will be ignored. however any supported text or elements that you define within <audio> will be displayed or acted upon. so the ideal place to create a fallback or inform of incompatibility is before the closing </audio> tag. in this case, we've provided a simple paragraph including a link to download the audio directly. the controls attribute on the <audio> element is specified when we require the browser to provide us with default playback controls. if you don't specify this attribute, no controls will appear — and you will instead have to create your own controls and program their funct...
...dio loop> ... </audio> muted if you want the audio to start muted (no volume), add the muted attribute. <audio muted> ... </audio> note: this value is often ignored on mobile platforms. preload the preload attribute allows you to specify a preference for how the browser preloads the audio, in other words, which part of the file it downloads when the <audio> element is initialized, and before the play button is pressed. preload can take 3 different values: none: don't download anything before the play button is pressed. metadata: download the audio metadata; this is usually the best option, as it allows you to access and display information such as audio length, and allow the browser to work out which audio file it should use. auto: download the whole audio file as soon as possi...
...is established, this is the event for you. this can be useful because the initial value for duration is nan (not a number), which you probably don't want to display to your users. myaudio.addeventlistener("durationchange", function() { //you can display the duration now }); loadedmetadata metadata can consist of more than just duration — if you want to wait for all the metadata to download before doing something, you can detect the loadedmetadata event. myaudio.addeventlistener("loadedmetadata", function() { //you can display the duration now }); loadeddata the loadeddata event is fired when the first bit of media arrives. the playhead is in position but not quite ready to play. myaudio.addeventlistener("loadeddata", function() { //you could display the playhead now }); progress ...
...{ 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 the media is ready before displaying the controls if (myaudio.paused) { displaycontrols(); } else { // not ready yet - wait for canplay event myaudio.addeventlistener('canplay', function() { displaycontrols(); }); } play.addeventlistener('click', function() { myaudio.play(); play.style.display = "none"; pause.style.display = "block"; }); pause.addevent...

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
luding information on password security and how autocomplete is slightly different for hidden than for other input types. autofocus a boolean attribute which, if present, indicates that the input should automatically have focus when the page has finished loading (or when the <dialog> containing the element has been displayed). note: an element with the autofocus attribute may gain focus before the domcontentloaded event is fired. no more than one element in the document may have the autofocus attribute. if put on more than one element, the first one with the attribute receives focus. the autofocus attribute cannot be used on inputs of type hidden, since hidden inputs cannot be focused. warning: automatically focusing a form control can confuse visually-impaired people using s...
...he attribute receives focus. the autofocus attribute cannot be used on inputs of type hidden, since hidden inputs cannot be focused. warning: automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. ...
... without warning them beforehand. use careful consideration for accessibility when applying the autofocus attribute. automatically focusing on a control can cause the page to scroll on load. the focus can also cause dynamic keyboards to display on some touch devices. while a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content. capture introduced in the html media capture specification and valid for the file input type only, the capture attribute defines which media—microphone, video, or camera—should be used to capture a new file for upload with file upload control in supporting scenarios. see the...
... indicates that the user should not be able to edit the value of the input. the readonly attribute is supported text, search, url, tel, email, date, month, week, time, datetime-local, number, and password input types. see the html attribute: readonly for more information. required required is a boolean attribute which, if present, indicates that the user must specify a value for the input before the owning form can be submitted. the required attribute is supported text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio, and file. see client-side validation and the html attribute: required for more information. size valid for email, password, tel, and text input types only. specifies how much of the input is shown. basically creates ...

<script>: The Script element - HTML: Hypertext Markup Language
luated as soon as it is available. for module scripts, if the async attribute is present then the scripts and all their dependencies will be executed in the defer queue, therefore they will get fetched in parallel to parsing and evaluated as soon as they are available. this attribute allows the elimination of parser-blocking javascript where the browser would have to load and evaluate scripts before continuing to parse. defer has a similar effect in this case. this is a boolean attribute: the presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value. see browser compatibility for notes on browser support. see also async scripts for asm.js. crossorigin normal script elements pass minimal information to the wind...
...dow.onerror for scripts which do not pass the standard cors checks. to allow error logging for sites which use a separate domain for static media, use this attribute. see cors settings attributes for a more descriptive explanation of its valid arguments. defer this boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing domcontentloaded. scripts with the defer attribute will prevent the domcontentloaded event from firing until the script has loaded and finished evaluating. this attribute must not be used if the src attribute is absent (i.e. for inline scripts), in this case it would have no effect. the defer attribute has no effect on module scripts — they defer by default. scripts with the ...
... src attribute is absent (i.e. for inline scripts), in this case it would have no effect. the defer attribute has no effect on module scripts — they defer by default. scripts with the defer attribute will execute in the order in which they appear in the document. this attribute allows the elimination of parser-blocking javascript where the browser would have to load and evaluate scripts before continuing to parse. async has a similar effect in this case. integrity this attribute contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. see subresource integrity. nomodule this boolean attribute is set to indicate that the script should not be executed in browsers that support es2015 modules — in effec...
...cter encoding from the document. language like the type attribute, this attribute identifies the scripting language in use. unlike the type attribute, however, this attribute’s possible values were never standardized. the type attribute should be used instead. notes scripts without async , defer or type="module" attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page. the script should be served with the text/javascript mime type, but browsers are lenient and only block them if the script is served with an image type (image/*); a video type (video/*); an audio (audio/*) type; or text/csv. if the script is blocked, an error is sent to the element, if not a load event is sent. examples basic usage these examples show ...

A re-introduction to JavaScript (JS tutorial) - JavaScript
} javascript also contains two other prominent for loops: for...of for (let value of array) { // do something with value } and for...in: for (let property in object) { // do something with object property } the && and || operators use short-circuit logic, which means whether they will execute their second operand is dependent on the first. ...
...nction avg(...args) { var sum = 0; for (let value of args) { sum += value; } return sum / args.length; } avg(2, 3, 4, 5); // 3.5 in the above code, the variable args holds all the values that were passed into the function. it is important to note that wherever the rest parameter operator is placed in a function declaration it will store all arguments after its declaration, but not before. i.e. function avg(firstvalue, ...args) will store the first value passed into the function in the firstvalue variable and the remaining arguments in args. that's another useful language feature but it does lead us to a new problem. the avg() function takes a comma-separated list of arguments — but what if you want to find the average of an array? you could just rewrite the function as follows:...
...the root of that chain is object.prototype, whose methods include tostring() — it is this method that is called when you try to represent an object as a string. this is useful for debugging our person objects: var s = new person('simon', 'willison'); s.tostring(); // [object object] person.prototype.tostring = function() { return '<person: ' + this.full...
... again lets you set this but takes an expanded argument list as opposed to an array. function lastnamecaps() { return this.last.touppercase(); } var s = new person('simon', 'willison'); lastnamecaps.call(s); // is the same as: s.lastnamecaps = lastnamecaps; s.lastnamecaps(); // willison inner functions javascript function declarations are allowed inside other functions. we've seen this once before, with an earlier makeperson() function. an important detail of nested functions in javascript is that they can access variables in their parent function's scope: function parentfunc() { var a = 1; function nestedfunc() { var b = 4; // parentfunc can't use this return a + b; } return nestedfunc(); // 5 } this provides a great deal of utility in writing more maintainable code. i...

Promise - JavaScript
se. the fulfillment of the promise is simply logged, via a fulfill callback set using p1.then(). a few logs show how the synchronous part of the method is decoupled from the asynchronous completion of the promise. ...
...ment.getelementbyid('log'); // begin log.insertadjacenthtml('beforeend', thispromisecount + ') started (sync code started)'); // 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 ! resolve(thispromisecount); }, math.random() * 2000 + 1000); }); // we define what to do when the promise is resolved with the then() call, // and what to do when the promise is rejected wi...
...e asynchronism window.settimeout(function() { // we fulfill the promise ! ...
...he then() call, // and what to do when the promise is rejected with the catch() call p1.then(function(val) { // log the fulfillment value log.insertadjacenthtml('beforeend', val + ') 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 bu...

String.prototype.replace() - JavaScript
nondigits, p2 digits, and p3 non-alphanumerics return [p1, p2, p3].join(' - '); } let newstring = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer); console.log(newstring); // abc - 12345 - #$*% examples defining the regular expression in replace() in the following example, the regular expression is defined in replace() and includes the ignore case flag. let str = 'twas the night before xmas...'; let newstr = str.replace(/xmas/i, 'christmas'); console.log(newstr); // twas the night before christmas... this logs 'twas the night before christmas...'. note: see this guide for more explanations about regular expressions. using global and ignore with replace() global replace can only be done with a regular expression. in the following example, the regular expression includes ...
...capturing groups and the $1 and $2 replacement patterns. let re = /(\w+)\s(\w+)/; let str = 'john smith'; let newstr = str.replace(re, '$2, $1'); console.log(newstr); // smith, john this logs 'smith, john'. using an inline function that modifies the matched characters in this example, all occurrences of capital letters in the string are converted to lower case, and a hyphen is inserted just before the match location. the important thing here is that additional operations are needed on the matched item before it is given back as a replacement. the replacement function accepts the matched snippet as its parameter, and uses it to transform the case and concatenate the hyphen before returning. function stylehyphenformat(propertyname) { function uppertohyphenlower(match, offset, string) { ...
...this forces the evaluation of the match prior to the tolowercase() method. if we had tried to do this using the match without a function, the tolowercase() would have no effect. ...
...must use a function. this forces the evaluation of the match prior to the tolowercase() method. if we had tried to do this using the match without a function, the tolowercase() would have no effect. let newstring = propertyname.replace(/[a-z]/g, '-' + '$&'.tolowercase()); // won't work this is because '$&'.tolowercase() would first be evaluated as a string literal (resulting in the same '$&') before using the characters as a pattern. replacing a fahrenheit degree with its celsius equivalent the following example replaces a fahrenheit degree with its equivalent celsius degree. the fahrenheit degree should be a number ending with "f". the function returns the celsius number ending with "c". for example, if the input number is "212f", the function returns "100c". if the number is "0f", the fu...

var - JavaScript
e https://github.com/mdn/interactive-examples and send us a pull request. syntax var varname1 [= value1] [, varname2 [= value2] ... [, varnamen [= valuen]]]; varnamen variable name. it can be any legal identifier. valuen optional initial value of the variable. it can be any legal expression. default value is undefined. description var declarations, wherever they occur, are processed before any code is executed. this is called hoisting, and is discussed further below. the scope of a variable declared with var is its current execution context and closures thereof, which is either the enclosing function and functions declared within it, or, for variables declared outside any function, global. duplicate variable declarations using var will not trigger an error, even in strict mode, an...
...less another assignment is performed. 'use strict'; function foo() { var x = 1; function bar() { var y = 2; console.log(x); // 1 (function `bar` closes over `x`) console.log(y); // 2 (`y` is in scope) } bar(); console.log(x); // 1 (`x` is in scope) console.log(y); // referenceerror in strict mode, `y` is scoped to `bar` } foo(); variables declared using var are created before any code is executed in a process known as hoisting. their initial value is undefined. 'use strict'; console.log(x); // undefined (note: not referenceerror) console.log('still going...'); // still going... var x = 1; console.log(x); // 1 console.log('still going...'); // still going... in the global context, a variable declared using var is added as a non-configura...
... in strict mode will result in a referenceerror, to avoid the accidental creation of properties on the global object. note that the implication of the above, is that, contrary to popular misinformation, javascript does not have implicit or undeclared variables, it merely has a syntax that looks like it does. var hoisting because variable declarations (and declarations in general) are processed before any code is executed, declaring a variable anywhere in the code is equivalent to declaring it at the top. this also means that a variable can appear to be used before it's declared. this behavior is called "hoisting", as it appears that the variable declaration is moved to the top of the function or global code. bla = 2; var bla; // ...is implicitly understood as: var bla; bla = 2; for that ...
...at the time "x = y" is evaluated, y exists so no referenceerror is thrown and its value is undefined. so, x is assigned the undefined value. then, y is assigned the value 'a'. consequently, after the first line, x === undefined && y === 'a', hence the result. initialization of several variables var x = 0; function f() { var x = y = 1; // ...

Codecs used by WebRTC - Web media technologies
's of additional importance when videoconferencing in order to ensure that the participants are able to communicate without lag or interruptions. of secondary importance is the need to keep the video and audio synchronized, so that the movements and any ancillary information (such as slides or a projection) are presented at the same time as the audio that corresponds. general codec requirements before looking at codec-specific capabilities and requirements, there are a few overall requirements that must be met by any codec configuration used with webrtc. unless the sdp specifically signals otherwise, the web browser receiving a webrtc video stream must be able to handle video at at least 20 fps at a minimum resolution of 320 pixels wide by 240 pixels tall. it's encouraged that video be encode...
...fault—or, more accurately, preferred—codecs requested by each browser's implementation of webrtc are shown in the table below. preferred codecs for webrtc in major web browsers audio video chrome edge firefox vp9 (firefox 46 and later) vp8 opera safari choosing the right codec before choosing a codec that isn't one of the mandatory codecs (vp8 or avc for video and opus or pcm for audio), you should seriously consider the potential drawbacks: in particular, only these codecs can be generally assumed to be available on essentially all devices that support webrtc. if you choose to prefer a codec other than the mandatory ones, you should at least allow for fallback to one of the...
...ment, using g.711 at an 8 khz sample rate can provide an acceptable experience for conversation, but typically you'll use g.711 as a fallback option, since there are other options which are more efficient and sound better, such as opus in its narrowband mode. video there are a number of factors that come into play when deciding upon a video codec (or set of codecs) to support. licensing terms before choosing a video codec, make sure you're aware of any licensing requirements around the codec you select; you can find information about possible licensing concerns in our main guide to video codecs used on the web. of the two mandatory codecs for video—vp8 and avc/h.264—only vp8 is completely free of licensing requirements. if you select avc, make sure you're; aware of any potential fees you...
...u're; aware of any potential fees you may need to pay; that said, the patent holders have generally said that most typical web site developers shouldn't need to worry about paying the license fees, which are typically focused more on the developers of the encoding and decoding software. warning: the information here does not constitute legal advice! be sure to confirm your exposure to liability before making any final decisions where potential exists for licensing issues. power needs and battery life another factor to consider—especially on mobile platforms—is the impact a codec may have on battery life. if a codec is handled in hardware on a given platform, that codec is likely to allow for much better battery life and less heat production. for example, safari for ios and ipados intro...

Populating the page: how browsers work - Web Performance
he distance between a phone, a cell tower, and the name server can add significant latency. tcp handshake once the ip address is known, the browser sets up a connection to the server via a tcp three-way handshake. this mechanism is designed so that two entities attempting to communicate—in this case the browser and web server—can negotiate the parameters of the network tcp socket connection before transmitting data, often over https. tcp's three way handshaking technique is often referred to as "syn-syn-ack"—or more accurately syn, syn-ack, ack—because there are three messages transmitted by tcp to negotiate and start a tcp session between two computers. yes, this means three more messages back and forth between each server, and the request has yet to be made. tls negotiation for se...
...ters. yes, this means three more messages back and forth between each server, and the request has yet to be made. tls negotiation for secure connections established over https, another "handshake" is required. this handshake, or rather the tls negotiation, determines which cipher will be used to encrypt the communication, verifies the server, and establishes that a secure connection is in place before beginning the actual transfer of data. this requires three more round trips to the server before the request for content is actually sent. while making the connection secure adds time to the page load, a secure connection is worth the latency expense, as the data transmitted between the browser and the web server cannot be decrypted by a third party. after the 8 round trips, the browser is fi...
... request page's html is larger than the initial 14kb packet, the browser will begin parsing and attempting to render an experience based on the data it has. this is why it's important for web performance optimization to include everything the browser needs to start rendering a page, or at least a template of the page - the css and html needed for the first render -- in the first 14 kilobytes. but before anything is rendered to the screen, the html, css, and javascript have to be parsed. building the dom tree we describe five steps in the critical rendering path. the first step is processing the html markup and building the dom tree. html parsing involves tokenization and tree construction. html tokens include start and end tags, as well as attribute names and values. if the document is well-f...
...the dimensions of all the body’s descendants, with each element's box model properties, providing placeholder space for replaced elements it doesn’t know the dimensions of, such as our image. the first time the size and position of nodes are determined is called layout. subsequent recalculations of node size and locations are called reflows. in our example, suppose the initial layout occurs before the image is returned. since we didn't declare the size of our image, there will be a reflow once the image size is known. paint the last step in the critical rendering path is painting the individual nodes to the screen, the first occurence of which is called the first meaningful paint. in the painting or rasterization phase, the browser converts each box calculated in the layout phase to actu...

Add to Home screen - Progressive web apps (PWAs)
to be used when there is insufficient space to display the full name. you are advised to provide both if your app's name is particularly long. start_url: provides a path to the asset that should be loaded when the added-to-home screen app is launched. note that this has to be a relative url pointing to the site index, relative to the url of the manifest. also, be aware that chrome requires this before it will display the install banner, whereas firefox doesn't require it for showing the home-with-a-plus icon. the manifest for our sample app looks like this: { "background_color": "purple", "description": "shows random fox pictures. hey, at least it isn't cats.", "display": "fullscreen", "icons": [ { "src": "icon/fox-icon.png", "sizes": "192x192", "type": "image/...
...dprompt variable (which we'll explain later on), get a reference to our install button, and set it to display: none initially: let deferredprompt; const addbtn = document.queryselector('.add-button'); addbtn.style.display = 'none'; we hide the button initially because the pwa will not be available for install until it follows the a2hs criteria. when this happens, supporting browsers will fire a beforeinstallprompt event. we can then use a handler like the one below to handle the installation: window.addeventlistener('beforeinstallprompt', (e) => { // prevent chrome 67 and earlier from automatically showing the prompt e.preventdefault(); // stash the event so it can be triggered later. deferredprompt = e; // update ui to notify the user they can add to home screen addbtn.style.disp...
... the deferredprompt variable so it can be used later on to perform the actual installation. set the button to display: block so it appears in the ui for the user to click. set a click handler for the button. the click handler contains the following steps: hide the button again with display: none — it is no longer needed once the app is installed. use the prompt() method available on the beforeinstallprompt event object (stored in deferredprompt) to trigger showing the install prompt. respond to the user's interaction with the prompt using the userchoice property, again available on the beforeinstallprompt event object. set deferredprompt to null since it is no longer needed. so when the button is clicked, the install prompt appears. if the user selects install, the app is instal...
...pt. respond to the user's interaction with the prompt using the userchoice property, again available on the beforeinstallprompt event object. set deferredprompt to null since it is no longer needed. so when the button is clicked, the install prompt appears. if the user selects install, the app is installed (available as standalone desktop app), and the install button no longer shows (the onbeforeinstallprompt event no longer fires if the app is already installed). when you open the app, it will appear in its own window: if the user selects cancel, the state of the app goes back to how it was before the button was clicked. note: the code for this section was mostly taken from app install banners/add to home screen by pete lepage. ...

Mobile first - Progressive web apps (PWAs)
this article offers some related ideas, looking at the concept of mobile first — the practice of designing a website so that the default layout/configuration is for mobile devices, and layouts and features for desktop browsers are then layered on top of that default. this guide looks at a few useful techniques inside the mobile first umbrella. ...
...red on top of that default. this guide looks at a few useful techniques inside the mobile first umbrella. first things first — mobile as a default you may think that concentrating on the mobile experience first sounds pointless, as we are more used to dealing with desktop sites, and we surely need to consider the full gamut of features for the overall experience across desktop, mobile, etc., before then paring it down to a mobile experience that is simpler, more streamlined, or whatever. this rings true, yes, but in our experience mobile first is more about having the mobile implementation as a default layer to build on. we consider the overall experience during the planning stage, look at what subset of features will be available on mobile, desktop, etc. in tandem and how they will be imp...
...xperience mobile first is more about having the mobile implementation as a default layer to build on. we consider the overall experience during the planning stage, look at what subset of features will be available on mobile, desktop, etc. in tandem and how they will be implemented. then at implementation stage, we present the mobile layout and functionality as the default configuration provided, before additional information is loaded on top of that, whenever appropriate. this means that mobiles (often the target devices with the least available memory, bandwidth or processing power available) can be given an experience suitable for them as quickly as possible, and as free as possible of extraneous information. for example: if you are serving different styling and layout information for diff...
...evices with the least available memory, bandwidth or processing power available) can be given an experience suitable for them as quickly as possible, and as free as possible of extraneous information. for example: if you are serving different styling and layout information for different viewport sizes, etc., it makes more sense to include the narrow screen/mobile styling as the default styling before any media queries are encountered, rather than having desktop/wider screen styling first. this way, mobile devices don't have to load assets and other information twice. if you are using mechanisms like feature detection and matchmedia to conditionally load scripting functionality depending on viewport size, feature support, etc., you should just load the very basics that pretty much all browser...

The building blocks of responsive design - Progressive web apps (PWAs)
mns all left. this way they end up side-by-side, and their proportions remain the same as the browser window size varies. this is just a simple grid example, but you can apply this principle to more complex grid layouts as required. border-box sizing the padding does not affect the overall width and height of the containers because we have set the box-sizing of all elements to border-box: *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } this basically means that width and height will now set the dimensions of an element all the way up to and including the border, not just the content. so if you set width: 40%, the box width will always be 40% of its parent, and any padding and border widths set on the box will be subtracted f...
...ayout problem, and this can be done using media queries. note: media queries are a css3 feature that allow you to selectively apply css depending on the results of media feature tests — for more on the basics, read media queries. typical desktop layout in our example, we have a desktop layout, as we've already seen. this is created using the css rules included at the top of the stylesheet, before any media queries are encountered. mid-width layout we also have a mid-width layout, which is aimed at working well on tablets and narrow laptop screens. this is created by all of the css inside the first media query: @media all and (max-width: 1024px) { x-card:nth-child(1), x-card:nth-child(2) { width: 50%; } x-card:nth-child(3) { width: 100%; clear: left; } x-card...
...lution screen, so devices often apply a default zoom factor to rendered pages to avoid this. the trouble with this, then, is that raster images are zoomed in and as a result can start to look pixellated. css background images for css background images this is a fairly easy problem to solve. if you use the mobile first methodology, you will be creating your mobile layout inside your default css, before any media queries have been applied. the media queries then supply css that is only applied to the markup when the viewport is above a certain width. let's look at a quick example: header { height: 300px; width: 100%; background: url(images/small-header.jpg) center; } @media all and (min-width: 480px) { header { background: url(images/large-header.jpg) center; } } this means that...
...ich one is right for your particular situation. some available solutions are as follows: hisrc a jquery plugin that allows you to create small, medium, and large versions of an image, and then serves the appropriate one according to the browser's resolution and available network speed. mobify.js capturing a very clever technique from mozilla that allows you to capture the source of the page before it's parsed. this way, you can swap out image src values with javascript depending on browser features, circumventing browser preloading issues. this is promising, but doesn't work very well across older browsers. picturefill a javascript-based polyfill for <picture>, which works nicely, but it does require a lot of custom markup. adaptive images a server-side solution, which records the view...

alignment-baseline - SVG: Scalable Vector Graphics
defaults to the baseline with the same name as the computed value of the alignment-baseline property. note: as a presentation attribute alignment-baseline can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following four elements: <tspan>, <tref>, <altglyph>, and <textpath> usage notes value auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | top | center | bottom default value auto animatable yes auto the value is the dominant-baseline of the script to which the character belongs - i.e., use the dominant-baseline of the parent. baseline uses the dominant baseline choice ...
...raphic | alphabetic | hanging | mathematical | top | center | bottom default value auto animatable yes auto the value is the dominant-baseline of the script to which the character belongs - i.e., use the dominant-baseline of the parent. baseline uses the dominant baseline choice of the parent. matches the box’s corresponding baseline to that of its parent. before-edge the alignment-point of the object being aligned is aligned with the "before-edge" baseline of the parent text content element. text-bottom matches the bottom of the box to the top of the parent’s content area. text-before-edge the alignment-point of the object being aligned is aligned with the "text-before-edge" baseline of the parent text content element. note: this keyword may...
...he box’s mathematical baseline to that of its parent. top aligns the top of the aligned subtree with the top of the line box. center aligns the center of the aligned subtree with the center of the line box. bottom aligns the bottom of the aligned subtree with the bottom of the line box. svg 2 introduces some changes to the definition of this property. in particular: the values auto, before-edge, and after-edge have been removed. for backwards compatibility, text-before-edge may be mapped to text-top and text-after-edge to text-bottom. neither text-before-edge nor text-after-edge should be used with the vertical-align property. example <svg width="300" height="120" viewbox="0 0 300 120" xmlns="http://www.w3.org/2000/svg"> <!-- materialisation of anchors --> <path d="...
...line. specifications specification status comment css inline layoutthe definition of 'alignment-baseline' in that specification. working draft no change scalable vector graphics (svg) 2the definition of 'alignment-baseline' in that specification. candidate recommendation refers to the definition in css inline layout and notes the changes to auto, before-edge, after-edge, text-before-edge, and text-after-edge scalable vector graphics (svg) 1.1 (second edition)the definition of 'alignment-baseline' in that specification. recommendation initial definition browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/md...

page-mod - Archive of obsolete content
pagemod.pagemod({ include: "*", contentscriptfile: "./my-script.js" }); to attach multiple scripts, pass an array of urls. var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*", contentscriptfile: [data.url("jquery.min.js"), data.url("my-script.js")] }); content scripts specified using this option are loaded before those specified by the contentscript option. name: contentscript type: string,array this option specifies one or more content scripts to attach to targeted documents. each script is supplied directly as a single string: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*", contentscript: 'window.alert("matched!");' }); to attach multiple scripts, ...
...g by default, content scripts are attached after all the content (dom, js, css, images) for the document has been loaded, at the time the window.onload event fires. using this option you can customize this behavior. ...
...rg", contentstylefile: data.url("style.css") }); from firefox 34, you can use "./style.css" as an alias for the resource:// url pointing to the stylesheet in your "data" directory. so you can rewrite the code above like this: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.org", contentstylefile: "./style.css" }); content styles specified by this option are loaded before those specified by the contentstyle option. in earlier versions of this module, you couldn't use relative urls in stylesheets loaded in this way, and you had to use a workaround. in current versions this has been fixed, and the workaround is no longer needed. name:contentstyle type: string,array use this option to load one or more stylesheet rules into the targeted documents. each ...

page-worker - Archive of obsolete content
trings. these define the documents to which the page-worker's content worker applies. at least one match pattern must be supplied. see the match-pattern module for a detailed description of match pattern syntax. contentscriptfile string,array a local file url or an array of local file urls of content scripts to load. content scripts specified by this option are loaded before those specified by the contentscript option. see working with content scripts for help on setting this property. contentscript string,array a string or an array of strings containing the texts of content scripts to load. content scripts specified by this option are loaded after those specified by the contentscriptfile option. contentscriptwhen string ...
...ining the texts of content scripts to load. content scripts specified by this option are loaded after those specified by the contentscriptfile option. contentscriptwhen string when to load the content scripts. this may take one of the following 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 this property is optional and defaults to "end". contentscriptoptions ob...
...entscriptfile a local file url or an array of local file urls of content scripts to load. contentscript a string or an array of strings containing the texts of content scripts to load. contentscriptwhen when to load the content scripts. this may have one of the following 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. any kind ...

/loader - Archive of obsolete content
loader module exposes a main() function that can be used to load a main module. ...
...r'); let loader = loader(options); let program = main(loader, './main'); a module can find out whether it was loaded as main: if (require.main === module) main(); it is possible to load other modules before a main one, but it's inherently harder to do. that's because every module except main has a requirer, based on which resolution and authority decisions are made. ...
...box, 'resource://path/to/script.js') // evaluate `code` as if it was from `foo/bar.js`: evaluate(sandbox, 'foo/bar.js', { source: code, version: '1.7' // you could also use other options described above. }) require() as already mentioned in loading modules it's common to start execution by loading a main module. but sometimes you may want to prepare the environment using existing modules before doing that. in such cases you can create a requirer module instance and a version of require exposed to it with this function: let requirer = module(requirerid, requireruri); let require = require(loader, requirer); let boostrap = require(bootstrapid); resolveuri() this function is used by the loader to resolve module uri from an id using a mapping array generated from the loader's paths optio...

content/symbiont - Archive of obsolete content
frame object the host application frame in which the page is loaded. if frame is not provided hidden one will be created. contentscriptwhen string when to load the content scripts. this may take one of the following 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 this property is optional and defaults to "end". contentscriptoptions ob...
...lts to true. optional. optional. symbiont symbiont is composed from the worker trait, therefore instances of symbiont and their descendants expose all the public properties exposed by worker along with additional public properties that are listed below: properties contentscriptfile the local file urls of content scripts to load. content scripts specified by this property are loaded before those specified by the contentscript property. contentscript the texts of content scripts to load. content scripts specified by this property are loaded after those specified by the contentscriptfile property. contentscriptwhen when to load the content scripts. this may have one of the following values: "start": load content scripts immediately after the document element for the page is in...
...ontentscript property. contentscript the texts of content scripts to load. content scripts specified by this property are loaded after those specified by the contentscriptfile property. contentscriptwhen when to load the content scripts. this may have one of the following 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. any kind ...

Bootstrapped extensions - Archive of obsolete content
for details. in firefox 10 and later the chrome.manifest file located in the root of the add-on's xpi (i.e. a sibling of the install.rdf) is loaded automatically. in firefox 8 and 9 you had to load/unload the manifest manually using nsicomponentmanager.addbootstrappedmanifestlocation() and nsicomponentmanager.removebootstrappedmanifestlocation(). this feature was unavailable in firefox versions before 8. adding user interface manually if you decide to go ahead and try to develop a bootstrapped extension that modifies the application's user interface, here are a few suggestions to get you started. you need to look up the relevant application ui elements by their id by calling document.getelementbyid(), then manipulate them to inject your ui. for example, you can get access to the menu bar in...
...wn, and objects disposed of. void shutdown( data, reason ); parameters data a bootstrap data structure. reason one of the reason constants, indicating why the extension is being shut down. this will be one of app_shutdown, addon_disable, addon_uninstall, addon_upgrade, or addon_downgrade. install your bootstrap script must include an install() function, which the application calls before the first call to startup() after the extension is installed, upgraded, or downgraded. void install( data, reason ); parameters data a bootstrap data structure. reason one of the reason constants, indicating why the extension is being installed. this will be one of addon_install, addon_upgrade, or addon_downgrade. uninstall this function is called after the last call to shutdown()...
...the first call to startup() after the extension is installed, upgraded, or downgraded. void install( data, reason ); parameters data a bootstrap data structure. reason one of the reason constants, indicating why the extension is being installed. this will be one of addon_install, addon_upgrade, or addon_downgrade. uninstall this function is called after the last call to shutdown() before a particular version of an extension is uninstalled. note: if you open the add-on manager and then click "remove" on an add-on, it will not call uninstall function right away. this is a soft uninstall because of the available "undo" option. if the add-on manager is closed or another event takes place such that the "undo" option becomes unavailable, then the hard uninstall takes place and the uni...

Forms related code snippets - Archive of obsolete content
here are some <form> related code snippets. date picker (before implementing it in a working environment, please read the note about the const statement compatibility) <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>datepicker example - mdn</title> <script type="text/javascript"> /*\ |*| |*| datepicker example mdndeveloper network |*| |*| https://developer.mozilla.org/docs/code_snippets/forms |*| https://developer.mozilla.org/user:fusionchess |*| |*| this snippet is released under the gnu public license, version 3 or later. |*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| \*/ (function () { function datepicker (otarget) { const otable = document.createelement("table"), ohrow = document.createelement(...
... this.writedays(); otarget.onclick = function () { if (otable.parentnode) { otable.parentnode.removechild(otable); return; } otable.style.zindex = nzindex++; otable.style.position = "absolute"; otable.style.left = otarget.offsetleft + "px"; otable.style.top = (otarget.offsettop + otarget.offsetheight) + "px"; otarget.parentnode.insertbefore(otable, otarget); }; ainstances.push(this); } datepicker.prototype.writedays = function () { const nendblanks = (this.current.getday() + bzeroismonday * 6) % 7, nend = amonthlengths[this.current.getmonth()] + nendblanks, ntotal = nend + ((7 - nend % 7) % 7); var otd, otr; if (this.otbody) { this.container.removechild(this.otbody); } thi...
... to emulate an editable select through a <fieldset> of radioboxes and textboxes (written in pure css, without javascript), please see this example. autogrowing <textarea> this example shows how to make a textarea really autogrowing during a typing. insert some custom text in a <textarea> this example shows how to insert some html tags or smiles or any custom text in a textarea. image preview before upload the filereader.prototype.readasdataurl() method can be useful, for example, to get a preview of an image before uploading it.[article] this example shows how to use it in this way. note: the filereader() constructor was not supported by internet explorer for versions before 10. for a full compatibility code you can see our crossbrowser possible solution for image preview. filter the dig...

Extension Versioning, Update and Compatibility - Archive of obsolete content
the toolkit version format supports the firefox version format but allows greater flexibility. how applications determine compatibility when installing add-ons applications look at the targetapplication entries in the add-on's install.rdf. ...
...on that match the toolkit version of the running application. this allows you to say that your add-on will install into any toolkit based application. overriding compatibility checking for testing purposes you can tell the application to somewhat ignore compatibility checks when installing add-ons. simply create the boolean preference extensions.checkcompatibility and set it to false. note: before firefox 1.5 the preference app.extensions.version could be used to override the version that the application believed itself to be to allow normally incompatible extensions to install. choosing minversion and maxversion minversion and maxversion should specify the range of versions of the application you have tested with. in particular you should never specify a maxversion that is larger than t...
...lar http, gecko 1.9 based applications will require that you digitally sign the update manifest to ensure that it's information isn't tampered with between you creating it and applications retrieving it. the mccoy tool should be used to sign the update rdf. the technical details of the signing mechanism are beyond the scope of this document however the basics are as follows: step 1 - done once, before you publish your add-on the target: adding updatekey in install.rdf the add-on author creates a public/private rsa cryptographic key pair. the public part of the key is der encoded and then base 64 encoded and added to the add-on's install.rdf as an updatekey entry. step 2 - done every time you change your "update.rdf" file the target: setting value to signature in update.rdf when the autho...

Making it into a static overlay - Archive of obsolete content
taller packages are called xpis (pronounced "zippies"), which stands for cross-platform installer. the packages are just standard zip archives of the files to be installed along with a javascript script that performs the installation and some rdf files that describe the components being installed for the chrome registry. because our extension modifies an existing file in the mozilla distribution, before we package it up we need to separate the modifications into a different file and add them back in at run time via a dynamic xul overlay. a xul overlay is a xul file containing elements to be inserted into another xul file when the other xul file is rendered into an application interface. static overlays are added to a xul file via a reference at the top of the file (much like stylesheets and java...
...its next line is the stylesheet reference we previously added to navigator.xul. after that is a xul overlay element. this element is the top-level element in a xul overlay file and serves to ide...
...bar element in navigator.xul. when navigator.xul is rendering into the browser's application interface, this causes any attributes or child elements of the statusbar element in the overlay file to be added to the interface's dom and thus show up in the interface as if they were defined on the same element in navigator.xul. note that we've added a new attribute to the statusbarpanel element: insertbefore. this attribute identifies another statusbarpanel element within statusbar before which our element should appear. thus it allows us to define the exact position of our element relative to the other statusbarpanel elements within statusbar. if insertbefore is omitted, the element will be added as the last child of statusbar, usually before the resizer grippy. we could instead have used an inserta...

Style System Overview - Archive of obsolete content
ch initializes the correct one of the data structs on the stack (the structs used by nscssdeclaration) style data computation get*data calls nsrulenode::walkruletree, which walks from the style context's rule node towards the root rule node. to fill in the data, we call nsistylerule::mapruleinfointo on the rules. mapruleinfointo implementations must check that the property is not filled in before filling it in. walkruletree stops walking up when it finds either a none bit, a cached struct, a dependent bit, or all the properties have been filled in. walkruletree also remembers the first rule that contributed non-empty data. style data computation after walkruletree stops walking up, it calls nsrulenode::compute*data to turn the specified values into the mostly-computed style data in...
...ule tree that we can just copy and add to. if the computation in compute*data used any data from the parent style context, we cache the struct on the style context. otherwise, we cache the struct in the rule tree, on the first rule node that contributed any data, and mark dependent bits on the path up to that rule node. managing style contexts style contexts must (in most cases) be created before frames are constructed, to determine what frame to create. parent style context determines inheritance; it should always be the content parent. [design flaw in frame/sc relationship] three functions for creating style contexts on nsistyleset, wrapped by similarly named ones on nsiprescontext: resolvestylecontextfor: for elements. resolvepseudostylecontextfor: for pseudo-elements (:firs...
... constructed, to determine what frame to create. parent style context determines inheritance; it should always be the content parent. [design flaw in frame/sc relationship] three functions for creating style contexts on nsistyleset, wrapped by similarly named ones on nsiprescontext: resolvestylecontextfor: for elements. resolvepseudostylecontextfor: for pseudo-elements (:first-letter, :before, etc.) resolvestylecontextfornonelement: skips rule matching and uses root rule node (text frame optimization) managing style contexts style context resolving functions will walk the rule processors in stylesetimpl::filerules, find the correct rule node, and find a current child of the parent (“sibling sharing”) or create a new child. style context doesn't hold pointer to conten...

JavaScript Client API - Archive of obsolete content
s non-confusing (by non-confusing, we mean that people should always know with whom they are dealing and where the information or software they are downloading came from). you may not imply, either directly or by omission, that your third party client is produced or endorsed by mozilla. by providing access to the firefox sync apis, mozilla is not granting you a license to any of our trademarks. before starting before you start learning the javascript api, you should spend some time on http://docs.services.mozilla.com/ reading about how the sync service operates. this will help fundamental understanding significantly. api location the sync javascript client api is defined in files in the services/sync/ directory of mozilla-central or similar repository. terminology syncengine the main s...
...box (history, bookmarks, etc). it is possible for other components, including 3rd party extensions, to supplement the set of engines and synchronize their own data. a word of warning: the javascript client api is still a young component and is continuing to evolve. therefore, developers outside of the sync core should know that their code could require significant refactoring in future releases. before developing against the javascript api, it is recommended to speak to developers of the api. see https://wiki.mozilla.org/services/sync for their contact information. to create a custom sync engine to synchronize a new data you, you'll need to define an engine object that extends the base syncengine object. this involves writing types that extend the store, tracker, and record types as well. it ...
...arated list of engine names). you can also set up a component that registers a weave:service:ready observer and at that time, imports main.js as well as your engine. also, for me, doing weave.engines.register(fooengine) worked better then doing weave.fooengine = fooengine. reason for this is, weave will iterate through the registerengines preference and try to instantiate each engine it has there before you the line mentioned above ever has a chance to execute.this means the constructor to your engine is not ready when weave tries to instantiate it. testing and debugging your engine set observers in the tracker to tell when your datatype changes, after which the score needs to be set. you can also add api's to the engine, get a handle of the engine by going weave.engines.get("foo") and call it...

Simple Storage - Archive of obsolete content
), although the data comes loaded automatically. don't abuse these methods, since they cause firefox -- all of firefox -- to drop what it's doing to make a trip to the disk. if you call them too often, firefox may become unresponsive for some of your users. unless you are doing something strange, let jetpack flush your data for you. the namespace currently lives in the future and must be imported before it is used: jetpack.future.import("storage.simple"); methods sync()as described above, the jetpack.storage.simple object is automatically written to disk, but a feature may force flush by calling jetpack.storage.simple.sync(). don't abuse this method. open()as described above, the jetpack.storage.simple object is automatically populated when a feature is loaded, but a feature may force the objec...
...l add a notes menu with// a submenu, which lists all the notes. ...
...length > 0 ? ...

Clipboard Test - Archive of obsolete content
features can get and set the ...
...display:inline-block; width:300px; vertical-align:top;margin-right:30px} .method>.params>.param>.type{display:inline-block; width:100px; vertical-align:top;font-weight:bold;} .method>.params>.param>.type:before{content: "type "; color: #888; font-weight:normal;} .method>.params>.param>.default{display:inline-block; width:100px; vertical-align:top;font-weight:bold;} .method>.params>.param>.default:before{content: "default "; color: #888;font-weight:normal;} ]]></style> clipboard jetpack's clipboard support api provides a standardized way for features to access the clipboard. features can get and set the clipboard in various flavors of data type. the namespace associated with this api is jetpack.clipboard which provides both read and write access to the clipboard. the api is fairly straightforward...
...hello world");// in other clipboard get(flavor string)returns data to jetpack from the clipboard. if flavor is provided, the data is returned in that format. flavorreturns data to jetpack from the clipboard. if flavor is provided, the data is returned in that format. string here's an example of how to use the method to get the data on the clipboard. remember to import clipboard from the future before calling it. jetpack.import.future("clipboard");var mycontent = "<i>this is some italic text</i>";jetpack.clipboard.set( mycontent, "html" ); getcurrentflavors()returns an array of available jetpack clipboard flavors, for the current system clipboard state. jetpack.import.future("clipboard");var mycontent = "<i>this is some italic text</i>";jetpack.clipboard.set( mycontent, "html" );var flavs = je...

Simple Storage - Archive of obsolete content
), although the data comes loaded automatically. don't abuse these methods, since they cause firefox -- all of firefox -- to drop what it's doing to make a trip to the disk. if you call them too often, firefox may become unresponsive for some of your users. unless you are doing something strange, let jetpack flush your data for you. the namespace currently lives in the future and must be imported before it is used: jetpack.future.import("storage.simple"); methods sync()as described above, the jetpack.storage.simple object is automatically written to disk, but a feature may force flush by calling jetpack.storage.simple.sync(). don't abuse this method. open()as described above, the jetpack.storage.simple object is automatically populated when a feature is loaded, but a feature may force the objec...
...s menu with // a submenu, which lists all the notes. if there are no notes, we'll show a // disabled "(empty)" menuitem. ...
... ? notes : [{ label: "(empty)", disabled: true }]) }); } // modify the page's context menu by sneaking in before it's shown. if there's // a selection, add a note menuitem that makes a new note. otherwise, don't // modify the menu at all. we'll limit the number of notes to 20. old notes // will be forgotten. :( jetpack.menu.context.page.beforeshow = function (menu) { menu.reset(); if (jetpack.selection.text) menu.add({ label: "note", command: function () { notes.unshift(jetpack.selection.text); if (notes.length > 20) notes.pop(); updatejetpackmenu(); } }); }; // initialize the jetpack menu with the current notes. updatejetpackmenu(); see also settings jep 11 ...

Space Manager High Level Design - Archive of obsolete content
created the blockreflowstate's previous space manager is saved off. the new space manager instance is associated with the blockreflowstate. after the block frame's reflow has completed, the old space manager instance is re-associated with the blockreflowstate the new space manager is destroyed. if the blockreflowstate already had a space manager instance associated with it, it is stored off before being replaced, and the returned to the blockreflowstate instance after the new one has been destroyed. thus, space managers are effectively 'nested' during reflow, with each new block introducing its own space manager. use case 2: float is added to the space manager after a space manager is created for a block context's reflow chain, a floated block may be added to it. this happens in the met...
...should be private (compiles fine) nsblockframe::paint is mucking...
...should be private (compiles fine) nsblockframe::paint is mucking with nsblockbanddata in and #if 0 block - remove that and th...

Elements - Archive of obsolete content
to point to a specific binding id within a binding document. note that content cannot be inherited, only behavior. display - this attribute specifies how the tag is displayed. by setting this attribute, you can have an element have the layout and display characteristics of an existing element. for example, use the value 'xul:button' to create an element that is displayed like a button. the part before the colon is a namespace prefix so you must declare the xul namespace as well. not all tags have a unique display type. the following xul display types may be used: browser, button, checkbox, description, editor, grippy, iframe, image, label, menu, menuitem, menubar, progressmeter, radio, resizer, scrollbar, scrollbox, spacer, splitter, titlebar, treechildren and treecol. you may also use a numbe...
...been accessed. if a proto is inserted into the proto chain after binding instantiation, doing so may affect field values (this wasn't the case in prior versions of firefox). at binding attachment time, <field name="parentnode">this.parentnode</field> is undefined instead of the value of parentnode. a field no longer changes the value of a property set on the object itself (rather than a proto) before binding attachment. property <!entity % property-content "(getter?,setter?)"> <!element property %property-content;> <!attlist property id id #implied name cdata #required readonly (true|false) #implied onget cdata #implied onset cdata #implied > the proper...
...ccel - the platform's primary accelerator key. it is left up to the user agent to decide which modifier key represents the primary key. (it's the control key on windows and meta on mac.) accesskey - the platform's primary shortcut mnemonic key should be used (the alt key on windows and linux, has no effect on mac). any - this causes the filter to ignore the state of any modifiers that occur before the any keword. for example: key="x" modifiers="control shift any" - the handler will match whether or not the control and/or shift keys are pressed. this will match control-x, shift-x, control-shift-x, and x with no modifiers. it will not match any other combinations, such as alt-x or control-altx. key="x" modifiers="control any shift" - the handler will match if the shift key ...

Windows Install - Archive of obsolete content
windows install example this example shows the installation of a xpi in which user profile information is contained. note the disk space verification, the editing of the windows registry, the writing to the installation log, and the error checking before either performinstall or cancelinstall is called. // this function verifies disk space in kilobytes function verifydiskspace(dirpath, spacerequired) { var spaceavailable; // get the available disk space on the given path spaceavailable = filegetdiskspaceavailable(dirpath); // convert the available disk space into kilobytes spaceavailable = parseint(spaceavailable / 1024); // do the verification if(spaceavailable < spacerequired) { logcomment("insufficient disk space: " + dirpath); logcomment(" required : " + spac...
... var subkey; // the name of the subkey you are poking around in var valname; // the name of the value you want to look at var value; // the data in the value you want to look at. var winreg = getwinregistry() ; if(winreg != null) { // here, we get the current version. winreg.set...
... 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. // subkeys have to exist before values can be put in. var subkey; // the name of the subkey you are poking around in var valname; // the name of the value you want to look at var value; // the data in the value you want to look at. var winreg = getwinregistry() ; if(winreg != null) { // here, we get the current version. winreg.setrootkey(winreg.hkey_current_user) ;// current_user subkey = "soft...

collapse - Archive of obsolete content
« xul reference home collapse type: one of the values below determines which side of the splitter is collapsed when its grippy is clicked. if this attribute is not specified, the splitter will not cause a collapse. you should put a grippy element inside the splitter when it is used for collapsing. none no collapsing occurs. ...
...xul reference home collapse type: one of the values below determines which side of the splitter is collapsed when its grippy is clicked. if this attribute is not specified, the splitter will not cause a collapse. you should put a grippy element inside the splitter when it is used for collapsing. none no collapsing occurs. ...
...n it is used for collapsing. none no collapsing occurs. before when the grippy is clicked, the element immediately before the splitter in the same parent is collapsed so that its width or height is 0. after when the grippy is clicked, the element immediately after the splitter in the same parent is collapsed so that its width or height is 0. both either the element immediately before the splitter, or the element immediately after the splitter can be collapsed, if the size of that element would fall below the minimum size due to the position of the splitter. ...

timeout - Archive of obsolete content
there is no default. ...
...there is no default. ...
...there is no default. ...

XUL Events - Archive of obsolete content
popup after it has been hidden. attribute: onpopuphidden popuphiding this event is sent to a popup when it is about to be hidden. attribute: onpopuphiding popupshowing this event is sent to a popup just before it is popped open. this handler is usually used to dynamically set the contents when the user requests to display it. returning false from this event handler prevents the popup from appearing. attribute: onpopupshowing popupshown this event is sent to a popup after it has been opened, much like the o...
... event is sent when a checkbox is checked or unchecked, either by the user or a script. normally, you would use the command event to listen to checkbox changes, however, the command event is only sent when the user modifies the value, while the checkboxstatechange event is also sent when a script modifies the checked property of a checkbox. for user changes, the checkboxstatechange event is sent before the command event. the checkboxstatechange event does not bubble. radiostatechange this event is sent when a radio button is selected, either by the user or a script. normally, you would use the command event to listen to radio button selection changes, however, the command event is only sent when the user chan...
... this event is sent when a radio button is selected, either by the user or a script. normally, you would use the command event to listen to radio button selection changes, however, the command event is only sent when the user changes the selected radio button, while the radiostatechange event is also sent when a script modifies the selection. for user changes, the radiostatechange event is sent before the command event. the radiostatechange event bubbles so you can also attach the event handler to the enclosing radiogroup. ...

Attribute Substitution - Archive of obsolete content
« previousnext » so far, attribute replacement in an action body has been used to replace an entire attribute with the value of a variable. however, you may also replace only part of attribute's value, or use multiple variables in one attribute. for instance, to include a prefix before a variable value, you can use: <label value="my name is ?name"/> the effect will be that the ?name part of the attribute will be replaced by the value of the variable ?name. for instance, if the value of ?name is 'jake', then the attribute value will be 'my name is jake'. you can include multiple variables in one attribute if desired: <label value="my name is ?name and my age is ?age"/> this technique will work for any variable replacement in the action body, except for the uri attribute since t...
...de value="?description"/></description> the resulting generated content might be: <description>view from the top of the tower looking east of the doges palace</description> note that the textnode has been replaced with the substituted value attribute. note that in firefox 2 and earlier, a bug can make this appear to not work at times. recall that the template builder doesn't load the datasource before processing a template. as the datasource loads, the query and rules are examined with the new data as it arrives. this causes rules to create matches as the data loads. however, variables determined from a binding are evaluated using a much simpler process. the bug is that this code path for bindings doesn't handle the textnode element properly. thus, if you use a variable set in a binding, you m...
...ource loads, the query and rules are examined with the new data as it arrives. this causes rules to create matches as the data loads. however, variables determined from a binding are evaluated using a much simpler process. the bug is that this code path for bindings doesn't handle the textnode element properly. thus, if you use a variable set in a binding, you must ensure the datasource is loaded before the template is built, or just rebuild the template. another possibilty is to rearrange the rdf such that the values, in this example, the descriptions, are specified before the containers. this issue is fixed in firefox 3 (mozilla 1.9) and later. « previousnext » ...

Multiple Queries - Archive of obsolete content
. how multiple queries are processed we already know that a query generates a set of results. there's no magic to the way in which the template builder processes multiple queries. it just takes the results generated from the first query, adds the results for the second query, adds the results for the third query, and so on. ...
...) so four possible results are available, one from the first query and three from the second. however, the example shows that only content for three results are generated. what happened to the fourth result? this is where the useful aspect of multiple queries comes in. note that two of the results above are actually for the same photo (canal.jpg). the template builder removes any duplicate items before generating content. it does this by only allowing the match for the earliest query. that is, the canal.jpg generated by the second query is removed, since an earlier query (the first query) already generated a match for that result. one important distinction is that the determination of duplicates is only based on the member variable, in this case the ?photo variable. it doesn't matter whether ot...
...only based on the member variable, in this case the ?photo variable. it doesn't matter whether other variables are the same or not. if you look at the example again, you might notice that the canal photo that matches the first query has appeared in-between the other two photos, even though those photos are generated from the second query. the builder hasn't put all the matches for the first query before the matches for the second query. in fact, the order is the same as the examples that only use one query. compare the multiple query example with an earlier example that used only a single query. the photos have appeared in the same order in both cases. this is because the builder notices that the photos are in an rdf seq in the datasource and arranges them in the order they appear in the seq. th...

Accesskey display rules - Archive of obsolete content
label has two or more characters which are same as its accesskey, the first character of them will be underlined. if a label doesn't have the character, xul elements append the accesskey character with parentheses. e.g., when an accesskey of "open" is 'a', the generated label will be "open (a)". however, if the last character of the label is an ellipsis or a colon, the accesskey text is inserted before them. i.e., when an accesskey of "open…" is 'a', the generated label will be "open (a)…". and also when an accesskey of "your name:" is 'b', the generated label will be "your name (b):". this document calls the appended text "accesskey text". always appends accesskey text the basic rules are enough for western locales. however, in some locales, e.g., japanese localized build, its most ui lab...
...accesskey text always. if the value is "true" (string), the accesskey text will be appended always. don't change the pref value from your xul applications. and also note that there are no spaces between the original labels and accesskey text in the above japanese example. because typically, japanese language doesn't use spaces as word separator. this is controled by "intl.menuitems.insertseparatorbeforeaccesskeys" pref value. if the value is "true" (string), a spece will be inserted before accesskey text. don't change the pref value from your xul applications too. don't include accesskey text in labels xul applications should use dtd for localizable ui resource. at that time, accesskeys are specified by independent entity from their label. be aware, this is very important thing. when you cannot...
...キャンセル(&c)". this label will be displayed as "キャンセル(c)(c)" on the localized build. so, "(c)" will be doubled. for this issue, we recommend the following format if you use .properties: <command-name>.label=cancel <command-name>.accesskey=c note that apis of nsipromptservice are using the bad way. because the apis are already frozen. therefore, xul toolkit removes accesskey text before setting the label to the buttons. however, xul application developers should not make same mistake. ...

More Event Handlers - Archive of obsolete content
</vbox> stop event propagation once you handle an event, regardless of where in the propagation the event is, you will likely want to stop the event from being sent to further elements, essentially stopping the capturing or bubbling phases from continuing. depending on how you attach the event listener to an element, there are different ways of doing this. recall that the capturing phase occurs before the bubbling phase, so any capturing listeners will trigger before any bubbling listeners. if a capturing event stops the event propagation, none of the later capturing listeners, nor any of the bubbling listeners will ever receive notification about the events. to manually stop event propagation, call the event object's stoppropagation method, as in the following example. example 2 : source view...
...if this call was removed, both listeners would be called and both alerts would appear. prevent default action if no event handlers have been registered for an event, then after completing the capturing and bubbling phases, the element will handle the event in a default way. what will happen depends on the event and the type of element. for example, the 'popupshowing' event is sent to a popup just before it is displayed. the default action is to display the popup. if the default action is prevented, the popup will not be displayed. the default action can be prevented with the event object's preventdefault method, as in the example below. example 3 : source view <button label="types" type="menu"> <menupopup onpopupshowing="event.preventdefault();"> <menuitem label="glass"/> <menuitem lab...
...the box object in a later section, but it holds information pertaining to how the element is displayed, including the x and y position of the element. in this example code, these coordinates are subtracted from the event coordinates to get the event position relative to the element. load events the load event is sent to the document (the window tag) once the xul file has finished loading and just before the content is displayed. this event is commonly used to initialize fields and perform other tasks that need to be done before the user can use the window. you should use a load event to do these kinds of things as opposed to adding a script at the top level outside of a function. this is because the xul elements may not have loaded or fully initialized yet, so some things may not work as expecte...

Popup Menus - Archive of obsolete content
_start the popup appears below the element with the left edges of the element and the popup window aligned. if the popup window is larger than the element, is extends to the right. this is the value used for the drop-down menus associated with the browser's back and forward buttons. after_end the popup appears below the element with the right edges of the element and the popup window aligned. ...
...popup window is larger than the element, is extends to the right. this is the value used for the drop-down menus associated with the browser's back and forward buttons. after_end the popup appears below the element with the right edges of the element and the popup window aligned. before_start the popup appears above the element with the left edges of the element and the popup window aligned. before_end the popup appears above the element with the right edges of the element and the popup window aligned. end_after the popup appears to the right of the element with the bottom edges of the element and the popup window aligned. end_before the popup appears to the right of the element with the top edges of the element and the popup window aligned. start_after the popup appears to the left ...
... overlap the popup appears on top of the element. ...

Using the Editor from XUL - Archive of obsolete content
his to poke the ui (e.g. for command state maintenance, starting and stopping the throbber etc.). the contentwindow (another settable attribute on nsieditorshell) points to the xul element which is to become editable. note: since we already know this when we have an <editor></editor> tag, we should remove the need to call this. editorstartup() does some other minor bits of setup before finally kicking off the url load, which the most important part here. when the xul was parsed, the src attribute on the content frame was set to about:blank (our default 'blank page' url). we can't set that before xul parsing, so we have to force a load of the page we now want to edit. we get the url to load from the args element, then kick off the load: var url = document.getelementbyid("a...
... user if they want to save the document, throw away their changes, or cancel. note that if they cancel, the close operation is aborted. the user clicks the close widget in their os/window manager. in this case, the onclose method on the <window> element is called. the user chooses 'close' from the file menu, uses the key shortcut, or quits the application, causing all windows to be closed. before each window is closed, javascript code in globaloverlay.js tries to call a trytoclose method on each window. in editor.js, we set this to call editorcanclose(). if the user chooses to save the document, or throw away their changes, then the window is closed. when the last reference to the nseditorshell goes away (as a result of nseditorboxobject releasing its reference) it releases the owning r...
...n off selection and layout updating (to avoid flicker), and the maintenance of a placeholder transaction. this placeholder transaction enables us to batch typing events together, so that an undo undoes the whole series of keystrokes. another stack-based class, nsautorules, ensures that text insertion is wrapped with calls to nshtmleditor::startoperation() / endoperation(). these functions call beforeedit() and afteredit() on the current typing rules. now, we initialize a nstextrulesinfo with the information about the string being inserted, and call willdoaction() on the current editing rules. because the implementation of inserting text differs between the different rules (plain text vs. html, for example), it is handled entirely by the rules code, in the willdoaction()call. in composer...

XUL element attributes - Archive of obsolete content
unique identifier so that you can identify the element with. you can use this as a parameter to getelementbyid() and other dom functions and to reference the element in style sheets. insertafter type: id when an element is in an overlay, the insertafter attribute specifies the id of the element in the base window that the element should appear after. this attribute overrides the insertbefore attribute. this value may be a comma-separated list of ids, which are scanned and the first one found in the window is used. insertbefore type: id when an element is in an overlay, the insertbefore attribute specifies the id of the element in the base window that the element should appear before. this value may be a comma-separated list of ids, which are scanned and the first one found i...
...in mozilla, persistent attributes are stored in the per-profile file xulstore.json. persistence can also be stored using the document.persist function. in order for persistence to work, the element must also have an id. persistence will not remember the absence of an attribute, so for boolean attributes like checked where absence means false, you will need to explicitly set the attribute to false before the window closes (bug 15232). popup type: id should be set to the value of the id of the popup element that should appear when the user clicks on the element. position type: string (representing an integer) when an element is in an overlay, the position is an index where the child is inserted. the position is one-based, so use a value of 1 to place the element at the beginnin...
...pe: id should be set to the value of the id of the popup element that should appear when the user clicks on the element. position type: string (representing an integer) when an element is in an overlay, the position is an index where the child is inserted. the position is one-based, so use a value of 1 to place the element at the beginning. this attribute is ignored if either an insertbefore or insertafter attribute matches an element. preference-editable mozilla 1.8 type: boolean if true, the element may be used as one that modifies a preference in a prefwindow. the preference attribute may be used to connect to a preference element. this is useful for custom elements implemented in xbl. the element should fire change, command, or input event when the value is changed so t...

XUL Event Propagation - Archive of obsolete content
when the given event is "heard". the availability of event listeners is also somewhat pre-determined, though xul provide generalized event listeners (i.e., oncommand event listeners) for most of the elements in the widget hierarchy. event handlers are written by you, the developer of the interface. very often, the event raised by the element is heard by the element itself and handled right there before it bubbles up any higher. this is the case in the example code in the diagram, where the onclick event listener for the button element handles the click event by displaying a simple alert dialog: <button value="click me" onclick="alert('thank you')" /> the opposite of event bubbling is event capturing. where event bubbling propagates an event from its target up higher into the node hiearchy, e...
...the case in the example code in the diagram, where the onclick event listener for the button element handles the click event by displaying a simple alert dialog: <button value="click me" onclick="alert('thank you')" /> the opposite of event bubbling is event capturing. where event bubbling propagates an event from its target up higher into the node hiearchy, event capturing intercepts an event before it is received by other elements, even by the event target itself. the combination of basic these two basic event flow mechanisms, event bubbling and event capturing, mean that events raised in the interface can be caught anywhere above the element that raised the event. this flexibility in the xul event model is the focus of this article. the widget hierarchy consider the following xul file: ...
...... the event handler in the menu finds out which menuitem was actually clicked and takes different actions accordingly. event capturing event capturing is the complement of event bubbling. when you register an event listener on an ancestor of the event target (i.e. any node above the event-raising element in the node hierarchy), you can use event capturing to handle the event in the ancestor before it is heard in the target itself or any of the intervening nodes. in the diagram above, the alert dialog invoked by the menuitem itself is not displayed, since the root window element has used event capture to handle the event itself. in another example, an onload event handler for a xul window can register a box element to capture all the click events that are raised from its child elements: ...

iframe - Archive of obsolete content
ontent 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 type attribute on all frames in content documents is ignored; subdocuments of content documents are always content documents. warning: the type attribute must be set before the element is inserted into the document. content a browser for content. the content that is loaded inside the browser is not allowed to access the chrome above it. content-primary the primary browser for content. the content that is loaded inside the browser is not allowed to access the chrome above it. for instance, in a web browser, this would be the element that displays the we...
...n iframe as transparent.transparentthis results in the iframe's background being transparent. ...
...aredocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related nsiaccessibleprovider ...

progressmeter - Archive of obsolete content
erence home [ examples | attributes | properties | methods | related ] a meter which can be used to display the progress of a lengthy operation. it is drawn as a bar that is filled as the operation completes. in addition, an indeterminate progressmeter may be created by setting the mode attribute to undetermined. this is used when the length of time to complete an operation is not known beforehand. more information is available in the xul tutorial. attributes max, mode, value properties accessibletype, max, mode, value examples <progressmeter mode="determined" value="82"/> <progressmeter mode="undetermined"/> <!-- switching modes while the mouse is over a button --> <progressmeter mode="determined" id="myprogress"/> <button label="example" onmouseover="setloading(true)...
...mum value has been set, setting the value to "0" shows an empty bar, "100" shows a bar at full length and "25" shows the first quarter of the bar. ...
...aredocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprov...

tab - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single tab which should be placed inside a tabs element. the user may click a tab to bring the associated page of the tabbox to the front. more information is available in the xul tutorial. attributes accesskey, afterselected, beforeselected, command, crop, disabled, first-tab, image, label, last-tab, linkedpanel, oncommand, pending, pinned, selected, tabindex, unread, validate, value properties accesskey, accessibletype, command, control, crop, disabled, image, label, linkedpanel, selected, tabindex, value examples (example needed) attributes accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters...
...ld be one of the characters that appears in the label attribute for the element. afterselected type: boolean this is set to true if the tab is immediately after the currently selected tab. this is automatically set when needed and you shouldn't adjust it manually. this is primarily useful for themes so that they can adjust the appearance of the area around the selected tab. beforeselected type: boolean this is set to true if the tab is immediately before the currently selected tab. this is set automatically set when needed and you shouldn't adjust it manually. this is primarily useful for themes so that they can adjust the appearance of the area around the selected tab. crop type: one of the values below if the label of the element is too big to...
...aredocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata notes note: prior to gecko 1.9, disabl...

Getting started with XULRunner - Archive of obsolete content
nifest in the application root which will include the the manifest in our chrome root. here is the application root chrome.manifest: manifest chrome/chrome.manifest step 6: set up preferences the prefs.js file tells xulrunner the name of the xul file to use as the main window. ...
...to execute this: c:\path\to\xulrunner.exe application.ini of course, if you opted to install xulrunner then you could simply do ​%programfiles%\xulrunner.exe application.ini or on 64 bit systems ​%programfiles(x86)%\xulrunner.exe application.ini note: you can also install your application when you're finished debugging it. see xul application packaging for details. mac on the mac, before you can run a xulrunner application with everything intact, you must install it using the --install-app xulrunner commandline flag. installing the application creates an os x application bundle: /library/frameworks/xul.framework/xulrunner-bin --install-app /<path>/<to>/myapp.zip once installed, you can run the application: /library/frameworks/xul.framework/xulrunner-bin "/applications/finkl...
...firefox browser that normally starts. this is similar to starting a xul app using xulrunner. see using firefox to run xulrunner applications. this does not work if firefox itself was installed as a xul app - you need to use the installed xulrunner directly. further reading: there are many things you can do with xulrunner (who would have thought that? typical mozilla writing style at play here). before you get too far into things you might want to read the xulrunner tips article. also, throughout this tutorial you've been introduced to various bits of the toolkit api and it may help you to get familiar with it. once you've got an application that's ready for the world you'll love our article titled deploying xulrunner. for now, click the "next" link to learn about windows and menus in xulrunne...

Archived Mozilla and build documentation - Archive of obsolete content
t explorer to mozilla when netscape started the mozilla browser, it made the conscious decision to support w3c standards. as a result, mozilla is not fully backwards-compatible with netscape navigator 4.x and microsoft internet explorer legacy code; for example, mozilla does not support <layer> as i will discuss later. browsers, like internet explorer 4, that were built before the conception of w3c standards inherited many quirks. in this article, i will describe mozilla's quirks mode, which provides strong backwards html compatibility with internet explorer and other legacy browsers. monitoring downloads firefox 3 makes it easier than ever to monitor the status of downloads. although it was possible to do so in previous vers...
...purposes: table cellmap - border collapse this document describes the additional information that is stored for border collapse tables in the cellmap. table layout regression tests changes in layout, parser and content code can have unintended side effects, also known as regressions. it is good style to check for these unwanted regressions and fixing them before checkin rather than causing bugzilla avalanches. table layout strategy the table layout algorithm is based on two w3c recommendations: html 4.01 (chapter 11) and css2.1 (chapter 17).in css2 a distinction between fixed and auto layout of tables has been introduced. the auto-layout mechanism is implemented in basictablelayoutstrategy.cpp the fixe...
... using addresses of stack variables with nspr threads on win16 this is a cautionary note that may be old information for some of you. however, since it affects the portability of code, it was deemed prudent to include a short memo describing the issue. when working with mozilla, you tend to accumulate patches which need to be reviewed, super-reviewed, and/or approved before they can be committed to the trunk. when you have only a few uncommitted patches, you can get by using cvs diff, and just editing the output to remove other patches before submitting. however, this approach quickly becomes unscalable, especially when you have different fixes in the same tree. using a distributed versioning system like svk takes out much of the hassle of managing...

Mozilla release FAQ - Archive of obsolete content
elp on that software. i went and made a suggestion and people were rude to me. why? if you posted it to the mailing list/newsgroups, remember that on usenet, people are not always polite to each other. some people are just rude, and some people have a low tolerance for uninformed people. ...
...to start understanding the issues with this example, you should dig up the rfcs for the relevant protocols, any documents written on the subject, etc. ...
... attempting to save. also, progressive display of the webpage would be completely gone with this idea. for these reasons, this is generally considered a bad idea. i'd like to port mozilla to xxxos. any advice? if you're targeting a relatively recent unix, you probably will have very few problems. otherwise, the more unixlike the target system is, the easier your port will go. ...

Introduction to SSL - Archive of obsolete content
orming it that future messages from the server will be encrypted with the session key. it then sends a separate (encrypted) message indicating that the server portion of the handshake is finished. the ssl handshake is now complete, and the ssl session has begun. the client and the server use the session keys to encrypt and decrypt the data they send to each other and to validate its integrity. before continuing with the session, red hat servers can be configured to check that the client's certificate is present in the user's entry in an ldap directory. this configuration option provides one way of ensuring that the client's certificate has not been revoked. it's important to note that both client and server authentication involve encrypting some piece of data with one key of a public-private...
... to the private key used by the ca to sign the server certificate, the client won't authenticate the server's identity. if the ca's digital signature can be validated, the server treats the user's certificate as a valid "letter of introduction" from that ca and proceeds. at this point, the client has determined that the server certificate is valid. it is the client's responsibility to take step 4 before step 5. does the domain name in the server's certificate match the domain name of the server itself? this step confirms that the server is actually located at the same network address specified by the domain name in the server certificate. although step 4 is not technically part of the ssl protocol, it provides the only protection against a form of security attack known as "man in the middle." c...
...r won't authenticate the user's identity. if the ca's digital signature can be validated, the server treats the user's certificate as a valid "letter of introduction" from that ca and proceeds. at this point, the ssl protocol allows the server to consider the client authenticated and proceed with the connection as described in step 6. red hat servers may optionally be configured to perform step 5 before step 6. is the user's certificate listed in the ldap entry for the user? this optional step provides one way for a system administrator to revoke a user's certificate even if it passes the tests in all the other steps. the red hat certificate system can automatically remove a revoked certificate from the user's entry in the ldap directory. all servers that are set up to perform this step will th...

Examples - Archive of obsolete content
l stylesheet via <code>link</code>. </p> <p> note how the css rules for the background are applied in netscape 7.x, mozilla, opera 7 and internet explorer 5.5+. </p> <p> <a href="http://validator.w3.org/check/referer"><img src="https://udn.realityripple.com/samples/8a/9e64asf935.png" alt="valid xhtml 1.0!" height="31" width="88" /></a> </p> </body> </html> before testing this example by yourself, please read this. back to the article example 5 <!-- this file should have a .xml extension --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>example 5 - xhtml 1.0 strict as text/xml</title> <meta http...
...ode>. </p> <p> note how the css rules for the background are applied in netscape 7.x, mozilla, opera 7 but that internet explorer can not display the page at all. </p> <p> <a href="http://validator.w3.org/check/referer"><img src="https://udn.realityripple.com/samples/8a/9e64asf935.png" alt="valid xhtml 1.0!" height="31" width="88" /></a> </p> </body> </html> before testing this example by yourself, please read this. back to the article example 6 <!-- this file should have a .xhtml extension --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>example 6 - xhtml 1.0 strict as application/xhtml+xml</titl...
...ode>. </p> <p> note how the css rules for the background are applied in netscape 7.x, mozilla, opera 7 but that internet explorer can not display the page at all. </p> <p> <a href="http://validator.w3.org/check/referer"><img src="https://udn.realityripple.com/samples/8a/9e64asf935.png" alt="valid xhtml 1.0!" height="31" width="88" /></a> </p> </body> </html> before testing this example by yourself, please read this. back to the article stylesheet /* * if you try to view the results of these examples, * you will need to put a file named style.css with * the following content in the same directory as * the examples. */ body { padding-top: 8em; } html { color: #fff; background: #000 no-repeat fixed;} p {width: 30em; font-weight: bold;} ...

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
server-side javascript engine. now more than 10 years later, with netscape's technology group having been transformed into the mozilla foundation, server-side javascript is seeing a strong resurgence because of the simplicity it provides to web developers reinvigorated by the fact that today's cpus can process javascript more than 10x faster than the cpus of the mid-90's ever could. and just like before, it's the mozilla team that's at the core of this latest evolution of the web. in fact, the next javascript engine from mozilla, tracemonkey, is poised to boost javascript performance by factors of 20 to 40 times according to brendan eich, mozilla cto and the creator of javascript. in recent developments we also see the advent of other performant engines for javascript such as v8 from google and ...
... form and the out-logger will be used as a log display as each comment is added. the completed user interface is shown in figure 1. figure 1 – the user interface server-side dom processing another powerful concept of jaxer is the ability to access the dom server-side with javascript. this gives you added control to interrogate and manage the document structure before it's pushed to the client. listing 7 contains the code which demonstrates this concept. 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 a...
...is concept. 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. this code is simple in that it updates the innerhtml of the logging div with the contents of a text file. the contents of this file are obtained through the file i/o capabilities exposed by jaxer which is what we'll examine next. file i/o jaxer ships with a comprehensive filesystem i/o capability that is very useful. there are numerous methods in thi...

Writing JavaScript for XHTML - Archive of obsolete content
d is gone. the code looks something like this: <script type="text/javascript"> //<!-- window.alert("hello world!"); //--> </script> solution: the cdata trick this problem usually arises, when inline scripts are included in comments. this was common practice in html, to hide the scripts from browsers not capable of js. in the age of xml comments are what they were intended: comments. before processing the file, all comments will be stripped from the document, so enclosing your script in them is like throwing your lunch in a piranha pool. moreover, there's really no point to commenting out your scripts -- no browser written in the last ten years will display your code on the page. the easy solution is to do away with the commenting entirely: <script type="text/javascript"> windo...
...ented in different cases scripts that used getelementsbytagname() with an upper case html name no longer work, and attributes like nodename or tagname return upper case in html and lower case in xhtml. solution: use or convert to lower case for methods like getelementsbytagname(), passing the name in lower case will work in both html and xhtml. for name comparisons, first convert to lower case before doing the comparison (e.g., "el.nodename.tolowercase() === 'html'"). this will ensure that documents in html will compare correctly and will do no harm in xhtml where the names are already lower case. problem: my cookie isn't saved! we found out already, that the document object in xml files is different from the ones in html files. now we take a look at one widly used property that is missing ...
...blem has the same cause as the one above. this method does not exist in xmldocuments anymore. there are reasons why this decision was made, one being that a string of invalid markup will instantly break the whole document. solution: use dom methods many people avoided dom methods because of the typing to create one simple element, when document.write() worked. now you can't do this as easily as before. use dom methods to create all of your elements, attributes and other nodes. this is xml proof, as long as you keep the namespace problem in focus (e.g., there is a document.createelementns method). of course, you can still use strings like in document.write(), but it takes a little more effort. for example: var string = '<div xmlns="http://www.w3.org/999/xhtml"><h1>hello world!</h1></div>'; va...

Building Mozilla XForms - Archive of obsolete content
getting started things to know first: the xforms extension has a dependency on the schema-validation extension, so you need to build both (that's done automatically) mozilla switched from cvs to mercurial starting with firefox 3.5. during cvs times, the mozilla repository contained both extensions. since the switch to mercurial, the extensions live in separate repositories. before you can start building the xforms extension, you should check your mozilla build environment by doing a regular firefox build. have a look at the build instructions for detailed information for your platform. the following table gives you an overview of which version you want to build: firefox version gecko/toolkit version source code notes status firefox 2.0 gecko 1.8.1 cvs, branch mozilla_1_8_branc...
...a.org/xforms hg clone http://hg.mozilla.org/schema-validation that's it, you now have everything you need to get started. configure your build: the .mozconfig file mozilla uses a file called .mozconfig in your home directory to store the build configuration. for xforms, you will need to add the following line: ac_add_options --enable-extensions="default,xforms" # if you're using a mozilla source before 2010-11-06 (e.g. an old firefox 3.6 release) use this instead (see bug 601570 for details): ac_add_options --enable-extensions="default,xforms,schema-validation" a complete .mozconfig file for a release build might look like that: . $topsrcdir/browser/config/mozconfig mk_add_options moz_co_project=browser mk_add_options moz_objdir=@topsrcdir@/obj-@config_guess@ #mk_add_options autoconf=autoconf...
...s configuration: . $topsrcdir/browser/config/mozconfig mk_add_options moz_co_project=browser mk_add_options moz_objdir=@topsrcdir@/obj-@config_guess@ ac_add_options --enable-extensions="default,xforms" ac_add_options --enable-debug ac_add_options --disable-optimize ac_add_options --disable-tests building now that you have everything ready, you can rebuild mozilla with the same command you used before to build firefox without xforms. switch to the root of your source directory and start the build with make -f client.mk build after the build finishes, you'll have a xforms.xpi in obj-*/dist/xpi-stage/xforms.xpi. congratulations, you've successfully built your first mozilla xforms extension! the built xpi file will only install on a nightly snapshot from the same day or your self-built firefox v...

XForms Input Element - Archive of obsolete content
of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding special inputmode - not supported for this control incremental - supported. the default value is 'false'. mozilla extensions labelposition - only for boolean types: show the label before or after the checkbox (see below) type restrictions the input element can be bound to a node containing simple content of any data type except xsd:base64binary, xsd:hexbinray or any data type derived from these. representations the xforms input element can be represented by the following widgets for the spcified data types (or types derived from these data types): text field - the default wid...
...ance node will be updated when the control loses the focus. checkbox most often used when the form author only needs a simple 'true', 'false', '1', or '0' response from the user (xhtml/xul). characteristics used when the instance node is of type xsd:boolean or a type derived from it analogous widgets are <xhtml:input type="checkbox"/> and <xul:checkbox/> the corresponding label can be displayed before or after the checkbox by using the labelposition attribute. specific handling of attributes incremental - if "true" or this attribute is omitted from this element, then the instance node will be updated when the user checks or un-checks the checkbox. if "false" then the instance node will be updated when the checkbox loses the focus. labelposition - a mozilla xforms extension in the namespace h...
...ntal - if "true" or this attribute is omitted from this element, then the instance node will be updated when the user checks or un-checks the checkbox. if "false" then the instance node will be updated when the checkbox loses the focus. labelposition - a mozilla xforms extension in the namespace http://www.mozilla.org/projects/xfor...009/extensions. this attribute is optional, possible values are before and after. the default value if omitted is after. it controls the display of the label relative to the checkbox. before shows the label first, then the checkbox, after shows the checkbox, than the label. labelposition was introduced with mozilla xforms 0.8.8. before that, the default behavior was to display the label first, then the checkbox. since the introduction of labelposition, the behavior ...

Index - Game development
collision detection in 3d environments. followup articles will cover implementations in specific 3d libraries. 14 bounding volume collision detection with three.js 3d, games, javascript, webgl, bounding boxes, collision detection, three.js this article shows how to implement collision detection between bounding boxes and spheres using the three.js library. it is assumed that before reading this you have read our 3d collision detection introductory article first, and have basic knowledge about three.js. 15 3d games on the web games, graphics, needscontent, needsexample, webgl, webvr, three.js for rich gaming experiences on the web, the weapon of choice is webgl, which is rendered on html <canvas>. webgl is basically an opengl es 2.0 for the web — it's ...
... we can make the game enjoyable for longer by adding lives. in this article we'll implement a lives system, so that the player can continue playing until they have lost three lives, not just one. 49 game over 2d, beginner, canvas, games, javascript, phaser, tutorial, game over to make the game more interesting we can introduce the ability to lose — if you don't hit the ball before it reaches the bottom edge of the screen it will be game over. 50 initialize the framework 2d, beginner, canvas, games, html, javascript, phaser, tutorial before we can start writing the game's functionality, we need to create a basic structure to render the game inside. this can be done using html — the phaser framework will generate the required <canvas> element. 5...
...canvas, games, javascript, tutorial, collision, detection we have the bricks appearing on the screen already, but the game still isn't that interesting as the ball goes through them. we need to think about adding collision detection so it can bounce off the bricks and break them. 63 create the canvas and draw on it 2d, beginner, canvas, games, html, javascript, tutorial before we can start writing the game's functionality, we need to create a basic structure to render the game inside. this can be done using html and the <canvas> element. 64 finishing up beginner, canvas, games, javascript, tutorial, lives, requestanimationframe there's always room for improvements in any game we write. for example, we can offer more than one life to the player. the...

Bounding volume collision detection with THREE.js - Game development
using box3 and sphere three.js has objects that represent mathematical volumes and shapes — for 3d aabb and bounding spheres we can use the box3 and sphere objects. once instantiated, they have methods available to do intersection tests against other volumes. instantiating boxes to create a box3 instance, we need to provide the lower and upper boundaries of the box. ...
... create a box3 instance, we need to provide the lower and upper boundaries of the box. usually we will want this aabb to be "linked" to an object in our 3d world (like a character.) in three.js, geometry instances have a boundingbox property with min and max boundaries for the object. keep in mind that in order for this property to be defined, you need to manually call geometry.computeboundingbox beforehand. var knot = new three.mesh( new three.torusknotgeometry(0.5, 0.1), new meshnormalmaterial({})); knot.geometry.computeboundingbox(); var knotbbox = new box3( knot.geometry.boundingbox.min, knot.geometry.boundingbox.max); note: the boundingbox property takes the geometry itself as reference, and not the mesh. so any transformations such as scale, position, etc. applied to the mes...
...re have a containspoint method to do this test. var point = new three.vector3(2, 4, 7); knotbbox.containspoint(point); box3 vs. box3 the box3.intersectsbox method is available for performing this test. knotbbox.intersectsbox(otherbox); note: this is different from the box3.containsbox method, which checks whether the box3 fully wraps another one. sphere vs. sphere in a similar fashion as before, there is a sphere.intersectssphere method to perform this test. knotbsphere.intersectssphere(othersphere); sphere vs. box3 unfortunately this test is not implemented in three.js, but we can patch sphere to implement a sphere vs. aabb intersection algorithm. // expand three.js sphere to support collision tests vs box3 // we are creating a vector outside the method scope to // avoid spawning a...

Building up a basic demo with Babylon.js - Game development
ent <title>, and some css to set the width and height of the <canvas> element (which babylon.js will use to render the content on) to fill the entire available viewport space. the first <script> element includes the babylon.js library in the page; we will write our example code in the second one. there is one helper variable already included, which will store a reference to the <canvas> element. before reading on, copy this code to a new text file and save it in your working directory as index.html. initialising the babylon.js engine we have to create a babylon.js engine instance first (passing it the <canvas> element to render on) before we start developing our game. add the following code to the bottom of your second <script> element: var engine = new babylon.engine(canvas); the babylon ...
...reate a scene by adding the following lines just below our previous code: var scene = new babylon.scene(engine); scene.clearcolor = new babylon.color3(0.8, 0.8, 0.8); thus, the scene is created and the second line sets the background color to light gray. creating a rendering loop to make the scene actually visible we have to render it. add these lines at the end of the <script> element, just before the closing </script>. var renderloop = function () { scene.render(); }; engine.runrenderloop(renderloop); we're using the engine's runrenderloop() method to execute the renderloop() function repeatedly on every frame — the loop will continue to render indefinitely until told to stop. creating a camera now the setup code is in place we need to think about implementing the standard scen...
...o breathe a little life into those shapes by animating them. animation we already used position and rotation to adjust the position of the shapes; we could also scale them. to show actual animation, we need to make changes to these values inside the rendering loop at the end of our code, so they are updated on every frame. define a helper variable — t — that we will use for animations, just before the renderloop, and decrement it on every frame inside the loop, like this: var t = 0; var renderloop = function () { scene.render(); t -= 0.01; // animation code goes here }; engine.runrenderloop(renderloop); the t variable will be incremented on every rendered frame. rotation applying rotation is as easy as adding this line at the end of the renderloop function: box.rotation.y...

Bounce off the walls - Game development
all bouncing off the top edge, so now let's think about the bottom edge: if(y + dy > canvas.height) { dy = -dy; } if the ball's y position is greater than the height of the canvas (remember that we count the y values from the top left, so the top edge starts at 0 and the bottom edge is at 320 pixels, the canvas' height), then bounce it off the bottom edge by reversing the y axis movement as before. we could merge those two statements into one to save on code verbosity: if(y + dy > canvas.height || y + dy < 0) { dy = -dy; } if either of the two statements is true, reverse the movement of the ball. bouncing off the left and right we have the top and bottom edge covered, so let's think about the left and right ones. it is very similar actually, all you have to do is to repeat the sta...
...t and right we have the top and bottom edge covered, so let's think about the left and right ones. ...
...0) { dy = -dy; } at this point you should insert the above code block into the draw() function, just before the closing curly brace. the ball keeps disappearing into the wall! test your code at this point, and you will be impressed — now we have a ball that bounced off all four edges of the canvas! we have another problem however — when the ball hits each wall it sinks into it slightly before changing direction: this is because we're calculating the collision point of the wall and the center of the ball, while we should be doing it for its circumference. the ball should bounce right after if touches the wall, not when it's already halfway in the wall, so let's adjust our statements a bit to include that. update the last code you added to this: if(x + dx > canvas.width-ballradius |...

Hoisting - MDN Web Docs Glossary: Definitions of Web-related terms
f hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code. learn more technical example one of the advantages of javascript putting function declarations into memory before it executes any code segment is that it allows you to use a function before you declare it in your code. for example: function catname(name) { console.log("my cat's name is " + name); } catname("tiger"); /* the result of the code above is: "my cat's name is tiger" */ the above code snippet is how you would expect to write the code for it to work. now, let's see what happens when we call th...
...this is because of how context execution works in javascript. ...
...ve is: "my cat's name is tiger" */ the above code snippet is how you would expect to write the code for it to work. now, let's see what happens when we call the function before we write it: catname("chloe"); function catname(name) { console.log("my cat's name is " + name); } /* the result of the code above is: "my cat's name is chloe" */ even though we call the function in our code first, before the function is written, the code still works. this is because of how context execution works in javascript. hoisting works well with other data types and variables. the variables can be initialized and used before they are declared. only declarations are hoisted javascript only hoists declarations, not initializations. if a variable is declared and initialized after using it, the value will b...

XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
i=0; i < xincludes.length; i++) { var xinclude = xincludes[i]; var href = xinclude.getattribute('href'); var parse = xinclude.getattribute('parse'); var xpointer = xinclude.getattribute('xpointer'); var encoding = xinclude.getattribute('encoding'); // e.g., utf-8 // "text/xml or application/xml or matches text/*+xml or application/*+xml" before encoding (then utf-8) var accept = xinclude.getattribute('accept'); // header "accept: "+x var acceptlanguage = xinclude.getattribute('accept-language'); // "accept-language: "+x var xifallback = xinclude.getelementsbytagnamens('http://www.w3.org/2001/xinclude', 'fallback')[0]; // only one such child is allowed if (href === '' || href === null) { //...
...ll-formed document response responsenodes = [response.documentelement]; // put in array so can be treated the same way as the above } // prepend any node(s) (as xml) then remove xinclude for (j=0; j < responsenodes.length ; j++) { xincludeparent.insertbefore(responsenodes[j], xinclude); } xincludeparent.removechild(xinclude); } else if (responsetype === 'responsetext') { if (encname) { var encodingtype = response.match(pattern); if (encodingtype) { ...
...h response now (as plain text or xml) } } } catch (e) { // use xi:fallback if xinclude retrieval above failed var xifallbackchildren = xifallback.childnodes; // prepend any node(s) then remove xinclude for (j=0; j < xifallbackchildren.length ; j++) { xincludeparent.insertbefore(xifallbackchildren[j], xinclude); } xincludeparent.removechild(xinclude); } } } return docu; } ...

WAI-ARIA basics - Learn web development
hance accessibility where required. what is wai-aria? let's start by looking at what wai-aria is, and what it can do for us. a whole new set of problems as web apps started to get more complex and dynamic, a new set of accessibility features and problems started to appear. for example, html5 introduced a number of semantic elements to define common page features (<nav>, <footer>, etc.) before these were available, developers would simply use <div>s with ids or classes, e.g. <div class="nav">, but these were problematic, as there was no easy way to easily find a specific page feature such as the main navigation programmatically. the initial solution was to add one or more hidden links at the top of the page to link to the navigation (or whatever else), for example: <a href="#hidden" ...
..., only use it when necessary! note: also, try to make sure you test your site with a variety of real users — non-disabled people, people using screenreaders, people using keyboard navigation, etc. they will have better insights than you about how well it works. practical wai-aria implementations in the next section we'll look at the four areas in more detail, along with practical examples. before you continue, you should get a screenreader testing setup put in place, so you can test some of the examples as you go through. see our section on testing screenreaders for more information. signposts/landmarks wai-aria adds the role attribute to browsers, which allows you to add extra semantic value to elements on your site wherever they are needed. the first major area in which this is usefu...
...can navigate down to, meaning the selected content is easier to find. note: if there is anything you explicitly don't want screen readers to read out, you can give them the aria-hidden="true" attribute. test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: wai-aria. summary this article has by no means covered all that's available in wai-aria, but it should have given you enough information to understand how to use it, and know some of the most common patterns you will encounter that require it. ...

Fundamental CSS comprehension - Learn web development
objective: to test comprehension of fundamental css theory, syntax and mechanics. ...
... objective: to test comprehension of fundamental css theory, syntax and mechanics. ...
...he image to the right so that it sticks to the right hand side of the main business card contents, and give it a max-height of 100% (a clever trick that ensures that it will grow/shrink to stay the same height as its parent container, regardless of what height it becomes.) beware! there are two errors in the provided rulesets. using any technique that you know, track these down and fix them before moving on. new rulesets you need to write: write a ruleset that targets both the card header, and card footer, giving them both a computed total height of 50px (including a content height of 30px and padding of 10px on all sides.) but express it in ems. the default margin applied to the <h2> and <p> elements by the browser will interfere with our design, so write a rule that targets all the...

Sizing items in CSS - Learn web development
in the future. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to understand the different ways we can size things in css. the natural or intrinsic size of things html elements have a natural size, set before they are affected by any css. a straightforward example is an image. an image has a width and a height defined in the image file it is embedding into the page. this size is described as the intrinsic size — which comes from the image itself. if you place an image on a page and do not change its height and width, either using attributes on the <img> tag or css, it will be displayed using that i...
...t size you will need to load the example in a new browser window that you can resize (as the embedded <iframe> that contains the example shown above is its viewport). open the example, resize the browser window, and observe what happens to the size of the box and text. sizing things according to the viewport can be useful in your designs. ...
...section to show before the rest of your content, making that part of your page 100vh high will push the rest of the content below the viewport, meaning that it will only appear once the document is scrolled. test your skills! we have covered a lot in this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: sizing. summary this lesson has given you a rundown of some key issues that you might run into when sizing things on the web. when you move onto css layout, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on. previous overview: building blocks next in this mo...

Flexbox - Learn web development
ction the flexbox children are laid out in) — by default this is set to row, which causes them to be laid out in a row in the direction your browser's default language works in (left to right, in the case of an english browser). try adding the following declaration to your <section> rule: flex-direction: column; you'll see that this puts the items back in a column layout, much like they were before we added any css. before you move on, delete this declaration from your example. note: you can also lay out flex items in a reverse direction using the row-reverse and column-reverse values. experiment with these values too! wrapping one issue that arises when you have a fixed amount of width or height in your layout is that eventually your flexbox children will overflow their container, bre...
...s sit in the center of the main axis. the value we've used above, space-around, is useful — it distributes all the items evenly along the main axis, with a bit of space left at either end. there is another value, space-between, which is very similar to space-around except that it doesn't leave any space at either end. we'd like to encourage you to play with these values to see how they work before you continue. ordering flex items flexbox also has a feature for changing the layout order of flex items, without affecting the source order. this is another thing that is impossible to do with traditional layout methods. the code for this is simple: try adding the following css to your button bar example code: button:first-child { order: 1; } refresh, and you'll now see that the "smile" b...
...e. not supporting flexbox features however will probably break a layout completely, making it unusable. we discuss strategies for overcoming cross browser support issues in our cross browser testing module. test your skills! we have covered a lot in this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: flexbox. summary that concludes our tour of the basics of flexbox. we hope you had fun, and will have a good play around with it as you travel forward with your learning. next we'll have a look at another important aspect of css layouts — css grids. previous overview: css layout next in this module introduction to css layout normal flow fl...

Introduction to CSS layout - Learn web development
tely remove an element from normal flow, and place it using offsets from the edges of a containing block. going back to our original non-positioned example, we could add the following css rule to implement absolute positioning: .positioned { position: absolute; top: 30px; left: 30px; } here we give our middle paragraph a position value of absolute, and the same top and left properties as before. adding this code, however, will give the following result: absolute positioning example <h1>absolute positioning</h1> <p>i am a basic block level element.</p> <p class="positioned">this is my absolutely positioned element.</p> <p>i am a basic block level element.</p> body { width: 500px; margin: 0 auto; } p { background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227...
...00px; margin: 0 auto; } .positioned { background: rgba(255,84,104,.3); border: 2px solid rgb(255,84,104); padding: 10px; margin: 10px; border-radius: 5px; } .positioned { position: sticky; top: 30px; left: 30px; } note: to find more out about positioning, see our positioning article. table layout html tables are fine for displaying tabular data, but many years ago — before even basic css was supported reliably across browsers — web developers used to also use tables for entire web page layouts — putting their headers, footers, different columns, etc. in various table rows and columns. this worked at the time, but it has many problems — table layouts are inflexible, very heavy on markup, difficult to debug, and semantically wrong (e.g., screen reader users hav...
...o line up nicely by default. all we then have to do is add a bit of sizing, margin, etc. to make everything look a bit nicer and we're done. you'll notice that the caption paragraph has been given display: table-caption; — which makes it act like a table <caption> — and caption-side: bottom; to tell the caption to sit on the bottom of the table for styling purposes, even though the markup is before the <input> elements in the source. this allows for a nice bit of flexibility. html { font-family: sans-serif; } form { display: table; margin: 0 auto; } form div { display: table-row; } form label, form input { display: table-cell; margin-bottom: 10px; } form label { width: 200px; padding-right: 5%; text-align: right; } form input { width: 300px; } form p { display: ...

Legacy layout methods - Learn web development
you imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. in this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project. ...
...hat you understand how they were used if you work on an older project. prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css and styling boxes.) objective: to understand the fundamental concepts behind the grid layout systems used prior to css grid layout being available in browsers. layout and grid systems before css grid layout it may seem surprising to anyone coming from a design background that css didn’t have an inbuilt grid system until very recently, and instead we seemed to be using a variety of sub-optimal methods to create grid-like designs. we now refer to these as "legacy" methods. for new projects, in most cases css grid layout will be used in combination with one or more other modern layo...
...ike so: .content { width: calc((6.25%*8) + (2.08333333%*7)); } note: if you were to use a preprocessor such as sass, you could create a simple mixin to insert that value for you. enabling offset containers in our grid the grid we have created works well as long as we want to start all of the containers flush with the left hand side of the grid. if we wanted to leave an empty column space before the first container — or between containers — we would need to create an offset class to add a left margin to our site to push it across the grid visually. more math! let's try this out. start with your previous code, or use our fluid-grid.html file as a starting point. let's create a class in our css that will offset a container element by one column width. add the following to the bottom...

Normal Flow - Learn web development
previous overview: css layout next this article explains normal flow, or the way that webpage elements lay themselves out if you have not changed their layout. prerequisites: the basics of html (study introduction to html), and an idea of how css works (study introduction to css.) objective: to explain how browsers layout web pages by default, before we begin to make changes. as detailed in the last lesson introducing layout, elements on a webpage lay out in the normal flow, if you have not applied any css to change the way they behave. and, as we began to discover, you can change how elements behave either by adjusting their position in that normal flow, or removing them from it altogether. starting with a solid, well-structured document that is readabl...
...is the best way to begin any webpage. it ensures that your content is readable, even if the user is using a very limited browser or a device such as a screen reader that reads out the content of the page. in addition, as normal flow is designed to make a readable document, by starting in this way you are working with the document rather than fighting against it as you make changes to the layout. before digging deeper into different layout methods, it is worth revisiting some of the things you will have studied in previous modules with regard to normal document flow. how are elements laid out by default? first of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them — it's that box model thing again, which we've loo...
...ntent, as long as there is space for them to do so inside the width of the parent block level element. if there isn't space, then the overflowing text or elements will move down to a new line. if two adjacent elements both have the margin set on them and the two margins touch, the larger of the two remains, and the smaller one disappears — this is called margin collapsing, and we have met this before too. let's look at a simple example that explains all of this: <h1>basic document flow</h1> <p>i am a basic block level element. my adjacent block level elements sit on new lines below me.</p> <p>by default we span 100% of the width of our parent element, and we are as tall as our child content. our total width and height is our content + padding + border width/height.</p> <p>we are separat...

CSS layout - Learn web development
so we can now dive deep into css layout, looking at different display settings, modern layout tools like flexbox, css grid, and positioning, and some of the legacy techniques you might still want to know about. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should already: have basic familiarity with html, as discussed in the introduction to html module. be comfortable with css fundamentals, as discussed in introduction to css. understand how to style boxes. note: if you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examp...
...that. this article explains the basics of normal flow as a grounding for learning how to change it. flexbox flexbox is a one-dimensional layout method for laying out items in rows or columns. items flex to fill additional space and shrink to fit into smaller spaces. this article explains all the fundamentals. after studying this guide you can test your flexbox skills to check your understanding before moving on. grids css grid layout is a two-dimensional layout system for the web. it lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. this article will give you all you need to know to get started with page layout, then test your grid skills before moving on. floats originally for floating images inside blocks of text, the ...
...other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. in this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive. legacy layout methods grid systems are a very common feature used in css layouts, and before css grid layout they tended to be implemented using floats or other layout features. you imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. in this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project. supporting older browsers in thi...

Styling links - Learn web development
s: color for the text color. cursor for the mouse pointer style — you shouldn't turn this off unless you've got a very good reason. outline for the text outline (an outline is similar to a border, the only difference being that border takes up space in the box and an outline doesn't; it just sits over the top of the background). the outline is a useful accessibility aid, so think carefully before turning it off; you should at least double up the styles given to the link hover state on the focus state too. note: you are not just limited to the above properties to style your links — you are free to use any properties you like. just try not to go too crazy! styling some links now we've looked at the default states in some detail, let's look at a typical set of link styles. to start ...
... } a:visited { color: purple; } a:focus, a:hover { border-bottom: 1px solid; } a:active { color: red; } a[href*="http"] { background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0; background-size: 16px 16px; padding-right: 19px; } so what's going on here? we'll skip over most of the css, as it's just the same information you've looked at before. the last rule however is interesting — here we are inserting a custom background image on external links in a similar manner to how we handled custom bullets on list items in the last article — this time however we are using background shorthand instead of the individual properties. we set the path to the image we want to insert, specify no-repeat so we only get one copy inserted, and then s...
...icle, and already did some skill testing in our active learning sections, but can you remember the most important information going forward? you can find an assessment to verify that you've retained this information at the end of the module — see typesetting a community school homepage. this assessment tests all the knowledge discussed in this module, so you might want to read the next article before moving on to it. summary we hope this article has provided you with all you'll need to know about links — for now! the final article in our styling text module details how to use custom fonts on your websites, or web fonts as they are better known. previous overview: styling text next in this module fundamental text and font styling styling lists styling links web fonts types...

Basic native form controls - Learn web development
olor pickers). note: you can find examples of all the single line text field types on github at single-line-text-fields.html (see it live also). here is a basic single line text field example: <input type="text" id="comment" name="comment" value="i'm a text field"> single line text fields have only one true constraint: if you type text with line breaks, the browser removes those line breaks before sending the data to the server. the following screenshot shows default, focused and disabled text input types in firefox 71 and safari on macos and in chrome 79 and edge 18 on windows 10. note: html5 enhanced the basic original single line text field by adding special values for the type attribute that enforce specific validation constraints and other features, for example specific to enteri...
...terface feature; unless you submit your form securely, it will get sent in plain text, which is bad for security — a malicious party could intercept your data and steal passwords, credit card details, or whatever else you've submitted. the best way to protect users from this is to host any pages involving forms over a secure connection (i.e. at an https:// ... address), so the data is encrypted before it is sent. browsers recognize the security implications of sending form data over an insecure connection, and have warnings to deter users from using insecure forms. for more information on what firefox implements, see insecure passwords. hidden content another original text control is the hidden input type. this is used to create a form control that is invisible to the user, but is still sen...
... it is outside of, even if it is inside a different form element. name the name of the element; this is submitted with the form data. value the element's initial value. test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: basic controls. summary this article has covered the older input types — the original set introduced in the early days of html that is well supported in all browsers. in the next section, we'll take a look at the newer values of the type attribute that were added in html5. previous overview: forms next in this module your first form how to s...

HTML forms in legacy browsers - Learn web development
de to ensure consistency among all your form controls so user experience is not destroyed. you can also investigate some hard techniques such as rebuilding widgets with javascript. but in that case, do not hesitate to charge your client for such foolishness. feature detection and polyfills css and javascript are awesome technologies, but it's important to ensure you don't break legacy browsers. ...
...ues such as rebuilding widgets with javascript. but in that case, do not hesitate to charge your client for such foolishness. feature detection and polyfills css and javascript are awesome technologies, but it's important to ensure you don't break legacy browsers. ...
... all browsers. as a last reminder, just always think about the end users. conclusion as you can see, considering browser and operating system default form control appearance is important. there are many techniques to handle these issue; however mastering all of them is beyond the scope of this article. the basic premise is to consider whether altering the default implemenation is worth the work before embarking on the challenge. if you read all the articles of this html forms guide, you should now be at ease with using forms. ...

How to structure a web form - Learn web development
<legend> element just below the opening <fieldset> tag. the text content of the <legend> formally describes the purpose of the <fieldset> it is included inside. many assistive technologies will use the <legend> element as if it is a part of the label of each control inside the corresponding <fieldset> element. for example, some screen readers such as jaws and nvda will speak the legend's content before speaking the label of each control. here is a little example: <form> <fieldset> <legend>fruit juice size</legend> <p> <input type="radio" name="size" id="size_1" value="small"> <label for="size_1">small</label> </p> <p> <input type="radio" name="size" id="size_2" value="medium"> <label for="size_2">medium</label> </p> <p> <input type="radi...
...username" type="text" name="username"> <abbr title="required" aria-label="required">*</abbr> </label> </div> <!-- but this is probably best: --> <div> <label for="username">name: <abbr title="required" aria-label="required">*</abbr></label> <input id="username" type="text" name="username"> </div> the paragraph at the top states a rule for required elements. the rule must be included before it is used so that sighted users and users of assistive technologies such as screen readers can learn what it means before they encounter a required element. while this helps inform users what an asterisk means, it can not be relied upon. a screen reader will speak an asterisk as "star" when encountered. when hovered by a sighted mouse user, "required" should appear, which is achieved by use of...
... summary you now have all the knowledge you'll need to properly structure your web forms. we will cover many of the features introduced here in the next few articles, with the next article looking in more detail at using all the different types of form widgets you'll want to use to collect information from your users. see also a list apar...

Creating hyperlinks - Learn web development
all users, for example by putting it in the regular text. active learning: creating your own example link create an html document using your local code editor and our getting started template. inside the html body, add one or more paragraphs or other types of content you already know about. change some of the content into links. include title attributes. block level links as mentioned before, almost any content can be made into a link, even block-level elements. if you have an image you want to make into a link, use the <a> element and reference the image file with the <img> element. <a href="https://www.mozilla.org/"> <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"> </a> note: you'll find out more about using images on the web in a future arti...
...e same directory as the current file. the url you would use is contacts.html: <p>want to contact a specific staff member? find details on our <a href="contacts.html">contacts page</a>.</p> moving down into subdirectories: if you wanted to include a hyperlink inside index.html (the top level index.html) pointing to projects/index.html, you would need to go down into the projects directory before indicating the file you want to link to. this is done by specifying the directory's name, then a forward slash, then the name of the file. the url you would use is projects/index.html: <p>visit my <a href="projects/index.html">project homepage</a>.</p> moving back up into parent directories: if you wanted to include a hyperlink inside projects/index.html pointing to pdfs/project-brief.pd...
... summary that's it for links, for now anyway! you'll return to links later on in the course when you start to look at styling them. next up for html, we'll return to text semantics and look at some more advanced/unusual features that you'll find useful — advanced text formatting is your next stop. previous overview: introduction to html next ...

HTML text fundamentals - Learn web development
this would look like so: <ol> <li>remove the skin from the garlic, and chop coarsely.</li> <li>remove all the seeds and stalk from the pepper, and chop coarsely.</li> <li>add all the ingredients i...
... far have clearcut associated semantics. the situation with <b>, <i>, and <u> is somewhat more complicated. they came about so people could write bold, italics, or underlined text in an era when css was still supported poorly or not at all. elements like this, which only affect presentation and not semantics, are known as presentational elements and should no longer be used, because as we've seen before, semantics is so important to accessibility, seo, etc. html5 redefined <b>, <i>, and <u> with new, somewhat confusing, semantic roles. here's the best rule of thumb: it's likely appropriate to use <b>, <i>, or <u> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. however, it always remains critical to keep an accessibility m...
... a set of instructions --> <ol> <li> <b>slice</b> two pieces of bread off the loaf. </li> <li> <b>insert</b> a tomato slice and a leaf of lettuce between the slices of bread. </li> </ol> test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on—see test your skills: html text basics. summary that's it for now! this article should have given you a good idea of how to start marking up text in html, and introduced you to some of the most important elements in this area. there are a lot more semantic elements to cover in this area, and we'll look at a lot more in our advanced text formatting article, later on in the course. ...

Making asynchronous programming easier with async and await - Learn web development
et objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); }).catch(e => console.log(e)); you can try typing in the example yourself, or running our live example (see also the source code). but how does it work? you'll note that we've wrapped the code inside a function, and we've included the async keyword before the function keyword. this is necessary — you have to create an async function to define a block of code in which you'll run your async code; as we said earlier, await only works inside of async functions. inside the myfetch() function definition you can see that the code closely resembles the previous promise version, but there are some differences. instead of needing to chain a .then() block...
...o define a block of code in which you'll run your async code; as we said earlier, await only works inside of async functions. inside the myfetch() function definition you can see that the code closely resembles the previous promise version, but there are some differences. instead of needing to chain a .then() block on to the end of each promise-based method, you just need to add an await keyword before the method call, and then assign the result to a variable. the await keyword causes the javascript runtime to pause your code on this line, allowing other code to execute in the meantime, until the async function call has returned its result. once that's complete, your code continues to execute starting on the next line. for example: let response = await fetch('coffee.jpg'); the response return...
...the promises will all fulfill at the same time; when you run the second example, you'll see the alert box reporting a total run time of just over 3 seconds! you'll have to test your code carefully, and bear this in mind if performance starts to suffer. another minor inconvenience is that you have to wrap your awaited promises inside an async function. async/await class methods as a final note before we move on, you can even add async in front of class/object methods to make them return promises, and await promises inside them. take a look at the es class code we saw in our object-oriented javascript article, and then look at our modified version with an async method: class person { constructor(first, last, age, gender, interests) { this.name = { first, last }; this...

Asynchronous JavaScript - Learn web development
blocking operations such as fetching resources from a server. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites asynchronous javascript is a fairly advanced topic, and you are advised to work through javascript first steps and javascript building blocks modules before attempting this. if you are not familiar with the concept of asynchronous programming, you should definitely start with the general asynchronous programming concepts article in this module. if you are, then you can probably skip to the introducing asynchronous javascript module. note: if you are working on a computer/tablet/other device where you don't have the ability to create your own files...
...e you don't have the ability to create your own files, you can try out (most of) the code examples in an online coding program such as jsbin or glitch. guides general asynchronous programming concepts in this article we'll run through a number of important concepts relating to asynchronous programming, and how this looks in web browsers and javascript. you should understand these concepts before working through the other articles in the module. introducing asynchronous javascript in this article we briefly recap the problems associated with sychronous javascript, and take a first look at some of the different asynchronous javascript techniques you'll encounter, showing how they can help us solve such problems. cooperative asynchronous javascript: timeouts and intervals here we look...
...webapis, and how to write your own. making asynchronous programming easier with async and await promises can be somewhat complex to set up and understand, and so modern browsers have implemented async functions and the await operator. the former allows standard functions to implicitly behave asynchronously with promises, whereas the latter can be used inside async functions to wait for promises before the function continues. this makes chaining promises simpler and easier to read. choosing the right approach to finish this module off, we'll consider the different coding techniques and features we've discussed throughout, looking at which ones you should use when, with recommendations and reminders of common pitfalls where appropriate. ...

Build your own function - Learn web development
objective: to provide some practice in building a custom function, and explain a few more useful associated details. active learning: let's build a function the custom function we are going to build will be called displaymessage(). it will display a custom message box on a web page and will act as a customized replacement for a browser's built-in alert() function. we've seen this before, but let's just refresh our memories. type the following in your browser's javascript console, on any page you like: alert('this is a message'); the alert function takes a single argument — the string that is displayed in the alert box. try varying the string to change the message. the alert function is limited: you can alter the message, but you can't easily vary anything else, such as the ...
...s without the button being clicked! the parentheses in this context are sometimes called the "function invocation operator". you only use them when you want to run the function immediately in the current scope. in the same respect, the code inside the anonymous function is not run immediately, as it is inside the function scope. if you tried the last experiment, make sure to undo the last change before carrying on. improving the function with parameters as it stands, the function is still not very useful — we don't want to just show the same default message every time. let's improve our function by adding some parameters, allowing us to call it with some different options. first of all, update the first line of the function: function displaymessage() { to this: function displayme...
...o) little function is becoming. note: if you have trouble getting the example to work, feel free to check your code against the finished version on github (see it running live also), or ask us for help. test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: functions. these tests require skills that are covered in the next article, so you might want to read those first before trying it. conclusion congratulations on reaching the end! this article took you through the entire process of building up a practical custom function, which with a bit more work could be transplanted into a real project. in the next arti...

Introduction to web APIs - Learn web development
they work. they are based on objects your code interacts with apis using one or more javascript objects, which serve as containers for the data the api uses (contained in object properties), and the functionality the api makes available (contained in object methods). note: if you are not already familiar with how objects work, you should go back and work through our javascript objects module before continuing. let's return to the example of the web audio api — this is a fairly complex api, which consists of a number of objects. the most obvious ones are: audiocontext, which represents an audio graph that can be used to manipulate audio playing inside the browser, and has a number of methods and properties available to manipulate that audio. mediaelementaudiosourcenode, which represe...
... our bouncing balls demo (see it running live also). they use events to handle changes in state we already discussed events earlier on in the course in our introduction to events article, which looks in detail at what client-side web events are and how they are used in your code. if you are not already familiar with how client-side web api events work, you should go and read this article first before continuing. some web apis contain no events, but most contain at least a few. the handler properties that allow us to run functions when events fire are generally listed in our reference material in separate "event handlers" sections. we already saw a number of event handlers in use in our web audio api example above. to provide another example, instances of the xmlhttprequest object (each one...
...g and we really shouldn't be subjecting our users to it. note: depending on how strict the browser is, such security mechanisms might even stop the example from working locally, i.e. if you load the local example file in your browser instead of running it from a web server. at the time of writing, our web audio api example wouldn't work locally on google chrome — we had to upload it to github before it would work. summary at this point, you should have a good idea of what apis are, how they work, and what you can do with them in your javascript code. you are probably excited to start actually doing some fun things with specific apis, so let's go! next up, we'll look at manipulating documents with the document object model (dom). overview: client-side web apis next in this module ...

Video and Audio APIs - Learn web development
this is an icon font — all the characters of the alphabet equate to common icons you might want to use in an application. next we use generate...
... position: relative; content: attr(data-icon); color: #aaa; text-shadow: 1px 1px 0px black; } first of all, at the top of the css we use a @font-face block to import a custom web font. this is an icon font — all the characters of the alphabet equate to common icons you might want to use in an application. next we use generated content to display an icon on each button: we use the ::before selector to display the content before each <button> element. we use the content property to set the content to be displayed in each case to be equal to the contents of the data-icon attribute. in the case of our play button, data-icon contains a capital "p". we apply the custom web font to our buttons using font-family. in this font, "p" is actually a "play" icon, so therefore the play button ...
...wd/fwd button functionality and play/stop the video as you'd expect? this is fairly easy to fix. first of all, add the following lines inside the stopmedia() function — anywhere will do: rwd.classlist.remove('active'); fwd.classlist.remove('active'); clearinterval(intervalrwd); clearinterval(intervalfwd); now add the same lines again, at the very start of the playpausemedia() function (just before the start of the if statement). at this point, you could delete the equivalent lines from the windbackward() and windforward() functions, as that functionality has been implemented in the stopmedia() function instead. note: you could also further improve the efficiency of the code by creating a separate function that runs these lines, then calling that anywhere it is needed, rather than repeati...

Silly story generator - Learn web development
objective: to test comprehension of javascript fundamentals, such as variables, numbers, operators, strings, and arrays. ...
...ded with some raw html/css and a few text strings and javascript functions; you need to write the necessary javascript to turn this into a working program, which does the following: generates a silly story when the "generate random story" button is pressed. replaces the default name "bob" in the story with a custom name, only if a custom name is entered into the "enter custom name" text field before the generate button is pressed. converts the default us weight and temperature quantities and units in the story into uk equivalents if the uk radio button is checked before the generate button is pressed. will generate another random silly story if you press the button again (and again...) the following screenshot shows an example of what the finished program should output: to give you mo...
... to give you more of an idea, have a look at the finished example (no peeking at the source code!) steps to complete the following sections describe what you need to do. basic setup: create a new file called main.js, in the same directory as your index.html file. apply the external javascript file to your html by inserting a <script> element into your html referencing main.js. put it just before the closing </body> tag. initial variables and functions: in the raw text file, copy all of the code underneath the heading "1. complete variable and function definitions" and paste it into the top of the main.js file. this gives you three variables that store references to the "enter custom name" text field (customname), the "generate random story" button (randomize), and the <p> element at...

Handling text — strings in JavaScript - Learn web development
s, or miss one of the quotes, you'll get an error. try entering the following lines: let badstring = this is a test; let badstring = 'this is a test; let badstring = this is a test'; these lines don't work because any text without quotes around it is assumed to be a variable name, property name, a reserved word, or similar. if the browser can't find it, then an error is raised (e.g. "missing; before statement"). if the browser can see where a string starts, but can't find the end of the string, as indicated by the 2nd quote, it complains with an error (with "unterminated string literal"). if your program is raising such errors, then go back and check all your strings to make sure you have no missing quote marks. the following will work if you previously defined the variable string — try i...
...: let bigmouth = 'i've got no right to take my place...'; this leads us very nicely into our next subject. escaping characters in a string to fix our previous problem code line, we need to escape the problem quote mark. escaping characters means that we do something to them to make sure they are recognized as text, not part of the code. in javascript, we do this by putting a backslash just before the character. try this: let bigmouth = 'i\'ve got no right to take my place...'; bigmouth; this works fine. you can escape other characters in the same way, e.g. \", and there are some special codes besides. see escape notation for more details. concatenating strings concatenate is a fancy programming word that means "join together". joining together strings in javascript uses the plus (+...
...ny of our examples still use standard string literals, but we will include more template literals going forward. see our template literals reference page for more examples and details of advanced features. test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: strings. note that this also requires knowledge from the next article, so you might want to read that first. conclusion so that's the very basics of strings covered in javascript. in the next article, we'll build on this, looking at some of the built-in methods available to strings in javascript and how we can use them to manipulate our strings into just th...

Useful string methods - Learn web development
nipulate strings. strings as objects most things are objects in javascript. when you create a string, for example by using let string = 'this is my string'; your variable becomes a string object instance, and as a result has a large number of properties and methods available to it. you can see this if you go to the string object page and look down the list on the side of the page! now, before your brain starts melting, don't worry! you really don't need to know about most of these early on in your learning journey. but there are a few that you'll potentially use quite often that we'll look at here. let's enter some examples into the browser developer console. finding the length of a string this is easy — you simply use the length property. try entering the following lines: let ...
...ptional: if you don't include it, the slice ends at the end of the original string. there are other options too; study the slice() page to see what else you can find out. changing case the string methods tolowercase() and touppercase() take a string and convert all the characters to lower- or uppercase, respectively. this can be useful for example if you want to normalize all user-entered data before storing it in a database. let's try entering the following lines to see what happens: let raddata = 'my name is mud'; raddata.tolowercase(); raddata.touppercase(); updating parts of a string you can replace one substring inside a string with another substring using the replace() method. this works very simply at a basic level, although there are some advanced things you can do with it that we...
... conclusion you can't escape the fact that being able to handle words and sentences in programming is very important — particularly in javascript, as websites are all about communicating with people. this article has given you the basics that you need to know about manipulating strings for now. this should serve you well as you go into more comple...

JavaScript First Steps - Learn web development
we have put together a course that includes all the essential information you need to work towards your goal. ...
... introduction to html. introduction to css. ...
... introduction to html. introduction to css. ...

Adding features to our bouncing balls demo - Learn web development
previous overview: objects in this assessment, you are expected to use the bouncing balls demo from the previous article as a starting point, and add some new and interesting features to it. prerequisites: before attempting this assessment you should have already worked through all the articles in this module. objective: to test comprehension of javascript objects and object-oriented constructs starting point to get this assessment started, make a local copy of index-finished.html, style.css, and main-finished.js from our last article in a new directory in your local computer. alternatively, you could use a site like jsbin or glitch to do your assessment. you could paste the html, css and javascript into one of these online editors. if the online editor ...
...t. you could paste the html, css and javascript into one of these online editors. if the online editor you are using doesn't have separate javascript/css panels, feel free to put them inline <script>/<style> elements inside the html page. note: if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. hints and tips a couple of pointers before you get started. this assessment is quite challenging. read the whole assessment before you start coding, and take each step slowly and carefully. it might be a good idea to save a separate copy of the demo after you get each stage working, so you can refer back to it if you find yourself in trouble later on. project brief our bouncy ball demo is fun, but now we want to make it a little bi...
...onstructor should inherit the x, y, velx, vely, and exists properties from the shape() constructor. it should also define a color and a size property, like the original ball() constructor did. remember to set the ball() constructor's prototype and constructor appropriately. the ball draw(), update(), and collisiondetect() method definitions should be able to stay exactly the same as they were before. you also need to add a new parameter to the new ball() ( ... ) constructor call — the exists parameter should be the 5th parameter, and should be given a value of true. at this point, try reloading the code — it should work just the same as it did before, with our redesigned objects. defining evilcircle() now it's time to meet the bad guy — the evilcircle()! our game is only going to i...

JavaScript — Dynamic client-side scripting - Learn web development
aps, animated 2d/3d graphics, scrolling video jukeboxes, or more—you can bet that javascript is probably involved. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites javascript is arguably more difficult to learn than related technologies such as html and css. before attempting to learn javascript, you are strongly advised to get familiar with at least these two technologies first, and perhaps others as well. start by working through the following modules: getting started with the web introduction to html introduction to css having previous experience with other programming languages might also help. after getting familiar with the basics of javascrip...
... learn about more advanced topics, for example: javascript in depth, as taught in our javascript guide web apis modules this topic contains the following modules, in a suggested order for working through them. javascript first steps in our first javascript module, we first answer some fundamental questions such as "what is javascript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing javascript. after that, we discuss some key javascript features in detail, such as variables, strings, numbers and arrays. javascript building blocks in this module, we continue our coverage of all javascript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional...
...jects, and explain what json data is and how to work with it. asynchronous javascript in this module we take a look at asynchronous javascript, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server. client-side web apis when writing client-side javascript for web sites or applications, you won't go very far before you start to use apis — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. in this module we will explore what apis are, and how to use some of the most common apis you'll come across often in your development work. solving common javascript problems use javascript to solve common problems ...

Getting started with React - Learn web development
g variables). variables in jsx back in app.js, let’s focus on line 9: <img src={logo} classname="app-logo" alt="logo" /> here, the <img /> tag's src attribute value is in curly braces. this is how jsx recognizes variables. react will see {logo}, know you are referring to the logo import on line 2 of our app, then retrieve the logo file and render it. let's try making a variable of our own. before the return statement of app, add const subject = 'react';. your app component should now look like this: function app() { const subject = "react"; return ( <div classname="app"> <header classname="app-header"> <img src={logo} classname="app-logo" alt="logo" /> <p> hello, world! </p> </header> </div> ); } change line 8 to use our subjec...
...s like this (with the return statement shortened for brevity): function app() { const subject = "react"; return ( // return statement ); } change the signature of the app function so that it accepts props as a parameter, and delete the subject const. just like any other function parameter, you can put props in a console.log() to print it to your browser's console. go ahead and do that before the return statement, like so: function app(props) { console.log(props); return ( // return statement ); } save your file and check your browser's javascript console. you should see something like this logged: object { subject: "clarice" } the object property subject corresponds to the subject prop we added to our <app /> component call, and the string clarice corresponds to its val...
...; } when you save, the app should now greet you with "hello, clarice!". if you return to index.js, edit the value of subject, and save, your text will change. summary this brings us to the end of our initial look at react, including how to install it locally, creating a starter app, and how the basics work. in the next article, we'll start building our first proper application — a todo list. before we do that, however, let's recap some of the things we’ve learned. in react: components can import modules they need and must export themselves at the bottom of their files. component functions are named with pascalcase. you can read jsx variables by putting them between curly braces, like {so}. some jsx attributes are different than html attributes so that they don't conflict with javas...

Dynamic behavior in Svelte: working with variables and props - Learn web development
now let's do something with that information. let's start by showing a status message. find the <h2> heading with an id of list-heading and replace the hardcoded number of active and completed tasks with dynamic expressions: <h2 id="list-heading">{completedtodos} out of {totaltodos} items completed</h2> go to the app, and you should see the "2 out of 3 items completed" message as before, but this time the information is coming from the todos array. to prove it, go to that array, and try changing some of the todo object's completed property values, and even add a new todo object. observe how the numbers in the message are updated appropriately. dynamically generating the todos from the data at the moment, our displayed todo items are all static. we want to iterate over...
...eted: true }, { id: 3, name: 'complete the rest of the tutorial', completed: false } ] </script> <todos todos={todos} /> when the attribute and the variable have the same name, svelte allows you to just specify the variable as a handy shortcut, so we can rewrite our last line like this. try this now. <todos {todos} /> at this point your todos should render just like they did before, except that now we're passing them in from the app.svelte component. toggling and removing todos let's add some functionality to toggle the task status. svelte has the on:eventname directive for listening to dom events. let's add a handler to the on:click event of the checkbox input to toggle the completed value. update the <input type="checkbox"> element inside src/components/todos.svel...
...t soon. now we want to update our html so that we call addtodo() whenever the form is submitted. update the newtodo form's opening tag like so: <form on:submit|preventdefault={addtodo}> the on:eventname directive supports adding modifiers to the dom event with the | character. in this case, the preventdefault modifier tells svelte to generate the code to call event.preventdefault() before running the handler. explore the previous link to see what other modifiers are available. if you try adding new todos at this point, the new todos are added to the todos array but our ui is not updated. remember that in svelte reactivity is triggered with assignments. that means that the addtodo() function is executed, the element is added to the todos array, but svelte won't detect that th...

Adding a new todo form: Vue events, methods, and models - Learn web development
ls, and methods. creating a new to-do form we now have an app that displays a list of to-do items. however, we can't update our list of items without manually changing our code! let's fix that. let's create a new component that will allow us to add a new to-do item. in your components folder, create a new file called todoform.vue. add a blank <template> and a <script> tag like before: <template></template> <script> export default {}; </script> let's add in an html form that lets you enter a new todo item and submit it into the app. we need a <form> with a <label>, an <input>, and a <button>. update your template as follows: <template> <form> <label for="new-todo-input"> what needs to be done? </label> <input type="text" id="new-t...
... some text to the <input> field, and click the "add" button. you should see the value you entered logged to your console, for example: label value: my value changing v-model behavior with modifiers in a similar fashion to event modifiers, we can also add modifiers to change the behavior of v-model. in our case, there are two worth considering. the first, .trim, will remove whitespace from before or after the input. we can add the modifier to our v-model statement like so: v-model.trim="label". the second modifier we should consider is called .lazy. this modifier changes when v-model syncs the value for text inputs. as mentioned earlier, v-model syncing works by updating the variable using events. for text inputs, this sync happens using the input event. often, this means that vue is syn...
...odoitems array. this can be done by pushing a new to-do item object to the array containing our new data. update your addtodo() method like so: addtodo(todolabel) { this.todoitems.push({id:uniqueid('todo-'), label: todolabel, done: false}); } try testing your form again, and you should see new to-do items get appended to the end of the list. let's make a further improvement before we move on. if you submit the form while the input is empy, todo items with no text still get added to the list. to fix that, we can prevent the todo-added event from firing when name is empty. since name is already being trimmed by the .trim directive, we only need to test for the empty string. go back to your todoform component, and update the onsubmit() method like so. if the label value is...

Handling common HTML and CSS problems - Learn web development
mall to read, or perhaps the site is slow because of expensive animations. let's go forth and look at how we can reduce cross browser errors that result from html/css. first things first: fixing general problems we said in the first article of this series that a good strategy to begin with is to test in a couple of modern browsers on desktop/mobile, to make sure your code is working generally, before going on to concentrate on the cross browser issues. in our debugging html and debugging css articles, we provided some really basic guidance on debugging html/css — if you are not familiar with the basics, you should definitely study these articles before carrying on. basically, it is a matter of checking whether your html and css code is well formed and doesn't contain any syntax errors. ...
...local copy of selectivizr-example-start.html. if you look at this running live, you'll see that it contains two paragraphs, one of which is styled. we've selected the paragraph with p:first-child, which won't work in old versions of ie. now download mootools and selectivizr, and save them in the same directory as your sample html. put the following code into the head of your html document, just before the opening <style> tag: <script type="text/javascript" src="mootools-core-1.6.0.js"></script> <!--[if (gte ie 6)&(lte ie 8)]> <script type="text/javascript" src="selectivizr-min.js"></script> <![endif]--> if you try running this in an old version of ie, it should work fine. handling css prefixes another set of problems comes with css prefixes — these are a mechanism ori...
...ternal resource links. for example, see http://caniuse.com/#search=video (you just have to enter the feature you are searching for into the text box). stackoverflow.com (so) is a forum site where you can ask questions and have fellow developers share their solutions, look up previous posts, and help other developers. you are advised to look and see if there is an answer to your question already, before posting a new question. for example, we searched for "cross browser html5 video" on so, and very quickly came up with html5 video with full cross browser compatibility. aside from that, try searching your favorite search engine for an answer to your problem. it is often useful to search for specific error messages if you have them — other developers will be likely to have had the same problems...

Testopia
ory, please report it to us so that we can fix most critical ones on time for testopia 3.0. do not ask when we plan to release 3.0, because we really don't know. "as soon as possible" is our best answer. testopia 2.5 this versions supports bugzilla 4.2 and 4.4, and the best news is that it no longer requires a patch for bugzilla. if you are upgrading, please reverse the existing version's patch before installing. a fresh install only requires that you untar the tarball in your bugzilla root directory and run checksetup. thanks go to lpsolit from the bugzilla team for his work in making this possible. testopia 2.4 this version supports bugzilla 3.6. important notice: if you are upgrading on a case sensitive filesystem you must remove the existing testopia folder in the extensions directory. ...
... filesystem you must remove the existing testopia folder in the extensions directory. if you have made modifications to the testopia source code, you will need to merge them into the new testopia folder (capital t). if you are on windows or another case insensitive file system you should first rename the folder (testopia-old for example) and then unzip the tarball. you can then merge your changes before deleting the old version. api users take note: positional parameters are now deprecated. all params should now be sent in a hash (struct, dict, hashmap or whatever your language of choice calls key, value pairs). though all attempts have been made to provide continuing support for positional parameters, please be aware that some api calls may fail until you make this change. also, future version...
...precated. all params should now be sent in a hash (struct, dict, hashmap or whatever your language of choice calls key, value pairs). though all attempts have been made to provide continuing support for positional parameters, please be aware that some api calls may fail until you make this change. also, future versions may remove this support completely. as always please backup your installation before attempting to install or upgrade. testopia 2.3 this version supports bugzilla 3.4. the main new features are: support xml export and import of test plans and children support csv export of test cases and results. new reports: worst offender and case roll-up set priorities on indidual case-runs new clone options uses the latest extjs 3.0 library converts testopia into a true bugzilla ex...

Chrome registration
ion appversion<=version appversion>version appversion>=version indicates that the instruction should only be applied if the extension is installed into the application version identified. multiple appversion flags may be included on a single line, in which case the line is applied if any of the flags match. the version string must conform to the toolkit version format. note: versions of gecko before gecko 1.8.0.13 and gecko 1.8.1.5 contained a bug where if you use the comparisons <, > or =, the version string had be two or more characters long. if not, you would get a message in the error console that the appversion flag was not recognized. see bug 380398. platformversion when supporting more then one application, it is often more convenient for an extension to specify which gecko versio...
...s the following instructions are supported in bootstrapped extensions: manifest content locale skin override debugging a chrome manifest file the chrome list extension shows all registered chrome. ...
...is very helpful when trying to write a chrome.manifest file as you can inspect where the files are being mapped from (jar files, local directory, etc.) old-style contents.rdf manifests before the plaintext manifests were introduced (which happened in firefox 1.5, toolkit 1.8), rdf manifests named "contents.rdf" were used to register chrome. this format is deprecated; however, seamonkey versions before version 2 do not support the plaintext manifest format yet, so contents.rdf manifests are required for extensions that wish to maintain backwards compatibility with firefox 1.0 or the suite. gecko 1.9.2 note the contents.rdf manifest format is no longer supported at all starting with gecko 1.9.2; add-ons already installed using this format will continue to work but can no longer be installe...

Configuring Build Options
do not make substantive changes to this document without consulting benjamin smedberg <benjamin@smedbergs.us> or one of the build-config peersthis document details how to configure firefox builds. most of the time a mozconfig file is not required. the default options are the most well-supported, so it is preferable to add as few options as possible. please read the following directions carefully before building, and follow them in order. skipping any step may cause the build to fail, or the built software to be unusable. build options, including options not usable from the command-line, may appear in "confvars.sh" files in the source tree. using a mozconfig configuration file the choice of which mozilla application to build and other configuration options can be configured in a mozconfig file...
...ch the mozilla source. disabling these tests can speed build time and reduce disk space considerably. developers should generally not use this option. localization mk_add_options moz_co_locales=isocode tbd. ac_add_options --enable-ui-locale=isocode tbd. ac_add_options --with-l10n-base=/path/to/base/dir tbd. other options mk_add_options autoclobber=1 if a clobber would be required before a build, this will cause mach to clobber and continue with the build instead of asking the user to manually clobber and exiting. ac_add_options --disable-crypto cryptography is enabled by default. in some countries, it may be illegal to use or export cryptographic software. you should become familiar with the cryptography laws in your country. on the 1.7 and aviary branches, cryptography was o...
...nabling the crash reporter in your local build, you will need to run mach with the --enable-crash-reporter (note the extra dash) to enable it at runtime, like so: `./mach run --enable-crash-reporter` ac_add_options --enable-warnings-as-errors this makes compiler warnings into errors which fail the build. this can be useful since certain warnings coincide with reviewbot lints which must be fixed before merging. ac_add_options --with-ccache=/path/to/.mozbuild/sccache/sccache this enables sccache to speed up builds. this saves a considerable amount of time directly after a clobber build, so pulling in new updates and rebasing is less time-consuming. example mozconfig files mozilla's official builds use mozconfig files from the appropriate directory within each repository. warning: thes...

Simple Instantbird build
nection for the initial source download. setup: depending on your operating system you will need to carry out a different process to prepare your machine. so firstly complete the instructions for your os and then continue following these build instructions. windows build prerequisites gnu/linux build prerequisites mac os x build prerequisites tip: after completing setup for your os, and before you get the source, you can opt to add the progressextension to your mercurial.ini (for windows) or .hgrc (for *nix / mac) file. this will provide status feedback during the lengthy clone / download process. see: configure mercurial .hgrc file for progress extension. get the source note: on windows, you won't be able to build the instantbird source code if it's under a directory with spaces in ...
...s/purple if you've set up your build environment as above, then all you need to do is: echo 'ac_add_options --enable-extensions=purple' >> .mozconfig in the comm-central directory, or just add the ac_add_options --enable-extensions=purple line to your .mozconfig with your favorite editor. then just re-run the mach command above (you may need to clobber (see below), or you can do the addition before running make for the first time). running to run your build, you can use ./mozilla/mach run there are various command line parameters you can add, e.g. to specify a profile. various temporary files, libraries, and the instantbird executable will be found in your object directory (under comm-central/), which is prefixed with obj-. the exact name depends on your system and os. for example, a m...
... incremental builds when you are working on your own patches, an incremental build is often enough, and is very fast indeed. this will only rebuild a particular folder. so, for instantbird, you would run mach build im which has been configured to automatically rebuild /chat as well. upstream changes to fetch the latest upstream changes, in your comm-central directory, run the same command as before: python client.py checkout problems building? have you: tried a clobber? this means deleting the object directory so that your next build is completely fresh. to do this you can use mach clobber checked the instantbird buildbot for known failures at the time you pulled the code? if the trunk is broken, you may wish to consider building one of the branches (to pull the source co...

Eclipse CDT
dd the directory containing the eclipse binary to your path (/applications/eclipse.app/contents/eclipse/ on mac). (while package managers like snap sometimes provide an eclipse package, they do not include the c++ developer tools. since it's a pain to install them and keep them up to date we do not recommend getting eclipse this way.) increase eclipse's memory limits! make sure you do this! before you use eclipse with the mozilla source you must increase its memory limits. when eclipse's indexer tries to process the mozilla source, eclipse will need considerably more memory than the limits imposed by its default configuration. you can increase eclipse's memory limits using the eclipse.ini that lives alongside the eclipse binary. set an initial heap space of 1 gb and max heap space of 5 gb...
...rectory (for example, to take account of some changes that you yourself made) select "index > freshen all files" on that directory. to rebuild the entire index (for example when you pull from mozilla-central) select "index > rebuild" on the project root. usage tips below are some of the more useful user tips. (if you're thinking of adding tips, please first consider how widely useful they'll be before adding to this already lengthy page.) for further documentation see the official eclipse user guide and eclipse cdt user guide. keyboard shortcuts regarding key bindings (keyboard shortcuts), the bindings given below are the defaults. you can change the key bindings by opening the workspace preferences (eclipse > preferences, or window > preferences) and selecting "general > keys". you can set ...
..." issue. (update 2017-03-28: the option index all header variants has been added in version 8.3.0, as explained in a comment of the mentioned bug. this option allows to have multiple definitions for the same header file, which might fix this issue. update 2017-11-04 by jwatt: ticking the "index all header variants" option caused eclipse to blow through the 12 gb of ram i'd given it while indexing before it ran out of memory and crashed.) there are parser errors it is expected that eclipse will show parser errors even for a known-good copy of the mozilla source. parser errors/warnings are indicated by red/yellow markers on files in the project explorer tab, and in the gutter down the right-hand side of open source files. in the case of the latter you can click on the marker to jump to the probl...

Error codes returned by Mozilla APIs
mponents.results. for example, by using components.results.ns_error_not_initialized general errors the following errors are general and can occur when using any component. ns_error_not_initialized (0xc1f30001) an attempt was made to use a component or object which has not yet been initialized. these components usually provide an initialization method, often called init, which must be called before other methods are used. ns_error_already_initialized (0xc1f30002) an attempt is made to initialize a component or object again which has already been initialized. ns_error_not_implemented (0x80004001) this error is caused by methods which are not implemented. this could occur because the implementation has not yet been written, or because the component intentionally does not support the desir...
...le with a unique filename. this indicates that too many files have been created already. ns_error_file_no_device_space (0x80520010) ns_error_file_name_too_long (0x80520011) indicates that a file name or path is larger than the platform can handle. ns_error_file_not_found (0x80520012) an attempt was made to access a file that does not exist. use nsifile.exists() to check if the file exists beforehand. ns_error_file_read_only (0x80520013) an attempt was made to create or write to a file or directory that is read only. this might happen if the file is not writable, the directory containing the file is not writable or the disk is write protected. use nsifile.iswritable() to check if the file can be written to. ns_error_file_dir_not_empty (0x80520014) when calling nsifile.remove() on a di...
...x80530005) an invalid character was used in a tag or attribute name. ns_error_dom_no_data_allowed_err (0x80530006) ns_error_dom_no_modification_allowed_err (0x80530007) this error can occur when an attempt is made to modify an aspect of an object that cannot be changed. ns_error_dom_not_found_err (0x80530008) a node was not found. for example, an attempt was made to use the element.insertbefore method to insert a node before one that is not a child. ns_error_dom_not_supported_err (0x80530009) the operation is not supported. ns_error_dom_inuse_attribute_err (0x8053000a) ns_error_dom_invalid_state_err (0x8053000b) an attempt was made to use an object which is no longer usable. ns_error_dom_syntax_err (0x8053000c) an attribute value or property was set to an invalid value. ns_er...

Storage access policy: Block cookies from trackers
't yet plan to ship to release users; experimental features will not be included in this documentation, but may nevertheless impact the functionality of domains classified as trackers. we recommend sites test with firefox nightly, as this includes the newest version of our protections. as described above, note that nightly may include additional protections that end up getting removed or changed before they reach our release users. we’ll keep this page updated with the newest information as we strengthen our protections. these protections are on by default in nightly. the cookie policy can be enabled in other versions of firefox through the content blocking settings (these steps will vary by version; the linked documentation includes a dropdown to select the appropriate firefox version). re...
...mission on origins that have already been granted access. each time the heuristic is activated, or a success call to the storage access api is made, the pre-existing storage access expiration will be extended by 30 days, counting from the time the previous access was granted. please note that in the future we expect to make changes to how long storage access will remain valid for. as mentioned before, the way to know that you will be able to use storage as a third-party going forward will be using the storage access api. debugging we encourage site owners to test their sites, particularly those that rely on third-party content integrations. we’ve added several new features to firefox to make testing easier. developer tools notifications the network monitor in firefox developer tools now...
...social content provider that is classified as a tracker will not have access to their third-party cookies when the user first visits a new first party. thus, the user may appear logged out to the service despite being logged in when they visit the provider’s website directly. depending on the type of integration, the user may have to take some action to interact with the social content provider before the provider is given access to their cookies. for example: for social login, the user may have to click a login button on the first party. for social like or share buttons, the user will have to first interact with the button in a logged-out state. once they do, many social content providers will prompt them to log in. after these interactions, the provider will receive third-party storage...

Extending a Protocol
, pwindowglobal is in charge of contructing the parent/child relationship. without this, we can't send messages. anyway, let's put the above into practice by creating our custom protocol: pecho.ipdl. custom protocol - pecho.ipdl this next part requires us to both specify the protocol and actually implement everything in c++. it's quite involved and, unfortunately, all steps need to be done before we can successfully recompile. we will try to compile our code as we go, noting what we need to do along the way. to be sure, ipdl looks like a crazy mix of webidl, c++ header files, and es6. the syntax should hopefully be fairly obvious though. unfortunately, it's not really fully documented anywhere - and the ipdl parser gets easily confused (hence us excluding comments below). creating...
...tax is correct, and now we need to pwindowglobal.ipdl to manage our pecho protocol. updating pwindowglobal.ipdl open up ./dom/ipc/pwindowglobal.ipdl. we need to add the following things: at the top of the file: include protocol pecho; after "manager pbrowser or pinprocess;", add: manages pecho; finally, under parent: add async pecho(); - this is the "constructor" part we talked about before, which will allow us to eventually send messages. so roughly, it looks like this (things in bold is what we added). // stuff.. include protocol pecho; async protocol pwindowglobal { // stuff... manages pecho; child: // stuff... parent: async pecho(); // more stuff... } if the above additions are unclear, please see the final implementation of pecho as a diff in phabri...
...ild() = default; bool mactoralive; }; } // end of namespace dom } // end of namespace mozilla and add the echochild.h to dom/ipc/moz.build, as part of the exports.mozilla.dom array. again, remember that this must be in alphabetical order! compiling this will now complain: "fatal error: 'mozilla/dom/echoparent.h' file not found", so let's define echoparent.h. defining echoparent.h like before, create ./dom/ipc/echoparent.h, and code it as follows - the inline comments describe what's going on. note the recvecho(), we finally get to define where a message is received, yay!: #ifndef mozilla_dom_echoparent_h #define mozilla_dom_echoparent_h #include "mozilla/dom/pechoparent.h" namespace mozilla { namespace dom { class echoparent final : public pechoparent { friend class pechoparent...

Bootstrapping a new locale
ll the utility. clone the source code the next step is to download a copy of the source code to your local system, using mercurial. you will need to "hg clone" the existing release branch for mozilla so you have all the files locally for you to begin localization. make sure to have the directory where you intend to work as the current path on your terminal. (you should "cd" to the directory before beginning.) in the terminal, type the following command: $ hg clone http://hg.mozilla.org/releases/mozilla-x.x.x/ where "x.x.x" is the existing release branch version. for instance, for firefox 3.6, we use mozilla-1.9.2. refer to l10n:branches for the list of all branches. if you are interested in localizing thunderbird 3, seamonkey 2 or other mozilla projects based on gecko 1.9.1 you'll ne...
...) files into your localization. first, you should specify your locale's language identifier in ab-cd format, where "ab" is the iso 639 language code, and cd is the iso 3166 country code. the "-cd" part is only necessary to differentiate between versions of a language that are subtly different from country to country, such as in "en-us" and "en-gb" for united states english and british english. before you run the copy commands, you need to make the locale directory at the same level as the mozilla-1.9.x/ you just cloned from above. navigate to that level making sure you are *not* inside mozilla-1.9.x/ and then run the following commands. warning: don't copy and paste these commands; you need to replace "ab-cd" with your language identifier first and 1.9.x with the most current release branch...
...at order to proceed through translation. the localization phase lists (firefox 3.5: ff35.phaselist, firefox 3.6: ff36.phaselist). description of phases. land your translated files one by one, making sure it follows the *mozilla-1.9.2* structure. this will familiarize you with our "hg" commands and will get us something that we can import easily when you are done. working with bit bucket before a team becomes official, we like to get the localizers comfortable with the hg commands that allow for cloning, pulling, committing, and pushing work to an experimental repository. we use a web service called bit bucket to start the learning process. to begin, contact the l10n-drivers to let them know that you are interested in starting a localization. the l10n-drivers will help set up an expe...

Localizing without a specialized tool
ck or a binary file that is ready for installation. repeating the process allows a localizer to create a testable package to see his or her work as they progress to a final version. if you choose to localize mozilla with nothing more than a text editing application and not a specialized tool, this document (along with create a new localization) will enable you to learn just what needs to be done. before we start, did you make sure to install mercurial and confirm that you have set up the proper build environment on your local machine? you cannot begin localizing mozilla file by file without a specialized tool without going through the create a new localization page. what we will translate we will translate a small piece of the ui found in the search bar. the search bar is next to the right of t...
...ch engines...". to start, make sure you are in /path/to/your/working/directory/l10n-mozilla-1.9.2/x-testing and then, type the command mkdir /browser/chrome/browser now, step back out to the broader directory that contains both your l10n base (l10n-mozilla-1.9.2) and the en-us source code (mozilla-1.9.2). you can do this by typing: cd ../../ where each ".." represents the prior sub directory before the main directory where you want to be. you can always check the path by typing pwd once you are in the root working directory with both en-us source and the l10n base, copy the searchbar.dtd file by typing cp mozilla-1.9.2/browser/locales/chrome/browser/searchbar.dtd l10n-mozilla-1.9.2/x-testing/browser/chrome/browser/ open the file in your x-testing directory and translate the words inside t...
...'ll see, "add %s", where %s is replaced by the name of the site. again, to start, make sure you are in /path/to/your/working/directory/l10n-mozilla-1.9.2/x-testing now, step back out to the broader directory that contains both your l10n base (l10n-mozilla-1.9.2) and the en-us source code (mozilla-1.9.2). you can do this by typing: cd ../../ where each ".." represents the prior sub directory before the main directory where you want to be. you can always check the path by typing pwd once you are in the root working directory with both en-us source and the l10n base, copy the searchbar.dtd file by typing cp mozilla-1.9.2/browser/locales/chrome/browser/search.properties l10n-mozilla-1.9.2/x-testing/browser/chrome/browser/ open that file and translate the strings that follow the "=". for ins...

QA phase
this is due to a bug in the build logic. please either follow the above structure closely or adjust the commands below according to your custom setup. to copy this file to the appropriate directory, do the following: navigate to your working directory from your command-line terminal (i.e., where you created the folder structure described above). enter the following commands: ...
... test your localization. don't lose your work! your work is so important! we would really hate to see you lose any of it. after you test your localization, you should send it to a remote repository, which will serve as a backup for your work and will let others follow your progress. we're going to go through the process below. the official localization teams use repositories at hg.mozilla.org. before a team becomes official, we like to get the localizers comfortable with the hg commands that allow for cloning, pulling, committing, and pushing work to an experimental repository. we use a web service called bit bucket to start the learning process. note: you must have mercurial configured before you begin. that step is back on the initial setup page. if you haven't done that yet, don't worry,...
... cloning, pulling, committing, and pushing work to an experimental repository. we use a web service called bit bucket to start the learning process. note: you must have mercurial configured before you begin. that step is back on the initial setup page. if you haven't done that yet, don't worry, we'll wait for you! pushing to your repository there are a couple of things you should take note of before you push to your repository: make sure that your files have been encoded in unicode without bom (byte order mark). remember that here you are pushing an entire directory, not a .zip archive file or an .xpi lang pack. the instructions below will help you learn how to use your hg repository. after your new repository is created by the l10n-drivers, please visit the url for your repo. we'll...

Release phase
se to connet with your mercurial repository: http and ssh. be advised that there's an important distinction between them. you can pull using both, but you can only push through ssh. consequently, if you already have a local clone that you pulled using http, you'll need to modify a config file to tell mercurial to push through ssh. let's go over configuring your connection protocols. configuration before you try pushing, you need to tell ssh which username you wish to use for connecting with hg.mozilla.org. this should be your mozilla ldap account name. add the following lines to your ~/.ssh/config file, replacing user@host.domain with your mozilla ldap account name: host hg.mozilla.org user user@host.domain if you have already cloned the remote repository using the http protocol using thi...
...hangesets will need to be pushed to the remote repository. the output will look something like this: comparing with ssh://hg.mozilla.org/releases/l10n-central/x-testing searching for changes changeset: 0:7c543e8f3a6a tag: tip user: your name <email@example.com> date: mon nov 23 18:08:25 2009 +0100 summary: added search bar strings make sure this output is accurate before continuing. once you've made sure the outgoing output is accurate, push this changeset to hg.mozilla.org by running the hg push command. mercurial will connect to the remote repository, authenticate through ssh and send the changesets. the output should look something like this: pushing to ssh://hg.mozilla.org/releases/l10n-central/x-testing searching for changes adding changesets adding manif...
...-to-release. only new l10n work is evaluated. this is done by generating a diff between the new release revision being considered and the previously approved release revision. focus is still on technical accuracy and completion of l10n work; not translation quality. release revisions are evaluated, not entire l10n repos. sign-offs do not need to be approved before revision merge between release channels, although it is recommended. there is a specific process to follow in bugzilla for requesting these reviews: file a bug requesting the review. attach your files to the bug. once attached, open the attachment details. in the attachment details, select the ? from the dropdown menu next to the review flag or the appropriate appr...

SVN for Localizers
eady installed cygwin but it didn't include the svn package, run the cygwin installer again and be sure to check the box beside subversion package. this option is found in the devel category. a possible alternative is to install tortoisesvn (graphical interface and command line client). note: if you do not already have access to svn, visit this wiki page on how to get set up with an svn account before proceeding. mozilla's svn repositories mozilla's svn server is publicly available at https://svn.mozilla.org. despite there being several directories at the root of the svn server, only the projects and mozillamessaging.com directories apply to web localizers. for this tutorial we'll use the mozilla.com project. here's the layout you will find within the projects/mozilla.com directory: navi...
... output with every change made to each file. it's a bit hard to read, but you can also create a diff file (aka a diff patch) use svn diff > /path/to/output/file.diff to save the output to a file. note that path/to/output is meant to indicate the directory on your computer where you wish to store the diff file. you can also run svn status to check the list of modified files (they'll display a m before the name) you're about to commit. once you're satisfied with changes, commit them to the appropriate mozilla svn repository by entering the following command: svn commit -m "minor modifications for firefox [version #] beta page for [your locale]" the svn commit command will commit your changes directly to the mozilla svn repositories. since you are writing to the repository here, you will ...
...e online. you will have the chance to see how the localized website will look when it's pushed to prod (i.e., a website that regular visitors will see). when localizing websites, l10n-drivers will always add needed files to your repository or update your files with new strings in english. it's very important for you to update your working copy with the newest files from mozilla svn repository before you start making changes. enter the following command from the command-line: svn update your local svn repository (i.e., working directory) will be updated with the newest files from the url you initially cloned your repository from. it's very important that you do this often. as a general rule, you should at least do it before translating anything. sometimes mistakes happen and you need t...

Creating localizable web applications
. _("continue to step 3") . "</a> &raquo;</b>", $locale_conf->url('/demo_create_3'));?></div> using &laquo; and &raquo; should be ok here for rtl languages (they are flipped correctly if there are no latin characters next to them, which there aren't any), so let's leave it as it is. in general though, we should consider implementing such decorations as css images (background-image or ::after's/::before's content) and then select them with "html[dir="rtl"] > ...". it a safer method. <?php if($showwearthis) { ?> $(".try-button").personasbutton({ 'haspersonas':'<span><?= _("wear this");?></span><span>&nbsp;</span>', 'hasfirefox':'<span><?= _("get personas now!");?></span><span>&nbsp;</span>', 'nofirefox':'<span><?= _("get personas with firefox");?></span><span>&nbsp;</span>' }); <...
...alent, with the "؟" character which is used in some rtl languages, like arabic and persian (note that hebrew uses "?"). you should then display the right icon depending on the locale. the following example shows how to achieve this with css. snippet 1. bad: <div class="tut_didyouknow"> <img src="/static/img/question-64.png" class="tut_icon"> <?printf (_("did you know you can test a persona before you submit it? <b><a href=\"%s\">find out how!</a>&raquo;</b>"), $locale_conf->url('/demo_create_3#test'));?> </div> snippet 2. good: css: div.tut_didyouknow { background: url(/static/img/question-64.png) no-repeat 0 0; padding-left: 64px; } html[dir='rtl'] div.tut_didyouknow { background-image: url(/static/img/question-64.png); background-position: 100% 0; padding-lef...
...</div> snippet 2. good: css: div.tut_didyouknow { background: url(/static/img/question-64.png) no-repeat 0 0; padding-left: 64px; } html[dir='rtl'] div.tut_didyouknow { background-image: url(/static/img/question-64.png); background-position: 100% 0; padding-left: 0; padding-right: 64px; } html/php: <div class="tut_didyouknow"> <?printf (_("did you know you can test a persona before you submit it? <b><a href=\"%s\">find out how!</a>&raquo;</b>"), $locale_conf->url('/demo_create_3#test'));?> </div> notice that the icon has been moved to css, so that it doesn't sit in a <img/> element. this is generally considered a good practice for decorative graphics. don't use images as buttons instead, use <button/> and style it with css. image 1. bad: snippet 1. good:...

Mozilla Development Strategies
it's easier to do it right once, when your mind is in the problem, than to do it once quickly and then have to come back and do it again the right way. the only thing worse than not understanding someone else's code is not understanding your own. test your code qa's job is to assure quality, not to add quality. that's your job. it's your responsibility to find and fix the problems in your code before checking in. when you land your bug-free code, it's qa's job to assure others that it's really bug free. make sure you appreciate anyone who finds a bug in your code. appreciate it even more if they find it before you ship. they're giving you a second chance to get it right before it becomes a bug that affects users. minimize how you are affected by regressions unless you are the type to go ou...
...long to review as a ten line patch, it usually takes much more time. if you can divide and conquer what you are working on into smaller chunks, you will find you'll get faster reviews. of course, not everything can be divided up. and, shorter fixes aren't necessarily better than longer ones. having parallel trees should allow you to work on other items while you are awaiting reviews. get advice before working on a patch or feature, instead of after if you are blocked, or stumped as to what to work on, talk to a lead sooner rather than later. most likely they will have a bug they can hand off to you, or they can help get you unblocked. since they are going to be reviewing your code later, run your plan of attack by them first. it's better to have an idea rejected, than a big patch. if you are...
...volved, solve it in person, on irc or over aim. a five minute discussion is worth an hour of e-mails. do thorough code reviews when you review someone else's code, review thoroughly. if another engineer checks in code that causes regressions or introduces bugs, you might be the one who has to fix it later. save yourself (and others) time later by doing a solid code review. review your own code before you ask for reviews practice your reviewing skills on your own patch before you seek reviews and a super review. better that you catch something, than the reviewers or super reviewers. you might find a problem, or find that you left in some dump() or printf() statements, or have messed up the whitespace. if you're working on something massive, start a branch if you are working on something big...

Gecko Profiler FAQ
ial string and then write a script that filters out all samples that were gathered after your marker. to increase the amount of data, you should run your automated gathering procedure many times, and then combine multiple profiles into one. we don’t have a script that combines profiles, but i can help you write one if you’re interested. in the end, you should have one big “before” profile and one big “after” profile. profile comparison is tricky. the only way that i’ve tried before is to use a “difference calltree”: in the regular call tree, each node of the calltree is assigned a weight which is just the number of samples that were under this call stack. in a difference call tree, each node’s weight instead is computed as <number of sample...
...that tree is then displayed in the usual way, with weights in decreasing order from top to bottom. then the call stacks whose cost increased the most in the “after” profile will be at the top, and those are the ones you usually want to look at if you caused a regression. ...
...[ehsan] this is similar to the previous question to some extent, but the specific answer really depends on what kind of compiler flag we’re talking about and what performance impact we’re interested to study. but the short answer is picking up real browser workloads, and finding ways to split out the overall cost contributed by the thing that your change is going to affect and compare things before and after. [mstange] this question is more about benchmarking than about profiling. if you want to measure things, please measure without the profiler running, because the profiler can add its own overhead. how do we find performance regressions caused by third-party and system addons, especially ones that only show up after extended uptime? by running into th...

Profiling with the Firefox Profiler
shes should be avoided if possible, as they can be quite expensive. keep your eyes out for flushes like this that are blocking the main thread for a long time. if you notice these things happening in a loop, that's a bug to be fixed, since we're likely "layout thrashing". some more tips and answers to common questions are available in a mid-2017 faq document. it's a good idea to search bugzilla before filing a bug about a performance problem in firefox but sometimes it's hard to find issues that have already been reported. therefore, it's usually a good idea to file a bug. profiling local windows builds if you built firefox for windows locally and you would like to use the local symbols with the profiler, you will need to run an additional tool; see profiling with the firefox profiler and lo...
...d list. description of all available environment variables may be printed by starting firefox with moz_profiler_help=1 set. if you want to profile firefox for android, you have to set this environment values by --es option of am command to launch firefox. this example is for firefox nightly (package name is org.mozilla.fennec_aurora), and you have to allow storage access on permission settings before launching it. adb shell am start -n org.mozilla.fennec_aurora/.app \ --es env0 moz_profiler_startup=1 \ --es env1 moz_profiler_shutdown=/sdcard/download/profiler.json then, if you select quit menu, you can collect profiling data to moz_profiler_shutdown file. profiling js benchmark (xpcshell) to profile the script run.js with ionmonkey (-i), type inference (-n) and jäegermonkey (-m). ...
...: the resulting "profile" will have the layer tree view enabled (but nothing else). this is useful in cases where you want to gain a quick visual understanding of a layer dump without having to take a profile. on b2g, each line of a layer dump in adb logcat output is prefixed with something like i/gecko (30593):. cleopatra doesn't currently understand this prefix, so it needs to be removed before pasting. display list dump the display list after each refresh with the texture data. this can be used to debug correctness problems. contribute source is located in tools/profiler. the bugzilla components are core::gecko profile for the profiler backend, and devtools::performance tools (profiler/timeline) for the toolbar button and about:profiling. the (now obsolete) profiler add-on rep...

Introduction to NSPR
r of native threads. global threads are scheduled by the host os--not by nspr--either within a process or across processes on the entire host. global threads correspond to native threads on the host os. nspr threads can also be either user threads or system threads. nspr provides a function, pr_cleanup, that synchronizes process termination. pr_cleanup waits for the last user thread to exit before returning, whereas it ignores system threads when determining when a process should exit. this arrangement implies that a system thread should not have volatile data that needs to be safely stored away. priorities for nspr threads are based loosely on hints provided by the client and sometimes constrained by the underlying operating system. therefore, priorities are not rigidly defined. for more...
...monitoring is about protecting data, not code. a monitored invariant is a boolean expression over the monitored data. the expression may be false only when a thread is in the monitor (holding the monitor's mutex). this requirement implies that when a thread first enters the monitor, an evaluation of the invariant expression must yield a true. the thread must also reinstate the monitored invariant before exiting the monitor. therefore, evaluation of the expression must also yield a true at that point in execution. a trivial example might be as follows. suppose an object has three values, v1, v2, and sum. the invariant is that the third value is the sum of the other two. expressed mathematically, the invariant is sum = v1 + v2. any modification of v1 or v2 requires modification of sum. since that...
...(monitor); return db; } the same function would be more appropriately written as follows: void *dequeue() { void *db; enter(monitor); while ((db = delink()) == null) wait(condition); exit(monitor); return db; } caution: the semantics of pr_waitcondvar assume that the monitor is about to be exited. this assumption implies that the monitored invariant must be reinstated before calling pr_waitcondvar. failure to do this will cause subtle but painful bugs. to modify monitored data safely, a thread must be in the monitor. since no other thread may modify or (in most cases) even observe the protected data from outside the monitor, the thread can safely make any modifications needed. when the changes have been completed, the thread notifies the condition associated with th...

PR_WaitCondVar
waits on a condition. syntax #include <prcvar.h> prstatus pr_waitcondvar( prcondvar *cvar, printervaltime timeout); parameters pr_waitcondvar has the following parameters: cvar the condition variable on which to wait. timeout the value pr_interval_no_timeout requires that a condition be notified (or the thread interrupted) before it will resume from the wait. the value pr_interval_no_wait causes the thread to release the lock, possibly causing a rescheduling within the runtime, then immediately attempt to reacquire the lock and resume. returns the function returns one of the following values: if successful, pr_success. if unsuccessful (for example, if the caller has not locked the lock associated with the condition variable or the thread was interrupted with pr_interrupt)...
...hin the runtime, then immediately attempt to reacquire the lock and resume. returns the function returns one of the following values: if successful, pr_success. if unsuccessful (for example, if the caller has not locked the lock associated with the condition variable or the thread was interrupted with pr_interrupt), pr_failure. the details can be determined with pr_geterror. description before the call to pr_waitcondvar, the lock associated with the condition variable must be held by the calling thread. after a call to pr_waitcondvar, the lock is released and the thread is blocked in a "waiting on condition" state until another thread notifies the condition or a caller-specified amount of time expires. when the condition variable is notified, a thread waiting on that condition moves f...
... ...

NSS PKCS11 Functions
r *pk11_getslotname(pk11slotinfo *slot); parameters this function has the following parameter: slot a pointer to a slot info structure. returns the function returns one of these values: if successful, a pointer to the name of the slot (a string). if unsuccessful, null. description if the slot is freed, the string with the slot name may also be freed. if you want to preserve it, copy the string before freeing the slot. do not try to free the string yourself. pk11_gettokenname gets the name of the token. syntax #include <pk11pub.h> char *pk11_gettokenname(pk11slotinfo *slot); parameters this function has the following parameter: slot a pointer to a slot info structure. returns the function returns one of these values: if successful, a pointer to the name of the token (a string). if unsucce...
...pk11_gettokenname(pk11slotinfo *slot); parameters this function has the following parameter: slot a pointer to a slot info structure. returns the function returns one of these values: if successful, a pointer to the name of the token (a string). if unsuccessful, null. description if the slot is freed, the string with the token name may also be freed. if you want to preserve it, copy the string before freeing the slot. do not try to free the string yourself. pk11_ishw finds out whether a slot is implemented in hardware or software. syntax #include <pk11pub.h> #include <prtypes.h> prbool pk11_ishw(pk11slotinfo *slot); parameters this function has the following parameter: slot a pointer to a slot info structure. returns the function returns one of these values: if the slot is implemented i...
...retry argument is pr_true, indicating that the password was tried and is wrong, the callback function should return null to indicate that it is unsuccessful, rather than attempting to return the same password again. failing to terminate when the retry argument is pr_true can result in an endless loop. several functions in the nss libraries use the password callback function to obtain the password before performing operations that involve the protected information. the third parameter to the password callback function is application-defined and can be used for any purpose. for example, mozilla uses the parameter to pass information about which window is associated with the modal dialog box requesting the password from the user. when nss ssl libraries call the password callback function, the value...

Python binding for NSS
me name as they appear in the c header files of nss/nspr. convenience functions are provided to translate between the numeric value of an enumerated constant and it's string representation and visa versa. python-nss internally supports utf-8. strings may be python str objects or python unicode objects. if a python unicode object is passed to a nss/nspr function it will be encoded as utf-8 first before being passed to nss/nspr. python-nss tries to be flexible when generating a print representation of complex objects. for simplicity you can receive a block of formatted text but if you need more control, such as when building gui elments you can access a list of "lines", each line is paired with an indentation level value. the (indent, text) pairs allow you to insert the item into a gui tree str...
...tting. deprecated elements of the python-nss api are marked with python deprecation warnings as well as being documented in the nss module documentation. as of python 2.7 deprecation warnings are no longer reported by default. it is suggested python developers using python-nss periodically run their code with deprecation warnings enabled. depercated elements will persist for a least two releases before being removed from the api entirely. project history red hat utilizes both nss and python in many of it's projects, however it was not previously possible to call nss directly from python. to solve this problem red hat generously funded the initial development of python-nss as well as it's continued maintenance. red hat following it's open source philosophy has contributed the source to the mo...
... threads will now yield during blocking io. socket.makefile() reimplemented file object methods that had been missing (readlines(), sendall(), and iteration) were implemented makefile now just returns the same socket object but increments an "open" ref count. thus a socket object behaves like a file object and must be closed once for each makefile() call before it's actually closed. sockets now support the iter protocol added methods: socket.readlines() socket.sendall() apply patches from miloslav trmač <mitr@redhat.com> for ref counting and threading support. thanks miloslav! review all ref counting, numerous ref counting fixes implement cyclic garba...

NSS_3.12.3_release_notes.html
yte count) sets the maximum number of bytes to read from the file named in the environment variable nsrandfile (see below). makes nsrandfile usable with /dev/urandom. nss_allow_weak_signature_alg boolean (any non-empty value to enable) enables the use of md2 and md4 hash algorithms inside signatures. this was allowed by default before nss 3.12.3. nss_hash_alg_support string specifies algorithms allowed to be used in certain applications, such as in signatures on certificates and crls. see documentation at this link. nss_strict_nofork string ("1", "disabled", or any other non-empty value) it is an ...
...port string specifies algorithms allowed to be used in certain applications, such as in signatures on certificates and crls. see documentation at this link. nss_strict_nofork string ("1", "disabled", or any other non-empty value) it is an error to try to use a pkcs#11 crypto module in a process before it has been initialized in that process, even if the module was initialized in the parent process. beginning in nss 3.12.3, softoken will detect this error. this environment variable controls softoken's response to that error. if set to to "1" or unset, softoken will trigger an assertion failure in debug builds, and will report an error in non-debug builds. ...
...sions. if set to any other non-empty value, softoken will report an error in both debug and non-debug builds. nss_use_decoded_cka_ec_point boolean (any non-empty value to enable) tells nss to send ec key points across the pkcs#11 interface in the non-standard unencoded format that was used by default before nss 3.12.3. the new key point format is a der encoded asn.1 octet string. nss_use_shexp_in_cert_name boolean (any non-empty value to enable) tells nss to allow shell-style wildcard patterns in certificates to match ssl server host names. this behavior was the default before nss 3.12.3. the new behavior conforms to rfc 2818. ...

Invariants
good reason whatsoever). if !js_isrunning(cx) && cx->globalobject == null, then cx->compartment == cx->runtime->defaultcompartment. while executing a script, cx->compartment == script->compartment. but this is true only so long as we are actually in the interpreter or jit code. a jsnative or other callback may move cx to another compartment, as long as it returns cx to the script's compartment before returning. a given trace-jit trace stays within a single compartment (indeed, a single global object) end-to-end. lifetime invariants in some places, pointers to jsobjects and jsstrings must refer to live heap objects, but this is not a hard fast rule, especially for strings. some jsstrings are allocated on the stack for quick operations. some commonly used strings are allocated statically; se...
...st refer to live heap objects, but this is not a hard fast rule, especially for strings. some jsstrings are allocated on the stack for quick operations. some commonly used strings are allocated statically; see jsstring::isstatic(). most jscontext pointers must point to live contexts, but jstitle::ownercx may point to one that has been destroyed! so code must check js_validcontextpointer(ownercx) before dereferencing it. shape invariants the shape guarantees hold whenever the property cache is enabled. also, we never change the shape of the global object on trace. (here "the global object" refers to the object at the end of the scope chain of the function object we're executing.) requests many functions require a request. that is, they take a parameter cx of type jscontext *, and require t...
...own to brendan and probably jst and mrbkap), we never call a jsapi callback with a property locked. (that would risk deadlock too.) name instructions the first operand to a jsop_setname instruction is always produced by a preceding jsop_bindname instruction. (taken together, ecma 262-3 §11.13.1 and ecma 262-3 §10.1.4 specify that in an assignment such as x = f(), the name lookup for x occurs before f is called. jsop_bindname performs this lookup.) the rules below (not exactly invariants) govern the bytecode emitted for nameexpressions. background: the fastest instructions for nameexpressions are fat opcodes that combine a load with additional operations, as in jsop_inclocal or jsop_getlocalprop. failing that, jsop_{get,call,set}local and jsop_{get,call,set}arg are the fastest, followed by...

Property cache
ution of the same instruction. the jit reads the property cache too, as it needs the same information when recording such an instruction. if there is a cache miss, the jit performs parts 1 and 2 of the property access and fills the cache to avoid redoing that work in the interpreter. (in some cases this is necessary for correctness. when recording a getprop, the jit needs to know the result type before the interpreter executes the instruction. it is crucial that jit and interpreter get the same answer; possible pitfalls include native getters and resolve hooks. so the lookup must happen only once. the jit ensures this by using the property cache to forward its work to the interpreter.) for speed, the cache is a fixed-size hash table with no chaining. collisions simply cause old entries to be o...
...pe-regenerating gc occurred; then at t1 the lookup for p in x still finds the same property on x'. (informally: if another variable or property shadows x'.p, the shape of x' will change.) o this object is x, perhaps a call object. ↓ o ----> o a block object and its proto. ↓ o another call object. ↓ o ----> o ----> o ----> o ^global ^x' (----> indicates proto as before; downward arrows ↓ indicate the parent relation) method guarantee — if at time t0 the object x has shape s; and x has an own property p that is a method property (transparently joined function); and at time t1 an object y has shape s; and no shape-regenerating gc occurred; then at time t1 y's own property p is the same method property. (the existence of this property is guaranteed by th...
...re.) prototype change guarantee — if at time t0 the object x has shape s, and the object y has prototype z, and either x is y or x is on y's prototype chain, and at time t1 the object x has shape s, and no shape-regenerating gc occurred, then at t1 y has prototype z. (informally: changing an object's prototype changes its shape and the shape of every object that was on its prototype chain before the change. without this guarantee, every access to a property via a prototype chain would have to recheck each link in the prototype chain, even though assigning to __proto__ is very rare.) adding guarantee — if at time t0 the object x has shape s, and rt->protohazardshape is z, and x does not inherit a jsprop_shared or jsprop_readonly property with name n from any prototype, and at time...

Tracing JIT
o objects in the spidermonkey heap. the native code returns a pointer to a structure called a side exit. the monitor inspects the side exit and, depending on the exit condition, reconstructs a certain number of interpreter frames and flushes a certain set of writes back to the spidermonkey heap. frame reconstruction is necessary because a trace may inline a number of function calls, and may exit before those function calls return. write flushing is necessary because all writes to imported values in the native stack are deferred until trace-exit, as an optimization. if the side exit condition indicates that the trace exited successfully -- simply running out of native code or hitting a branch condition that no native code yet exists to handle -- the monitor will inspect the hit count for the tr...
...l record an alternative sub-trace beginning at the guard and patch the code into the existing guard. thereafter, when the guard fails it will jump to the specialized sub-trace. the term bail denotes "exiting a trace due to to a failed guard". when a guard bails, it means that there is no logic in the trace to handle the failed guard, and so the exit condition encodes the state of the interpreter before the guarded condition. the interpreter then re-executes the guarded condition, which will always succeed since the interpreter handles all outcomes of such a condition dynamically. the term deep bail denotes a special case of bailing: when a trace calls a native spidermonkey c function that gets part-way through executing and then forces a trace-exit (possibly due to a nested c function dependin...
...dermonkey c function that gets part-way through executing and then forces a trace-exit (possibly due to a nested c function depending on not-yet-flushed state in the trace). a deep bail is special only insofar as it requires flushing the full set of deferred writes in the trace if it occurs (and further, requires that all registers holding temporary trace operands have flushed to the native stack before execution). bailing from a regular guard involves executing precise per-guard write-flushing code, as the guard encodes a specific failed condition on a specific set of operands, and so the exit code can be much more fine-grained about and reconstructing the pre-bail state. a deep bail must be conservative because it is forced by the failure of an unknown condition elsewhere in native spidermonke...

TPS Tests
nd the whole test will fail as well. you can sign up for an fxa account on stage or dev by creating an fxa account after adding the identity.fxaccounts.autoconfig.uri preference (with the appropriate value) to about:config. additionally, note that the config file must parse as valid json, and so you can't have comments in it (sorry, i know this is annoying). one alternative is to put underscores before the "disabled" preferences, e.g. "_identity.fxaccounts.autoconfig.uri": "...". writing tps tests each tps test is run as a series of "phases". a phase runs in some firefox profile, and contains some set of actions to perform or check on that profile. phases have an n to m relationship with profiles, where n >= m (there can never be more phases than profiles). typically there are two profiles us...
...n asset lists; there are also some additional built-in functions. built-in functions sync(options) initiates a sync operation. if no options are passed, a default sync operation is performed. otherwise, a special sync can be performed if one of the following are passed: sync_wipe_server, sync_wipe_client, sync_reset_client. this will cause tps to set the firstsync pref to the relevant value before syncing, so that the described actionwill take place logger.loginfo(msg) logs the given message to the tps log. logger.asserttrue(condition, msg) asserts that condition is true, otherwise an exception is thrown and the test fails. logger.assertequal(val1, val2, msg) asserts that val1 is equal to val2, otherwise an exception is thrown and the test fails. custom functions you can also write...
...fter_first_modify], [sync] ]); phase('phase3', [ [sync], [bookmarks.verify, bookmarks_after_first_modify] ]); the effects of this test file will be: firefox is launched with profile1, the tps extension adds the two bookmarks specified in the bookmarks_initial array, then they are synced to the sync server. the sync_wipe_server argument causes tps to set the firstsync="wipeserver" pref before syncing, in case the sync account already contains data (this is typically unnecessary, and done largely as an example). firefox closes. firefox is launched with profile2, and all data is synced from the sync server. the tps extension verifies that all bookmarks in the bookmarks_initial list are present. then it modifies those bookmarks by applying the "changes" property to each of them. e.g., t...

Handling Mozilla Security Bugs
se (or plan to use) mozilla code in their own product offerings. some of these products may be used by large populations of end users, many of whom may not often upgrade or check for recent security fixes. we understand and acknowledge the concerns of those who believe that too-hasty disclosure of exploit details can provide a short-term advantage to potential attackers, who can exploit a problem before most end users become aware of its existence. we believe that both sets of concerns are valid, and that both are worth addressing as best we can. we have attempted to create a compromise scheme for how the mozilla project will handle reports of security vulnerabilities. we believe that it is a compromise that can be justified to those on both sides of the question regarding disclosure. general ...
...h comments on the bug or the group mailing list, whether an immediate warning to users is appropriate and how it should be worded. the goals of this warning are: to inform mozilla users and testers of potential security risks in the versions they are using, and what can be done to mitigate those risks. to establish, for each bug, the amount of information a distributor can reveal immediately (before a fix is available) without putting other distributors and their customers at risk. a typical warning will mention the application or module affected, the affected versions, and a workaround (e.g., disabling javascript). if the group decides to publish a warning, the module owner, a peer, or some other person they may designate will post this message to the known vulnerabilities page (which wi...
...d choosing to report bugs through the standard bugzilla processes, the bug reporter is doing a positive service to the mozilla project; thus it makes sense that the bug reporter should be able to decide when the relevant bugzilla data should be made public. however, we will ask all individuals and organizations reporting security bugs through bugzilla to follow the voluntary guidelines below: before making a security bug world-readable, please provide a few days notice to the mozilla security bug group by sending an email to the private security bug group mailing list. please try not to keep bugs in the security-sensitive category for an unreasonably long amount of time. please try to be understanding and accommodating if a mozilla distributor has a legitimate need to keep a bug in the sec...

Accessing the Windows Registry Using XPCOM
en(wrk.root_key_local_machine, "software\\microsoft\\windows\\currentversion", wrk.access_read); var id = wrk.readstringvalue("productid"); wrk.close(); this example, while simple, shows several important things about using the interface. first, you must use createinstance() to get an object implementing this interface, not getservice(). second, you must call open() on the key before attempting to read a value. notice in the open() call that the root key to use is specified using the named constants available on the nsiwindowsregkey interface, in this case root_key_local_machine, which corresponds to hkey_local_machine in the windows registry. also notice that the path to the key has backslashes escaped, a necessity in javascript and c++ string constants. the desired access...
...m the interface, in this example access_read. this can be very important when dealing with non-administrator accounts with restricted privileges. the value is read using readstringvalue(). you have to specify what type of data you expect to read, which we will expand on later. finally, note that you should close the key when you are done to avoid wasting system resources. opening registry keys before doing anything with a registry key you must first open the key you are interested in. the example above demonstates this using the open() method. if you want to create a new key, you can use the create() method, which takes the same parameters as open(). note that it is not an error to call create() on an existing key, and doing so has the same result as calling open(). both of these methods tak...
...the nsiwindowsregkey interface provides methods for both of these—hasvalue() and haschild()—as demonstrated in this example: var wrk = components.classes["@mozilla.org/windows-registry-key;1"] .createinstance(components.interfaces.nsiwindowsregkey); wrk.open(wrk.root_key_loca...

Creating the Component Code
b lock user interface most of the actual work in the weblock component is preparing the component itself, finding the xpcom interfaces the component needs to use, and hooking into existing functionality within the gecko browser. component registration all xpcom components - whether they're stored in shared libraries (dlls, dsos, dylibs), javascript files, or otherwise - need to be registered before they can be used. registration is a process that happens in all xpcom applications, whether they're embedded gecko clients, mozilla, netscape 7, compuserve, or any other software that uses xpcom. registration provides the information that applications need in order to use components properly. the weblock component must do a number of things to register itself. specifically, the component library...
...l if the caller is required to know information about the component like its threading module, whether or not it's a singleton, its implementation language, and so forth. the interface used in this case is nsiclassinfo. starting from the outside in, onion peel view of xpcom component creation represents the sequence for constructing an xpcom object. onion peel view of xpcom component creation before we begin looking at the various parts of the component and how they'll be implemented in the source, let's look at the module in weblock.cpp to see where we're going. the source we're referring to is listed in its entirety at the end of this chapter (see weblock1.cpp). the source file for the weblock component contains three classes. in order to make the weblock component work in mozilla, you ha...
... #include <stdio.h> #define mozilla_strict_api #include "nsimodule.h" #include "nsifactory.h" #include "nsicomponentmanager.h" #include "nsicomponentregistrar.h" static const nsiid kimoduleiid = ns_...

Finishing the Component
the compiler itself changes its v-table layout, which can happen when the compiler changes its abi. for example, in 2002 the gnu compiler collection (gcc), version 3.2 changed the c++ abi, and this caused problems between libraries compiled with gcc 3.2 and applications compiled with an earlier version and vice versa. similar problems occurred with gcc 4.0, which underwent similar abi changes. before attempting to use unfrozen interfaces, you should contact the developers who are responsible for the code you're trying to use (i.e., module owners) and ask them how best to do what you are trying to do. be as precise you possibly can. they may be able to suggest a supported alternative, or they may be able to notify you about pending changes. the interface that we need for this project is somet...
... somewhere - as might be the case when the weblock component is used in a corporate intranet, for example - there are networking apis in gecko that will support this. or you could implement the web lock so that instead of blocking any site, the component would simply log all urls that are loaded. in any case, the process to make the xpcom component is the same. the method that handles the check before page loading and the only method we care about in our own implementation of nsicontentpolicy is shouldload(). the other method on the nsicontentpolicy interface is for blocking processing of specific elements in a document, but our policy is more restrictive: if the url isn't on the white list, the entire page should be blocked. in the weblock component, the shouldload method looks like this: ns...
...f uris of this kind are blocked, then gecko will not be able to start up, so we'll restrict the content policy to the http and ftp protocols. instead of extracting the string spec out of the nsiuri to do a string comparison, which would require you to do the parsing yourself, you can compare the nsiuri objects with each other, as in the following section. this ensures that the urls are canonical before they are compared. checking the white list the weblock implementation of the shouldload method starts by extracting the scheme of the incoming nsiuri. if the scheme isn't "http", "https", or "ftp", it immediately returns true, which continues the loading process unblocked. these three are the only kinds of uri that weblock will try to block. when it has one, it walks the linked list and create...

Introduction to XPCOM for the DOM
t, it has to decrease the reference count of that object by one. this is done using the "release" function, also defined in the nsisupports interface. when the reference count of an object hits 0 (zero), the object deletes itself. this is why it is very important to keep track of the reference count of each object. in the first case, if we forget to addref the object, the object may delete itself before we are done using the pointer, which would cause a crash when dereferencing it. in the second case, if we forget to release the object, it will never delete itself, which will cause "memory leaks", i.e. the memory is never returned because we keep the object around even if we don't need it. in both cases it's very bad, and we have to be extremely careful with the refcounting. fortunately, there ...
...ous example shows. at the beginning of this section, i talked about a second solution to get a pointer to an interface. this should be used in the case a getter function is not available. as you probably know, the "this" member of an object is a pointer to that object. you can thus simply cast "this" statically to the desired interface. you should however be absolutely sure of what you are doing before coding such a cast. it can lead to troubles with refcounting. here is a simple problem i encountered recently: in a member function of the nshtmlanchorelement class, i had to get a pointer to the nsicontent interface implemented by the nshtmlanchorelement object. however there is no such getter. i had to use the second solution: nscomptr<nsicontent> content = getter_addrefs(ns_static_cast(nsico...
...es for nsidomfabian. warning: in makefiles, there is a mix of tabs and whitespaces. make sure you copy exactly the other entries. then type "make" in dom/ to build the interface. if all goes well, a file nsidomfabian.h should be in dom/public/idl/html/_xpidlgen/, and it should contain the c++ code for our interface. from my own experience unfortunately it sometimes necessary to build "distclean" before it works. interface implementation let's take a closer look at how interfaces are implemented. we already know that an interface has to be implemented by a concrete c++ class. this class can implement multiple interfaces, directly or through inheritance (see the next section for a discussion of inheritance). we also saw that an interface defined in xpidl contains methods and attributes, which a...

nsIAccessibleText
tafteroffset(in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset); astring gettextatoffset(in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset); nsipersistentproperties gettextattributes(in boolean includedefattrs, in long offset, out long rangestartoffset, out long rangeendoffset); astring gettextbeforeoffset(in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset); void removeselection(in long selectionnum); void scrollsubstringto(in long startindex, in long endindex, in unsigned long scrolltype); void scrollsubstringtopoint(in long startindex, in long endindex, in unsigned long coordinatetype, in long x, in long y); void setselectionbounds(i...
...olean includedefattrs, in long offset, out long rangestartoffset, out long rangeendoffset ); parameters includedefattrs points whether text attributes applied to the entire accessible should be included or not. offset text offset. rangestartoffset start offset of the range of text. rangeendoffset end offset of the range of text. ...
...estartoffset start offset of the range of text. rangeendoffset end offset of the range of text. return value exceptions thrown missing exception gettextbeforeoffset() string methods may need to return multibyte-encoded strings, since some locales can't be encoded using 16-bit chars. so this method might return utf-16 strings, or it could return "string" values which are utf-8. astring gettextbeforeoffset( in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset ); parameters offset boundarytype startoffset endoffset return value removeselection() void removeselection( in long selectionnum ); parameters selectionnum scrollsubstringto() makes a specific part of string visible on screen. void scrollsubstringto( in long startinde...

nsIBrowserSearchService
orts last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) implemented by: @mozilla.org/browser/search-service;1. to access this service, use: var browsersearchservice = components.classes["@mozilla.org/browser/search-service;1"] .getservice(components.interfaces.nsibrowsersearchservice); attempting to use any method or attribute of this interface before init() has completed will force the service to fall back to a slower, synchronous, initialization. this is not an issue if your code is executed in reaction to a user interaction, as initialization is complete by then, but this is an issue if your code is executed during startup. if you need to write code that is executed during startup and makes use of nsibrowsersearchservice, you should make ...
...ype an integer representing the plugin file format. must be one of the supported search engine data types defined above. iconurl a url string to an icon file to be used as the search engine's icon. this value may be overridden by an icon specified in the engine description file. confirm a boolean value indicating whether the user should be asked for confirmation before this engine is added to the list. if this value is false, the engine will be added to the list upon successful load, but it will not be selected as the current engine. callback a nsisearchinstallcallback that will be notified when the addition is complete, or if the addition fails. it will not be called if addengine throws an exception. exceptions thrown ns_error_failure ...
...ray, size_is(enginecount)] out nsisearchengine engines ); parameters enginecount the number of hidden installed search engines. engines an array of the hidden installed nsisearchengines. init() initialize the service, or if the service is already initialized, do nothing. this method was introduced in firefox 16. attempting to call any method of this interface before init() has completed will force the service to fall back to a slower, synchronous, initialization. if your code requires nsibrowsersearchservice and is executed during startup, you should make sure that this code is executed from the callback to init(). void init( [optional] in nsibrowsersearchinitobserver observer ); parameters observer if specified, a callback called once i...

nsIChannel
tpchannel.cpp. method overview void asyncopen(in nsistreamlistener alistener, in nsisupports acontext); nsiinputstream open(); attributes attribute type description contentcharset acstring the character set of the channel's content if available and if applicable. this attribute only applies to textual data. setting contentcharset before the channel has been opened provides a hint to the channel on what the charset should be. the behavior is similar to contenttype. the value of the contentcharset attribute is a mixed case string. contentlength int64_t the length of the data associated with the channel if available. a value of -1 indicates that the content length is unknown. note: as of gecko 19.0...
...f that interface is exposed by the channel. contenttype acstring the mime type of the channel's content if available. note: the content type can often be wrongly specified (for example wrong file extension, wrong mime type, wrong document type stored on a server and so on.), and the caller most likely wants to verify with the actual data. setting contenttype before the channel has been opened provides a hint to the channel as to what the mime type is. the channel may ignore this hint in deciding on the actual mime type that it will report. setting contenttype after onstartrequest has been fired or after open() is called will override the type determined by the channel. setting contenttype between the time that asyncopen() is called and the time wh...
...stener's methods are called on the thread that calls asyncopen and are not called until after asyncopen returns. if asyncopen returns successfully, the channel promises to call at least onstartrequest and onstoprequest. if the nsirequest object passed to the stream listener's methods is not this channel, an appropriate onchannelredirect notification needs to be sent to the notification callbacks before onstartrequest is called. once onstartrequest is called, all following method calls on alistener will get the request that was passed to onstartrequest. if the channel's and loadgroup's notification callbacks do not provide an nsichanneleventsink when onchannelredirect would be called, that's equivalent to having called onchannelredirect. if asyncopen returns successfully, the channel is respon...

nsIHttpServer
* * @param callback * an asynchronous callback used to notify the user when this server is * stopped and all pending requests h...
...n use or because the process does * not have privileges to do so) * @note * behavior is undefined if this method is called after stop() has been * called on this but before the provided callback function has been * called. */ void start(in long port); /** * shuts down this server if it is running (including the period of time after * stop() has been called but before the provided callback has been called). * * @param callback * an asynchronous callback used to notify the user when this server is * stopped and all pending requests have been fully served * @throws ns_error_null_pointer * if callback is null * @throws ns_error_unexpected * if this server is not running */ void stop(in nsihttpserverstoppedcallback callback); ...
...for the lifetime of the server */ void registerfile(in string path, in nsifile file); /** * registers a custom path handler. ...

nsIMessenger
ring messageuri, in boolean savefirst, [optional] in boolean withoutwarning); parameters contenttype the content type of the attachment. url the url of the attachment. displayname the file name of the attachment. messageuri the url of the message containing the attachment. savefirst if true, the attachment is saved using saveattachment() before it is deleted. withoutwarning if true, no warning is shown to the user before the delete. detachallattachments() deletes a set of attachments. void detachallattachments(in unsigned long count, [array, size_is(count)] in string contenttypearray, [array, size_is(count)] in string urlarray, [array, size_is(count)...
...ng); parameters count the number of attachments to be deleted. contenttypearray an array of content types for each attachment. urlarray an array of urls for each attachment. displaynamearray an array of file names for each attachment. messageuriarray an array of urls for the message containing each attachment. savefirst if true, the attachments are saved using saveallattachments() before being deleted. withoutwarning if true, no warning is shown to the user before the delete. saveattachmenttofolder() saves an attachment in a given folder. saveattachmenttofolder() is used by the drag and drop code to drop an attachment to a destination folder. returns the actual file path (including the filename). nsilocalfile saveattachmenttofolder(in acstring , ...
...age or attachment to get the service for. return value the nsimsgmessageservice responsible for the url. msghdrfromuri() nsimsgdbhdr msghdrfromuri(in acstring auri); getmsguriatnavigatepos() gets the message a particular position in the navigation history. for example, back-forward history needs a list of visited messages, and where it is in the list. unfortunately, you must call this before navigating to a position, because calling this has the side effect of making us adjust our current history position, and not adding the loaded message to the history queue. acstring getmsguriatnavigatepos(in long apos); parameters apos the position to get the url from relative to the current history cursor. +1 is forward, -1 is back. return value the url at that point in the history.

nsIWebBrowser
n nsiweakreference alistener, in nsiidref aiid); attributes attribute type description containerwindow nsiwebbrowserchrome the chrome object associated with the browser instance. the embedder must create one chrome object for each browser object that is instantiated. the embedder must associate the two by setting this property to point to the chrome object before creating the browser window via the browser's nsibasewindow interface. the chrome object must also implement nsiembeddingsitewindow. the chrome may optionally implement nsiinterfacerequestor, nsiwebbrowserchromefocus, nsicontextmenulistener and nsitooltiplistener to receive additional notifications from the browser object. the chrome object may optionally implement nsiwebprogressliste...
...ng addwebbrowserlistener() and removewebbrowserlistener() to register a progress listener object. if the implementation does this, it must also implement nsiweakreference. note: the implementation should not refcount the supplied chrome object; it should assume that a non nsnull value is always valid. the embedder must explicitly set this value back to nsnull if the chrome object is destroyed before the browser object. note: nsiinterfacerequestor and nsiweakreference might also need to be implemented by the chrome object. contentdomwindow nsidomwindow the top-level dom window. the embedder may walk the entire dom starting from this value. read only. isactive boolean indicates whether this web browser is active. active means that it's visible enough that we ...
...ded. note: if this attribute is set to an object that implements nsisupportsweakreference, the implementation should get the nsiweakreference and hold that. otherwise, the implementation should not refcount this interface; it should assume that a non null value is always valid. in that case, the embedder should explicitly set this value back to null if the parent content listener is destroyed before the browser object. methods addwebbrowserlistener() registers a listener of the type specified by the iid to receive callbacks. the browser stores a weak reference to the listener to avoid any circular dependencies. typically this method will be called to register an object to receive nsiwebprogresslistener or nsishistorylistener notifications in which case the the iid is that of the interf...

nsIXPConnect
appen on a new temporary context. sandbox the sandbox object to evaluate the script in. returnstringonly the only results to come out of the computation (including exceptions) will be coerced into strings created in the sandbox. return value the result of the evaluation as a jsval. if the caller intends to use the return value from this call, the caller is responsible for rooting the jsval before making a call to this method. exceptions thrown missing exception missing description flagsystemfilenameprefix() preconfigure xpcnativewrapper automation so that when a scripted caller whose filename starts with filenameprefix accesses a wrapped native that is not flagged as "system", the wrapped native will be automatically wrapped with an xpcnativewrapper. void flagsystemfilenameprefix...
...tions thrown missing exception missing description wrapnative() wrapnative() will create a new jsobject or return an existing one. the jsobject is returned inside a refcounted nsixpconnectjsobjectholder. as long as this holder is held the jsobject will be protected from collection by javascript's garbage collector. it is a good idea to transfer the jsobject to some equally protected place before releasing the holder (i.e., use js_setproperty to make this object a property of some other jsobject). this method now correctly deals with cases where the passed in xpcom object already has an associated jsobject for the cases: 1) the xpcom object has already been wrapped for use in the same scope as an nsixpconnectwrappednative. 2) the xpcom object is in fact an nsixpconnectwrappedjs and thus ...
...lements nsiscriptobjectowner; i.e., is an idlc style dom object for which we can call getscriptobject to get the jsobject it uses to represent itself into javascript. it *might* be possible to queryinterface the nsixpconnectjsobjectholder returned by the method into an nsixpconnectwrappednative or an nsixpconnectwrappedjs. this method will never wrap the jsobject involved in an xpcnativewrapper before returning. returns: success: ns_ok failure: ns_error_xpc_bad_convert_native ns_error_xpc_cant_get_jsobject_of_dom_object ns_error_failure. nsixpconnectjsobjectholder wrapnative( in jscontextptr ajscontext, in jsobjectptr ascope, in nsisupports acomobj, in nsiidref aiid ); parameters ajscontext missing description ascope missing description acomobj missing description aiid mi...

Storage
tionality. this can result in significantly higher overhead file operation. closing a connection to close a connection on which only synchronous transactions were performed, use the mozistorageconnection.close() method. if you performed any asynchronous transactions, you should instead use the mozistorageconnection.asyncclose() method. the latter will allow all ongoing transactions to complete before closing the connection, and will optionally notify you via callback when the connection is closed. statements this section demonstrates how you can execute sql statements on your database. for a complete reference see mozistoragestatement. creating a statement there are actually two ways to execute a statement. you should choose the right one based on your needs. no results to be returned i...
...dparams(bp); } stmt.bindparameters(params); you can attach multiple sets of bindings to a statement by adding multiple mozistoragebindingparams objects to the array of parameter lists, adding each one through calls to the mozistoragebindingparamsarray.addparams(). once all the parameters are set up, a single call to mozistoragestatement.bindparameters() will ensure that the parameters are bound before execution. you can then execute the statement asynchronously, and the statement will get each set of bindings bound to it before execution asynchronously. executing a statement you may execute statements either synchronously (which is supported in firefox gecko 1.8 and 1.9) or asynchronously (starting in gecko 1.9.1). if your code needs to work with applications based on gecko 1.8 or 1.9, you s...
...mozistoragestatement.reset(). resetting a statement when you execute a statement synchronously, it is important to make sure you reset your statement. you can accomplish this by calling mozistoragestatement.reset() on the statement. if you end up finalizing the statement (see mozistoragestatement.finalize()) you do not need to worry about calling mozistoragestatement.reset(). you should do this before you reuse the statement. warning: if you fail to reset a write statement, it will continue to hold a lock on the database preventing future writes or reads. additionally, if you fail to reset a read statement, it will prevent any future writes to the database. in javascript, the language makes it pretty easy to ensure that you always reset a statement. be aware that you should always rese...

Reference Manual
if you're trying to fix a broken build, the faq might lead you to the answer more quickly. the basics design an nscomptr is designed to be a complete replacement for raw xpcom interface pointers where they are used as owning references. almost any place you could use a raw xpcom interface pointer, you should be able to use an nscomptr. an nscomptr is the exact same size and shape as a raw xpcom interface pointer. it can be used as a member variable without introducing bloat. ...
...rn expressed as a for loop, as well. consider, however, what would happen if you were trying to do this with a raw xpcom interface pointer. // iterating with raw xpcom interface pointers... nsidomnode* p = ...; while ( p ) { // ... p->getnext(&p); // trouble! we overwrote |p| without |release|ing it. } oops! we just failed to release p before putting a new pointer into it. people do this a lot, and it turns out to be a big source of leaks in normal xpcom code. well, could we do this instead? // iterating with raw xpcom interface pointers... nsidomnode* p = ...; while ( p ) { // ... ns_release(p); p->getnext(&p); // trouble! we tried to call a member function of a pointer // that ma...
...n the same thing with nscomptr. // iterating with |nscomptr|s... nscomptr<nsidomnode> p = ...; while ( p ) { // ... p->getnext( getter_addrefs(p) ); // trouble! we tried to call a member function through a |null| pointer. } using nscomptr is exactly like using raw xpcom interface pointers, here. getter_addrefs releases and clears out p before you assign into it, i.e., before getnext is called. which means that by the time we get around to calling getnext, we are trying to call it through a null pointer. unlike raw xpcom interface pointers, nscomptr will fire an assert instead of blindly trying to call getnext through a null pointer. that's the problem. so what's the solution? if this were raw xpcom interface pointers, we'd probably in...

Thunderbird Configuration Files
d know about: userchrome.css used to change the appearance of the browser. usercontent.css used to change the appearance of web pages. user.js used to change various preferences. all these files are plain text files you need to create in your profile folder and can be edited using a standard text editor, such as notepad on windows and gedit or kate on linux. locate your profile folder before the configuration files are presented, you should know how to find your profile folder, which is where thunderbird saves all your settings on your hard drive. on windows vista/xp/2000, the path is usually %appdata%\thunderbird\profiles\xxxxxxxx.default\, where xxxxxxxx is a random string of 8 characters. just browse to c:\documents and settings\[user name]\application data\thunderbird\profiles...
...efault profile that is automatically created when you start thunderbird for the first time. you can manage any number of profiles by using the profile manager. userchrome.css this file sets the display rules for various elements in the thunderbird user interface and is located in the sub-folder called chrome in your profile folder. this folder does not exist by default, so you need to create it before you can start adding your preferences. usercontent.css this file sets the display rules for web content and is located in the sub-folder called chrome in your profile folder. as with userchrome.css, this folder does not exist by default, so you need to create it before you can start adding your preferences. user.js this is the additional preferences file for thunderbird and is located in your...
...isplay rules for web content and is located in the sub-folder called chrome in your profile folder. as with userchrome.css, this folder does not exist by default, so you need to create it before you can start adding your preferences. user.js this is the additional preferences file for thunderbird and is located in your profile folder. the file does not exist by default, so you need to create it before you can start adding your preferences. in almost all cases, edits made using the user.js can be done via the config editor, which is the recommended method. windows users: if you know how to create a file, just skip this section. before you can create the file, you must make sure that you can see the file type extensions in windows. start explorer (just click on the my computer icon on your desk...

Initialization and Destruction - Plugins
the last instance of a plug-in is deleted, the plug-in code is unloaded from memory and the browser calls the function np_shutdown. plug-ins consume no resources, other than disk space, if not referenced. this chapter ends with initialize and shutdown example, which includes the np_initialize and np_shutdown methods. initialization the browser calls np_initialize when a plug-in is loaded and before the first instance is created. use this function to allocate the memory and resources shared by all instances of your plug-in. nperror np_initialize(void) { }; after the last plug-in instance is deleted, the browser calls np_shutdown, which releases the memory or resources allocated by np_initialize. for an example that shows the use of both the np_initialize and np_shutdown methods, see init...
...n unix, and powerpc shared library files or 68k code resources on mac os. to reduce memory overhead, plug-ins are usually loaded only when needed and released as soon as possible. in the initialization process, the browser passes the plug-in two tables of function pointers for all api calls: one table lists all api calls from the plug-in to the browser. this table is filled out by the browser before the initialization call. the other table lists all api calls from the browser to the plug-in. this table is filled out by the plug-in during the initialization call. the function tables also contain version information that the plug-in checks to verify that it is compatible with the api capabilities provided by the application. to check this information, use npn_version. no plug-in api calls ...
...nction, which informs the plug-in that its library is about to be unloaded, and gives it a chance to cancel any outstanding i/o requests, delete threads it created, free any memory it allocated, and perform any other closing tasks. the np_shutdown function releases memory or resources shared across all instances of a plug-in. it is called once after the last instance of the plug-in is destroyed, before releasing the plug-in library itself. void np_shutdown(void); for an example that shows both the np_initialize and np_shutdown methods, see initialize and shutdown example. initialize and shutdown example this example demonstrates the use of the np_initialize and np_shutdown methods. /* define global variable to hold the user agent string. */ static char* useragent = null; /* initialize fun...

Index - Firefox Developer Tools
uring tool you can measure a specific area of a web page. 37 memory devtools, firefox, mozilla, tools the memory tool lets you take a snapshot of the current tab's memory heap. it then provides a number of views of the heap that can show you which objects account for memory usage and exactly where in your code you are allocating memory. 38 aggregate view before firefox 48, this was the default view of a heap snapshot. after firefox 48, the default view is the tree map view, and you can switch to the aggregate view using the dropdown labeled "view:": 39 basic operations before firefox 50, the memory tool is not enabled by default. to enable it, open the developer tool settings, and check the "memory" box under "default firefox devel...
...nce. with the performance tool you create a recording, or profile, of your site over a period of time. the tool then shows you an overview of the things the browser was doing to render your site over the profile, and a graph of the frame rate over the profile. 83 allocations to enable the allocations view, you must check "record allocations" in the performance tool settings, before recording a profile. then record a profile as usual, and you will see a new tab labeled "allocations" in the toolbar: 84 call tree javascript, performance, memory the call tree is a sampling profiler. it periodically samples the state of the javascript engine and records the stack for the code executing at the time. statistically, the number of samples taken in which we were ...
...oper tools at a specific iframe within a document. 157 about:debugging debugger, remote debugging, about:debugging the about:debugging page provides a single place from which you can attach the firefox developer tools to a number of debugging targets. at the moment it supports three main sorts of targets: restartless add-ons, tabs, and workers. 158 about:debugging (before firefox 68) the about:debugging page provides a single place from which you can attach the firefox developer tools to a number of debugging targets. at the moment it supports three main sorts of targets: restartless add-ons, tabs, and workers. ...

Aggregate view - Firefox Developer Tools
after firefox 48, the default view is the tree map view, and you can switch to the aggregate view using the dropdown labeled "view:": the aggregate view looks something like this: it presents a breakdown of the heap's contents, as a table. there are three main ways to group the data: type call stack inverted call stack you can switch between them using the dropdown menu labeled "group by:" located at the top of the panel: there's also a box labeled "filter" at the top-right of the pane. you can use this to filter the contents of the snapshot that are displayed, so you can quickly see, for example, how many objects of a specific class were allocated. ...
...f the total). on the right-hand side is a pane that just says "select an item to view its retaining paths". if you select an item, you'll see the retaining paths panel for that item: call stack the call stack shows you exactly where in your code you are making heap allocations. because tracing allocations has a runtime cost, it must be explicitly enabled by checking "record call stacks" before you allocate the memory in the snapshot. you'll then see a list of all the functions that allocated objects, ordered by the size of the allocations they made: the structure of this view is very much like the structure of the call tree, only it shows allocations rather than processor samples. so, for example, the first entry says that: 4,832,592 bytes, comprising 93% of the total heap usa...
...ng for 89% of the heap usage in our page. (no stack available) in the example above you'll note that 7% of the heap is marked "(no stack available)". this is because not all heap usage results from your javascript. for example: any scripts the page loads occupy heap space sometimes an object is allocated when there is no javascript on the stack. for example, dom event objects are allocated before the javascript is run and event handlers are called. many real-world pages will have a much higher "(no stack available)" share than 7%. ...

Examine and edit HTML - Firefox Developer Tools
r display: inline flex applied to it. clicking the marker enables the flexbox highlighter. custom… the element is a custom element. clicking the marker switches to the line of javascript code in the debugger where the custom element got defined. note: there are some useful keyboard shortcuts that can be used in the html tree — see the html pane keyboard shortcuts list. ::before and ::after you can inspect pseudo-elements added using ::before and ::after: custom element definition when you open the inspector on a page that includes custom elements, you can view the class definition for the custom element in the debugger: inspect the element click on the word custom the source for the element's class will be displayed in the debugger. whitespace-only text ...
... context menu reference edit as html ...
...e disclosure triangle next to an element. collapse in the tree view, collapse the current element. this is equivalent to clicking the disclosure arrow next to an element that's expanded. (paste) inner html paste the clipboard contents into the node as its innerhtml. (paste) outer html paste the clipboard contents into the node as its outerhtml. (paste) before paste the clipboard contents into the document immediately before this node. (paste) after paste the clipboard contents into the document immediately after this node. (paste) as first child paste the clipboard contents into the document as the first child of this node. (paste) as last child paste the clipboard contents into the document as the last child of ...

about:debugging - Firefox Developer Tools
installed in firefox, the tabs that you currently have open, and service workers running on firefox. if your about:debugging page is different from the one displayed here, go to about:config, find and set the option devtools.aboutdebugging.new-enabled to true. setup tab connecting to a remote device firefox supports debugging over usb with android devices, using the about:debugging page. before you connect: enable developer settings on your android device. enable usb debugging in the android developer settings. enable remote debugging via usb in the advanced settings in firefox on the android device. connect the android device to your computer using a usb cable. if your device doesn't appear in the lefthand side of the about:debugging page, try clicking the refresh devices butto...
... try clicking the refresh devices button. if it still doesn't appear, it may be because the link between your android device and your computer is not authorized yet. first make sure you have installed android debug bridge from android tools on your computer in order for it to be able to connect to your device. next, disable every debugging setting already activated and repeat the steps described before. your device should show a popup to authorize your computer to connect to it — accept this and then click the refresh devices button again. the device should appear. note: you do not need to install the full android studio sdk. only adb is needed. to start a debugging session, first open the page that you wish to debug and then click connect next to the device name to open a connection to i...
...eference is set to true. extensions loading a temporary extension with the load temporary add-on button you can temporarily load a web extension from a directory on disk. click the button, navigate to the directory containing the add-on and select its manifest file. the temporary extension is then displayed under the temporary extensions header. you don't have to package or sign the extension before loading it, and it stays installed until you restart firefox. the major advantages of this method, compared with installing an add-on from an xpi, are: you don't have to rebuild an xpi and reinstall when you change the add-on's code; you can load an add-on without signing it and without needing to disable signing. once you have loaded a temporary extension, you can see information about it...

Basic animations - Web APIs
« previousnext » since we're using javascript to control <canvas> elements, it's also very easy to make (interactive) animations. in this chapter we will take a look at how to do some basic animations. probably the biggest limitation is, that once a shape gets drawn, it stays that way. if we need to move it we have to redraw it and everything that was drawn before it. it takes a lot of time to redraw complex frames and the performance depends highly on the speed of the computer it's running on. basic animation steps these are the steps you need to take to draw a frame: clear the canvas unless the shapes you'll be drawing fill the complete canvas (for instance a backdrop image), you need to clear any shapes that have been drawn previously. the easiest way to do this is...
...earrect() method. save the canvas state if you're changing any setting (such as styles, transformations, etc.) which affect the canvas state and you want to make sure the original state is used each time a frame is drawn, you need to save that original state. draw animated shapes the step where you do the actual frame rendering. restore the canvas state if you've saved the state, restore it before drawing a new frame. controlling an animation shapes are drawn to the canvas by using the canvas methods directly or by calling custom functions. in normal circumstances, we only see these results appear on the canvas when the script finishes executing. for instance, it isn't possible to do an animation from within a for loop. that means we need a way to execute our drawing functions over a p...
...od of time. setinterval(function, delay) starts repeatedly executing the function specified by function every delay milliseconds. settimeout(function, delay) executes the function specified by function in delay milliseconds. requestanimationframe(callback) tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. if you don't want any user interaction you can use the setinterval() function which repeatedly executes the supplied code. if we wanted to make a game, we could use keyboard or mouse events to control the animation and use settimeout(). by setting eventlisteners, we catch any user interaction and execute our animation functions. in the examples below, we'll use the window.re...

Transformations - Web APIs
« previousnext » earlier in this tutorial we've learned about the canvas grid and the coordinate space. until now, we only used the default grid and changed the size of the overall canvas for our needs. with transformations there are more powerful ways to translate the origin to a different position, rotate the grid and even scale it. saving and restoring state before we look at the transformation methods, let's look at two other methods which are indispensable once you start generating ever more complex drawings. save() saves the entire state of the canvas. restore() restores the most recently saved canvas state. canvas states are stored on a stack. every time the save() method is called, the current drawing state is pushed onto the stack. a drawing state consists o...
...emoved from the stack, and settings are restored. if we hadn't saved the state using save(), we would need to change the fill color and transparency manually in order to return to the previous state. this would be easy for two properties, but if we have more than that, our code would become very long, very fast. when the second restore() statement is called, the original state (the one we set up before the first call to save) is restored and the last rectangle is once again drawn in black. screenshotlive sample translating the first of the transformation methods we'll look at is translate(). this method is used to move the canvas and its origin to a different point in the grid. translate(x, y) moves the canvas and its origin on the grid. x indicates the horizontal distance to move, and y...
...creenshotlive sample translating the first of the transformation methods we'll look at is translate(). this method is used to move the canvas and its origin to a different point in the grid. translate(x, y) moves the canvas and its origin on the grid. x indicates the horizontal distance to move, and y indicates how far to move the grid vertically. it's a good idea to save the canvas state before doing any transformations. in most cases, it is just easier to call the restore method than having to do a reverse translation to return to the original state. also if you're translating inside a loop and don't save and restore the canvas state, you might end up missing part of your drawing, because it was drawn outside the canvas edge. a translate example this example demonstrates some of the ...

ChildNode.after() - Web APIs
e, writable: true, value: function after() { var argarr = array.prototype.slice.call(arguments), docfrag = document.createdocumentfragment(); argarr.foreach(function (argitem) { var isnode = argitem instanceof node; docfrag.appendchild(isnode ? ...
...gani/js-polyfill_element.prototype.after/blob/master/after.js (function(x){ var o=x.prototype,p='after'; if(!o[p]){ o[p]=function(){ var e, m=arguments, l=m.length, i=0, t=this, p=t.parentnode, n=node, s=string, d=document; if(p!==null){ while(i<l){ e=m[i]; if(e instanceof n){ t=t.nextsibling; if(t!==null){ p.insertbefore(e,t); }else{ p.appendchild(e); }; }else{ p.appendchild(d.createtextnode(s(e))); }; ++i; }; }; }; }; })(element); /* minified: (function(x){ var o=x.prototype; o.after||(o.after=function(){var e,m=arguments,l=m.length,i=0,t=this,p=t.parentnode,n=node,s=string,d=document;if(p!==null){while(i<l){((...
... living standard initial definition. ...

Document.createElement() - Web APIs
t if tagname isn't recognized. syntax let element = document.createelement(tagname[, options]); parameters tagname a string that specifies the type of element to be created. the nodename of the created element is initialized with the value of tagname. don't use qualified names (like "html:a") with this method. when called on an html document, createelement() converts tagname to lower case before creating the element. in firefox, opera, and chrome, createelement(null) works like createelement("null"). options optional an optional elementcreationoptions object, containing a single property named is, whose value is the tag name of a custom element previously defined via customelements.define(). see web component example for more details. return value the new element. examples basic e...
...rome, createelement(null) works like createelement("null"). options optional an optional elementcreationoptions object, containing a single property named is, whose value is the tag name of a custom element previously defined via customelements.define(). see web component example for more details. return value the new element. examples basic example this creates a new <div> and inserts it before the element with the id "div1". html <!doctype html> <html> <head> <title>||working with elements||</title> </head> <body> <div id="div1">the text above has been created dynamically.</div> </body> </html> javascript document.body.onload = addelement; function addelement () { // create a new div element const newdiv = document.createelement("div"); // and give it some content co...
...in this case, our custom element extends the htmlulistelement, which represents the <ul> element. // create a class for the element class expandinglist extends htmlulistelement { constructor() { // always call super first in constructor ...

Element.scrollHeight - Web APIs
n due to overflow. the scrollheight value is equal to the minimum height the element would require in order to fit all the content in the viewport without using a vertical scrollbar. the height is measured in the same way as clientheight: it includes the element's padding, but not its border, margin or horizontal scrollbar (if present). it can also include the height of pseudo-elements such as ::before or ::after. if the element's content can fit without a need for vertical scrollbar, its scrollheight is equal to clientheight this property will round the value to an integer. if you need a fractional value, use element.getboundingclientrect(). syntax elemscrollheight = element.scrollheight; value an integer corresponding to the scrollheight pixel value of the element. example padding-...
... working draft initial definition ...
... working draft initial definition ...

Comparison of Event Targets - Web APIs
t whose eventlisteners are currently being processed. as the event capturing and bubbling occurs, this value changes. event.relatedtarget dom mouseevent interface identifies a secondary target for the event. event.explicitoriginaltarget event.webidl if the event was retargeted for some reason other than an anonymous boundary crossing, this will be set to the target before the retargeting occurs. for example, mouse events are retargeted to their parent node when they happen over text nodes (bug 185889), and in that case .target will show the parent and .explicitoriginaltarget will show the text node. unlike .originaltarget, .explicitoriginaltarget will never contain anonymous content. event.originaltarget event.webidl the original target of the...
...argeting occurs. for example, mouse events are retargeted to their parent node when they happen over text nodes (bug 185889), and in that case .target will show the parent and .explicitoriginaltarget will show the text node. unlike .originaltarget, .explicitoriginaltarget will never contain anonymous content. event.originaltarget event.webidl the original target of the event, before any retargetings. see anonymous content#event_flow_and_targeting for details. event.composedtarget event.webidl the original non-native target of the event before composition from shadow dom. use of explicitoriginaltarget and originaltarget todo: only available in a mozilla-based browser? todo: only suitable for extension-developers? examples <!doctype html> <html>...
... <td class="standard">target who's event listener is being processed <small>event.currenttarget</small></td> <td class="standard">identify other element (if any) involved in the event <small>event.relatedtarget</small></td> <td class="non-standard">if there was a retargetting of the event for some reason <small> event.explicitoriginaltarget</small> contains the target before retargetting (never contains anonymous targets)</td> <td class="non-standard">if there was a retargetting of the event for some reason <small> event.originaltarget</small> contains the target before retargetting (may contain anonymous targets)</td> </tr> </thead> <tr> <td id="target"></td> <td id="currenttarget"></td> <td id="relatedtarget"></td...

Event.initEvent() - Web APIs
once dispatched, it doesn't do anything anymore. do not use this method anymore as it is deprecated. instead use specific event constructors, like event(). ...
...ox for androidopera for androidsafari on iossamsung internetinitevent deprecatedchrome full support yesedge full support 12firefox full support 17 full support 17 no support ? ...
... full support yeswebview android full support yeschrome android full support yesfirefox android full support 17 full support 17 no support ? ...

HTMLBodyElement - Web APIs
ited links. methods no specific methods; inherits methods from its parent, htmlelement, and from windoweventhandlers. event handlers no specific event handlers; inherits event handlers from its parent, htmlelement and from windoweventhandlers. windoweventhandlers.onafterprint is an eventhandler representing the code to be called when the afterprint event is raised. windoweventhandlers.onbeforeprint is an eventhandler representing the code to be called when the beforeprint event is raised. windoweventhandlers.onbeforeunload is an eventhandler representing the code to be called when the beforeunload event is raised. windoweventhandlers.onhashchange is an eventhandler representing the code to be called when the hashchange event is raised. windoweventhandlers.onlanguagechange is a...
...ise was rejected but the rejection was not handled. windoweventhandlers.onunload is an eventhandler representing the code to be called when the unload event is raised. specifications specification status comment html living standardthe definition of 'htmlbodyelement' in that specification. living standard technically, the event-related properties onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onlanguagechange, onload, onmessage, onoffline, ononline, onpopstate, onresize, onstorage, and onunload, have been moved to windoweventhandlers. htmlbodyelement implements this interface. html 5.1the definition of 'htmlbodyelement' in that specification. recommendation html5the definition of 'htmlbodyelement' i...
...andlers. htmlbodyelement implements this interface. html 5.1the definition of 'htmlbodyelement' in that specification. recommendation html5the definition of 'htmlbodyelement' in that specification. recommendation the following properties are now obsolete: alink, bgcolor, background, link, text, and vlink. the following properties have been added: onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onload, onmessage, onoffline, ononline, onpopstate, onresize, onstorage, and onunload. document object model (dom) level 2 html specificationthe definition of 'htmlbodyelement' in that specification. obsolete no change from document object model (dom) level 1 specification. document object model (dom) level 1 sp...

In depth: Microtasks and the JavaScript runtime environment - Web APIs
ss multiple agents—each component of an agent is unique to that agent. here we look at how the runtime functions in slightly more detail. event loops each agent is driven by an event loop, which collects any user and other events, enqueuing tasks to handle each callback. it then runs any pending javascript tasks, then any pending microtasks, then performs any needed rendering and painting before looping again to check for pending tasks. your web site or app's code runs in the same thread, sharing the same event loop, as the user interface of the web browser itself. this is the main thread, and in addition to running your site's main code body, it handles receiving and dispatching user and other events, rendering and painting web content, and so forth. the event loop, then, drives every...
... will not run until the next iteration. each time a task exits, and the execution context stack is empty, each microtask in the microtask queue is executed, one after another. the difference is that execution of microtasks continues until the queue is empty—even if new ones are scheduled in the interim. in other words, microtasks can enqueue new microtasks and those new microtasks will execute before the next task begins to run, and before the end of the current event loop iteration. problems because your code runs in the same thread, using the same event loop, as the browser's user interface, if your code blocks or enters an infinite loop, the browser itself will stall. even sluggish performance, whether caused by a bug or because of complex work being done by your code, can cause the use...
...a request. however, code running at a more fundamental level—such as code comprising a library or framework—may need a way to schedule code to be run at a safe time while still executing on the main thread, independent of the results of any single request or task. microtasks are another solution to this problem, providing a finer degree of access by making it possible to schedule code to run before the next iteration of the event loop begins, instead of having to wait until the next one. the microtask queue has been around for a while, but it's historiclaly been used only internally in order to drive things like promises. the addition of queuemicrotask(), exposing it to web developers, creates a unified queue for microtasks which is used wherever it's necessary to have the ability to sched...

Basic concepts - Web APIs
nsaction idbtransaction.oncomplete was fired only when all data was guaranteed to have been flushed to disk. as of firefox 40, indexeddb transactions have relaxed durability guarantees to increase performance (see bug 1112702), which is the same behaviour as other indexeddb-supporting browsers. in this case the complete event is fired after the os has been told to write the data but potentially before that data has actually been flushed to disk. the event may thus be delivered quicker than before, however, there exists a small chance that the entire transaction will be lost if the os crashes or there is a loss of system power before the data is flushed to disk. since such catastrophic events are rare, most consumers should not need to concern themselves further. note: in firefox, if you wi...
...ransaction will be lost if the os crashes or there is a loss of system power before the data is flushed to disk. since such catastrophic events are rare, most consumers should not need to concern themselves further. note: in firefox, if you wish to ensure durability for some reason (e.g. you're storing critical data that cannot be recomputed later) you can force a transaction to flush to disk before delivering the complete event by creating a transaction using the experimental (non-standard) readwriteflush mode (see idbdatabase.transaction.) this is currently experimental, and can only be used if the dom.indexeddb.experimental pref is set to true in about:config. object store the mechanism by which data is stored in the database. the object store persistently holds records, which are...
...s, see using indexeddb. for the reference documentation on index, see idbkeyrange. key and value key a data value by which stored values are organized and retrieved in the object store. the object store can derive the key from one of three sources: a key generator, a key path, or an explicitly specified value. the key must be of a data type that has a number that is greater than the one before it. each record in an object store must have a key that is unique within the same store, so you cannot have multiple records with the same key in a given object store. a key can be one of the following types: string, date, float, a binary blob, and array. for arrays, the key can range from an empty value to infinity. and you can include an array within an array. alternatively, you can also lo...

Intersection Observer API - Web APIs
or checking visibility of the target. must be the ancestor of the target. defaults to the browser viewport if not specified or if null. rootmargin margin around the root. can have values similar to the css margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). the values can be percentages. this set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. defaults to all zeros. threshold either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. if you only want to detect when visibility passes the 50% mark, you can use a value of 0.5. if you want the callback to run every time visibility passes another 25%, you would specify the ...
...all of the element's parts. similarly, if the visible portion of an element is not rectangular, the element's intersection rectangle is construed to be the smallest rectangle that contains all the visible portions of the element. it's useful to understand a bit about how the various properties provided by intersectionobserverentry describe an intersection. the intersection root and root margin before we can track the intersection of an element with a container, we need to know what that container is. that container is the intersection root, or root element. this can be either a specific element in the document which is an ancestor of the element to be observed, or null to use the document's viewport as the container. the root intersection rectangle is the rectangle used to check against the ...
...io. the result: not only does the color get changed, but the transparency of the target element changes, too; as the intersection ratio goes down, the background color's alpha value goes down with it, resulting in an element that's more transparent. similarly, if the intersectionratio is going down, we use the string decreasingcolor and replace the word "ratio" in that with the intersectionratio before setting the target element's background-color. finally, in order to track whether the intersection ratio is going up or down, we remember the current ratio in the variable prevratio. result below is the resulting content. scroll this page up and down and notice how the appearance of the box changes as you do so. there's an even more extensive example at timing element visibility with the in...

LocalFileSystem - Web APIs
, you need to create only one file system, but in a few cases, it might be useful to create a second one. for example, if you were to create a mail app, you might create a temporary storage for caching assets (like images and attachments) to speed up performance, while creating persistent storage for unique data—such as drafts of emails that were composed while offline—that should not be lost before they are backed up into the cloud. using persistent storage the requestfilesystem() method lets you ask for persistent or temporary storage. persistent storage is storage that stays in the browser unless the app or the user removes it, but the user must grant you permission before you can use it. in contrast, temporary storage is automatically granted without any user permission, but it can b...
...once your user grants it, you don't need to call requestquota() again. subsequent calls are a noop. another api, the quota management api, lets you query an origin's current quota usage and allocation using window.webkitpersistentstorage.queryusageandquota(). to learn more, see this stackoverflow answer. (an older version of the api is described at managing h...
... domstring url, in entrycallback successcallback, in optional errorcallback errorcallback); constants constant value description temporary 0 transient storage that can be be removed by the browser at its discretion. persistent 1 storage that stays in the browser unless the user or the app expunges it. the user must grant permission before the app can use this type of storage. methods requestfilesystem() requests a file system where data should be stored. you access a sandboxed file system by requesting a localfilesystem object using this global method, window.requestfilesystem(). void requestfilesystem( in unsigned short type, in unsigned long long size, in filesystemcallback successcallback, in errorcallback err...

MutationObserver.observe() - Web APIs
notes reusing mutationobservers you can call observe() multiple times on the same mutationobserver to watch for changes to different parts of the dom tree and/or different types of changes. there are some caveats to note: if you call observe() on a node that's already being observed by the same mutationobserver, all existing observers are automatically removed from all targets being observed before the new observer is activated. if the same mutationobserver is not already in use on the target, then the existing observers are left alone and the new one is added. observation follows nodes when disconnected mutation observers are intended to let you be able to watch the desired set of nodes over time, even if the direct connections between those nodes are severed. if you begin watching a s...
...ation follows nodes when disconnected mutation observers are intended to let you be able to watch the desired set of nodes over time, even if the direct connections between those nodes are severed. ...
... theoretically, this means that if you keep track of the mutationrecord objects describing the changes that occur, you should be able to "undo" the changes, rewinding the dom back to its initial state. ...

ParentNode.prepend() - Web APIs
each node can be specified as either a node object or as a string; strings are inserted as new text nodes. return value undefined. exceptions hierarchyrequesterror: node cannot be inserted at the specified point in the hierarchy. ...
...each node can be specified as either a node object or as a string; strings are inserted as new text nodes. return value undefined. exceptions hierarchyrequesterror: node cannot be inserted at the specified point in the hierarchy. ...
... living standard initial definition. ...

Using the Payment Request API - Web APIs
l that the interaction has finished — you'd use this to carry out finishing steps, like updating the user interface to tell the user the transaction is complete, etc. other useful payment request methods there are some other useful payment request methods worth knowing about. paymentrequest.canmakepayment() can be used to check whether the paymentrequest object is capable of making a payment before you start the payment process. it returns a promise that fulfills with a boolean indicating whether it is or not, for example: // dummy payment request to check whether payment can be made new paymentrequest(buildsupportedpaymentmethoddata(), {total: {label: 'stub', amount: {currency: 'usd', value: '0.01'}}}) .canmakepayment() .then(function(result) { if(result) { ...
...text = "setup w3c checkout"; } }).catch(function(error) { // the user may have turned off the querying functionality in their // privacy settings. the website does not know whether they can make // a fast payment, so pick a generic title. checkoutbutton.innertext = "checkout with w3c"; }); } note: see our customizing the payment button demo for the full code. checking before all prices are known if the checkout flow needs to know whether paymentrequest.canmakepayment() will return true even before all line items and their prices are known, you can instantiate paymentrequest with dummy data and pre-query .canmakepayment(). if you call .canmakepayment() multiple times, keep in mind that the first parameter to the paymentrequest constructor should contain the same meth...
...erver and call `paymeresponse.complete()`. }).catch(function(error) { console.log(error); if (fallbacktolegacyonpaymentrequestfailure) { window.location.href = '/legacy-web-form-checkout'; } else { showcheckouterrortouser(); } }); } else { window.location.href = '/legacy-web-form-checkout'; } } note: see our checking user can make payments before prices are known demo for the full code. recommending a payment app when user has no apps if you select to pay with the bobpay demo payment provider on this merchant page, it tries to call paymentrequest.show(), while intercepting the notsupportederr exception. if this payment method is not supported, it redirects to the signup page for bobpay. the code looks something like this: checkoutbut...

PerformanceResourceTiming.fetchStart - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
... example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
... example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...

PushEvent - Web APIs
ed full support 16disabled disabled from version 16: this feature is behind the enable service workers preference. ...
...ed full support 16disabled disabled from version 16: this feature is behind the enable service workers preference. ...
...ed full support 16disabled disabled from version 16: this feature is behind the enable service workers preference. ...

Web Push API Notifications best practices - Web APIs
hen the browser is not running.” — an unnamed marketing site positive uses of push but there’s a bright and useful side to push notifications, too. let’s say you and your team commonly use a chat program to communicate, but today you’re happily working somewhere, and problem comes up. say your program manager found a hiccup in the approvals and wants to get your feedback on something before she proceeds. after a few failed attempts to get your attention, they send you an email, and your email app produces a push notification that successfully alerts you, even though your mail web app is not open. in this document, we’ll talk about the ethical use of web push notifications. sometimes they can eliminate frustration and annoyance, and sometimes they can cause them, and it’s up to...
...oyance, and sometimes they can cause them, and it’s up to you as a developer to make wise recommendations (and decisions) about the use of push notifications. what are you hoping to achieve with this push notification? as with everything, with great power comes great responsibility. every push notification should be useful and time-sensitive, and the user should always be asked for permission before sending the first one, and be offered an easy way to opt out of getting more in the future. there are some basic questions you can answer to determine if a push notification is needed: is there someone waiting in real-time for a response? in our above example, the program manager is awaiting your response and so a push notification is appropriate. is up-to-the minute updating necessary? i us...
...shows respect for the user, and a clear value to accepting push notifications. browser mitigations because of abuses of push notifications in the past, web browser developers have begun to implement strategies to help mitigate this problem. for example, safari 12.1 now requires—and other browsers either already do, or are planning[1] to do so—that the user interact with the page in some way before the page can request permission to perform push notifications. this at least prevents the user from getting spontaneously asked this question on web pages thaty've only glanced at once may rarely if ever look at again. [1] in the case of firefox, see bug 1524619, in which we find that firefox 68 implements this, disabled by default, behind the preference dom.webnotifications.requireuserinteracti...

ReadableStream.cancel() - Web APIs
mples in jake archibald's cancelling a fetch example, a stream is used to fetch the whatwg html spec chunk by chunk; each chunk is searched for the string "service workers". when the search terms is found, cancel() is used to cancel the stream — the job is finished so it is no longer needed. ...
... var caseinsensitive = true; var url = 'https://html.spec.whatwg.org/'; console.log(`searching '${url}' for '${searchterm}'`); fetch(url).then(response => { console.log('received headers'); var decoder = new textdecoder(); var reader = response.body.getreader(); var tomatch = caseinsensitive ? ...
...see devtools for details. does the response lack cors...

Resource Timing API - Web APIs
vide a time value accurate to 5 µs (because, for example, due to hardware or software constraints), the browser can represent a the value as a time in milliseconds accurate to a millisecond. resource loading timestamps an application can get timestamps for the various stages used to load a resource. ...
...lication can get timestamps for the various stages used to load a resource. the first property in the processing model is starttime which returns the timestamp immediately before the resource loading process begins. the fetchstart timestamps follows and redirect processing (if applicable) and preceeds dns lookup. the next stages are connectstart and connectend which are the timestamps immediately before and after connecting to the server, respectively. the last three timestamps are, in order: requeststart - the timestamp before the browser starts requesting the resource from the server; responsestart - the timestamp after the browser receives the first byte of the response from the server; and responseend - the timestamp after the browser receives the last byte of the resource. if the resource i...
...resource size the performanceresourcetiming interface has three properties that can be used to obtain size data about a resource. the transfersize property returns the size (in octets) of the fetched resource including the response header fields plus the response payload body. the encodedbodysize property returns the size (in octets) received from the fetch (http or cache), of the payload body, before removing any applied content-codings. decodedbodysize returns the size (in octets) received from the fetch (http or cache) of the message body, after removing any applied content-codings. other properties the nexthopprotocol property returns the network protocol used to fetch the resource. the initiatortype property returns the type of resource that initiated the performance entry such as "css...

Using the Screen Capture API - Web APIs
ing a screen capture stream: cursor indicates whether or not to capture the mouse cursor, and if so, whether to do so all the time or only while the mouse is in motion. the possible values are: always the mouse cursor should always be captured in the generated stream. motion the cursor should only be visible while moving, and, at the discretion of the user agent, for a brief time before after moving. then the cursor is removed from the stream. never the cursor should never be visible in the generated stream. logicalsurface a boolean which if true indicates that the capture should include offscreen areas of the source, if there are any. none of the constraints are applied in any way until after the content to capture has been selected. the contraints alter what you se...
...urces available for getdisplaymedia(). capturing shared audio getdisplaymedia() is most commonly used to capture video of a user's screen (or parts thereof). however, user agents may allow the capture of audio along with the video content. the source of this audio might be the selected window, the entire computer's audio system, or the user's microphone (or a combination of all of the above). before starting a project that will require sharing of audio, be sure to check the browser compatibility in mediadevices.getdisplaymedia() to see if the browsers you wish compaibility with have support for audio in captured screen streams. to request that the screen be shared with included audio, the options passed into getdisplaymedia() might look like this: const gdmoptions = { video: true, audi...
...sible in the shared stream. this effect can be amplified when capturing logical display surfaces, which may contain content that the user doesn't know about at all, let alone see. user agents which take privacy seriously should obfuscate content that is not actually visible onscreen, unless authorization has been given to share that content specifically. authorizing capture of display contents before streaming of captured screen contents can begin, the user agent will ask the user to confirm the sharing request, and to select the content to share. examples simple screen capture in this example, the contents of the captured screen area are simply streamed into a <video> element on the same page. javascript there isn't all that much code needed in order to make this work, and if you're f...

StereoPannerNode.StereoPannerNode() - Web APIs
s://github.com/mdn/browser-compat-data and send us a pull request. ...
... full support 53ie no support noopera full support 42safari no support nowebview android full support 55notes full support 55notes notes before chrome 59, the default values were not supported.chrome android full support 55notes full support 55notes notes before chrome 59, the default values were not supported.firefox android full support 53opera android full support ...
... ...

Streams API concepts - Web APIs
...
...eader. you can use whatever code you like to produce the chunks ready for writing; the writer plus the associated code is called a producer. when a writer is created and starts writing to a stream (an active writer), it is said to be locked to it. only one writer can write to a writable stream at one time. if you want another writer to start writing to your stream, you typically need to abort it before you then attach another writer to it. an internal queue keeps track of the chunks that have been written to the stream but not yet been processed by the underlying sink. there is also a construct you’ll use called a controller — each writer has an associated controller that allows you to control the stream (for example, to abort it if wished). you can make use of writable streams using t...
... ...

Text.splitText() - Web APIs
d node is returned to the caller. if the original node had a parent, the new node is inserted as the next sibling of the original node. if the offset is equal to the length of the original node, the newly created node has no data. separated text nodes can be concatenated using the node.normalize() method. syntax newnode = textnode.splittext(offset) parameters offset the index immediately before which to break the text node. return value returns a newly created text node that contains the text after the specified offset point. exceptions thrown a domexception with a value of index_size_err is thrown if the specified offset is negative or is greater than the number of 16-bit units in the node's text; a domexception with a value of no_modification_allowed_err is thrown if the node is ...
... living standard no change from document object model (dom) level 3 core specification. document object model (dom) level 3 core specificationthe definition ...
... living standard no change from document object model (dom) level 3 core specification. document object model (dom) level 3 core specificationthe definition of 'text.splittext' i...

WebGLRenderingContext.pixelStorei() - Web APIs
_default_webgl, gl.none webgl when using a webgl 2 context, the following values are available additionally: constant description type default value allowed values (for param) specified in gl.pack_row_length number of pixels in a row. glint 0 0 to infinity opengl es 3.0 gl.pack_skip_pixels number of pixel locations skipped before the first pixel is written into memory. glint 0 0 to infinity opengl es 3.0 gl.pack_skip_rows number of rows of pixel locations skipped before the first pixel is written into memory glint 0 0 to infinity opengl es 3.0 gl.unpack_row_length number of pixels in a row. glint 0 0 to infinity opengl es 3.0 gl.unpack_image_height im...
...ore the first pixel is written into memory glint 0 0 to infinity opengl es 3.0 gl.unpack_row_length number of pixels in a row. ...
... 0 to infinity opengl es 3.0 gl.unpack_image_height image height used for reading pixel data from memory glint 0 0 to infinity opengl es 3.0 gl.unpack_skip_pixels number of pixel images skipped before the first pixel is read from memory glint 0 0 to infinity opengl es 3.0 gl.unpack_skip_rows number of rows of pixel locations skipped before the first pixel is read from memory glint 0 0 to infinity opengl es 3.0 gl.unpack_skip_images number of pixel images skipped before the first pixel is read from memory glint 0 0 to infinity opengl es 3.0 examples setting the pixel storage mode affects the webglrenderingcontext.readpixels() operations, as well as unpacking of textures with the webglrende...

Adding 2D content to a WebGL context - Web APIs
imple square untextured plane, so let's start there, by building code to draw a square plane. the complete source code for this project is available on github. this project uses the glmatrix library to perform its matrix operations, so you will need to include that in your project. we're loading a copy from a cdn in our html's <head>. drawing the scene the most important thing to understand before we get started is that even though we're only rendering a square plane object in this example, we're still drawing in 3d space. it's just we're drawing a square and we're putting it directly in front of the camera perpendicular to the view direction. we need to define the shaders that will create the color for our simple scene as well as draw our object. these will establish how the square plane ...
...we'll do that using a function we call initbuffers(); as we explore more advanced webgl concepts, this routine will be augmented to create more -- and more complex -- 3d objects. function initbuffers(gl) { // create a buffer for the square's positions. const p...
...s very simple. it uses a few utility routines we'll cover shortly. function drawscene(gl, programinfo, buffers) { gl.clearcolor(0.0, 0.0, 0.0, 1.0); // clear to black, fully opaque gl.cleardepth(1.0); // clear everything gl.enable(gl.depth_test); // enable depth testing gl.depthfunc(gl.lequal); // near things obscure far things // clear the canvas before we start drawing on it. gl.clear(gl.color_buffer_bit | gl.depth_buffer_bit); // create a perspective matrix, a special matrix that is // used to simulate the distortion of perspective in a camera. // our field of view is 45 degrees, with a width/height // ratio that matches the display size of the canvas // and we only want to see objects between 0.1 units // and 100 units away fr...

Lifetime of a WebRTC session - Web APIs
s page is currently under construction, and some of the content will move to other pages as the webrtc guide material is built out. pardon our dust! establishing the connection the internet is big. really big. it’s so big that years ago, smart people saw how big it was, how fast it was growing, and the limitations of the 32-bit ip addressing system, and realized that something had to be done before we ran out of addresses to use, so they started working on designing a new 64-bit addressing system. but they realized that it would take longer to complete the transition than 32-bit addresses would last, so other smart people came up with a way to let multiple computers share the same 32-bit ip address. network address translation (nat) is a standard which supports this address sharing by handl...
...exchanged during signaling: control messages used to set up, open, and close the communication channel, and to handle errors. information needed in order to set up the connection: the ip addressing and port information needed for the peers to be able to talk to one another. media capability negotiation: what codecs and media data formats can the peers understand? these need to be agreed upon before the webrtc session can begin. only once signaling has been successfully completed can the true process of opening the webrtc peer connection begin. it's worth noting that the signaling server does not actually need to understand or do anything with the data being exchanged through it by the two peers during signaling. the signaling server is, in essence, a relay: a common point which both side...
... is up and running. then media shifts to the new network connection and the old one is closed. note: different browsers support ice restart under different sets of conditions. not all browsers will perform ice restart due to network congestion, for example. if you need to change the configuration of the connection in some way (such as changing to a different set of ice servers), you can do so before restarting ice by calling rtcpeerconnection.setconfiguration() with an updated rtcconfiguration dictionary before restarting ice. to explicitly trigger ice restart, simply start the renegotiation process by calling rtcpeerconnection.createoffer(), specifying the icerestart option with a value of true. then handle the connection process from then on just like you normally would. this generates ne...

Web Video Text Tracks Format (WebVTT) - Web APIs
t align:center size:35% what are you waiting for? webvtt cues a cue is a single subtitle block that has a single start time, end time, and textual payload. example 6 consists of the header, a blank line, and then five cues separated by blank lines. a cue consists of five components: an optional cue identifier followed by a newline. cue timings. optional cue settings with at least one space before the first and between each setting. one or more newlines. the cue payload text. example 7 - example of a cue 1 - title crawl 00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start some time ago in a place rather distant.... cue identifier the identifier is a name that identifies the cue. it can be used to reference the cue from a script. it must not contain a newline and ca...
... the attribute kind is chapters then you cannot use tags. timestamp tag the timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. the active text is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. any text before the active text in the payload is previous text . any text beyond the active text is future text . this enables karaoke style captions. example 12 - karaoke style text 1 00:16.500 --> 00:18.500 when the moon <00:17.500>hits your eye 1 00:00:18.500 --> 00:00:20.500 like a <00:19.000>big-a <00:19.500>pizza <00:20.000>pie 1 00:00:20.500 --> 00:00:21.500 that's <00:00:21.000>amore ...
...tregion the methods used for region are listed below along with description of their functionality: scrollsetting: for adjusting the scrolling setting of all nodes present in given region. vtt region constructor: for construction of new vtt regions. tutorial on how to write a webvtt file there are few steps that can be followed to write a simple webvtt file. before start, it must be noted that you can make use of a notepad and then save the file as ‘.vtt’ file. steps are given below: open a notepad. the first line of webvtt is standardized similar to the way some other languages require you to put headers as the file starts to indicate the file type. on the very first line you have to write: webvtt 3. leave the second line blank, and on the...

Fundamentals of WebXR - Web APIs
he web. together, these technologies are referred to as mixed reality, which is abbreviated xr. mixed reality is a large and complex subject, with much to learn and many other apis to bring together in order to create an engaging experience for users. in this guide, we provide a fundamental overview of what webxr is and how it works, as well as providing a foundation for what you'll need to know before you even begin to learn to develop augmented reality and virtual reality experiences for the web. what webxr is and isn't webxr is an api for web content and apps to use to interface with mixed reality hardware such as vr headsets and glasses with integrated augmented reality features. this includes both managing the process of rendering the views needed to simulate the 3d experience and the ab...
...ence is that webxr has integrated support for the advanced input controllers that are used with most mixed reality headsets, while webvr relied on the gamepad api to support the controllers. in webxr, the primary select and squeeze actions are directly supported using events, while other controls are available through a special webxr-specific implementation of the gamepad object. basic concepts before getting into too much detail, let's consider some basic concepts that you need to know before you learn how to develop xr code. field of view the term field of view (fov) is one which applies to any visual technology, from old film cameras to modern digital video cameras, including the cameras in computers and mobile devices. what is field of view? the field of view is, at its essence, the ex...
...d, while overlaying the rendered image atop the scene. the user is, thus, directly viewing the real world instead of a series of digital photos of it. both types of device should be capable of also presenting vr sessions. webxr doesn't generally care which type of device you're using, and the rendering process is almost exactly the same as for vr, except you don't erase the background or skybox before rendering each frame. for more information about using webxr to create augmented reality experiences, see augmented reality with webxr. types of webxr hardware the simplest xr presentation involves rendering the scene directly to the user's screen, either in the context of a web document, or in full screen mode. this is most common when the user either doesn't have a dedicated xr device, or wh...

WebXR Device API - Web APIs
g to use the webgl context for webxr rendering. returns a promise which resolves once the context has been prepared, or is rejected if the context cannot be configured for use by webxr. guides and tutorials the following guides and tutorials are a great resource to learn how to comprehend webxr and the underlying 3d and vr/ar graphics concepts. foundations and basics fundamentals of webxr before diving into the details of how to create content using webxr, it may be helpful to read this overview of the technology, which includes introductions to terminology that may be unfamiliar to you, or which may be used in a new way. matrix math for the web a guide covering how matrices can be used on the web, including both for css transforms and for webgl purposes, as well as to handle the posit...
.... webxr application life cycle an overview of the overall life cycle of a webxr application, from startup to shutdown. this article serves as an introduction to the basics of what's involved in creating a webxr experience without diving into the code in detail. it's a good way to prepare for the next steps. creating a mixed reality experience starting up and shutting down a webxr session before actually presenting a scene using an xr device such as a headset or goggles, you need to create a webxr session bound to a rendering layer that draws the scene for presentation in each of the xr device's displays so that the 3d effect can be presented to the user. this guide covers how to create and stop webxr sessions. geometry and reference spaces in webxr in this guide, the required concepts...
... learn how to make use of these devices' controls. performance and security webxr performance guide recommendations and tips to help you optimize the performance of your webxr application. permissions and security for webxr the webxr device api has several areas of security to contend with, from establishing feature-policy to ensuring the user intends to use the mixed reality presentation before activating it. including other media positional audio in a 3d environment in 3d environments, which may either be 3d scenes rendered to the screen or a mixed reality experience experienced using a headset, it's important for audio to be performed so that it sounds like it's coming from the direction of its source. this guide covers how to accomplish this. playing video in a 3d environment ...

Web Audio API - Web APIs
ion general containers and definitions that shape audio graphs in web audio api usage. audiocontext the audiocontext interface represents an audio-processing graph built from audio modules linked together, each represented by an audionode. an audio context controls the creation of the nodes it contains and the execution of the audio processing, or decoding. you need to create an audiocontext before you do anything else, as everything happens inside a context. audiocontextoptions the audiocontextoptions dictionary is used to provide options when instantiating a new audiocontext. audionode the audionode interface represents an audio-processing module like an audio source (e.g. an html <audio> or <video> element), audio destination, intermediate processing module (e.g. a filter like biquad...
...node interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once. gainnode the gainnode interface represents a change in volume. it is an audionode audio-processing module that causes a given gain to be applied to the input data before its propagation to the output. waveshapernode the waveshapernode interface represents a non-linear distorter. it is an audionode that use a curve to apply a waveshaping distortion to the signal. beside obvious distortion effects, it is often used to add a warm feeling to the signal. periodicwave describes a periodic waveform that can be used to shape the output of an oscillatornode. iirfilte...
...sponding audioworkletnode. audioworkletglobalscope the audioworkletglobalscope interface is a workletglobalscope-derived object representing a worker context in which an audio processing script is run; it is designed to enable the generation, processing, and analysis of audio data directly using javascript in a worklet thread rather than on the main thread. obsolete: script processor nodes before audio worklets were defined, the web audio api used the scriptprocessornode for javascript-based audio processing. because the code runs in the main thread, they have bad performance. the scriptprocessornode is kept for historic reasons but is marked as deprecated and will be removed in a future version of the specification. scriptprocessornode the scriptprocessornode interface allows the ...

Window: popstate event - Web APIs
window.onpopstate = () => settimeout(dosomething, 0); when popstate is sent when the transition occurs, either due to the user triggering the browser's "back" button or otherwise, the popstate event is near the end of the process to transition to the new location. it happens after the new location has loaded (if needed), displayed, made visible, and so on, after the pageshow event is sent, but before the persisted user state information is restored and the hashchange event is sent. to better understand when the popstate event is fired, consider this simplified sequence of events that occurs when the current history entry changes due to either the user navigating the site or the history being traversed programmatically. here, the transition is changing the current history entry to one we'll r...
...history entry changes due to either the user navigating the site or the history being traversed programmatically. here, the transition is changing the current history entry to one we'll refer to as new-entry. the current page's session history stack entry will be referred to as current-entry. if new-entry doesn't currently contain an existing document, fetch the content and create its document before continuing. this will eventually send events such as domcontentloaded and load to the window containing the document, but the steps below will continue to execute in the meantime. if current-entry's title wasn't set using one of the history api methods (pushstate() or replacestate(), set the entry's title to the string returned by its document.title attribute. if the browser has state informati...
... such as domcontentloaded and load to the window containing the document, but the steps below will continue to execute in the meantime. if current-entry's title wasn't set using one of the history api methods (pushstate() or replacestate(), set the entry's title to the string returned by its document.title attribute. if the browser has state information it wishes to store with the current-entry before navigating away from it, it then does so. the entry is now said to have "persisted user state." this information the browser might add to the history session entry may include, for instance, the document's scroll position, the values of form inputs, and other such data. if new-entry has a different document object than current-entry, the browsing context is updated so that its document property ...

WindowOrWorkerGlobalScope.setTimeout() - Web APIs
rameters function a function to be executed after the timer expires. code an alternative syntax that allows you to include a string instead of a function, which is compiled and executed when the timer expires. this syntax is not recommended for the same reasons that make using eval() a security risk. delay optional the time, in milliseconds (thousandths of a second), the timer should wait before the specified function or code is executed. if this parameter is omitted, a value of 0 is used, meaning execute "immediately", or more accurately, the next event cycle. note that in either case, the actual delay may be longer than intended; see reasons for delays longer than specified below. arg1, ..., argn optional additional arguments which are passed through to the function specified by func...
...leartimeout() routines. pressing the first button will set a timeout which calls an alert dialog after two seconds and stores the timeout id for use by cleartimeout(). you may optionally cancel this timeout by pressing on the second button. html <p>live example</p> <button onclick="delayedalert();">show an alert box after two seconds</button> <p></p> <button onclick="clearalert();">cancel alert before it happens</button> javascript var timeoutid; function delayedalert() { timeoutid = window.settimeout(window.alert, 2*1000, 'that was really slow!'); } function clearalert() { window.cleartimeout(timeoutid); } result see also cleartimeout() example. polyfill if you need to pass one or more arguments to your callback function, but need it to work in browsers which don't support sen...
...terminated. for example: function foo() { console.log('foo has been called'); } settimeout(foo, 0); console.log('after settimeout'); will write to the console: after settimeout foo has been called this is because even though settimeout was called with a delay of zero, it's placed on a queue and scheduled to run at the next opportunity; not immediately. currently-executing code must complete before functions on the queue are executed, thus the resulting execution order may not be as expected. deferral of timeouts during pageload starting in firefox 66, firefox will defer firing settimeout and setinterval timers while the current tab is loading. firing is deferred until the mainthread is deemed idle (similar to window.requestidlecallback()), or until the load event is fired. maximum del...

XMLHttpRequest - Web APIs
e, xmlhttprequest can be used to retrieve any type of data, not just xml. if your communication needs to involve receiving event data or message data from a server, consider using server-sent events through the eventsource interface. for full-duplex communication, websockets may be a better choice. constructor xmlhttprequest() the constructor initializes an xmlhttprequest. it must be called before any other method calls. properties this interface also inherits properties of xmlhttprequesteventtarget and of eventtarget. xmlhttprequest.onreadystatechange an eventhandler that is called whenever the readystate attribute changes. xmlhttprequest.readystate read only returns an unsigned short, the state of the request. xmlhttprequest.response read only returns an arraybuffer, blob, d...
...uest.status, this includes the entire text of the response message ("200 ok", for example). note: according to the http/2 specification (8.1.2.4 response pseudo-header fields), http/2 does not define a way to carry the version or reason phrase that is included in an http/1.1 status line. xmlhttprequest.timeout is an unsigned long representing the number of milliseconds a request can take before automatically being terminated. xmlhttprequesteventtarget.ontimeout is an eventhandler that is called whenever the request times out. xmlhttprequest.upload read only is an xmlhttprequestupload, representing the upload process. xmlhttprequest.withcredentials is a boolean that indicates whether or not cross-site access-control requests should be made using credentials such as cookies or aut...
...equest.open() initializes a request. xmlhttprequest.overridemimetype() overrides the mime type returned by the server. xmlhttprequest.send() sends the request. if the request is asynchronous (which is the default), this method returns as soon as the request is sent. xmlhttprequest.setrequestheader() sets the value of an http request header. you must call setrequestheader()after open(), but before send(). non-standard methods xmlhttprequest.init() initializes the object for use from c++ code. warning: this method must not be called from javascript. xmlhttprequest.openrequest() initializes a request. this method is to be used from native code; to initialize a request from javascript code, use open() instead. see the documentation for open(). xmlhttprequest.sendasbinary() a var...

ARIA live regions - Accessibility
p and provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies. note: assistive technologies will announce dynamic changes in the content of a live region. including an aria-live attribute or a specialized live region role (such as role="alert") on the element you want to announce changes to works as long as you add the attribute before the changes occur — either in the original markup, or dynamically using javascript. simple live regions dynamic content which updates without a page reload is generally either a region or a widget. simple content changes which are not interactive should be marked as live regions. below is a list of each related aria live region property with a description. aria-live: the aria-live=politen...
...'click', event => { const planetsselect = document.queryselector('#planetsselect'); const selectedplanet = planetsselect.options[planetsselect.selectedindex].value; renderplanetinfo(selectedplanet); }); as the user selects a new planet, the information in the live region will be announced. because the live region has aria-live="polite", the screen reader will wait until the user pauses before announcing the update. thus, moving down in the list and selecting another planet will not announce updates in the live region. updates in the live region will only be announced for the planet finally chosen. here is a screenshot of voiceover on mac announcing the update (via subtitles) to the live region: preferring specialized live region roles in the following well-known predefined cases ...
...sers currently logged in. display a list of users where a user's log-in and log-out status will be reflected dynamically (without a page reload). <ul id="roster" aria-live="polite" aria-relevant="additions removals"> <!-- use javascript to add remove users here--> </ul> breakdown of aria live properties: aria-live="polite" indicates that the screen reader should wait until the user is idle before presenting updates to the user. this is the most commonly used value, as interrupting the user with "assertive" might interrupt their flow. aria-atomic is not set (false by default) so that only the added or removed users should be spoken and not the entire roster each time. aria-relevant="additions removals" ensures that both users added or removed to the roster will be spoken. ...

ARIA annotations - Accessibility
the semantics for this have long been available in html, via the <ins> and <del> elements: <p>freida’s pet is a <del>black cat called luna</del><ins>purple tyrannosaurus rex called tiny</ins>.</p> with the new additions, you now have new roles available to provide the same semantics, should you be unable to use <ins> and <del> el...
...need to wrap the commented text with an element containing the aria-details attribute, the value of which should be the id of the comment. <mark> is a suitable element for this purpose (a comment is a reference annotation), so the annotation could look like this: <p>the last half of the song is a slow-rising crescendo that peaks at the <mark aria-details="thread-1">end of the guitar solo</mark>, before fading away sharply.</p> <div role="comment" id="thread-1" data-author="chris"> <h3>chris said</h3> <p class="comment-text">i really think this moment could use more cowbell.</p> <p><time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></p> </div> note: if for some reason you can’t use the <mark> element in your application, you could also use <span role="mark"></span>. since ...
.../div> note: if for some reason you can’t use the <mark> element in your application, you could also use <span role="mark"></span>. ...

Typical use cases of Flexbox - CSS: Cascading Style Sheets
ck for grid, and also in order to get alignment capabilities. this is something that may well change once box alignment is implemented in block layout. in this guide i look at some of the typical things you might use flexbox for today. navigation a common pattern for navigation is to have a list of items displayed as a horizontal bar. this pattern, as basic as it seems, was difficult to achieve before flexbox. it forms the most simple of flexbox examples, and could be considered the ideal flexbox use case. when we have a set of items that we want to display horizontally, we may well end up with additional space. we need to decide what to do with that space, and have a couple of options. we either display the space outside of the items — therefore spacing them out with white space between or...
...th aligning items on the main axis. in the below live example we display the items at their natural size and by using justify-content: space-between make equal amounts of space between the items. you can change how the space is distributed using the space-around value, or where supported, space-evenly. you could also use flex-start to place the space at the end of the items, flex-end to place it before them, or center to centre the navigation items. space distributed within the items a different pattern for navigation would be to distribute the available space within the items themselves, rather than create space between them. in this case we would use the flex properties to allow items to grow and shrink in proportion to one another as described in controlling ratios of flex items along th...
...happens. also in this example we are using margins on the flex items to create a gap between items, and a negative margin on the container in order that the items still remain flush with the right and left edges. until the gap properties from the box alignment specification are implemented in flexbox, we have to use margins in this way if we want to create a gutter between items. center item before flexbox, developers would joke that the hardest problem in web design was vertical centering. this has now been made straightforward using the alignment properties in flexbox, as the following live example shows. you can play with the alignment, aligning the item to the start with flex-start or end with flex-end. in the future we may not need to make a container a flex container just to centr...

Using CSS counters - CSS: Cascading Style Sheets
the given pseudo-element, from outermost to innermost, separated by the specified string. the counters are rendered in the specified style (decimal by default). basic example this example adds "section [the value of the counter]:" to the beginning of each heading. css body { counter-reset: section; /* set a counter named 'section', and its initial value is 0. ...
... counter-reset: section; /* set a counter named 'section', and its initial value is 0. */ } h3::before { counter-increment: section; /* increment the value of section counter by 1 */ content: "section " counter(section) ": "; /* display the word 'section ', the value of section counter, and a colon before the content of each h3 */ } html <h3>introduction</h3> <h3>body</h3> <h3>conclusion</h3> result nesting counters a css counter can be especially useful for making outlined lists, because a new instance of the counter is automatically created in child elements. using the counters() function, separating text can be inserted between differen...
...n child elements. using the counters() function, separating text can be inserted between different levels of nested counters. ...

Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
ply to the start of that dimension, the second to the end. if you only use one value it is applied to both. in a horizontal writing mode this css would apply a 5px margin to the top of the box and a 10px margin to the bottom. .box { margin-block: 5px 10px; } note: the shorthand properties margin-inline and margin-block shipped in firefox 66. as these are new properties check browser support before using. padding examples the mapped padding properties of padding-inline-start, padding-inline-end, padding-block-start, and padding-inline-end can be used instead of their physical counterparts. in the example below i have two boxes, one of which is using physical padding properties and the other logical padding properties. with a writing-mode of horizontal-tb, both boxes should appear the sa...
...ck — which allow you to set the padding of the two inline, and two block dimensions, respectively. in a horizontal writing-mode this css would apply 5px of padding to the top of the box and 10px of padding to the bottom: .box { padding-block: 5px 10px; } note: the shorthand properties padding-inline and padding-block shipped in firefox 66. as these are new properties check browser support before using. border examples the border properties are the main reason that logical properties and values seems to have so many properties, as we have the longhands for the color, width, and style of the border on each side of a box, along with the shorthand to set all three at once for each side. as with margin and padding we have a mapped version of each physical property. the demo below uses som...
...sion. the below code, in a horizontal writing mode, would give you a 2px green solid border on the top and bottom of the box, and a 4px dotted purple border on the left and right. .box { border-block: 2px solid green; border-inline-width: 4px; border-inline-style: dotted; border-inline-color: rebeccapurple; } note: these two value shorthands shipped in firefox 66, check browser support before using as other browsers may not have implemented them yet. flow relative border-radius properties the specification has fairly recently added flow-relative values for the border-radius longhands. these have not yet been implemented by any browser. the below example, in a horizontal writing-mode, would set the top-right border radius to 1em, the bottom-right to 0, the bottom-left to 20px and th...

Introducing the CSS Cascade - CSS: Cascading Style Sheets
e. some browsers let users modify the user-agent stylesheet. although some constraints on user-agent stylesheets are set by the html specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. to simplify the development process, web developers often use a css reset style sheet, forcing common properties values to a known state before beginning to make alterations to suit their specific needs. author stylesheets author stylesheets are the most common type of style sheet. these are style sheets that define styles as part of the design of a given web page or site. the author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme. user styleshe...
... */ author css 2: @media screen { li { margin-left: 3px } } @media print { li { margin-left: 1px } } user css: .specific { margin-left: 1em } html: <ul> <li class="specific">1^st</li> <li>2^nd</li> </ul> in this case, declarations inside li and .specific rules should apply. no declaration is marked as !important, so the precedence order is author style sheets before user style sheets or user-agent stylesheet. so three declarations are in competition: margin-left: 0 margin-left: 3px margin-left: 1px the last one is ignored (on a screen), and the first two have the same selector, hence the same specificity. therefore, it is the last one that is then selected: margin-left: 3px note that the declaration defined in the user css, though having a greater spe...
...rations are in competition: margin-left: 0 margin-left: 3px margin-left: 1px the last one is ignored (on a screen), and the first two have the same selector, hence the same specificity. therefore, it is the last one that is then selected: margin-left: 3px note that the declaration defined in the user css, though having a greater specificity, is not chosen as the cascade algorithm is applied before the specificity algorithm. specifications specification status comment css cascading and inheritance level 4 candidate recommendation added the revert keyword, which allows rolling a property back a cascade level. css cascading and inheritance level 3 candidate recommendation removed the override cascade origin, as it was never used in a w3c stan...

Specificity - CSS: Cascading Style Sheets
element is targeted by multiple declarations. as per css rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor. note: proximity of elements in the document tree has no effect on the specificity. selector types the following list of selector types increases by specificity: type selectors (e.g., h1) and pseudo-elements (e.g., ::before). class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover). id selectors (e.g., #example). universal selector (*), combinators (+, >, ~, ' ', ||) and negation pseudo-class (:not()) have no effect on specificity. (the selectors declared inside :not() do, however.) for more information, visit: "specificity" in "cascade and inheritance", yo...
...s directly with it. using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets. when two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied. some rules of thumb: always look for a way to use specificity before even considering !important only use !important on page-specific css that overrides foreign css (from external libraries, like bootstrap or normalize.css). never use !important when you're writing a plugin/mashup. never use !important on site-wide css. instead of using !important, consider: make better use of the css cascade use more specific rules. by indicating one or more elements ...
... even considering !important only use !important on page-specific css that overrides foreign css (from external libraries, like bootstrap or normalize.css). never use !important when you're writing a plugin/mashup. never use !important on site-wide css. instead of using !important, consider: make better use of the css cascade use more specific rules. by indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority: <div id="test"> <span>text</span> </div> div#test span { color: green; } div span { color: blue; } span { color: red; } no matter the order, text will be green because that rule is most specific. (also, the rule for blue overwrites the rule for red, notwithstanding the order of the rules) as a no...

animation-delay - CSS: Cascading Style Sheets
the animation can start later, immediately from its beginning, or immediately and partway through the animation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often convenient to use the shorthand property animation to set all animation properties at once. ...
...moment the animation is applied to the element. note: when you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. for more information, see setting multiple animation property values. formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples see css animations for examples. specifications specification status comment css animationsthe definition of 'animation-delay' in that specification. working draft initial definition. browser compatibility the compatibility table on ...
...this bug affects only some platforms, such as windows. full support 49prefixed prefixed implemented with the vendor prefix: -webkit- full support 44prefixed disabled prefixed implemented with ...

counters() - CSS: Cascading Style Sheets
er-roman) a counter has no visible effect by itself. the counters() function (and counter() function) is what makes it useful by returning developer defined content. note: the counters() function can be used with any css property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse. check the browser compatibility table carefully before using this in production. syntax values <custom-ident> a name identifying the counters, which is the same case-sensitive name used for the counter-reset and counter-increment. the name cannot start with two dashes and can't be none, unset, initial, or inherit. <counter-style> a counter style name or symbols() function, where a counter style name is a numeric, alphabetic, or symbolic sim...
... </ol> </li> <li></li> <li></li> <li> <ol> <li></li> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> </ol> </li> </ol> css ol { counter-reset: listcounter; } li { counter-increment: listcounter; } li::marker { content: counters(listcounter, '.', upper-roman) ') '; } li::before { content: counters(listcounter, ".") " == " counters(listcounter, ".", lower-roman) ; } result decimal-leading-zero compared to lower-alpha html <ol> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> <li></li> <li></li> <li> <ol> <li></li> <li> <ol> <li></li> <li></li> ...
... working draft no change css level 2 (revision 1)the definition of 'css counters' in that specification. recommendatio...

Challenge solutions - Developer guides
strong { color: #f00; /* red */ background-color: #ddf; /* pale blue */ font: 200% serif; } .carrot { color: #fa0; /* orange */ } .spinach { color: #080; /* dark green */ } p { color: #00f; /* blue */ } content add an image challenge add a one rule to your stylesheet so that it displays the image at the start of each line. solution add this rule to your stylesheet: p:before{ content: url("yellow-pin.png"); } lists lower roman numerals challenge add a rule to your stylesheet, to number the oceans using roman numerals from i to v. solution define a rule for list items to use the lower-roman list style: li { list-style: lower-roman; } capital letters challenge change your stylesheet to identify the headings with capital letters in parentheses.
... use the lower-roman list style: li { list-style: lower-roman; } capital letters challenge change your stylesheet to identify the headings with capital letters in parentheses. solution add a rule to the body element (parent of the headings) to reset a new counter, and one to display and increment the counter on the headings: /* numbered headings */ body {counter-reset: headnum;} h3:before { content: "(" counter(headnum, upper-latin) ") "; counter-increment: headnum; } boxes ocean border challenge add one rule to your stylesheet, making a wide border all around the oceans in a color that reminds you of the sea. solution the following rule achieves this effect: ul { border: 10px solid lightblue; width: 100px; } layout default image position fixed image...
...border challenge add one rule to your stylesheet, making a wide border all around the oceans in a color that reminds you of the sea. solution the following rule achieves this effect: ul { border: 10px solid lightblue; width: 100px; } layout default image position fixed image position challenge change your sample document, doc2.html, adding this tag to it near the end, just before </body>: <img id="fixed-pin" src="yellow-pin.png" alt="yellow map pin"> predict where the image will appear in your document. then refresh your browser to see if you were correct. solution the image appears to the right of the second list. challenge add a rule to your stylesheet that places the image in the top right of your document. solution the following rule achieves the desired resu...

HTML attribute: rel - HTML: Hypertext Markup Language
ause it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on. note: apple's ios does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for web clip or a start-up placeholder. instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively. the shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore. alternate indicates an alternate representation of the current document. valid for link, a, and area, the meaning depends on the values of the other attributes. with the stylesheet keyword on a <link>, it creates an alternate stylesheet. <!-- a persistent style sheet --> <link rel="stylesheet" ...
...se it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on. note: apple's ios does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for web clip or a start-up placeholder. instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively. the shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore. license valid on the <a>, <area>, <form>, <link> elements, the license value indicates that the hyperlink leads to a document describing the licensing information; that the main content of the current document is covered by the copyright license described by the referenced document. if not inside th...
...ss-origin fetching. modulepreload useful for improved performance, and relevant to the <link> anywhere in the document, setting rel="modulepreload" tells the browser to preemptively fetch the script (and dependencies) and store it in the document's module map for later evaluation. modulepreload links can ensure network fetching is done with the module ready (but not evaluated) in the module map before it is necessarily needed. see also link types: modulepreload. next relevant to <form>, <link>, <a>, and <area>, the next values indicates that the current document is a part of a series, and that the next document in the series is the referenced document. when included in a <link>, browsers may assume that document will be fetched next, and treat it as a resource hint. nofollow relevant to <f...

<input type="datetime-local"> - HTML: Hypertext Markup Language
cal, and the variations in how the inputs work, it may currently still be best to use a framework or library to present these, or to use a custom input of your own. another option is to use separate date and time inputs, each of which is more widely supported than datetime-local. some browsers may resort to a text-only input element that validates that the results are legitimate date/time values before letting them be delivered to the server, as well, but you shouldn't rely on this behavior since you can't easily predict it. for those of you not using a supporting browser, the chrome/opera datetime-local control looks like the below screenshot. clicking the down arrow on the right hand side brings up a date picker to allow you to choose a date; you have to enter the time manually. the edge ...
...it virtual machine, but most vms don't support this kind of virtualization, stability may suffer, and performance will definately suffer greatly. the y10k problem (often client-side) in many servers, dates are stored as numbers instead of as strings--numbers of a fixed size and agnostic of format (aside from endianness). after the year 10,000, those numbers will just be a little bit bigger than before, so many servers will not see issues with forms submitted after the year 10,000. the problem is with the client side of things: parsing of dates with more than 4 digits in the year. <!--midnight of january 1st, 10000: the exact time of y10k--> <input type="datetime-local" value=""+010000-01-01t05:00"/> it's that simple. just prepare your code for any number of digits. do not only prepare for 5...
...f(dayselect.value === "") { dayselect.value = previousday - 1; } if(dayselect.value === "") { dayselect.value = previousday - 2; } if(dayselect.value === "") { dayselect.value = previousday - 3; } } } function populateyears() { // get this year as a number var date = new date(); var year = date.getfullyear(); // make this year, and the 100 years before it available in the year <select> for(var i = 0; i <= 100; i++) { var option = document.createelement('option'); option.textcontent = year-i; yearselect.appendchild(option); } } function populatehours() { // populate the hours <select> with the 24 hours of the day for(var i = 0; i <= 23; i++) { var option = document.createelement('option'); option.textcontent = (i < 1...

<input type="image"> - HTML: Hypertext Markup Language
ription alt alternate string to display when the image can't be shown formaction the url to which to submit the data formenctype the encoding method to use when submitting the form data formmethod the http method to use when submitting the form formnovalidate a boolean which, if present, indicates that the form shouldn't be validated before submission formtarget a string indicating a browsing context from where to load the results of submitting the form height the height, in css pixels, at which to draw the image src the url from which to load the image width the width, in css pixels, at which to draw the image alt the alt attribute provides an alternate string to use as the bu...
...method supports complex data and file attachments. dialog this method is used to indicate that the button simply closes the dialog with which the input is associated, and does not transmit the form data at all. this attribute is also available on <input type="submit"> and <button> elements. formnovalidate a boolean attribute which, if present, specifies that the form should not be validated before submission to the server. this overrides the value of the novalidate attribute on the element's owning form. this attribute is also available on <input type="submit"> and <button> elements. formtarget a string which specifies a name or keyword that indicates where to display the response received after submitting the form. the string must be the name of a browsing context (that is, a tab, wind...
..., and the object-fit property to control how the image's size is adjusted to fit within the frame. this allows you to specify a frame for the image using the width and height attributes to set aside space in the layout, then adjust where within that space the image is located and how (or if) it is scaled to occupy that space. examples a login form the following example shows the same button as before, but included in the context of a typical login form. html <form> <p>login to your account</p> <div> <label for="userid">user id</label> <input type="text" id="userid" name="userid"> </div> <div> <label for="pwd">password</label> <input type="password" id="pwd" name="pwd"> </div> <div> <input id="image" type="image" src="/static/external/62/62ac2ecddbec0e0b5400...

<input type="tel"> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested email addresses. then, as the user types, the list is adjusted to show only filtered matching values. each typed character narrows down the list until the user makes a selection or types a custom value. here's a screenshot of what that might look like: validation as we've touched on before, it's quite difficult to provide a one-size-fits-all client-side validation solution for phone numbers. so what can we do? let's consider some options. important: html form validation is not a substitute for server-side scripts that ensure the entered data is in the proper format before it is allowed into the database. it's far too easy for someone to make adjustments to the html that allow th...
...after { position: absolute; content: '✓'; padding-left: 5px; color: #009000; } the output looks like this: pattern validation if you want to further restrict entered numbers so they also have to conform to a specific pattern, you can use the pattern attribute, which takes as its value a regular expression that entered values have to match. ...

<textarea> - HTML: Hypertext Markup Language
input) element for a full explanation. readonly this boolean attribute indicates that the user cannot modify the value of the control. unlike the disabled attribute, the readonly attribute does not prevent the user from clicking or selecting in the control. the value of a read-only control is still submitted with the form. required this attribute specifies that the user must fill in a value before submitting a form. rows the number of visible text lines for the control. spellcheck specifies whether the <textarea> is subject to spell checking by the underlying browser/os. the value can be: true: indicates that the element needs to have its spelling and grammar checked. default : indicates that the element is to act according to a default behavior, possibly based on the parent elem...
...other major browsers place the insertion point at the beginning of the text.notes a default background-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none.ie full support yesopera ...
...other major browsers place the insertion point at the beginning of the text.notes a default background-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none.opera android full support yessafari i...

Link types - HTML: Hypertext Markup Language
ical_link_element a canonical link element is an html element that helps webmasters prevent duplicate content issues by specifying the "canonical" or "preferred" version of a web page as part of search engine optimization. <link> <a>, <area>, <form> dns-prefetch hints to the browser that a resource is needed, allowing the browser to do a dns lookup and protocol handshaking before a user clicks the link. <link> <a>, <area>, <form> external indicates that the hyperlink leads to a resource outside the site of the current page; that is, following the link will make the user leave the site. <a>, <area>, <form> <link> first indicates that the hyperlink leads to the first resource of the sequence the current page is in. note: other ...
...unsupported format, the browser proceeds to the next-most appropriate, and so on. note: apple's ios does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for web clip or a start-up placeholder. instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively. the shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore. <link> <a>, <area>, <form> import html imports <link> <a>, <area>, <form> index obsolete since html5 indicates that the page is part of a hierarchical structure and that the hyperlink leads to the top level resource of that structure. if one or several up lin...
...ote 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. <a>, <area>, <form> <link> noreferrer prevents the browser, when navigating to another page, to send this page address, or any other value, as referrer via the referer: http header. (in firefox, before firefox 37, this worked only in links found in pages. links clicked in the ui, like "open in a new tab" via the contextual menu, ignored this). <a>, <area>, <form> <link> opener reverts implicit rel="noopener" addition on links with target="_blank" (see related html spec discussion, webkit change, and firefox bug discussion). <a>, <area>, <form> <link> ...

Using the application cache - HTML: Hypertext Markup Language
lback section of the cache manifest. the section header line may include whitespaces, but must include the colon (:) in the section name. section data the format for lines of data varies from section to section. in the explicit (cache:) section, each line is a valid uri or iri reference to a resource to cache (no wildcard characters are allowed in this sections). whitespace is allowed before and after the uri or iri on each line. in the fallback section each line is a valid uri or iri reference to a resource, followed by a fallback resource that is to be served up when a connection with the server cannot be made. in the network section, each line is a valid uri or iri reference to a resource to fetch from the network (or the wildcard character * can be used in this section). note: r...
...event, which is fired instead of the cached event when a new update has been downloaded but not yet activated using the swapcache() method. obsolete the application cache group is now obsolete. testing for updates to the cache manifest you can programmatically test to see if an application has an updated cache manifest file, using javascript. since a cache manifest file may have been updated before a script attaches event listeners to test for updates, scripts should always test window.applicationcache.status. function onupdateready() { console.log('found new version!'); } window.applicationcache.addeventlistener('updateready', onupdateready); if(window.applicationcache.status === window.applicationcache.updateready) { onupdateready(); } to manually start testing for a new manifest fi...
...o get it from network. to link to cached resources that have parameters parsed in javascript use parameters in the hash part of the link, such as other-cached-page.html#whatever?parametername=value. when applications are cached, simply updating the resources (files) that are used in a web page is not enough to update the files that have been cached. you must update the cache manifest file itself before the browser retrieves and uses the updated files. you can do this programmatically using window.applicationcache.swapcache(), though resources that have already been loaded will not be affected. to make sure that resources are loaded from a new version of the application cache, refreshing the page is ideal. it's a good idea to set expires headers on your web server for *.appcache files to expire...

Browser detection using the user agent - HTTP
detecting the browser is needed. using the user agent to detect the browser looks simple, but doing it well is, in fact, a very hard problem. this document will guide you in doing this as correctly as possible. it's worth re-iterating: it's very rarely a good idea to use user agent sniffing. you can almost always find a better, more broadly compatible way to solve your problem! considerations before using browser detection when considering using the user agent string to detect which browser is being used, your first step is to try to avoid it if possible. start by trying to identify why you want to do it. are you trying to work around a specific bug in some version of a browser? look, or ask, in specialized forums: you're unlikely to be the first to hit this problem. also, experts, or s...
... console.log(splitupstring("jqwhy")); // ["jq", "w", "hy"] the above code would have made several incorrect assumptions: it assumed that all user agent strings that include the substring "chrome" are chrome. ua strings are notoriously misleading. it assumed that the lookbehind feature would always be available if the browser was chrome. the agent might be an older version of chrome, from before support was added, or (because the feature was experimental at the time) it could be a later version of chrome that removed it. most importantly, it assumed no other browsers would support the feature. support could have been added to other browsers at any time, but this code would have continued choosing the inferior path. problems like these can be avoided by testing for support of the fe...
... your webpage until you can open up the dev tools side panel and resize the screen while the webpage looks smooth, fluid, and dynamically resized. the simplest way to do this is to separate all the code that moves content around based on screen size to a single function that is called when the page is loaded and at each resize event thereafter. if there is a lot calculated by this layout function before it determines the new layout of the page, then consider debouncing the event listener such that it is not called as often. also note that there is a huge difference between the media queries (max-width: 25em), not all and (min-width: 25em), and (max-width: 24.99em): (max-width: 25em) excludes (max-width: 25em), whereas not all and (min-width: 25em) includes (max-width: 25em). (max-width: 24.99em)...

HTTP caching - HTTP
responses. use this header to define your caching policies with the variety of directives it provides. no caching the cache should not store anything about the client request or server response. a request is sent to the server and a full response is downloaded each and every time. cache-control: no-store cache but revalidate a cache will send the request to the origin server for validation before releasing a cached copy. cache-control: no-cache private and public caches the "public" directive indicates that the response may be cached by any cache. this can be useful if pages with http authentication, or response status codes that aren't normally cacheable, should now be cached. on the other hand, "private" indicates that the response is intended for a single user only and must not be ...
... the request. for the files in the application that will not change, you can usually add aggressive caching. this includes static files such as images, css files and javascript files, for example. for more details, see also the freshness section below. cache-control: max-age=31536000 validation when using the "must-revalidate" directive, the cache must verify the status of the stale resources before using it and expired ones should not be used. for more details, see the validation section below. cache-control: must-revalidate the pragma header pragma is a http/1.0 header, it is not specified for http responses and is therefore not a reliable replacement for the general http/1.1 cache-control header, although it does behave the same as cache-control: no-cache, if the cache-control header f...
... served by the cache forever. caches have finite storage so items are periodically removed from storage. this process is called cache eviction. on the other side, some resources may change on the server so the cache should be updated. as http is a client-server protocol, servers can't contact caches and clients when a resource changes; they have to communicate an expiration time for the resource. before this expiration time, the resource is fresh; after the expiration time, the resource is stale. eviction algorithms often privilege fresh resources over stale resources. note that a stale resource is not evicted or ignored; when the cache receives a request for a stale resource, it forwards this request with a if-none-match to check if it is in fact still fresh. if so, the server returns a 304 (no...

HTTP Index - HTTP
, http header, privacy, reference, referrer-policy, response, response header, referrer the referrer-policy http header controls how much referrer information (sent via the referer header) should be included with requests. 176 retry-after http, reference, response, response header, header the retry-after response http header indicates how long the user agent should wait before making a follow-up request. there are three main cases this header is used: 177 save-data http, http header, reference, request header, save-data, header the save-data header field is a boolean which, in requests, indicates the client's preference for reduced data usage. this could be for reasons such as high transfer costs, slow connection speeds, etc. 178 sec-web...
... 209 get http, reference, request method the http get method requests a representation of the specified resource. requests using get should only retrieve data. 210 head http, reference, request method the http head method requests the headers that are returned if the specified resource would be requested with an http get method. such a request can be done before deciding to download a large resource to save bandwidth, for example. 211 options http, reference, request method the http options method is used to describe the communication options for the target resource. the client can specify a url for the options method, or an asterisk (*) to refer to the entire server. 212 patch http, http method, reference, request met...
...tus code, success the http 200 ok success status response code indicates that the request has succeeded. a 200 response is cacheable by default. 222 201 created http, reference, status code, success the http 201 created success status response code indicates that the request has succeeded and has led to the creation of a resource. the new resource is effectively created before this response is sent back and the new resource is returned in the body of the message, its location being either the url of the request, or the content of the location header. 223 202 accepted http, reference, status code, success response the hypertext transfer protocol (http) 202 accepted response status code indicates that the request has been received but not yet acted u...

An overview of HTTP - HTTP
operate at the transport, network or physical levels, becoming transparent at the http layer and potentially making a significant impact on performance. those operating at the application layers are generally called proxies. these can be transparent, forwarding on the requests they receive without altering them in any way, or non-transparent, in which case they will change the request in some way before passing it along to the server. proxies may perform numerous functions: caching (the cache can be public or private, like the browser cache) filtering (like an antivirus scan or parental controls) load balancing (to allow multiple servers to serve the different requests) authentication (to control access to different resources) logging (allowing the storage of historical information) bas...
...ayer, and therefore fundamentally out of scope for http. though http doesn't require the underlying transport protocol to be connection-based; only requiring it to be reliable, or not lose messages (so at minimum presenting an error). among the two most common transport protocols on the internet, tcp is reliable and udp isn't. http therefore relies on the tcp standard, which is connection-based. before a client and server can exchange an http request/response pair, they must establish a tcp connection, a process which requires several round-trips. the default behavior of http/1.0 is to open a separate tcp connection for each http request/response pair. this is less efficient than sharing a single tcp connection when multiple requests are sent in close succession. in order to mitigate this flaw...
...flow when a client wants to communicate with a server, either the final server or an intermediate proxy, it performs the following steps: open a tcp connection: the tcp connection is used to send a request, or several, and receive an answer. the client may open a new connection, reuse an existing connection, or open several tcp connections to the servers. send an http message: http messages (before http/2) are human-readable. with http/2, these simple messages are encapsulated in frames, making them impossible to read directly, but the principle remains the same. for example: get / http/1.1 host: developer.mozilla.org accept-language: fr read the response sent by the server, such as: http/1.1 200 ok date: sat, 09 oct 2010 14:28:02 gmt server: apache last-modified: tue, 01 dec 2009 20...

JavaScript modules - JavaScript
modules and classes as we hinted at earlier, you can also export and import classes; this is another option for avoiding conflicts in your code, and is especially useful if you've already got your module code written in an object-oriented style. you can see an example of our shape drawing module rewritten ...
...classes example. this time however we are not drawing anything on the canvas when the example loads. instead, we include three buttons — "circle", "square", and "triangle" — that, when pressed, dynamically load the required module and then use it to draw the associated shape. in this example we've only made changes to our index.html and main.js files — the module exports remain the same as before. over in main.js we've grabbed a reference to each button using a document.queryselector() call, for example: let squarebtn = document.queryselector('.square'); we then attach an event listener to each button so that when pressed, the relevant module is dynamically loaded and used to draw the shape: squarebtn.addeventlistener('click', () => { import('./modules/square.js').then((module) => {...
... that, because the promise fulfillment returns a module object, the class is then made a subfeature of the object, hence we now need to access the constructor with module. prepended to it, e.g. module.square( ... ). troubleshooting here are a few tips that may help you if you are having trouble getting your modules to work. feel free to add to the list if you discover more! we mentioned this before, but to reiterate: .js files need to be loaded with a mime-type of text/javascript (or another javascript-compatible mime-type, but text/javascript is recommended), otherwise you'll get a strict mime type checking error like "the server responded with a non-javascript mime type". if you try to load the html file locally (i.e. with a file:// url), you'll run into cors errors due to javascript mod...

Array.prototype.forEach() - JavaScript
ked with three arguments: the value of the element the index of the element the array object being traversed if a thisarg parameter is provided to foreach(), it will be used as callback's this value. the thisarg value ultimately observable by callback is determined according to the usual rules for determining the this seen by a function. the range of elements processed by foreach() is set before the first invocation of callback. elements which are appended to the array after the call to foreach() begins will not be visited by callback. if existing elements of the array are changed or deleted, their value as passed to callback will be the value at the time foreach() visits them; elements that are deleted before being visited are not visited. if elements that are already visited are remove...
...[1,3,,7] let numcallbackruns = 0 arraysparse.foreach((element) => { console.log(element) numcallbackruns++ }) console.log("numcallbackruns: ", numcallbackruns) // 1 // 3 // 7 // numcallbackruns: 3 // comment: as you can see the missing value between 3 and 7 didn't invoke callback function. converting a for loop to foreach const items = ['item1', 'item2', 'item3'] const copyitems = [] // before for (let i = 0; i < items.length; i++) { copyitems.push(items[i]) } // after items.foreach(function(item){ copyitems.push(item) }) printing the contents of an array note: in order to display the content of an array in the console, you can use console.table(), which prints a formatted version of the array. the following example illustrates an alternative approach, using foreach(). the ...
...looks like obj1 now modifying the array during iteration the following example logs one, two, four. when the entry containing the value two is reached, the first entry of the whole array is shifted off—resulting in all remaining entries moving up one position. because element four is now at an earlier position in the array, three will be skipped. foreach() does not make a copy of the array before iterating. let words = ['one', 'two', 'three', 'four'] words.foreach((word) => { console.log(word) if (word === 'two') { words.shift() //'one' will delete from array } }) // one // two ​​​​// four console.log(words); //['two', 'three',​​​​ 'four'] flatten an array the following example is only here for learning purpose. if you want to flatten an array using built-...

Lexical grammar - JavaScript
ed this way. hashbang comments a specialized third comment syntax, the hashbang comment, is in the process of being standardized in ecmascript (see the hashbang grammar proposal). a hashbang comment behaves exactly like a single line-only (//) comment. instead, it begins with #! and is only valid at the absolute start of a script or module. note also that no whitespace of any kind is permitted before the #!. the comment consists of all the characters after #! up to the end of the first line; only one such comment is permitted. the hashbang comment specifies the path to a specific javascript interpreter that you want to use to execute the script. an example is as follows: #!/usr/bin/env node console.log("hello world"); note: hashbang comments in javascript mimic shebangs in unix used to ...
... after #! up to the end of the first line; only one such comment is permitted. the hashbang comment specifies the path to a specific javascript interpreter that you want to use to execute the script. an example is as follows: #!/usr/bin/env node console.log("hello world"); note: hashbang comments in javascript mimic shebangs in unix used to run files with proper interpreter. although bom before hashbang comment will work in a browser it is not advised to use bom in a script with hasbang. bom will not work when you try to run the script in unix/linux. so use utf-8 without bom if you want to run scripts directly from shell. you must only use the #! comment style to specify a javascript interpreter. in all other cases just use a // comment (or mulitiline comment). keywords reserved key...
...olon insertion some javascript statements must be terminated with semicolons and are therefore affected by automatic semicolon insertion (asi): empty statement let, const, variable statement import, export, module declaration expression statement debugger continue, break, throw return the ecmascript specification mentions three rules of semicolon insertion. 1. a semicolon is inserted before, when a line terminator or "}" is encountered that is not allowed by the grammar. { 1 2 } 3 // is transformed by asi into { 1 2 ;} 3; 2. a semicolon is inserted at the end, when the end of the input stream of tokens is detected and the parser is unable to parse the single input stream as a complete program. here ++ is not treated as a postfix operator applying to variable b, because a line t...

while - JavaScript
if this condition evaluates to true, statement is executed. ...
...if this condition evaluates to true, statement is executed. when condition evaluates to false, execution continues with the statement after the while loop. statement an optional statement that is executed as long as the condition evaluates to true. ...
...s condition evaluates to true, statement is executed. when condition evaluates to false, execution continues with the statement after the while loop. statement an optional statement that is executed as long as the condition evaluates to true. to execute multiple statements within the loop, use a block statement ({ ... }) to group those statements. note: use the break statement to stop a loop before condition evaluates to true. examples using while the following while loop iterates as long as n is less than three. var n = 0; var x = 0; while (n < 3) { n++; x += n; } each iteration, the loop increments n and adds it to x. therefore, x and n take on the following values: after the first pass: n = 1 and x = 1 after the second pass: n = 2 and x = 3 after the third pass: n = 3 and...

Digital audio concepts - Web media technologies
d to the pre-sampling frequency (resulting in 22,050 hz). doubling that per the nyquist theorem results in a final minimum frequency of (you guessed it) 44.1 khz. high-resolution (96 khz) audio is used in some high-end audio systems, and it and ultra-high resolution (192 khz) audio are useful for audio mastering, where you need as much quality as possible while manipulating and editing the sound before downsampling to the sample rate you will use for the final product. this is similar to how photographers will use high resolution images for editing and compositing before presenting the customer with a jpeg suitable for use on a web site. audio file size and network bandwidth once you know the size of a single audio frame and how many frames per second make up your audio data, you can easily c...
...erstanding of psychoacoustics, it's possible to design a compression method that will minimize the compressed size of the audio while maximizing the percieved fidelity of the sound. an algorithm employing psychoacoustics may use any of the techniques mentioned here, and will almost certainly apply others as well. ...
...ate by taking advantage of the way humans determine the location of sounds in space; this is called sound localization. we hear in stereo because our ears detect a sound at different times depending on where the sound is coming from. this is because our ears are separated by several inches, thanks to being on opposite sides of our heads. a sound coming from our right will arrive at our right ear before it arrives at our left ear. our brains determine where the sound is in the space around us by using that time difference to figure out the angle from which the sound is coming. however, as the frequency of the audio signal goes up, the wavelength goes up as well. eventually, the wavelength approaches then exceeds the distance between the ears, and it becomes difficult or impossible to unambiguous...

Media container formats (file types) - Web media technologies
o provide media in a single format, choose a format that's available on the broadest selection of devices and browsers, such as mp3 (for audio) or mp4 (for video and/or audio). if your media is audio-only, choosing an audio-only container format likely makes sense. now that the patents have all expired, mp3 is a widely supported and good choice. wave is good but uncompressed, so be aware of that before using it for large audio samples. flac is a very good choice, due to its lossless compression, if the target browsers all support it. unfortunately, neither of the relatively major lossless compression formats (flac and alac) are universally supported. flac is the more broadly supported of the two, but is not supported by macos without additional software installed, and is not supported at all ...
...s without additional software installed, and is not supported at all on ios. if you need to offer lossless audio, you may need to provide both flac and alac to get close to universal compatibility. container selection advice the tables below offer suggested containers to use in various scenarios. these are just suggestions. be sure to consider the needs of your application and your organization before selecting a container format. audio-only files if you need... consider using this container format compressed files for general-purpose playback mp3 (mpeg-1 audio layer iii) losslessly compressed files flac with alac fallback uncompressed files wav now that mp3's patents have all expired, the choice of audio file format has become much ...
...bm (ideally with mp4 fallback) general purpose video mp4 (ideally with webm or ogg fallback) high compression optimized for slow connections 3gp (ideally with mp4 fallback) compatibility with older devices/browsers quicktime (ideally with avi and/or mpeg-2 fallback) these suggestions make a number of assumptions. you should carefully consider the options before making a final decision, especially if you have a lot of media that will need to be encoded. maximizing compatibility with multiple containers to optimize compatibility, it's worth considering providing more than one version of media files, using the <source> element to specify each source within the <audio> or <video> element. for example, you can offer an ogg or webm video as the first choice...

CSS and JavaScript animation performance - Web Performance
tions for more details. in terms of performance, there is no difference between implementing an animation with css transitions or animations. both of them are classified under the same css-based umbrella in this article. requestanimationframe the requestanimationframe() api provides an efficient way to make animations in javascript. the callback function of the method is called by the browser before the next repaint on each frame. compared to settimeout()/setinterval(), which need a specific delay parameter, requestanimationframe() is much more efficient. developers can create an animation by simply changing an element's style each time the loop is called (or updating the canvas draw, or whatever.) note: like css transitions and animations, requestanimationframe() pauses when the current t...
...st cases, the performance of css-based animations is almost the same as javascripted animations — in firefox at least. some javascript-based animation libraries, like gsap and velocity.js, even claim that they are able to achieve better performance than native css transitions/animations. this can occur because css transitions/animations are simply resampling element styles in the main ui thread before each repaint event happens, which is almost the same as resampling element styles via a requestanimationframe() callback, also triggered before the next repaint. if both animations are made in the main ui thread, there is no difference performance-wise. in this section we'll walk you through a performance test, using firefox, to see what animation method seems better overall. enabling fps tools...
...ach repaint event happens, which is almost the same as resampling element styles via a requestanimationframe() callback, also triggered before the next repaint. if both animations are made in the main ui thread, there is no difference performance-wise. in this section we'll walk you through a performance test, using firefox, to see what animation method seems better overall. enabling fps tools before going through the example, please enable fps tools first to see the current frame rate: in the url bar, enter about:config; click the i’ll be careful, i promise! button to enter the config screen. in the search bar, search for the layers.acceleration.draw-fps preference. double-click the entry to set the value to true. now you will be able to see three little purple boxes at the upp...

Progressive loading - Progressive web apps (PWAs)
kpwa example a progressive web app: service workers, web manifests, notifications and push. in this article we will go even further and improve the performance of the app by progressively loading its resources. first meaningful paint it's important to deliver something meaningful to the user as soon as possible — the longer they wait for the page to load, the bigger the chance they will leave before waiting for everything to finish. we should be able to show them at least the basic view of the page they want to see, with placeholders in the places more content will eventually be loaded. this could be achieved by progressive loading — also known as lazy loading. this is all about deferring loading of as many resources as possible (html, css, javascript), and only loading those immediately ...
...rsion of the site: mobile, tablet, desktop, print only, etc. it is faster to load all that information as one file rather than many small ones, but if the user doesn't need everything at the very beginning, we could load only what's crucial and then manage other resources when needed. render-blocking resources bundling is a problem, because the browser has to load the html, css, and javascript before it can paint their rendered results onto the screen. during the few seconds between initial website access and completion of loading, the user sees a blank page, which is a bad experience. to fix that we can, for example, add defer to javascript files: <script src="app.js" defer></script> they will be downloaded and executed after the document itself has been parsed, so it won't block renderi...
...— this would improve performance even more, but for the readability of the example we will skip that approach too. images besides javascript and css, websites will likely contain a number of images. when you include <img> elements in your html, then every referenced image will be fetched and downloaded during initial website access. it's not unusual to have megabytes of image data to download before announcing the site is ready, but this again creates a bad perception of performance. we don't need all of the images in the best possible quality at the very beginning of viewing the site. this can be optimized. first of all, you should use tools or services similar to tinypng, which will reduce the file size of your images without altering the quality too much. if you're past that point, then ...

Media - Progressive web apps (PWAs)
ecify the margins separately for @page:left and @page:right. for print media, you normally use appropriate length units like inches (in) and points (pt = 1/72 inch), or centimeters (cm) and millimeters (mm). it is equally appropriate to use ems (em) to match the font size, and percentages (%). you can control how the content of the document breaks across page boundaries, by using the page-break-before, page-break-after and page-break-inside properties. example this rule sets the page margins to one inch on all four sides: @page {margin: 1in;} this rule ensures that every h1 element starts on a new page: h1 {page-break-before: always;} more details for full details of css support for paged media, see paged media in the css specification. like other features of css, printing depends...
... <p>this is the second section...</p> <div id="print-head"> heading for paged media </div> <div id="print-foot"> page: </div> </body> </html> make a new stylesheet, style4.css. ...
...eading for paged media </div> <div id="print-foot"> page: </div> </body> </html> make a new stylesheet, style4.css. ...

Patterns - SVG: Scalable Vector Graphics
here, we've just drawn two rectangle elements inside the pattern (which overlap, and one of which is twice the size of the other and is used to fill in the entire pattern), and one circle. the confusing thing about patterns is defining a unit system and their size. in the example above...
...="url(#gradient2)"/> <circle cx="25" cy="25" r="20" fill="url(#gradient1)" fill-opacity="0.5"/> </pattern> </defs> <rect fill="url(#pattern)" stroke="black" width="200" height="200"/> </svg> screenshotlive sample inside the <pattern> element, you can include any of the other basic shapes you've included before, and each of them can be styled using any of the styles you've learned before, including gradients and opacity. here, we've just drawn two rectangle elements inside the pattern (which overlap, and one of which is twice the size of the other and is used to fill in the entire pattern), and one circle. the confusing thing about patterns is defining a unit system and their size. in the example above, we've defined a width and height attribute on the pattern element to describ...
...y. here, we've just drawn two rectangle elements inside the pattern (which overlap, and one of which is twice the size of the other and is used to fill in the entire pattern), and one circle. the confusing thing about patterns is defining a unit system and their size. in the example above, we've defined a width and height attribute on the pattern element to describe how far the pattern should go before it begins repeating itself again. there are also x and y attributes available if you want to offset the start point of this rectangle somewhere within your drawing. the reason they've been used here is described below. as with the gradientunits attribute used above, patterns also have an attribute, patternunits, which specifies the units that these attributes will take. it defaults to "objectbou...

Tutorials
with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. this module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more. the aim here is to provide you with a toolkit for writing competent css and help you understand all the essential theory, before moving on to more specific disciplines like text styling and css layout. styling text here we look at text styling fundamentals, including setting font, boldness, and italics, line and letter spacing, and drop shadows and other text features. we round off the module by looking at applying custom fonts to your page, and styling lists and links. common css questions common questions and answe...
...nable, and scalable css. canvas tutorial learn how to draw graphics using scripting using the canvas element. html5 doctor articles about using html5 right now. javascript tutorials introductory level javascript first steps in our first javascript module, we first answer some fundamental questions such as "what is javascript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing javascript. after that, we discuss some key javascript features in detail, such as variables, strings, numbers and arrays. javascript building blocks in this module, we continue our coverage of all javascript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional...
... if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. here we teach object theory and syntax in detail, look at how to create your own objects, and explain what json data is and how to work with it. client-side web apis when writing client-side javascript for websites or applications, you won't go very far before you start to use apis — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other websites or services. in this module, we will explore what apis are, and how to use some of the most common apis you'll come across often in your development work. a re-introduction to javascript a recap of the javascript programming l...

Using custom elements - Web Components
to share a single backing stylesheet. with this optimization the performance of external and internal styles should be similar. customized built-in elements now let's have a look at another customized built in element example — expanding-list (see it live also). this turns any unordered list into an expanding/collapsing menu. first of all, we define our element's class, in the same manner as before: class expandinglist extends htmlulistelement { constructor() { // always call super first in constructor super(); // write element functionality in here ... } } we will not explain the element functionality in any detail here, but you can discover how it works by checking out the source code. the only real difference here is that our element is extending the htmlulistelem...
...ode. the only real difference here is that our element is extending the htmlulistelement interface, and not htmlelement. so it has all the characteristics of a <ul> element with the functionality we define built on top, rather than being a standalone element. this is what makes it a customized built-in, rather than an autonomous element. next, we register the element using the define() method as before, except that this time it also includes an options object that details what element our custom element inherits from: customelements.define('expanding-list', expandinglist, { extends: "ul" }); using the built-in element in a web document also looks somewhat different: <ul is="expanding-list"> ... </ul> you use a <ul> element as normal, but specify the name of the custom element inside the...
...in, you can see the full javascript source code here. using the lifecycle callbacks you can define several different callbacks inside a custom element's class definition, which fire at different points in the element's lifecycle: connectedcallback: invoked each time the custom element is appended into a document-connected element. this will happen each time the node is moved, and may happen before the element's contents have been fully parsed. note: connectedcallback may be called once your element is no longer connected, use node.isconnected to make sure. disconnectedcallback: invoked each time the custom element is disconnected from the document's dom. adoptedcallback: invoked each time the custom element is moved to a new document. attributechangedcallback: invoked each ti...

Using templates and slots - Web Components
is article explains how you can use the <template> and <slot> elements to create a flexible template that can then be used to populate the shadow dom of a web component. the truth about templates when you have to reuse the same markup structures repeatedly on a web page, it makes sense to use some kind of a template rather than repeating the same structure over and over again. this was possible before, but it is made a lot easier by the html <template> element (which is well-supported in modern browsers). this element and its contents are not rendered in the dom, but it can still be referenced using javascript. let's look at a trivial quick example: <template id="my-paragraph"> <p>my paragraph</p> </template> this won't appear in your page until you grab a reference to it with javascript ...
...default text</slot></p> if the slot's content isn't defined when the element is included in the markup, or if the browser doesn't support slots, <my-paragraph> just contains the fallback content "my default text". to define the slot's content, we include an html structure inside the <my-paragraph> element with a slot attribute whose value is equal to the name of the slot we want it to fill. ...
... causes them to get populated with that. within the rendered <details> output, the content in the <element-details> elements fills the named slots from the shadow root. in other words, the dom tree from the <element-details> elements get composed together with the content of the shadow root. for both <element-details> elements, an attributes heading gets automatically added from the shadow root before the position of the "attributes" named slot. because the first <element-details> has a <dl> element which explicitly references the "attributes" named slot from its shadow root, the contents of that <dl> replace the "attributes" named slot from the shadow root. because the second <element-details> doesn’t explicitly reference the "attributes" named slot from its shadow root, its content for t...

Index - XSLT: Extensible Stylesheet Language Transformations
t bindings dom, javascript, xml, xslt javascript can run xslt transformations through the xsltprocessor object. once instantiated, an xsltprocessor has an xsltprocessor.importstylesheet() method that takes as an argument the xslt stylesheet to be used in the transformation. the stylesheet has to be passed in as an xml document, which means that the .xsl file has to be loaded by the page before calling xsltprocessor.importstylesheet(). this can be done via xmlhttprequest or xmldocument.load(). 11 resources xslt no summary! 12 setting parameters xslt while running transformations using precoded .xsl and .xml files is quite useful, configuring the .xsl file from javascript may be even more useful. for example, javascript and xslt could be used to ...
...sl:attribute-set> element creates a named set of attributes, which can then be applied as whole to the output document, in a manner similar to named styles in css. 23 <xsl:attribute> attribute, element, reference, xslt the <xsl:attribute> element creates an attribute in the output document, using any values that can be accessed from the stylesheet. the element must be defined before any other output document element inside the output document element for which it establishes attribute values. but it may be after or inside elements that won't be part of the output (like <xsl:choose> or <xsl:apply-templates> etc.). 24 <xsl:call-template> element, reference, xslt, call-template the <xsl:call-template> element invokes a named template. 25 <xsl:cho...
..., eventually, newer version) element is not supported. 32 <xsl:for-each> element, reference, xslt, for, for-each the <xsl:for-each> element selects a set of nodes and processes each of them in the same way. it is often used to iterate through a set of nodes or to change the current node. if one or more <xsl:sort> elements appear as the children of this element, sorting occurs before processing. otherwise, nodes are processed in document order. 33 <xsl:if> element, reference, xslt, if the <xsl:if> element contains a test attribute and a template. if the test evaluates to true, the template is processed. in this it is similar to an if statement in other languages. to achieve the functionality of an if-then-else statement, however, use the <xsl:choose> elem...

Content Scripts - Archive of obsolete content
("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscriptfile: [data.url("jquery.min.js"), data.url("my-content-script.js")] }); if you do this, the scripts can interact directly with each other, just like scripts loaded by the same web page. you can also use contentscript and contentscriptfile together. if you do this, scripts specified using contentscriptfile are loaded before those specified using contentscript. this enables you to load a javascript library like jquery by url, then pass in a simple script inline that can use jquery: // main.js var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); var contentscriptstring = '$("body").html("<h1>page matches ruleset</h1>");'; pagemod.pagemod({ include: "*.mozilla.org", contentscript: content...
...ion(response) { console.log(response); }); worker.port.emit("my-addon-message", "message from the add-on"); } // content-script.js self.port.on("my-addon-message", handlemessage); function handlemessage(message) { alert(message); self.port.emit("my-script-response", "response from content script"); } the port api see the reference page for the port object. the postmessage api before the port object was added, add-on code and content scripts communicated using a different api: the content script called self.postmessage() to send and self.on() to receive the add-on script called worker.postmessage() to send and worker.on()to receive the api is still available and documented, but there's no reason to use it instead of the port api described here. the exception is the cont...

tabs - Archive of obsolete content
quire("sdk/tabs"); tabs.on('ready', function(tab) { var worker = tab.attach({ contentscript: 'document.body.style.border = "5px solid red";' }); }); parameters options : object optional options: name type contentscriptfile string,array the local file urls of content scripts to load. content scripts specified by this option are loaded before those specified by the contentscript option. optional. contentscript string,array a string or an array of strings of code to be evaluated in the context. content scripts specified by this option are loaded after those specified by the contentscriptfile option. optional. contentscriptoptions object you can use this option to define read-only values f...
... are passed the tab object. persisted : listeners are passed a boolean value indicating whether or not the page was loaded from the bfcache. activate this event is emitted when the tab is made active. note that you cannot guarantee that a tab's content, or even its url, are initialized at the time activate is emitted. this is because when a new tab is opened, its activate event may be emitted before the content is loaded. you can use the tab's readystate property to determine whether the tab's content and url will be available: if readystate is uninitialized or loading, then you can't access the tab's properties and must wait for the tab's ready event. arguments tab : listeners are passed the tab object. deactivate this event is emitted when the tab is made inactive. arguments tab : l...

content/loader - Archive of obsolete content
frame = self._frame = this.element; self._emit('propertychange', { contenturl: self.contenturl }); } })); }, _onchange: function _onchange(e) { if ('contenturl' in e) this._frame.setattribute('src', this._contenturl); } }); loader properties contentscriptfile the local file urls of content scripts to load. content scripts specified by this property are loaded before those specified by the contentscript property. contentscript the texts of content scripts to load. content scripts specified by this property are loaded after those specified by the contentscriptfile property. contentscriptwhen when to load the content scripts. this may take one of the following values: "start": load content scripts immediately after the document element for the page is in...
...ontentscript property. contentscript the texts of content scripts to load. content scripts specified by this property are loaded after those specified by the contentscriptfile property. contentscriptwhen when to load the content scripts. this may take one of the following 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. any kind ...

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. optional options: name type contentscriptfile string,array the local file urls of content scripts to load. content scripts specified by this option are loaded before those specified by the contentscript option. optional. contentscript string,array the texts of content scripts to load. content scripts specified by this option are loaded after those specified by the contentscriptfile option. optional. onmessage function functions that will registered as a listener to a 'message' events. onerror fun...
...l public properties that are listed below. methods postmessage(data) asynchronously emits "message" events in the enclosed worker, where content script was loaded. parameters data : number,string,json the data to send. must be stringifiable to json. destroy() destroy the worker by removing the content script from the page and removing all registered listeners. a detach event is fired just before removal. properties port object that allows you to: send customized messages to the worker using the port.emit function receive events from the worker using the port.on function url the url of the content. tab if this worker is attached to a content document, returns the related tab. events message this event allows the content worker to receive messages from its associated content...

ui/sidebar - Archive of obsolete content
sidebar scripts you can't directly access your sidebar's content from your main add-on code, but you can send messages between your main add-on code and scripts loaded into your sidebar. on the sidebar end of the conversation, sidebar scripts get a global variable addon that contains a port for sending and receiving messages. on the add-on side, you need to get a worker object for the sidebar before you can send or receive messages. there are two events emitted by the sidebar which will give you a worker: attach and ready. listen to attach if the first message in your add-on goes from the sidebar scripts to the main add-on code, and listen to ready if the first message goes from the main add-on code to the sidebar script. using attach the attach event is triggered whenever the dom for a n...
...l (typically, loaded from the "data" folder using self.data.url()). from firefox 34, you can use "./myfile.html" as an alias for self.data.url("myfile.html"). optional options: name type id string the id of the sidebar. this used to identify this sidebar in its chrome window. it must be unique. this option was mandatory before firefox 28. onattach function listener for the sidebar's attach event. ondetach function listener for the sidebar's detach event. onshow function listener for the sidebar's show event. onhide function listener for the sidebar's hide event. sidebar the sidebar object. once a sidebar has...

Using third-party modules (jpm) - Archive of obsolete content
this tutorial you'll need to have installed jpm and learned the basic jpm commands. to install menuitem you'll need to have git command. if you have error related to git, check you have latest git command installed. the add-on sdk is extensible by design: you can use the modules that ship inside firefox, but you can also create your own modules and make them available for anyone else to use. before the jpm tool was available, there wasn't any package manager for these community-developed modules, so it wasn't obvious where to find community-developed modules, or how to install and update them. with jpm, we use npm as the package manager for sdk modules that don't ship inside firefox. module developers can publish sdk modules to npm, and add-on developers can install them from npm and build...
... menuitem package.json test we're interested in using the "menuitem" module, which is at "addon-pathfinder/lib/ui/menuitem". open "index.js" and replace it with this: var menuitems = require("menuitem"); var menuitem = menuitems.menuitem({ id: "clickme", menuid: "menu_toolspopup", label: "click me!", oncommand: function() { console.log("clicked"); }, insertbefore: "menu_pageinfo" }); now run the add-on: jpm run -b nightly you should see a new menu item in the tools menu labeled "click me!". click the button, and the message "clicked" is logged. note: in more recent versions of firefox, the menu bar may not be visible by default. to show the menu bar, click on the open menu icon and select "customize". then, under show / hide toolbars, enable the menu ...

Miscellaneous - Archive of obsolete content
alse); } } function onfocusinput(focusevent) { focusedcontrol = focusevent.originaltarget; } function onblurinput(blurevent) { focusedcontrol = null; } or var element = document.commanddispatcher.focusedelement; inserting text at the cursor function inserttext(element, snippet) { var selectionend = element.selectionstart + snippet.length; var currentvalue = element.value; var beforetext = currentvalue.substring(0, element.selectionstart); var aftertext = currentvalue.substring(element.selectionend, currentvalue.length); element.value = beforetext + snippet + aftertext; element.focus(); //put the cursor after the inserted text element.setselectionrange(selectionend, selectionend); } inserttext(document.getelementbyid("example"), "the text to be inserted"); disa...
...reateinstance(ci.nsibinaryinputstream); stream.setinputstream(postdata); var postbytes = stream.readbytearray(stream.available()); var poststr = string.fromcharcode.apply(null, postbytes); //do anything to your poststr alert(poststr); getting a string from the input stream is made somewhat simpler in firefox 4, by the addition of netutil.readinputstreamtostring() getting postdata of a request before the request is sent the above code will get the postdata for a page that has already loaded. to see what the postdata looks like before the request is even sent, use the 'http-on-modify-request' observer topic: observerservice.addobserver(observer, 'http-on-modify-request', false); where "observer" is an object that has a method "observe": function observe(subject, topic, data) { subject.qu...

Preferences - Archive of obsolete content
s whether the preference has been changed from the default value. if so, it will return true, otherwise false. in particular, when no default value exists for a preference, prefhasuservalue() indicates whether a preference exists. attempting to read a nonexistent preference using one of the get*pref methods will throw an exception. using prefhasuservalue() lets you check if the preference exists before attempting to read it. for example: if (prefs.prefhasuservalue("mypref")) { alert(prefs.getcharpref("mypref")); } note that the getcharpref() call may throw error even if the preference exists, for example if it has a different type. as of firefox 54, you can pass a default value as the second argument to any get*pref method. the default value will be returned if the preference doesn't exis...
...ing to branch.setcharpref etc. ...

Rosetta - Archive of obsolete content
obaton = document.createcomment(" the previous code has been automatically translated from \"" + smimetype + "\" to \"text/ecmascript\". ...
...t.attributes, nattr = 0; nattr < aattrs.length; nattr++) { ocompiled.setattribute(aattrs[nattr].name, aattrs[nattr].value); } ocompiled.type = "text\/ecmascript"; if (oxhr200) { ocompiled.src = "data:text\/javascript," + encodeuricomponent(odicts[smimetype](oxhr200.responsetext)); } ocompiled.text = oxhr200 ? ...

Toolbar - Archive of obsolete content
id of the toolbar to install to. * @param {string} id the id of the button to install. * @param {string} afterid the id of the element to insert after. ...
...l */ function installbutton(toolbarid, id, afterid) { if (!document.getelementbyid(id)) { var toolbar = document.getelementbyid(toolbarid); // if no afterid is given, then append the item to the toolbar var before = null; if (afterid) { let elem = document.getelementbyid(afterid); if (elem && elem.parentnode == toolbar) before = elem.nextelementsibling; } toolbar.insertitem(id, before); toolbar.setattribute("currentset", toolbar.currentset); document.persist(toolbar.id, "currentset"); if (toolbarid == "addon-bar") toolbar.collapsed = false; } } if (firstrun) { installbutton("nav-bar", "my-extension-navbar-button"); // the "addon-bar" is available since ...

How to convert an overlay extension to restartless - Archive of obsolete content
read arbitrary binary data, of various sizes, in an endian-safe way, is to use dataview. the other typed array stuff is viable in firefox 4+. this wasn't added until firefox 15. if you were using nsibinaryinputstream or anything similar, figuring out dataview will be fairly straightforward. just read the docs and it's pretty simple. it will probably be notably faster than whatever you were doing before. reportedly xmlhttprequest doesn't work reliably when used in jsm under versions of firefox less than 16, however as previously mentioned, this guide should be taken as requiring firefox 17+. step 4: manually handle default preferences normal extensions load default preferences from a standardized file automatically. restartless extensions don't (for no good reason). this part is fairly easy t...
...add-on is via bootstrap.js:startup() rather than a "load" handler in a xul overlay. your localization handling should be unaffected by your transition to a restartless/extractionless add-on so long as you properly clear the chrome cache on add-on shutdown and load your properties files using the method listed above. your property files and dtd files loaded from chrome:// uris should work just as before. this is all assuming a minimum version of firefox 17+ (or other gecko 17+ application) which you should remember to state explicitly in your install.rdf. just remember that whatever you start you also need to have the ability to undo. in order for your add-on to reliably update without a restart it needs to be able to shutdown/disable cleanly. also note that once you do get this all up and run...

Listening to events in Firefox extensions - Archive of obsolete content
ched when the user has navigated away from the page. pageshow dispatched when a page is newly displayed. pagehide dispatched when a page is hidden. standard behavior for web pages is: user navigates to a page. as the page loads, inline scripts run. once the page is loaded, the onload handler fires. some pages include a fourth step. if a page uses an unload or beforeunload handler, it fires when the user navigates away from the page. if an unload handler is present, the page will not be cached. when a user navigates to a cached page, inline scripts and the onload handler do not run (steps 2 and 3), since in most cases, the effects of these scripts have been preserved. if the page contains scripts or other behaviors that fire during loading that you want to ...
... browser. when this property is set to false, the unload handler, if present, fires immediately after the pagehide event. firefox 1.5 tries to simulate load events in the same order they would occur when the page is initially loaded. frames are treated the same way as the top-level document. if the page contains frames, then when the cached page is loaded: pageshow events from each frame fire before the pageshow event in the main document fires. when the user navigates away from the cached page, the pagehide event from each frame fires before the pagehide event in the main document. for navigation that occurs inside a single frame, events fire only in the affected frame. web progress listeners for more information about web loads a web progress listener can be used; these provide more d...

Appendix A: Add-on Performance - Archive of obsolete content
ure that they minimize their add-ons' performance impact, and here are a few simple guidelines that should be followed to achieve that. startup this is the area where add-ons have the most noticeable impact. most add-ons use the load event handler in the main overlay to initialize their objects and sometimes read files or even fetch remote data. the problem with the onload event is that it runs before the main window becomes visible, so all handlers need to complete before the user can see the window. an add-on can normally add a few hundred milliseconds to startup time because of the load handler, and it's not hard to figure out what having several add-ons will do. luckily, minimizing your startup time is easy, if you follow these guidelines: do not load or run code before it’s needed. ...
...nd a remove function. don't forget to remove what you don't need anymore! even if you need something during the whole existence of the window, you should clean everything up in the unload event handler. even the unload event should be handled efficiently. even if it is not as important as other areas, firefox shutdown can also be slowed down because of add-ons. if there's anything you can unload before shutdown, or if there's anything you can do to unload things more efficiently, then it's important that you do. never use xmlhttprequest in synchronous mode. if your add-on needs to perform a heavy operation like sorting or a complex mathematical calculation, you should use dom workers to offload the work to other threads. ...

Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
rent and administer yourself, there is a huge security risk, because of, but not limited to: you might discontinue your project or sell it, so that it is possible another person with malicious intentions takes over your domain. the server and/or domain name might be compromised. if using an unencrypted, insecure connection, a man-in-the-middle attacker might replace the json with attack code before it arrives at the user. use native json since firefox 3.5 you should use json. really, just use it! note: do not use json parsers implemented in javascript. these implementations are less efficient and often also contain serious security vulnerabilities. such implementations are meant to be used within a very different security context, namely a website, where the origin of the data is usuall...
...al function which you then call from the new one. // wrap in an anonymous function (which is called immediately). // this will encapsulate local variables such as _original and // not pollute the global namespace. (function() { // keep a reference to the original function. var _original = gbrowser.addtab; // override a function. gbrowser.addtab = function() { // execute some action before the original function call. try { myaddon.onaddtab(arguments[0]); } catch (ex) { /* might handle this */ } // execute original function. var rv = _original.apply(gbrowser, arguments); // execute some action afterwards. try { myaddon.doneaddtab(rv); } catch (ex) { /* might handle this */ } // return the original result return rv; }; })(); t...

Connecting to Remote Content - Archive of obsolete content
se as text. if the response is an xml document, the responsexml property will hold an xmldocument object that can be manipulated using dom methods. sometimes the server doesn't specify an xml content-type header, which is necessary for the xml parsing to happen automatically. you can use overridemimetype to force the response to be parsed as xml. request.overridemimetype("text/xml"); // do this before sending the request! the open method takes two required parameters: the http request method and the url to send the request. the http request method can be "get", "post" or "put". sending a post request requires you to set the content type of the request and to pass the post data to the send() method as below. request.open("post", url, true); request.setrequestheader("content-type", "applicati...
...sidebar > tamper data once you open the tamper data view, all requests and responses will begin to appear in it. you can discover some interesting things about firefox like this, such as the automatic update urls for extensions, and the behavior of web applications such as gmail. if you click on the "start tamper" button, for every request made you will get a popup dialog for tampering with it before it is sent. you can use it to view or even modify the data in a request, and then inspect the result. this can be a lot of work because there is a lot of web activity in a normal firefox window, so use it sparingly. a tutorial on tamper data can be found here. note: you should always test your connection code to cover edge cases, like when there is no internet connection, or the computer is con...

Getting Started with Firefox Extensions - Archive of obsolete content
nown as jetpacks), bootstrapped extensions and traditional extensions. if you're only getting started developing add-ons, the add-ons sdk provides a great way to quickly create simple ones and build on them. this tutorial focuses on traditional extensions, which are created differently. bootstrapped extensions are a step above traditional ones in complexity, so you should go through this tutorial before giving them a try. we'll begin the tutorial by analyzing a very simple extension. the hello world extension our sample extensions and this tutorial in general are meant for modern versions of firefox, but most of it works on older versions too. we'll now begin with a basic "hello world" extension. let's start by installing it. click on the link below. note: this extension is unsigned. starti...
... very simple extension. the hello world extension our sample extensions and this tutorial in general are meant for modern versions of firefox, but most of it works on older versions too. we'll now begin with a basic "hello world" extension. let's start by installing it. click on the link below. note: this extension is unsigned. starting with firefox 43, extensions need to be signed by mozilla before they can be installed in firefox. unsigned add-ons can still be installed in developer edition, nightly, and esr versions of firefox, after toggling the xpinstall.signatures.required preference in about:config. install hello world click the above link and then click "allow" in the pop-up bubble. you should see another pop-up telling you that you are installing an unverified add-on. click "insta...

JavaScript Object Management - Archive of obsolete content
at much. if you have complex behavior that requires too much code, look for ways to divide it into multiple objects and files. you can include as many scripts in a xul window as you need. to initialize your chrome objects, it's usually better to run the initialization code from the "load" event handler for the window. the load event is fired after the dom on the window has loaded completely, but before it's displayed to the user. this allows you to manipulate and possibly change elements in the window without the user noticing the changes. /** * controls the browser overlay for the hello world extension. */ 〈namespace〉.browseroverlay = { /** * initializes this object. */ init : function(aevent) { this._stringbundle = document.getelementbyid("xulschoolhello-string-bundle")...
..."xulschoolhello-string-bundle"); // you can make changes to the window dom here. } // more stuff }; window.addeventlistener( "load", function() { 〈namespace〉.browseroverlay.init(); }, false); there are some things you can't (or shouldn't) do inside load handlers, such as closing the window being loaded, or opening new windows, alerts or dialogs. the window has to finish loading before it can do any of these things. they are bad ui practices anyway and you should avoid them. if you really need to do something like this anyway, one way to do it is to have a timeout execute the code after a delay: init : function(aevent) { let that = this; this._stringbundle = document.getelementbyid("xs-hw-string-bundle"); window.settimeout( function() { window.alert(that._st...

User Notifications and Alerts - Archive of obsolete content
« previousnext » it is often the case that extensions need to notify users about important events, often requiring some response. using modal dialogs and alerts is usually a bad idea. they interrupt the user's workflow, demanding immediate action before anything else can be done. users will find them annoying and probably will learn to dismiss them as quickly as possible without even reading what they have to say. or they will just get rid of your add-on. this section lists a few alternatives that give you the possibility of notifying the user and requesting action without being too annoying. the notificationbox element you have probably seen these before. the "remember password" prompt is the one that shows up the most often. they are thin boxes that appear from beneath the tab list ...
...ated, given the advantages of xul overlays and css positioning. however, these solutions are prone to be buggy and have accessibility issues. you should use the 2 alternatives mentioned above whenever possible. if none of those fit your needs then this is an acceptable solution. an easy way to display alerts is to include a hidden box in your overlay, which you can fill with any content you need before removing the hidden attribute so that it is displayed to the user. the best locations for this kind of box are above and below the tab browser. below is preferrable because it only cuts the bottom part of the current page, as opposed to pushing down all tabs and content. notification boxes are a good guideline to what you should aim for: thin, informative and easy to dismiss. another option is t...

Setting up an extension development environment - Archive of obsolete content
nnection = false. this prevents the browser debugger from prompting for connection permission every time. extensions.logging.enabled = true. this will send more detailed information about installation and update problems to the error console. (note that the extension manager automatically restarts the application at startup sometimes, which may mean you won't have time to see the messages logged before the automatic restart happens. to see them, prevent the automatic restart by setting the environment no_em_restart to 1 before starting the application.) nglayout.debug.disable_xul_fastload = true. for gecko 2.0+ (firefox 4.0+). see this bug for more information. although the bug has been closed, it is believed that this pref is still relevant. you might also want to set dom.report_all_js_excep...
...ith no curly brackets {}. the contents of this file should be the path to the directory that contains your install.rdf file, for example /full/path/to/yourextension/ on mac and linux, and c:\full\path\to\yourextension\ on windows. remember to include the closing slash and remove any trailing whitespace. note: if you already installed the extension via xpi, you should uninstall it first before creating the pointer file. also note that the use of proxy files requires that the extension's chrome.manifest defines its chrome urls using traditional directories, rather than a jared structure. see below. place the file in the extensions folder of your profile and restart the application. using directories rather than jars regardless of whether you choose to eventually package your...

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
ontent inside tables. the sheer amount [sic] of redundant <font> tags inside every cell was probably enough to double file size. my initial attempts at the markup and css for the wired news design eliminated the majority of our tables, but left one master table to control the primary columns of each page. ...
... by eliminating tables that were strictly used for layout, we significantly cut back on the amount of markup and useless tags in our html, and gained a structure that is much easier to maintain. ...

Creating reusable content with CSS and XBL - Archive of obsolete content
plications where parts need to be self-contained and reusable. you can place stylesheets in separate files, and you can place scripts in separate files. but you must link those files from the document as a whole. another structural limitation concerns content. you can use css to provide content for selected elements, but the content is limited to text and images, and its positioning is limited to before or after the selected element. mozilla provides a mechanism that overcomes these limitations: xbl (xml bindings language). you can use xbl to link selected elements to their own: stylesheets content properties and methods event handlers because you avoid linking everything at the document level, you can make self-contained parts that are easy to maintain and reuse. more details ...
... and paste the content from here: /*** xbl demonstration ***/ [anonid="square"] { width: 20em; height: 20em; border: 2px inset gray; } [anonid="button"] { margin-top: 1em; padding: .5em 2em; } open the document in your browser and press the button. this wiki does not support javascript in pages, so it is not possible to show the demonstration here. it looks something like this, before and after you press the button: notes about this demonstration: the html document links the document stylesheet as usual, but it does not link any javascript code. the document does not contain any buttons. it only contains the text of the button's label. the button is added by the binding. the document stylesheet links the binding. the binding links its own stylesheet, a...

XML data - Archive of obsolete content
<name>pacific</name> <area>180,000</area> <depth>4,000</depth> </ocean> <ocean> <name>indian</name> <area>75,000</area> <depth>3,900</depth> </ocean> <ocean> <name>southern</name> <area>20,000</area> <depth>4,500</depth> </ocean> </planet> make a new css file, style9.css. ...
...: 200%; content: "oceans"; margin: -.75em 0px .25em -.25em; padding: .1em .25em; background-color: #cdf; } planet { display: block; margin: 2em 1em; border: 4px solid #cdf; padding: 0px 1em; background-color: white; } ocean { display: block; margin-bottom: 1em; } name { display: block; font-weight: bold; font-size: 150%; } area { display: block; } area:before { content: "area: "; } area:after { content: " million km\b2"; } depth { display: block; } depth:before { content: "mean depth: "; } depth:after { content: " m"; } open the document in your browser: oceans arctic area: 13,000 million km² mean depth: 1,200 m atlantic area: 87,000 million km² mean depth: 3,900 m ...

CSS3 - Archive of obsolete content
e[attribute$="value"], e[attribute*="value"] . new pseudo-classes: :target, :enabled and :disabled, :checked, :indeterminate, :root, :nth-child and :nth-last-child, :nth-of-type and :nth-last-of-type, :last-child, :first-of-type and :last-of-type, :only-child and :only-of-type,:empty, and :not. pseudo-elements are now characterized by two colons rather than one: :after becomes ::after, :before becomes ::before, :first-letter becomes ::first-letter, and :first-line becomes ::first-line. the new general sibling combinator ( h1~pre ). the next iteration of the selectors specification is already in progress, though it still hasn't reached the first public working draft stage. media queries recommendation since june 19th, 2012 extends the form...
...-rules inside @media and the adding of a new css at-rule, @supports, and a new dom method css.supports(). css multi-column layout module working draft adds support for easy multi-column layouts using the css columns, column-count, column-fill, column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width, column-span, column-width, break-after, break-before, and break-inside. css values and units module level 3 candidate recommendation makes initial and inherit keywords usable on any css property. formally defines the css data types of css 2.1, that were implicitely defined by their grammar token and some textual precisions. adds: definition for new font-relative length units: rem and ch . d...

Notes on HTML Reflow - Archive of obsolete content
geometry of elements that are earlier "in the flow", so layout can proceed left-to-right, top-to-bottom through the document. there are exceptions to this rule: most notably, html tables may require more than one pass. the xul box layout model, on the other hand, is constraint based , meaning that geometric preferences and constraints of neighboring elements are taken into consideration before the elements' final geometry can be computed. the box is the geometric primitive for the xul layout model. all html reflow, including the initial reflow , begins at the root frame , which corresponds to the <html> element of the html document. reflow proceeds recursively through some or all of the frame hierarchy, computing geometric information for each frame object th...
... when content streams in from the network. incremental reflows are queued by the presentation shell for batched dispatch. reflow state the reflow state object, nshtmlreflowstate, is used to pass constraining information "down" from parent frames to child frames. for example, a <div> with a constrained width (e.g., set via the css width property) would note this in the reflow state object before flowing its children. when reflow begins, the root reflow state is initialized with information about the top-level container for the document's presentation; e.g., the width and height of the application window. this is passed as an argument to the reflow method of the root frame in the frame hierarchy. each container frame constructs a new reflow state object (based on ...

Autodial for Windows NT - Archive of obsolete content
el | network connections | advanced | dialup preferences is set to enable autodial, then any application trying to access the internet will trigger the autodial feature whenever an internet address cannot be reached. however, this service will won't function if you have a lan card installed, unless that particular address has been accessed in the past via a dialup connection. origin of the bug before the implementation of the autodial helper feature, mozilla would trigger the autodial feature on nt-based operating systems, but only if certain conditions are met. these conditions are as follows: the autodial service is running control panel | network connections | advanced | dialup preferences | enable autodial by location is set for some location a dialup connection has been configured t...
...ult connection". these two behave the same for mozilla, and trigger autodial when you fail to reach a requested address. issues there have been a few bug reports filed against this new feature that are the result of the fact that mozilla now looks at the control panel | internet options | connections settings. some users have had the autodial setting turned on, but mozilla never triggered them before. starting in mozilla 1.1, autodial is triggered whenever an address can't be reached (mozilla now mimics the remote access autodial service.) see bug 160846, bug 167624, and bug 160846. if a user doesn't want the os to use autodial, he must turn off the feature from the os. there is also a problem with the aol client when used as a dialer. bug 166134 describes how the aol client installs itself a...

Kill the XUL.mfl file for good - Archive of obsolete content
r in a fileserver based environment, this can be problematic: at several megabytes a pop, these files will take up a considerable amount of space, because each user has his own... loading these files from the server, and storing them back slows down the network, thus it may actually be faster without than with xul.mfl occasionnally gets corrupted, needing a manual intervention to wipe it out, before mozilla again works correctly. with quicklauncer (see above), mozilla's speed is actually quite adequate, even without xul.mfl for these reasons, it is desirable to disable the xul.mfl functionality. unfortunately, there appears to be no "clean" way of doing so (javascript command in prefs.js or registry setting). but creating a subdirectory named xul.mfl in mozilla's profile directory seems to...
...ve), mozilla's speed is actually quite adequate, even without xul.mfl for these reasons, it is desirable to disable the xul.mfl functionality. unfortunately, there appears to be no "clean" way of doing so (javascript command in prefs.js or registry setting). but creating a subdirectory named xul.mfl in mozilla's profile directory seems to help (mozilla is not smart enough to remove the directory before creating the file, thus the presence of the directory effectively disables this (mis)feature). n.b. it seems that as of version 1.5, the xul.mfl file no longer is a problem, so this part may be skipped if you have a recent enough mozilla version. ...

Getting Started - Archive of obsolete content
skin\classic\messenger messenger contains styles of the mail client. skin\classic\messenger-newsblog messenger-newsblog contains the only css file. skin\classic\mozapps mozapps contains all the styles and icons for the browser peripherals, such as the extension manager or update wizard. skin\classic\navigator navigator contains some icons and styles for all sm components. install your new theme before you can see the changes you make to a seamonkey theme (since live edits are restrictively difficult to set up) you must first learn how to repackage the classic theme to make it installable. for the sake of this discussion we will call your theme "my_theme", though you can replace that with any name. copying the necessary files the first step is to move all the files into the right directory stru...
...nd replace them with the name of your theme. the packages section lists which components of the browser you're modifying. if we also had skins for chatzilla, we would need to add another line resembling the other ones and change it to point to chatzilla. but this list includes everything that we changed, so just modify the blue text to point to match the name/version that you used in the sections before this. skin global my_theme jar:chrome/my_theme.jar!/global/ skin mozapps my_theme jar:chrome/my_theme.jar!/mozapps/ skin messenger my_theme jar:chrome/my_theme.jar!/messenger/ skin messenger-newsblog my_theme jar:chrome/my_theme.jar!/messenger-newsblog/ skin communicator my_theme jar:chrome/my_theme.jar!/communicator/ skin help my_theme jar:chrome/my_theme.jar!/help/ skin navigator my_theme jar:c...

Getting Started - Archive of obsolete content
as the css files. to make a change, just replace one of the images with one of your own. it should probably be of the same size, but it doesn't have to be. if you do need to change the size, also make sure to change any css that may be affected by that change. after you've changed the images, launch mozilla and you should see them. creating the install script getting it ready for the installation before we can package everything up for installation, we need to remove all references to classic. copy everything in \mozilla\chrome\classic\skin\classic to a directory called \myskin. skin info when switching skins in mozilla, it displays a preview image and some information about the theme. this is what we're going to create now. take a screenshot of mozilla running your theme and create an image tha...
...png/preview.jpg/preview.gif here the packages section lists which components of the browser suit that you are modifying. if we also had skins for chatzilla, we would have to add another line resembling the other ones and change it to point to chatzilla. but this list includes everything that we changed, so just modify the blue text to point to match the name/version that you used in the sections before this. <rdf:li resource="urn:mozilla:skin:myskin/1.0:communicator"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:editor"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:global"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:messenger"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:navigator"/> finally, in the last section of the contents.rdf file we need to tell mozilla what version this skin...

Creating a Skin for Firefox/Getting Started - Archive of obsolete content
l global contains almost all of the important css files that define the appearance of the browser. this is the most critical directory in a theme. skin\classic\help help contains all the files for theming the help dialog window. skin\classic\mozapps mozapps contains all the styles and icons for the browser peripherals, such as the extension manager or update wizard. install your new theme before you can see the changes you make to a firefox theme (since live edits are restrictively difficult to set up) you must first learn how to repackage the classic theme to make it installable. for the sake of this discussion we will call your theme "my_theme", though you can replace that with any name. copying the necessary files the first step is to move all the files into the right directory stru...
...d replace them with the name of your theme. the packages section lists which components of the browser you're modifying. if we also had skins for chatzilla, we would need to add another line resembling the other ones and change it to point to chatzilla. but this list includes everything that we changed, so just modify the blue text to point to match the name/version that you used in the sections before this. <rdf:li resource="urn:mozilla:skin:my_theme:communicator"/> <rdf:li resource="urn:mozilla:skin:my_theme:editor"/> <rdf:li resource="urn:mozilla:skin:my_theme:global"/> <rdf:li resource="urn:mozilla:skin:my_theme:messenger"/> <rdf:li resource="urn:mozilla:skin:my_theme:navigator"/> save the file and exit the text editor. install.rdf make a copy of install.rdf and place it in the my_them...

Creating regular expressions for a microsummary generator - Archive of obsolete content
rs appear in a url, and we want to match them in a regular expression, we have to escape them in the expression by prepending them with a backwards slash (\). here's a regular expression that matches our example url: http://cgi\.ebay\.com/ws/ebayisapi\.dll\?viewitem&item=280018439106 it looks almost the same as the url. the only difference is that the regular expression has backwards slashes before the periods and the question mark, since both of those characters have special meaning in regular expressions. matching from the start of the url while this expression matches the url, it also matches other urls that contain this url in their query parameters, for example: http://www.example.com/redirect.php?url=http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&item=280018439106 that's probably...
...ery parameters in any order. but ebay uses a different style of url in some cases (f.e. on its search results page). here's a url for the same item in that different style: http://cgi.ebay.com/mozilla-firefox-logo-1-inch-pin-badge-button-browser_w0qqitemz280018439106qqihz018qqcategoryz2036qqcmdzviewitem to accommodate these urls, we can create a second regular expression that matches them. as before, we should distinguish the components of the url which are unique to the item from those which are common to all auction item urls of this style. here are several other urls of this style: http://cgi.ebay.com/firefox-2002-dvd_w0qqitemz130017517168qqihz003qqcategoryz617qqcmdzviewitem http://cgi.ebay.com/ahm-ho-scale-firefox-tank-car_w0qqitemz290019763032qqihz019qqcategoryz19130qqcmdzviewitem ...

Dehydra Function Reference - Archive of obsolete content
bject representing the function being processed body is an array of {loc:, statements:array of variable types} representing an outline of the function stripped down to variables, function calls and assignments. process_decl(decl) process_decl is called for every global variable, function, or template declaration. decl is a variable type input_end() called once at the end of the c++ source file before the compiler quits. this is useful for finalizing analyses. builtin functions the following functions are provided by dehydra and may be called by the user: print(msg) print a string to stdout (or stderr if the compiler is piping output). if the current callback is associated with a particular location, the location will be printed first. msg is a string to output to customize the location info...
...is is useful for finalizing analyses. builtin functions the following functions are provided by dehydra and may be called by the user: print(msg) print a string to stdout (or stderr if the compiler is piping output). if the current callback is associated with a particular location, the location will be printed first. msg is a string to output to customize the location info printed set this._loc before calling print() include(file [, namespace]) include a javascript file into a namespace. file is a string representing the file to include optional: namespace is an object to include the file into. the default namespace is this the directories in sys.include_path are searched for the file, and the current working directory is searched last. includes are guarded so a file is only included once an...

Exception logging in JavaScript - Archive of obsolete content
this had the unintended consequence of logging "expected" errors at length into the console. ...
...o the c++ in frame 3. no exception will be logged to the error console in this case. that c++ may handle the error, generate a different error, or simply pass it straight back to the js in frame 2. if the javascript in frame 2 either receives an exception from frame 3 or generates its own exception, and that exception remains unandled, then the exception will always be logged to the error console before control returns to the c++ in frame 1. in other words, all unhandled javascript exceptions (except those in rules 3 and 4 above) will be logged before control returns to the outermost c++ caller. forcing logging of exceptions in inner js frames sometimes you might actually want to see all exceptions from inner javascript frames logged (in the call chain above that would be when an exception is un...

Downloading Nightly or Trunk Builds - Archive of obsolete content
o mozilla 1.9.2. however, the numbers are not used all of the time. sometimes the firefox releases are described by a code name. for example "shiretoko" is used for firefox 3.5. and very often neither names nor numbers are used, but rather special words indicating relative order are used. the three common cases are "trunk", meaning the most recent version of mozilla; "branch", meaning the version before trunk (though it can be any version before trunk); and "next", meaning a possible version in the future. so, if you are looking for the cutting edge firefox, you probably want a mozilla branch nightly build, that is, look for a mozilla thing (not a firefox thing), not the breaky one on trunk, but the most recent branch, and built very fresh (last night!), so you can install it. for firefox 3.5 t...
...able passes a certain more-or-less fixed set of tests. nightly builds. the same machines produce about every 24 hours a "nightly" build which can be downloaded by anyone if you know where to get it: these are the nightly builds, and testers all over the world download them and test them, reporting as they go along on any bugs that hit them. anyone can be a tester, you don't need to get approval before you can start testing. when people talk of "nightlies", they often mean "trunk nightlies", though there exist also "branch nightlies" which are somewhat less buggy but also not as "newest & greatest". for instance, one may use a thunderbird "branch nightly" as one's main e-mail client. note that nightly builds may not be created for every platform for every night. if one has questions about the ...

Repackaging Firefox - Archive of obsolete content
notice: the article is about repackaging firefox 2.0 and is obsolete when working on 3.x repackaging. firefox can be customized for the needs of a particular group of users (for example, your organization's employees or clients). because firefox is designed from the ground up for extensibility and customization, this process is simple and easy to maintain. important legal considerations before you get started, it is very important to know and abide by the legal requirements for distributing firefox. you must have written authorization from mozilla to distribute a modified version of firefox. to do this, please contact trademarks@mozilla.com. getting started now, on to the technical details. the following diagram represents an overview of the process and the pieces involved: you wi...
... ...

jspage - Archive of obsolete content
ext":"textcontent"}; var b=["compact","nowrap","ismap","declare","noshade","checked","disabled","readonly","multiple","selected","noresize","defer"];var k=["value","type","defaultvalue","accesskey","cellpadding","cellspacing","colspan","frameborder","maxlength","readonly","rowspan","tabindex","usemap"]; b=b.associate(b);hash.extend(e,b);hash.extend(e,k.associate(k.map(string.tolowercase)));var a={before:function(m,l){if(l.parentnode){l.parentnode.insertbefore(m,l); }},after:function(m,l){if(!l.parentnode){return;}var n=l.nextsibling;(n)?l.parentnode.insertbefore(m,n):l.parentnode.appendchild(m);},bottom:function(m,l){l.appendchild(m); },top:function(m,l){var n=l.firstchild;(n)?l.insertbefore(m,n):l.appendchild(m);}};a.inside=a.bottom;hash.each(a,function(l,m){m=m.capitalize();element.implement("...
...s;}if(!a){for(var b in c){this.cloneevents(d,b); }}else{if(c[a]){c[a].keys.each(function(e){this.addevent(a,e);},this);}}return this;}});element.nativeevents={click:2,dblclick:2,mouseup:2,mousedown:2,contextmenu:2,mousewheel:2,dommousescroll:2,mouseover:2,mouseout:2,mousemove:2,selectstart:2,selectend:2,keydown:2,keypress:2,keyup:2,focus:2,blur:2,change:2,reset:2,select:2,submit:2,load:1,unload:1,beforeunload:2,resize:1,move:1,domcontentloaded:1,readystatechange:1,error:1,abort:1,scroll:1}; (function(){var a=function(b){var c=b.relatedtarget;if(c==undefined){return true;}if(c===false){return false;}return($type(this)!="document"&&c!=this&&c.prefix!="xul"&&!this.haschild(c)); };element.events=new hash({mouseenter:{base:"mouseover",condition:a},mouseleave:{base:"mouseout",condition:a},mousewheel:{...

Modularization techniques - Archive of obsolete content
return ns_nointerface. reference counting is performed using the addref() and release() methods. an objects reference count generally starts at zero. addref() increments that reference count, and release() decrements it. if a call to release() causes the reference count to hit zero, the object will generally free itself. a successful queryinterface() will call addref() on the requested interface before returning. both addref() and release() return the resulting reference count. the convenience macros ns_addref() and ns_release() are preferred over calling addref and release directly. in debug builds, these macros provide useful reference counting logs. use them wherever possible. /* * the nsisupports interface */ class nsisupports { public: ns_imethod queryinterface(const nsiid &aiid, ...
...es. a simple program called regfactory.exe (on windows) or regfactory (on unix) can be used to register self-registering dlls. reference counting basics reference counting is a critical part of modularity picture. there are a number of basic reference counting rules to remember. here's a quick summary. out parameters functions that return a new interface should call addref() on that interface before returning it. nsresult getfoo(ifoo **afoores) { if (afoores == null) { return ns_error_null_pointer; } *afoores = mfoo; ns_addref(*afoores); return ns_ok; } remember that this applies to the interfaces returned by queryinterface(), createinstance() and ns_newx(), and you must call release() on them when you are done to avoid memory leaks. in parameters and local pointers inter...

Scripting - Archive of obsolete content
prism allows for some client-side web application customization. the web application bundle is allowed to hold a javascript file named webapp.js (called the webapp script). this file will be loaded into the prism chrome window very much like a firefox extension is loaded into the browser chrome window. it can contain the following functions: startup when the app starts, before the user interface is displayed. since the web application has not yet loaded, the window object is still undefined. preload just before the user interface is displayed. returning false causes the application to terminate. load after the main application windows has finished loading. the window object has been initialized and can be used. error if there is an error loading the main app page (e.g. the server is no...
... prism exposes desktop integration features through an property of the window object called platform. the platform property implements the nsiplatformglue interface, whose methods are described in the following section. ...

Frequently Asked Questions - Archive of obsolete content
ug. if you have any problems with the bug database feel free to contact contact us. can i use a plugin for svg instead of mozilla's native support? individuals can choose to use a plugin to view svg in mozilla on their own computers, but there is no way for svg content authors to make mozilla use a plugin when people view the svg files on their website. the native svg support must be turned off before mozilla will look to see if there's an svg plugin installed. this is done by toggling a hidden user configuration preference (pref). to access the pref type about:config into the url bar, then type svg.enabled into the filter field. when you double click on the pref you will see its value change to and from true/false, turning the native support on/off. how does mozilla's svg implementation comp...
...hings you should still feel free to ask us friendly questions and give us constructive feedback. who's currently working on what? other than reviewing patches and fixing the occassional bug, alex is currently taking a break from active svg development to concentrate on 'real work' and cool stuff like xtf and jssh. tim is working on implementing <filter> and working on items that need to be done before turning on svg by default. after recently implementing gradients, scooter is working on fixing some issues that remain outstanding and fixing <switch>. jonathan is working on various bugs, especially those that need to be fixed before svg can be enabled in the official builds. david continues to create svg enabled nightlies and answer build related questions as he has done for some time. finally,...

Space Manager Detailed Design - Archive of obsolete content
ft, nscoord atop, nscoord aright, nscoord abottom, nsiframe*); bandrect(nscoord aleft, nscoord atop, nscoord aright, nscoord abottom, nsvoidarray*); ~bandrect(); // list operations bandrect* next() const {return (bandrect*)pr_next_link(this);} bandrect* prev() const {return (bandrect*)pr_prev_link(this);} void insertbefore(bandrect* abandrect) {pr_insert_before(abandrect, this);} void insertafter(bandrect* abandrect) {pr_insert_after(abandrect, this);} void remove() {pr_remove_link(this);} // split the band rect into two vertically, with this band rect becoming // the top part, and a new band rect being allocated and returned for the // bottom part // // does not insert the ne...
.../ +-----+ // | r | // +-----+ // first, check for the easiest case, where there are no existing bandrects, or the band rect passed in is below the bottommost rect. in this case,just append the band rect and return. starting at the head of the list of bandrects, check for intersection with the rect passed in: case #1: the rect is totally above the current band rect, so insert a new band rect before the current bandrect cases #2 and #7: the rect is partially above the band rect, so it is divided into two bandrects, one entirely above the band, and one containing the remainder of the rect. insert the part that is totally above the bandrect before the current bandrect, as in case #1 above, and adjust the other band rect to exclude the part already added. case #5: the rect is totally below th...

Actionscript Acceptance Tests - Archive of obsolete content
.abcs: if you desire to run a test with multiple .abc files (e.g: avmshell a.abc b.abc testname.abc) there is a special avm_args directive called multiabc that is specified surrounded by two pipe (|) symbols: |multiabc| $dir/testname_support/a.abc $dir/testname_support/b.abc the extra abc files will usually be placed in a _support dir (see additional files below). any avm arguments can be placed before the |multiabc| directive, or the line can start with the directive. any test arguments (--) must be placed after the multiabc file listings. here is a more complicated example that passes both avm args, multiple abcs and test args: -ojit |multiabc| $dir/testname_support/a.abc -- test_args a dir.avm_args file can also be created with the same contents that will apply to the entire directory. te...
...ed line by line to the .out file and any difference is considered a failure. may be used in conjunction with a .exitcode file. testname.abc_ for special cases where the .as source is not available (e.g. fuzzed files) it is possible to check in a .abc_ which will let the test harness run compiled files without source. the underscore is necessary otherwise the buildbot system will delete the .abc before starting up a testrun (not an issue when running locally, but makes it easy to differentiate between binary-only abc files and generated abcs. support directories in some cases a test may require additional files to successfully run. there are two kinds of support directories available. files to be included when compiling the test: if a test requires additional .as files to be included when comp...

Treehydra Manual - Archive of obsolete content
a options. to make things easier, we will first present recipes for accessing specific gcc intermediate representations. treehydra provides the following callbacks to analysis scripts: process_tree_decl, process_tree, process_tree_type, and process_cp_pre_genericize. fixme document all these callbacks. c++ asts c++ asts are provided via the process_cp_pre_genericize callback. ...
...example: function process_tree(fn) { // fn is a function_decl, decl_saved_tree(fn) is ast print(fn); } gimple cfgs process_tree can also provide gimple cfgs. to get cfgs, you must instruct treehydra to call process_tree after cfg construction. ...

Anonymous Content - Archive of obsolete content
th the bound element takes focus, then the blur and focus events are both stopped. as far as the bound element is concerned, it retains focus throughout the two events. anonymous content can receive focus when the user tabs through the document. the same rules apply. if the anonymous content is focusable, it can be tabbed into, but if the bound element is not focusable, the event will be stopped before it reaches the bound element. in html4 the tabindex attribute can be used to specify the tab order for focusable elements. this attribute can be specified on anonymous content. each scope has a unique tab order. the tabindex values used in one scope are ignored by other scopes. as an example, consider the html file upload control. it is a focusable element that in turn is made up of two focusab...
...targeted to be a focus event on the file control itself. focus events should also be stopped if the bound element is already focused. for example, if the user has already focused the textfield within an html file upload control, then the file upload control is now also focused. if the user then focuses the button inside the file upload control, the focus event generated for the button is stopped before it reaches the file control, since the file control is already focused. because content in multiple scopes can be focused, the css :focus pseudo-element is hierarchical. style rules can be written with the assumption that they will match (in the above example) both the file control and the element focused inside the file control. in other words, an arbitrary chain of elements can be in the :focu...

Binding Attachment and Detachment - Archive of obsolete content
ethods and properties with getters/setters are no longer accessible from the binding, although properties with raw values remain. any specified event handlers are unhooked from their respective targets. a binding can specify a <destructor> block within <implementation> section that executes prior to the binding detachment. using a <destructor> block, a binding can perform any necessary cleanup before it is torn down. bindings in an inheritance chain are always detached from the most derived binding to the base. therefore the <destructor> block of the derived binding will execute, and then the base binding's block will execute. when bindings attached through style are detached because of a style change, they have no effect on any other bindings attached using the dom. those bindings will sta...
...talled via the original call to element.style.mozbinding = "url(...)". the rule for detachment can be summarized as follows. whenever a binding is detached, all bindings that it explicitly inherits from are also detached. binding documents whenever a binding is attached to an element in another document, the binding document is only fetched if no binding from the binding document has been used before in the bound document. a given bound document has a unique copy of each separate binding document that it uses. all bindings from the same binding document url that are used in a bound document will share the same binding document. therefore if all the bindings in a chain come from binding documents that have already been loaded by the bound document, then the attachment of a binding (either thr...

Event Handlers - Archive of obsolete content
d to and if that event matches all of the criteria specified by the handler. the most basic handler specifies the event to listen for and an action to take when the handler fires. this action can be specified either using an action attribute or by specifying the script as a child of the handler element. if both are specified, the attribute wins. in both cases the javascript body is compiled just before execution; code that does not depend on the context of the event should be factored into normal javascript file. (note that there is a possibility that this may change in the future.) handlers are attached to the bound element, and they are registered by default for bubbling events. this means that <handler event="click" action="foo()"/> is analogous to onclick="foo()" defined on the bound el...
...s fire first on the derived binding and then on the base binding in the chain. a derived handler then has a way of preventing the event from flowing to its base binding handlers. mouse and key handlers have certain additional properties that are supported by xbl. additional attributes can be used to impose a filter on the event handler. when a filter is imposed, additional conditions must be met before the event handler will fire. for both mouse and key events, modifier keys can be specified using the modifiers attribute. this attribute is a comma-separated list of modifier keys that must be down at the time the key or mouse event occurs in order for the handler to execute. examples of common keys in the list are shift and control. for more details, see the xbl element reference for <handler>...

execute - Archive of obsolete content
parameters the execute method has the following parameters: xpisourcepath the pathname of the file to extract and execute. (note that this path points into the xpi itself.) args a parameter string that is passed to the executable. (ignored on mac os). see note below. blocking a boolean value that specifies whether the installation should wait for the execution of the file to finish before it resumes. default is false. see note below. the blocking parameter is not available as part of this method in versions of netscape before 6.1/mozilla 0.9.3. returns an integer error code. for a list of possible values, see return codes. description the execute method extracts the named file from the xpi file to a temporary file name. your code must call the performinstall method to actual...
...le (such as a browser) after it has been installed, and is typically placed at the end of an install script and outside of the main install block. the install object's execute method, on the other hand, deletes the executable from its temporary location once it has finished. the optional blocking argument, when set to true, specifies that the installation should wait for this executable to finish before processing the next queued install command. if you do not set this flag and launch an executable that is not a part of the installation, you will raise an error when you restart the browser. passing arguments to the executable the args parameter, when present, passes a string to the executable as command-line parameters. the following line, for example, passes the "-c" command-line parameter to ...

rel - Archive of obsolete content
« xul reference home rel type: one of the values below the type of comparison to perform. equals the subject and value must match exactly. ...
... « xul reference home rel type: one of the values below the type of comparison to perform. equals the subject and value must match exactly. ...

substate - Archive of obsolete content
after the element immediately after the splitter is collapsed. ...
... after the element immediately after the splitter is collapsed. ...

Building accessible custom components in XUL - Archive of obsolete content
nrelated text labels. if we inspect this with the msaa inspect32 tool, we see that each cell is exposed as role="text". <caption>it looks like a cell, but it's not</caption> assistive technologies also have no idea that our row headers and column headers are really headers. again, they are exposed as role="text". <caption>it looks like a column header, but it's not</caption> so, before we do anything else, we need to tell assistive technologies that all of these unrelated elements are actually related. this is where dhtml accessibility comes in. further reading grid element reference description element reference label element reference grid tutorial label tutorial adding roles with dhtml accessibility download stage-2.zip install stage-2.xpi using the new dhtml accessibili...
... "cancel" the edit by simply recreating the original label and restoring its previous value. finally, if the user hits tab while editing, we treat this as acceptance and recreate the label with the new value, then let firefox manage changing focus to the spreadsheet's next sibling. ...

ContextMenus - Archive of obsolete content
any of these situations; the 'contextmenu' event is fired in any case. <hbox id="container" align="center" oncontextmenu="..."> <label value="name:"/> <textbox id="name"/> </hbox> in this example, an attempt to open a context menu anywhere inside the hbox will call the event listener attached using the oncontextmenu attribute. as textboxes have a context menu built in, the event will fire before an attempt to open the context menu. however, the event will also fire when the label is right-clicked for instance, so the event handler should check to make sure that the target of the contextmenu event is what is desired. to cancel a context menu event, you can use the preventdefault method of the event object. function checkcontextmenu(event) { if (event.target.localname == "textbox") ...
...cause the context attribute is set to '_child'. note that this special value must begin with an underscore to distinguish it from an id of 'child'. the menupopup does not have to be the last child of the element as in this example, but usually this will be a convenient place to put it. hiding and showing menu items based on context when the context menu is opened, a popupshowing event will fire before the popup is displayed. this may be used to adjust the items displayed on the menu. typically, this will vary based on what the context is. for example, right clicking on an image might display items pertaining to images, whereas clicking on a link would display items pertaining to links. in many cases, it may be easier to use a single context menu containing every possible item, and show and hi...

Multiple Rules - Archive of obsolete content
ere element may be used. beside the equals operator, there are several other operators that may be used. ...
...de the equals operator, there are several other operators that may be used. ...

RDF Modifications - Archive of obsolete content
t creates a fresh datasource with the new data. actually, the parser does something smarter. when reloading a datasource, it keeps the existing rdf triples intact, and only modifies the datasource based on what has changed. when parsing, any triples that already exist are not added again. if a triple does not exist yet, it will be added. any triples that don't exist in the new data but were there before are removed. this means that the observer will be called only for the triples that differ between the new and old version of the data. if the reloaded datasource hasn't changed, the builder won't receive any notifications. this saves a lot of extra work. the rdf observer also has two methods onbeginupdatebatch and onendupdatebatch. these are called when performing a lot of operations on a datasou...
...ined in a parent container, there would be no match and the builder could stop processing the new triple. for instance, we might have added a description for a new photo, but haven't added the photo to the container resource. once we do add it to the container with another rdf assertion, the process described above is applied again and this time it may match. there are still two more things to do before a result is accepted as a new match. first, once the builder reaches the content statement, it checks what the container or reference variable is, in this case ?start, as specified by the uri attribute. the calculated value for the potential new match is 'http://www.xulplanet.com/rdf/myphotos'. the builder looks to see if this resource is being used as the stating point in the template. as it hap...

textbox (Toolkit autocomplete) - Archive of obsolete content
resses the "tab" key. elements with a higher tabindex are later in the tab sequence. tabscrolling new in thunderbird 3requires seamonkey 2.0 type: boolean if true, the user may cycle through the results list by pressing the tab key. if false, the default, the tab key moves the focus to the next element. timeout type: integer for autocomplete textboxes, the number of milliseconds before the textbox starts searching for completions. the default is 50 milliseconds. for search textboxes, the number of milliseconds before the timer fires a command event. the default is 500 milliseconds. for timed textboxes, the number of milliseconds before the timer fires a command event. there is no default. the timer starts after the user types a character. if the user types another character, th...
...node(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata getsearchat( index ) return type: str...

Textbox (XPFE autocomplete) - Archive of obsolete content
ext element.as of gecko 1.9.1, this attribute is now always specified in lower case. tabscrolling new in thunderbird 3requires seamonkey 2.0 type: boolean if true, the user may cycle through the results list by pressing the tab key. if false, the default, the tab key moves the focus to the next element. timeout type: integer for autocomplete textboxes, the number of milliseconds before the textbox starts searching for completions. the default is 50 milliseconds. for search textboxes, the number of milliseconds before the timer fires a command event. the default is 500 milliseconds. for timed textboxes, the number of milliseconds before the timer fires a command event. there is no default. the timer starts after the user types a character. if the user types another character, th...
...node(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata addsession( session ) obsolete since g...

Custom toolbar button - Archive of obsolete content
e to specify custom-button-2. duplicate the last section. in the id and oncommand attributes, change 1 to 2. change the label and tooltiptext attributes to whatever you want. do not change the class attribute. now edit button.css. duplicate the first three lines, changing the new lines to specify button-2. edit button.js and add javascript code for the new button. be sure to add the extra code before the curly brace on the last line of the file. for example, you could add this code for testing: 2: function () { alert("just testing again") }, create an image for the new button, naming the file button-2.png. the images supplied here are 40 pixels wide and 48 pixels high, with a 256-colour palette and a transparent background, in png format. some other formats will also work. here are so...
... as you need. distributing your button to other users if you want to distribute your button or buttons to other users, you must make some changes to avoid conflicts when they install your extension. create a new extension id, in the form: something@domain-name it must contain an at-sign (@), making it look something like an e-mail address, but it does not need to be a real e-mail address. before and after the at-sign, it can only contain the characters a-z, a-z, 0-9, full stop, hyphen and underscore. if you do not own a domain name, you can make up something else. if you want to make it clear that your made-up name is not a real domain, add .invalid to the end. use your new extension id to rename the directory, and specify the same id in your install.rdf file. in your install.rdf file,...