DownloadSummary
provides an aggregated view on the contents of a downloadlist. a reference to a downloadsummary object can be obtained using the downloads.getsummary() function. method overview promise bindtolist(downloadlist alist); promise addview(object aview); promise removeview(object aview); properties attribute type description allhavestopped read only boolean indicates whether all the downloads are currently stopped. progresstotalbytes read only number indicates the total number of bytes to be transferred before completing all the downloads that are currently in progress. ...
... properties attribute type description allhavestopped read only boolean indicates whether all the downloads are currently stopped. progresstotalbytes read only number indicates the total number of bytes to be transferred before completing all the downloads that are currently in progress. for downloads that do not have a known final size, the number of bytes currently transferred is reported as part of this property. this is zero if no downloads are currently in progress. ...
...leting all the downloads that are currently in progress. for downloads that do not have a known final size, the number of bytes currently transferred is reported as part of this property. this is zero if no downloads are currently in progress. progresscurrentbytes read only number number of bytes currently transferred as part of all the downloads that are currently in progress. this is zero if no downloads are currently in progress. methods bindtolist() this method may be called once to bind this object to a downloadlist. views on the summarized data can be registered before this object is bound to an actual list. this allows the summary to be used without requiring the initialization of the downloadlist first. ...
...And 3 more matches

DownloadTarget
a downloadtarget object represents the target of a download, for example a file in the global downloads directory, or a file in the system temporary directory. method overview promise refresh() properties attribute type description exists read only boolean indicates whether or not the target file exists. this is a dynamic property, which is updated when the download is completed or when the download.refresh() method is called. you can use this instead of using file system calls to check for the existence of the file in order to reduce io overhead. path read only string the path of the target file. ...
...dynamic property, which is updated when the download is completed or when the download.refresh() method is called. you can use this instead of using file system calls to check for the existence of the file in order to reduce io overhead. path read only string the path of the target file. partfilepath read only string the path of the ".part" file containing the data downloaded so far, or null to disable the use of a ".part" file to keep partially downloaded data. size read only number the size of the target file, in bytes, or zero if the download has not yet been completed. it is possible for this property to have a non-zero value even if the target file no longer exists, if the value is available in download metadata. if that metadata is n...
... size read only number the size of the target file, in bytes, or zero if the download has not yet been completed. it is possible for this property to have a non-zero value even if the target file no longer exists, if the value is available in download metadata. if that metadata is no longer available and the file has been deleted, then this value is zero. for single-file downloads, this property's value will always match the actual size of the file on disk, while the download.totalbytes property, when available, may indicate the size of the data as encoded for transfer instead. for downloads of multiple files, such as downloading a web page and its required media to disk, the meaning of this property is undefined. it currently indicates the size of the main file (suc...
...And 3 more matches

Downloading JSON and JavaScript in extensions - Archive of obsolete content
a common practice found in many extensions is using xmlhttprequest (or some other mechanism) to download javascript or json (they are different) from a remote website. once the content has been downloaded, the extension authors proceed to use eval() to decode the string content into javascript objects. this practice is dangerous and will not, in fact, pass an amo review. so the extension will not be allowed to move out of the amo sandbox. the practice is dangerous because the decoded javascript has full chrome privileges and could perform some nasty actions. how could the javascript an extension downloads perform nasty actions? fairly easy if the webserver where the javascript is hosted were to be hijacked or compromised. it happens to the best of us. amo takes the threat very seriously.
... because the decoded javascript has full chrome privileges and could perform some nasty actions. how could the javascript an extension downloads perform nasty actions? ...
...ll chrome privileges and could perform some nasty actions. how could the javascript an extension downloads perform nasty actions? fairly easy if the webserver where the javascript is hosted were to be hijacked or compromised. it happens to the best of us. amo takes the threat very seriously. the good news is there are several ways to workaround the problem. downloading json if the extension is downloading json, then the developer should be using one of the json decoding methods discussed here and not using eval() at all. json is about state and does not allow functions to be decoded. the json decoding methods available to extension developers protect the extension from malicious json and javascript. downloading state from a remote webserver using json is becoming extremely popular. use the jso...
...And 2 more matches

nsIDownloadObserver
netwerk/base/public/nsidownloader.idlscriptable please add a summary to this article. inherits from: nsisupports last changed in gecko 1.7 method overview void ondownloadcomplete(in nsidownloader downloader, in nsirequest request, in nsisupports ctxt, in nsresult status, in nsifile result); methods ondownloadcomplete() called to signal a download that has completed. ...
... netwerk/base/public/nsidownloader.idlscriptable please add a summary to this article. inherits from: nsisupports last changed in gecko 1.7 method overview void ondownloadcomplete(in nsidownloader downloader, in nsirequest request, in nsisupports ctxt, in nsresult status, in nsifile result); methods ondownloadcomplete() called to signal a download that has completed. ...
...blic/nsidownloader.idlscriptable please add a summary to this article. inherits from: nsisupports last changed in gecko 1.7 method overview void ondownloadcomplete(in nsidownloader downloader, in nsirequest request, in nsisupports ctxt, in nsresult status, in nsifile result); methods ondownloadcomplete() called to signal a download that has completed. ...
...And 2 more matches

Downloading Nightly or Trunk Builds - Archive of obsolete content
there are some terms that are used by the mozilla community. one sees them on irc or in bugs. it can be helpful to know exactly what these refer to. note that this is an attempt at describing the current usage of these terms. this usage may change. cutting edge firefox downloads. as a development organization, the mozilla community tends to describe things from the bottom up. so to figure out how to download a cutting edge or bleeding edge or 'beta' version of firefox, you need to look for a "build" (which is developer-speak for the packaged files you can download) of 1.9.1 (the number of the underlying 'platform' called 'gecko' or 'mozilla' that firefox uses). as it turns out there is a platform number for every firefox number, but they are not the same number. firefox 3.0 corresponds t...
...llowed by automatic tests and their main purpose is to check that nothing is horridly wrong with the latest change to the source: what they are doing is to constantly check that the current source can be built into an executable and that that executable 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...
... 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. ...
...e created for every platform for every night. if one has questions about the way a particular nightly was built, the best way to get that information is to download the executable, launch it, and then go to the "about:buildconfig" page, by typing this into the location bar. this should provide all the build flags and configuration settings used for building this executable. nightly builds can be downloaded from https://archive.mozilla.org/pub/firefox/nightly/. if you need to download builds often, most builds can be downloaded semi-automatically and saved with a convenient name using mozdownload. ...

Implementing Download Resuming
this document describes how an embedder or other gecko/necko-using application can implement download resuming. the interfaces in question exist in the form they are described here since gecko 1.8a4 (firefox 1.5, seamonkey 1.0, xulrunner 1.8.0.1). introduction various protocols support getting partial files. this means that if a download was interrupted, it can be resumed from that point on, rather than regetting the whole file. the necko implementations of http 1.1 (rfc 2616) as well as ftp support this feature. not only is the ability to specify a start position important, but it's also important to have some assurance that the file did not change since the initial download attempt. that would lead to a situation where the first part of the file corresponds to the initial version, wh...
...rtant to have some assurance that the file did not change since the initial download attempt. that would lead to a situation where the first part of the file corresponds to the initial version, while the latter part belongs to a different version, leading to an unusable result. the interface resuming is done using the nsiresumablechannel interface. the expected way to use it is this: for all downloads that happen, get the entityid from the channel, and store it for later use. the entity id is what ensures that the file remains unchanged. this can also be used to check whether the download is resumable: if it is not (e.g. ...
...e expected way to use it is this: for all downloads that happen, get the entityid from the channel, and store it for later use. the entity id is what ensures that the file remains unchanged. this can also be used to check whether the download is resumable: if it is not (e.g. the server is not using http 1.1), then accessing this attribute will throw an ns_error_not_resumable exception. if the download gets interrupted, necko will call the stream listener's onstoprequest method with a failure status. (todo: document what webbrowserpersist/exthandler do). the front-end code can then notify the user of this, and offer to resume the download. resuming a download in order to resume a download, you should create a channel as usual (using nsiioservice). then, you can check if it implements nsiresu...
...th an ns_error_entity_changed error code. the front-end may want to offer the user to get the new file from scratch in such a case. resuming not supported in some cases, it's not possible to detect whether the server supports resuming until the user actually tries to resume. in such a case, the stream listener will get an ns_error_not_resumable status. here, too, the front-end may want to offer downloading the entire file from scratch. ...

browser.download.lastDir.savePerSite
browser.download.lastdir.savepersite controls whether the directory preselected in the file picker for saving a file download is being remembered on a per-website (host) base. if set to true, the data is stored as content preference. type:boolean default value:true exists by default: no application support:firefox 11.0 status: active; last updated 2012-02-15 introduction: pushed to nightly on 2011-12-11 bugs: bug 702748 values true (default) the last used directory for the website (host) serving the file for download will be preselected in the file picker. if no download directory for the current website has been stored, browser.download.lastdir will be used. ...
....0 status: active; last updated 2012-02-15 introduction: pushed to nightly on 2011-12-11 bugs: bug 702748 values true (default) the last used directory for the website (host) serving the file for download will be preselected in the file picker. if no download directory for the current website has been stored, browser.download.lastdir will be used. ...
...ated 2012-02-15 introduction: pushed to nightly on 2011-12-11 bugs: bug 702748 values true (default) the last used directory for the website (host) serving the file for download will be preselected in the file picker. if no download directory for the current website has been stored, browser.download.lastdir will be used. ...
... true (default) the last used directory for the website (host) serving the file for download will be preselected in the file picker. if no download directory for the current website has been stored, browser.download.lastdir will be used. ...

Download Rhino
rhino is available for download both in source and compiled form. ...
... rhino is available for download both in source and compiled form. ...
... license rhino is open source. as of release 1.7r4 rhino is available under mpl 2.0. previous versions were released under mpl 1.1/gpl 2.0 license. see rhino license for further information. source in addition to getting the source from the zip files above, the source code for rhino can be found in github at https://github.com/mozilla/r...
... license rhino is open source. ...

Overview of how downloads work - Archive of obsolete content
there are two ways of downloading files in mozilla. one way is to encounter a file with an unknown content type, the other is to choose "save link target as" from the context menu of a link. things like file|save page as, save image as, etc. are all part of the second codepath. this document describes both codepaths (see below for the second one). click on the images to display them "stand-alone" in the browser, which may resize them to fit the browser window. downloads via the helper app service this diagram is an uml sequence diagram, and was created using dia. get the .dia file here: mozilla_downloads.dia downloads via "save link target as" and friends this diagram is an uml sequence diagram, and was created using dia. ...
... display them "stand-alone" in the browser, which may resize them to fit the browser window. downloads via the helper app service this diagram is an uml sequence diagram, and was created using dia. get the .dia file here: mozilla_downloads.dia downloads via "save link target as" and friends this diagram is an uml sequence diagram, and was created using dia. ...

Uploading and Downloading Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. the io object and stream objects can be used to uplo...
...meanwhile you can read this. ...

HTMLIFrameElement.download()
warning: removed in firefox 65. the download() method of the htmliframeelement interface downloads a specified url, storing it at /sdcard/download. syntax var instanceofdomrequest = instanceofhtmliframeelement.download(url, options); returns a domrequest for handling the download request. its request.onsuccess handler handles the success case, and its request.onerror handler handles the failure case. parameters url the url of the file to be downloaded. options optional an options object allowing optional settings to be specified for the download. the available options are: filename: the filename to save the downloaded file as. if this is not specified, the filename used will be the original filename, as specified in the url. ...
...he failure case. parameters url the url of the file to be downloaded. options optional an options object allowing optional settings to be specified for the download. the available options are: filename: the filename to save the downloaded file as. if this is not specified, the filename used will be the original filename, as specified in the url. referrer: specifies a referrer for the downloaded file. if this is not specified there will be no referrer. examples var browser = document.queryselector('iframe'); var request = browser.download(foourl, { filename: 'foo.bin' }); request.onsuccess = function() { console.log("file downladed"); } request.onerror = function() { console.log("download error"); } specification not part of any specification. ...

Rhino downloads archive
see also rhino downloads. you can download binary distributions of rhino from http://ftp.mozilla.org/pub/mozilla.org/js/. release release date change log download link rhino 1.7r4 2012-06-18 new in rhino 1.7r4 rhino1_7r4.zip rhino 1.7r3 2011-05-09 new in rhino 1.7r3 rhino1_7r3.zip rhino 1.7r2 2009-03-22 new in rhino 1.7r2 rhino1_7r2.zip rhino 1.7r1 2008-03-06 new in rhino 1.7r1 rhino1_7r1.zip rhino 1.6r7 2007-08-20 new in rhino 1.6r7 rhino1_6r7.zip rhino 1.6r6 2007-07-30 new in rhino 1.6r6 rhino1_6r6.zip rhino 1.6r5 2006-11-19 same code as 1.6r4, but relicensed under mpl/gpl. rhino1_6r5.zip rhino 1.6r4 2006-09-10 bug 343976 rhin...
... ...

nsIDownloadHistory
docshell/base/nsidownloadhistory.idlscriptable this interface can be used to add a download to history. there is a separate interface specifically for downloads in case embedders choose to track downloads differently from other types of history. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void adddownload(in nsiuri asource, [optional] in nsiuri areferrer, [optional] in prtime astarttime); methods adddownload() adds a download to history. this will also notify observers that the uri asource is visited with the topic ns_link_visited_event_topic if asource has not yet been visited. ...
...1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void adddownload(in nsiuri asource, [optional] in nsiuri areferrer, [optional] in prtime astarttime); methods adddownload() adds a download to history. this will also notify observers that the uri asource is visited with the topic ns_link_visited_event_topic if asource has not yet been visited. void adddownload( in nsiuri asource, in nsiuri areferrer, optional in prtime astarttime optional ); parameters asource the source of the download we are adding to history. this cannot be null. areferrer optional the referrer of source uri. astarttime optional the time the download was started. if the start time is not given, the current time is used. ...

nsIDownloader
netwerk/base/public/nsidownloader.idlscriptable a special implementation of a nsistreamlistener that will make the contents of the stream available as a file. this may utilize the disk cache as an optimization to avoid an extra copy of the data on disk. the resulting file is valid from the time the downloader completes until the last reference to the downloader is released. inherits from: nsistreamlistener last changed in gecko 1.7 method overview void init(in nsidownloadobserver observer, in nsifile downloadlocation); methods init() initialize this downloader. void init( in nsidownloadobserver observer, in nsifile downloadlocation ); parameters observer the nsidownloadobserver to be notified when the download completes. ...
...leased. inherits from: nsistreamlistener last changed in gecko 1.7 method overview void init(in nsidownloadobserver observer, in nsifile downloadlocation); methods init() initialize this downloader. void init( in nsidownloadobserver observer, in nsifile downloadlocation ); parameters observer the nsidownloadobserver to be notified when the download completes. downloadlocation the location where the stream contents should be written. if null, the downloader will select a location and the resulting file will be deleted (or otherwise made invalid) when the downloader object is destroyed. if an explicit download location is specified then the resulting file will not be deleted, and it will be the callers responsibility to keep track of the file, and so on. ...

downloading - Archive of obsolete content
general info specification offline interface event bubbles no cancelable no target applicationcache default action none properties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree). read only. type string the type of event. read only. canbubble boolean does the event normally bubble? read only. cancelable boolean is it possible to cancel the event? read only. ...

DownloadError
properties attribute type description result read only nsresult the result code associated with this error. becausesourcefailed read only boolean indicates an error occurred while reading from the remote location. becausetargetfailed read only boolean indicates an error occurred while writing to the local target. ...

DownloadSource
a downloadsource object represents the source of a download, for example a document or an uri. properties attribute type description url read only string the uri for the download source. isprivate read only boolean indicates whether the download originated from a private window. this determines the context of the network request that is made to retrieve the resource. referrer read only string referrer uri of the download source, or null if no referrer should be sent or the download source is not http. ...

HTMLAnchorElement.download - Web APIs
the htmlanchorelement.download property is a domstring indicating that the linked resource is intended to be downloaded rather than displayed in the browser. the value, if any, specifies the default file name for use in labeling the resource in a local file system. if the name is not a valid file name in the underlying os, the browser will adjust it. note: this value might not be used for download. this value cannot be used to determine whether the download will occur. syntax var dnload = anchorelt.download; anchorelt.download = dnload; specifications specification status comment html living standardthe definition of 'download' in that specification. living standard initial definition. ...

Index - Archive of obsolete content
mozilla, extensions, places no summary! 175 boxes code snippets make the box style="display: block" and the wrapping behavior will occur when the box is resized: 176 canvas code snippets canvas, code snippets, graphics no summary! 177 cookies add-ons, code snippets, cookies, extensions no summary! ...
... 182 drag & drop code snippets 183 embedding svg code snippets no summary! 184 examples and demos from art...
...summary! 177 cookies add-ons, code snippets, cookies, extensions no summary! 178 customizing the download progress bar no summary! 179 delayed execution code snippets no summary! 180 dialogs and prompts add-ons, code snippets, extensions, xul no summary! 181 downloading files code snippets to download a file, create an instance of nsiwebbrowserpersist and call its nsiwebbrowserpersist.saveuri() method, passing it a url to download and an nsifile instance representing the local file name/path. 182 drag & drop code snippets 183 embedding svg code snippets no summary! 184 examples and demos from articles no summary! 185 f...
...And 30 more matches

Python binding for NSS
ified and been further proven in the field a 1.0 release will be made. at that point in time existing users of the python-nss api will need to some elements of their code. a migration script will be provided to assist them. licensing information python-nss is available under the mozilla public license, the gnu general public license, and the gnu lesser general public license. for information on downloading python-nss releases as tar files, see source download. documentation python-nss api documentation the python-nss api documentation for the current release can be viewed at python-nss api documentation. the api documentation is generated from the python-nss source code and compiled modules. you can build it yourself via ./setup.py build_doc. most distributions include the python-nss api do...
...ontains unit tests that also illustrate python-nss usage, however unlike the examples the unit tests are geared towards testing rather than expository illustration. other documentation the doc directory contains other files you may wish to review. how to report a bug python-nss bugs are currently being tracked in the red hat bugzilla system for fedora. you can enter a bug report here. source download area source downloads are maintained here. links to download url for a specific release can be found in the release information section. mozilla source code management (scm) information on march 21, 2013 the nss project switched from using cvs as it's source code manager (scm) to mercurial, also known as hg. all prior cvs information (including release tags) were imported into the new mercuria...
... code using mercurial documentation for more information with working with mercurial. the old deprecated cvs documentation can be found here: getting mozilla source code using cvs. the old deprecated python-nss cvs source code location is mozilla/security/python/nss. release information release 1.0.1 release date 2017-02-28 scm tag pynss_release_1_0_1 source download https://ftp.mozilla.org/pub/mozilla.org/security/python-nss/releases/pynss_release_1_0_1/src/ change log add tls 1.3 cipher suites ssl_cipher_info.py now attempts to enable tls 1.3 fix build issue in setup.py. python-nss can now be build as python wheel, e.g. `pip wheel -w dist .` the following constants were added: ssl.tls_aes_128_g...
...And 18 more matches

Creating a Microsummary - Archive of obsolete content
warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) a microsummary generator is a set of instructions for creating a microsummary from the content of a page. web pages can reference generators via <link rel="microsummary"> elements in their <head> elements. generators can also be independently downloaded and installed by users if they include a list of pages to which they apply. in this tutorial we're going to create a microsummary generator for the spread firefox home page that displays the current firefox download count along with the label fx downloads; for example: 174475447 fx downloads. we'll build the xslt transform sheet that converts that page into its microsummary, learn how to specify that the generator applies to that page, ...
... in each step of revising the transform sheet and other code in this tutorial, new material added will be shown in boldface so you can follow along more easily. ...
...> <generator xmlns="http://www.mozilla.org/microsummaries/0.1"> </generator> giving it a name generators should have name attributes which are arbitrary descriptions of the microsummaries the generator creates. names should be descriptive enough to give users a good idea what information the microsummaries will provide. since our generator will be creating microsummaries displaying the firefox download count, let's give it the name "firefox download count": <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> </generator> adding an xslt transform sheet generators must include an xslt transform sheet (also known as an xslt stylesheet) which transforms the page content into its microsummary. xslt is a pow...
...And 17 more matches

Using XPInstall to Install Plugins - Archive of obsolete content
rs (and netscape/aol browsers based on mozilla such as netscape 7), but because of the similarity between the two installer technologies, it is easy to convert your smartupdate files to xpinstall files. smartupdate involves a digitally signed jar file which contained the software components to be installed as well as a javascript install.js file (called the install script) as the installer logic. ...
...is easy to convert your smartupdate files to xpinstall files. smartupdate involves a digitally signed jar file which contained the software components to be installed as well as a javascript install.js file (called the install script) as the installer logic. downloads and installs would be initiated with a security dialog box naming the certificate authority and the signer. ...
...smartupdate differs from xpinstall in that: xpinstall uses zip files named xpi files (*.xpi) and smartupdate uses jar files (*.jar) unlike a smartupdate jar file, xpi packages do not have to be digitally signed with a code-signing certificate. ...
...And 12 more matches

Add to iPhoto
this extension for mac os x serves as a demonstration of how to use js-ctypes to call mac os x carbon, core foundation, and other system frameworks from an extension written entirely in javascript. note: this extension uses carbon routines, which can no longer be used in firefox add-ons now that firefox is a 64-bit application. you can download an installable version of this extension on amo. once installed, when you right-click on an image, you'll see among the options in the contextual menu an option to "add image to iphoto". choose it, and iphoto will start up (if it's not already running) and import the image. declaring the apis the first thing we have to do is declare the mac os x apis we'll be using. this extension uses a number of methods and data types, as well as constants, from t...
...o will start up (if it's not already running) and import the image. declaring the apis the first thing we have to do is declare the mac os x apis we'll be using. this extension uses a number of methods and data types, as well as constants, from three system frameworks. since a lot of this stuff is repetitive, we'll only look at selected parts of the code to get an idea how things work. you can download the extension and poke through the code inside it if you'd like to see all of it. for the sake of organization, i chose to implement each system framework (and, mind you, i only declare the apis i actually use, not all of them) as a javascript object containing all the types and methods that framework's api. note: in a few cases, this code takes the easy way out by using ctypes.voidptr_t instea...
...s it into our addimagebyurl() method, which will do all the heavy lifting. adding the image to iphoto the addimagebyurl() method handles actually retrieving the image and adding it to iphoto. let's take a look at its code, then explore how it works. this is where all our js-ctypes usage occurs. ...
...And 12 more matches

Localization and Plurals
n will load each property and display the plural forms in a table. selecting a table entry will populate the bottom box with sample uses of the word for some numbers. install pluralform checker v0.3 extension extension input it would be good to keep this list updated with all the words that need plural forms. people using the extension can then copy/paste this input. ...
...in a table. selecting a table entry will populate the bottom box with sample uses of the word for some numbers. install pluralform checker v0.3 extension extension input it would be good to keep this list updated with all the words that need plural forms. people using the extension can then copy/paste this input. ...
...e uses of the word for some numbers. install pluralform checker v0.3 extension extension input it would be good to keep this list updated with all the words that need plural forms. people using the extension can then copy/paste this input. ...
...And 11 more matches

Using the Right Markup to Invoke Plugins - Archive of obsolete content
on outlines. traditionally, the object element has been used differently by microsoft internet explorer and by mozilla-based browsers such as netscape 7. in ie, the object element is used to invoke a plugin that is built on the activex architecture. ...
...the data attribute points to the swf file to play, and the configuration parameters (the param elements) are used in a consistent manner both for ie and for mozilla-based browsers such as netscape 7. in fact, t...
...ve markup to invoke the flash plugin for both ie and netscape 7. however, there are a few caveats that developers ought to bear in mind when using the object element with mozilla-based browsers such as netscape 7 and in ie: caveats if you use one single object element for both browsers (as in the above example), it is not possible to provide a cross-browserobtainment mechanism for streamlined download. you cannot use a codebase attribute to link to a signed cab file for the activex component, since this won't work in mozilla-based browsers such as netscape 7. furthermore, ie's use of the codebase attribute as an obtainment mechanism itself is not strictly correct according to the html 4.01 specification, which says that the codebase attribute should be used to qualify urns referenced by the da...
...And 9 more matches

Index - Web APIs
1394 fontface.fontface() api, css font loading api, constructor, fontface, fonts, reference the fontface() constructor creates a new fontface object. 1395 fontface.display api, css font loading api, fontface, fonts, property, reference, display the display property of the fontface interface determines how a font face is displayed based on whether and when it is downloaded and ready to use. this property is equivalent to the css font-display descriptor. 1396 fontface.featuresettings api, css font loading api, fontface, fonts, property, reference, featuresettings the featuresettings property of the fontface interface retrieves or sets infrequently used font features that are not available from a font's variant properties. it is equivalent to t...
...fontface interface returns a promise that resolves with the current fontface object when the font specified in the object's constructor is done loading or rejects with a syntaxerror. 1406 fontfaceset api, css font loading api, experimental, fonts, interface, reference the fontfaceset interface of the css font loading api manages the loading of font-faces and querying of their download status. 1407 fontfaceset.check() api, css font loading api, experimental, fontfaceset, method, reference a boolean that is true if the font list is available 1408 fontfaceset.load() api, css font loading api, experimental, fontfaceset, method, reference a promise of an array of fontface loaded. the promise is fulfilled when all the fonts are loaded; it is...
...he htmlanchorelement interface represents hyperlink elements and provides special properties and methods (beyond those of the regular htmlelement object interface that they inherit from) for manipulating the layout and presentation of such elements. this interface corresponds to <a> element; not to be confused with <link>, which is represented by htmllinkelement) 1564 htmlanchorelement.download api, html dom, htmlanchorelement, property, reference, download the htmlanchorelement.download property is a domstring indicating that the linked resource is intended to be downloaded rather than displayed in the browser. the value, if any, specifies the default file name for use in labeling the resource in a local file system. if the name is not a valid file name in the underlying os, ...
...And 9 more matches

Cross-browser audio basics - Developer guides
mp4 files typically contain aac encoded audio. you can use type="audio/mp4". (currently, browsers that support mp3 also support mp4 audio). here we define an <audio> element with multiple sources — we do this as not all browsers support the same audio formats. to ensure reasonable coverage, we should specify at...
...ess 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 functionality using the media api (see below). however, that can be a good approach, because the default con...
...oop back to the beginning and start playing again. <audio 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. ...
...And 9 more matches

Updating addons broken by private browsing changes - Archive of obsolete content
, or file a bug if your extension has stopped working due to a change described here and you are having trouble updating it. ...
...your extension has stopped working due to a change described here and you are having trouble updating it. ...
... nsiwebbrowserpersist docs for more information. nsicontentprefservice: getpref, setpref, haspref, hascachedpref, removepref, removegroupedprefs, removeprefsbyname, getprefs, and getprefsbyname all take a required nsiloadcontext argument to indicate the privacy status of the pref in question. use privatebrowsingutils.getprivacycontextfromwindow(win) to obtain it from the relevant window. ...
...And 8 more matches

XULRunner tips - Archive of obsolete content
save the dom_inspector-*.xpi package to a temporary directory unzip the package copy the following files: chrome/inspector.jar to the chrome directory of your xulrunner application components/inspector-cmdline.js to your components directory defaults/preferences/inspector.js to your ...
... the desired name appear in the task bar (not with xulrunner 1.8 however). your application's icon can also be added to this executable with a tool like resource hacker. to change icon of specific window, see window icons. reading command line arguments see chrome: command line and xulrunner:commandline. command line arguments are handled via nsicommandlinehandler. ...
...r 1.8 however). your application's icon can also be added to this executable with a tool like resource hacker. to change icon of specific window, see window icons. reading command line arguments see chrome: command line and xulrunner:commandline. command line arguments are handled via nsicommandlinehandler. ...
...And 8 more matches

Gecko SDK
eral xpcom components which add functionality to the existing platform, whereas xulrunner is a framework which can be used to run standalone or embedded applications based on the mozilla framework. the gecko sdk contains all of the necessary tools and headers for making scriptable npapi plugins including the xpidl compiler/linker and the latest npapi.h. ...
... for gecko versions 2.0 and higher, you must recompile your component for each release as cross-version compatibility is no longer supported. ...
... versions (including beta) here: xulrunner releases (files include "sdk" in the name). the sdk follows the same release schedule as firefox/thunderbird. once the sdk enters beta, it is suitable for building extensions; your component should work with release builds of the sdk without any modifications. due to the rapid release process, it may be a good idea to target the sdk in beta. ...
...And 8 more matches

Index
book provides a list of resources referred to in the tutorial and other links that may be useful to the gecko developer. 109 setting up the gecko sdk needsupdate, tutorial, xpcom this chapter provides basic setup information for the gecko software development kit (sdk) used to build the weblock component in this tutorial. the following four sections tell the developer how to download and organize the gecko sdk and create a new project in which components like weblock can be created. 110 starting weblock xpcom in this chapter, we begin to design and implement the web locking functionality itself. we have already created a module that implements most of the generic component functionality (e.g. registration). this chapter will focus on the functionality tha...
...riptable, offline_resources, xpcom, xpcom interface reference flags the specified key as one that should be cached opportunistically. 335 nsiapplicationupdateservice interfaces, interfaces:scriptable, update service, xpcom, xpcom api reference, xpcom interface reference adds a listener that receives progress and state information about the update that is currently being downloaded. this information is most commonly used to update a user interface that informs the user as to the status of an update. 336 nsiarray interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference an indexed collection of elements. provides basic functionality for retrieving elements at a specific position, searching for elements. indexes are zero-b...
...te a domparser from a privileged script, you can pass parameters to the constructor, more on that below. 512 nsidomprogressevent interfaces, interfaces:scriptable, reference, xmlhttprequest, xpcom interface reference, nsidomprogressevent, progress the nsidomprogressevent is used in the media elements (<video> and <audio>) to inform interested code of the progress of the media download. this implementation is a placeholder until the specification is complete, and is compatible with the webkit progressevent. 513 nsidomserializer dom, interfaces, interfaces:scriptable implemented by: @mozilla.org/xmlextras/xmlserializer;1. to create an instance, use: 514 nsidomsimplegestureevent dom, gestures, interfaces, interfaces:scriptable, needscontent, xp...
...And 8 more matches

Getting started with Svelte - Learn web development
svelte drive your ui or you can incrementally integrate it into an existing application. nevertheless, svelte is particularly appropriate to tackle the following situations: web applications intended for low power devices: applications built with svelte have smaller bundle sizes, which is ideal for devices with slow network connections and limited processing power. less code means less kb to download, parse, execute, and keep hanging around in memory. highly interactive pages or complex visualizations: if you are building data-visualizations that need to display a large number of dom elements, the performance gains that come from a framework with no runtime overhead will ensure that user interactions are snappy and responsive. onboarding people with basic web development knowledge: svelte h...
...good and complete alternative. see command line crash course for more information on these, and on terminal commands in general. ...
...l. also see the following for more information: "what is npm" on nodejs.org "introducing npx" on the npm blog "the easiest way to get started with svelte" on the svelte blog creating your first svelte app the easiest way to create a starter app template is to just download the starter template application. you can do that by visiting sveltejs/template on github or you can avoid having to download and unzip it and just use degit. ...
...And 7 more matches

InstallListener
installlisteners are notified of an addoninstall's progress. they may be registered to hear events from all addoninstalls through addinstalllistener or to a single addoninstall through addlistener. ...
... installlisteners are notified of an addoninstall's progress. they may be registered to hear events from all addoninstalls through addinstalllistener or to a single addoninstall through addlistener. ...
... installlisteners are notified of an addoninstall's progress. they may be registered to hear events from all addoninstalls through addinstalllistener or to a single addoninstall through addlistener. ...
...And 7 more matches

nsIApplicationUpdateService
toolkit/mozapps/update/nsiupdateservice.idlscriptable this interface describes a global application service that handles performing background update checks. it also provides utilities for selecting and downloading update patches. ...
...update/nsiupdateservice.idlscriptable this interface describes a global application service that handles performing background update checks. it also provides utilities for selecting and downloading update patches. ...
...ibes a global application service that handles performing background update checks. it also provides utilities for selecting and downloading update patches. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void adddownloadlistener(in nsirequestobserver listener); astring downloadupdate(in nsiupdate update, in boolean background); void pausedownload(); void removedownloadlistener(in nsirequestobserver listener); nsiupdate selectupdate([array, size_is(updatecount)] in nsiupdate updates, in unsigned long updatecount); attributes attribute type description backgroundchecker nsiupdatechecker the update checker being used for background update checking. read only.
...And 7 more matches

Recording a media element - Web APIs
s returned by navigator.mediadevices.getusermedia(), you can also use an html media element (namely <audio> or <video>) as the source of the mediastream to be recorded. in this article, we'll look at an example that does just that. html content <p>click the "start" button to begin video recording for a few seconds. you can stop the video by clicking the creatively-named "stop" button. the "download" button will download the received data (although it's in a raw, unwrapped form that isn't very useful). </p> <br> let's start by looking at the key bits of the html. there's a little more than this, but it's just informational rather than being part of the core operation of the app. <div class="left"> <div id="startbutton" class="button"> start </div> <h2>preview</h2> <vide...
... stream starts to arrive from the camera, it immediately gets displayed, and the muted attribute is specified to ensure that the sound from the user's microphone isn't output to their speakers, causing an ugly feedback loop. <div class="right"> <div id="stopbutton" class="button"> stop </div> <h2>recording</h2> <video id="recording" width="160" height="120" controls></video> <a id="downloadbutton" class="button"> download </a> </div> on the right we see a stop button and the <video> element which will be used to play back the recorded video. notice that the playback panel doesn't have autoplay set (so the playback doesn't start as soon as media arrives), and it has controls set, which tells it to show the user controls to play, pause, and so forth. below the playback elemen...
...ton"> download </a> </div> on the right we see a stop button and the <video> element which will be used to play back the recorded video. notice that the playback panel doesn't have autoplay set (so the playback doesn't start as soon as media arrives), and it has controls set, which tells it to show the user controls to play, pause, and so forth. below the playback element is a button for downloading the recorded video. <div class="bottom"> <pre id="log"></pre> </div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 2px; border: 1px solid black; } .button { cursor: pointer; display: block; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; back...
...And 7 more matches

Audio and Video Delivery - Developer guides
a (e.g. a <video> element, or document.createelement('video') perhaps?) deliver the media file to the player. html audio <audio controls preload="auto"> <source src="audiofile.mp3" type="audio/mpeg"> <!-- fallback for browsers that don't support mp3 --> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for browsers that don't support audio tag --> <a href="audiofile.mp3">download audio</a> </audio> the code above will create an audio player that attempts to preload as much audio as possible for smooth playback. note: the preload attribute may be ignored by some mobile browsers. for further info see cross browser audio basics (html5 audio in detail) html video <video controls width="640" height="480" poster="initialimage.png" autoplay muted> <source src="videofile...
...we instruct the video to autoplay but to be muted by default. note: the autoplay attribute may be ignored by some mobile browsers. also, the autoplay feature can be controversial when misused. it's strongly recommended that you read the autoplay guide for ...
...further info see <video> element and creating a cross-browser video player. audio and video fallback you can create a more comprehensive fallback using flash. using flashmediaelement.swf is one way. <audio controls> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for non supporting browsers goes here --> <a href="audiofile.mp3">download audio</a> <object width="320" height="30" type="application/x-shockwave-flash" data="flashmediaelement.swf"> <param name="movie" value="flashmediaelement.swf" /> <param name="flashvars" value="controls=true&isvideo=false&file=audiofile.mp3" /> </object> </audio> the process is very similar with video — just remember to set isvideo=true in the flashvars value parameters. more opt...
...And 6 more matches

Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
llow retrieval of the images cross-origin, we can write the code that allows the user to save them to local local storage, just as if they were being served from the same domain the code is running on. the key is to use the crossorigin attribute by setting crossorigin on the htmlimageelement into which the image will be loaded. ...
...in, we can write the code that allows the user to save them to local local storage, just as if they were being served from the same domain the code is running on. the key is to use the crossorigin attribute by setting crossorigin on the htmlimageelement into which the image will be loaded. this tells the browser to request cross-origin access when trying to download the image data. ...
...ws the user to save them to local local storage, just as if they were being served from the same domain the code is running on. the key is to use the crossorigin attribute by setting crossorigin on the htmlimageelement into which the image will be loaded. this tells the browser to request cross-origin access when trying to download the image data. ...
...And 6 more matches

Index of archived content - Archive of obsolete content
using xpcom without chrome using third-party modules (jpm) bootstrapped extensions code snippets alerts and notifications autocomplete bookmarks boxes canvas code snippets cookies customizing the download progress bar delayed execution dialogs and prompts downloading files drag & drop embedding svg examples and demos from articles file i/o finding window handles forms related code snippets html in xul for rich tooltips html to dom isdefaultnamespace ...
...ens common pitfalls communication between html and your extension creating custom firefox extensions with the mozilla build system custom about: urls default preferences deploying a plugin as an extension developing add-ons displaying web content in an extension without security issues downloading json and javascript in extensions enhanced extension installation extension etiquette extension library extension packaging extension samples extension theming guidelines extension versioning, update and compatibility extensions support in seamonkey 2 firefox addons developer guide hiding browse...
...g regular expressions for a microsummary generator dtrace dehydra dehydra frequently asked questions dehydra function reference dehydra object reference installing dehydra using dehydra developing new mozilla features devmo 1.0 launch roadmap download manager improvements in firefox 3 download manager preferences drag and drop drag and drop example drag and drop javascript wrapper drag and drop events editor embedding guide embedding faq embedding mozilla in a java application using javaxpcom error cons...
...And 5 more matches

Theme changes in Firefox 2 - Archive of obsolete content
filename css file details browser/base/searchdialog.xul browser/base/content/searchdialog.css removed from firefox 2. feeds/addfeedreader.xul feeds/addfeedreader.css new file that presents ui for adding a new feed reader. feeds/subscribe.xhtml feeds/subscribe.css new file that presents the ui for subscribing to an rss feed. preferences/downloads.xul - removed from firefox 2. preferences/general.xul - removed from firefox 2. safebrowsing/warning-overlay.xul safebrowsing/browser-protection.css new file containing the overlay that's drawn over the browser when you browse to a suspected phishing site. search/enginemanager.xul enginemanager.css new file containing the ui for the search engin...
...me css code as you added to addbookmark.css. this file styles bookmarksproperties.xul. note: this css may be moved out into a separate file that will be referenced by both files in the future. ...
...hecked="true"] #new-window-button:active #new-window-button[checked="true"] #paste-button:active #print-button:active #reload-button:active #stop-button:active .messagebutton .messageimage .messagetext browsermessage toolbar[iconsize="small"] #bookmarks-button:active toolbar[iconsize="small"] #copy-button:active toolbar[iconsize="small"] #cut-button:active toolbar[iconsize="small"] #downloads-button:active toolbar[iconsize="small"] #history-button:active toolbar[iconsize="small"] #home-button:active toolbar[iconsize="small"] #mail-button toolbar[iconsize="small"] #mail-button:active toolbar[iconsize="small"] #mail-button[disabled="true"] toolbar[iconsize="small"] #mail-button[open="true"] toolbar[iconsize="small"] #new-tab-button:active toolbar[iconsize="small"] #new-window-b...
...And 5 more matches

Application cache implementation overview
atching fallback namespace, the associated fallback entry for it is remembered. the load then continues from the network as a usual load, using http cache. when load of the resource fails fallback steps are performed (see “falling back on a resource load failure” chapter). associating the top level document with offline cache this happens between document load start and the first sub-resource download start and is not about associating nsiapplicationcache object with the channel, but with the document object the load is performed for. until steps described further the document doesn't know anything about its appcache. the association happens in nscontentsink::processofflinemanifest() called from the html parser every time <html> tag has been parsed. processofflinemanifest is an effective imple...
...namespace in that cache we fail the resource load with document_not_found. falling back on a resource load failure when a resource previously matching a fallback namespace failed to load from the network, we perform fallback to the previously remembered fallback entry. it's actually a redirect to the fallback url loading from the associated nsiapplicationcache. updating an existing cache or first download of an offline cache the process of updating or first caching is invoked asynchronously from nscontentsink::processofflinemanifest() using nsofflinecacheupdateservice. the implementation of offline cache update is in /uriloader/prefetch. nsofflinecacheupdateservice is used to collect, schedule and generally take care of updates and its queue. only one update is running at the time. nsofflinecacheu...
...ore of the update process. during initiation the update is first looking for an existing nsiapplicationcache object using nsiapplicationcacheservice::getactivecache() with the manifest url to load from as an argument. when found, this update is processing an “update” and this cache is used as a cache to satisfy each manifest item and the manifest it self load from. otherwise, this is “first download”. then creates a new nsiapplicationcache for the given manifest url using nsiapplicationcacheservice::createapplicationcache(). this new cache version is now pending to be activated after all following long and complicated download process passes. until that it is not used for loading resources from. after these steps the update is in initialized state waiting to be scheduled. when the update i...
...And 5 more matches

Obsolete Build Caveats and Tips
e using visual studio, go to project properties > c/c++ > language > treat wchar_t as built-in type and set it to "yes". from source_code/mercurial mozilla-2.0 (firefox 4.0) code for the firefox 4.0 (gecko 2.0) release lives in releases/mozilla-2.0. ...
...ay take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-2.0/ 20src cd 20src mozilla-1.9.2 (firefox 3.6) code for the firefox 3.6 (gecko 1.9.2) release lives in releases/mozilla-1.9.2. to get this code, do the following: # pull the mozilla source to the folder 192src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-1.9.2/ 192src cd 192src mozilla-1.9.1 (firefox 3.5) code for the firefox 3.5 (gecko 1.9.1) release lives in releases/mozilla-1.9.1. ...
...ake a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-1.9.2/ 192src cd 192src mozilla-1.9.1 (firefox 3.5) code for the firefox 3.5 (gecko 1.9.1) release lives in releases/mozilla-1.9.1. to get this code, do the following: # pull the mozilla source to the folder 191src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-1.9.1/ 191src cd 191src note: starting with gecko 5.0, you can actually build firefox without a .mozconfig file. by default, a similar-to-release build is done. from windows_sdk_versions visual c++ 9 (vs2008) professional/express download and install the windows 7 sdk. note that you need service pack 1--for the express edition it...
...And 5 more matches

Using the Mozilla symbol server
the server functions like microsoft's symbol server so the documentation there can be useful. note that because mozilla release builds are heavily optimized, debugging is not always easy. ...
...our machine. using the symbol server in microsoft visual c++ using the symbol server in windbg the windbg symbol path is configured with a string value delimited with asterisk characters. to use only the mozilla symbol server, add the following entry to your symbol path (note: you can replace c:\symcache\ with any writable directory on your computer, if you'd prefer a different location for downloaded symbols): srv*c:\symcache\*https://symbols.mozilla.org/ set this string as _nt_symbol_path in the environment, using the windbg menus, or by typing the .sympath command. if you would like to get symbols from microsoft's symbol server as well, you should list that first (note: you can replace c:\symcache\ with any writable directory on your computer, if you'd prefer a different location for d...
... this string as _nt_symbol_path in the environment, using the windbg menus, or by typing the .sympath command. ...
...And 5 more matches

HTTP conditional requests - HTTP
http has a concept of conditional requests, where the result, and even the success of a request, can be changed by comparing the affected resources with the value of a validator. such requests can be useful to validate the content of a cache, and sparing a useless control, to verify the integrity of a document, like when resuming a download, or when preventing to lose updates when uploading or modifying a document on the server. principles http conditional requests are requests that are executed differently, depending on the value of specific headers. these headers define a precondition, and the result of the request will be different if the precondition is matched or not. the different behaviors are defined by the method of the request used, and by the set of headers used for a precondition: ...
...of two kinds: the date of last modification of the document, the last-modified date. an opaque string, uniquely identifying each version, called the entity tag, or the etag. comparing versions of the same resource is a bit tricky: depending on the context, there are two kinds of equality checks: strong validation is used when byte to byte identity is expected, for example when resuming a download. weak validation is used when the user-agent only needs to determine if the two resources have the same content. this is even if they are minor differences; like different ads, or a footer with a different date. the kind of validation is independent of the validator used. both last-modified and etag allow both types of validation, though the complexity to implement it on the server side may va...
...ust sends back a 200 ok response, with the new version of the resource, like if the request wasn't conditional and the client uses this new resource (and caches it). besides the setting of the validators on the server side, this mechanism is transparent: all browsers manage a cache and send such conditional requests without any special work to be done by web developers. ...
...And 5 more matches

Microsummary topics - Archive of obsolete content
rosummaryservice component, then call its installgenerator() method, passing it an xml document containing the generator. ...
... createinstance(components.interfaces.nsidomparser); var generatordoc = domparser.parsef...
... xmlns="http://www.mozilla.org/microsummaries/0.1" \ name="firefox download count" \ uri="urn:{835daeb3-6760-47fa-8f4f-8e4fdea1fb16}"> \ <template> \ <transform xmlns="http://www.w3.org/1999/xsl/transform" version="1.0"> \ <output method="text"/> \ <template match="/"> \ <value-of select="id(\'download-count\')"/> \ <text> fx downloads</text> \ </template> \ </transform> \ </template> \ <pages> <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include> </pages> </generator> \ '; var domparser = components.classes["@mozilla.org/xmlextras/domparser;1"]. createinstance(components.interfaces.nsidomparser); var generatordoc = domparser.parsefromstring(generatortext, "text/xml"); var ...
...And 4 more matches

Archived Mozilla and build documentation - Archive of obsolete content
for information on creating extension in earlier browsers. creating a hybrid cd creating a microsummary a microsummary generator is a set of instructions for creating a microsummary from the content of a page. web pages can reference generators via <link rel="microsummary"> elements in their <head> elements. generators can also be independently downloaded and installed by users if they include a list of pages to which they apply. creating a mozilla extension a mozilla extension is an installable enhancement to the mozilla browser that provides additional functionality (for example linky, which adds an item to the context menu for opening multiple links in a document or selection). this tutorial walks y...
... adds an icon to mozilla's status bar showing the current status of the mozilla source code (i.e. whether or not the latest version of the code is compiling successfully and passing tests). the extension will access tinderbox, mozilla.org's webtool for tracking source code status, to get the status of the code. creating a skin for firefox/getting started download the latest version of firefox and install it. be sure to install the dom inspector extension as well. creating a skin for mozilla in order to create a skin for mozilla, you will need to know three things. how to edit images, extract zip files, and how to modify css. mozilla uses standard gif, png, and jpeg images for the buttons and css to style everything else in ...
...in/. developing new mozilla features tips for contributing new features to mozilla. devmo 1.0 launch roadmap comments, ideas, questions and other discussion should be added on the devmo talk:1.0 launch roadmap page. further details on smaller tasks being done are available at user:dria:todo page. see also current events. ...
...And 4 more matches

Web fonts - Learn web development
prerequisites: basic computer literacy, html basics (study introduction to html), css basics (study introduction to css), css text and font fundamentals. ...
...nts. you can use the font stack to specify preferable fonts, followed by web-safe alternatives, followed by the default system font, but this adds overhead in terms of testing to make sure that your designs look ok with each font, etc. web fonts but there is an alternative, which works very well, right back to ie version 6. ...
...rsion 6. web fonts are a css feature that allows you to specify font files to be downloaded along with your website as it is accessed, meaning that any browser that supports web fonts can have exactly the fonts you specify available to it. amazing! the syntax required looks something like this: first of all, you have a @font-face block at the start of the css, which specifies the font file(s) to download: @font-face { font-family: "myfont"; src: url("myfont.woff"); } below this you can then use the font family name specified inside @font-face to apply your custom font to anything you like, as normal: html { font-family: "myfont", "bitstream vera serif", serif; } the syntax does get a bit more complex than this; we'll go into more detail below. there are two important things to bear in ...
...And 4 more matches

Creating hyperlinks - Learn web development
owser goes to another web address (url). note: a url can point to html files, text files, images, text documents, video and audio files, or anything else that lives on the web. if the web browser doesn't know how to display or handle the file, it will ask you if you want to open the file (in which case the duty of opening or handling the file is passed to a suitable native app on the device) or download the file (in which case you can try to deal with it later on). for example, the bbc homepage contains a many links that point not only to multiple news stories, but also different areas of the site (navigation functionality), login/registration pages (user tools), and more. anatomy of a link a basic link is created by wrapping the text or other content, see block level links, inside an <a> ...
... search engines use link text to index target files, so it is a good idea to include keywords in your link text to effectively describe what is being linked to. visual readers skim over the page rather than reading every word, and their eyes will be drawn to page features that stand out, like links. they will find descriptive link text useful. let's look at a specific example: good link text: download firefox <p><a href="https://firefox.com/"> download firefox </a></p> bad link text: click here to download firefox <p><a href="https://firefox.com/"> click here </a> to download firefox</p> other tips: don't repeat the url as part of the link text — urls look ugly, and sound even uglier when a screen reader reads them out letter by letter. don't say "link" or "links to" in the link...
...ver and finds the file that's being requested. with a relative url, the browser just looks up the file that's being requested on the same server. if you use absolute urls where relative urls would do, you're constantly making your browser do extra work, meaning that it will perform less efficiently. linking to non-html resources — leave clear signposts when linking to a resource that will be downloaded (like a pdf or word document), streamed (like video or audio), or has another potentially unexpected effect (opens a popup window, or loads a flash movie), you should add clear wording to reduce any confusion. for example: if you're on a low bandwidth connection, click a link, and then a multiple megabyte download starts unexpectedly. if you don't have the flash player installed, click a l...
...And 4 more matches

TypeScript support in Svelte - Learn web development
cript, you can skip to the next chapter, where we will look at different options for deploying our svelte applications, further resources, and more. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/07-typescript-support or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/07-typescript-support remember to run npm install && npm run dev to start your app in development mode. repl unfortunately, typescript support is not yet available in the repl. typescript: optional static typing for javascript typescript is a superset of javascript that provides features such as optional static typing, classes, int...
...have to do is run the following terminal commands (run them somewhere where you are storing your svelte test projects — it creates a new directory): npx degit sveltejs/template svelte-typescript-app cd svelte-typescript-app node scripts/setuptypescript.js this creates a starter project that includes typescript support, which you can then modify as you wish. ...
...that's what we will do to start porting our application to typescript. ...
...And 4 more matches

Request.cache - Web APIs
values are: default — the browser looks for a matching request in its http cache. if there is a match and it is fresh, it will be returned from the cache. if there is a match but it is stale, the browser will make a conditional request to the remote server. if the server indicates that the resource has not changed, it will be returned from the cache. otherwise the resource will be downloaded from the server and the cache will be updated. if there is no match, the browser will make a normal request, and will update the cache with the downloaded resource. no-store — the browser fetches the resource from the remote server without first looking in the cache, and will not update the cache with the downloaded resource. reload — the browser fetches the resource from the remo...
... will make a normal request, and will update the cache with the downloaded resource. no-store — the browser fetches the resource from the remote server without first looking in the cache, and will not update the cache with the downloaded resource. reload — the browser fetches the resource from the remote server without first looking in the cache, but then will update the cache with the downloaded resource. no-cache — the browser looks for a matching request in its http cache. if there is a match, fresh or stale, the browser will make a conditional request to the remote server. if the server indicates that the resource has not changed, it will be returned from the cache. otherwise the resource will be downloaded from the server and the cache will be updated. if there is no ma...
...cache. if there is a match, fresh or stale, the browser will make a conditional request to the remote server. if the server indicates that the resource has not changed, it will be returned from the cache. otherwise the resource will be downloaded from the server and the cache will be updated. if there is no match, the browser will make a normal request, and will update the cache with the downloaded resource. force-cache — the browser looks for a matching request in its http cache. if there is a match, fresh or stale, it will be returned from the cache. if there is no match, the browser will make a normal request, and will update the cache with the downloaded resource. only-if-cached — the browser looks for a matching request in its http cache. if there is a ...
...And 4 more matches

Media buffering, seeking, and time ranges - Developer guides
this is usually contiguous but if the user jumps about while media is buffering, it may contain holes. ...
...this is usually contiguous but if the user jumps about while media is buffering, it may contain holes. ...
...or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. this article discusses how to build a buffer/seek bar using timeranges, and other features of the media api. buffered the buffered attribute will tell us which parts of the media has been downloaded. it returns a timeranges object, which will tell us which chunks of media have been downloaded. this is usually contiguous but if the user jumps about while media is buffering, it may contain holes. this will work with <audio> or <video>; for now let's consider a simple audio example: <audio id="my-audio" controls src="music.mp3"> </audio> we can access these attributes like so: var myaudio = document.getelementbyid('my-audio'); var bufferedtimeranges = myaudio.buffered; timeranges...
...And 4 more matches

<a>: The Anchor element - HTML: Hypertext Markup Language
or anything else a url can address. content within each <a> should indicate the link's destination. 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. attributes this element's attributes include the global attributes. downloadhtml5 prompts the user to save the linked url instead of navigating to it. can be used with or without a value: without a value, the browser will suggest a filename/extension, generated from various sources: the content-disposition http header the final segment in the url path the media type (from the (content-type header, the start of a data: url, or blob.type for a blob: u...
...osition http header the final segment in the url path the media type (from the (content-type header, the start of a data: url, or blob.type for a blob: url) defining a value suggests it as the filename. / and \ characters are converted to underscores (_). filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary. notes: download only works for same-origin urls, or the blob: and data: schemes. if content-disposition has a different filename than download, the header takes priority. (if content-disposition: inline, firefox prefers the header while chrome prefers download.) href the url that the hyperlink points to. links are not restricted to http-based urls — they can use any url scheme supported by browsers...
...ar devices autodial the number. most operating systems have programs that can make calls, like skype or facetime. websites can make phone calls with registerprotocolhandler, such as web.skype.com. other behaviors include saving the number to contacts, or sending the number to another device. see rfc 3966 for syntax, additional features, and other details about the tel: url scheme. ...
...And 4 more matches

<video>: The Video Embed element - HTML: Hypertext Markup Language
is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback. controlslist the controlslist attribute, when specified, helps the browser select what controls to show on the media element whenever the browser shows its own set of controls (e.g. when the controls attribute is specified). the allowed values are nodownload, nofullscreen and noremoteplayback. use the disablepictureinpicture attribute if you want to disable the picture-in-picture mode (and the control). crossorigin this enumerated attribute indicates whether to use cors to fetch the related image. cors-enabled resources can be reused in the <canvas> element without being tainted. the allowed values are: anonymous sends a cross-origin requ...
...y silenced. its default value is false, meaning that the audio will be played when the video is played. playsinline a boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. note that the absence of this attribute does not imply that the video will always be played in fullscreen. poster a url for an image to be shown while the video is downloading. if this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame. preload this enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played. it may have one of the following valu...
...ntended to provide a hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played. it may have one of the following values: none: indicates that the video should not be preloaded. metadata: indicates that only video metadata (e.g. length) is fetched. auto: indicates that the whole video file can be downloaded, even if the user is not expected to use it. empty string: synonym of the auto value. the default value is different for each browser. the spec advises it to be set to metadata. note: the autoplay attribute has precedence over preload. if autoplay is specified, the browser would obviously need to start downloading the video for playback. the specification does not force the brows...
...And 4 more matches

Signing an XPI - Archive of obsolete content
e. introduction this article describes how to sign your own firefox extensions with a code-signing certificate on a windows platform. it was developed from the linux article so you want to sign your xpi package? by mozdev group's pete collins. this article is a mirror of the original, with minor reformatting, some new info and all links updated in march 2010. get network security services 1. download the latest network security services (nss) package from the mozilla ftp site at https://ftp.mozilla.org/pub/mozilla.or.../nss/releases/. for windows, you'll want the nss-3.11.4.zip package in the nss_3_11_4_rtm/msvc6.0/winnt5.0_opt.obj/ folder - it is by 2010 the only one with the right binaries. 2. extract the contents of the archive file to a local folder. in my case it's c:\apps\nss-3.11.4\ ...
...ces (nss) package from the mozilla ftp site at https://ftp.mozilla.org/pub/mozilla.or.../nss/releases/. for windows, you'll want the nss-3.11.4.zip package in the nss_3_11_4_rtm/msvc6.0/winnt5.0_opt.obj/ folder - it is by 2010 the only one with the right binaries. 2. extract the contents of the archive file to a local folder. in my case it's c:\apps\nss-3.11.4\ get netscape portable runtime 1. download the latest netscape portable runtime from the mozilla ftp site: http://ftp.mozilla.org/pub/mozilla.org/nspr/releases/. for windows you'll want the nspr-4.6.zip package in the v4.6/winnt5.0_opt.obj/ folder. 2. extract the contents of the archive file to a local folder. in my case it's c:\apps\nspr-4.6\ add path add the nss tools bin/ and lib/, and the nspr lib/ directories to the system path. y...
...hority. don't forget to delete the certificate from mozilla firefox once you've finished testing firefox 1.5: from the tools menu choose options->advanced->security->view certificates->authorities firefox 1.0: from the tools menu choose options->advanced->certificates->manage certificates->authorities press the import button. navigate to the folder containing x509.cert and choose it. in the downloading certificate dialog, tick trust this ca to identify software developers. and press the view button if you wish to examine the certificate more closely. press the ok button and you'll see your new certificate in the list of authorities. 2. attempt to install the signed extension either drag and drop or browse to and download the signed xpi. when the mozilla firefox software installation dialo...
...And 3 more matches

List of Mozilla-Based Applications - Archive of obsolete content
celtx media tool cenzic hailstorm vulnerability assessment and management tool uses gecko chatzilla irc client standalone version (xulrunner) chromium and google chrome web browser uses mozilla nss and npapi libraries chromeless browser with html-based interface classilla mozi...
...evelopment platform the ajax toolkit framework, standard widget toolkit and eclipsemozilla projects make use of mozilla elixon wcms/xul web content management system fully remote xul wcms (no need to install extensions). ...
... ajax toolkit framework, standard widget toolkit and eclipsemozilla projects make use of mozilla elixon wcms/xul web content management system fully remote xul wcms (no need to install extensions). ...
...And 3 more matches

Index - Archive of obsolete content
to perform basic manipulations on a document, and then demonstrates working with anonymous xbl content using mozilla-specific methods. ...
...es | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] 426 getting file information file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] 427 io file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] 428 moving, copying and deleting files file and stream guide: [ nsiscriptableio | ac...
...ng file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] 428 moving, copying and deleting files file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] 429 reading from files file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] 430 toc file and stream guide: [ nsiscriptableio | accessing files |...
...And 3 more matches

Application Update - Archive of obsolete content
mation, setup branding for your application as described here: xulrunner tips icons the updater process for linux systems requires updater.png to be in your <application folder>/icons/, see https://bugzilla.mozilla.org/show_bug.cgi?id=706846 preferences // whether or not app updates are enabled pref("app.update.enabled", true); // this preference turns on app.update.mode and allows automatic download and // install to take place. we use a separate boolean toggle for this to make // the ui easier to construct. pref("app.update.auto", true); // defines how the application update service notifies the user about updates: // // aum set to: minor releases: major releases: // 0 download no prompt download no prompt // 1 download no prompt download no p...
...lean toggle for this to make // the ui easier to construct. pref("app.update.auto", true); // defines how the application update service notifies the user about updates: // // aum set to: minor releases: major releases: // 0 download no prompt download no prompt // 1 download no prompt download no prompt if no incompatibilities // 2 download no prompt prompt // // see chart in nsupdateservice.js.in for more details // pref("app.update.mode", 1); // if set to true, the update service will present no ui for any event. pref("app.update.silent", false); // update service url: // you do not need to use all the %var% parameters. use what you need, %product%,%version%,%build_id%,%channel% for example pref("app.update.url", "https://yours...
..."an update is available" page of the update wizard. pref("app.update.url.details", "http://yourserver.net/yourpage"); // user-settable override to app.update.url for testing purposes. ...
...And 3 more matches

Test your skills: Selectors - Learn web development
the aim of this task is to help you check your understanding of selectors in css. note: you can try out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. selectors one without changing the html, use css to do the following things: make h1 headings blue. give h2 headings a blue background and white text. cause text wrapped in a span to have a font-size of 200%. ...
...the assessment or further help section at the bottom of this page. selectors one without changing the html, use css to do the following things: make h1 headings blue. give h2 headings a blue background and white text. cause text wrapped in a span to have a font-size of 200%. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. selectors two without changing the html, make the following changes to the look of the content in this example: give the element with an id of special a yellow background. give the element with a class of alert a 1px grey border. if the element with a class of alert also has a class of stop, make the backg...
...ent with an id of special a yellow background. give the element with a class of alert a 1px grey border. if the element with a class of alert also has a class of stop, make the background red. if the element with a class of alert also has a class of go, make the background green. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. selectors three in this example, try making the following changes without adding to the html. style links, making the link-state orange, visited links green, and remove the underline on hover. make the first element inside the container font-size: 150% and the first line of that element red. stripe every o...
...And 3 more matches

Multimedia: Images - Learn web development
this article looks at optimizing image and video to improve web performance. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to learn about the various image formats, their impact on performance, and how to reduce the impact of images on overall page load time. ...
...ontent. you need to be considerate of data usage. many people are on capped data plans or even pay-as-you-go where they are literally paying by the megabyte. this isn't an emerging market problem either. as of 2018, 24% of the united kingdom still use pay-as-you-go. you also need to be considerate of memory as many mobile devices have limited ram. it's important to remember that when images are downloaded, they need to be stored in memory. optimizing image delivery despite being the largest consumer of bandwidth, images load asynchronously so the visitor can see the page as they download and therefore, their impact on perceived performance is far lower than many expect. however, images are mostly used for content, so it's important that a visitor can see them as soon as possible for a good exp...
...many javascript libraries can implement this for you, such as lazysizes, and browser vendors are working on a native lazyload attribute that is currently in the experimental phase. ...
...And 3 more matches

AddonManager
not being found), null is passed back instead. addonlistcallback() a callback that is passed an array of addons void addonlistcallback( in addon addons[] ) parameters addons the array of addons passed back from the asynchronous request constants addoninstall states constant description state_available an install that is waiting to be started. state_downloading an install that is in the process of being downloaded. state_checking an install that is checking for updated information. state_downloaded an install that has finished downloading and is ready to install. state_download_failed an install that failed to download. state_installing an install that is in the process of being installed. s...
...e process of being installed. state_installed an install that has successfully been installed. state_install_failed an install that has failed to install. state_cancelled an install that has been canceled. addoninstall errors constant description error_network_failure a network error occurred. error_incorrect_hash the downloaded file did not match the expected hash. error_corrupt_file the file appears to be corrupt. error_file_access there was an error accessing the filesystem. error_signedstate_required the addon must be signed and isn't. update check reasons constant description update_when_user_requested an update check performed at the explicit req...
...e_when_periodic_update an update check performed automatically in the background. update_when_addon_installed an update check performed when a new add-on has been installed. update status values constant description update_status_no_error no error was encountered. update_status_timeout the update check timed out. update_status_download_error there was an error while downloading the update information. update_status_parse_error the update information was malformed in some way. update_status_unknown_format the update was not in any known format. update_status_security_error the update information was not correctly signed or there was an ssl error. auto update values constant...
...And 3 more matches

Localization formats
content for localization is presented in the following manner: msgid "coming soon" msgstr "bientôt disponible" where the value in the "" of the msgid is the english content, and the value in the "" of the msgstr is the translation. msgstr can be longer translations than just the exact above. ...
...esented in the following manner: msgid "coming soon" msgstr "bientôt disponible" where the value in the "" of the msgid is the english content, and the value in the "" of the msgstr is the translation. msgstr can be longer translations than just the exact above. for example, below is the entire introduction used for a certificate that was presented to those who downloaded firefox during the download day campaign. ...
...e. for example, below is the entire introduction used for a certificate that was presented to those who downloaded firefox during the download day campaign. ...
...And 3 more matches

Plug-in Basics - Plugins
object elements with markup more congenial to gecko included as children of the parent object element. ...
...this nesting is quite...
...this nesting is quite common in the use of object elements, and lets you avoid code forking for different browsers. ...
...And 3 more matches

HTTP Index - HTTP
conditional requests conditional requests, guide, http http has a concept of conditional requests, where the result, and even the success of a request, can be changed by comparing the affected resources with the value of a validator. such requests can be useful to validate the content of a cache, and sparing a useless control, to verify the integrity of a document, like when resuming a download, or when preventing to lose updates when uploading or modifying a document on the server. 45 http cookies advertising, browser, cookies, cookies article, guide, http, history, javascript, privacy, protocols, server, storage, web development, data, request, tracking an http cookie (web cookie, browser cookie) is a small piece of data that a server sends to the user's web brows...
...ontrols whether the current document is allowed to use the web midi api. when this policy is enabled, the promise returned by navigator.requestmidiaccess() will reject with a domexception. 139 feature-policy: oversized-images directive, feature-policy, http, reference the http feature-policy header oversized-images directive controls whether the current document is allowed to download and display large images. 140 feature-policy: payment directive, feature policy, feature-policy, http, payment request api, payments api, reference the http feature-policy header field's payment directive controls whether the current document is allowed to use the payment request api. when this policy is disabled, the paymentrequest() constructor will throw a securityerror. ...
..., reference, xmlhttprequest the http feature-policy header sync-xhr directive controls whether the current document is allowed to make synchronous xmlhttprequest requests. 145 feature-policy: unoptimized-images directive, feature-policy, http, image, reference the http feature-policy header unoptimized-images directive controls whether the current document is allowed to download and display unoptimized images. 146 feature-policy: unsized-media directive, feature-policy, http, reference the http feature-policy header unsized-media directive controls whether the current document is allowed to change the size of media elements after the initial layout is complete. 147 feature-policy: usb directive, feature-policy, http, reference, vibrati...
...And 3 more matches

Setting Up a Development Environment - Archive of obsolete content
ues and properties beginning with "-moz"). it has an add-on system similar to the one in firefox, and there are some komodo extensions that provide additional help in extension development. that is more than what you can get with most other editors, so we recommend you to give it a try. all of our examples are handled with komodo edit, so if you see a .kpf or .komodoproject file in an example you download, this is a komodo project file. we recommend git and github for source control, but any decent software configuration management system will do. to package xpi files, we use make. we chose make because this is the same system used by mozilla to build firefox, and it is available for all operating systems. make is a default tool in most unix-based systems. it can be installed on mac os x as pa...
...se make. we chose make because this is the same system used by mozilla to build firefox, and it is available for all operating systems. make is a default tool in most unix-based systems. it can be installed on mac os x as part of the xcode tools package, and on windows with cygwin. in cygwin installations you'll have to explicitly check the make and zip utilities from the long list of packages to download and install. also make sure that make is in the executable system path. after setting up make, you should be able to open a command line window, run "make -ver", and get the installed version of make as output. we recommend you set up make in your system, since our examples come with all the necessary files to build and install the resulting xpi using this tool. it will save you some packaging ...
...ake in your system, since our examples come with all the necessary files to build and install the resulting xpi using this tool. it will save you some packaging time. or you can create an equivalent system using batch, ant or whatever you prefer. ultimately you can just compress the contents of the src directory using any zip or archive tool and get a similar result. build system let's start by downloading the project used to build the second version of hello world, from the exercise in the last section. hello world 2 project. unzip the file anywhere you want. inside the helloworld2 directory, you'll see two directories: bin and src. the bin directory should be empty. this is where all the resulting build files will be created, and where you'll find the extension xpi file once you get it to bu...
...And 2 more matches

Building accessible custom components in XUL - Archive of obsolete content
lt-in controls than html. there is generally no need to build your own xul tab bar or treeview. firefox ships with a tabbox element and a tree element, and these elements are fully accessible out-of-the-box. however, if you are building custom controls in xul, you may need to use dhtml accessibility techniques to ensure that your custom controls are equally accessible. a super-simple spreadsheet download stage-1.zip install stage-1.xpi to build our xul spreadsheet, we'll use three built-in xul controls: a single grid element to contain the other elements and position them in rows and columns. description elements for each row and column header. label elements for each cell in the spreadsheet. the xul markup is straightforward. we define the grid, then define the headers for each row (numbered ...
...>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 accessibility techniques in firefox 1.5, we can declare the role of each element in our spreadsheet. the grid element is really a spreadsheet. each label element is really a cell within the spreadsheet. each description element is really a row or column header within the spreadsheet. you can find a list of all the supported roles in firefox 1...
...ocus individual cells, nor do we have a way to navigate the spreadsheet with the keyboard. but that's it as far as dhtml accessibility goes. all you need to do is declare two namespaces and assign the appropriate role attributes, and firefox handles exposing the elements properly to the underlying assistive technology. further reading table of supported roles and states in firefox focus issues download stage-3.zip install stage-3.xpi the next step on the road to an accessible spreadsheet is the focus problem. in html documents, you can make any element focusable with the tabindex attribute. in xul, there is no tabindex attribute; to make a xul element focusable, you need to use a mozilla-specific css property, -moz-user-focus: normal. <code> grid.spreadsheet { border: thin solid; -moz-user...
...And 2 more matches

The Implementation of the Application Object Model - Archive of obsolete content
uch to help the layman understand exactly what it does. rdf provides a very general mechanism for representing relationships between different disparate types of data. the relationships between data are represented as a directed labeled graph structure. the data itself can be fed in from any number of different sources (e.g., from a local file system, from your bookmarks file, or from some remote downloadable rdf file), and can then be combined into a single graph. ok, so after that paragraph many of you probably still don't understand what rdf does, so here's the short and sweet version. rdf can suck up data from different places (like your bookmarks and history or another web site), and it can combine them. this gives you a feature called aggregation, the ability to put completely different kind...
...mbine them. this gives you a feature called aggregation, the ability to put completely different kinds of data into the same place. for example, the traditional bookmarks tree view could contain anything from mail messages to local files to maps of other sites. this same ability to aggregate data leads to another capability of rdf. because rdf can suck up data from a remote location (e.g., from a downloadable rdf file), and also suck up data from a local source, it can take the remote data and combine it with local data. you'll often hear people refer to this as rdf's local/remote merging capability. this capability is desirable for two reasons. what is local/remote merging good for? the first reason to have local/remote merging is that a remote file must be able to reference local data and hav...
...and combine it with local data. you'll often hear people refer to this as rdf's local/remote merging capability. this capability is desirable for two reasons. what is local/remote merging good for? the first reason to have local/remote merging is that a remote file must be able to reference local data and have it merged in with the information that it specified. an example of this feature is a downloadable file that describes the user's main bookmarks folder. because the file lives remotely, it can be updated whenever the owner of the web site sees fit. a site admin could add new bookmarks to the file, and then the user would pick them up. however, in order for this to work, the local bookmarks have to be merged in with the remote bookmarks specified by the site. the second reason to have local...
...And 2 more matches

Windows Media in Netscape - Archive of obsolete content
both activexobject and geckoactivexobject can take wmplayer.ocx.7 as an argument to create the control if windows media player 7...
... both activexobject and geckoactivexobject can take wmplayer.ocx.7 as an argument to create the control if windows media player 7 or 9 are present. unlike using the progid as an argumen...
...layer 6x and later. it is important to note that in netscape 7.1, only the classid for windows media player is supported, and no other control can be created. the various param elements that can be used and the functionalities behind them is best described by the windows media 9 series sdk. in netscape 7.1, the codebase attribute of the object element cannot be used to initiate a digitally signed download of the windows media control, if it is not present on the machine. the section below on scripting the control covers more on how to detect if the windows media player has not been successfully created. scripting the windows media player control the number of methods and properties that are exposed by the windows media player, including the events that the player throws for handling by scripts in...
...And 2 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
et. domain names are used in urls to identify to which server belong a specific webpage. the domain name consists of a hierarchial sequence of names (labels) separated by periods (dots) and ending with an extension. 120 domain sharding dns, glossary, http, reference, web performance, latency browsers limit the number of active connections for each domain. to enable concurrent downloads of assets exceeding that limit, domain sharding splits content across multiple subdomains. when multiple domains are used to serve multiple assets, browsers are able to download more resources simultaneously, resulting in a faster page load time and improved user experience. 121 dominator codingscripting, glossary in graph theory, node a dominates node b if every path from t...
... 315 parameter codingscripting, glossary, javascript a parameter is a named variable passed into a function. parameter variables are use...
... 315 parameter codingscripting, glossary, javascript a parameter is a named variable passed into a function. ...
...And 2 more matches

Test your skills: HTML accessibility - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. html accessibility 1 in this task we will test your understanding of text semantics, and why they are good for accessibility. ...
...xt semantics, and why they are good for accessibility. the given text is a simple information panel with action buttons, but the html is really bad. we want you to update it use appropriate semantic html. you don't need to worry too much about recreating the exact same look and text sizing, as long as the semantics are good. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. html accessibility 2 in the second task, you have a form containing three input fields. you need to: semantically associate the input with their labels. assume that these inputs will be part of a larger form, and wrap them in an element that associates them all together as a single related group. give the ...
...three input fields. you need to: semantically associate the input with their labels. assume that these inputs will be part of a larger form, and wrap them in an element that associates them all together as a single related group. give the group a description/title that summarises all of the information as personal data. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. html accessibility 3 in this task you are required to turn all the information links in the paragraph into good, accessible links. the first two links just go to regular web pages. the third link goes to a pdf, and it's large — 8mb. the fourth link goes to a word document, so the user will need some kind...
...And 2 more matches

Test your skills: Grid Layout - Learn web development
this aim of this task is to get you working with css grid layout, and test that you understand how a grid and grid items behave. you will be working through three small tasks which use different elements of the material you have just covered. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. grid layout one in this task you should create a grid into which the four child elements will auto-place. the grid should have three columns sharing the available space equally, and a 20-pixel gap between the column and row tracks. try updati...
... further help section at the bottom of this page. grid layout one in this task you should create a grid into which the four child elements will auto-place. the grid should have three columns sharing the available space equally, and a 20-pixel gap between the column and row tracks. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. grid layout two in this example we already have a grid defined. by editing the css rules for the two child elements, cause them to span over several grid tracks each; the second item should overlay the first as in the image below. try updating the live code below to recreate the finished example: addition...
...the css rules for the two child elements, cause them to span over several grid tracks each; the second item should overlay the first as in the image below. try updating the live code below to recreate the finished example: additional questions: can you now cause the first item to display on top without changing the order of items in the source? for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. grid layout three there are four direct children in this grid; the starting point has them displayed using auto-placement. use the grid-area and grid-template-areas properties to lay the items out as shown in the image. try updating the live code below to recreate the finished example: for assessment or ...
...And 2 more matches

Tips for authoring fast-loading HTML pages - Learn web development
or broadband content and can lead to dramatic improvements even for your visitors with the fastest connections. tips reduce page weight page weight is by far the most important factor in page-load performance. reducing page weight through the elimination of unnecessary whitespace and comments, commonly known as minimization, and by moving inline script and css into external files, can improve download performance with minimal need for other changes in the page structure. tools such as html tidy can automatically strip leading whitespace and extra blank lines from valid html source. other tools can "compress" javascript by reformatting the source or by obfuscating the source and replacing long identifiers with shorter versions. minimize the number of files reducing the number of files refere...
...e. tools such as html tidy can automatically strip leading whitespace and extra blank lines from valid html source. other tools can "compress" javascript by reformatting the source or by obfuscating the source and replacing long identifiers with shorter versions. minimize the number of files reducing the number of files referenced in a web page lowers the number of http connections required to download a page, thereby reducing the time for these requests to be sent, and for their responses to be received. depending 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...
... so, in particular, for pages which are generated dynamically, a little research on this subject is beneficial. it can be somewhat involved, but it will save a lot in page requests on pages which would normally not be cacheable. more information: http conditional get for rss hackers http 304: not modified http etag on wikipedia caching in http optimally order the components of the page 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 bein...
...And 2 more matches

Test your skills: Multimedia and embedding - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...to: add the path to the audio file to an appropriate attribute to embed it on the page. the audio is called audio.mp3, and it is in a folder inside the current folder called media. add an attribute to make browsers display some default controls. add some appropriate fallback text for browsers that don't support <audio>. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. multimedia and embedding 2 in this task we want you to mark up a slightly more complex video player, with multiple sources, subtitles, and other features besides. you need to: add an attribute to make browsers display some default controls. add some appropriate fallback text for browsers that don't support ...
...play some default controls. add some appropriate fallback text for browsers that don't support <video>. add multiple sources, containing the paths to the video files. the files are called video.mp4 and video.webm, and are in a folder inside the current folder called media. let the browser know in advance what video formats the sources point to, so it can make an informed choice of which one to download ahead of time. give the <video> a width and height equal to its intrinsic size (320 by 240 pixels). make the video muted by default. display the text tracks contained in the media folder, in a file called subtitles_en.vtt, when the video is playing. you must explicitly set the type as subtitles, and the subtitle language to english. try updating the live code below to recreate the finished e...
...And 2 more matches

Test your skills: Conditionals - Learn web development
the aim of this skill test is to assess whether you've understood our making decisions in your code — conditionals article. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version). conditionals 1 in this task you are provided with two variables: season — contains a string that says what the...
... that gives the user an appropriate message about the season. if not, it should assign a generic string to response that tells the user we don't know what season it is. to finish off, you should then add another test that checks whether season contains the string "winter", and again assigns an appropriate string to response. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. conditionals 2 for this task you are given three variables: machineactive — contains an indicator of whether the answer machine is switched on or not (true/false) score — contains your score in an imaginary game. this score is fed into the answer machine, which provides a response to indicate how well y...
...e. needs improvement." score of 40 to 69 — "you did a passable job, not bad!" score of 70 to 89 — "that\'s a great score, you really know your stuff." score of 90 to 100 — "what an amazing score! did you cheat? are you for real?" try updating the live code below to recreate the finished example. after you've entered your code, try changing machineactive to true, to see if it works. ...
...And 2 more matches

Test your skills: Strings - Learn web development
this aim of this skill test is to assess whether you've understood our handling text — strings in javascript and useful string methods articles. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version). strings 1 in our first strings task, we start off small. you already have half of a famous quo...
...the example inside a variable called quoteend. concatenate the two strings together to make a single string containing the complete quote. save the result inside a variable called finalquote. you'll find that you get an error at this point. can you fix the problem with quotestart, so that the full quote displays correctly? try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. strings 2 in this task you are provided with two variables, quote and substring, which contain two strings. we would like you to: retrieve the length of the quote, and store it in a variable called quotelength. find the index position where substring appears in quote, and store that value in a variable cal...
...quotelength. find the index position where substring appears in quote, and store that value in a variable called index. use a combination of the variables you have and available string properties/methods to trim down the original quote to "i do not like green eggs and ham.", and store it in a variable called revisedquote. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. strings 3 in the next string task, you are given the same quote that you ended up with in the previous task, but it is somewhat broken! we want you to fix and update it, like so: change the casing to correct sentence case (all lowercase, except for upper case first letter). store the new quote in a variable ...
...And 2 more matches

What is JavaScript? - Learn web development
led at run time, rather than ahead of time. there are advantages to both types of language, but we won't discuss them right now. server-side versus client-side code you might also hear the terms server-side and client-side code, especially in the context of web development. client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser. in this module we are explicitly talking about client-side javascript. server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. examples of popular server-side web languages include php, python, ruby, asp.net and... javascript! javascript can also be used as a server-side language, for example...
...s "domcontentloaded" event, which signifies that the html body is completely loaded and parsed. the javascript inside this block will not run until after that event is fired, therefore the error is avoided (you'll learn about events later in the course). in the external example, we use a more modern javascript feature to solve the problem, the defer attribute, which tells the browser to continue downloading the html content once the <script> tag element has been reached. <script src="script.js" defer></script> in this case both the script and the html will load simultaneously and the code will work. note: in the external case, we did not need to use the domcontentloaded event because the defer attribute solved the problem for us. we didn't use the defer solution for the internal javascript ex...
... the html dom has been loaded. on larger sites with lots of javascript, this can cause a major performance issue, slowing down your site. async and defer there are actually two modern features we can use to bypass the problem of the blocking script — async and defer (which we saw above). let's look at the difference between these two. scripts loaded using the async attribute (see below) will download the script without blocking rendering the page and will execute it as soon as the script finishes downloading. you get no guarantee that scripts will run in any specific order, only that they will not stop the rest of the page from displaying. it is best to use async when the scripts in the page run independently from each other and depend on no other script on the page. for example, if you have...
...And 2 more matches

Multimedia: video - Learn web development
we have already taken a look at optimizing images. this article looks at optimizing video to improve web performance. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. ...
...in three different formats at 10mb, 12mb, and 13mb, declare the smallest first and the largest last: <video width="400" height="300" controls="controls"> <!-- webm: 10 mb --> <source src="video.webm" type="video/webm" /> <!-- mpeg-4/h.264: 12 mb --> <source src="video.mp4" type="video/mp4" /> <!-- ogg/theora: 13 mb --> <source src="video.ogv" type="video/ogv" /> </video> the browser downloads the first format it understands. the goal is to offer smaller versions ahead of larger versions. with the smallest version, make sure that the most compressed video still looks good. there are some compression algorithms that can make video look (bad) like an animated gif. while a 128 kb video may seem like it could provide a better user experience than a 10 mb download, a grainy gif-like video ...
...ou might be able to remove audio during export and compression. if not, a free utility called ffmpeg can do it for you. this is the ffmpeg command string to remove audio: ffmpeg -i original.mp4 -an -c:v copy audiofreeversion.mp4 video preload the preload attribute has three available options: auto|metadata|none. the default setting is metadata. these settings control how much of a video file downloads with page load. you can save data by deferring download for less popular videos. setting preload="none" results in none of the video being downloaded until playback. it delays startup, but offers significant data savings for videos with a low probability of playback. offering more modest bandwidth savings, setting preload="metadata" may download up to 3% of the video on page load. this is a us...
...And 2 more matches

Introduction to automated testing - Learn web development
to run everything you need to run automatically at a certain point in your build process. for example, this could be every time you save a file, or at some other point. inside this section we'll look at how to automate task running with node and gulp, a beginner-friendly option. setting up node and npm most tools these days are based on node.js, so you'll need to install it from nodejs.org: download the installer for your system from the above site. (if you already have node and npm installed, jump to point 4) install it like you would any other program. note that node comes with node package manager (npm), which allows you to easily install packages, share your own packages with others, and run useful scripts on your projects. once the install completes, test that node is installed by typ...
...ll packages, share your own packages with others, and run useful scripts on your projects. once the install completes, test that node is installed by typing the following into the terminal, which returns the installed versions of node and npm: node -v npm -v if you've got node/npm already installed, you should update them to their latest versions. to update node, the most reliable way is to download and install an updated installer package from their website (see link above). to update npm, use the following command in your terminal: npm install npm@latest -g note: if the above command fails with permissions errors, fixing npm permissions should sort you out. to start using node/npm-based packages on your projects, you need to set up your project directories as npm projects. this is...
...ssion give someone else a url so they can observe the test remotely. copy text/notes to a remote clipboard. take a screenshot. test in full screen mode. once you stop the session, you'll return to the manual tests tab, where you'll see an entry for each of the previous manual sessions you started. clicking on one of these entries shows more data for the session. in here you can download any screenshots you took, watch a video of the session, view data logs, and more. note: this is already very useful, and way more convenient than having to set up all these emulators and virtual machines by yourself. advanced: the sauce labs api sauce labs has a restful api that allows you to programmatically retrieve details of your account and existing tests, and annotate tests with furthe...
...And 2 more matches

Implementing feature detection - Learn web development
nd not as cool-looking. let's implement something that demonstrates this, although we'll keep it simple for now. start by making local copies of our css-feature-detect.html, flex-layout.css, float-layout.css, and basic-styling.css files. save them in a new directory. we will add the html5 shiv to our example too so that the html5 semantic elements will style properly in older versions of ie. ...
...bove. you might as well use a dedicated feature detection library however, as it makes things much easier. the mother of all feature detection libraries is modernizr, and it can detect just about everything you'll ever need. let's look at how to use it now. when you are experimenting with modernizr you might as well use the development build, which includes every possible feature detection test. ...
...raries is modernizr, and it can detect just about everything you'll ever need. let's look at how to use it now. when you are experimenting with modernizr you might as well use the development build, which includes every possible feature detection test. download this now by: clicking on the development build link. clicking the big pink build button on the page that comes up. clicking the top download link in the dialog box that appears. ...
...And 2 more matches

Package management basics - Learn web development
ght not work right out of the box and you will likely need some modern tooling to bundle your code and dependencies together when they are released on the web. a bundle is the term that’s generally used to refer to a single file on your web server that contains all the javascript for your software — typically compressed as much as possible to help reduce the time it takes to get your software downloaded and displayed in your visitors’ browser. in addition, what happens if you find a better tool that you want to use instead of the current one, or a new version of your dependency is released that you want to update to? this is not too painful for a couple of dependencies, but in larger projects with many dependencies this kind of thing can become really challenging to keep track of. it makes ...
..., but stepping back from npm itself, a package manager is a system that will manage your project dependencies. the package manager will provide a method to install new dependencies (also referred to as "packages"), manage where packages are stored on your file system, and offer capabilities for you to publish your own packages. in theory you may not need a package manager and you could manually download and store your project dependencies, but a package manager will seamlessly handle installing and uninstalling packages. if you didn't use one, you'd have to manually handle: finding all the correct package javascript files. checking them to make sure they don't have any known vulnerabilities. downloading them and putting them in the correct locations in your project. writing the code to inc...
...ied on webpack with a certain configuration, you'd want to ensure that if you installed that project on another machine or returned to it much later on, the configuration would still work. if a different version of webpack was installed, it may not be compatible. to mitigate this dependencies are installed locally to a project. to see local dependencies really shine, all you need to do is try to download and run an existing project — if it works and all the dependencies work right out of the box, then you have local dependencies to thank for the fact that the code is portable. note: npm is not the only package manager available. a successful and popular alternative package manager is yarn. yarn resolves the dependencies using a different algorithm that can mean a faster user experience. there...
...And 2 more matches

How to get a stacktrace with WinDbg
those cases with windbg on windows. (to get a stacktrace for thunderbird or some other product, substitute the product name where ever you see firefox in this instructions.) requirements to get such a stacktrace you need to install the following software: debugging tools for windows microsoft distributes the debugging tools for windows for free, those include windbg which you will need here. download it from install debugging tools for windows. (you'll want the 32-bit version, even if you are using a 64-bit version of windows) then install it, the standard settings in the installation process are fine. a firefox nightly or release you need a firefox version for which symbols are availables from the mozilla symbol server to use with windbg. you can use any official nightly build or released ...
...is the easiest method to avoid mistakes some commands start with a period (.) or a pipe character (|), which is required. (the keystroke for a pipe character on us keyboards is shift+\) submit the log file on a bug or via the support site, even if nothing seems to happen during the debug process start debugging now that firefox is opened in the debugger, you need to configure your windbg to download symbols from the mozilla symbol server. to load the symbols, enter the three commands below, pressing enter after each one. (more details are available at using the mozilla symbol server.) .sympath srv*c:\symbols*http://symbols.mozilla.org/firefox;srv*c:\symbols*http://msdl.microsoft.com/download/symbols .symfix+ c:\symbols .reload /f now wait for the symbols to download. this may take some ti...
...w, pressing enter after each one. (more details are available at using the mozilla symbol server.) .sympath srv*c:\symbols*http://symbols.mozilla.org/firefox;srv*c:\symbols*http://msdl.microsoft.com/download/symbols .symfix+ c:\symbols .reload /f now wait for the symbols to download. this may take some time depending on your connection speed; the total size of the mozilla and microsoft symbols download is around 1.4gb. windbg will show "busy" at the bottom of the application window until the download is complete. once the download is complete, you need to configure windbg to examine child processes, ignore a specific event caused by flash player, and record a log of loaded modules. you will also want to open a log file to save data you collect. to do this, enter these four commands, pressing e...
...And 2 more matches

AddonInstall
this can be canceled at any time with the cancel() method. method overview void install() void cancel() void addlistener(in installlistener listener) void removelistener(in installlistener listener) properties attribute type description name string the name of the add-on being installed. version string the version of the add-on being installed. ...
...ng the version of the add-on being installed. iconurl string the icon of the add-on being installed. releasenotesuri nsiuri the uri of release notes for this install. type string the type of the add-on being installed. state integer the state of the installation. error integer if an error has been encountered during the download or install this will hold the error code. sourceuri nsiuri the uri that the add-on is being installed from. file nsifile the file that the add-on is being installed from. this may be null if the add-on is coming from the internet and has yet to be downloaded. progress integer the progress of any necessary downloads. maxprogress integer t...
...or code. sourceuri nsiuri the uri that the add-on is being installed from. file nsifile the file that the add-on is being installed from. this may be null if the add-on is coming from the internet and has yet to be downloaded. progress integer the progress of any necessary downloads. maxprogress integer the expected size of any necessary downloads or -1 if unknown. certificate nsix509cert if the add-on to be installed is signed this is the certificate of the signer. only available after downloading is complete. certname string if the add-on to be installed is signed this is the simple display name of the signer. existingaddon addon the addon that this install will update. may be null if it isn'...
...And 2 more matches

Application Translation with Mercurial
build instructions. this is only necessary once. mozillabuild must be installed into an absolute file path without whitespaces, else it will break. file comparison program for the translation, it is recommend to use file comparison program to compare the english file (containing the new texts) with the file of your locale (which is still missing the new strings). this example uses winmerge: download and install it. a comparison of alternatives (e.g. for linux and mac os) is available on wikipedia. file and text editor for editing individual files a text editor can be a better choice than a file comparion program, e.g. because the file is new and everything has to be translated, the file is too customized to compare it to the english one, or special functionality is required (e.g. bookmarki...
...r or any other tool in which you can attach different kind of states to the individual texts to translate. the firefox extension scrapbook is used in this guide. install it into your default firefox profile (you will have more than one profile when following this guide). getting the current texts in english and your locale obtaining the english texts with the source code get the source code by downloading the following file: firefox desktop or firefox for android: download the mozilla-<branch>.hg file (e.g. mozilla-aurora.hg) from https://ftp.mozilla.org/pub/mozilla.org/firefox/bundles/ the file is not small, but after initially downloading it, you only need to download the latest changes in the future. thunderbird, lightning or seamonkey: download the comm-<branch>.hg file (e.g. comm-auror...
...ter, and then the directory structure like on windows, but using slashes (/) instead of backslashes (\). so let's go to c:\mozilla by typing cd /c/mozilla/ create a new directory for the source code: mkdir mozilla-aurora initialize the new directory as new repository: hg init mozilla-aurora go into the new directory: cd mozilla-aurora unpack the source code: hg unbundle /path/to/the/downloaded/mozilla-aurora.hg this can take some time, mostly depending on the performance of the hard drive. extract the files: hg update obtaining the texts of your localization go back to the parent folder of mozilla-aurora: cd .. find the localization repository for your branch and language on http://hg.mozilla.org/ e.g. for aurora and german (language code 'de'), it is http://hg.mozilla.o...
...And 2 more matches

Localizing with Mercurial
install mercurial from the command line by issuing one of the following commands. choose the appropriate command for your distribution and make sure to run as root. # debian/ubuntu $ apt-get install mercurial # fedora $ yum install mercurial # gentoo $ emerge mercurial # arch linux $ pacman -s mercurial # opensolaris $ pkg install sunwmercurial if you prefer a graphical interface, you can download and install mercurialeclipse here. did it work? open a terminal window and enter hg --version. if you see a message about the version of mercurial (e.g. mercurial distributed scm (version 1.3.1)), you have installed mercurial successfully! more details for more details on installing hg on linux systems, refer to the instructions on mercurial's download page. mercurial on windows with window...
...and enter hg --version. if you see a message about the version of mercurial (e.g. mercurial distributed scm (version 1.3.1)), you have installed mercurial successfully! more details for more details on installing hg on linux systems, refer to the instructions on mercurial's download page. mercurial on windows with windows, you have a couple of install options: for a command line interface, download and install mozillabuild package. this will not only install hg, but also all the tools required to build mozilla products on windows. trust us, you'll want this eventually. for a graphical interface, you may want to install tortoisehg, which integrates with your windows explorer shell. it also installs the command line utility. part of the command line hg install for windows involves making s...
...ample. did it work? go to start > run... type cmd.exe and click ok. a new shell window should appear. type hg --version in the new shell window. if you see a message about the version of mercurial (e.g. ...
...And 2 more matches

Mozilla Web Developer FAQ
d is not required and some other browsers show the title attribute in the browser status bar, for example. at this point some people feel compelled to post a “but ie…” rant in the newsgroups or in bugzilla. please note that mac ie 5 behaves in the same way as mozilla when it comes to the alt and title attributes. windows ie also shows the title attribute in a tooltip. ...
... some other browsers show the title attribute in the browser status bar, for example. at this point some people feel compelled to post a “but ie…” rant in the newsgroups or in bugzilla. please note that mac ie 5 behaves in the same way as mozilla when it comes to the alt and title attributes. windows ie also shows the title attribute in a tooltip. ...
...es. windows ie also shows the title attribute in a tooltip. does mozilla support downloadable fonts? downloadable fonts in truetype and opentype formats (.ttf and .otf) are supported since firefox 3.5. the fonts have to be served from the same origin (protocol, host, port) as the content that uses them unless the fonts are served with the appropriate cross-origin resource sharing http headers. downloadable fonts in the eot format are not supported. if you use downloadable fonts, please make sure the fonts have the right unicode mappings and the content uses the right unicode characters. the past practice of displaying non-latin text by assigning non-latin glyphs to latin code points breaks copying and pasting, breaks searching on the page, breaks indexing by search engines and breaks readabili...
...And 2 more matches

nsIMsgFolder
n nsimsgdatabase msgdatabase); nsimsgdatabase getdbfolderinfoanddb(out nsidbfolderinfo folderinfo); nsimsgdbhdr getmessageheader(in nsmsgkey msgkey); boolean shouldstoremsgoffline(in nsmsgkey msgkey); boolean hasmsgoffline(in nsmsgkey msgkey); nsiinputstream getofflinefilestream(in nsmsgkey msgkey, out pruint32 offset, out pruint32 size); void downloadmessagesforoffline(in nsisupportsarray messages, in nsimsgwindow window); nsimsgfolder getchildwithuri(in acstring uri, in boolean deep, in boolean caseinsensitive); void downloadallforoffline(in nsiurllistener listener, in nsimsgwindow window); void enablenotifications(in long notificationtype, in boolean enable, in boolean dbbatching); boolean iscommandenabled...
... lastmessageloaded nsmsgkey unique id to the folder, it is not a globally unique identifier. will return nsmsgkey_none if there was no last message loaded. note: does not persist across sessions. uri acstring readonly: old nsifolde...
... lastmessageloaded nsmsgkey unique id to the folder, it is not a globally unique identifier. will return nsmsgkey_none if there was no last message loaded. note: does not persist across sessions. uri acstring readonly: old nsifolder properties and methods. ...
...And 2 more matches

nsIUpdate
toolkit/mozapps/update/nsiupdateservice.idlscriptable an interface that describes an object representing an available update to the current application - this update may have several available patches from which one must be selected to download and install, for example we might select a binary difference patch first and attempt to apply that, then if the application process fails fall back to downloading a complete file-replace patch. this object also contains information about the update that the front end and other application services can use to learn more about what is going on. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsiupdatepatch getpatchat(in uns...
... boolean true if the update is a security update. if the update is a security update, a more seriously-worded user interface message is used to present the update to the user. licenseurl astring the url to an html fragment that contains a license for the update. if this is specified, the user is shown the license file after they choose to install the update, and they must agree to it before the download begins. name astring the name of the update, in the form "application_name update_version" patchcount unsigned long the number of patches supplied by this update. read only. platformversion astring the toolkit version of this update. previousappversion astring the application version prior to the application being updated. selectedpatch nsiupdatepatch the currently selected patch for ...
...ice that supplied this update. showneverforversion boolean whether to show the "no thanks" button in the update prompt. this allows the user to never receive a notification for that specific update version again. showprompt boolean whether to show the update prompt which requires user confirmation when an update is found during a background update check. this overrides the default setting to download the update in the background. showsurvey boolean whether to show the survey link in the update prompt. the url must also be present in the app.update.surveyurl preference. state astring the state of the selected patch: "downloading" the update is being downloaded. "pending" the update is ready to be applied. "applying" the update is in the process of being applied. "succeeded" the update h...
...And 2 more matches

Thunderbird Binaries
described below are three types of generally available thunderbird packages - releases, early preview releases, and nightly builds (including trunk development builds) - and their downloaded locations. additionally, ad-hoc packages called try builds are made available on an as-needed basis to allow for testing of certain patches, and are typically announced in related bug reports. releases thunderbird releases have been extensively tested and are made available for anyone to download and use it. ...
...these builds are made to get feedback from testers and extension developers. ...
...kages called try builds are made available on an as-needed basis to allow for testing of certain patches, and are typically announced in related bug reports. releases thunderbird releases have been extensively tested and are made available for anyone to download and use it. thunderbird current release can be downloaded from https://www.mozilla.org/thunderbird/ past thunderbird releases can be downloaded from https://releases.mozilla.org/pub/thunderbird/releases/ early preview releases whilst writing new versions of thunderbird, developers release preview versions, known as betas. these builds are made to get feedback from testers and extension developers. note: while beta builds have had some testing, they should be considered preview only and should not be used in a production environment.
...And 2 more matches

Service Worker API - Web APIs
nular control over everything. note: service workers make heavy use of promises, as generally they will wait for responses to come through, after which they will respond with a success or failure action. the promises architecture is ideal for this. registration a service worker is first registered using the serviceworkercontainer.register() method. ...
...espond with a success or failure action. the promises architecture is ideal for this. registration a service worker is first registered using the serviceworkercontainer.register() method. if successful, your service worker will be downloaded to the client and attempt installation/activation (see below) for urls accessed by the user inside the whole origin, or inside a subset specified by you. ...
...ice worker is first registered using the serviceworkercontainer.register() method. if successful, your service worker will be downloaded to the client and attempt installation/activation (see below) for urls accessed by the user inside the whole origin, or inside a subset specified by you. download, install and activate at this point, your service worker will observe the following lifecycle: download install activate the service worker is immediately downloaded when a user first accesses a service worker–controlled site/page. after that, it is updated when: a navigation to an in-scope page occurs. ...
...And 2 more matches

@font-face - CSS: Cascading Style Sheets
t; the font can be loaded from either a remote server or a locally-installed font on the user's own computer. syntax @font-face { font-family: "open sans"; src: url("/fonts/opensans-regular-webfont.woff2") format("woff2"), url("/fonts/opensans-regular-webfont.woff") format("woff"); } descriptors font-display determines how a font face is displayed based on whether and when it is downloaded and ready to use. font-family specifies a name that will be used as the font face value for font properties. font-stretch a font-stretch value. since firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-stretch: 50% 200%; font-style a font-style value. since firefox 61 (and in other modern browsers) th...
...e types are: "woff", "woff2", "truetype", "opentype", "embedded-opentype", and "svg". unicode-range the range of unicode code points to be used from the font. description if the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. otherwise, the font resource specified using the url() function is downloaded and used. by allowing authors to provide their own fonts, @font-face makes it possible to design content without being limited to the so-called "web-safe" fonts (that is, the fonts which are so common that they're considered to be universally available). the ability to specify the name of a locally-installed font to look for and use makes it possible to customize the font beyond the basics whi...
...hey're considered to be universally available). the ability to specify the name of a locally-installed font to look for and use makes it possible to customize the font beyond the basics while making it possible to do so without relying on an internet connection. it's common to use both url() and local() together, so that the user's installed copy of the font is used if available, falling back to downloading a copy of the font if it's not found on the user's device. the @font-face at-rule may be used not only at the top level of a css, but also inside any css conditional-group at-rule. font mime types format mime type truetype font/ttf opentype font/otf web open font format font/woff web open font format 2 font/woff2 notes ...
...And 2 more matches

Live streaming web audio and video - Developer guides
are relaying a file that is being created on the fly and has no pre-determined start or end. key differences between streamed and static media in this case, we are using static media to describe media that is represented by a file, whether it be an mp3 or webm file. this file sits on a server and can be delivered — like most other files — to the browser. this is often known as a progressive download. live streamed media lacks a finite start and end time as rather than a static file, it is a stream of data that the server passes on down the line to the browser and is often adaptive (see below). usually, we require different formats and special server-side software to achieve this. adaptive streaming one of the main priorities for live streaming is to keep the player synchronized with the s...
...apability, we need to use formats that facilitate this. live streaming formats generally allow adaptive streaming by breaking streams into a series of small segments and making those segments available at different qualities and bit rates. streaming audio and video on demand streaming technology is not used exclusively for live streams. ...
... streaming audio and video on demand streaming technology is not used exclusively for live streams. it can also be used instead of the traditional progressive download method for audio and video on demand: there are several advantages to this: latency is generally lower so media will start playing more quickly adaptive streaming makes for better experiences on a variety of devices media is downloaded just in time which makes bandwidth usage more efficient streaming protocols while static media is usually served over http, there are several protocols for serving adaptive streams; let's take a look at the options. http for now, http is by far the most commonly supported protocol used to transfer media on demand or live. rtmp real time messaging protocol (rtmp) is a proprietary protocol...
...And 2 more matches

async function - JavaScript
st regardless of the order of rejection of the promises, and the error will always occur within the configured promise chain, enabling it to be caught in the normal way. rewriting a promise chain with an async function an api that returns a promise will result in a promise chain, and it splits the function into many parts. ...
... will always occur within the configured promise chain, enabling it to be caught in the normal way. rewriting a promise chain with an async function an api that returns a promise will result in a promise chain, and it splits the function into many parts. ...
... return await promisevalue vs. return...
...And 2 more matches

Web audio codec guide - Web media technologies
the processing of audio data to encode and decode it is handled by an audio codec (coder/decoder). in this article, we look at audio codecs used on the web to compress and decompress audio, what their capabilities and use cases are, and offer guidance when choosing audio codecs to use for your content. ...
...w much compression do you need to achieve? let's consider a few common scenarios to get a feel for the decision-making process. example: music for streaming for streaming music, you want to select a codec that minimizes bandwidth usage as much as possible while introducing as few artifacts as possible into the audio through compression. this is necessary because the rate at which the music is downloaded needs to be no greater than the amount of bandwidth available on the network, and ideally there should be room left for network speed fluctuations and use of the network by other applications. unless there's a specific need for lossless compression, or the network bandwidth is guaranteed to be high enough to support it, a lossy compression scheme is a good choice. which one you choose depends ...
...eats and exceptions. be sure to refer to the compatibility tables before committing to a given media format. based on this, aac is likely your best choice if you can only support one audio format. of course, if you can provide multiple formats (for example, by using the <source> element within your <audio> and <video> elements), you can avoid many or all of those exceptions. example: music for download music being downloaded by the user can be compressed to a larger overall file size than streamed music, since (unlike when streaming) it doesn't matter if the download speed is slower than the playback speed of the media. that means you can consider using lossy compression at higher bit rates, which results in larger files but with less loss of fidelity. or you can choose a lossless format. the ...
...And 2 more matches

jpm - Archive of obsolete content
s: jpm [command] [options] jpm supports the following global options: -h, --help - show a help message and exit -v, --version - print the jpm version number --addon-dir - directory for your source code, defaulting to the current directory installation jpm is distributed with the node package manager npm. installing npm there are two ways to get npm. download and install node.js from nodejs.org. node.js includes npm. or, if you have a package manager like apt, install npm via that. for example, in an ubuntu or debian terminal window, enter sudo apt-get install nodejs nodejs-legacy npm. to test your installation, run: /usr/bin/env node -v if you get an error message saying /usr/bin/env: node: no such file or directory and you have installed node...
...arizing the available jpm commands. note that unlike cfx, jpm is available in every command prompt you start, as long as you installed it with the --global flag. install a different version of firefox as of firefox 48, it is not possible to use unsigned add-ons (i.e. any add-on which you are in the process of developing) in the branded release or beta versions of firefox. thus, you will need to download and install a different version of firefox. assuming you don't want an old version of firefox, your options are firefox developer edition, firefox nightly, unbranded beta, or unbranded release. when testing your add-on, you will need to use the -b option to jpm run. see selecting a browser version. problems? if you do not see this, ask for help. sdk users and project team members discuss probl...
...passing the xpi file in the --xpi argument, like this: jpm sign --api-key ${jwt_issuer} --api-secret ${jwt_secret} --xpi <xpi file> alternatively, you can omit the --xpi argument, in which case jpm sign will generate an xpi from the current directory (or --addon-dir). jpm sign --api-key ${jwt_issuer} --api-secret ${jwt_secret} this submits an xpi it to the addons.mozilla.org signing api, then downloads a signed xpi to the working directory if it passes validation. to get values for --api-key and --api-secret, you will need to create api credentials on addons.mozilla.org. on the amo key management page, these values are labeled "jwt_issuer" and "jwt_secret". here are some possible outcomes of running the sign command: your add-on passed validation, was signed by mozilla, and a new signed x...
...ned xpi to the working directory if it passes validation. to get values for --api-key and --api-secret, you will need to create api credentials on addons.mozilla.org. on the amo key management page, these values are labeled "jwt_issuer" and "jwt_secret". here are some possible outcomes of running the sign command: your add-on passed validation, was signed by mozilla, and a new signed xpi was downloaded to your working directory. your add-on failed validation, was not signed, and you got a link to a detailed report. after fixing the validation errors, you can run the command again. you add-on passed validation but it could not be automatically signed because your add-on is listed. listed add-ons will require a manual review before they can be signed. your add-on at this exact version number...

The Essentials of an Extension - Archive of obsolete content
have an id that is unique. there are two accepted standards for add-on ids. one is the email-like format in the hello world example, which should be something like <project-name>@<yourdomain>. the other standard practice is to use a generated uuid string, which is extremely unlikely to be duplicated. unix-based systems have a command line tool called uuidgen that generates uuids. there are also downloadable tools for all platforms that generate them. the enclosing brackets are just 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.moz...
...rea. toolbars, menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome. taken from chrome registration. in other words, the chrome is everything you see in firefox. all firefox windows can be seen as having two parts: (1) the chrome and (2) possibly a content area, like the one that displays web pages in a firefox tab. windows like the downloads window are pure chrome. most of the code for an extension resides in the chrome folder, just like in the hello world example. as we saw in the directory structure of the unpacked extension, the chrome is composed of 3 sections: content, locale and skin. the 3 are necessary for most extensions. if we open the chrome.manifest file (again, any text editor will do), we see that the same 3 sections ...
... the right path after content in the uri. skin and locale files work in the same way, and you don't need to specify skin names or locale names. so, to access the dtd file in the hello world extension, the chrome path is chrome://xulschoolhello/locale/browseroverlay.dtd. firefox knows what locale to look for. here's an interesting experiment. open a new firefox tab, type chrome://mozapps/content/downloads/downloads.xul on your location bar and press enter. surprised? you just opened the downloads window in a firefox tab! you can access any chrome file by just typing its uri in the location bar. this can come in handy if you want to inspect script files that are part of firefox, other extensions, or your own. most of these files are opened as text files, with the exception of xul files, which are ...
...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/browser.xul ch...

Creating a dynamic status bar extension - Archive of obsolete content
atic status bar panel in the firefox status bar, by dynamically updating its content with information fetched from the web every few minutes. specifically, this sample displays a stock quote in the status bar, and, when you mouse over it, displays a tooltip containing more detailed information about the stock. ...
... its content with information fetched from the web every few minutes. specifically, this sample displays a stock quote in the status bar, and, when you mouse over it, displays a tooltip containing more detailed information about the stock. concepts covered in the previous sample won't be reiterated here; instead, refer to the downloadable sample code or to the previous sample for further details. ...
...n fetched from the web every few minutes. specifically, this sample displays a stock quote in the status bar, and, when you mouse over it, displays a tooltip containing more detailed information about the stock. concepts covered in the previous sample won't be reiterated here; instead, refer to the downloadable sample code or to the previous sample for further details. download the sample you can download a copy of this sample to look over, or to use as the basis for your own extension. ...
...see install manifests for details. ...

Microsummary XML grammar reference - Archive of obsolete content
about the xml grammar used to build microsummary generators, describing each element and their attributes. for an introduction to how to create a microsummary, read the article creating a microsummary. ...
...osummary. ...
...erator created in the creating a microsummary tutorial: <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> <template> <transform xmlns="http://www.w3.org/1999/xsl/transform" version="1.0"> <output method="text"/> <template match="/"> <value-of select="id('download-count')"/> <text> fx downloads</text> </template> </transform> </template> <pages> <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include> </pages> </generator> namespace the namespace uri for microsummary generator xml documents is: http://www.mozilla.org/microsummaries/0.1 all elements in a microsummary generator document should be in this namespace except the descendants of the <template> e...
... name (required) a descriptive, human-readable name for the microsummary created by the generator. uri (optional) a valid uri uniquely identifying the generator. only relevant for generators dynamically created by firefox code and extensions. generators installed from the web via nssidebar::addmicrosummarygenerator are identified by the remote url from which they were downloaded, and firefox ignores the value of this attribute for them. child elements: <template> (required) defines how to transform pages into their microsummaries. <pages> (required) identifies the set of pages that the generator is able to summarize. <update> (optional) specifies how frequently firefox should update the microsummaries. the <template> element...

Install Wizards (aka: Stub Installers) - Archive of obsolete content
scripts to extract files and take other install actions. the same xpinstall engine is used by the browser and the stub installers on all platforms. the xpinstall engine source resides at: <http://lxr.mozilla.org/seamonkey/sou...xpinstall/src/> what do we mean by stub installer? the install wizards used to install mozilla are lightweight stubs targeted to be around 200 kb disk footprint. ...
...xpinstall/src/> what do we mean by stub installer? ...
...around 200 kb disk footprint. users download the stub installers, choose which packages to install, choose the destination directory for the installation, and select from various other options. subsequently, when users click the "install" button the install wizard downloads and installs only the selected software packages. this saves low-bandwidth users considerable time since they do not need to download software packages they may not be interested in. (the stub installer accomplishes this by downloading the xpinstall engine along with the selected software packages. ...
...utton the install wizard downloads and installs only the selected software packages. this saves low-bandwidth users considerable time since they do not need to download software packages they may not be interested in. (the stub installer accomplishes this by downloading the xpinstall engine along with the selected software packages. ...

Custom toolbar button - Archive of obsolete content
es. save the file. open the file in firefox (for example, by dragging it and dropping it in firefox, or by choosing file – open file... from firefox's menu bar). from firefox's menu bar, choose view – character encoding – unicode (utf-8). check that the text you typed looks ok with this setting. if your text editor does not support utf-8, search the internet for a better one that you can download. optional tools you can optionally use any image editor to customize the images. you can optionally use a jar tool or zip tool to package your button as a cross-platform installable (xpi) for other people to install and use. making a button there are ten easy steps. when you have completed all the steps, you will have a structure like this in your profile directory: the profile direct...
... function () { alert("just testing") }, } there is nothing to customize for now. save the file. the next section in this tutorial contains examples of code that you can use to make your button do something useful. explanation: this file specifies what happens when you press the button. it uses the javascript programming language, together with features provided by the application. 9. download the button image. get a context menu for the image that you see here (for example, by right-clicking it). choose save image as... from the context menu, and save it in the same chrome directory as the files you have just created. ensure that the name of the saved file is: button-1.png explanation: the image is in four parts. the normal button is at the top left. underneath it is a darker ver...
...he context menu, and save it in the same chrome directory as the files you have just created. ensure that the name of the saved file is: button-1.png explanation: the image is in four parts. the normal button is at the top left. underneath it is a darker version, used when the mouse pointer is over the button. the parts on the right are used when you set the toolbar to use small buttons. 10. download the extension image. get a context menu for the image that you see here (for example, by right-clicking it). choose save image as... from the context menu, and save it in the same directory as the files you have just created. ensure that the name of the saved file is: icon.png explanation: this image is displayed in the application's extension manager window. testing your new button resta...
... 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 some more images that you can download and use: restart the application and customize the toolbar to find the new button. you can repeat these steps to add as many buttons 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@do...

Creating an Installer - Archive of obsolete content
t. in particular plugin developers should see how to package a plugin as an extension. « previousnext » this section will describe packaging a xul application into an installer. xpinstall packages mozilla provides a mechanism which can be used to package xul windows, scripts, skins and other files into single file installers. you can place this installer file somewhere for users to download. a simple script can be used to have the package downloaded and installed. this mechanism is called xpinstall (cross platform install). xpinstall installers are packaged into jar files. inside the jar file, you can add all the various files that you want to have installed. in addition, installers should contain an install script (a file named install.js) which can be used to script the installat...
.... the jar file installers typically have the extension .xpi (pronounced zippy) to distinguish them from other archives. the installers will be usually used to install mozilla components such as new skins, plugins and packages. there are several steps involved in launching an installer and installing components. these are described step by step below. create a web page from which the user can download the software to be installed. this page will contain an install trigger which is a small piece of script which launches the install. the user is presented with a dialog which indicates the package being installed. it is possible for the install trigger to launch multiple installers. in this case, they will be presented in a list. the user may choose to continue or cancel. if the user chooses to...
...age will contain an install trigger which is a small piece of script which launches the install. the user is presented with a dialog which indicates the package being installed. it is possible for the install trigger to launch multiple installers. in this case, they will be presented in a list. the user may choose to continue or cancel. if the user chooses to continue, the installer xpi file is downloaded. a progress bar is displayed to the user during this process. the file install.js is extracted from the install archive and executed. this script will call install functions which will indicate which files from the archive should be installed. once the script is complete, the new package has been installed. if multiple packages are being installed, their scripts will run in sequence. instal...
...f multiple packages are being installed, their scripts will run in sequence. install triggers as indicated above, the install process is started by an install trigger. this involves the use of the special global object installtrigger. it contains a number of methods which can be used to start an installation. you can use this object in local or remote content, meaning that it is suitable for a download from a web site. let's create an example install trigger. this involves the use of the function installtrigger.install(). this function takes two arguments, the first is a list of packages to install, and the second is a callback function which will be called when the installation is complete. here is an example: function donefn ( name , result ){ alert("the package " + name + " was installed...

Visual-js game engine - Game development
rranty of merchantability or fitness for a particular purpose. in no event shall the author of this software be held liable for data loss, damages, loss of profits or any other kind of loss while using or misusing this software. external licences in this project : webcam nui control is under : created by romuald quantin. ...
...ject : webcam nui control is under : created by romuald quantin. ...
...am communication is under : creator muaz khan www.muazkhan.com mit license - www.webrtc-experiment.com/licence socket.io.js - http://socket.io/download/ ( also implemented intro build.js ) webgl2 based on : copyright (c) 2014 tappali ekanathan keestu (keestu@gmail.com) gnu general public license obj loader : https://github.com/frenchtoast747/webgl-obj-loader textures download from http://textures.com more texture downloads http://www.textures4photoshop.com/ female body v3.blend this file has been released by andrescuccaro under the following license: creative commons attribution 3.0 about gui for windows (canvas2d part only) : windows gui application version 1.0 (using visual-js 0.9 lib) important : you will need net 4.5.2 minimum also redistribu...
...for now there's no sprite and frame by frame animation methods). small engine config . some option in aspect view like npm install ... npm install typescript npm i clean-webpack-plugin --save-dev npm i html-webpack-plugin --save-dev possible fix : npm i webpack --save-dev npm i extract-text-webpack-plugin --save-dev fix code format : tslint -c tslint.json 'src/**/*.ts' --fix download project link : download link from bitbucket. ...

Test your skills: CSS and JavaScript accessibility - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. css accessibility 1 in the first task you are presented with a list of links. ...
...nks, or to tell which one the user is focussed on. we'd like you to assume that the existing ruleset with the a selector is supplied by some cms, and that you can't change it — instead, you need to create new rules to make the links look and behave like links, and for the user to be able to tell where they are in the list. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. css accessibility 2 in this next task you are presented with a simple bit of content — just headings and paragraphs. there are accessibility issues with the colors and sizing of the text; we'd like you to: 1. explain what the problems are, and what the guidelines are that state the acceptable values for col...
...that state the acceptable values for color and sizing. 2. select new values for the color and font-size that fix the problem. 3. update the css with these new values to fix the problem. 4. test the code to make sure the problem is now fixed. explain what tools or methods you used to select the new values and test the code. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. javascript accessibility 1 in our final task here, you have some javascripting to do. we have a simple app that presents a list of animal names. clicking one of the animal names causes a further description of that animal to appear in a box below the list. but it is not very accessible — in its current state...
...l task here, you have some javascripting to do. we have a simple app that presents a list of animal names. clicking one of the animal names causes a further description of that animal to appear in a box below the list. but it is not very accessible — in its current state you can only operate it with the mouse. we'd like you to add to the html and javascript to make it keyboard acessible too. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting p...

Test your skills: WAI-ARIA - Learn web development
this aim of this skill test is to assess whether you've understood our wai-aria basics article. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. wai-aria 1 in our first aria task, we present you with a section of non-semantic markup, which is obviously meant to be a list. ...
... — see the assessment or further help section at the bottom of this page. wai-aria 1 in our first aria task, we present you with a section of non-semantic markup, which is obviously meant to be a list. assuming you are not able to change the elements used, how can you allow screenreader users to recognize this as a list? try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. wai-aria 2 in our second wai-aria task, we present a simple search form, and we want you to add in a couple of wai-aria features to improve its accessibility: how can you allow the search form to be called out as a separate landmark on the page by screenreaders, to make it easily findable? how can you give ...
... wai-aria 3 for this final wai-aria task, we return to an example we previously saw in the css and javascript skilltest. as before, we have a simple app that presents a list of animal names. clicking one of the animal names causes a further description of that animal to appear in a box below the list. here, we a...
...imal names. clicking one of the animal names causes a further description of that animal to appear in a box below the list. here, we are starting with a mouse- and keyboard-accessible version. the problem we have now is that when the dom changes to show a new decription, screenreaders cannot see what has changed. can you update it so that description changes are annouced by the screenreader? download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting p...

Test your skills: The Box Model - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. the box model one with the two boxes below, one is using the standard box model, the other the alternate box model. ...
...l one with the two boxes below, one is using the standard box model, the other the alternate box model. change the width of the second box by adding rules to the .alternate class, so that it matches the visual width of the first box. your final result will look like the image below. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. the box model two in this task, add to the box: a 5px, black, dotted border. a top margin of 20px. a right margin of 1em. a bottom margin of 40px. a left margin of 2em. padding on all sides of 1em. try updating the live code below to recreate the example as displayed in the image: for assessment...
...s task to work in your own editor or in an online editor. the box model two in this task, add to the box: a 5px, black, dotted border. a top margin of 20px. a right margin of 1em. a bottom margin of 40px. a left margin of 2em. padding on all sides of 1em. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. the box model three in this example the inline element has a margin, padding and border however the lines above and below are overlapping it. what can you add to your css to cause the size of the margin, padding, and border to be respected by the other lines, while still keeping the element inline? try updat...
...ree in this example the inline element has a margin, padding and border however the lines above and below are overlapping it. what can you add to your css to cause the size of the margin, padding, and border to be respected by the other lines, while still keeping the element inline? try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the ...

Test your skills: sizing - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. task one in this task, you have two boxes. ...
...overflow if there is more content than fits in 100 pixels. test this box by removing the content from the html to make sure you still get a 100 pixel tall box even with no content. the second box should be fixed at 100 pixels tall, so that content will overflow if there is too much. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. task two this task has a box, which contains another box. your task is to make the inner box 60% of the width of the outer box. the value of the box-sizing property is set to border-box, which means that the total width includes any padding and border. you should also give the inner box padding of 10% using the...
... box. the value of the box-sizing property is set to border-box, which means that the total width includes any padding and border. you should also give the inner box padding of 10% using the width (or inline size) as the size from which that percentage is calculated. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. task three this task has two images in boxes. one image is smaller than the box, the other is larger and breaking out of the box. if you imagine that the box is responsive and therefore could grow and shrink, which property would you apply to the image so that the large image shrinks down into the box but the s...
...he box, the other is larger and breaking out of the box. if you imagine that the box is responsive and therefore could grow and shrink, which property would you apply to the image so that the large image shrinks down into the box but the small image does not stretch. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the ...

Test your skills: values and units - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...ackground semi-opaque. the second list item should use rgb color. the third should use hsl color. the fourth should use rgb color but with the alpha channel set to .2. you can find conversions for the hex color at this link. you need to figure out how to use the values in css. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. task two in this task you need to set the size of various items of text. the <h1> should be 50 pixels. the <h2> should be 2em. all <p> elements should be 16 pixels. a <p> element that is directly after an <h1> should be 120%. try updating the live code below to recreate the example as displayed in the...
... editor or in an online editor. task two in this task you need to set the size of various items of text. the <h1> should be 50 pixels. the <h2> should be 2em. all <p> elements should be 16 pixels. a <p> element that is directly after an <h1> should be 120%. ...
... assessment or further help you can practice these examples in the interactive editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. ...

Test your skills: Writing Modes and Logical Properties - Learn web development
the aim of this task is to help you check your understanding of writing modes and logical properties. the things you need to know to complete these tasks are covered in the lesson on handling different text directions. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. task one the box in the example is displayed with a horizontal writing mode. can you add a line of css to change it so it uses a vertical writing mode with right to left text? your example should look like the image below. try updating the live code below to recreat...
...ssment or further help section at the bottom of this page. task one the box in the example is displayed with a horizontal writing mode. can you add a line of css to change it so it uses a vertical writing mode with right to left text? your example should look like the image below. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. task two in the example below use logical properties to replace width and height in order to maintain the aspect ratio of the box as it is turned vertically. your end result should look like the image below. try updating the live code below to recreate the example as displayed in the image: for assessmen...
... task to work in your own editor or in an online editor. task two in the example below use logical properties to replace width and height in order to maintain the aspect ratio of the box as it is turned vertically. your end result should look like the image below. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. task three use logical versions of the margin, border, and padding properties so that the edges of the box relate to the text rather than following top, left, bottom and right. you can see how this should look in the image below. try updating the live code below to recreate the finished example: for asse...
... to work in your own editor or in an online editor. task three use logical versions of the margin, border, and padding properties so that the edges of the box relate to the text rather than following top, left, bottom and right. you can see how this should look in the image below. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the ...

Test your skills: Flexbox - Learn web development
the aim of this task is to get you working with flexbox and demonstrate your understanding of how flex items behave. below are four common design patterns which you might use flexbox to create, your task is to build them. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. flex layout one these list items are the navigation for a site. they should be laid out as a row, with an equal amount of space between each item. the finished example should look like the image below. try updating the live code below to recreate the finished exa...
...help — see the assessment or further help section at the bottom of this page. flex layout one these list items are the navigation for a site. they should be laid out as a row, with an equal amount of space between each item. the finished example should look like the image below. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. flex layout two these list items are all different sizes, but we want them to be displayed as three equal sized columns, no matter what content is in each item. try updating the live code below to recreate the finished example: additional questions: can you now make the first item twice the size of the...
...or or in an online editor. flex layout two these list items are all different sizes, but we want them to be displayed as three equal sized columns, no matter what content is in each item. try updating the live code below to recreate the finished example: additional questions: can you now make the first item twice the size of the other items? for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. flex layout three there are two elements in the html below, a div with a class of .parent which contains another div with a class of .child. use flexbox to center the child inside the parent. try updating the live code below to recreate the finished example: for assessment or further work purposes, downl...
... assessment or further help you can practice these examples in the interactive editors mentioned above. ...

Test your skills: floats - Learn web development
the aim of this task is to get you working with the css float and clear properties covered in our lesson on floats. you will be working through three small tasks which use different elements of the material you have just covered. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. floats one in this task you need to float the two elements with a class of float1 and float2 left and right respectively. the text should then appear between the two boxes as in the image below. try updating the live code below to recreate the finished ex...
...us for help — see the assessment or further help section at the bottom of this page. floats one in this task you need to float the two elements with a class of float1 and float2 left and right respectively. the text should then appear between the two boxes as in the image below. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. float two in this example the element with a class of float should be floated left. then we want the first line of text to display next to that element, but the following line of text (which has a class of .below) to display underneath it. you can see the desired result in this image. try updating the live c...
...oat two in this example the element with a class of float should be floated left. then we want the first line of text to display next to that element, but the following line of text (which has a class of .below) to display underneath it. you can see the desired result in this image. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. float three finally, we have a floated element in this example. the box wrapping the float and text is displaying behind the float. use the most up to date method available to cause the box background to extend to below the float as in the image. try updating the live code below to recreate the finished exam...
...own editor or in an online editor. float three finally, we have a floated element in this example. the box wrapping the float and text is displaying behind the float. use the most up to date method available to cause the box background to extend to below the float as in the image. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the ...

Grids - Learn web development
creating your grid in css having decided on the grid that your design needs, you can use css grid layout to create that grid in css and place items onto it. we will look at the basic features of grid layout first and then explore how to create a simple grid system for your project. the following video provides a nice visual explanation of using css grid: defining a grid as a starting point, download and open the starting point file in your text editor and browser (you can also see it live here). you will see an example with a container, which has some child items. by default these display in normal flow so the boxes display one below the other. we will be working with this file for the first part of this lesson, making changes to see how grid behaves. to define a grid we use the grid value ...
...g to these lines by specifying the start and end line. we do this using the following properties: grid-column-start grid-column-end grid-row-start grid-row-end these properties can all have a line number as the value. you can also use the shorthand properties: grid-column grid-row these let you specify the start and end lines at once, separated by a / — a forward slash character. download this file as a starting point or see it live here. it has a grid defined already, and a simple article outlined. you can see that auto-placement is placing items one into each cell of the grid that we have created. we will instead place all of the elements for our site on the grid, using the grid lines. add the following rules to the bottom of your css: header { grid-column: 1 / 3; grid-row...
...rds from the end using negative values. however this only works for the explicit grid. the value -1 will not target the end line of the implicit grid. positioning with grid-template-areas an alternative way to place items on your grid is to use the grid-template-areas property and giving the various elements of your design a name. remove the line-based positioning from the last example (or re-download the file to have a fresh starting point), and add the following css. .container { display: grid; grid-template-areas: "header header" "sidebar content" "footer footer"; grid-template-columns: 1fr 3fr; grid-gap: 20px; } header { grid-area: header; } article { grid-area: content; } aside { grid-area: sidebar; } footer { grid-area: footer; } reload the page an...
... sit underneath the content and the sidebar to span all the way down for example. this is a very nice way to describe a layout as it is obvious from the css exactly what is happening. a css grid, grid framework grid "frameworks" tend to be based around 12 or 16 column grids and with css grid, you don’t need any third party tool to give you such a framework — it's already there in the spec. download the starting point file. this contains a container with a 12 column grid defined, and the same markup as we used in the previous two examples. we can now use line-based placement to place our content on the 12 column grid. header { grid-column: 1 / 13; grid-row: 1; } article { grid-column: 4 / 13; grid-row: 2; } aside { grid-column: 1 / 4; grid-row: 2; } footer { grid-column: 1 ...

Test your skills: Multicol - Learn web development
of this task is to get you working with the css column-count, column-width, column-gap, column-span and column-rule properties and values covered in our lesson on multiple-column layout. you will be working through three small tasks which use different elements of the material you have just covered. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. multicol one in this task you need to create three columns, with a 50px gap between each column. try updating the live code below to recreate the finished example: for assessment or...
...ine tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. multicol one in this task you need to create three columns, with a 50px gap between each column. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. multicol two create columns which have a minimum width of 200px. then, add a 5px, grey rule between each column, ensuring there is 10px of space between the edge of the rule and the column content. try updating the live code below to recreate the finished example: for assessment or further work purposes...
...he starting point for this task to work in your own editor or in an online editor. multicol two create columns which have a minimum width of 200px. then, add a 5px, grey rule between each column, ensuring there is 10px of space between the edge of the rule and the column content. ...
... assessment or further help you can practice these examples in the interactive editors mentioned above. ...

Test your skills: Advanced styling - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...one available in the same directory as our html files — see search-24px.png — plus a <div> element after the search input to help you attach it, should you need it. can you figure out a sensible way to attach it, and can you use some css to get it to sit to the right of the search box, and be lined up vertically as well? try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. advanced form styling 2 in our next task we provide you with a set of three radio buttons. we want you to give them custom styling. we've already provided you with a basic reset to build upon. first of all, get rid of their default styling. next, give the radio buttons a reasonable base style — the style...
... have when the page first loads. this can be anything you like, but you probably want to set a width and height (of somewhere between about 18 and 24 pixels), and a subtle border and/or background color. now give the radio buttons a different style for when they are selected. align the radio buttons nicely with the labels. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. advanced form styling 3 in our final task for this assessment series, we provide you with a feedback form that is already nicely-styled — you've already seen something similar if you've worked through our ui pseudo-classes article, and now we want you to come up with your own solution. what we'd like you to ...
... solution. what we'd like you to do is make use of some advanced pseudo-classes to provide some useful indicators of validity. first of all, we want you to provide some specific styling to visually indicate which inputs have to be filled in — they cannot be left empty. second, we want you to provide a useful visual indicator of whether the data entered inside each input is valid or not. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting p...

Test your skills: Basic controls - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. basic controls 1 this task starts you off nice and gently by asking you to create two <input> elements, for a user's id and password, along with a submit button. ...
...e and gently by asking you to create two <input> elements, for a user's id and password, along with a submit button. create appropriate inputs for user id and password. you should also associate them with their text labels semantically. create a submit button inside the remaining list item, with button text of "log in". try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. basic controls 2 the next task requires you to create working sets of checkboxes and radio buttons, from the provided text labels. turn the first <fieldset>'s contents into a set of radio buttons — you should only be able to select one pony character at once. make it so that the first radio button is sele...
... text labels. turn the first <fieldset>'s contents into a set of radio buttons — you should only be able to select one pony character at once. make it so that the first radio button is selected upon page load. turn the second <fieldset>'s content into a set of checkboxes. add a couple more hotdog choices of your own. ...
... assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. ...

Test your skills: Other controls - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. other controls 1 in our first "other controls" assessment, we'll get you to create a multi-line text input. create a basic multi-line text input. ...
...1 in our first "other controls" assessment, we'll get you to create a multi-line text input. create a basic multi-line text input. associate it semantically with the provided "comment" label. give the input 35 columns, and 10 rows of space in which to add comments. give the comments a maximum length of 100 characters. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. other controls 2 now it's time to have a go at implementing a drop-down select menu, to allow a user to pick their favourite food from the choices provided. create your basic select box structure. associate it semantically with the provided "comment" label. inside the list, split the choices up into 2 subg...
...now it's time to have a go at implementing a drop-down select menu, to allow a user to pick their favourite food from the choices provided. create your basic select box structure. associate it semantically with the provided "comment" label. inside the list, split the choices up into 2 subgroups — "mains" and "snacks". try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. other controls 3 in our final task of this set, we start with much the same list of food choices. however, this time we want to do things differently: create a basic text input that is semantically associated with the provided label. put the food choices into a list that can be associated with a form input.
...t that is semantically associated with the provided label. put the food choices into a list that can be associated with a form input. associate the list with your text input, so that when you type characters, any of the list options that match the character sequence are given in a dropdown list as autocomplete suggestions. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting p...

Test your skills: Links - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...n about whales". note: the first link in the example has the target="_blank" attribute set on it, so that when you click on it, it opens the page in a new tab. this is not strictly best practice, but we've done it here so that the page doesn't open in the embedded <iframe>, getting rid of your example code in the process! try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. links 2 in this task we want you to fill in the four links so that they link to the appropriate places: the first link should link to an image called blue-whale.jpg, which is located in a directory called blue inside the current directory. the second link should link to an image called narwhal.jpg, which is...
... note: the first three links in the example have the target="_blank" attribute set on them, so that when you click on them, they open the linked page in a new tab. this is not strictly best practice, but we've done it here so that the pages don't open in the embedded <iframe>, getting rid of your example code in the process! try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. links 3 the following links link to an info page about narwhals, a support email address, and a pdf factfile that is 4mb in size. in this task we want you to: take the existing paragraphs with poorly-written link text, and rewrite them so that they have good link text. add a warning to any links that need a...
...e: the first and third links in the example have the target="_blank" attribute set on them, so that when you click on them, they open the linked page in a new tab. this is not strictly best practice, but we've done it here so that the pages don't open in the embedded <iframe>, getting rid of your example code in the process! try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting p...

Test your skills: HTML images - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. html images 1 in this task we want you to embed a simple image of some blueberries into the page. you need to: add the path to the image to an appropriate attribute to embed it on the page. ...
...lled images. add some alternative text to an appropriate attribute to describe the image, for people that cannot see it. give the <img> element an appropriate width and height so that it displays at the correct aspect ratio, and enough space is left on the page to display it. the image's intrinsic size is 615 x 419 pixels. ...
...e finished example: download the starting point for this task to work in your own editor or in an online editor. html images 2 in this task you already have a full-featured image, but we'd like you to add a tooltip that appears when the image is moused over. you should put some appropriate information into the tooltip. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. html images 3 in this final task you are provided with both a full-featured image and some caption text. what you need to do here is add elements that will associate the image with the caption. ...
... assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. ...

Test your skills: Events - Learn web development
this aim of this skill test is to assess whether you've understood our introduction to events article. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version). dom manipulation: considered useful some of the questions below require you to write some dom manipulation code to complete them — such ...
...ons. a good starting place is our manipulating documents tutorial. events 1 in our first events-related task, you need to create a simple event handler that causes the text inside the button (btn) to change when it is clicked on, and change back when it is clicked again. the html should not be changed; just the javascript. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. events 2 now we'll look at keyboard events. to pass this assessment you need to build an event handler that moves the circle around the provided canvas when the wasd keys are pressed on the keyboard. the circle is drawn with the function drawcircle(), which takes the folllowing parameters as inputs: x — th...
...vent handler that moves the circle around the provided canvas when the wasd keys are pressed on the keyboard. the circle is drawn with the function drawcircle(), which takes the folllowing parameters as inputs: x — the x coordinate of the circle. y — the y coordinate of the circle. size — the radius of the circle. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. events 3 in our final events-related task, you need to set an event listener on the <button>s' parent element (<div class="button-bar"> ... </div>), which when invoked by clicking any of the buttons will set the background of the button-bar to the color contained in the button's data-color attribute. we want y...
...tton>s' parent element (<div class="button-bar"> ... </div>), which when invoked by clicking any of the buttons will set the background of the button-bar to the color contained in the button's data-color attribute. we want you to solve this without looping through all the buttons and giving each one their own event listener. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting p...

Test your skills: Functions - Learn web development
this aim of this skill test is to assess whether you've understood our functions — reusable blocks of code, build your own function, and function return values articles. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version). dom manipulation: considered useful some of the questions below requi...
...hat dom apis you need to successfully answer the questions. a good starting place is our manipulating documents tutorial. functions 1 for the first task, you have to create a simple function — choosename() — that prints a random name from the provided array (names) to the provided paragraph (para), and then run it once. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. functions 2 for our second functions-related task, you need to create a function that draws a rectangle on the provided <canvas> (reference variable canvas, context available in ctx), based on the five provided input variables: x — the x coordinate of the rectangle. y — the y coordinate of the rectangle...
...y coordinate of the rectangle. width — the width of the rectangle. height — the height of the rectangle. color — the color of the rectangle. you'll want to clear the canvas before drawing, so that when the code is updated in the case of the live version, you don't get lots of rectangles drawn on top of one another. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. functions 3 in this task, you return to the problem posed in task 1, with the aim of improving it. the three improvements we want you to make are: refactor the code that generates the random number into a separate function called random(), which takes as parameters two generic bounds that the random number s...
...c bounds that the random number should be between, and returns the result. update the choosename() function so that it makes use of the random number function, takes the array to choose from as a parameter (making it more flexible), and returns the result. print the returned result into the paragraph (para)'s textcontent. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting p...

Test your skills: Loops - Learn web development
we didn't provide live editable versions of these tasks because of the risk of creating infinite loops and crashing the assessment page! if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
... do some research into what dom apis you need to successfully answer the questions. a good starting place is our manipulating documents tutorial. loops 1 in our first looping task we want you start by creating a simple loop that goes through all the items in the provided myarray and prints them out on the screen inside list items (i.e., <li> elements), which are appended to the provided list. download the starting point for this task to work in your own editor or in an online editor. loops 2 in this next task, we want you to write a simple program that, given a name, searches an array of objects containing names and phone numbers (phonebook) and, if it finds the name, outputs the name and phone number into the paragraph (para) and then exits the loop before it has run its course. you are ...
... paragraph (para) and then exits the loop before it has run its course. you are given three variables to begin with: i — starts off with a value of 0; intended to be used as an iterator. name — contains a name to search for para — contains a reference to a paragraph, which will be used to report the results. you should use a type of loop that you've not used in the previous task. download the starting point for this task to work in your own editor or in an online editor. loops 3 in this final task, you are provided with the following: i — starts off with a value of 500; intended to be used as an iterator. para — contains a reference to a paragraph, which will be used to report the results. isprime() — a function that, when passed a number, returns true if the number ...
...through the numbers 2 to 500 backwards (1 is not counted as a prime number), and run the provided isprime() function on them. for each number that isn't a prime number, continue on to the next loop iteration. for each one that is a prime number, add it to the paragraph's textcontent along with some kind of separator. you should use a type of loop that you've not used in the previous two tasks. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting p...

Client-side storage - Learn web development
this has many distinct uses, such as: personalizing site preferences (e.g. showing a user's choice of custom widgets, color scheme, or font size). persisting previous site activity (e.g. storing the contents of a shopping cart from a previous session, remembering if a user was previously logged in). ...
...tents of a shopping cart from a previous session, remembering if a user was previously logged in). saving data and assets locally so a site will be quicker (and potentially less expensive) to download, or be usable without a network connection. saving web application generated documents locally for use offline often client-side and server-side storage are used together. for example, you could download a batch of music files (perhaps used by a web game or music player application), store them inside a client-side database, and play them as needed. the user would only have to download the music files once — on subsequent visits they would be retrieved from the database instead. note: there are limits to the amount of data you can store using client-side storage apis (possibly both per indivi...
...e, indexeddb can be used to store more than just simple text strings. you can store just about anything you want, including complex objects such as video or image blobs. and it isn't much more difficult to achieve than any other type of data. to demonstrate how to do it, we've written another example called indexeddb video store (see it running live here also). when you first run the example, it downloads all the videos from the network, stores them in an indexeddb database, and then displays the videos in the ui inside <video> elements. the second time you run it, it finds the videos in the database and gets them from there instead before displaying them — this makes subsequent loads much quicker and less bandwidth-hungry. let's walk through the most interesting parts of the example. we won't...
...deo.controls = true; const source1 = document.createelement('source'); source1.src = mp4url; source1.type = 'video/mp4'; const source2 = document.createelement('source'); source2.src = webmurl; source2.type = 'video/webm'; ... } offline asset storage the above example already shows how to create an app that will store large assets in an indexeddb database, avoiding the need to download them more than once. this is already a great improvement to the user experience, but there is still one thing missing — the main html, css, and javascript files still need to be downloaded each time the site is accessed, meaning that it won't work when there is no network connection. this is where service workers and the closely-related cache api come in. a service worker is a javascript fi...

Fetching data from the server - Learn web development
teps, building blocks, javascript objects), the basics of client-side apis objective: to learn how to fetch data from the server and use it to update the contents of a web page. what is the problem here? originally page loading on the web was simple — you'd send a request for a website to a server, and as long as nothing went wrong, the assets that made the web page would be downloaded and displayed on your computer. the trouble with this model is that whenever you want to update any part of the page, for example, to display a new set of products or load a new page, you've got to load the entire page again. this is extremely wasteful and results in a poor user experience, especially as pages get larger and more complex. enter ajax this led to the creation of technologies...
...etc., and load it. now search for something, like a new product. the main content will change, but most of the surrounding information, like the header, footer, navigation menu, etc., will stay the same. this is a really good thing because: page updates are a lot quicker and you don't have to wait for the page to refresh, meaning that the site feels faster and more responsive. less data is downloaded on each update, meaning less wasted bandwidth. this may not be such a big issue on a desktop on a broadband connection, but it's a major issue on mobile devices and in developing countries that don't have ubiquitous fast internet service. to speed things up even further, some sites also store assets and data on the user's computer when they are first requested, meaning that on subsequent visi...
...dwidth. this may not be such a big issue on a desktop on a broadband connection, but it's a major issue on mobile devices and in developing countries that don't have ubiquitous fast internet service. to speed things up even further, some sites also store assets and data on the user's computer when they are first requested, meaning that on subsequent visits they use the local versions instead of downloading fresh copies when the page is first loaded. the content is only reloaded from the server when it has been updated. a basic ajax request let's look at how such a request is handled, using both xmlhttprequest and fetch. for these examples, we'll request data out of a few different text files and use them to populate a content area. this series of files will act as our fake database; in a re...
...nature of the error that has occurred, in this case we do it with a simple console.log(). however, a complete website would handle this error more gracefully by displaying a message on the user's screen and perhaps offering options to remedy the situation, but we don't need anything more than a simple console.log(). you can test the fail case yourself: make a local copy of the example files (download and unpack the can-store zip file). run the code through a web server (as described above, in serving your example from a server). modify the path to the file being fetched, to something like 'produc.json' (make sure it is misspelled). now load the index file in your browser (via localhost:8000) and look in your browser developer console. you'll see a message similar to "network request for pr...

Test your skills: Arrays - Learn web development
this aim of this skill test is to assess whether you've understood our arrays article. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version). arrays 1 let's start off with some basic array practice. in this task we'd like you to create an array of three items, stored inside a variable called mya...
... in this task we'd like you to create an array of three items, stored inside a variable called myarray. the items can be anything you want — how about your favourite foods or bands? next, modify the first two items in the array using simple bracket notation and assignment. then add a new item to the beginning of the array. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. arrays 2 now let's move on to another task. here you are provided with a string to work with. we'd like you to: convert the string into an array, removing the + characters in the process. save the result in a variable called myarray. store the length of the array in a variable called arraylength. store the...
...sk. here you are provided with a string to work with. we'd like you to: convert the string into an array, removing the + characters in the process. save the result in a variable called myarray. store the length of the array in a variable called arraylength. store the last item in the array in a variable called lastitem. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. arrays 3 for this final array task, we provide you with a starting array, and you will work in somewhat the opposite direction. you need to: remove the last item in the array. add two new names to the end of the array. go over each item in the array and add its index number after the name inside parenthese...
... the array. go over each item in the array and add its index number after the name inside parentheses, for example ryu (0). note that we don't teach how to do this in the arrays article, so you'll have to do some research. finally, join the array items together in a single string called mystring, with a separator of " - ". try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting p...

Test your skills: Math - Learn web development
this aim of this skill test is to assess whether you've understood our basic math in javascript — numbers and operators article. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version). math 1 let's start out by testing your knowledge of basic math operators. you will have to create four numeric...
...from the third and store the result in another variable. multiply the results from the last two steps together, storing the result in a variable called finalresult. the product should be 48. if it isn't, you'll have to adjust some of the initial input values. finally, write a calculation that checks whether finalresult is an even number. store the result in a variable called evenoddresult. download the starting point for this task to work in your own editor or in an online editor. math 2 in the second task you are already provided with two calculations, with the results stored in the variables result and result2. but these results aren't what we want; you'll need to take the calculations and change them to give us what we want. what do we want? after multiplying the two results together...
...ta type of finalresult using typeof; you'll probably see that it is actually of string type! write a line of code that converts it to a number type, storing the result in a variable called finalnumber. the value of finalnumber needs to be 10.42. go back and update the original calculations you were provided with so that they give this final result. don't update the numbers or the operators. download the starting point for this task to work in your own editor or in an online editor. math 3 in the final task for this article, we want you to write some tests. you've got three groups, each consisting of a statement and two variables. for each one, write a test that proves or disproves the statement made. store the results of those tests in variables called weightcomparison, heightcomparison, ...
...k to work in your own editor or in an online editor. math 3 in the final task for this article, we want you to write some tests. you've got three groups, each consisting of a statement and two variables. for each one, write a test that proves or disproves the statement made. store the results of those tests in variables called weightcomparison, heightcomparison, and pwdmatch, respectively. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting p...

Test your skills: Object-oriented JavaScript - Learn web development
the aim of this skill test is to assess whether you've understood our object-oriented javascript for beginners, object prototypes, and inheritance in javascript articles. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version). oojs 1 in this task we provide you with a constructor. we want you to:...
...square and a sidelength of 5. call your calcperimeter() method on the instance, to see whether it logs the calculation result to the browser devtools' console as expected. create a new instance of shape called triangle, with a name of triangle and a sidelength of 3. call triangle.calcperimeter() to check that it works ok. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. oojs 2 next up we want you to take the shape class you saw in task #1 (including the calcperimeter() method) and recreate it using es class syntax instead. test that it works by creating the square and triangle object instances as before (using new shape() for both), and then calling their calcperimeter() meth...
...editor. oojs 2 next up we want you to take the shape class you saw in task #1 (including the calcperimeter() method) and recreate it using es class syntax instead. test that it works by creating the square and triangle object instances as before (using new shape() for both), and then calling their calcperimeter() methods. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. oojs 3 finally, we'd like you to start with the es shape class you created in the last task. we'd like you to create a square class that inherits from shape, and adds a calcarea() method that calculates the square's area. also set up the constructor so that the name property of square object instances is autom...
...et to square, and the sides property is automatically set to 4. when invoking the constructor, you should therefore just need to provide the sidelength property. create an instance of the square class called square with appropriate property values, and call its calcperimeter() and calcarea() methods to show that it works ok. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting p...

Test your skills: Object basics - Learn web development
this aim of this skill test is to assess whether you've understood our javascript object basics article. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version). object basics 1 in this task you are provided with an object literal, and your tasks are to store the value of the name property insi...
...sics 1 in this task you are provided with an object literal, and your tasks are to store the value of the name property inside the catname variable, using bracket notation. run the greeting() method using dot notation (it will log the greeting to the browser devtools' console). update the color property value to black. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. object basics 2 in our next task, we want you to have a go at creating your own object literal to represent one of your favourite bands. the required members are: name: a string representing the band name. nationality: a string representing the country the band comes from. genre: what type of music the ban...
...ting the year the album was released. include at least two albums in the albums array. once you've done this, you should then write a string to the variable bandinfo, which will contain a small biography detailing their name, nationality, years active, and style, and the title and release date of their first album. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. object basics 3 finally for our object basics assessment, we want you to return to the cat object literal from task #1. we want you to rewrite the greeting() method so that it logs "hello, said bertie the cymric." to the browser devtools' console, but in a way that will work across any cat object of the same st...
...at they log appropriate greetings to the console. the code is not very dry (each bit of code should only be defined once) — you've got the same method defined twice, for example. describe how you'd make it more dry? if you are not sure, then don't worry — this is what we'll be looking at in future articles in the series! try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting p...

Perceived performance - Learn web development
or whatever else you think might be appropriate). such an approach is much better than just showing nothing, which will make it feel like it is taking a lot longer and possibly lead to your users thinking it is broken and giving up. perceived performance the perception of how fast your site loads and how responsive feels to user interaction is vitally important; even more important that actual download time but difficult to quantify. there are areas of your site that you may not be able to make faster, but you can make it feel faster even if the metrics discussed in the othser sections can't be improved. there is no unicorn metric that can measure what the user feels, but metrics are useful in guaging improvements (and regressions). relevant measurements include first meaningful paint (fmp), l...
... amount of css and js that needs to be loaded on initially will have a major impact on improving perceived performance. even though the bytes might be the same, not blocking the page from rendering makes the load feel faster. here are a few tips and tricks to help improve performance: minimize initial load to improve perceived performance, minimize the original page load. ...
...rceived performance. even though the bytes might be the same, not blocking the page from rendering makes the load feel faster. here are a few tips and tricks to help improve performance: minimize initial load to improve perceived performance, minimize the original page load. in other words, first download everything you're going to actually show, but only the stuff you are actually using, then download the rest. if you're downloading all the assets in the end, the weight of all your assets hasn't improved -- in fact, you may need to add some code -- but because the download of non-immediately necessary assets are delayed in a manner that is not perceptible the the user, the user will feel like the download was faster. to minimize the assets required for initial load, separate interactive func...
...est on keydown rather than waiting for keyup can shave 200ms off the perceived load of the content. adding an interesting but unobtrusive 200ms animation to that keyup even can reduce another 200ms of the perceived load. you're not saving 400ms of time, but the user doesn't feel like they're waiting for content until, well, until they're waiting for content. conclusion by turning as much of the download, render and wait time into active phases and reducing any passive waiting, even if the objective measurements stay the same, the user will feel like the content downloaded, rendered, and responded more quickly. now that we know what we should be speeding up, let's take a look at some metrics and learn how we can measure these events. previous overview: performance next in this module ...

What is web performance? - Learn web development
liarity of what is involved with web performance. * versus subjective, perceived performance, covered in the next article what is web performance? web performance is the objective measurement and perceived user experience of a web site or application. this includes the following major areas: reducing overall load time: how long does it take the files required to render the web site to download on to the user's computer? this tends to be affected by latency, how big your files are, how many files there are, and other factors besides. a general strategy is to make your files as small as possible, reduce the number of http requests made as much as possible, and employ clever loading techniques (such as preload) to make files available sooner. making the site usable as soon as possible: t...
... browsers work. this includes: how the browser works. when you request a url and hit enter / return, the browser finds out where the server is that holds that website's files, establishes a connection to it, and requests the files. see populating the page: how the browser works for a detailed overview. source order. your html index file's source order can significantly affect performance. ...
...ests the files. see populating the page: how the browser works for a detailed overview. source order. your html index file's source order can significantly affect performance. the download of additional assets linked to from the index file is generally sequential, based on source order, but this can be manipulated and should definitely be optimized, realizing that some resources block additional downloads until their content is parsed and executed. the critical path. this is the process that the browser uses to construct the web document once the files have been downloaded from the server. the browser follows a well-defined set of steps, and optimizing the critical rendering path to prioritize the display of content that relates to the current user action will lead to significant improvements in...
...arlier on, but in brief, latency is the time it takes for your website assets to travel from the server to a user's computer. there is overhead involved in establishing tcp and http connections, and some unavoidable latency in pushing the request and response bytes back and forth across the network, but there are certain ways to reduce latency (e.g. reducing the number of http request you make by downloading less files, using a cdn to make your site more universally performant across thw world, and using http/2 to serve file more efficiently from the server). you can read all about this topic at understanding latency. conclusion that's it for now; we hope our brief overview of the web performance topic helped you to get an idea of what it is all about, and made you excited to learn more. next u...

JavaScript performance - Learn web development
previous overview: performance next while images and video account for over 70% of the bytes downloaded for the average website, byte per byte, javascript has a greater negative impact on performance. this article looks to introduce performance issues caused by scripts and introduces tips and tricks for optimizing javascript for web performance. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to learn about the effects of javascript on performance optimization, and how a javascript file size is not the only impact on web performance. ...
... computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to learn about the effects of javascript on performance optimization, and how a javascript file size is not the only impact on web performance. similar to images and video, the best way to improve performance is to omit what is not, in fact, necessary. ...
...edge of client-side web technologies. objective: to learn about the effects of javascript on performance optimization, and how a javascript file size is not the only impact on web performance. similar to images and video, the best way to improve performance is to omit what is not, in fact, necessary. but not all bytes downloaded have the same impact. javascript bytes have to be downloaded, parsed, and exectuted. javascript impacts download performance. we'll cover tips and tricks to minimize that impact on download. but javascript can also consume the main thread, the cpu, and the battery. it can make the ui feel unresponsive or janky. we'll introduce concepts for handling that as well. download impact web applications include a lot of javascript. many applications are built w...
...eventually. performance optimizatins should include: reducing the amount of javascript that is needed. some features requiring complex javascript can be done with a few lines of javascript. ...

Setting up your own test automation environment - Learn web development
cumentation seems fairly up-to-date and it is well-maintained. if you want different options, webdriver.io and nightwatch.js are also good choices. to install selenium-webdriver, run the following command, making sure you are inside your project folder: npm install selenium-webdriver note: it is still a good idea to follow these steps even if you previously installed selenium-webdriver and downloaded the browser drivers. you should make sure that everything is up-to-date. next, you need to download the relevant drivers to allow webdriver to control the browsers you want to test. you can find details of where to get them from on the selenium-webdriver page (see the table in the first section.) obviously, some of the browsers are os-specific, but we're going to stick with firefox and chrome...
... unpack them into somewhere fairly easy to navigate to, like the root of your home user directory. add the chromedriver and geckodriver driver's location to your system path variable. this should be an absolute path from the root of your hard disk, to the directory containing the drivers. ...
...method to update the details. if you now go back to your sauce labs automated test dashboard page, you should see your new job now has the updated data attached to it: your own remote server if you don't want to use a service like sauce labs or browserstack, you can always set up your own remote testing server. let's look at how to do this. the selenium remote server requires java to run. ...
...auce labs automated test dashboard page, you should see your new job now has the updated data attached to it: your own remote server if you don't want to use a service like sauce labs or browserstack, you can always set up your own remote testing server. let's look at how to do this. the selenium remote server requires java to run. download the latest jdk for your platform from the java se downloads page. install it when it is downloaded. next, download the latest selenium standalone server — this acts as a proxy between your script and the browser drivers. choose the latest stable version number (i.e. not a beta), and from the list choose a file starting with "selenium-server-standalone". when this has downloaded, put it in a sensible place, like in your home directory. if you've not al...

Debugging on Windows
stack is in certain states. it works when you have js_interpret() in the newest stackframe debugging minidumps see debugging a minidump. debugging tinderbox builds see running windows debug builds problems loading debug symbols if both your application and visual c++ hang shortly after launching the application under the debugger, you may be hitting a known deadlock in the way visual studio downloads debug symbols for the system libraries; see https://connect.microsoft.com/visualstudio/feedback/details/422970/hang-loading-rasapi32-pdb-when-using-symbol-server. there are two ways to work around this problem: turn off automatic symbol downloading for system libraries: in tools > options > debugging > symbols, uncheck the microsoft symbol server. pre-load all the windows debug symbols. the...
...s, uncheck the microsoft symbol server. pre-load all the windows debug symbols. these instructions apply to visual studio 10 on windows 7; other software versions likely need to have file paths adjusted. locate the microsoft utility "symchk.exe" on your system (it will likely be in the installation directory of your windows debugging tools). ...
...stallation directory of your windows debugging tools). find the directory where visual studio caches downloaded symbols; in vc++ 10 open the menu to tools > options > debugging > symbols and copy the field "cache symbols in this directory". in a command window, run symchk.exe /r c:\windows\syswow64\ /s "srv*<your cache symbols directory>\microsoftpublicsymbols*http://msdl.microsoft.com/download/symbols" note the "\microsoftpublicsymbols" appended to the cache directory configured in visual studio. ...
...+ 10 open the menu to tools > options > debugging > symbols and copy the field "cache symbols in this directory". in a command window, run symchk.exe /r c:\windows\syswow64\ /s "srv*<your cache symbols directory>\microsoftpublicsymbols*http://msdl.microsoft.com/download/symbols" note the "\microsoftpublicsymbols" appended to the cache directory configured in visual studio. downloading all symbols can take a long time; you can replace c:\windows\syswow64\ with the name of a single .dll to download symbols only for the specific libraries you are trying to debug. unfortunately, it's hard to know which symbols to download without having vs hang and seeing the "downloading symbols for <library>" status at the bottom left of the main window. problems post-mortem debugging on win...

Bootstrapping a new locale
machines and then "push" changes to their official mozilla repository. installing mercurial depending on your operating system, you will need to install the correct version of hg on your machine. this document will give you the basic information on how to do that. install the compare-locales utility the next step is to install compare-locales. $ sudo easy_install compare-locales this will download and install 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 ...
...operties history sidebar migration tabbrowser.dtd openlocation.dtd tabbrowser.properties openlocation.properties as a localizer, you are responsible for localizing each of the ".dtd" and ".properties" in *all* of the sub-directories found in your ab-cd directory. ...
...the following directories: ab-cd/browser/ ab-cd/dom/ ab-cd/netwerk/ ab-cd/other-licenses/branding/firefox/ ab-cd/security/manager/ ab-cd/toolkit/ translating to start editing, you will need a text editing application. you can choose to use: notepad++ or notepad2 on windows, vim, gedit or kate on gnu/linux, textwrangler on mac os x. (read more about tools at l10n:tools.) after you have downloaded your editor of choice, type the following command in the same path from above (~/ab-cd/browser/chrome/browser) $ edit ab-cd/browser/chrome/browser/aboutcerterror.dtd read the top of the file to get any context on how to translate contained in the notes written by the developers or l10n-drivers. localization notes will look like this: <!-- localization notes... --> after the localization no...
... now we'll set up a not-so-compile environment by calling configure. if you just checked out the localizable parts of en-us above, it will create a plethora of warnings no such file or directory, but no errors. ../mozilla/configure --disable-compile-environment --enable-application=browser whenever you need a build directory, these are the steps that you need to do to initialize it. if you're downloading a new release of firefox from cvs, you might want to run configure again, too. now we can actually create the language pack, make -c browser/locales langpack-en-x-dude you should find your newly created language pack in dist/install. ls dist/install you can open that file in firefox and check it out. you have to set your selected language still. you can either use the locale switcher ex...

DMD
ual, or from the command line (as before, be sure to replace org.mozilla.fennec_$username with the app identifier as appropriate). ...
...art -n org.mozilla.fennec_$username/.app trigger use the existing memory-report dumping hook: adb shell am broadcast -a org.mozilla.gecko.memory_dump in logcat, you should see output similar to this: i/dmd (20731): opened /storage/emulated/0/download/memory-reports/dmd-default-20731.json.gz for writing ... i/geckoconsole(20731): nsimemoryinfodumper dumped reports to /storage/emulated/0/download/memory-reports/unified-memory-report-default-20731.json.gz the path is where the memory reports and dmd reports get dumped to. ...
...you can analyze these files (either gzipped or not) using dmd.py. ...
...you can analyze these files (either gzipped or not) using dmd.py. on nightly firefox, dmd.py is included in the distribution. ...

Necko Interfaces Overview
ifileurl, nsistandardurl) represents an uri, with getters and setters for various uri parts (eg. scheme, host, path, ...) per protocol implementation necko provides uri impl's for common uri formats (see nsstandardurl, nssimpleuri) nsichannel : nsirequest represents a logical connection to the resource identified by a nsiuri per protocol implementation single use (ie. channel is used to download the resource once) download initiated via nsichannel::asyncopen method can be canceled via nsirequest::cancel method at anytime after invocation of asyncopen method nsiprotocolhandler a service that manages a protocol, identified by it's uri scheme (eg. http) maps uri string to nsiuri instance via newuri method creates nsichannel instance from nsiuri instance via newchannel method nsist...
...a service that manages a protocol, identified by it's uri scheme (eg. ...
.... ...
...instance from nsiuri instance via newchannel method nsistreamlistener : nsirequestobserver implemented by the consumer of a nsichannel instance passed to nsichannel::asyncopen method nsirequestobserver::onstartrequest - notifies start of async download nsistreamlistener::ondataavailable - notifies presence of downloaded data nsirequestobserver::onstoprequest - notifies completion of async download, possibly w/ error nsiloadgroup : nsirequest attribute of a nsirequest channel impl adds itself to its load group during invocation of asyncopen channel impl removes itself from its load group when download completes load groups in gecko own all channels used to load a particular page (until the channels complete) all channels owned by a load group can be canceled at once via the load gro...

Setting up an update server
be sure that you use the one that matches your machine's configuration. ...
...be sure that you use the one that matches your machine's configuration. ...
...mar's filename, its sha512 hash, and its file size in bytes. ...
...since the transfer is entirely local this should finish quickly, and a "restart to update" button should appear. click it to restart and apply the update. ...

nsIResumableChannel
inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void asyncopenat(in nsistreamlistener listener, in nsisupports ctxt, in unsigned long startpos, in nsiresumableentityid entityid); obsolete since gecko 1.8 void resumeat(in unsigned long long startpos, in acstring entityid); attributes attribute type description entityid acstring the entity id for this uri. ...
... open this channel, and read starting at the specified offset. the request given to the nsistreamlistener will be qiable to nsiresumableinfo. void asyncopenat( in nsistreamlistener listener, in nsisupports ctxt, in unsigned long startpos, in nsiresumableentityid entityid ); parameters listener as for asyncopen. ctxt as for asyncopen. startpos the starting offset, in bytes, to use to download. entityid information about the file, to match before obtaining the file. pass an empty string to use anything. resumeat() prepare this channel for resuming. the request will not start until asyncopen or open is called. calling resumeat after open or asyncopen has been called has undefined behaviour. during onstartrequest, this channel will have a status of ns_error_not_resumable if the file can...
...uring onstartrequest may be ns_error_entity_changed, which indicates that the entity has changed, as indicated by a changed entityid. ...
...these cases, no ondataavailable will be called, and onstoprequest will immediately follow with the same status code. ...

nsIUpdateItem
2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) this interface is obsolete; instead of using the extension manager, you should use the addon manager. method overview void init(in astring id, in astring version, in astring installlocationkey, in astring minappversion, in astring maxappversion, in astring name, in astring downloadurl, in astring xpihash, in astring iconurl, in astring updateurl, in astring updatekey, in long type, in astring targetappid); attributes attribute type description iconurl astring the url of the icon that can be shown for this item. read only. id astring the guid of the item. read only. installlocationkey astring the name of the...
...r this item. read only. version astring the version of the item, in fvf format. read only. xpihash astring the string hash for the xpi file. can be null and if supplied must be in the format of "type:hash" (see the types in nsicryptohash and nsixpinstallmanager.initmanagerwithhashes(). read only. xpiurl astring the url of the xpi where this item can be downloaded. read only. constants item type constants constants representing types of update checks. constants that callers can use to indicate the reason for an add-on update check. internal code uses other constants in nsextensionmanager.js.in. constant gecko version description 1.8 1.8.1 1.9 1.9.1 1.9.2 type_app 0x01 type_extension ...
..._theme + type_locale + type_plugin type_extension + type_theme + type_locale type_any type_app + type_addon 0xff type_plugin 0x10 methods init() initializes the object. void init( in astring id, in astring version, in astring installlocationkey, in astring minappversion, in astring maxappversion, in astring name, in astring downloadurl, in astring xpihash, in astring iconurl, in astring updateurl, in astring updatekey, in long type, in astring targetappid ); parameters id the item's guid. version the item's version. installlocationkey the name of the install location at which the item is installed. minappversion the minimum application version with which the item is compatible. maxappversion the max...
...g updatekey, in long type, in astring targetappid ); parameters id the item's guid. version the item's version. installlocationkey the name of the install location at which the item is installed. minappversion the minimum application version with which the item is compatible. maxappversion the maximum application version with which the item is compatible. name the item's name downloadurl the url from which the item is to be downloaded. xpihash the string hash for the xpi file. iconurl the url of the icon that can be shown for the item. updateurl the url of the update rdf for the item. updatekey the public key to use to verify updates for the item. type the type of item; see item type constants. targetappid the application id of the target application. ...

nsIUpdatePrompt
pdateservice.idlscriptable this interface describes an object that can be used to show various update-related notifications to the user. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void checkforupdates(); void showupdateavailable(in nsiupdate update); void showupdatedownloaded(in nsiupdate update, [optional] in boolean background); void showupdateerror(in nsiupdate update); void showupdatehistory(in nsidomwindow parent); void showupdateinstalled(); methods checkforupdates() presents a user interface that checks for and displays the available updates. void checkforupdates(); parameters none. showupdateavailable() shows a message advising the user that an upd...
... [optional] in boolean background); void showupdateerror(in nsiupdate update); void showupdatehistory(in nsidomwindow parent); void showupdateinstalled(); methods checkforupdates() presents a user interface that checks for and displays the available updates. void checkforupdates(); parameters none. ...
...heckforupdates(); parameters none. showupdateavailable() shows a message advising the user that an update is available to be downloaded and installed. if the app.update.silent preference is true or the user interface is already displayed the call will be a no-op. void showupdateavailable( in nsiupdate update ); parameters update an nsiupdate describing the update that's available. showupdatedownloaded() shows a message advising the user that an update has been downloaded, and that the user should restart the application in order to install it. ...
... or the user interface is already displayed the call will be a no-op. void showupdateavailable( in nsiupdate update ); parameters update an nsiupdate describing the update that's available. showupdatedownloaded() shows a message advising the user that an update has been downloaded, and that the user should restart the application in order to install it. if background is true (for example the download was not user initiated) and the app.update.silent preference is true the call will be a no-op. void showupdatedownloaded( in nsiupdate update, in boolean background optional ); parameters update an nsiupdate describing the update that was downloaded. background optional an optional parameter that, if provided and true, presents a less-obtrusive, non-modal notification alert. showupdateerr...

nsIWebBrowserPersist
a is fetched and saved from the network. it is best to set this value explicitly unless you are prepared to accept the default values. progresslistener nsiwebprogresslistener callback listener for progress notifications. the object that the embbedder supplies may also implement nsiinterfacerequestor and be prepared to return nsiauthprompt or other interfaces that may be required to download data. result unsigned long value indicating the success or failure of the persist operation. read only. constants constant value description persist_flags_none 0 no special persistence behavior. persist_flags_from_cache 1 only use cached data (could result in failure if data is not cached). persist_flags_bypass_cache ...
...on, deleting all created files and directories. this flag does nothing for failed upload operations to remote servers. persist_flags_autodetect_apply_conversion 16384 let the webbrowserpersist decide whether the incoming data is encoded and whether it needs to go through a content converter, for example to decompress it. persist_flags_append_to_file 32768 append the downloaded data to the target file. this can only be used when persisting to a local file. persist_flags_force_allow_cookies 65536 force relevant cookies to be sent with this load even if normally they wouldn't be. persist_state_ready 1 persister is ready to save data. persist_state_saving 2 persister is saving data. persist_state_finished 3 pe...
... the default behavior. aencodingflags flags to pass to the encoder. awrapcolumn for text documents, indicates the desired width to wrap text at. parameter is ignored if wrapping is not specified by the encoding flags. exceptions thrown ns_error_invalid_arg one or more arguments was invalid. saveuri() as of firefox 26, this method should no longer be used from add-on code. please use downloads.createdownload() instead. as of firefox 36, a new parameter areferrerpolicy was added as the fourth argument, changing the number of parameters from 7 to 8 and shifting the order of the parameters in a backwards incompatible way. save the specified uri to file. void saveuri( in nsiuri auri, in nsisupports acachekey, in nsiuri areferrer, in long areferrerpolicy, in nsiinputstream ap...
..._invalid_arg one or more arguments was invalid. saveprivacyawareuri() save the specified uri to file, explicitly dictating whether the operation should be considered private for the purposes of network requests, caching, etc. all arguments and exceptions are identical to saveuri, with the exception of aisprivate which is used to indicate the private nature of the operation. ...

Using the Multiple Accounts API
preference: mail.server.server.password - user login password preference: mail.server.server.check_new_mail - boolean, should we check for new mail on a regular basis? preference: mail.server.server.check_time - integer, number of minutes between checks for new mail preference: mail.server.server.remember_password - boolean, should we remember the password? ...
...d - user login password preference: mail.server.server.check_new_mail - boolean, should we check for new mail on a regular basis? preference: mail.server.server.check_time - integer, number of minutes between checks for new mail preference: mail.server.server.remember_password - boolean, should we remember the password? preference: mail.server.server.download_on_biff. ...
...rence: mail.server.server.cleanup_inbox_on_exit - boolean, should we purge the inbox when we quit? preference: mail.server.server.dual_use_folders - boolean - can folders contain both folders and messages? preference: mail.server.server.empty_trash_on_exit boolean, (should not be imap-specific) - should we empty this server's trash when we quit? preference: mail.server.server.offline_download - boolean, is this server marked for offline download? preference: mail.server.server.override_namespaces - boolean, should we override namespaces on this server? preference: mail.server.server.max_cached_connections - integer, max number of connections left open to the server preference: mail.server.server.empty_trash_threshhold integer, (should not be imap-specific) max k of wasted ...
...john smith preference: mail.iden...

Column layouts - CSS: Cascading Style Sheets
...
...y setting flex-direction to row, however flexbox targets the elements inside the flex container and will place each direct child into a new column. this is a different behavior to what you saw with multicol. there is currently no way to add a rule between flex items, and browser support for the column-gap and row-gap properties is limited. therefore to create gaps between items use a margin. download this example flexbox can also be used to create layouts where the flex items wrap onto new rows, by setting the flex-wrap property on the container to wrap. these new flex lines will distribute space along that line only — the items in the new line will not line up with items in the line above, as you'll see in the example below. this is why flexbox is described as one-dimensional. it is desi...
...onto new rows, by setting the flex-wrap property on the container to wrap. these new flex lines will distribute space along that line only — the items in the new line will not line up with items in the line above, as you'll see in the example below. this is why flexbox is described as one-dimensional. it is designed for controlling layout as a row or a column, but not both at the same time. download this example use flexbox: for single rows or columns of items. when you want to do alignment on the cross axis after laying out your items. when you are happy for wrapped items to share out space along their line only and not line up with items in other lines. lining items up in rows and columns — grid layout if what you want is a layout where items line up in rows and columns then yo...
......

Using the application cache - HTML: Hypertext Markup Language
lists resources that browsers should cache to be available offline. applications that are cached load and work correctly offline, even if users press the refresh button. an application cache gives the following benefits: offline browsing users can navigate a site even when they are offline. speed cached resources are local, and therefore load faster. reduced server load the browser only downloads resources that have changed from the server. how the application cache works enabling the application cache to enable the application cache for an application, include the manifest attribute in the <html> element: <html manifest="/example.appcache"> … </html> the manifest attribute references a url for a cache manifest file: a text file that lists urls that browsers should cache for y...
...n application cache modifies the normal process of loading a document: if an application cache exists, the browser loads the document and its associated resources directly from the cache, without accessing the network. this speeds up the document load time. the browser then checks to see if the cache manifest has been updated on the server. if the cache manifest has been updated, the browser downloads a new version of the manifest and the resources listed in the manifest. this is done in the background and does not affect performance significantly. the process for loading documents and updating the application cache is specified in greater detail below: when the browser visits a document that includes the manifest attribute, if no application cache exists, the browser loads the document ...
...le to inform the browser a new manifest is available. sections in a cache manifest file: cache, network, and fallback a manifest can have three distinct sections: cache, network, and fallback. cache: this is the default section for entries in a cache manifest file. files listed under the cache: section header (or immediately after the cache manifest line) are explicitly cached after they're downloaded for the first time. network: files listed under the network: section header in the cache manifest file are white-listed resources that require a connection to the server. all requests to such resources bypass the cache, even if the user is offline. the wildcard character * can be used once. most sites need *. fallback: the fallback: section specifies fallback pages the browser should use if...
...h indicates the current condition of the cache. caches that share the same manifest uri share the same cache state, which can be one of the following: uncached a special value that indicates that an application cache object is not fully initialized. idle the application cache is not currently in the process of being updated. checking the manifest is being fetched and checked for updates. downloading resources are being downloaded to be added to the cache, due to a changed resource manifest. updateready there is a new version of the application cache available. there is a corresponding updateready 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 obsole...

Configuring servers for Ogg media - HTTP
nformation about possible media file types and the codecs used within them in our comprehensive guide to media types and formats on the web. in particular, the article on media container formats will be especially helpful when configuring serers to host media properly. handle http 1.1 byte range requests correctly in order to support seeking and playing back regions of the media that aren't yet downloaded, gecko uses http 1.1 byte-range requests to retrieve the media from the seek target position. in addition, gecko uses byte-range requests to seek to the end of the media (assuming you serve the content-length header) in order to determine the duration of the media. your server should accept the accept-ranges: bytes http header if it can accept byte-range requests. it must return 206: partial c...
...quests. it must return 206: partial content to all byte range requests; otherwise, browsers can't be sure you actually support byte range requests. your server must also return 206: partial content for the request range: bytes=0- as well. include regular key frames when the browser seeks through ogg media to a specified time, it has to seek to the nearest key frame before the seek target, then download and decode the video from there until the requested target time. the farther apart your key frames are, the longer this takes, so it's helpful to include key frames at regular intervals. by default, ffmpeg2theora uses one key frame every 64 frames (or about every 2 seconds at 30 frames per second), which works pretty well. note: of course, the more key frames you use, the larger your video file...
...r about every 2 seconds at 30 frames per second), which works pretty well. note: of course, the more key frames you use, the larger your video file is, so you may need to experiment a bit to get the right balance between file size and seek performance. consider using the preload attribute the html <audio> and <video> elements provide the preload attribute, which tells the browser to attempt to download the entire media when the page loads. without preload, the browser only downloads enough of the media to display the first video frame, and to determine the media's duration. preload is off by default, so if getting to video is the point of your web page, your users may appreciate it if you include preload in your video elements. using preload="metadata" will preload the media file's metadata an...
...isplay the first video frame, and to determine the media's duration. preload is off by default, so if getting to video is the point of your web page, your users may appreciate it if you include preload in your video elements. using preload="metadata" will preload the media file's metadata and possibly the first few frames of video. setting payload to auto tells the browser to automatically begin downloading the media as soon as the page is loaded, under the assumption that the user will play it. configuration for older firefox versions serve x-content-duration headers note: as of firefox 41, the x-content-duration header is no longer supported. see bug 1160695 for more details. the ogg format doesn't encapsulate the duration of media, so for the progress bar on the video controls to display...

Link prefetching FAQ - HTTP
a web page provides a set of prefetching hints to the browser, and after the browser is finished loading the page, it begins silently prefetching specified documents and stores them in its cache. when the user visits one of the prefetched documents, it can be served up quickly out of the browser's cache. does prefetching work with https? starting in gecko 1.9.1 (firefox 3.5), https content can be prefetched. ...
...etch requests. if a subframe contains prefetching hints, prefetching will not begin until the top-most frame and all its "child" frames finish loading. what happens if i click on a link while something is being prefetched? when the user clicks on a link, or initiates any kind of page load, link prefetching will stop and any prefetch hints will be discarded. ...
...hed document is partially downloaded, then the partial document will still be stored in the cache provided the server sent an "accept-ranges: bytes" response header. this header is typically generated by webservers when serving up static content. when the user visits a prefetched document for real, the remaining portion of the document will be fetched using a http byte-range request. what if i'm downloading something in the background? will link prefetching compete for bandwidth? yes and no. if you are downloading something using mozilla, link prefetching will be delayed until any background downloads complete. for example, if you load a bookmark group (which opens several tabs), any prefetch requests initiated by one of the bookmarked pages will not begin until all of the tabs finish loading. i...
... link prefetching needs to be disabled then there must be something wrong with the implementation. we would rather improve the implementation if it does not work correctly, than expect users to locate and tweak some obscure preference. what about folks who pay-per-byte for network bandwidth? basically, there are two ways of looking at this issue: websites can already cause things to be silently downloaded using js/dom hacks. prefetching is a browser feature; users should be able to disable it easily. it is important that websites adopt <link> tag based prefetching instead of trying to roll-in silent downloading using various js/dom hacks. the <link> tag gives the browser the ability to know what sites are up to, and we can use this information to better prioritize document prefetching. the user...

Populating the page: how browsers work - Web Performance
arse through the content available and request high priority resources like css, javascript, and web fonts. thanks to the preload scanner, we don't have to wait until the parser finds a reference to an external resource to request it. ...
...ave been downloaded. the optimizations the preload scanner provides reduce blockages. <link rel="stylesheet" src="styles.css"/> <script src="myscript.js" async></script> <img src="myimage.jpg" alt="image description"/> <script src="anotherscript.js" async></script> in this example, while the main thread is parsing the html and css, the preload scanner will find the scripts and image, and start downloading them as well. to ensure the script doesn't block the process, add the async attribute, or the defer attribute if javascript parsing and execution order is not important. waiting to obtain css doesn't block html parsing or downloading, but it does block javascript, because javascript is often used to query css properties’ impact on elements. building the cssom the second step in the critic...
...kes to parse css, construct the cssom tree, and recursively calculate computed styles. in terms of web performance optimization, there are lower hanging fruit, as the total time to create the cssom is generally less than the time it takes for one dns lookup. other processes javascript compilation while the css is being parsed and the cssom created, other assets, including javascript files, are downloading (thanks to the preload scanner). javascript is interpreted, compiled, parsed and executed. the scripts are parsed into abstract syntax trees. some browser engines take the abstract syntax tree and pass it into an interpreter, outputting bytecode which is executed on the main thread. this is known as javascript compilation. building the accessibility tree the browser also builds an accessibil...
...nd executing javascript, it is not available and therefore not able to responsd to user interactions in a timely (less than 50ms) fashion. in our example, maybe the image loaded quickly, but perhaps the anotherscript.js file was 2mb and our user's network connection was slow. in this case the user would see the page super quickly, but wouldn't be able to scroll without jank until the script was downloaded, parsed and executed. that is not a good user experience. avoid occupying the main thread, as demonstrated in this webpagetest example: in this example, the dom content load process took over 1.5 seconds, and the main thread was fully occupied that entire time, unresponsive to click events or screen taps. see also web performance ...

Understanding latency - Web Performance
the requested resource arrives at the browser. network throttling to emulate the latency of a low bandwidth network, you can use developer tools and switch to a lower end network connection. in the developer tools, under the network table, you can switch the throttling option to 2g, 3g, etc. ...
...tion. in the developer tools, under the network table, you can switch the throttling option to 2g, 3g, etc. different browser developer tools have different preset options, the characteristics emulated include download speed, upload speed, and minimum latency, or the minimum amount of type it takes to send a packet of data. ...
...kbps 150 regular 3g 750 kbps 250 kbps 100 good 3g 1.5 mbps 750 kbps 40 regular 4g/lte 4 mbps 3 mbps 20 dsl 2 mbps 1 mbps 5 wi-fi 30 mbps 15 mbps 2 network timings also, on the network tab, you can see how long each request took to complete. we can look at how long a 267.5kb svg image asset took to download. when a request is in a queue, waiting for a network connection it is considered blocked. blocking happens when there are too many simultaneous connections made to a single server over http. if all connections are in use, the browser can't download more resources until a connection is released, meaning those requests and resources are blocked. dns resolution is the time it took to do the dns ...
...taken to send the http request to the server. waiting is disk latency, the time it took for the server to complete its response. disk latency used to be the main area of performance concern. however server performance has improved as computer memory, or cpu, has improved. depending on the complexity of what is needed from the server, this can still be an issue. receiving is the time it takes to download the asset. the receiving time is determined by a combination of the network capacity and the asset file size. if the image been cached, this would have been nearly instantaneous. had we throttled, receiving could have been 43seconds! measuring latency network latency is the time it takes for a data request to get from the computer making the request, to the computer responding. including the ti...

Code snippets - Archive of obsolete content
(firefox/seamonkey) basic operations, such as page loading, with the tabbed browser, which is the heart of mozilla's browser applications cookies reading, writing, modifying, and removing cookies page loading code used to load pages, reload pages, and listen for page loads interaction between privileged and non-privileged code how to communicate from extensions to websites and vice-versa. ...
...operations, such as page loading, with the tabbed browser, which is the heart of mozilla's browser applications cookies reading, writing, modifying, and removing cookies page loading code used to load pages, reload pages, and listen for page loads interaction between privileged and non-privileged code how to communicate from extensions to websites and vice-versa. ...
...the tabbed browser, which is the heart of mozilla's browser applications cookies reading, writing, modifying, and removing cookies page loading code used to load pages, reload pages, and listen for page loads interaction between privileged and non-privileged code how to communicate from extensions to websites and vice-versa. ...

Extension Versioning, Update and Compatibility - Archive of obsolete content
<!-- one targetapplication for each application the add-on is compatible with --> <em:targetapplication> <rdf:description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> <!-- this is where this version of the add-on will be downloaded from --> <em:updatelink>https://www.mysite.com/foobar2.2.xpi</em:updatelink> <!-- a page describing what is new in this updated version --> <em:updateinfourl>http://www.mysite.com/updateinfo2.2.xhtml</em:updateinfourl> </rdf:description> </em:targetapplication> </rdf:description> </rdf:li> <rdf...
...requirements will be ignored when checking for new versions. note that https links to sites with invalid certificates or that redirect to http sites will fail for both the update.rdf and updatelink cases. updatelink using an https site with a non-builtin token ca signed certificate will fail regardless of whether or not updatehash is used. update hashes in order to verify the integrity of the downloaded xpi you may provide an updatehash entry alongside the updatelink. this should be a hash generated against the file data using one of the supported hashing algorithms (sha1, sha256, sha384 and sha512). in firefox 3 if the updatelink is not https then the hash must be made using one of the sha family of algorithms. the hashing algorithm used is put at the start of the string and separated from th...
...d from the hash by a :. <em:updatehash>sha256:78fc1d2887eda35b4ad2e3a0b60120ca271ce6e64ad2e3a0b60120ca271ce6e6</em:updatehash> note: the value of updatehash, must start with the string of hashing algorithm, it is a common error to delete this prefix, when setting new value to updatehash:sha256:78fc1d2887eda35b4ad2e3a0b60120ca271ce6e64ad2e3a0b60120ca271ce6e6 when a hash is specified the downloaded file is compared with the hash and an error shown if it does not match. there are quite a few tools you may use to generate hashes: various unix flavors include sha1sum, sha256sum and so on. windows users should consider hashtab for interactive (non-build-script) use. there are also gnu ports for win (besides usual suspects like cygwin), which are good for non-interactive use: sha256sum file...

Extension Etiquette - Archive of obsolete content
cific elements of a web page. focus don't steal focus. it's not your extension's job to take focus from the web content. if the user loads a website and they ask for focus, they should get it. overriding their request isn't very nice. about dialogs there is a default popup about dialog that is created from install.rdf data; creating a new xul about box is usually unnecessary. you can decrease download size by omitting a customized about box. make one only if you have a special feature that needs to be included — for example, a custom updater. theming if you have xul buttons in your extension that do functions similar to ones that already exist in a browser — for example, a feed reader that reloads and stops — use icons from the browser's theme. the icons makes the extension lighter, wh...
...ustom updater. theming if you have xul buttons in your extension that do functions similar to ones that already exist in a browser — for example, a feed reader that reloads and stops — use icons from the browser's theme. the icons makes the extension lighter, while providing more consistency, especially for users using different themes. extension icons unique icons are usually worth their download weight. they allow for easy identification among other extensions in the extensions manager. coding practices namespace conflicts there are many namespaces which extensions often must share with other consumers, be they other add-ons, web code, or the browser itself. these often include areas such as: object prototypes, such as string.prototype, which are often extended to add methods to na...
...avoid the dependency on other extensions, especially extensions that you didn't develop. ...

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
r developing extensions, but it is handy to have around. install extensions for firefox from the mozilla add-ons website. optional - install firebug and chromebug chromebug is used by the firebug development team to develop firebug. you can use it to help debug firefox extensions as well as to inspect and learn how the firefox ui (chrome) is constructed. you can learn more about chromebug and download it at http://getfirebug.com/wiki/index.php/chromebug_user_guide you may also find this extension to be valuable: extension developer https://addons.mozilla.org/firefox/addon/7434 developing extensions: what you need to know let’s delve into chrome, something you’ll need to know about in order to develop extensions. chrome what is chrome? “chrome”is the word used to describe all ...
...d in the content package, but putting them in the skin package has the benefit of making it possible to design guis that match specific firefox themes, and allowing theme developers to create special visual effects for extensions. first, add the skin directory and its subordinate files to your helloworld directory as shown in figure 10. the purpose of each of these files is explained in table 4. download the files icon.png and icon-small.png from the resources website and place them appropriately. fixme: figure 10: directory structure with skin package added add the skin package update chrome.manifest with the contents of listing 10. listing 10: additional content for chrome.manifest skin helloworld classic/1.0 skin/classic/ style chrome://browser/content/browser.xul chrome://helloworld/skin...
...);" /> <menuseparator /> <!-- dynamically generated menu items go here --> <menuseparator /> <menuitem label="clear sessions" oncommand="gsessionstore.clear(event);" /> </menupopup> implementing methods now we’re going to actually implement the methods we defined in the gsessionstore object, one at a time. in the interest of space, i’m not including all the code here, but you can download it from the following url: fixme: include code from xuldev: translate it and attach it to the chapter document init method the init method is as shown in listing 17. the init method first gets the sessionstore directory inside the profile directory using nsllocalfile, which we’ll refer to through the variable _dir in subsequent lines (lines 3–6); if the directory doesn’t exist, we’ll cr...

Useful Mozilla Community Sites - Archive of obsolete content
« previous the mozilla community is very rich and active. it's a very powerful tool you have when developing on top of the mozilla platform, and you should take advantage of it in order to create a truly successful add-on . amo amo (mozilla add-ons) is the official mozilla repository for add-ons. it allows you to upload, search and download all types of add-ons for mozilla applications. this is the best way to get your extension to users from all around the world. adding your extension to amo is easy. all you need is your xpi, a few screenshots (good ones will make your extension much more appealing), and a few minutes to fill a couple of forms. but this won't make your extension public right away. amo has a review process that prevents malicious, insecure or low quality extensions to ma...
... make it to the public site. your extension begins in a sandbox with limited access, and once you nominate it an editor will review it and see if it is appropriate for the public amo site, where everyone can see it and install it. the review process often takes a few weeks. just be patient and make sure your extension follows amo's policies when you nominate it. you can still get a good number of downloads while being in the sandbox. one of the main advantages of using amo is that it handles updates automatically for published add-ons. you just need to upload a new version of your extension, and once it's approved it will be pushed as an update to all your users. if you decide to host your own extension, you'll have to learn about the update system in order to push your own updates. babelzilla ...
... localized version of firefox, so you shouldn't neglect them. using babelzilla takes little time and is very valuable. mozdev mozdev.org provides free project hosting and software development tools for mozilla applications and add-ons. it is the only hosting service tailored to the needs of the mozilla community. it offers many necessary services such as bug tracking, source code repositories, download mirrors and many communication tools. there are other free hosting sites such as souceforge and google code that are also very good, but not as specialized as mozdev. you should pick the one that best fits your development needs. conclusion that's it! this is the end of the xul school tutorial. hopefully this guide has helped you get started with add-on development and you're on your way to jo...

Promises - Archive of obsolete content
son" }); let data = xhr.response; // use the response to construct form data object for the // second request. let form = new formdata; form.append("id", data.id); form.append("content", data.content); // make the second request. xhr = yield request(updateurl, { data: form }); // use the response of the second request. notifyuser(xhr.responsetext); }); downloading remote files nearly all previous methods of downloading remote files have been superseded by the much simpler downloads.jsm module. the downloads object provides a promise-based api for downloading remote files, with full support for progress tracking, pause and resume, and, optionally, integration with the download manager ui. representative example usage components.utils.import("resource:...
...es nearly all previous methods of downloading remote files have been superseded by the much simpler downloads.jsm module. the downloads object provides a promise-based api for downloading remote files, with full support for progress tracking, pause and resume, and, optionally, integration with the download manager ui. representative example usage components.utils.import("resource://gre/modules/downloads.jsm"); task.spawn(function* () { // fetch a file in the background. let download_1 = downloads.fetch(url_1, path_1); // fetch a file visible in the download manager. let download_2 = yield downloads.createdownload({ source: url_2, target: path_2, }); // add it to the downloads list used by the download manager ui. ...
...re/modules/downloads.jsm"); task.spawn(function* () { // fetch a file in the background. let download_1 = downloads.fetch(url_1, path_1); // fetch a file visible in the download manager. let download_2 = yield downloads.createdownload({ source: url_2, target: path_2, }); // add it to the downloads list used by the download manager ui. let list = yield downloads.getlist(downloads.all); list.add(download_2); // start the second download, and wait for both // downloads to complete. // this will raise an error if either download fails. yield promise.all([download_1, download_2.start()]); // do something with the saved files. dostuffwith(path_1, path_2); }); sqlite first, it’s important to note that ...

Repackaging Firefox - Archive of obsolete content
l. currently that page mentions only firefox 1.5.x, but it supports firefox 2. the pristine firefox 2 installer files (windows .exe, mac .dmg, or linux .tar.gz) for each of the locales you need. at the time of writing this document, the latest builds are here. a "distro" extension that makes the changes you desire. once you have all the ingredients, the customization process is quite easy: download the firefox installer. install the repackager tool like you would any mac application. make sure it starts up and launches the gui. put together your extension that customizes firefox. the distro extension all the changes you will want to make (for example, changing the default homepage or adding default bookmarks) can be encapsulated into a firefox extension. we call this extension a "distr...
... that you look through this tutorial, as it contains tips specific for creating extensions of this type, and there are a few options that you will need to set to ensure a smooth upgrade path for users. at the very least, don't skip the "important extension preferences" section below. sample dex the best way to get started is probably to look at a simple dex and modify it for your own purposes. download the sample. xpi files are specially crafted zip files in disguise. you can use any zip program (winzip on windows, zip on mac or linux, etc) to extract it. this xpi has the following contents chrome.manifest components/partnerbookmarks.js defaults/preferences/partner.js install.rdf locale/ar/partner.properties locale/cs/partner.properties locale/da/partner.properties locale/de/partner.propertie...
... once you have all the required pieces in place, all you need to do is launch the repackager tool and fill in the fields to set up your customized installers. the "extension" section describes your dex. click the "choose" button to select the xpi file containing your extension; the id and name fields will be filled out automatically. when repacking firefox 2.0.0.3 or lower, be sure to download the latest version of the repackager, which has an additional checkbox in this section to disable the migration wizard at startup. check this if the homepage needs to be different from the default to prevent the migration wizard from overwriting it. the "additional xpi" section lets you select a second extension to bundle into your customized installer. if you don't wish to install a second...

JavaScript Client API - Archive of obsolete content
...
...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 se...
...l or similar repository. terminology syncengine the main sync client object. it's what starts all the magic. engine governs the synchronizing of a specific set of information. e.g. there is an engine for bookmarks, tabs, history, preferences, etc. record piece of information that gets synchronized. records are transformed to wbo's, uploaded to a collection in a sync server and eventually downloaded by other sync clients. tracker entity that tracks changes to data. each engine has a corresponding tracker which listens for changes to data or events it is interested in. when something of interest occurs, it interacts with the engine to let it know something has happened and it might want to take action store entity that serves as a data store/proxy for information in an engine. the name ...

Tamarin build documentation - Archive of obsolete content
ou pass '--mac-sdk=104u' you will also get gcc/g++ 4.0. if you pass '--mac-sdk=105' or '--mac-sdk=106' you will get the gcc/g++ default for the machine you're building on. example call to build on an x86_64 machine with the 10.5 sdk: $ ../configure.py --mac-sdk=105 --target=x86_64-darwin if asc is not set, you will need to add asc.jar to the utils directory in tamarin-redux (bug 631641). download ftp://ftp.mozilla.org/pub/js/tamarin/builds/asc/latest/asc.jar put it in utils/ building tamarin for android 2.3.3 on mac public sdk/ndk setup to build tamarin for android you will need an sdk/ndk. the setup procedure below creates an android sdk/ndk entirely from publicly available sources. this sdk/ndk *must* be used if you've cloned tamarin at changeset 5844:92ad3ca84a0b or later and w...
...droid you will need an sdk/ndk. the setup procedure below creates an android sdk/ndk entirely from publicly available sources. this sdk/ndk *must* be used if you've cloned tamarin at changeset 5844:92ad3ca84a0b or later and will be using the cross-compile build method. steps to create a public sdk/ndk tree on a mac: - create an sdk/ndk top folder under your main volume named /android-public. - download the android 2.3.3 mac sdk zip file from http://developer.android.com/sdk/index.html. unzip to your sdk/ndk top folder. make sure it's named 'android-sdk-mac_86'. - download the r5b mac ndk zip file from http://developer.android.com/sdk/ndk/index.html. unzip to your sdk/ndk top folder. rename this folder to 'android-ndk'. - run the android sdk/avd manager at /android-public/android-sdk-mac_86/to...
... will require the installation of a java™ 1.4 or later jdk. a prototype self-hosting ecmascript edition 4 compiler, esc, is provided with tamarin but it is not yet capable of bootstrapping itself or building applications. esc is under active development and will be able to generate tamarin applications later this year. use the following steps to build and install the actionscript compiler. download and build the asc source code using the subversion client $ svn co http://opensource.adobe.com/svn/open...box/asc-redux/ asc $ cd asc/build/java $ ant ... jar: [jar] building jar asc\lib\asc.jar $ cd ../.. $ java -jar lib/asc.jar # shows usage you may also download the latest asc.jar from ftp://ftp.mozilla.org/pub/js/tamarin...latest/asc.jar . you should now copy asc.jar into tamar...

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
e. open the file in seamonkey (for example, by dragging it and dropping it in the navigator window, or by choosing file – open file... from seamonkey's menu bar). from seamonkey's menu bar, choose view – character encoding – unicode (utf-8). check that the text you typed looks ok with this setting. if your text editor does not support utf-8, search the internet for a better one that you can download. optional tools you can optionally use any image editor to customize the images. you can optionally use a jar tool or zip tool to package your button as a cross-platform installable (xpi) for other people to install and use. making a button there are nine easy steps. when you have completed all the steps, you will have a structure like this in the directory where you installed seamonkey: ...
...{ alert("just testing") }, } there is nothing to customize for now. save the file. the next section in this tutorial contains examples of code that you can use to make your button do something useful. explanation: this file specifies what happens when you press the button. it uses the javascript programming language, together with features provided by the application. 9. download the button image. get a context menu for the image that you see here (for example, by right-clicking it). choose save image as... from the context menu, and save it in the same custombutton directory as the files you have just created. ensure that the name of the saved file is: button-1s.png explanation: the image is in nine parts. the six parts at the left are for seamonkey's modern...
...fore 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-2s.png. the images supplied here have a 256-colour palette and a transparent background. they are in png format. some other formats will also work. here are some more images that you can download and use: restart the application to find the new button. you can repeat these steps to add as many buttons as you need. positioning buttons to position your buttons on each toolbar, you can use their position attributes in button.xul. you might have to use trial and error to find values that work well, and you might find that not all positions are possible using this technique. th...

XUL Structure - Archive of obsolete content
the mozilla rendering engine takes the content in the form of html source and transforms it into a document tree. ...
...e signed with a digital certificate and the user has granted permission to perform these operations. this chrome package registration is the way firefox extensions are able to add features to the browser. the extensions are small packages of xul files, javascript, style sheets and images packed together into a single file. these packaged files can be created by using a zip utility. when the user downloads the zipped file, the packaged files will be installed onto the user's machine. the extension will hook into the browser using a xul specific feature called an overlay which allows the xul from the extension to mesh with the xul in the browser. to the user, it may seem like the extension has modified the browser, but in reality, the code is all separate, and the extension may be easily uninstalle...
...described below. a particular package might provide one or more skins and locales, but a user can replace them with their own. in addition, the package might include several different applications, each accessible via different chrome urls. the packaging system is flexible enough so that you can include whatever parts you need and allow other parts, such as the text for different languages, to be downloaded separately. the three types of chrome packages are: content - windows and scripts the declarations of the windows and the user interface elements contained within them. these are stored in xul files, which have a .xul extension. a content package can have multiple xul files, but the main window should have a filename that is the same as the package name. for example, the editor package wi...

Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
this is by far the simplest approach. in some cases, however, you may want to use the mozilla build system to create your application. the only obvious reason for this would be if you need to implement part of your application in c++, as described in the introduction to the now classic creating custom firefox extensions with the mozilla build system. for the purposes of this article i'm using dave townsend's mccoy as an example. it's a straightforward xulrunner app that nonetheless uses most of the features any given application is likely to need. ...
... mozilla build system. for the purposes of this article i'm using dave townsend's mccoy as an example. it's a straightforward xulrunner app that nonetheless uses most of the features any given application is likely to need. building xulrunner do i need to build xulrunner? if you are just creating a xulrunner app with some c++ components, you can avoid the challenge of building xulrunner itself by downloading a prebuilt sdk. do this if at all possible and send me some of the money you save on psychiatry sessions. if you are actively modifying xulrunner as part of your development, however, you'll have to bite the bullet. for example, you may be fixing bugs in xulrunner, applying patches from bugzilla that aren't yet checked into the main repository or making your own changes to deploy as part of a ...
...d a custom-built xulrunner and read the previous section then you're way ahead of the game. you simply need to place your application's root directory directly under the mozilla root on your disk. and what's more, you can skip the following section, partially compensating you for all that extra work you put in just now. see, it all balances out in the end! building with a prebuilt sdk once you've downloaded the xulrunner sdk, you'll need a .mozconfig of your own. here's an example for mccoy: # options for client.mk. mk_add_options moz_co_projects=browser mk_add_options moz_objdir=@topsrcdir@/../mccoybase # options for 'configure' (same as command-line options). ac_add_options --with-libxul-sdk=/path/to/xulrunner-sdk ac_add_options --enable-application=mccoy you still need to get the mozilla sour...

Getting started with XULRunner - Archive of obsolete content
, and multiple other applications are written using the platform, it's a safe bet that it can be used to build a basic application. there is an article with a more complicated approach to building xulrunner applications at creating xulrunner apps with the mozilla build system. if you need to change xulrunner itself or integrate it with external binaries you may need to read that article. step 1: download xulrunner you can find a download link on the main xulrunner page here on mdn. since we are not creating any binary xpcom components, we only need to download and install the xulrunner runtime package, not the sdk. the xulrunner download for windows is a zip file, not a true install. as a developer, i like the idea that xulrunner only needs to be unzipped onto my machine. i am assuming that it ...
.... you can extract this to any location you like, but there are many places in the documentation that will assume that you have this installed in /library/frameworks. in ubuntu desktop and its variants (xubuntu, kubuntu, ...), from version 11.10 (oneiric ocelot), xulrunner is not longer maintained and doesn't exist in ubuntu repository. therefore, either you need to compile xulrunner manually or download a binary release from mozilla's ftp server. one way to achieve this is to run the following script everytime you want to install a new version: firefox_version=`grep -po "\d{2}\.\d+" /usr/lib/firefox/platform.ini` arch=`uname -p` xurl=https://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/$firefox_version/runtimes/xulrunner-$firefox_version.en-us.linux-$arch.tar.bz2 cd /opt sudo sh -c "wget...
...ents of omni.ja are available to xulrunner applications and are what make it possible to build amazing applications easily! step 3: create the application folder structure time to start a simple, bare bones application shell. call it a xul “hello world” if you want. all of what you see below can be found in the xulrunner documentation here on mdn in much more detail. hint: skip ahead and download the sample application, you can experiment with it while following this tutorial. you can download the sample application from https://github.com/matthewkastor/xulrunner-examples. please continue reading to learn the "what", "why" and "how" parts of building a xulrunner application. on windows, i created the root in a new c:\program files\myapp folder, but you can create it wherever you like, u...

Gecko Compatibility Handbook - Archive of obsolete content
in your web pages for a quick tutorial on standards. this compatibility test will be most beneficial to sites using simple code or that have updated to support standards. set up browsers for testing the various gecko-based browsers do not always contain netscape in the user-agent string. thus it's critical to verify that you are properly detecting browsers such as aol for macos. you can either download the various browsers. or, if you are using user-agent detection, you can install an extension in firefox or mozilla which allows you to "spoof" the user-agent strings of the various gecko browsers. here's how: launch mozilla or firefox. the benefit of using these browsers is that if you're only detecting netscape or netscape6 you'll see the issues right away. install the user agent switcher e...
...lled the dialog box (it should look like the screenshot below), click ok and close theoptions dialog. you can now start using the user-agent string you've just created by clicking tools | user agent switcher |the name you have chosen. you can verify the string got changed by looking under help | about. you can find the user agent strings of many gecko-based browsers here. if possible, also download the actual clients (netscape, aol, compuserve) for testing. review your results the following scenarios all relate to browser detection. for more solutions to common problems please continue reading this handbook. problem: site supports standards but does not look right try picking the internet explorer 6 user-agent string. if this works, set up your detection to serve ie 6 content to visitor...
... clicking a link results in a 404-page not found but works in internet explorer the link may use an invalid form of a relative url. change relative urls from http://directory/... to directory/.... or use absolute paths in urls such as http://example.com/directory/... verify that all hyperlinks use forward slashes (/) clicking on a link displays a "download" or displays html code instead of rendering the page correctly, but works as expected in internet explorer the web server has incorrectly specified the mime type for the content. internet explorer tries to guess the mime type of documents while gecko browsers relies upon the web server to specify the correct mime type. gecko does not try to 'sniff' the mime type for a document in order to redu...

Building a Theme - Archive of obsolete content
zipping it up: 7z a -tzip my_theme.xpi chrome chrome.manifest note: the command-line tool will update an existing zip file, not replace it - so if you have files you've deleted from your theme, be sure to remove the .xpi file before running the zip command again. now upload the .xpi file to your server, making sure it's served as application/x-xpinstall. you can link to it and allow people to download and install it. for the purposes of just testing our .xpi file we can just drag it into the add-ons manager via "tools -> add-ons manager", or open it using "file -> open file...". installing from a web page there are a variety of ways you can install extensions from web pages, including direct linking to the xpi files and using the installtrigger object. extension and web authors are encourag...
...es, including direct linking to the xpi files and using the installtrigger object. extension and web authors are encouraged to use the installtrigger method to install xpis, as it provides the best experience to users. using addons.mozilla.org mozilla add-ons is a distribution site where you can host your theme for free. your theme will be hosted on mozilla's mirror network to guarantee your download even though it might be very popular. mozilla's site also provides users easier installation, and will automatically make your newer versions available to users of your existing versions when you upload them. in addition, mozilla add-ons allows users to comment and provide feedback on your theme. it is highly recommended that you use mozilla add-ons to distribute your themes! visit https://addon...
... newer versions available to users of your existing versions when you upload them. in addition, mozilla add-ons allows users to comment and provide feedback on your theme. it is highly recommended that you use mozilla add-ons to distribute your themes! visit https://addons.mozilla.org/developers/ to create an account and begin distributing your themes! note: your theme will be passed faster and downloaded more if you have a good description and some screenshots of the theme in action. themes ______________________________ ...

Game monetization - Game development
a free game with in-app purchases (iaps.) in this case the game can be acquired without spending a dime — give the game to the players, but offer in-game currency, bonuses or benefits for real money. specific examples can include bonus levels, better weapons or spells, or refilling the energy needed to play. designing a good iap system is an art of it's own. remember that you need thousands of downloads of your game to make iaps effective — only a small fraction of players will actually pay for iaps. how small? it varies, but around one person in every thousand is about average. the more people that play your game, the higher the chance someone will pay, so your earnings heavily depend on your promotion activities. freemium games that feature iaps are often referred to a freemium — a free...
...o pay for getting advantages over other players, or when they restricted access to the next stages of the game unless the players paid. the term "pay to win" was coined and this approach is disliked by many players and devs. if you want to implement iaps try to add value to the game with something players will enjoy instead of taking it out and then charging for it. add-ons and dlcs add-ons and downloadable content are a good way to provide extra value to an already released game, but remember that you'll have to offer decent, entertaining content to attract people to buy it. a totally new set of levels with new characters, weapons and story is a good material for dlc, but to have enough sales the game itself has to be popular, or else there won't be any players interested in spending their hard...
... actively selling the games you can also try to get yourself a passive income — showing adverts and relying on previous activities related to promoting your game may benefit, but your game has to be addictive, which isn't as easy as it sounds. you still need to plan it out, and at some point you'll need a bit of luck too. if your game goes viral and people start sharing it, you can get a lot of downloads and money out of adverts. there are many companies offering advert systems — you sign up and allow them to show adverts in exchange for a percentage of the earnings. google adsense is said to be the most effective one, but it's not designed for games and it's a pretty bad practice to use it for that purpose. instead of risking of having your account closed and all the money blocked try to use...

Test your skills: Images and Form elements - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...lp — see the assessment or further help section at the bottom of this page. task one in this task, you have an image that is overflowing the box. we want the image to scale down to fit inside the box without any extra white space, but we do not mind if some part of the image is cropped. in the example below see if you can match the image above. for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. task two in this task, you have a simple form. your task is to make the following changes to the way this form looks: use attribute selectors to target the search field and button inside .myform. make the form field and button use the same text size as the rest of the form. give the form field and button 1...
...ton inside .myform. make the form field and button use the same text size as the rest of the form. give the form field and button 10 px of padding. give the button a purple background (i used rebeccapurple), white foreground, no border and rounded corners of 5px. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the ...

Test your skills: Overflow - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. task one the content is overflowing the box because it has a fixed height. keep the height but cause the box to have scrollbars only if there is enough text to cause an overflow. ...
...g the box because it has a fixed height. keep the height but cause the box to have scrollbars only if there is enough text to cause an overflow. test by removing some of the text from the html, that if there is only a small amount of text that does not overflow, no scrollbar appears. ...
... assessment or further help you can practice these examples in the interactive editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. ...

Test your skills: backgrounds and borders - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...yling to a page header: give the box a 5px black solid border, with rounded corners of 10px. add a background image (use the url balloons.jpg) and size it so that it covers the box. give the <h2> a semi-transparent black background color, and make the text white. the finished example should look like the image below. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. backgrounds and borders 2 in this task we want you to add background images, a border, and some other styling to a decorative box: give the box a 5px lightblue border, and round the top left corner 20px and the bottom right corner 40px the heading uses the star.png image as a background image, with a single...
...ckground image, with a single centered star on the left and a repeating pattern of stars on the right. make sure that the heading text does not overlay the image, and that it is centered — you will need to use techniques learned in previous lessons to achieve this. the finished example should look like the image below: try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting p...

Test your skills: position - Learn web development
the aim of this task is to get you working with the css position property and values covered in our lesson on position. you will be working through two small tasks which use different elements of the material you have just covered. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. positioning one in this task you need to position the item with a class of target to the top and right of the container, which has the 5px grey border. try updating the live code below to recreate the finished example: as an extra challenge, can you ...
...urther help section at the bottom of this page. positioning one in this task you need to position the item with a class of target to the top and right of the container, which has the 5px grey border. ...
... assessment or further help you can practice these examples in the interactive editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. ...

Styling web forms - Learn web development
ssage"> <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 directory as above. your fonts need some more processing before you start: go to the fontsq...
... unzip the provided zip file. inside the unzipped contents you will find some font files (at the time of writing, two .woff files and two .woff2 files; they might vary in the future.) copy these files into a directory called fonts, in the same directory as before. ...
...on. the css now we can dig into the css for the example. add all the code blocks shown below inside the <style> element, one after another. overall layout first, we prepare by defining our @font-face rules, and all the basic styles set on the <body> and <form> elements. ...

Test your skills: Form validation - Learn web development
length of between 5 and 20 characters, the "phone number" field a maximum length of 15 characters, and the "comment" field a maximum length of 200 characters. try submitting your form — it should refuse to submit until the above constaints are followed, and give suitable error messages. to help, you might want to consider adding some simple css to show when a form field is valid or invalid. download the starting point for this task to work in your own editor or in an online editor. form validation 2 now we want you to take the same form you saw in the previous task (use your previous answer if you want to), and add some more specific pattern validation to the first three fields using regular expressions. all of the user names in our application consist of a single letter, followed by a...
...ons are really challenging if you are new to them, but don't despair — have a go and see where you get to; there is no shame in asking for some help. you can find everything you need to answer these questions at our regular expression reference, and by searching on stack overflow. again, to help you might want to consider adding some simple css to show when a form field is valid or invalid. download the starting point for this task to work in your own editor or in an online editor. form validation 3 in our final task for this set, we are providing you with a similar example to what you saw in the accompanying article — a simple email address entry input. we would like you to use the constraint validation api, plus some form validation attributes, to program some custom error messages. ...
...pi, plus some form validation attributes, to program some custom error messages. make the input mandatory to fill in, and give it a minimum length of 10 characters. add an event listener that checks whether the inputted value is an email address, and whether it is long enough. if it doesn't look like an email address or is too short, provide the user with appropriate custom error messages. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting p...

Test your skills: HTML text basics - Learn web development
this aim of this skill test is to assess whether you've understood our html text fundamentals article. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. html text basics 1 in this task we want you to mark up the provided html using semantic heading and paragraph elements. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. html text basics 2 in this task we want you to turn the first un-marked up list into an unordered li...
...graph elements. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. html text basics 2 in this task we want you to turn the first un-marked up list into an unordered list, and the second one into an ordered list. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. html text basics 3 in this task you are provided with a paragraph, and your aim is to use some inline elements to mark up a couple of appropriate words with strong importance, and a couple with emphasis. ...
... assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. ...

Introducing asynchronous JavaScript - Learn web development
is this difficult to get to work using synchronous code? let's look at a quick example. when you fetch an image from a server, you can't return the result immediately. that means that the following (pseudocode) wouldn't work: let 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...
...y the url in, appending it to the document's <body>. however, 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. ...
... note that not all callbacks are async — some run synchronously. an example is when we use array.prototype.foreach() to loop through the items in an array (see it live, and the source): const gods = ['apollo', 'artemis', 'ares', 'zeus']; gods.foreach(function (eachname, index){ console.log(index + '. ...

Graceful asynchronous programming with Promises - Learn web development
similar to the example we looked at in the first article of the series, but we'll do it a bit differently as we get you building your own promise-based code. note: the following example will not work if you just run it directly from the file (i.e. via a file:// url). you need to run it through a local testing server, or use an online solution such as glitch or github pages. first of all, download our simple html template and the sample image file that we'll fetch. add a <script> element at the bottom of the html <body>. inside your <script> 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 pa...
... similar to when you add an event listener to an object using addeventlistener(). it doesn't run until an event occurs (when the promise fulfills). the most notable difference is that a .then() will only run once for each time it is used, whereas an event listener could be invoked multiple times. we immediately run the blob() method on this response to ensure that the response body is fully downloaded, and when it is available transform it into a blob object that we can do something with. the result of this is returned like so: response => response.blob() which is shorthand for function(response) { return response.blob(); } unfortunately, we need to do slightly more than this. fetch promises do not fail on 404 or 500 errors — only on something catasrophic like a network failu...
... promises passed to promise.all() reject, the whole block will reject. this can be very useful. imagine that we’re fetching information to dynamically populate a ui feature on our page with content. in many cases, it makes sense to receive all the data and only then show the complete content, rather than displaying partial information. let's build another example to show this in action. download a fresh copy of our page template, and again put a <script> element just before the closing </body> tag. download our source files (coffee.jpg, tea.jpg, and description.txt), or feel free to substitute your own. in our script, we'll first define a function that returns the promises we want to send to promise.all(). this would be easy if we just wanted to run the promise.all() block in...

Test your skills: variables - Learn web development
this aim of this skill test is to assess whether you've understood our storing the information you need — variables article. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version). variables 1 in this task we want you to: declare a variable called myname. initialize myname with a suitable val...
...console, in the case of the downloadable version). variables 1 in this task we want you to: declare a variable called myname. initialize myname with a suitable value, on a separate line (you can use your actual name, or something else). declare a variable called myage and initialize it with a value, on the same line. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. variables 2 in this task you need to add a new line to correct the value stored in the existing myname variable to your own name. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. variables 3 th...
... or in an online editor. variables 3 the final task for now — in this case you are provided with some existing code, which has two errors present in it. the results panel should be outputting the name chris, and a statement about how old chris will be in 20 years' time. how can you fix the problem and correct the output? try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting p...

CSS performance optimization - Learn web development
previous overview: performance next painting an unstyled page, and then repainting it once styles are parsed would be bad user experience. for this reason, css is render blocking, unless the browser knows the css is not currently needed. the browser can paint the page once it has downloaded the css and built the css object model. browsers follow a specific rendering path: paint only occurs after layout, which occurs after the render tree is created, which in turn requires both the dom and the cssom trees. to optimize the cssom construction, remove unnecessary styles, minify, compress and cache it, and split css not required at page load into additional files to reduce css render blocking. optimizing for render blocking css can scope styles to particular conditions with media qu...
...ar conditions with media queries. media queries are important for a responsive web design and help us optimize a critical rendering path. the browser blocks rendering until it parses all of these styles but will not block rendering on styles it knows it will not use, such the print stylesheets. by splitting the css into multiple files based on media queries, you can prevent render blocking during download of unused css. to create a non-blocking css link, move the not-immediately used styles, such as print styles, into separate file, add a <link> to the html mark up, and add a media query, in this case stating it's a print stylesheet. <link rel="stylesheet" href="styles.css"> <!-- blocking --> <link rel="stylesheet" href="print.css" media="print"> <!-- not blocking --> <link rel="stylesheet" href=...
...et" href="mobile.css" media="screen and (max-width: 480px)"> <!-- not blocking on large screens --> by default the browser assumes that each specified style sheet is render blocking. tell the browser when the style sheet should be applied by adding a media attribute with the media query. when the browser sees a style sheet it knows that it only needs to apply it for a specific scenario, it still downloads the stylesheet, but doesn't render block. by separating out the css into multiple files, the main render-blocking file, in this case styles.css, is much smaller, reducing the time that rendering is blocked. animating on the gpu browsers are optimized to handle css animations, and handle animating properties that do not trigger a reflow (and therefore also a repaint) very well. to improve perfo...

Working with Svelte stores - Learn web development
ierarchy. we will also see how to develop our own custom store to persist the todo information to web storage, allowing our todos to persist over page reloads. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/06-stores or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/06-stores remember to run npm install && npm run dev to start your app in development mode. repl to code along with us using the repl, start at https://svelte.dev/repl/d1fa84a5a4494366b179c87395940039?version=3.23.2 dealing with our app state we have already seen how our components can communicate with each other using props, two-...
...f you are following this guide working from the svelte repl you won't be able to complete this step. for security reasons the svelte repl works in a sandboxed environment which will not let you access web torage, and you will get a "the operation is insecure" error. in order to follow this section you'll have to clone the repo and go to the mdn-svelte-tutorial/06-stores folder or you can directly download the folder's content with npx degit opensas/mdn-svelte-tutorial/06-stores. so, to implement a custom store that saves its content to web storage, we will need a writable store that: initially reads the value from web storage, and if it's not present initializes it with a default value. whenever the value is modified, updates the store itself and also the data in local storage. moreover, b...
...define your custom css and javascript transitions. it also has several easing functions to specify the rate of change over time. have a look at the ease visualizer to explore the various ease functions available. the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/07-next-steps or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/07-next-steps remember to run npm install && npm run dev to start your app in development mode. repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2 summary in this article we added two new features: an alert component and persisting todos to web storag...

Handling common HTML and CSS problems - Learn web development
veral times. what you really want is a linter that will fit into your standard workflow with the minimum of hassle. many code editors have linter plugins. github's atom code editor for example has a rich plugin ecosystem available, with many linting options. to show you an example of how such plugins generally work: install atom (if you haven't got an up-to-date version already installed) — download it from the atom page linked above. go to atom's preferences... dialog (e.g. by choosing atom > preferences... on mac, or file > preferences... on windows/linux) and choose the install option in the left hand menu. in the search packages text field, type "lint" and press enter/return to search for linting-related packages. you should see a package called lint at the top of the list. install th...
...ent in between the opening and closing tags, and non-supporting browsers will effectively ignore the outer element and run the nested content. for example: <video id="video" controls preload="metadata" poster="img/poster.jpg"> <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4"> <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm"> <!-- offer download --> <p>your browser does not support html5 video; here is a link to <a href="video/tears-of-steel-battle-clip-medium.mp4">view the video</a> directly.</p> </video> this example includes a simple link allowing you to download the video if even the html5 video player doesn't work, so at least the user can still access the video. html5 form elements also exhibit fallback qualities — html5 in...
...zr library — this is a small javascript library that works on top of an existing javascript library like jquery or mootools. to try this example, make a 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 runnin...

Command line crash course - Learn web development
the things the command line can do, along with names of relevant tools in each case: navigate your computer’s file system along with base level tasks such as create, copy, rename and delete: move around your directory structure: cd create directories: mkdir create files (and modify their metadata): touch copy files: cp move files: mv delete files or directories: rm download files found at specific urls: curl search for fragments of text inside larger bodies of text: grep view a file's 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 — t...
...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"). ...
...owly expanding — you can expect to see more package providers as time goes on. installing node.js also installs the npm command line tool (and a supplementary npm-centric tool called npx), which offers a gateway to installing additional command line tools. node.js and npm work the same across all systems: macos, windows, and linux. install npm on your system now, by going to the url above and downloading an running a node.js installer appropriate to your operating system. if prompted, make sure to include npm as part of the installation. although we'll look at a number of different tools in the next article onwards, we'll cut our teeth on prettier. prettier is an opinionated code formatter that has "few options". fewer options tends to mean simpler. given how tooling can sometimes get out o...

Introducing a complete toolchain - Learn web development
low you to branch out your project code, creating a separate version and try out new functionality on, without those changes affecting your original code. finally, it can help you undo changes or revert your code back to a time "when it was working" if a mistake has been introduced somewhere and you are having trouble fixing it — something all developers need to do once in a while! git can be downloaded and installed via the git-scm website — download the relevant installer for your system, run it, and follow the on-screen prompts. this is all you need to do for now. you can interact with git in a number of different ways, from using the command line to issue commands, to using a git gui app to issue the same commands by pushing buttons, or even from directly inside your code editor, as se...
... getting the project code files at this point, we'll get hold of the project's code files (html, css, javascript, etc.), and put them in our src directory. we won't teach you how they work, as that is not the point of this chapter. they are merely here to run the tools on, to teach you about how they work. to get hold of the code files, visit https://github.com/remy/mdn-will-it-miss and download and unzip the contents of this repo onto your local drive somewhere. you can download the entire project as a zip file by selecting clone or download > download zip. now copy the contents of the project's src directory to your currently empty src directory. we have our project files in place. that’s all we need to do for now! note: if you want to just take our existing project a...
...this is possible because we installed all the tools locally, not globally, and highlights why it is such a powerful option. ...

CSUN Firefox Materials
websites such as online magazines with sophisticated audiences are now reporting upwards of 25% firefox usage. ...
...has a clean, no-nonsense interface." - pc magazine firefox 1.5 is a fast, free, standards compliant web browser which is rapidly gaining recognition for its fresh, streamlined approach to browsing the web. in addition to winning major awards such as pc world product of the year, firefox has attracted a huge following among savvy users who simply care enough about their web browsing experience to download a new piece of software. websites such as online magazines with sophisticated audiences are now reporting upwards of 25% firefox usage. why do the most discerning users switch to firefox? because firefox rethinks the web, and does away with many of the common annoyances that cause browsing to be difficult for ordinary people. firefox's "www for everyone" philosophy is also a great accessibility s...
...us and ctrl+minus hotkeys. the accessibility extension may be installed on top of firefox, allowing keyboard access to document structure. caret browsing allows you to move through web content one letter a time. you can even select web content and copy it to the clipboard. -- all with the keyboard moving back and forward by web page (alt+left and alt+right) occurs near-instantaneously the download manager provides keyboard access to all of your recent downloads customize your experience! many users are finding the true greatness of firefox lies in support for third party extensions. extensions are small add-ons which can change your browser experience as you see fit. extensions can easily be installed or removed with the extension manager in the tools menu. here are some examples of acces...

Testopia
nd json 2.10 todo user preferences notification emails more reports see the roadmap and bug list for more details. ...
... todo user preferences notification emails more reports see the roadmap and bug list for more details. ...
... notification emails more reports see the roadmap and bug list for more details. ...

Simple Instantbird build
should be kept in sync with simple thunderbird build, you might want to take a look at that page too. build prerequisites hardware requirements: while you can build instantbird on older hardware it can take quite a bit of time to compile on slower machines, and having 8gb of ram is recommended (though you can probably still get away with 4gb). good internet connection for the initial source download. setup: depending on your operating system you will need to carry out a different process to prepare your machine. so firstly complete the instructions for your os and then continue following these build instructions. windows build prerequisites gnu/linux build prerequisites mac os x build prerequisites tip: after completing setup for your os, and before you get the source, you can opt ...
...r 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 the path (e.g., don't use "documents and settings"). you can pick any other location, such as a new directory c:\instantbird-src. note: parts of the build process also have problems when the source ...
...ommand), 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 time, depending on your system, os, and chosen build options. linux builds on a fast box may take under 15 minutes, but windows builds on a slow box may take several hours. building purplexpcom and libpurple first download the purplexpcom code: hg clone http://hg.mozilla.org/users/florian_queze.net/purple mozilla/extensions/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. th...

Simple Thunderbird build
rd 60 or later. for thunderbird up to 59, see the old build documentation. for additional, more detailed information, see the build documentation. hardware requirements at least 4 gb of ram. 8 gb or more is recommended. while you can build thunderbird on older hardware it can take quite a bit of time to compile on slower machines with less ram. good internet connection for the initial source download. build prerequisites depending on your operating system you will need to carry out a different process to prepare your machine. so firstly complete the instructions for your os and then continue following these build instructions. windows build prerequisites gnu/linux build prerequisites macos build prerequisites mapi headers on windows: check that the mapi header files from https://ww...
...s 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 macos build prerequisites mapi headers on windows: check that the mapi header files from https://www.microsoft.com/en-us/download/details.aspx?id=12905 are installed because the mapi header files (except mapi.h) are not bundled with visual studio 2017 (windows sdk 10). you should copy 17 of the 18 header files to a windows sdk include directory so that the build process will find the files, that is c:\program files (x86)\windows kits\10\include\10.0.nnnnn.0\shared, where nnnnn is the highest number present on the system. no...
...x?id=12905 are installed because the mapi header files (except mapi.h) are not bundled with visual studio 2017 (windows sdk 10). you should copy 17 of the 18 header files to a windows sdk include directory so that the build process will find the files, that is c:\program files (x86)\windows kits\10\include\10.0.nnnnn.0\shared, where nnnnn is the highest number present on the system. note that the downloaded outlook 2010 mapi header files contain 18 fies, of which only 17 are needed. do not copy mapi.h, it is already in c:\program files (x86)\windows kits\10\include\10.0.17134.0\um\mapi.h. as of april 2019, 10.0.17134.0 is needed to compile thunderbird. assuming standard installation locations, copy these 17 files to c:\program files (x86)\windows kits\10\include\10.0.17134.0\shared. 18/10/2010 ...

Eclipse CDT
t recommended for use if your machine only has 4 gb of ram. installing eclipse regarding llvm4eclipsecdt, do not install or select this toolchain for mozilla development. this plugin is intended mainly for managed projects but we use an unmanaged project for mozilla (since it has its own build system). using this plugin will result in parts of the ui described below being hidden or disabled. download "eclipse ide for c/c++ developers" (not eclipse ide for enterprise java developers) from the eclipse download page, install it, and add 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 ...
...ce file that is compiled. this would eliminate the requirement for non-parallelized, non-silenced builds. you could also build from eclipse and get the benefits that that brings. how can i run a more recent cdt version? this can be useful if you need to get certain bug fixes, or to help with testing to make sure that new eclipse bugs that affect its use with mozilla don't get shipped. if you've downloaded an eclipse developer build then you can use eclipse's software update mechanism to update your developer snapshot to the latest nightly for that developer branch. to do that, carry out the following steps. from eclipse's "help" menu select "install new software...", then in the "install" window that opens, click "available software sites". in the window that opens, click "add", and in the prom...
...ism to update your developer snapshot to the latest nightly for that developer branch. to do that, carry out the following steps. from eclipse's "help" menu select "install new software...", then in the "install" window that opens, click "available software sites". in the window that opens, click "add", and in the prompt set name to something like "nightly" and location to something like "http://download.eclipse.org/tools/cd...s/juno/nightly" (change "juno" to the current developer branch). click "ok", then "ok" again. type "nightly" into the "work with" field and select the repository that you just added. (if it doesn't appear, close the window, reopen it from the help menu, and try again.) a "cdt main features" option should now have been added in the area below. tick this (all of its sub-optio...

Eclipse CDT Manual Setup
pse giving you annoying "resource is out of sync" messages when files change from under it due to mercurial or other external activity. select "c/c++ > build > console" and set "limit console output (number of lines)" to something large, like "1000000". eclipse cdt will try to format c/c++ code that you add as you type. however, its default formats are not a good match to mozilla's style rules. download this first pass at an eclipse formatter configuration for mozilla c/c++ coding style, and install it by opening the workspace preferences, selecting "c/c++ > code style > formatter", and then using the "import" button to import that file. the "active profile" field should then automatically change to "mozilla". depending on the area of the code that you work on, you may need to tweak this configu...
... select the "builder settings" tab, untick "use default build command", set the build command to "just-print-mozilla-build.py" or, if you're on mac, to "bash -l -c 'just-print-mozilla-build.py'" (on mac eclipse doesn't seem to pick up the environment properly, so it's necessary to invoke just-print-mozilla-build.py indirectly through bash). (just-print-mozilla-build.py is a fast script that we'll download in the next section.) (append '--objdir /path/to/objdir' if your objdir lives outside your tree) set the build directory to "${projdirpath}/path/of/your/objdir/relative/to/the/root/of/your/source". select the "behavior" tab, delete the word "all" from the "build (incremental build)" field, and disable the clean checkbox. if you can't untick "use default build command", you must change the curre...
... -w. since such a non-parallel, full build would take a very long time, we're going to cheat and set eclipse's "build" action to run jwatt's just-print-mozilla-build.py script instead. this script will complete in about 30 seconds on a warm tree (files cached in ram) if your object directory is up to date, although eclipse will take several minutes to process the "build output" that it produces. download just-print-mozilla-build.py and change its permissions to make it executable ('chmod a+x just-print-mozilla-build.py'). if you don't put just-print-mozilla-build.py somewhere in your path, then go back to the initial project properties section where you set just-print-mozilla-build.py and specify its absolute path instead of just its name. now invoke the script by clicking the build button (the...

Addon
art, this property will hold the new addon object. releasenotesuri read only nsiuri a uri for release notes for this version. screenshots read only addonscreenshot[] an array of addonscreenshot objects containing urls of preview images for the add-on. size read only integer the size of the add-on's files in bytes. for an add-on that has not yet been downloaded, this may be an estimated value. sourceuri read only nsiuri the uri that this add-on was installed from. syncguid read only string string guid to identify the add-on in sync. the guid is generated randomly and is made consistent across devices during sync. translators read only addonauthor[] an array of strings holding the translators of the add-...
... void datadirectorycallback( in string path, in error error ) parameters p...
... void datadirectorycallback( in string path, in error error ) parameters path a string representation of the addon's data dir...

Webapps.jsm
ifyupdatehandlers: function(aapp, amanifest, azippath) _getappdir: function(aid) _writefile: function(apath, adata) dogetlist: function() doexport: function(amsg, amm) doimport: function(amsg, amm) doextractmanifest: function(amsg, amm) dolaunch: function (adata, amm) launch: function launch(amanifesturl, astartpoint, atimestamp, aonsuccess, aonfailure) close: function close(aapp) canceldownload: function canceldownload(amanifesturl, aerror) startofflinecachedownload: function(amanifest, aapp, aprofiledir, aisupdate) computemanifesthash: function(amanifest) updateapphandlers: function(aoldmanifest, anewmanifest, aapp) checkforupdate: function(adata, amm) doinstall: function doinstall(adata, amm) doinstallpackage: function doinstallpackage(adata, amm) pushcontentaction: function(wi...
... denyinstall: function(adata) _setupapp: function(adata, aid) _cloneapp: function(adata, anewapp, alocalemanifest, amanifest, aid, alocalid) _writemanifestfile: function(aid, aispackage, ajsonmanifest) _nextlocalid: function() _appidformanifesturl: function(auri) makeappid: function() _saveapps: function() _readmanifests: function(adata) _ensuresufficientstorage: function(anewapp) _checkdownloadsize: function(afreebytes, anewapp) _getrequestchannel: function(afullpackagepath, aislocalfileinstall, aoldapp,) _senddownloadprogressevent: function(anewapp, aprogress) _getpackage: function(arequestchannel, aid, aoldapp, anewapp) _computefilehash: function(afilepath) _sendappliedevent: function(aapp) _openandreadpackage: function(azipfile, aoldapp, anewapp, aislocalfileinstall,) _openpac...
..., aislocalfileinstall, aisupdate,) _checksignature: function(aapp, aissigned, aislocalfileinstall) _saveetag: function(aisupdate, aoldapp, arequestchannel, ahash, amanifest) _checkorigin: function(aissigned, aoldapp, amanifest, aisupdate) _getids: function(aissigned, azipreader, aconverter, anewapp, aoldapp,) _checkforstoreidmatch: function(aisupdate, anewapp, astoreid, astoreversion) revertdownloadpackage: function(aid, aoldapp, anewapp, aisupdate, aerror) uninstall: function(amanifesturl) _promptforuninstall: function(adata) confirmuninstall: function(adata) denyuninstall: function(adata, areason = "error_unknown_failure") getself: function(adata, amm) checkinstalled: function(adata, amm) getinstalled: function(adata, amm) getnotinstalled: function(adata, amm) geticon: function(ad...

Profile Manager
firefox and other xulrunner applications store user settings and data in special folders, called profiles. firefox provides a built-in applet to manage these profiles, but it will eventually be going away (see bug 214675), so a new standalone profile manager application has been created, which works with any xulrunner application, and has many features not found in firefox's built-in version. ...
...lications store user settings and data in special folders, called profiles. firefox provides a built-in applet to manage these profiles, but it will eventually be going away (see bug 214675), so a new standalone profile manager application has been created, which works with any xulrunner application, and has many features not found in firefox's built-in version. ...
... reporting bugs profile manager bugs should be reported in bugzilla, under testing -> profilemanager. ...

Index
spr layer and an ssl library layer. the mozilla applications define a third layer where application specific processing is performed. you can find more details in the nspr reference documents. nss occassionally has to create outbound network connections, in addition to the connections requested by the application. examples are retrieving ocsp (online certificate status protocol) information or downloading a crl (certificate revocation list). however, nss doesn't have an implementation to work with network proxies. if you must support proxies in your application, you are able to register your own implementation of an http request callback interface, and nss can use your application code that supports proxies. when using hashing, encryption, and decryption functions, it is possible to stream d...
...sgroup: mozilla.dev.tech.crypto 160 nss certverify log nss all the nss verify functions except, the *verifynow() functions, take a parameter called 'certverifylog'. if you supply the log parameter, nss will continue chain validation after each error . the log tells you what the problem was with the chain and what certificate in the chain failed. 161 nss certificate download specification nss this document describes the data formats used by nss 3.x for installing certificates. this document is currently being revised and has not yet been reviewed for accuracy. 162 nss code coverage nss no summary! 163 nss config options no summary! 164 nss developer tutorial nss, tutorial no summary! 165...
... 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 netscape certificate management system: you must download the the ca certificate in addition to obtaining your own signing certificate. ca certificates for several certificate authorities are preinstalled in the communicator certificate database. when you receive an object-signing certificate for your own use, it is automatically installed in your copy of the communicator client software. communicator supports the public-key cryptogra...

Using JSS
processor-specific optimized big-number arithmetic library. not present on all platforms. more information... fort fortezza support. optional swft pkcs #11 module implementing fortezza in software. optional. if you built jss from source, you have these libraries in the mozilla/dist/<platform>/lib directory of your build tree. if you are downloading binaries, get them from the binary release locations in the above table. you need to select the right version of the components, based on the version of jss you are using. generally, it is safe to use a later version of a component than what jss was tested with. for example, although jss 4.2 was tested with nss 3.11. component versions jss version compon...
... nss 3.4.2 jss 3.1.1 nspr 4.1.2 nss 3.3.1 jss 3.1 nspr 4.1.2 nss 3.3 jss 3.0 nspr 3.5.1 jss shared library the jss shared library is jss4.dll (windows) or libjss4.so (unix). if you built jss from source, it is in mozilla/dist/<platform>/lib. if you are downloading binaries, get it from http://ftp.mozilla.org/pub/mozilla.org/security/jss/releases/. jss classes if you built jss from source, the compiled jss classes are in mozilla/dist/classes[_dbg]. you can put this directory in your classpath to run applications locally; or, you can package the class files into a jar file for easier distribution: cd mozilla/dist/classes[_dbg] zip -r ../jss4...
... http://ftp.mozilla.org/pub/mozilla.org/security/jss/releases/. jss classes if you built jss from source, the compiled jss classes are in mozilla/dist/classes[_dbg]. you can put this directory in your classpath to run applications locally; or, you can package the class files into a jar file for easier distribution: cd mozilla/dist/classes[_dbg] zip -r ../jss42.jar . if you are downloading binaries, get jss42.jar from http://ftp.mozilla.org/pub/mozilla.org/security/jss/releases/. setup your runtime environment you need to set some environment variables before building and running java applications with jss. classpath include the path containing the jss classes you built, or the path to jss42.jar. (the path to jss34.jar ends with the string "/jss42.jar". it is n...

JSS
crypto technologies it uses. you might want to read these documents: introduction to public-key cryptography. explains the basic concepts of public-key cryptography that underlie nss and jss. introduction to ssl. introduces the ssl protocol, including information about cryptographic ciphers supported by ssl and the steps involved in the ssl handshake. ...
...c concepts of public-key cryptography that underlie nss and jss. introduction to ssl. introduces the ssl protocol, including information about cryptographic ciphers supported by ssl and the steps involved in the ssl handshake. for information on downloading nss releases, see nss sources building testing. read using jss to get you started with development after you've built and downloaded it. ...
... for information on downloading nss releases, see nss sources building testing. read using jss to get you started with development after you've built and downloaded it. release notes 4.3.1 release notes 4.3 release notes older release notes build instructions building jss 4.4.x building jss 4.3.x older build instructions download or view source download binaries, source, and javadoc view the source online testing jss tests frequently asked questions jss faq information on jss planning can be found at wiki.mozilla.org, including: nss fips validation nss roadmap page community view mozilla cryptography forums... ...

NSS sources building testing
if you are a software developer and intend to contribute enhancements to nss, you should obtain the latest development snapshot of nss using mercurial/hg (a distributed source control management tool). ...
... if you are a software developer and intend to contribute enhancements to nss, you should obtain the latest development snapshot of nss using mercurial/hg (a distributed source control management tool). ...
... if you are a software developer and intend to contribute enhancements to nss, you should obtain the latest development snapshot of nss using mercurial/hg (a distributed source control management tool). ...

Network Security Services
f security-enabled client and server applications. applications built with nss can support ssl v3, tls, pkcs #5, pkcs #7, pkcs #11, pkcs #12, s/mime, x.509 v3 certificates, and other security standards. for detailed information on standards supported, see overview of nss. for a list of frequently asked questions, see the faq. nss is available under the mozilla public license. for information on downloading nss releases as tar files, see download pki source. if you're a developer and would like to contribute to nss, you might want to read the documents highlevel overview of internal details of nss and getting started with nss. documentation background information overview of nss provides a brief summary of nss and its capabilities. nss faq answers ba...
...h included root certificate. more information, extracting roots and their trust bits nss is built on top of netscape portable runtime (nspr) netscape portable runtime nspr project page. nspr reference nspr api documentation. ...
...ir trust bits nss is built on top of netscape portable runtime (nspr) netscape portable runtime nspr project page. nspr reference nspr api documentation. additional information using the window.crypto object from javascript delegation of http download for ocsp tls cipher suite discovery nss certificate download specification fips mode - an explanation format of key log files view all nss-related articles on mdn planning information on nss planning can be found at wiki.mozilla.org, including: fips validation nss roadmap page nss improvement project community view mozilla security forums... mailing list newsgro...

Getting SpiderMonkey source code
you can get the spidermonkey source code in gzipped form or directly from the mercurial repository. downloading gzipped spidermonkey source code you can download gzipped spidermonkey source code from the following urls: http://ftp.mozilla.org/pub/spidermonkey/releases/ http://ftp.mozilla.org/pub/spidermonkey/prereleases/ here is a command-line example of downloading and unzipping spidermonkey source code version 59.0: mkdir mozilla cd mozilla wget http://ftp.mozilla.org/pub/spidermonkey/prereleases/59/pre1/mozjs-59.0a1.0.tar.bz2 tar xvf mozjs-59.0a1.0.tar.bz2 these commands should work on most platforms including windows, as long as on windows you are using the mozillabuild bash shell. getting the latest spidermonkey source code from mercurial the mercurial repository at https://hg.mozill...
...1.0.tar.bz2 tar xvf mozjs-59.0a1.0.tar.bz2 these commands should work on most platforms including windows, as long as on windows you are using the mozillabuild bash shell. getting the latest spidermonkey source code from mercurial the mercurial repository at https://hg.mozilla.org/mozilla-central/ hosts the latest spidermonkey sources. mercurial is also known as hg. the following command line downloads the entire mozilla repository, including the full change history and a lot of gecko and firefox source code that isn't part of spidermonkey. it also changes to the spidermonkey directory (js/src). hg clone https://hg.mozilla.org/mozilla-central/ cd js/src to avoid getting the full change history, click the zip or gz links at https://hg.mozilla.org/index.cgi/mozilla-central/file/tip. this fetc...
...cgi/mozilla-central/file/tip. this fetches a snapshot of the current mozilla tree. if you have problems with the instructions above, you can read the full details of using mercurial to get mozilla code here. that page also contains links to several bundles, which can be useful if you have a poor network connection. getting the latest spidermonkey source code from git the following command line downloads the entire mozilla repository, including the full change history and a lot of gecko and firefox source code that isn't part of spidermonkey. it also changes to the spidermonkey directory (js/src). git clone https://github.com/mozilla/gecko-dev.git cd gecko-dev/js/src if you want a faster (about 5 times as of january 2015) download, try doing a shallow clone (no version control history). git ...

Packaging WebLock
is database is abstracted above the operating system or any particular platform's registry. the chrome registry lives in a series of rdf/xml files in the application directory of mozilla and other gecko-based browsers, where new installs, user configurable data, skins, and other information are related to one another and the application itself. javascript apis from the xpinstall install object download the jar in which the installable files appear and call registration methods that tell mozilla about the new component and the ui it uses to access the weblock component. weblock installation script is the completetrigger installation script, which can be launched from a web page. the files themselves are stored in the jar file weblock.jar, which is simple a zip file with the xpi extension that so...
...tion file, an rdf manifest for the package as a whole, and the component files (weblock.xpt and weblock4.dll). the component files are copied to the components directory of the gecko application, and the weblock subdirectory gets copied over into the chrome subdirectory, where its ui resources can be added dynamically to the xul-based gecko application. the next section shows how this process of downloading, copying and registering the necessary files from the xpi can be achieved with an xpinstall installation script. the weblock installation script the installation script is the javascript file that is stored within the xpi. it must appear at the top level of the installation archive (i.e., weblock.xpi) itself. once triggered (see the weblock trigger script), the installation script: downlo...
...a web page that actually initiates an xpinstall installation and calls the installation script that appears in the xpi. the following html specifies a complete webpage in which the trigger script is defined as a javascript function, installweblock, that gets called when the user clicks the hyperlink. ...

Setting up the Gecko SDK
« previousnext » this chapter provides basic setup information for the gecko software development kit (sdk) used to build the weblock component in this tutorial. the following four sections tell the developer how to download and organize the gecko sdk and create a new project in which components like weblock can be created. downloading and setting the sdk the gecko sdk provides all of the tools, headers, and libraries that you need to build xpcom components. the sdk is available for windows, linux, and mac operating systems, and versions for other operating systems are being developed, and can be retrieved from as a single archive from the following platform-specific locations (need correction for last version (now 1.9.2.8). there is now separate archive with gecko-sdk, just xu...
...://ftp.mozilla.org/pub/mozi...ac-1.8.0.4.zip note that the version number for the archives above is 1.8. the weblock component was built with version 1.4a, which is no longer available. you may want to check for newer versions at gecko versions prior to 1.7: http://ftp.mozilla.org/pub/mozi...illa/releases/ gecko versions after 1.8: http://ftp.mozilla.org/pub/mozi...nner/releases/ once you download the sdk, you can expand it into any convenient location. in this appendix, we set up the windows gecko sdk in c:\gecko-sdk\. if you choose some other location, remember to adjust the settings described here (e.g., in the building a microsoft visual cpp project section below) to point to this new location. when you extract the sdk, it should have the layout seen below: layout of the extracted sd...
...ion, allowing the user to be able to create commercial extensions without buying the full version of visual studio and allowing them to use their own editors. first, you need to get the sdk, this project uses the following tools to compile the extension for use. tools needed gecko 1.9.2 sdk: http://releases.mozilla.org/pub/mozi....win32.sdk.zip windows platform sdk: http://www.microsoft.com/downloads/e...displaylang=en moztools: http://ftp.mozilla.org/pub/mozilla.o...8-moztools.zip the windows platform sdk has the c++ compiler/linker needed, moztools has several tools and libraries needed for this example. setting up the tools this is probably the most difficult part. install the microsoft sdk, change all further in this example from c:\program files (x86)\ to c:\program files\ if you ...

Observer Notifications
purge all history and other information. browser:purge-domain-data sent after domain-specific history and other information have been purged. the data value is a string form of the domain. browser-lastwindow-close-requested sent when the browser wishes to close the last open browser window. when this is sent, it is possible that other windows may still be open, such as the download manager or preferences. the data value is an nsisupportsprbool. recipients may set this to true to abort the close. browser-lastwindow-close-granted sent when all interested parties have responded to the browser-lastwindow-close-requested notification and none of them requested that the close be aborted. after this is sent and handled, the browser window will close. browser-d...
...alled when the setting of a cookie was rejected by the browser (per the user's preferences) http-on-response-set-cookie this is fired only when a cookie is created due to the presence of set-cookie header in the response header of any network request. this notification will come only after the "http-on-examine-response" is fired, but it will not always appear. download manager these topics indicate that events related to the download manager have occurred. topic description download-manager-ui-done called when the list of downloads in the download manager windows finishes updating. this can happen multiple times, such as when the window first opens, when multiple items are removed, and when entering private browsing mode. dow...
...s indicate that events related to the download manager have occurred. topic description download-manager-ui-done called when the list of downloads in the download manager windows finishes updating. this can happen multiple times, such as when the window first opens, when multiple items are removed, and when entering private browsing mode. download-manager-remove-download called when a download of the list is removed or all the list is cleared. the subject will be the download id wrapped in nsisupportspruint32, for one download removed, or null for multi download remove, for example when the download list is cleared. extension manager note: these notifications are no longer available starting with gecko 2.0, instead use addonmanager.addaddonlistener() ...

nsIAlertsService
toolkit/components/alerts/nsialertsservice.idlscriptable this interface can be used to notify the user of something that does not require an immediate reaction. for example, it can be used to notify the user that their downloads are complete or that they have new mail. 1.0 66 introduced gecko 1.7 inherits from: nsisupports last changed in gecko 22 (firefox 22 / thunderbird 22 / seamonkey 2.19) by default a message is displayed in a small window that slides up from the bottom of the screen, holds there for a few seconds, then slides down. the specific appearance varies from platform to platform. note: prior firefox 22, the alerts service was only supported on windows in gecko 1.7, had no effect on mac os x in gecko 1.8, but was fully supported in mac os x i...
...o display the notification; this may happen, for example, on mac os x if growl is not installed. example simple usage the following code was used to display the above notification. var alertsservice = components.classes["@mozilla.org/alerts-service;1"]. ...
...the notification; this may happen, for example, on mac os x if growl is not installed. example simple usage the following code was used to display the above notification. var alertsservice = components.classes["@mozilla.org/alerts-service;1"]. ...

nsIParentalControlsService
read only. loggingenabled boolean true if the current user account has parental controls logging enabled. if this is true, applications should log relevant events using log() method. read only. parentalcontrolsenabled boolean true if the...
...read only. loggingenabled boolean true if the current user account has parental controls logging enabled. ...
...abled. if this is true, applications should log relevant events using log() method. read only. parentalcontrolsenabled boolean true if the current user account has parental controls restrictions enabled. read only. constants constant value description epclog_urivisit 1 this log entry type represents an access to web content. epclog_filedownload 2 this log entry type represents a file download. methods log() logs an application specific parental controls event. void log( in short aentrytype, in boolean aflag, in nsiuri asource, in nsifile atarget optional ); parameters aentrytype the type of event to log. see the constants for allowed values. aflag pass true if the event was blocked or false if it was allo...

nsIUpdatePatch
hashfunction astring the hash function to use when determining the integrity of the patch file. ...
...ed and applied to a version of this application so that it can be updated. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsidomelement serialize(in nsidomdocument updates); attributes attribute type description finalurl astring the final url this patch was being downloaded from. hashfunction astring the hash function to use when determining the integrity of the patch file. hashvalue astring the value of the hash function named in hashfunction that should be computed if the file is not corrupt. selected boolean true if this patch is currently selected as the patch to be downloaded and installed for this update transaction. false if another update is selecte...
... if another update is selected. size unsigned long the size of the patch file in bytes. state astring the state of this patch. type astring the type of patch represented by the object: "partial" a binary difference between two application versions. "complete" a complete patch containing all the replacement files to update to the new version. url astring the url from which the patch was downloaded. methods serialize() serializes the patch object into a dom element. nsidomelement serialize( in nsidomdocument updates ); parameters updates the dom document into which to serialize the patch. return value the patch object serialized into an nsidomelement. see also nsiupdate nsiupdatechecklistener nsiupdatechecker nsiapplicationupdateservice nsiupdatemanager nsiupdateprompt nsiupdatet...

Demo Addon
warning: this content is for older versions of thunderbird. much of it may no longer be relevant. see developer.thunderbird.net for newer information. overview this demo add-on has been created by jonathan protzenko for his presentation at mozcamp 2011. it shows how to achieve various goals in a working live example, such as working with gloda. you can download it at the bottom of the page. how to use after installing the demo add-on in thunderbird, right click on the toolbar and choose "customize". drag the "demo" button into the toolbar. afterwards, just click that button to show the demo overview. all three demos are explained in the following sections. only the interesting parts are shown, it's recommended that you download the add-on and have a look at its files. the basics the...
...finding messages is created. ...
...reated. ...

Mozilla
in addition, you'll find helpful articles about how the code works, how to build add-ons for mozilla applications and the like. a bird's-eye view of the mozilla framework the purpose of this article is to provide a high-level technical overview of the architecture of the extensible, object-based mozilla application framework. accessibility and mozilla accessibility is the idea that software (among other things) should be designed to be usable and, as much as possible, convenient to use for people with disabilities. ...
...or within firefox itself, such as a deadlock or infinite loop, or it may be caused by 3rd-party software such as a firefox extension, antivirus software, or even malware or a virus on your computer. http cache httpd.js ime handling guide this document explains how gecko handles ime. implementing download resuming this document describes how an embedder or other gecko/necko-using application can implement download resuming. implementing queryinterface this document describes the right way to write queryinterface(). infallible memory allocation there's ongoing work to implement infallible memory allocators. these are memory allocat...
...ing without a local build using the mozilla symbol server the mozilla project runs a symbol server for trunk firefox nightly and release builds on windows. symbols are available for at least 30 previous days worth of nightly builds, and firefox releases from 2.0.0.4. this allows debugging of those builds without forcing all users to download large debugging files. the server functions like microsoft's symbol server so the documentation there can be useful. virtualenv virtualenv is software for isolating python package environments (e.g. import paths). it is written by mozilla's own ian bicking. creating a virtualenv installs setuptools (or optionally distribu...

Responsive Design Mode - Firefox Developer Tools
ach keypress or hold and shift to change the value by 10. the mouse wheel changes the size values by 1 pixel at a time you can also change the device's screen size by grabbing the bottom-right corner of the viewport and dragging it to the size you want. orientation (portrait or landscape) - this setting persists between sessions screenshots are saved to firefox's default download location. if you checked "screenshot to clipboard" in the developer tools settings page, then the screenshot will be copied to the system clipboard. dpr (pixel ratio) - beginning with firefox 68, the dpr is no longer editable; create a custom device in order to change the dpr throttling - a drop-down list where you can select the connection throttling to apply, for example ...
...hey display in a tooltip. network throttling if you do all your development and testing using a very fast network connection, users may experience problems with your site if they are using a slower connection. in responsive design mode, you can instruct the browser to emulate, very approximately, the characteristics of various different types of networks. ...
... characteristics of various different types of networks. the characteristics emulated are: download speed upload speed minimum latency the table below lists the numbers associated with each network type, but please do not rely on this feature for exact performance measurements; it's intended to give an approximate idea of the user experience in different conditions. ...

Introduction to the File and Directory Entries API - Web APIs
api: apps with persistent uploader when a file or directory is selected for upload, you can copy the file into a local sandbox and upload a chunk at a time. the app can restart uploads after an interruption, such as the browser being closed or crashing, connectivity getting interrupted, or the computer getting shut down. video game or other apps with lots of media assets the app downloads one or several large tarballs and expands them locally into a directory structure. the app pre-fetches assets in the background, so the user can go to the next task or game level without waiting for a download. audio or photo editor with offline access or local cache (great for performance and speed) the app can write to files in place (for example, overwriting just the id3/exif tags ...
...ctory structure. the app pre-fetches assets in the background, so the user can go to the next task or game level without waiting for a download. audio or photo editor with offline access or local cache (great for performance and speed) the app can write to files in place (for example, overwriting just the id3/exif tags and not the entire file). offline video viewer the app can download large files (>1gb) for later viewing. the app can access partially downloaded files (so that you can watch the first chapter of your dvd, even if the app is still downloading the rest of the content or if the app didn't complete the download because you had to run to catch a train). offline web mail client the client downloads attachments and stores them locally. the client caches at...
...e system outside the browser. what this means is that a web app and a desktop app cannot share the same file at the same time. the api does not let your web app reach outside the browser to files that desktop apps can also work on. you can, however, export a file from a web app to a desktop app. for example, you can use the file api, create a blob, redirect an iframe to the blob, and invoke the download manager. the file and directory entries api can use different storage types an application can request temporary or persistent storage. temporary storage is easier to get, because the browser just gives it to you, but it is limited and can be deleted by the browser when it runs out of space. persistent storage, on the other hand, might offer you larger space that can only be deleted by the user...

HTMLCanvasElement.toBlob() - Web APIs
e; if you add a second parameter to the toblob() call, you can specify the image type. for example, to get the image in jpeg format: canvas.toblob(function(blob){...}, 'image/jpeg', 0.95); // jpeg at 95% quality a way to convert a canvas to an ico (mozilla only) this uses -moz-parse to convert the canvas to ico. windows xp doesn't support converting from png to ico, so it uses bmp instead. a download link is created by setting the download attribute. the value of the download attribute is the name it will use as the file name. var canvas = document.getelementbyid('canvas'); var d = canvas.width; ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closepath(); ctx.fillstyle = 'yellow'; ctx.fill(); function blobcallback(iconname) { r...
...ibute is the name it will use as the file name. ...
...yid('canvas'); var d = canvas.width; ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closepath(); ctx.fillstyle = 'yellow'; ctx.fill(); function blobcallback(iconname) { return function(b) { var a = document.createelement('a'); a.textcontent = 'download'; document.body.appendchild(a); a.style.display = 'block'; a.download = iconname + '.ico'; a.href = window.url.createobjecturl(b); } } canvas.toblob(blobcallback('passthisstring'), 'image/vnd.microsoft.icon', '-moz-parse-options:format=bmp;bpp=32'); save toblob to disk with os.file (chrome/add-on context only) this technique saves it to the desktop and is only useful in firefox chrome context or add-on code as os apis are not present on web ...

InstallTrigger - Web APIs
sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the installtrigger interface is an interesting outlier in the apps api; it's included in this api but are inherited from the old mozilla xpinstall technology for installing add-ons. it is used for triggering the download and installation of an add-on (or anything packaged in an .xpi file) from a web page, using javascript code to kick off the install process. note: this article needs to be updated somewhat. overview for very simple installations, the install methods on the installtrigger object may be all that's needed in the installation script. for more complex instal...
...omewhat. overview for very simple installations, the install methods on the installtrigger object may be all that's needed in the installation script. for more complex installations, you may need to use the install and/or file installation objects. in either case, you must trigger the installation process by creating a web page script in which installtrigger methods download the specified xpi file and "trigger" the execution of the install.js script at the top level of that xpi. the principal method on the installtrigger object is install, which downloads and installs one or more software packages archived in the xpi file format. the following is a basic example of an install trigger on a web page: xpi={'xpinstall dialog display name':'simple.xpi'}; in...
... ...

Using textures in WebGL - Web APIs
m sites for which your content has cors approval. see cross-domain textures below for details. the code that loads the texture looks like this: // // initialize a texture and load an image. // when the image finished loading copy it into the texture. // function loadtexture(gl, url) { const texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); // because images have to be download over the internet // they might take a moment until they are ready. // until then put a single pixel in the texture so we can // use it immediately. when the image has finished downloading // we'll update the texture with the contents of the image. const level = 0; const internalformat = gl.rgba; const width = 1; const height = 1; const border = 0; const srcformat = gl.rgba; ...
...rc = url; return texture; } function ispowerof2(value) { return (value & (value - 1)) == 0; } the loadtexture() routine starts by creating a webgl texture object texture by calling the webgl createtexture() function. it then uploads a single blue pixel using teximage2d(). this makes the texture immediately usable as a solid blue color even though it may take a few moments for our image to download. to load the texture from the image file, it then creates an image object and assigns the src to the url for our image we wish to use as our texture. the function we assign to image.onload will be called once the image has finished downloading. at that point we again call teximage2d() this time using the image as the source for the texture. after that we setup filtering and wrapping for the text...
... webgl1 can only use non power of 2 textures with filtering set to nearest or linear and it can not generate a mipmap for them. ...

Media events - Developer guides
playing and is restarted from the beginning, this event is sent. canplay sent when enough data is available that the media can be played, at least for a couple of frames. this corresponds to the have_future_data readystate. canplaythrough sent when the readystate changes to have_enough_data, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level. it will also be fired when playback is toggled between paused and playing. note: manually setting the currenttime will eventually fire a canplaythrough event in firefox. other browsers might not fire this event. durationchange the metadata has loaded or changed, indicating a change in duration of the media. this is sent, for example, when t...
...he playback state is no longer paused, as a result of the play method, or the autoplay attribute. playing sent when the media has enough data to start playing, after the play event, but also when recovering from being stalled, when looping media restarts, and after seeked, if it was playing before seeking. progress sent periodically to inform interested parties of progress downloading the media. information about the current amount of the media that has been downloaded is available in the media element's buffered attribute. ratechange sent when the playback speed changes. seeked sent when a seek operation completes. seeking sent when a seek operation begins. stalled sent when the user agent is trying to fetch media data, but d...
...tribute. ratechange sent when the playback speed changes. seeked sent when a seek operation completes. seeking sent when a seek operation begins. stalled sent when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming. suspend sent when loading of the media is suspended; this may happen either because the download has completed or because it has been paused for any other reason. timeupdate the time indicated by the element's currenttime attribute has changed. volumechange sent when the audio volume changes (both when the volume is set and when the muted attribute is changed). waiting sent when the requested operation (such as playback) is delayed pending the completion o...

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
default audio controls, etc. the content inside the opening and closing <audio></audio> tags is shown as a fallback in browsers that don't support the element. attributes this element's attributes include the global attributes. autoplay a boolean attribute: if specified, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading. note: sites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so should be avoided when possible. if you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). however, this can be useful when creating media elements whose source will be set at a later time, under user control. see our ...
...s default value is false. preload this enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. it may have one of the following values: none: indicates that the audio should not be preloaded. metadata: indicates that only audio metadata (e.g. length) is fetched. auto: indicates that the whole audio file can be downloaded, even if the user is not expected to use it. empty string: a synonym of the auto value. the default value is different for each browser. the spec advises it to be set to metadata. usage notes: the autoplay attribute has precedence over preload. if autoplay is specified, the browser would obviously need to start downloading the audio for playback. the browser is not forced by the ...
... sounds and crucial sound effects, and so forth. 1 00:00:00 --> 00:00:45 [energetic techno music] 2 00:00:46 --> 00:00:51 welcome to the time keeper's podcast! in this episode we're discussing which swisswatch is a wrist switchwatch? 16 00:00:52 --> 00:01:02 [laughing] sorry! i mean, which wristwatch is a swiss wristwatch? also it's a good practice to provide some content (such as the direct download link) as a fallback for viewers who use a browser in which the <audio> element is not supported: <audio controls> <source src="myaudio.mp3" type="audio/mpeg"> <source src="myaudio.ogg" type="audio/ogg"> <p> your browser doesn't support html5 audio. here is a <a href="myaudio.mp4">link to download the audio</a> instead. </p> </audio> mdn adding captions and subtitles to html5...

HTTP caching - HTTP
d network traffic and thus lessen the time needed to display a representation of a resource. by making use of http caching, web sites become more responsive. different kinds of caches caching is a technique that stores a copy of a given resource and serves it back when requested. when a web cache has a requested resource in its store, it intercepts the request and returns its copy instead of re-downloading from the originating server. this achieves several goals: it eases the load of the server that doesn’t need to serve all clients itself, and it improves performance by being closer to the client, i.e., it takes less time to transmit the resource back. for a web site, it is a major component in achieving high performance. on the other side, it has to be configured properly as not all resource...
...t browser and proxy caches, but there are also gateway caches, cdn, reverse proxy caches and load balancers that are deployed on web servers for better reliability, performance and scaling of web sites and web applications. private browser caches a private cache is dedicated to a single user. you might have seen "caching" in your browser's settings already. a browser cache holds all documents downloaded via http by the user. this cache is used to make visited documents available for back/forward navigation, saving, viewing-as-source, etc. without requiring an additional trip to the server. it likewise improves offline browsing of cached content. shared proxy caches a shared cache is a cache that stores responses to be reused by more than one user. for example, an isp or your company might ha...
...the cache-control header the cache-control http/1.1 general-header field is used to specify directives for caching mechanisms in both requests and 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 normal...

Content-Disposition - HTTP
in a multipart/form-data body, the http content-disposition general header is a header that can be used on the subpart of a multipart body to give information about the field it applies to. the subpart is delimited by the boundary defined in the content-type header. ...
...ontext. header type response header (for the main body) general header (for a subpart of a multipart body) forbidden header name no syntax as a response header for the main body the first parameter in the http context is either inline (default value, indicating it can be displayed inside the web page, or as the web page) or attachment (indicating it should be downloaded; most browsers presenting a 'save as' dialog, prefilled with the value of the filename parameters if present). content-disposition: inline content-disposition: attachment content-disposition: attachment; filename="filename.jpg" as a header for a multipart body the first parameter in the http context is always form-data. additional parameters are case-insensitive and have arguments that use q...
... 5987. when both filename and filename* are present in a single header field value, filename* is preferred over filename when both are understood. examples a response triggering the "save as" dialog: 200 ok content-type: text/html; charset=utf-8 content-disposition: attachment; filename="cool.html" content-length: 21 <html>save me!</html> this simple html file will be saved as a regular download rather than displayed in the browser. most browsers will propose to save it under the cool.html filename (by default). an example of an html form posted using the multipart/form-data format that makes use of the content-disposition header: post /test.html http/1.1 host: example.org content-type: multipart/form-data;boundary="boundary" --boundary content-disposition: form-data; name="field1" v...

HTTP headers - HTTP
ade. origin indicates where a fetch originates from. timing-allow-origin specifies origins that are allowed to see values of attributes retrieved via features of the resource timing api, which would otherwise be reported as zero due to cross-origin restrictions. do not track dnt expresses the user's tracking preference. tk indicates the tracking status of the corresponding response. downloads content-disposition indicates if the resource transmitted should be displayed inline (default behavior without the header), or if it should be handled like a download and the browser should present a “save as” dialog. message body information content-length the size of the resource, in decimal number of bytes. content-type indicates the media type of the resource. content-encodi...
...e used by the origin server to handle the request. range requests accept-ranges indicates if the server supports range requests, and if so in which unit the range can be expressed. range indicates the part of a document that the server should return. if-range creates a conditional range request that is only fulfilled if the given etag or date matches the remote resource. used to prevent downloading two ranges from incompatible version of the resource. content-range indicates where in a full body message a partial message belongs. security cross-origin-embedder-policy (coep) allows a server to declare an embedder policy for a given document. cross-origin-opener-policy (coop) prevents other domains from opening/controlling a window. cross-origin-resource-policy (corp) pre...
...ransport-security (hsts) force communication using https instead of http. upgrade-insecure-requests sends a signal to the server expressing the client’s preference for an encrypted and authenticated response, and that it can successfully handle the upgrade-insecure-requests directive. x-content-type-options disables mime sniffing and forces browser to use the type given in content-type. x-download-options the x-download-options http header indicates that the browser (internet explorer) should not display the option to "open" a file that has been downloaded from an application, to prevent phishing attacks as the file otherwise would gain access to execute in the context of the application. (note: related ms edge bug). x-frame-options (xfo) indicates whether a browser should be allowed to...

Authoring MathML - MathML
x^2}{a^2} + \frac{y^2}{b^2} = 1</x-tex> and get it automatically converted into mathml. this is still a work-in-progress, but could be improved in the future thanks to web components and shadow dom. alternatively, you can use the more traditional javascript parsing of expressions at load time as all the other tools in this section do. one simple client-side conversion tools is asciimathml. just download the asciimathml.js script and copy it to your web site. then on your web pages, add a <script> tag to load asciimathml and the mathematical expressions delimited by ` (grave accent) will be automatically parsed and converted to mathml: <html> <head> ... <script type="text/javascript" src="asciimathml.js"></script> ... </head> <body> ... <p>blah blah `x^2 + y^2 = r^2` blah ... ... latexmathml i...
...} this is a sample latexml document. \end{abstract} \section{first section} $$ \sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$ \end{document} </div> ... jqmath is another script to parse a simple latex-like syntax but which also accepts non-ascii characters like √{∑↙{n=1}↖{+∞} 6/n^2} = π to write ∑ n = 1 + ∞ 6 n 2 = π . the installation is similar: download and copy the relevant javascript and css files on your web site and reference them in your page header (see the copy-me.html file from the zip archive for an example). one of the advantage of jqmath over the previous scripts is that it will automatically add some simple css rules to do the mathematical layout and make the formulas readable on browsers with limited mathml support. command-line pr...
...n linux distributions. let's consider the former, which was originally written by paul gartside at the beginning of the mozilla mathml project and has been maintained by jacques distler since then. it's a small stream filter written in c/c++ and generated with flex and bison ; in particular it is very fast. install flex/bison as well as the classical compiler and make tools. on unix, you can then download itex2mml, build and install it: wget http://golem.ph.utexas.edu/~distler/blog/files/itextomml.tar.gz; \ tar -xzf itextomml.tar.gz; \ cd itex2mml/itex-src; make sudo make install now suppose that you have a html page with tex fragments delimited by dollars: input.html ... </head> <body> <p>$\sqrt{a^2-3c}$</p> <p>$$ {\sum_{i=1}^n i} = \frac{n(n+1)}{2} $$</p> </body> </html> then to gener...

Image file type and format guide - Web media technologies
f color spaces, not just rgb. these include cmyk, ycbcr, and others, making tiff a good choice for storing images intended for print, film, or television media. long ago, some browsers supported tiff images in web content; today, however, you need to use special libraries or browser add-ons to do so. ...
...ithin the context of web content, but it's common to provide downloadable tiff files when distributing photos and other artwork intended for precision editing or printing. mime type image/tiff file extension(s) .tif, .tiff specification adobe.io/open/standards/tiff.html browser compatibility no browsers integrate support for tiff; its value is as a download format maximum dimensions 4,294,967,295×4,294,967,295 pixels (theoretical) supported color modes color mode bits per component (d) description bilevel 1 a bilevel tiff stores 8 bits in each byte, one bit per pixel. the photometricinterpretation field specifies which of 0 and 1 are black and which i...
...r than video formats, as there are fewer options with broad support, and each tends to have a specific set of use-cases. photographs photographs typically fare well with lossy compression (depending on the encoder's configuration). this makes jpeg and webp good choices for photographs, with jpeg being more compatible but webp perhaps offering better compression. to maximize quality and minimize download time, consider providing both using a fallback with webp as the first choice and jpeg as the second. otherwise, jpeg is the safe choice for compatibility. best choice fallback webp or jpeg jpeg icons for smaller images such as icons, use a lossless format to avoid loss of detail in a size-constrained image. while lossless webp is ideal for this purpose, suppor...

Optimizing startup performance - Web Performance
an be made asynchronous, with a little work. getting asynchronous here are some suggestions for how to build your startup process to be as asynchronous as possible (whether it's a new app or a port): use the defer or async attribute on script tags needed by the web application. this allows html parsers to continue processing the document, instead of having to wait until the scripts have been downloaded and executed before continuing. if you need to decode asset files (for example, decoding jpeg files and turning them into raw texture data for later use by webgl), that's great to do in workers. when dealing with data supported by the browser (for example, decoding image data), use the decoders built into the browser or device rather than rolling your own or using one from the original codeba...
...seconds or so. ideally, you won't block anywhere near that long, but as long as you keep it below that, you should be okay. keep in mind, though, that if someone has an older, slower computer than yours, they may experience longer delays than you do! other suggestions there are other things beyond going asynchronous, which can help you improve your app's startup time. here are a few of them: download time keep in mind how long it will take the user to download your game's data. if your game is really big, really popular, or has to re-download content frequently, you should try to have as fast a hosting server as possible. you should also consider gzipping your data to make it as small as you can. gpu factors compiling shaders and uploading textures to the gpu can take time, especially for ...
... you can. gpu factors compiling shaders and uploading textures to the gpu can take time, especially for really intricate games. while this happens with native (non-web) games too, it can still be pretty annoying. avoid doing this without keeping the user apprised that the game is in fact still starting up. data size do your best to optimize the size of your game data; smaller level files will download and be processed faster than larger ones. subjective factors anything you can do to help keep the user engaged during the startup process will help make the time seem to go by faster. for games, consider having background music playing or a nice splash screen displayed. in between calculations, update your progress indicator, make changes to the display, or anything else you might be able to do...

Progressive web app structure - Progressive web apps (PWAs)
nd what benefits it brings. architecture of an app there are two main, different approaches to rendering a website — on the server or on the client. they both have their advantages and disadvantages, and you can mix the two approaches to some degree. ...
...the website is slower on an initial visit, but can be faster to navigate. mixing ssr with csr can lead to the best results — you can render a website on the server, cache its contents, and then update the rendering on the client-side as and when needed. ...
... help from service workers, streams can greatly improve the way we parse content. the app shell model requires all the resources to be available before the website can start rendering. it's different with html, as the browser is actually streaming the data already and you can see when the elements are loaded and rendered on the website. to have the javascript "operational", however, it has to be downloaded in its entirety. the streams api allows developers to have direct access to data streaming from the server — if you want to perform an operation on the data (for example, adding a filter to a video), you no longer need to wait for all of it to be downloaded and converted to a blob (or whatever) — you can start right away. it provides fine-grained control — the stream can be started, chai...

Progressive loading - Progressive web apps (PWAs)
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 rendering the html structure. we can also split css files and add media types to them: <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="print.css" media="print"> this will tell the browser to load them only when the condition is met. in our js13kpwa demo app, the css is simple enough to leave it a...
...ould go even further and move everything from style.css to the <style> tag in the <head> of index.html — 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...
...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 you can start thinking about optimizing the image loading using javascript. we'll expain this below. placeholder image instead of having all the screenshots of games referenced in <img> element src attributes, which will force the browser to download them automatically, we can do it selectively via javascript. the js13kpwa app uses a placeholder image instead, which is small and lightweight, while the final paths to target images are stored in data-src attributes: <img src='data/img/placeholder.png' data-src='data/img/slug.jpg' alt='name'> those images will be loaded via javascript after the site finishes building the html structure. the p...

Structural overview of progressive web apps - Progressive web apps (PWAs)
low when building your pwa. architecture of an app there are two main, different approaches to rendering a website — on the server or on the client. they both have their advantages and disadvantages, and you can mix the two approaches to some degree. ...
...the website is slower on an initial visit, but can be faster to navigate. the best results tend to come when you use both client-side and server-side rendering; you can render a web site on the server, cache its contents, and then update the rendering on the client side as needed. ...
... help from service workers, streams can greatly improve the way we parse content. the app shell model requires all the resources to be available before the website can start rendering. it's different with html, as the browser is actually streaming the data already and you can see when the elements are loaded and rendered on the website. to have the javascript actually work, however, it has to be downloaded in its entirety. the streams api allows developers to have direct access to data streaming from the server. if you want to perform an operation on the data (for example, adding a filter to a video), you no longer need to wait for all of it to be downloaded and converted to a blob (or whatever). instead, you can start right away. it provides fine-grained control: the stream can be started, chai...

Creating annotations - Archive of obsolete content
emit('show', [ document.location.tostring(), $(ancestor).attr("id"), $(matchedelement).text() ] ); }); }); conversely, the add-on resets the matched element on mouseout: $('*').mouseout(function() { resetmatchedelement(); }); save this code in a new file called selector.js in your add-on's data directory. because this code uses jquery, you'll need to download that as well, and save it in data. updating main.js go back to main.js and add the code to create the selector into the main function: var selector = pagemod.pagemod({ include: ['*'], contentscriptwhen: 'ready', contentscriptfile: [data.url('jquery-1.4.2.min.js'), data.url('selector.js')], onattach: function(worker) { worker.postmessage(annotatorison); sel...
... the page-mod matches all pages, so each time the user loads a page the page-mod emits the attach event, which will call the listener function we've assigned to onattach. the handler is passed a worker object. each worker represents a channel of communication between the add-on code and any content scripts running in that particular page context. for a more detailed discussion of the way page-...

Extension Packaging - Archive of obsolete content
extensions use a directory structure which can provide chrome, components, and other files to extend the functionality of an xul program. every extension must provide an install.rdf file, which contains metadata about the extension, such as its unique id, version, author, and compatibility information. ...
...n in the windows registry. note: starting in gecko 2.0, xpi files are no longer unpacked when extensions are installed. instead, the xpi itself is placed in the extensions directory, and files are loaded directly out of the package. making an extension xpi an xpi (xpinstall) file is simply a zip file, containing the extension files, with the install.rdf file at the root of the zip. users can download xpi files from a website, or from a local file, and install by opening it, or dragging it into the extension manager window. the xpi file must contain only uncompressed files, or files compressed using the deflate algorithm. the mime type recognized by firefox for xpi files is application/x-xpinstall. since most http servers are not configured to return this mime type for the .xpi extension by d...

Installing Extensions and Themes From Web Pages - Archive of obsolete content
you could also use the old style parameter block ({ "foo": aevent.target.href }) if you wanted - and didn't have an icon to use for the confirmation dialog. installtrigger.install is then called to install the item with the parameter block. return false; this last part is the most important...
...e iconurl property specifies an icon to be displayed in the installation dialog. this property is optional. if you do not specify an icon, the default icon will be used, usually a green puzzle piece. the icon can be any image format supported by firefox, and should be 32x32 pixels in size. hash the hash property specifies a cryptographic hash of the xpi file contents. this is used to verify the downloaded file, to protect against a corrupted file being served by a mirror download server, for example. you can use any hash function supported by nsicryptohash. the hash is specified as hash function:hash value, for example, sha1:28857e60d043447c5f4550853f2d40770b326a13. tostring() the tostring() property should return the xpi url, for compatibility with firefox browsers older than version 1.0, and...

Multiple item extension packaging - Archive of obsolete content
from the release of firefox 53, multiple item extension packages are no longer supported and will not load. as a consequence, these packages are no longer accepted by amo. a multiple item package provides the ability to package multiple installable bundles which can then be downloaded and installed by a user, or provided pre-packaged with an application or by an external program. every multiple item package must provide an install.rdf file (not old-style install.js!) and has the same requirements as an extension except as noted below. there is currently no feature to prevent or warn the user when installing an older version of an extension. multiple item package file layout the multiple item package file layout is a simplified form of an installable bundle and requires a file extens...
...emes. the same user interface is used for installing a multiple item package (i.e. the individual packages contained in the multiple item package will not be listed). this also allows displaying of signing information for the multiple item package. if a manager (e.g. extension / theme manager) is used, the manager will display the individual items contained by the multiple item package after the download completes in the same manner that it would if the user had chosen to install multiple individual items simultaneously. the manager will not display the multiple item package in the list of items after the download has completed. signing all extensions now require signing by mozilla. for multiple item packages, all internal add-ons need to be signed, but the container doesn't need to be signed. ...

Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
ions let’s take a look at those xpcom functions that are used especially frequently. you should be able to get the gist of how xpcom is used by looking at the sample code. you can paste almost all the sample code in this chapter into your existing test.xul file to try it out. feel free to fill in blank spots as you see fit. make sure to change file paths to match your own environment. you can download the source code used in this chapter. get window while you can use javascript to get child windows opened from the parent window, you cannot get dialogs or windows that have no relation to that window. to overcome this limitation, nsiwindowmediator makes it possible to access all of firefox's windows. get active window one thing that nsiwindowmediator is often used for is to get the active wi...
...value has been stored correctly. note: the value returned by nsiprefbranch.getcharpref() is a utf-8 bytestring; here, we are converting it to utf-16 using escape() and decodeuricomponent(). listing 19: reading a text-string setting var pref = components.classes['@mozilla.org/preferences-service;1'] .getservice(components.interfaces.nsiprefbranch); var dir = pref.getcharpref('browser.download.lastdir'); alert(decodeuricomponent(escape(dir))); writing preferences listing 20 shows the opposite operation, writing a text string to a unique preference. again, you can use about:config to check that the value has been stored correctly. note: the value for the second parameter of nsiprefbranch.setcharpref() is a utf-8 bytestring; here, we are converting a utf-16 to utf-8 using unescape() a...

Getting Started with Firefox Extensions - Archive of obsolete content
taken from the extensions page. ...
...you may have noticed that the extension file you installed is named xulschoolhello1.xpi. xpi (pronounced "zippy") stands for cross-platform installer, because the same installer file can work on all platforms firefox supports. xpis are simply zip files, but firefox recognizes the xpi extension and triggers the installation process when an xpi file is loaded. to look into the xpi file you need to download it first, not install it. if the server triggers an install when clicking on a link or button, what you need to do is right click on the install link, and choose the save link as... option. decompress the xpi file in a convenient location. issue the following command to unzip the file on linux or mac os x: unzip xulschoolhello1.xpi -d xulschoolhello1 on windows, you can change the file extens...

Security best practices in extensions - Archive of obsolete content
ides better protection for data passed over the network. json has become a popular data format for return formats for web services. be sure to read using native json to find out the correct way to handle it. apis can't be used with self-signed certificates. remote javascript and content there are a number of ways of remote scripts being used in extensions. they can be included in content, or downloaded at intervals. non-chrome urls in chrome xul or html such as the following example are not allowed: <script type="text/javascript" src="http://mysite.greatsite.com/js/wow-content.js" /> in general, scripts that are from remote sources that run in the chrome context are not acceptable, as many times the source of the script can never be 100% guaranteed, and they are vulnerable to man-in-the-mi...
.... the only legitimate environment for remote scripts is to run in a sandbox. for more information, refer to the evalinsandbox() section. evalinsandbox the evalinsandbox document explains very well how it works, so there will be no repetition here. the usefulness of it and power of how it works is best illustrated by the popular greasemonkey extension, which works on the premise of scripts being downloaded and stored locally, to be injected into the web content context via the sandbox. many extensions use the greasemonkey compiler to bundle it in their extension for convenience. if you choose to do so, beware when making edits to the bundled files so as not to break the well thought out security architecture. third-party javascript in the context of web sites, using javascript written by others...

cached - Archive of obsolete content
read only. cancelable boolean is it possible to cancel the event? read only. ...
...rty type description target eventtarget (dom element) the event target (the topmost target in the dom tree). read only. type string the type of event. read only. canbubble boolean does the event normally bubble? read only. cancelable boolean is it possible to cancel the event? read only. related events checking noupdate downloading progress cached updateready obsolete error ...

checking - Archive of obsolete content
read only. cancelable boolean is it possible to cancel the event? read only. ...
...rty type description target eventtarget (dom element) the event target (the topmost target in the dom tree). read only. type string the type of event. read only. canbubble boolean does the event normally bubble? read only. cancelable boolean is it possible to cancel the event? read only. related events checking noupdate downloading progress cached updateready obsolete error ...

progress - Archive of obsolete content
general info specification offline interface progressevent bubbles no cancelable no target applicationcache default action none properties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree). read only. type string the type of event. read only. canbubble boolean does the event normally bubble? read only. cancelable boolean is it possible to cancel the event? read only. lengthcomputable boolean specifies whether or not the total size of the transfer is known. read only. ...
...long) the number of bytes transferred since the beginning of the operation. this doesn't include headers and other overhead, but only the content itself. read only. total unsigned long (long) the total number of bytes of content that will be transferred during the operation. if the total size is unknown, this value is zero. read only. related events checking noupdate downloading progress cached updateready obsolete error ...

updateready - Archive of obsolete content
read only. ...
...rty type description target eventtarget (dom element) the event target (the topmost target in the dom tree). read only. type string the type of event. read only. canbubble boolean does the event normally bubble? read only. cancelable boolean is it possible to cancel the event? read only. related events checking noupdate downloading progress cached updateready obsolete error ...

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
+ env_user + "@imap-int.int-evry.fr/sent"); lockpref("mail.identity.id1.fcc_folder_picker_mode", "0"); lockpref("mail.identity.id1.stationery_folder", "imap://" + env_user + "@imap-int.int-evry.fr/templates"); lockpref("mail.identity.id1.tmpl_folder_picker_mode", "0"); lockpref("mail.identity.id1.valid", true); lockpref("mail.identity.id1.overrideglobal_pref", true); lockpref("mail.server.server1.download_on_biff", true); lockpref("mail.server.server1.login_at_startup", true); lockpref("mail.server.server1.username", env_user); lockpref("mail.server.server1.delete_model", 0); //smtp lockpref("mail.identity.id1.smtpserver", "smtp1"); defaultpref("mail.smtpserver.smtp1.auth_method", 0); lockpref("mail.smtpservers", "smtp1"); lockpref("mail.smtpservers", "smtp1"); lockpref("mail.smtp.defaultserver",...
...+ env_user + "@imap-int.int-evry.fr/sent"); lockpref("mail.identity.id1.fcc_folder_picker_mode", "0"); lockpref("mail.identity.id1.stationery_folder", "imap://" + env_user + "@imap-int.int-evry.fr/templates"); lockpref("mail.identity.id1.tmpl_folder_picker_mode", "0"); lockpref("mail.identity.id1.valid", true); lockpref("mail.identity.id1.overrideglobal_pref", true); lockpref("mail.server.server1.download_on_biff", true); lockpref("mail.server.server1.login_at_startup", true); lockpref("mail.server.server1.username", env_user); lockpref("mail.server.server1.delete_model", 0); //smtp defaultpref("mail.identity.id1.smtpserver", "smtp1"); defaultpref("mail.smtpserver.smtp1.auth_method", 0); defaultpref("mail.smtpservers", "smtp1"); defaultpref("mail.smtpservers", "smtp1"); defaultpref("mail.smtp.def...

Source code directories overview - Archive of obsolete content
ially, this is where the mozilla program starts and manages other components to accomplish tasks. this code contains very little platform dependent code; it relies on other components to provide platform independent interfaces to platform specific functionality. xpinstall contains the c interfaces and code for implementing the smartupdate feature from mozilla classic. xpinstall provides code for downloading files, uncompressing them and installing them in a platform independent way. xulrunner contains code for xul runner. firefox firefox is contained in the browser directory app contains contains code to build the firefox executable. base contains the xul and branding code. components contains firefox specific components like history, bookmarks, preferences, migration, sidebar.. configc...
...ebar.. configcontains build scripts for firefox. extensions contains code for making certain extensions work. installer contains the firefox installer code. locales contains the files that are translated for firefox. themes contains firefox themes. toolkit toolkit is used by the standalone products. components contains the alerts, autocomplete, command line interface, console, cookies, download manager, filepicker, history, password manager, typeaheadfind, view source, etc. content contains xul specific to the toolkit. library contains libxul work. localescontains files that are translated. mozappscontains shared application stuff. obsoletecontains obsolete stuff. profilecontains the profile manager themescontains themes as they relate to toolkit things. xreis the xul runtime en...

Getting Started - Archive of obsolete content
you can use the same version as the one you use to browse the web, but if you mess it up, it is possible that you will be unable to access your browser without uninstalling and reinstalling mozilla. for this reason we suggest that you install a second copy into a second directory (make sure that you use a different profile as stated in the release notes) extract the chrome the chrome is stored in \mozilla\chrome and the individual modules are stored in jar files. jar files are zip files with a different extension. you can open them up in your zip program the same way you open up zip files. mozilla currently comes with two skins, classic and modern. ...
...r\... \global\... \editor\... \communicator\... triggering the install from the web to install your jar file directly from the web, you need to run some javascript. <a href="javascript:installtrigger.installchrome(installtrigger.skin, 'myskin.jar', 'my skin theme')">install my skin</a> if you have jar files on your hard drive and would like to install them, then download/use this form. ...

Creating a Skin for Firefox/Getting Started - Archive of obsolete content
be sure to install the dom inspector extension as well. extract theme while you can hypothetically begin with any theme already designed for firefox, for the sake of consistency we'll speak as though everyone is editing the default firefox theme. this is located in the file classic.jar found in the firefox installation directory. a .jar file is in reality a renamed zip archive. opening the .jar files in your archive manager of choice should result in the file being automatically detected as being a zip archive. however, if your application doesn't detect classic.jar as a standard zip archive, rename the file classic.zip and continue extraction. ...
...e you have put the files in the zip folder, rename it to my_theme.jar triggering the install from the web to install the theme's jar file directly from the web, you need to run some javascript. <a href='javascript:installtrigger.installchrome(installtrigger.skin, "myskin.jar", "my skin theme")'>install my skin</a> if you have jar files on your hard drive and would like to install them, then download/use this form. you can also just open the themes window in mozilla and drag and drop your .jar file onto it. now to change your folder(s) back into a .jar well it's easy! what you do is put your folder(s) into a .zip file and then when it's compressed make the .zip into a .jar ...

Helper Apps (and a bit of Save As) - Archive of obsolete content
er the user wants if the user has decided (save to disk and open in helper are the current options the user has). helper app dialog this is our implementation of nsihelperapplauncherdialog it calls back to the nsexternalapphandler to let it know what the user picked saving to disk if a user decides to "save to disk", we just move/copy the temporary file over to the chosen location once the download completes. if an error occurs while we do this we delete the temp file and put up an error dialog. launching a helper application this is delegated to the nspiexternalapplauncher (also implemented by the nsexternalhelperapphandler): windows: launch either directly via nsiprocess or via the ::shellexecute() method depending on where the mimeinfo came from. last-ditch check for executable file...
...s happen in onstartrequest, in the helper app dialog, and as a last ditch in the launching code. limitations of nsimimeinfo no way to say "do whatever the os default is." no support for command-line arguments. no support for multiple commands connected by pipes (mostly useful on unix). ongoing work support synchronous dialogs, not just asynchronous ones (fixes many issues related to pre-downloading, content-decoding, etc). reworking the nsimimeservice api to improve the quality of the mimeinfo we get. reworking the helper app dialog to save user choices better. gnome integration for unix. future work fix the deficiencies in nsimimeinfo. better support for mailcap syntax. possible kde integration. possibly reflecting the os settings in our helper app preferences (readonly? writa...

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
a's javascript engine has built-in support for debugging, and thus can provide powerful tools for javascript developers. venkman, shown in figure 3, is a powerful, cross-platform javascript debugger that integrates with mozilla. it is usually bundled with mozilla releases; you can find it at tools -> web development -> javascript debugger. for firefox, the debugger isn't bundled; instead, you can download and install it from the venkman project page. you can also find tutorials at the development page, located at the venkman development page. figure 3. mozilla's javascript debugger the javascript debugger can debug javascript running in the mozilla browser window. it supports such standard debugging features as breakpoint management, call stack inspection, and variable/object inspection. all f...
... int readystate state of the request. possible values: value description 0 uninitialized - open() has not been called yet. 1 loading - send() has not been called yet. 2 loaded - send() has been called, headers and status are available. 3 interactive - downloading, responsetext holds the partial data. 4 completed - finished with all operations. string responsetext string containing the response. domdocument responsexml dom document containing the response. void send(variant body) initiates the request. if body is defined, it is sent as the body of the post request. bod...

Mozilla Application Framework in Detail - Archive of obsolete content
's open source initiative among thousands of internet developers and participating vendors such as netscape. the gecko browser engine offers several key benefits including: size: gecko has been designed to be lean and modular, bringing full-functionality browsing to a variety of new consumer devices. because it is small, gecko can be embedded on devices with limited footprints and it minimizes download size for desktop browsers. speed: gecko has been designed for speed and is several times faster than previous versions of internet browsing software. standards support: gecko is the first browser technology to fully implement the latest w3c standards and enables developers to build rich, dynamic web pages and web-based applications that look and run as intended across a variety of platforms and...
...rn from. documentation. web services mozilla includes built-in support for popular web services standards xml-rpc, soap, and wsdl as well as a simple xmlhttprequest object similar to the one in ie. all services are available from javascript code, which allows even simple xul+js applications to take advantage of them. mozilla's xml-rpc support includes synchronous and asynchronous requesting and downloading of data from a server. its soap support is broad and includes.... mozilla has introductory support for wsdl... mozilla engineers have written and are in the process of refining a new security model for web services that will ease the deployment of applications using web services while maintaining the security of sites inside the user's firewall. more information using the mozilla soap api (a...

Supporting per-window private browsing - Archive of obsolete content
to do this, import resource://gre/modules/privatebrowsingutils.jsm and use privatebrowsingutils.getprivacycontextfromwindow(win), passing a window object that is related to the content in question. as an example, if an add-on adds a context menu item that accesses an api that requires an nsiloadcontext, the most relevant window is the one that owns the element being targeted by the cont...
...pi that takes a privacy context, the most relevant window is the one that contains the chrome element. in some cases, there is no logical window object to use (such as when data or an action originate from some other source than web content). in these cases, it is permissable to pass null as the argument instead of a real privacy context. however, this can lead to privacy leaks (such as cache and download entries) if not used carefully. clearing any temporarily-stored private data it is permissable to store private data in non-persistent ways for the duration of a private browsing session. to be notified when such a session ends (i.e., when the last private window is closed), observe the last-pb-context-exited notification. function pbobserver() { /* clear private data */ } var os = components.cla...

Running Tamarin acceptance tests - Archive of obsolete content
n test suite requires the following steps: set the avm environment variable to the path of the avmplus executable (avmshell). note: the name of the avmshell executable varies among the build systems; use the name of the avm shell produced from the build process you used, above. set the builtinabc environment variable to the path of the generated/builtin.abc. you may build the .abc files build by downloading the latest asc.jar. the latest asc.jar can be downloaded from from ftp://ftp.mozilla.org/pub/js/tamarin...latest/asc.jar. also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/dis...exsdk/flex+sdk. set the asc environment variable, as described above. set the shellabc environment variable to the path of the generated/shell_toplevel.abc. $ cd tamarin-re...
...avm needs to point to android_shell.py which is a proxy for running the tests on the phone. the /android-public/android-vars.sh script has commented-out examples of the environment settings for running tests on the android avm shell. to recap the other environment settings: - set the builtinabc environment variable to the path of the generated/builtin.abc. - you may build the .abc files build by downloading the latest asc.jar. the latest asc.jar can be downloaded from from ftp://ftp.mozilla.org/pub/js/tamarin...latest/asc.jar. also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/display/flexsdk/flex+sdk. - set the asc environment variable, as described above. - set the shellabc environment variable to the path of the generated/shell_toplevel.abc. adb 'ad...

Running Tamarin performance tests - Archive of obsolete content
following steps: set the avm environment variable to the path of the avmshell executable. set the builtinabc environment variable to the path of the builtin.abc. (in the tamarin-redux/generated directory) set the shellabc environment variable to the path of the shell_toplevel.abc. (in tamarin-redux/generated directory) set the asc environment variable to the path of the asc.jar compiler. you may download the latest asc.jar from ftp://ftp.mozilla.org/pub/js/tamarin...latest/asc.jar. also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/dis...exsdk/flex+sdk. (optional) you may compare the performance of the avmshell to another avmshell. for example you may download or build the latest checked in avmshell to compare against a local change. to compare a build ...
... that avm needs to point to android_shell.sh which is a proxy for running the tests on the phone. the /android-public/android-vars.sh script has commented-out examples of the environment settings for running tests on the android avm shell. to recap the other environment settings: - set the builtinabc environment variable to the path of the /generated/builtin.abc. - you may build the .abc files by downloading the latest asc.jar. the latest asc.jar can be downloaded from from ftp://ftp.mozilla.org/pub/js/tamarin...latest/asc.jar. also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/dis...exsdk/flex+sdk. - set the asc environment variable, as described above. - set the shellabc environment variable to the path of the /generated/shell_toplevel.abc. adb 'adb' s...

Tamarin Build System Documentation - Archive of obsolete content
each platform until 2 minute is exceeded. the set of smoke tests can contain any shell build and any test suite (including performance). the smoke test list is constantly updated to contain the most recent failures, most frequent failures, and the newest testcases. the idea is to catch test failures in a few minutes rather than running the complete test run (1h 45m). the smoke test including downloading the shell takes about 3-4 minutes. the test phase runs all functional testcases including acceptance tests, cmdline tests, and selftests. the acceptance tests are the majority and are run on all shells (release, release-debugger, debug, debug-debugger). the test phase takes approximately 1 hour 45 minutes. the performance and deep phases do not run synchronously. the phases run when slaves ...
...buildbot/slaves directory: cd build/buildbot/slaves copy the your platform scripts directory into the scripts directory and cd into the new scripts directory: cp -r mac-intel-10_5/scripts . ...

Creating XPI Installer Modules - Archive of obsolete content
rn point to new resources, and the resources are then registered with mozilla and accessible to the user. creating a new package the package described in this section is a very simple one, but it uses the new packaging scheme and the chrome registry to make itself a piece of self-contained and redistributable software. once you have created a package like the one described here, mozilla users can download and install it in a single step. the barley package the barley package is a simple xul window with a couple of buttons and an image element. one of the buttons, labeled "show aphids", displays an alert dialog by calling a function defined in the javascript file barley.js. since we are not updating the mozilla ui to provide special access to this window (e.g., an item in the tasks menu or elsewher...
...y/content, where the main xul file and the other resources live once they are installed. package creation overview this tutorial describes the following sequence of steps for creating a new package: developing the resources organizing the resources creating the contents.rdf file making the barley install script creating a xpi you can examine (or install!) the package described here by downloading the barley xpi file and using a zip unarchiver[zip] to open it. all of the resources described in this article are in the xpi archive and can be adapted for use in your own development. developing the resources needless to say, one of the first things you will have to create is the actual software you wish to make redistributable. the barley package ui is a single xul window with an accompanyi...

Return Codes - Archive of obsolete content
age. package_folder_not_set -224 install folder not set in installation script extraction_failed -225 extraction of xpi file failed. filename_already_used -226 same filename being used in install install_cancelled -227 raised when installation is cancelled in medias res. ...
... -224 install folder not set in installation script extraction_failed -225 extraction of xpi file failed. filename_already_used -226 same filename being used in install install_cancelled -227 raised when installation is cancelled in medias res. ...

IO - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. files and streams this section describes how to access and g...
...t, however a number of methods may be used which are only of value for subdirectories. var file = io.getfile("profile", "subdirname"); for more information about using directories, see working with directories. specifically, to create a directory, see creating directories and to retrieve a list of files or subdirectories within a directory, see iterating over the files in a directory. upload and download files upload files to learn how to upload and post files to a web site, see uploading and downloading files. download files to learn how to download and save a file from a web site to disk, see downloading files. ...

Complete - Archive of obsolete content
torial as a very simple introduction to extensions. however, because it is so simple it does not support some of the usual features of extensions. this page describes how to structure the extension in a more conventional way. this page is not a step-by-step tutorial. instead it explains the missing features, and outlines how to add them. if you want to see these techniques in action, then you can download and install the complete allcustom extension: allcustom.xpi (the link is external only because this wiki does not support xpi files.) the extension does not contain any useful functions. it is just an extended code sample. to see the code, use a jar tool or zip tool to unpack the xpi file that you downloaded. for more information about developing extensions, see the main extensions page here. fe...
...erall structure, and how it implements languages and themes. overall structure this extension's internal name is allcustom. it uses this name as the default file name throughout. where you see a url in the code with no file name, the application uses this default file name and an extension appropriate for the type of file expected. the extension is supplied as a xpi, which is compressed to reduce download times. the xpi contains: install.rdf information about the extension chrome.manifest registration data for firefox etc. install.js installation script for seamonkey chrome directory containing the extension code chrome/allcustom.jar the extension jar defaults/preferences ...

Using Visual Studio as your XUL IDE - Archive of obsolete content
are nothing but xml, you can use the normal xml-editor for writing xul. go to tools > options... > text editor > file extension and add the extension "xul" with "xml editor". as you are already there, you can do the same for "xbl". 2. using xml schemas for validation and intellisense visual studio needs the xml schema for xul files. there is a very nice schema created by mihailo lalevic. you can download it at xulschema.codeplex.com under the downloads tab. you should be able to use the schema in other ide's too. there is also project that provides xml schema for install manifest files (install.rdf) - installrdfschema.codeplex.com - from the same author as a xul schema. the codeplex-page provides some instructions for installing the schema, but there is an easier way. if you already have a xml or...
...chema for install manifest files (install.rdf) - installrdfschema.codeplex.com - from the same author as a xul schema. the codeplex-page provides some instructions for installing the schema, but there is an easier way. if you already have a xml or xul file opened, visual studio will add the menu item xml to the main menu. just use xml > schemas... to add the xul.xsd from the package that you have downloaded. the other xsd files will be added automatically. visual studio will use the schema based on the namespace, so make sure your window element uses the correct xul namespace http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul. 3. xbl if you are writing your own elements in xbl, you can download a xbl schema from mozilla.doslash.org/xblschema. grab the xsd version and add it in the same...

Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
if you only want to compile the installer, install the stable release. if you want to edit scripts, you should get the quickstart pack (which includes istool, the script editor. ...
...if you only want to compile the installer, install the stable release. if you want to edit scripts, you should get the quickstart pack (which includes istool, the script editor. ...

XULRunner Hall of Fame - Archive of obsolete content
evelopment tool. build instructions pencil the pencil project's unique mission is to build a free and opensource tool for making diagrams and gui prototyping that everyone can use. source qiqqa research manager, reference manager, and pdf manager. xulrunner is embedded to provide automatic search against journal archives, automatic acquisition of bibtex information, and automatic downloading of pdfs. slimerjs slimerjs is a xulrunner application that can be launched with firefox, allowing to execute an external javascript script which can manipulate web content. its goal is to provide a tool like phantomjs, with the same api, except that it runs gecko instead of webkit, and it is not headless (but you can still use xvfb to have a headless slimerjs). sqlite manager ...
...olor lines (game). latest release: 1.2 november 2008 - source cocoapsyc.app a psyc im/chat client for mac os x (also available as a firefox extension). latest release 0.5 febuary 2010 - source daim (fr) / daim (english) superb tool for image analysis build on top of a professional imagelib. echofon for windows a twitter client. emusic remote the emusic remote makes downloading from emusic a snap. latest release: 1.0.0.2 march 2009 - source findthatfont! font managing tool for windows and linux, that helps you find the font you're looking for. latest release december 2007 flickr uploadr 3.0 upload your photos to flickr. source google adwords editor adwords editor is google's free, downloadable account management application for your computer. ...

2006-11-03 - Archive of obsolete content
ilding nsinstall on windows. no replies yet. picking an alternate search engine for a particular search large discussion about how the search engine could be imporved. firing pageshow/pagehide when users change tabs discussion about using events that could be fired when the user changes a tab. ff 1.5 hiding a user adds their "two cents" about firefox 1.5 now being easily available for download. suggestion: a built-in firefox feature a user suggests a feature to compare different versions of a webpage to see what has changed. xml in firefox is a major problem a user draws attention to what they think is a bug, but the developers say it's proper browser behaviour. what gui lib was used for developing firefox 2.0 ? a user inquires about what gui library is used for developing ...
... user suggests a feature to compare different versions of a webpage to see what has changed. xml in firefox is a major problem a user draws attention to what they think is a bug, but the developers say it's proper browser behaviour. what gui lib was used for developing firefox 2.0 ? a user inquires about what gui library is used for developing firefox 2.0. event in firefox similar to ondownloadcomplete event in ie a user asks what even can be used that is similar to the ondownloadcomplete even in ie. meetings none this week. authors sara minchella (sara) dave manley (senemanley) back to summary list ...

2006-11-04 - Archive of obsolete content
or advice about building nsinstall on windows. no replies yet. an alternate search engine for a particular search large discussion about how the search engine could be imporved. pageshow/pagehide when users change tabs discussion about using events that could be fired when the user changes a tab. 1.5 hiding a user adds their "two cents" about firefox 1.5 now being easily available for download. suggestion: a built-in firefox feature a user suggests a feature to compare different versions of a webpage to see what has changed. in firefox is a major problem a user draws attention to what they think is a bug, but the developers say it's propwer browser behaviour. gui lib was used for developing firefox 2.0 ? a user inquires about what gui library is used for developing firefox ...
...fox feature a user suggests a feature to compare different versions of a webpage to see what has changed. in firefox is a major problem a user draws attention to what they think is a bug, but the developers say it's propwer browser behaviour. gui lib was used for developing firefox 2.0 ? a user inquires about what gui library is used for developing firefox 2.0. in firefox similar to ondownloadcomplete event in ie a user asks what even can be used that is similar to the ondownloadcomplete even in ie. meetings none this week. authors sara minchella (sara) dave manley (senemanley) back to summary list ...

NPP_NewStream - Archive of obsolete content
rough npn_requestread. stype out parameter. the plugin should set this value to request a mode for the stream. for more information about each of these values, see directions in this section. np_normal (default): delivers stream data to the instance in a series of calls to npp_writeready and npp_write. np_asfileonly: saves stream data to a file in the local cache. np_asfile: file download. like np_asfileonly except that data is delivered to the plug-in as it is saved to the file (as in mode np_normal). np_seek: stream data randomly accessible by the plug-in as needed, through calls to npn_requestread. implementation note: some plugins, notably silverlight, do not set this outparam, and rely on the outparam being initialized to a default np_normal value. returns if suc...
...file in the local cache. when the stream is complete, the browser calls npp_streamasfile to deliver the path of the file to the plug-in. if the stream comes from a local file, the npp_write and npp_writeready functions are not called. npp_streamasfile is simply called immediately. this mode allows the plug-in full random access to the data using platform-specific file operations. np_asfile: file download. differs from np_asfileonly in that data is delivered to the plug-in, through a series of calls to npp_writeready and npp_write, as it is saved to the file (as in mode np_normal). when the stream is complete, the browser calls npp_streamasfile to deliver the path of the file to the plug-in. if the data in the stream comes from a file that is already local, the data is read, sent to the plug-in th...

Introduction to Public-Key Cryptography - Archive of obsolete content
single-sign on solution must address the need to interoperate with enterprise systems, such as the underlying operating system, that rely on passwords or other forms of authentication. object signing communicator supports a set of tools and technologies called object signing. object signing uses standard techniques of public-key cryptography to let users get reliable information about code they download in much the same way they can get reliable information about shrink-wrapped software. most importantly, object signing helps users and network administrators implement decisions about software distributed over intranets or the internet-for example, whether to allow java applets signed by a given entity to use specific computer capabilities on specific users' machines. the "objects" signed with ...
...de, javascript scripts, or other signed files. for more information, see "object signing". example: a software company signs software distributed over the internet to provide users with some assurance that the software is a legitimate product of that company. using certificates and digital signatures in this manner can also make it possible for users to identify and control the kind of access downloaded software has to their computers. ca certificates. used to identify cas. client and server software use ca certificates to determine what other certificates can be trusted. for more information, see "how ca certificates are used to establish trust". example: the ca certificates stored in firefox determine what other certificates that copy of firefox can authenticate. an administrator can...

Sunbird Theme Tutorial - Archive of obsolete content
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 disk space than it really needs. you might prefer to use this method only while you are developing your theme, and to use the normal method for public releases. in sunbird, use the default theme or some other them...
...y and edit the file <tt>chrome.manifest</tt>. change the line for the calendar component to: skin calendar testing jar:chrome/testing.jar!/calendar/ and make the corresponding change in any other lines that you added. save the file. use a jar tool or zip tool to pack the files in your theme directory together with your <tt>.jar</tt> file. it is usual to use maximum compression so that users can download your theme quickly. make sure that the tool does not pack any component directories. name the packed file with the <tt>.jar</tt> extension. for example, when i wrote this article i used this command in my theme directory: zip -9 testing-0.1.jar * chrome/testing.jar make this jar file available to users. installing a packaged theme install your packaged theme in the normal way, by dragging th...

Reference - Archive of obsolete content
ete operator --nickolay 14:48, 19 december 2005 (pst) reading offline? well, may be it's no so common in today's world... but is there a way to get content of jsref-1.5 or other documents as a tarball? there are still valid needs for this: computers on slow links, computers behind insane firewalls, as well as computers not connected to internet. ...
...w links, computers behind insane firewalls, as well as computers not connected to internet. unfortunately there is not an [easy] method to download content/packages of content off of devmo for 'local' browsing/viewing/printing, yet. it is in the "nice to have" category for us here, however i am unaware of anyone feverishly working on it. (there are some other priorities ahead of that, imho). if downloading the stuff is your priority you are free to field ideas/concept to the devmo mailing list for discussion, and then actually code it (or find someone to do so). thanks for your thoughts --callek 15:05, 13 january 2006 (pst) notification when reorganization is finished leandro (localiser for the portuguese wiki) would like to be emailed when the js reference reorganization has been finished. h...

Introduction to game development for the Web - Game development
rovides one way to do 2d graphics. html audio the <audio> element lets you easily play simple sound effects and music. if your needs are more involved, check out the web audio api for real audio processing power! indexeddb a powerful data storage api for maintaining user data on their own computer or device. a great way to save game state and other information locally so it doesn't have to be downloaded every time it's needed. also useful to help make your game playable even when the user isn't connected to the web (such as when they're stuck on an airplane for hours on end). javascript javascript, the programming language used on the web, is blazing fast in modern browsers and getting faster all the time. use its power to write the code for your game, or look at using technologies like emsc...
...s, and so forth. web workers workers give you the ability to spawn background threads running their own javascript code, to take advantage of modern, multi-core processors. xmlhttprequest and file api the combination of xmlhttprequest and the file api lets you send and receive any kind of data you want (don't let the "xml" throw you!) from a web server. this is a great way to do anything from downloading new game levels and artwork to transmitting non-real-time game status information back and forth. ...

Audio for Web games - Game development
rammatic 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 is the default behavior), we should be able to jump to a specific point in the...
... 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 is the default behavior), we should be able to jump to a specific point in the audio without having to download the preceding content. however, preloading is still useful — without it, there would always need to be some client-server communication required before playing can commence. concurrent audio playback a requirement of many games is the need to play more than one piece of audio at the same time; for example, there might be background music playing along with sound effects for various things ha...

Initialize the framework - Game development
...
...ng: 0; margin: 0; }</style> <script src="js/phaser.min.js"></script> </head> <body> <script> var game = new phaser.game(480, 320, phaser.canvas, null, { preload: preload, create: create, update: update }); function preload() {} function create() {} function update() {} </script> </body> </html> downloading the phaser code next, we need to go through the process of downloading the phaser source code and applying it to our html document. this tutorial uses phaser v2 — it won't work with the current version on phaser (v3). the v2 library is still available on the phaser download page, below the links for the v3 download. go to the phaser download page. choose an option that suits you best — i would recommend the min.js option as it keeps the source code smalle...

Gecko FAQ - Gecko Redirect 1
n, including a layout engine and a complementary set of browser components. however, gecko does not package all of these components alongside other interface modules in a coherent, user-friendly application (including menus, toolbars, etc.), such as firefox. mozilla.org assembles the necessary components into its applications, such as firefox, thunderbird, seamonkey, which are available for free download from mozilla.org. netscape released its own version of the browser branded as netscape navigator. other companies release their own software and hardware products that use gecko. see xulrunner hall of fame for a partial list of application that use gecko via xulrunner. third parties such as isvs and hardware vendors will pick and choose the components they want to use in their applications or ha...
...r hall of fame for a partial list of application that use gecko via xulrunner. third parties such as isvs and hardware vendors will pick and choose the components they want to use in their applications or hardware devices. certain browser components are not provided as part of gecko, such as bookmarks, history, address book, etc. however, the source for all those components is available for free download from mozilla.org. why was gecko built? the original mozilla browser, first released as navigator 1.0, was developed rapidly by a small team that was passionate about creating the next killer app, and they succeeded. now that the web has evolved, a new generation layout engine was needed upon which future products could be built. gecko enables a pioneering new class of dynamic content that is mo...

Domain sharding - MDN Web Docs Glossary: Definitions of Web-related terms
browsers limit the number of active connections for each domain. to enable concurrent downloads of assets exceeding that limit, domain sharding splits content across multiple subdomains. when multiple domains are used to serve multiple assets, browsers are able to download more resources simultaneously, resulting in a faster page load time and improved user experience. the problem with domain sharding, in terms of performance, is the cost of extra dns lookups for each domain and the overhead of establishing each tcp connection. the initial response from an http request is generally an html file listing other resources such as javascript, css, images and other media files that need to be downloaded. as browsers limit the number of active connections per domain, serving all the required re...
... for each domain and the overhead of establishing each tcp connection. the initial response from an http request is generally an html file listing other resources such as javascript, css, images and other media files that need to be downloaded. as browsers limit the number of active connections per domain, serving all the required resources from a single domain could be slow as assets need to be downloaded sequentially. with domain sharding, the required downloads are served from more than one domain, enabling the browser to simultaneously download needed resources. multiple domains, however, is an anti-pattern, as dns lookups slow initial load times. http2 supports unlimited concurrent requests making domain sharding an obsolete requirement when http/2 is enabled. see also transport layer s...

Prefetch - MDN Web Docs Glossary: Definitions of Web-related terms
dns prefetching domain lookups can be slow, especially with network latency on mobile phones. they are most relevant when there are a plethora of links to external websites that may be clicked on, like search engine results, dns prefetching resolves domain names in advance thereby speeding up load times by reducing the time associated with domain lookup at request time. ...
...that may be clicked on, like search engine results, dns prefetching resolves domain names in advance thereby speeding up load times by reducing the time associated with domain lookup at request time. <link rel="dns-prefetch" href="https://example.com/"> link prefetching link prefetching is a performance optimization technique that works by assuming which links the user is likely to click, then downloading the content of those links. if the user decides to click on one of the links, then the page will be rendered instantly as the content has already been downloaded. the prefetch hints are sent in http headers: link: ; rel=dns-prefetch, ; as=script; rel=preload, ; rel=prerender, ; as=style; rel=preload prefetch attribute value browsers will prefetch content when the prefetch...

User agent - MDN Web Docs Glossary: Definitions of Web-related terms
this is known as user agent spoofing. ...
...this is known as user agent spoofing. the user agent string can be accessed with javascript on the client side using the navigator.useragent property. ...

HTML: A good basis for accessibility - Learn web development
that is used across all the pages of our website --> <footer> <!-- footer content in here --> </footer> if you try our more modern structure example with a screen reader, you'll see that the layout markup no longer gets in the way and confuses the content readout. it is also much leaner and smaller in terms of code size, which means easier to maintain code, and less bandwidth for the user to download (particularly prevalent for those on slow connections). another consideration when creating layouts is using html5 semantic elements as seen in the above example (see content sectioning) — you can create a layout using only nested <div> elements, but it is better to use appropriate sectioning elements to wrap your main navigation (<nav>), footer (<footer>), repeating content units (<article>),...
...4:5 contrast between all those state colors and the background color. onclick events anchor tags are often abused with the onclick event to create pseudo-buttons by setting href to "#" or "javascript:void(0)" to prevent the page from refreshing. these values cause unexpected behavior when copying or dragging links, opening links in a new tab or window, bookmarking, and when javascript is still downloading, errors out, or is disabled. this also conveys incorrect semantics to assistive technologies (e.g., screen readers). in these cases, it is recommended to use a <button> instead. in general you should only use an anchor for navigation using a proper url. external links and linking to non-html resources links that open in a new tab or window via the target="_blank" declaration and links to who...

HTML: A good basis for accessibility - Learn web development
that is used across all the pages of our website --> <footer> <!-- footer content in here --> </footer> if you try our more modern structure example with a screen reader, you'll see that the layout markup no longer gets in the way and confuses the content readout. it is also much leaner and smaller in terms of code size, which means easier to maintain code, and less bandwidth for the user to download (particularly prevalent for those on slow connections). another consideration when creating layouts is using html5 semantic elements as seen in the above example (see content sectioning) — you can create a layout using only nested <div> elements, but it is better to use appropriate sectioning elements to wrap your main navigation (<nav>), footer (<footer>), repeating content units (<article>),...
...4:5 contrast between all those state colors and the background color. onclick events anchor tags are often abused with the onclick event to create pseudo-buttons by setting href to "#" or "javascript:void(0)" to prevent the page from refreshing. these values cause unexpected behavior when copying or dragging links, opening links in a new tab or window, bookmarking, and when javascript is still downloading, errors out, or is disabled. this also conveys incorrect semantics to assistive technologies (e.g., screen readers). in these cases, it is recommended to use a <button> instead. in general you should only use an anchor for navigation using a proper url. external links and linking to non-html resources links that open in a new tab or window via the target="_blank" declaration and links to who...

Mobile accessibility - Learn web development
mobile; the main ones are: control mechanisms — make sure interface controls such as buttons are accessible on mobiles (i.e., mainly touchscreen), as well as desktops/laptops (mainly mouse/keyboard). user input — make user input requirements as painless as possible on mobile (e.g., in forms, keep typing to a minimum). responsive design — make sure layouts work on mobile, conserve image download sizes, and think about the provision of images for high-resolution screens. summary of screenreader testing on android and ios the most common mobile platforms have fully functional screen readers. these function in much the same way as desktop screenreaders, except they are largely operated using touch gestures rather than key combinations. let's look at the main two: talkback on android and...
...lar, the most common problems that need to be addressed for mobile are: suitability of layouts for mobile devices. a multi-column layout won't work as well on a narrow screen, for example, and the text size may need to be increased so it is legible. such issues can be solved by creating a responsive layout using technologies such as media queries, viewport, and flexbox. conserving image sizes downloaded. in general, small screen devices won't need images that are as large as their desktop counterparts, and they are more likely to be on slow network connections. therefore, it is wise to serve smaller images to narrow screen devices as appropriate. you can handle this using responsive image techniques. thinking about high resolutions. many mobile devices have high-resolution screens, and theref...

Test your skills: The Cascade - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...rther help section at the bottom of this page. task one in this task, you need to use one of the special values we looked at in the controlling inheritance section to write a declaration in a new rule that will reset the background color back to white, without using an actual color value. in the example below see if you can match the image above. for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the ...

Test your skills: tables - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. task in the lesson we styled up a table in a rather garish manner. ...
...ways that you can achieve this, but i suggest following similar patterns as used in the tutorial to do the following things. align headings and data for columns containing numbers right. align headings and data for columns containing text left. add a top and bottom border, plus a border above the footer. stripe every odd row of the main table. for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the ...

Responsive design - Learn web development
you would take an image that was at the largest size that might be needed, and scale it down. this is still an approach used today, and in most stylesheets, you will find the following css somewhere: img { max-width: 100%; } there are obvious downsides to this approach. the image might be displayed a lot smaller than its intrinsic size, which is a waste of bandwidth — a mobile user may be downloading an image several times the size of what they actually see in the browser window. in addition, you may not want the same image aspect ratio on mobile as on desktop. for example, it might be nice to have a square image for mobile, but show the same scene as a landscape image on desktop. or, acknowledging the smaller size of an image on mobile you might want to show a different image altogether, ...
...e achieved by simply scaling down an image. responsive images, using the <picture> element and the <img> srcset and sizes attributes solve both of these problems. you can provide multiple sizes along with "hints" (meta data that describes the screen size and resolution the image is best suited for), and the browser will choose the most appropriate image for each device, ensuring that a user will download an image size appropriate for the device they are using. you can also art direct images used at different sizes, thus providing a different crop or completely different image to different screen sizes. you can find a detailed guide to responsive images in the learn html section here on mdn. responsive typography an element of responsive design not covered in earlier work was the idea of respo...

Test your skills: Form structure - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...and second two form fields into two distinct containers, each with a descriptive legend (use "personal details" for the first two, and "comment information" for the second two). mark up each text label with an appropriate element so that it is semantically associated with its respective form field. add a suitable set of structural elements around the label/field pairs to separate them out. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice this example in the interactive editor above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting poin...

Test your skills: HTML5 controls - Learn web development
this aim of this skill test is to assess whether you've understood our the html5 input types article. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. html5 controls 1 first let's explore some of the new html5 input types. create appropriate inputs for a user to update their details for: email website phone number favourite color try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. html5 controls 2 next, we want y...
...of 30, and initial value of 10. create a corresponding output element to put the current value of the slider into. give it a class of invite-output, and semantically associate it with the input. if you do this correctly, the javascript included on the page will automatically update the output value when the slider is moved. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting p...

How the Web works - Learn web development
clients are the typical web user's internet-connected devices (for example, your computer connected to your wi-fi, or your phone connected to your mobile network) and web-accessing software available on those devices (usually a web browser like firefox or chrome). servers are computers that store webpages, sites, or apps. when a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user's web browser. the other parts of the toolbox the client and server we've described above don't tell the whole story. there are many other parts involved, and we'll describe them below. for now, let's imagine that the web is a road. on one end of the road is the client, which is like your house. on the other end of the road...
...hed directly via their ip addresses. you can find the ip address of a website by typing its domain into a tool like ip checker. packets explained earlier we used the term "packets" to describe the format in which the data is sent from server to client. what do we mean here? basically, when data is sent across the web, it is sent as thousands of small chunks, so that many different web users can download the same website at the same time. if websites were sent as single big chunks, only one user could download one at a time, which obviously would make the web very inefficient and not much fun to use. ...

The web and web standards - Learn web development
ple use to consume the web, and include firefox, chrome, opera, safari, and edge. http hypertext transfer protocol, or http, is a messaging protocol that allows web browsers to communicate with web servers (where web sites are stored). a typical conversation goes something like "hello web server. can you give me the files i need to render bbc.co.uk"? "sure thing web browser — here you go" [downloads files and renders web page] the actual syntax for http messages (called requests and responses) is not that human-readable, but this gives you the basic idea. html, css, and javascript html, css, and javascript are the main three technologies you'll use to build a website: hypertext markup language, or html, is a markup language consisting of different elements you can wrap (mark up) con...
...ed it to. libraries and frameworks built on top of javascript that allow you to build certain types of web site much more quickly and effectively. so-called "linters", which take a set of rules, look at your code, and highlight places where you haven't followed the rules properly. minifiers, which remove all the whitespace from your code files to make it so that they are smaller and therefore download from the server more quickly. server-side languages and frameworks html, css, and javascript are front-end (or client-side) languages, which means they are run by the browser to produce a website front-end that your users can use. there are another class of languages called back-end (or server-side) languages, meaning that they are run on the server before the result is then sent to the brows...

Test your skills: Advanced HTML text - Learn web development
the aim of this skill test is to assess whether you've understood our advanced text formatting article. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. advanced html text 1 in this task we want you to turn the provided animals and their definitions into a description list. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. advanced html text 2 in this task we want you to add some semantics to the provided html as foll...
... quote is taken from accessibility. semantically mark up "html" and "css" as acronyms, providing expansions as tooltips. semantically associate machine-readable dates with the dates in the text. use subscript and superscript to provide correct semantics for the chemical formulae and dates, and make them display correctly. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting p...

From object to iframe — other embedding technologies - Learn web development
a website stored in individual html pages. these were embedded in a master document called a frameset, which allowed you to specify the area on the screen that each frame filled, rather like sizing the columns and rows of a table. these were considered the height of coolness in the mid to late 90s, and there was evidence that having a webpage split up into smaller chunks like this was better for download speeds — especially noticeable with network connections being so slow back then. they did however have many problems, which far outweighed any positives as network speeds got faster, so you don't see them being used anymore. a little while later (late 90s, early 2000s), plugin technologies became very popular, such as java applets and flash — these allowed web developers to embed rich conten...
...ed successfully as fallback content for html5 video, for a time, but this is increasingly being seen as not necessary. now let's look at an <object> example that embeds a pdf into a page (see the live example and the source code): <object data="mypdf.pdf" type="application/pdf" width="800" height="1200" typemustmatch> <p>you don't have a pdf plugin, but you can <a href="mypdf.pdf">download the pdf file. </a> </p> </object> pdfs were a necessary stepping stone between paper and digital, but they pose many accessibility challenges and can be hard to read on small screens. they do still tend to be popular in some circles, but it is much better to link to them so they can be downloaded or read on a separate page, rather than embedding them in a webpage. the case against plugins...

Responsive images - Learn web development
iginal size (a raster image is a set number of pixels wide and a set number of pixels tall, as we saw when we looked at vector graphics). this is called the resolution switching problem. conversely, it is unnecessary to display a large image on a screen significantly smaller than the size it was meant for. doing so can waste bandwidth; in particular, mobile users don't want to waste bandwidth by downloading a large image intended for desktop, when a small image would do for their device. ideally, you would have multiple resolutions available and serve the appropriate size depending upon the device accessing the data on the website. to make things more complicated, some devices have high resolution screens that need larger images than you might expect to display nicely. this is essentially the sa...
...cture> element. this code allows 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...

Video and Audio APIs - Learn web development
rammatically — for example htmlmediaelement.play(), htmlmediaelement.pause(), etc. this interface is available to both <audio> and <video> elements, as the features you'll want to implement are nearly identical. let's go through an example, adding features as we go. our finished example will look (and function) something like the following: getting started to get started with this example, download our media-player-start.zip and unzip it into a new directory on your hard drive. if you downloaded our examples repo, you'll find it in javascript/apis/video-audio/start/ at this point, if you load the html you should see a perfectly normal html5 video player, with the native controls rendered. exploring the html open the html index file. you'll see a number of features; the html is dominated ...
... 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 has a "play" icon displayed on it. icon fonts are very cool for many reasons — cutting down on http requests because you don't need to download those icons as image files, great scalability, and the fact that you can use text properties to style them — like color and text-shadow. last but not least, let's look at the css for the timer: .timer { line-height: 38px; font-size: 10px; font-family: monospace; text-shadow: 1px 1px 0px black; color: white; flex: 5; position: relative; } .timer div { position: absolute; bac...

Measuring performance - Learn web development
is performing, both for mobile and desktop. this is a good start for getting an idea about what you are already doing well and what could be improved. at the time of writing, mdn's performance report summary looks similar to the following: a performance report contains information about things like how long a user has to wait before anything is displayed on the page, how many bytes need to be downloaded to display a page, and much more. it also lets you know it the measured values are considered good or bad. webpagetest.org is another example of a tool that automatically tests your site and returns useful metrics. try running your favorite website now, on both webpagetest.org and pagespeed insights, and see what the scores are. network tools most browsers have tools available that you can ...
...t automatically tests your site and returns useful metrics. try running your favorite website now, on both webpagetest.org and pagespeed insights, and see what the scores are. network tools most browsers have tools available that you can use to run against loaded pages and determine how they are performing. for example, the firefox network monitor returns detailed information on all the assets downloaded form the network, along with a time graph that shows how long each one took to download. you can also use the performance monitor to measure the performance of a web app or site's user interface as you perform different actions. this indicates the features that might be slowing down your web app or site. conclusion this article provided a brief overview of the web performance metrics to ...

The "why" of web performance - Learn web development
al india with limited coverage or no coverage. the site will be very slow to load—if it loads at all—with blocking scripts possibly timing out, and adverse cpu impact causing browser crashes if it does load. a 22.6 mb site could take up to 83 seconds to load on a 3g network, with domcontentloaded (meaning the site's base html structure) at 31.86 seconds. and it isn't just the time taken to download that is a major problem. a lot of countries still have internet connections that bill per megabyte. our example 22.6 mb cnn.com experience would cost about 11% of the average indian's daily wage to download. from a mobile device in northwest africa, it might cost two days of an average salary. and if this site were loaded on a us carrier's international roaming plan? the costs would make anyone ...
... a conversion rate is the rate at which site visitors perform a measured or desired action. ...

Properly configuring server MIME types - Learn web development
es? mime types describe the media type of content either in email or served by web servers or web applications and are intended to help guide a web browser in how the content is to be processed and displayed. examples of mime types are: text/html for normal web pages text/plain for plain text text/css for cascading style sheets text/javascript for scripts application/octet-stream meaning "download this file" application/x-java-applet for java applets application/pdf for pdf documents technical background registered values for mime types are available in iana | mime media types. the http specification defines a superset of mime which is used to describe the media types used on the web. why are correct mime types important? if the web server or application reports an incorrect mime t...
...no longer available to the author. security some content types, such as executable programs, are inherently unsafe. for this reason these mime types are usually restricted in terms of what actions a web browser will take when given content of that type. an executable program should not be executed on the user's computer and at most should cause a dialog to appear asking the user if they wish to download the file. mime type guessing has led to security exploits in internet explorer which were based upon a malicious author incorrectly reporting a mime type of a dangerous file as a safe type. this bypassed the normal download dialog resulting in internet explorer guessing that the content was an executable program and then running it on the user's computer. how to determine the mime type sent by ...

Client-Server Overview - Learn web development
tion about a product, or a list of products). post: create a new resource (e.g. add a new article to a wiki, add a new contact to a database). head: get the metadata information about a specific resource without getting the body like get would. you might for example use a head request to find out the last time a resource was updated, and then only use the (more "expensive") get request to download the resource if it has changed. put: update an existing resource (or create a new one if it doesn't exist). delete: delete the specified resource. trace, options, connect, patch: these verbs are for less common/advanced tasks, so we won't cover them here. additional information can be encoded with the request (for example, html form data). information can be encoded as: url ...
... forbidden" if the user isn't authorised to see the resource, etc). the body of a successful response to a get request would contain the requested resource. when an html page is returned it is rendered by the web browser. as part of processing the browser may discover links to other resources (e.g. an html page usually references javascript and css pages), and will send separate http requests to download these files. both static and dynamic websites (discussed in the following sections) use exactly the same communication protocol/patterns. get request/response example you can make a simple get request by clicking on a link or searching on a site (like a search engine homepage). for example, the http request that is sent when you perform a search on mdn for the term "client server overview" wil...

Starting our Svelte Todo list app - Learn web development
ctive: to learn how to create a svelte component, render it inside another component, pass data into it using props, and save its state. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/02-starting-our-todo-app or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/02-starting-our-todo-app remember to run npm install && npm run dev to start your app in development mode. repl to code along with us using the repl, start at https://svelte.dev/repl/b7b831ea3a354d3789cefbc31e2ca495?version=3.23.2 todo list app features this is how our todo list app wil look like once it's ready: using this ui ...
... repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/c862d964d48d473ca63ab91709a0a5a0?version=3.23.2 summary with our markup and styling in place our todo list app is starting to take shape, a...

Componentizing our Svelte app - Learn web development
to compile and build your app. objective: to learn how to break our app into components and share information among them. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/04-componentizing-our-app or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/04-componentizing-our-app remember to run npm install && npm run dev to start your app in development mode. repl to code along with us using the repl, start at https://svelte.dev/repl/99b9eb228b404a2f8c8959b22c0a40d3?version=3.23.2 breaking the app into components in svelte, an application is composed from one or more components. ...
...nd data and functions as props, or dispatching lots of events. stores allows you to share reactive data among components that are not hierarchically related. we will look at stores later on in the series. the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/05-advanced-concepts or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/05-advanced-concepts remember to run npm install && npm run dev to start your app in development mode. repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/76cc90c43a37452e8c7f70521f88b698?version=3.23.2 summary now we have all of our app's required functionality in place. we can display, add, edit a...

Deployment and next steps - Learn web development
in typescript, you can skip to the next chapter, where we will look at different options for deploying our svelte applications, further resources, and more. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/08-next-steps or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/08-next-steps remember to run npm install && npm run dev to start your app in development mode. compiling our app so far we've been running our app in development mode with npm run dev. as we saw earlier, this instruction tells svelte to compile our components and javascript files into a public/build/bundle.js file and all the css se...
...terser. so, after running npm run build, our generated bundle.js and bundle.css files will be more like this: 504 jul 13 02:43 bundle.css 21782 jul 13 02:43 bundle.js try running npm run build in your app's root directory now. you might get a warning, but you can ignore this for now. our whole app is now just 21 kb — 8.3 kb when gzipped. there are no additional runtimes or dependencies to download, parse, execute, and keep running in memory. svelte analyzed our components and compiled the code to vanilla javascript. a look behind the svelte compilation process by default, when you create a new app with npx degit sveltejs/template my-svelte-project, svelte will use rollup as the module bundler. note: there is also an official template for using webpack and also many community-maintained...

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
. newtodo: displays the <input> field and add button for adding a new todo. todosstatus: displays the "x out of y items completed" status heading. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/05-advanced-concepts or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/05-advanced-concepts remember to run npm install && npm run dev to start your app in development mode. repl to code along with us using the repl, start at https://svelte.dev/repl/76cc90c43a37452e8c7f70521f88b698?version=3.23.2 working on the moreactions component now we'll tackle the check all and remove completed buttons. let's c...
...t call todosstatus.focus()? you might have multiple todosstatus instances active, so you need a way to reference each particular instance. that's why you have to specify a variable to bind each specific instance to. the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/06-stores or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/06-stores remember to run npm install && npm run dev to start your app in development mode. repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/d1fa84a5a4494366b179c87395940039?version=3.23.2 summary in this article we have finished adding all the required functionality to our app, plus we've taken ...

Dynamic behavior in Svelte: working with variables and props - Learn web development
omponents, passing data using props, render javascript expressions into our markup, modify the components state and iterating over lists. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/03-adding-dynamic-behavior or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/03-adding-dynamic-behavior remember to run npm install && npm run dev to start your app in development mode. repl to code along with us using the repl, start at https://svelte.dev/repl/c862d964d48d473ca63ab91709a0a5a0?version=3.23.2 working with todos our todos.svelte component is currently just displaying static markup; let's sta...
...es, so it's better to be explicit about it and not rely on the visibility of top-level variables. besides, it's a good practice to make our code clear and explicit about what information it is using. the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/04-componentizing-our-app or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/04-componentizing-our-app remember to run npm install && npm run dev to start your app in development mode. repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/99b9eb228b404a2f8c8959b22c0a40d3?version=3.23.2 summary that will do for now! in this article we already implemented most of our desired fun...

Handling common JavaScript problems - Learn web development
to have to copy and paste your code over to a web page to check its validity several times. what you really want is a linter that will fit into your standard workflow with the minimum of hassle. many code editors have linter plugins, for example github's atom code editor has a jshint plugin available. to install it: install atom (if you haven't got an up-to-date version already installed) — download it from the atom page linked above. go to atom's preferences... dialog (e.g. by choosing atom > preferences... on mac, or file > preferences... on windows/linux) and choose the install option in the left-hand menu. in the search packages text field, type "jslint" and press enter/return to search for linting-related packages. you should see a package called lint at the top of the list. install ...
... week. talk to other developers to find out what they recommend, see how much activity and how many contributors the library has on github (or wherever else it is stored), etc. note: javascripting.com gives you a good idea of just how many javascript libraries there are available, and can be useful for finding libraries for specific purposes. library usage at a basic level tends to consist of downloading the library's files (javascript, possibly some css or other dependencies too) and attaching them to your page (e.g. via a <script> element), although there are normally many other usage options for such libraries, like installing them as bower components, or including them as dependencies via the webpack module bundler. you will have to read the libraries' individual install pages for more inf...

Client-side tooling overview - Learn web development
to go to the npm homepage and search for the type of tool you are looking for, for example try searching for "date" if you want a date formating utility, or "formatter" if you are searching for a general code formatter. pay attention to the popularity, quality, and maintenance scores, and how recently the package was last updated. also click through to the tool pages to find out how many monthly downloads a package has, and whether it has good documentation that you can use to figure out whether it does what you need it to do. based on these criteria, the date-fns library looks like a good date formatting tool to use. you'll see this tool in action and learn more about package managers in general in chapter 3 of this module. if you are looking for a plugin to integrate tool functionality into ...
... code editor, look at the code editor’s plugins/extensions page — see atom packages and vscode extensions, for example. have a look at the featured extensions on the front page, and again, try searching for the kind of extension you want (or the tool name, for example search for "eslint" on the vscode extensions page). when you get results, have a look at information such as how many stars or downloads the extension has, as an indicator of its quality. development-related forums to ask questions on about what tools to use, for example mdn learn discourse, or stack overflow. when you’ve chosen a tool to use, the first port of call should be the tool project homepage. this could be a full blown website or it might be a single readme document in a code repository. the date-fns docs for ...

Learn web development
ing with web forms. accessibility — make the web usable by everyone accessibility is the practice of making web content available to as many people as possible regardless of disability, device, locale, or other differentiating factors. this topic gives you all you need to know. web performance — making websites fast and responsive web performance is the art of making sure web applications download fast and are responsive to user interaction, regardless of a user's bandwidth, screen size, network, or device capabilities. tools and testing this topic covers the tools developers use to facilitate their work, such as cross-browser testing tools, linters, formatters, transformation tools, version control systems, deployment tools, and client-side javascript frameworks. server-side website pr...
...ures work. this topic provides a general introduction to how the server-side works and detailed tutorials showing how to build up a server-side app using two popular frameworks: django (python) and express (node.js). getting our code examples the code examples you'll encounter in the learning area are all available on github. if you want to copy them all to your computer, the easiest way is to download a zip of the latest master code branch. if you prefer to copy the repo in a more flexible way that allows for automatic updates, you can follow the more complex instructions: install git on your machine. this is the underlying version control system software that github works on top of. open your computer's command prompt (windows) or terminal (linux, macos). to copy the learning area repo ...

Accessibility Features in Firefox
etc. you can furthermore control javascript capabilities to remove scrollbars, toolbars or system buttons like minimize, close and maximize by editing the about:config related properties or by editing accordingly the user.js file as explained in this "disable other javascript window features" document. moving back and forward by web page (alt+left and alt+right) occurs near-instantaneously the download manager provides keyboard access to all of your recent downloads operating system "look and feel" support: mozilla's default skin will match the colors and sizes currently being used in your desktop. mozilla can follow the system appearance whether it's high or low contrast, with large or small fonts. text files used in configuration (techies only): configuration files are easily edited with an...
...n's effort to make firefox as screen reader accessible on unix as it is on windows, because the same core accessibility work applies to linux. the two companies anticipate that in 2007, firefox will support topnotch screen reader accessibility on unix and linux. that's the great thing about the open firefox community model and source code license -- anyone can contribute, and everyone benefits. downloads, support and more information firefox information and downloads general online support and community forums accessibility newsgroup for users. can also be accessed as a mailing list. accessibility compliance statement (section 508): http://www.mozilla.com/firefox/vpat.html ...

Creating a Language Pack
ad to set the preference general.useragent.locale to your language code. l10n binary repack for apps currently in development, you need to get the right strings for the build you use. best is to create an installer there. first, we get the en-us builds. there is a target to get those, too, another way to test it to repack the en-us binary. from the obj-firefox-build/browser/locales directory, download the most recent en-us nightly that will be repacked to include your locale. $ make wget-en-us en_us_binary_url=http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora if you're building on mac 64 bit, you'll need to change the command slightly: $ make wget-en-us en_us_binary_url=http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora moz_pkg_platform=...
...r locale. $ make wget-en-us en_us_binary_url=http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora if you're building on mac 64 bit, you'll need to change the command slightly: $ make wget-en-us en_us_binary_url=http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora moz_pkg_platform=mac at some point, you should see the following success message: downloaded http://ftp.mozilla.org/pub/mozilla.o....en-us.mac.dmg to /users/your_id/mozilla/vc/firefox/browser/locales/../../dist/firefox-3.6b5pre.en-us.mac.dmg the en-us binary has been downloaded. let's unpack it $ make unpack again, for 64-bit mac, append moz_pkg_platform=mac to this command. at the end of the process, you should see the following success message. ... done unpacking let's check w...

Debugging on Mac OS X
ds enable hardened runtime and only differ from production builds in that they are not notarized which should not otherwise affect functionality, (other than the ability to easily launch the browser on macos 10.15+ -- see quarantine note below). at this time, developers can obtain a hardened runtime build with the com.apple.security.get-task-allow entitlement allowed by submitting a try build and downloading the dmg generated by the "rpk" shippable build job. a debugger can be attached to firefox processes of these builds. try builds use the developer.entitlements.xml file from the source tree while production builds use production.entitlements.xml. on macos 10.15+, downloaded try builds will not launch by default because notarization is required. to workaround this problem, remove the quarantine ...
... "rpk" shippable build job. a debugger can be attached to firefox processes of these builds. try builds use the developer.entitlements.xml file from the source tree while production builds use production.entitlements.xml. on macos 10.15+, downloaded try builds will not launch by default because notarization is required. to workaround this problem, remove the quarantine extended attribute from the downloaded nightly: $ xattr -r -d com.apple.quarantine /path/to/nightly.app local builds local builds of mozilla-central do not enable hardened runtime and hence do not have debugging restrictions. as a result, some functionality will be permitted on local builds, but blocked on production builds which have hardened runtime enabled. bug 1522409 was filed to automate codesigning local builds to enable...

Old Thunderbird build
underbird up to version 59. for thunderbird 60 and later, see the new build instructions. for additional information, see the build documentation. hardware requirements at least 4 gb of ram. 8 gb or more is recommended. while you can build thunderbird on older hardware it can take quite a bit of time to compile on slower machines with less ram. good internet connection for the initial source download. build prerequisites depending on your operating system you will need to carry out a different process to prepare your machine. so firstly complete the instructions for your os and then continue following these build instructions. to build on windows, please read the prerequisites so you don't skip preparing the mapi headers needed to compile thunderbird. windows build prerequisites gnu...
...pulled the code. the current status of the trunk can also be checked at https://treestatus.mozilla.org/ if the trunk is broken (i.e. closed), you may wish to consider building one of the branches (to pull the source code from a branch, just replace the url to the repository in the hg clone instruction). on windows: check that the mapi header files from https://www.microsoft.com/en-us/download/details.aspx?id=12905 are installed because the mapi header files are not bundled with visual studio 2013/2015 (windows sdk 8.1/10). you should copy the header files to a windows sdk include directory so that the build process will find the files, for example to c:\program files (x86)\windows kits\8.1\include\shared and/or c:\program files (x86)\windows kits\10\include\10.0.nnnnn.0\shared respect...

Windows SDK versions
studio express 2013 for windows desktop this comes with the windows 8.1 sdk included. visual studio professional 2012 this comes with the windows 8.0 sdk included. visual studio 2012 express for windows desktop this comes with the windows 8.0 sdk included. visual c++ 10 (vs2010) professional this comes with the windows 7 sdk, so you should be all set out of the box. visual c++ 10 (vs2010) express download and install the windows 7 sdk. older versions some of the older version are no longer supported, further information is available at obsolete build caveats and tips [en-us] under the windows sdk article. windows 8 sdk (official) features that depend on this sdk include: metro firefox front end gamepad api support you can download the sdk from the microsoft download center [web setup]. windows...
...pported, further information is available at obsolete build caveats and tips [en-us] under the windows sdk article. windows 8 sdk (official) features that depend on this sdk include: metro firefox front end gamepad api support you can download the sdk from the microsoft download center [web setup]. windows 7 sdk features that depend on this sdk include: windows 7 taskbar previews windows 7 download taskbar progress windows 7 jump lists you can download the sdk (v7.0 [web setup or iso image] or unsupported v7.1 [web setup or iso image]) from the microsoft download center. note that if you're running a 64 bit version of windows you may require the "amd" version of the sdk even if you have an intel processor, and you may need to deselect the documentation component in the installer in order ...

Creating Custom Events That Can Pass Data
omething other than the standard mouse/keyboard events) and, depending on the data passed along with this event, you want firefox to react differently. note that starting with version 6, firefox supports dom level 3 customevent, which lets you dispatch custom events with arbitrary data from javascript. (see bug 427537) requirements in order to do this you must be able to do all of the following: download mozilla source code build mozilla creating custom firefox extensions with the mozilla build system. this is the foundation for everything we'll do. what's in a name despite whatever you may have been taught in your english class, there's a lot in a name when it's an event name. as of gecko 1.8, if your event names do not start with "nsdom" and their interfaces do not start with "nsidom" then you...
...e foundation for everything we'll do. what's in a name despite whatever you may have been taught in your english class, there's a lot in a name when it's an event name. as of gecko 1.8, if your event names do not start with "nsdom" and their interfaces do not start with "nsidom" then you can forget about passing data. you will still be able to throw events, but that's it. the trunk you needed to download (or check out) the trunk source because you will have to modify it in order to implement your event. be aware that this means your stuff won't work with everyone else's version of firefox unless you get your patches into the trunk. at the time of writing the author is not aware of a way to do this that doesn't involve modifications to trunk. what follows a list of the files you'll need to modify,...

Experimental features in Firefox
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 using the bug macro: {{bug(bug-number)}}. html element: <dialog> the html <dialog> element and its associated dom apis provide support for html-based modal dialog bo...
...ee also bug 1205133 for details. release channel version added enabled by default? nightly 75 yes developer edition 75 no beta 75 no release 75 no preference name dom.forms.inputmode <link rel="preload"> the <link> element's rel attribute is intended to help provide performance gains by letting you download resources earlier in the page lifecycle, ensuring that they're available earlier and are less likely to block page rendering. read preloading content with rel="preload" for more details. for more details on the status of this feature, see bug 1639607. release channel version added enabled by default? nightly 78 yes developer edition 78 yes ...

AddonUpdateChecker
if all you care about is finding the newest version for an addon then you probably want to use findupdates() instead. ...
...rsion, in string platformversion) updateinfo getnewestcompatibleupdate(in updateinfo updates[], in string appversion, in string platformversion) void checkforupdates(in string id, in string type, in string updatekey, string url, in updatechecklistener listener) constants constant description error_timeout the update check timed out. error_download_error there was an error while downloading the update information. error_parse_error the update information was malformed in some way. error_unknown_format the update information was not in any known format. error_security_error the update information was not signed by the update key used for retrieval. methods getcompatibilityupdate() retrieves the...

JavaScript code modules
cation. general topics using javascript code modules an introduction to how to use javascript code modules. components.utils.import how to import a javascript code module. components.utils.unload how to unload a javascript code module. code snippets: modules examples of how to use code modules. mozilla labs js modules this page features a list of javascript modules, along with download links and documentation, that extension developers can use in their code. standard code modules addonmanager.jsm an interface to install, manage, and uninstall add-ons. addonrepository.jsm provides a search of add-ons in the repository. assert.jsm implements the commonjs unit testing specification version 1.1, which provides a basic standardized interface for performing in-code logi...
... "bookmarks.html" style bookmark files. ctypes.jsm provides an interface that allows javascript code to call native libraries without requiring the development of an xpcom component. customizableui.jsm allows you to interact with customizable buttons and items in firefox's main window ui. deferredtask.jsm run a task after a delay. dict.jsm provides an api for key/value pair dictionaries. downloadlastdir.jsm supplies the path to the directory into which the last download occurred. downloads.jsm provides a single entry point to interact with the downloading capabilities of the platform. fileutils.jsm provides helpers for dealing with files. geometry.jsm provides routines for performing basic geometric operations on points and rectangles. http.jsm a wrapper for xmlhttprequest that p...

Fonts for Mozilla's MathML engine
fonts with appropriate unicode coverage and open font format features are required for good math rendering. this wiki page describes how users can install and use such math fonts with mozilla's mathml engine. note that most of these instructions may as well apply to other web rendering engines. installation instructions windows install the latin modern math and stix fonts as follows: download latinmodern-math-1959.zip. open the zip archive, move inside the latinmodern-math-1959 directory and then inside the otf directory. you will find a latinmodern-math font file. open the latinmodern-math font file and click the install button. download stixv2.0.2.zip. open the zip archive, move inside the /stixv2.0.0/fonts/otf/ directory. you will find the stixmath-regular, stix-regular, stix-b...
...file and click the install button. if desired, you may also do the same for the other font files. note:cambria math is installed by default on windows 7 and later versions and should ensure relatively good mathml rendering. an enhancement request has been submitted to microsoft to install latin modern math and stix by default. os x install the latin modern math and stix fonts as follows: download latinmodern-math-1959.zip. extract the zip archive, move inside the latinmodern-math-1959 directory and then inside the otf directory. you will find a latinmodern-math font file. double-click the latinmodern-math font file click the "install the font" button from the window that opens. download stixv2.0.2.zip. open the zip archive, move inside the /stixv2.0.0/fonts/otf/ directory. you will fi...

Preference reference
accessibility.tabfocusthe preference accessibility.tabfocus controls what elements receive focus when the user presses the tab key.browser.altclicksavethe preference browser.altclicksave controls whether clicking a link while holding the alt key starts the download of that link.browser.dom.window.dump.enabledthis setting enables the dump function, which sends messages to the system console. ...
...mp.enabledthis setting enables the dump function, which sends messages to the system console. set it to true to enable it, or false to disable it.browser.dom.window.dump.filebrowser.dom.window.dump.file redirects the ouput of window.dump() calls to a file whose address is specified in this preference if browser.dom.window.dump.enabled is set to true. changes require an application restart.browser.download.lastdir.savepersitebrowser.download.lastdir.savepersite controls whether the directory preselected in the file picker for saving a file download is being remembered on a per-website (host) base. if set to true, the data is stored as content preference.browser.pagethumbnails.capturing_disabledthe preference browser.pagethumbnails.capturing_disabled controls whether the application creates screensh...

AsyncTestUtils extended framework
pop fake-server. we just cram them using addmessage, although we try and approximate what would happen with pop in terms of still invoking filters and such. imap injection, do not bring messages offline let inboxfolder = configure_message_injection({mode: "imap", offline: false}); use an imap fake-server to inject messages. ...
... creating / injecting messages all of these functions take synthetic set definitions. look at the section on synthetic message sets above to understand how to specify these. ...

NSS_3.11.10_release_notes.html
) 3.11.10 is a patch release for nss 3.11. the bug fixes in nss 3.11.10 are described in the "bugs fixed" section below. distribution information the cvs tag for the nss 3.11.10 release is nss_3_11_10_rtm. nss 3.11.10 requires nspr 4.7.1. see the documentation section for the build instructions. nss 3.11.10 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_11_10_rtm/src/. binary distributions: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_11_10_rtm/. both debug and optimized builds are provided. go to the subdirectory for your platform, dbg (debug) or opt (optimized), to get the tar.gz or zip file. the tar.gz or zip file expands to an...
...ss/releases/nss_3_11_10_rtm/. both debug and optimized builds are provided. go to the subdirectory for your platform, dbg (debug) or opt (optimized), to get the tar.gz or zip file. the tar.gz or zip file expands to an nss-3.11.10 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr 4.7.1 binary distributions to get the nspr 4.7.1 header files and shared libraries, which nss 3.11.10 requires. nspr 4.7.1 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.7.1/. bugs fixed the following bugs have been fixed in nss 3.11.10. bug 291384: certutil -k behavior doesn't match usage bug 374247: modutil -disable command not disabling mod...

NSS_3.12.1_release_notes.html
n nss 3.12.1 are described in the "bugs fixed" section below. nss 3.12.1 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1. distribution information the cvs tag for the nss 3.12.1 release is nss_3_12_1_rtm. nss 3.12.1 requires nspr 4.7.1. see the documentation section for the build instructions. nss 3.12.1 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_1_rtm/src/. binary distributions: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_1_rtm/. both debug and optimized builds are provided. go to the subdirectory for your platform, dbg (debug) or opt (optimized), to get the tar.gz or zip file. the tar.gz or zip file expands to an n...
.../nss/releases/nss_3_12_1_rtm/. both debug and optimized builds are provided. go to the subdirectory for your platform, dbg (debug) or opt (optimized), to get the tar.gz or zip file. the tar.gz or zip file expands to an nss-3.12.1 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr 4.7.1 binary distributions to get the nspr 4.7.1 header files and shared libraries, which nss 3.12.1 requires. nspr 4.7.1 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.7.1/. new in nss 3.12.1 new functions in the nss shared library: cert_nametoasciiinvertible (see cert.h) convert an certname into its rfc1485 encoded equivalent. returns a string ...

NSS_3.12.2_release_notes.html
n nss 3.12.2 are described in the "bugs fixed" section below. nss 3.12.2 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1. distribution information the cvs tag for the nss 3.12.2 release is nss_3_12_2_rtm. nss 3.12.2 requires nspr 4.7.1. see the documentation section for the build instructions. nss 3.12.2 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_2_rtm/src/. binary distributions: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_2_rtm/. both debug and optimized builds are provided. go to the subdirectory for your platform, dbg (debug) or opt (optimized), to get the tar.gz or zip file. the tar.gz or zip file expands to an n...
...nss/releases/nss_3_12_2_rtm/. both debug and optimized builds are provided. go to the subdirectory for your platform, dbg (debug) or opt (optimized), to get the tar.gz or zip file. the tar.gz or zip file expands to an nss-3.12.2 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin< - nss tools and test programs you also need to download the nspr 4.7.1 binary distributions to get the nspr 4.7.1 header files and shared libraries, which nss 3.12.2 requires. nspr 4.7.1 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.7.1/. new in nss 3.12.2 new functions in the nss shared library: sec_pkcs12addcertorchainandkey (see p12.h) new pkcs11 errors (see secerr.h) sec_error_pkcs11_general_error sec_...

NSS 3.12.6 release notes
nss 3.12.6 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1. distribution information the cvs tag for the nss 3.12.6 release is nss_3_12_6_rtm. nss 3.12.6 requires nspr 4.8.4. see the documentation section for the build instructions. nss 3.12.6 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_6_rtm/src/. you also need to download the nspr 4.8.4 binary distributions to get the nspr 4.8.4 header files and shared libraries, which nss 3.12.6 requires. nspr 4.8.4 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.8.4/. ...
... bug 527759: add multiple roots to nss (single patch) bug 528741: pkix_hash throws a null-argument exception on empty strings bug 530907: the peerid argument to ssl_setsockpeerid should be declared const bug 531188: decompression failure with https://livechat.merlin.pl/ bug 532417: build problem with spaces in path names bug 53494...

NSS_3.12_release_notes.html
12, but not the new sqlite-based shareable certificate and key databases. we missed the deadline to enable that feature in firefox 3. distribution information the cvs tag for the nss 3.12 release is nss_3_12_rtm. nss 3.12 requires nspr 4.7.1. see the documentation section for the build instructions. nss 3.12 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_rtm/src/. binary distributions: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_rtm/. both debug and optimized builds are provided. go to the subdirectory for your platform, dbg (debug) or opt (optimized), to get the tar.gz or zip file. the tar.gz or zip file expands to an nss-3...
...rity/nss/releases/nss_3_12_rtm/. both debug and optimized builds are provided. go to the subdirectory for your platform, dbg (debug) or opt (optimized), to get the tar.gz or zip file. the tar.gz or zip file expands to an nss-3.12 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr 4.7.1 binary distributions to get the nspr 4.7.1 header files and shared libraries, which nss 3.12 requires. nspr 4.7.1 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.7.1/. nss 3.12 libraries have the following versions: sqlite3: 3.3.17 nssckbi: 1.70 softokn3 and freebl3: 3.12.0.3 other nss libraries: 3.12.0.3 new in nss 3.12 3 new shared librar...

NSS_3.12.3_release_notes.html
s 3.12.3 are described in the "bugs fixed" section below. nss 3.12.3 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1. distribution information the cvs tag for the nss 3.12.3 release is nss_3_12_3_rtm. nss 3.12.3 requires nspr 4.7.4. see the documentation section for the build instructions. nss 3.12.3 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_3_rtm/src/. binary distributions: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_3_rtm/. both debug and optimized builds are provided. go to the subdirectory for your platform, dbg (debug) or opt (optimized), to get the tar.gz or zip file. the tar.gz or zip file expands to an nss-...
...ses/nss_3_12_3_rtm/. both debug and optimized builds are provided. go to the subdirectory for your platform, dbg (debug) or opt (optimized), to get the tar.gz or zip file. the tar.gz or zip file expands to an nss-3.12.3 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr 4.7.4 binary distributions to get the nspr 4.7.4 header files and shared libraries, which nss 3.12.3 requires. nspr 4.7.4 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.7.4/. new in nss 3.12.3 changes in behavior: in the development of nss 3.12.3, it became necessary to change some old library behaviors due to the discovery of certain vulnerab...

Pork
s. note: pork is not presently used at mozilla. please refer to the oink link below for a more up-to-date toolchain. pork is based on the elsa (and oink) tool chain, and the mcpp preprocessor. as of october 2009 oink incorporates the pork functionality into its standard distribution; look for files and tests having the prefix "xform". ...
... documentation installing pork download, installation and dependency info for pork pork tools description of rewriting tools pork tool development in progress page... old pork page pork details that haven't been moved to mdc renaming with pork sample pork application todos pork 1.0 release tracking bug pork releases download pork here community view pork forums... mailing list newsgroup rss feed #static on irc.mozilla.org related topics dehydra, treehydra, mozilla 2, spidermonkey ...

Index
javascript engine embedding mozilla, javascript, spidermonkey, tutorial see also jsapi user guide. in particular, it has more and better code examples! 11 index index, mdn meta, spidermonkey found 550 pages: 12 introduction to the javascript shell spidermonkey to get the spidermonkey javascript shell, see the spidermonkey build documentation or download a compiled binary for your platform from the nightly builds. 13 jit optimization outcomes beginner, firefox, intro, needscontent, spidermonkey spidermonkey's optimizing jit, ionmonkey, uses different optimization strategies to speed up various operations. the most typical operations that are relevant for fast program execution are property accesses and function calls. ...
...t up automatically by the spidermonkey js command-line interpreter when you start the program. 525 spidermonkey build documentation build documentation, guide, spidermonkey use these instructions to build the latest spidermonkey source code. 526 rebranding spidermonkey (1.8.5) build documentation, spidermonkey after installing the build pre-requisites and downloading the spidermonkey source tarball issue the following commands at the terminal: 527 spidermonkey internals guide, javascript, needsupdate, spidermonkey at heart, spidermonkey is a fast interpreter that runs an untyped bytecode and operates on values of type js::value—type-tagged values that represent the full range of javascript values. in addition to the interpreter, spid...

SpiderMonkey 24
these release notes are an incomplete draft and were initially seeded from the spidermonkey 17 release notes, so they're not necessarily complete or fully accurate. the mozilla javascript team is pleased to announce the release of spidermonkey 24. you can download full source code here: https://ftp.mozilla.org/pub/mozilla.org/js/mozjs-24.2.0.tar.bz2 (sha1: ce779081cc11bd0c871c6f303fc4a0091cf4fe66) spidermonkey 24 is the javascript engine that shipped in firefox 24. it continues to improve performance over previous spidermonkey releases, with a significantly improved garbage collector, a new jit compilation mode, and other features. it also contains new language and api features described in detail below. please let us know about your experiences with this release by posting in the mozilla.de...
...th a significantly improved garbage collector, a new jit compilation mode, and other features. it also contains new language and api features described in detail below. please let us know about your experiences with this release by posting in the mozilla.dev.tech.js-engine newsgroup. or file bugs at bugzilla.mozilla.org under product: core, component: javascript engine. — dec 16, 2013 the download url still available, but spidermonkey not release alone! get it here mozilla-esr24 if the download url is outdate you will find it in "firefox extended support release 24" package on hg release platform support spidermonkey 24 is supported on all the platforms where firefox 24 runs. compiling it requires a c++ compiler, and the jsapi can only be used from c++ code. (this change was motivate...

Security and the jar protocol
that the file being retrieved is a jar file, regardless of its mime type (in other words, its mime type was assumed to be application/zip, regardless of what it actually was). this means that no matter what the file's real contents are, as far as firefox is concerned, it was a zip archive. this ordinarily isn't a big deal, since site developers wouldn't put up dangerous files and set them up to download like zip archives. however, if a site allows file uploads, zip files are typically treated as relatively innocuous by web sites in that situation, since they're not executable. unless, of course, the browser thinks it's a jar file. so starting with gecko 1.8.0.15 and 1.8.1.10, the jar: protocol is only allowed if the mime type of the file is application/java-archive. a site that serves a file w...
...vely innocuous by web sites in that situation, since they're not executable. unless, of course, the browser thinks it's a jar file. so starting with gecko 1.8.0.15 and 1.8.1.10, the jar: protocol is only allowed if the mime type of the file is application/java-archive. a site that serves a file with that type is essentially promising that it has vetted the content and that it is in fact safe to download and execute. any other file type results in an "unsafe file type" error. ...

How to build an XPCOM component in JavaScript
that you want exposed. if you want to use your component only from javascript, you can skip to the next section. there are many interfaces already defined in mozilla applications, so you may not need to define a new one. you can browse existing xpcom interfaces at various locations in the mozilla source code, or using xpcomviewer, a gui for browsing registered interfaces and components. you can download an old version of xpcomviewer that works with firefox 1.5 from mozdev mirrors. if an interface exists that meets your needs, then you do not need to write an idl, or compile a typelib, and may skip to the next section. if you don't find a suitable pre-existing interface, then you must define your own. xpcom uses a dialect of idl to define interfaces, called xpidl. here's the xpidl definition fo...
...ing guids for more information. compiling the typelib your interface definition must be compiled into a binary format (xpt) in order to be registered and used within mozilla applications. the compilation can be done using the gecko sdk. you can learn how to get mac, linux, and windows versions of the gecko sdk by reading the article gecko sdk. for code outside the tree note: on windows if you download the gecko sdk without the whole build tree, you will be missing some required dlls for xpidl.exe and it will run with no errors but not do anything. to fix this download the mozilla build tools for windows and copy the dlls from windows\bin\x86 within the zip into the bin directory of the gecko sdk. note: the mac version of the sdk provided for download is powerpc-only. if you need an intel vers...

Preface
tribution and installation. following along with the examples there are a couple of different ways to get xpcom onto your machine so you can begin to create components. if you already have a mozilla build or the source from mozilla 1.2 or later, then you can use the xpcom framework available there. if you don't already have the mozilla source, then an even easier way to get and use xpcom is to download the gecko sdk, which is a collection of libraries and tools that features the xpcom component framework. whether you compile your code in the mozilla source tree or use the gecko sdk, you can build your own components which leverage components that already exist in gecko. the weblock component we describe in this tutorial is a practical (and, we hope, genuinely useful) addition to the browser. i...
...utorial is a practical (and, we hope, genuinely useful) addition to the browser. in order to build it, your gecko sdk or mozilla source tree needs to be version 1.2 or later (xpcom interfaces were not fully frozen in prior releases). this book assumes you are using the sdk rather than compiling in a mozilla source tree, though the difference between these two approaches is minimal. details about downloading the sdk, building, and getting programmatic access to gecko components are provided in the appendix to this book, setting up the gecko sdk. conventions the formatting conventions listed below are used to designate specific types of information in the book and make things easier to scan. the goal is to use as few formats as possible, but to distinguish the various different types of informati...

Resources
« previous this last section of the book provides a list of resources referred to in the tutorial and other links that may be useful to the gecko developer. ...
...ist of resources referred to in the tutorial and other links that may be useful to the gecko developer. ...

nsICRLManager
article. ...
...letecrl() delete the crl. void deletecrl( in unsigned long crlindex ); parameters crlindex getcrls() get a list of crl entries in the db. nsiarray getcrls(); parameters none. return value importcrl() import a crl into the certificate database. void importcrl( [array, size_is(length)] in octet data, in unsigned long length, in nsiuri uri, in unsigned long type, in boolean dosilentdownload, in wstring crlkey ); parameters data length uri type dosilentdownload crlkey reschedulecrlautoupdate() this would reschedule the autoupdate of crls with auto update enable. void reschedulecrlautoupdate(); parameters none. updatecrlfromurl() update an existing crl from the last fetched url. needed for the update button in crl manager. boolean updatecrlfromurl( in wstring url, in w...

nsIDOMOfflineResourceList
ource list. read only. onchecking nsidomeventlistener an event listener to be called when fetching the application cache manifest and checking for updates. onerror nsidomeventlistener an event listener to be called when an error occurs during the caching process. onnoupdate nsidomeventlistener an event listener to be called when there is no update to download. ondownloading nsidomeventlistener an event listener to be called when resources are being downloaded into the cache. onprogress nsidomeventlistener an event listener to be called periodically throughout the download process. onupdateready nsidomeventlistener an event listener to be called when a resource update is ready; this event is not currently us...
...tatus of the application cache. constants application cache state constants constant value description uncached 0 the object isn't associated with an application cache. idle 1 the application cache is not in the process of being updated. checking 2 the application cache manifest is being fetched and checked for updates. downloading 3 resources are being downloaded to be added to the cache. updateready 4 there is a new version of the application cache available. obsolete 5 the application cache group is now obsolete. methods mozadd() adds an item to the dynamically managed entries. the resource will be fetched and added to the application cache. void mozadd( in domstring u...

nsIMsgDatabase
nextfakeofflinemsgkey nsmsgkey readonly: for saving "fake" offline msg hdrs. defaultviewflags nsmsgviewflagstypevalue readonly: defaultsorttype nsmsgviewsorttypevalue readonly: defaultsortorder nsmsgviewsortordervalu...
... nextfakeofflinemsgkey nsmsgkey readonly: for saving "fake" offline msg hdrs. defaultviewflags nsmsgviewflagstypevalue readonly: defaultsorttype nsmsgviewsorttypevalue readonly: defaultsortorder nsmsgviewsortordervalue readonly: msghdrcac...

Using the Mozilla source server
using the mozilla source server is now even more feature-packed. the nightly debug builds are now also source indexed so that by following a couple of simple steps you can also have the source code served to you for debugging without a local build what you'll need windbg or visual studio (note: express editions will not work, but windbg is a free download) a nightly build that was created after april 15, 2008; go to the /pub/firefox/nightly/latest-mozilla-central/ folder and grab the installer for builds predating the switch to mercurial, you'll need cvs.exe, added to your path (the cvs.exe from mozillabuild has problems, use this one instead) note: do not use the cvs from mozillabuild, it will not work! set up symbols follow the instructions for using the mozilla symbol server. ...
...zillabuild, it will not work! set up symbols follow the instructions for using the mozilla symbol server. once the symbol path is set you must now enable source server. using the source server in windbg in the windbg command line, type .srcfix and hit enter. this enables source server support. now, when you click on a frame in the "calls" window, windbg will prompt you about running cvs to download the associated source code. if you click "yes", windbg will display *busy* in the status bar while it downloads the source, and then it will automatically open the file and highlight the current line. using the source server in visual studio note: source server support does not work correctly out of the box in visual studio 2005. if you install windbg, and copy srcsrv.dll from the windbg i...

Virtualenv
kages directory of the virtualenv. site-packages should mostly be for system-installed python and not python that you are installing as a user. this page is mostly a stub for how virtualenv is used at mozilla. for more information on virtualenv in general, see the virtualenv web site. python packaging at mozilla is covered in python. getting virtualenv virtualenv is a python package. you can download it from its pypi package page or install it with easy_install. the github virtualenv repository is maintained by the python packaging authority (including mozilla's tarek ziade and ian bicking). if you have git installed, you can clone the latest version of virtualenv: git clone git://github.com/pypa/virtualenv.git if you have pip or easy_install, you can install virtualenv directly from the we...
...env: git clone git://github.com/pypa/virtualenv.git if you have pip or easy_install, you can install virtualenv directly from the web: pip install virtualenv # -or- easy_install virtualenv this will fetch virtualenv from pypi and install it in your site-packages. you may need to use sudo to obtain appropriate permissions for the system. if you do not have pip or easy_install, you will need to download from pypi or clone from the github virtualenv repository, extract from the tarball (in the pypi case), and run python setup.py install. again, you may need to use sudo to install globally. if you're running ubuntu, there is also an ubuntu package available: sudo apt-get install python-virtualenv virtualenv.py may also be run as standalone software with the same functionality. it will requir...

Streams - Plugins
data can be pushed by the browser, 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 wher...
...ream, or until the instance is destroyed. note: 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_r...

Throttling - Firefox Developer Tools
network speed to emulate various connection speeds so you can see how your app will behave under different connection types. throttling the toolbar includes a throttling dropdown, which allows you to throttle your network speed to emulate various different network speed conditions. simply choose an option from the menu, and it will persist across reloads. ...
...the characteristics emulated are: download speed upload speed minimum latency the table below lists the numbers associated with each network type, but please do not rely on this feature for exact performance measurements; it's intended to give an approximate idea of the user experience in different conditions. the speeds are expressed in multiples of bits per second. ...

Network request details - Firefox Developer Tools
iew if the response is html, a preview of the rendered html appears inside the response tab, above the response payload. timings tab the timings tab provides information about how long each stage of a network request took, with a more detailed, annotated, view of the timeline bar, so it is easy to locate performance bottlenecks. this tab can include the following sections. queued, started, downloaded new in firefox 72, we now show the following timings at the top of the timings tab, making dependency analysis a lot easier: queued: when the resource was queued for download. started: when the resource started downloading. downloaded: when the the resource finished downloading. note: future versions will also show this information when entries in the network monitor timeline graph are...
... name description blocked time spent in a queue waiting for a network connection. the browser imposes a limit on the number of simultaneous connections that can be made to a single server. in firefox this defaults to 6, but can be changed using the network.http.max-persistent-connections-per-server preference. if all connections are in use, the browser can't download more resources until a connection is released. dns resolution time taken to resolve a host name. connecting time taken to create a tcp connection. sending time taken to send the http request to the server. waiting waiting for a response from the server. receiving time taken to read the entire response from the server (or cache). ...

AbortController.AbortController() - Web APIs
we first create a controller using the abortcontroller() constructor, then grab a reference to its associated abortsignal object using the abortcontroller.signal property. when the fetch request is initiated, we pass in the abortsignal as an option inside the request's options object (see {signal}, below). ...
...nal property. when the fetch request is initiated, we pass in the abortsignal as an option inside the request's options object (see {signal}, below). this associates the signal and controller with the fetch request and allows us to abort it by calling abortcontroller.abort(), as seen below in the second event listener. var controller = new abortcontroller(); var signal = controller.signal; var downloadbtn = document.queryselector('.download'); var abortbtn = document.queryselector('.abort'); downloadbtn.addeventlistener('click', fetchvideo); abortbtn.addeventlistener('click', function() { controller.abort(); console.log('download aborted'); }); function fetchvideo() { ... fetch(url, {signal}).then(function(response) { ... }).catch(function(e) { reports.textcontent = 'downlo...

AbortController.abort() - Web APIs
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. syntax controller.abort(); parameters none. return value void. examples in the following snippet, we aim to download a video using the fetch api. we first create a controller using the abortcontroller() constructor, then grab a reference to its associated abortsignal object using the abortcontroller.signal property. when the fetch request is initiated, we pass in the abortsignal as an option inside the request's options object (see {signal}, below). this associates the signal and controller with the fetch request and allows us to abort it by calling abortcontroller.abort(), ...
...nal property. when the fetch request is initiated, we pass in the abortsignal as an option inside the request's options object (see {signal}, below). this associates the signal and controller with the fetch request and allows us to abort it by calling abortcontroller.abort(), as seen below in the second event listener. var controller = new abortcontroller(); var signal = controller.signal; var downloadbtn = document.queryselector('.download'); var abortbtn = document.queryselector('.abort'); downloadbtn.addeventlistener('click', fetchvideo); abortbtn.addeventlistener('click', function() { controller.abort(); console.log('download aborted'); }); function fetchvideo() { ... fetch(url, {signal}).then(function(response) { ... }).catch(function(e) { reports.textcontent = 'downlo...

AbortController.signal - Web APIs
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. syntax var signal = abortcontroller.signal; value an abortsignal object instance. examples in the following snippet, we aim to download a video using the fetch api. we first create a controller using the abortcontroller() constructor, then grab a reference to its associated abortsignal object using the abortcontroller.signal property. when the fetch request is initiated, we pass in the abortsignal as an option inside the request's options object (see {signal}, below). this associates the signal and controller with the fetch request and allows us to abort it by calling abortcontroller.abort(), as seen below in...
...nal property. when the fetch request is initiated, we pass in the abortsignal as an option inside the request's options object (see {signal}, below). this associates the signal and controller with the fetch request and allows us to abort it by calling abortcontroller.abort(), as seen below in the second event listener. var controller = new abortcontroller(); var signal = controller.signal; var downloadbtn = document.queryselector('.download'); var abortbtn = document.queryselector('.abort'); downloadbtn.addeventlistener('click', fetchvideo); abortbtn.addeventlistener('click', function() { controller.abort(); console.log('download aborted'); }); function fetchvideo() { ... fetch(url, {signal}).then(function(response) { ... }).catch(function(e) { reports.textcontent = 'downlo...

AbortController - Web APIs
abortcontroller object instance. properties abortcontroller.signal read only returns a abortsignal object instance, which can be used to communicate with/abort a dom request. methods abortcontroller.abort() aborts a dom request before it has completed. this is able to abort fetch requests, consumption of any response body, and streams. examples in the following snippet, we aim to download a video using the fetch api. we first create a controller using the abortcontroller() constructor, then grab a reference to its associated abortsignal object using the abortcontroller.signal property. when the fetch request is initiated, we pass in the abortsignal as an option inside the request's options object (see {signal}, below). this associates the signal and controller with the fetch req...
...nal property. when the fetch request is initiated, we pass in the abortsignal as an option inside the request's options object (see {signal}, below). this associates the signal and controller with the fetch request and allows us to abort it by calling abortcontroller.abort(), as seen below in the second event listener. var controller = new abortcontroller(); var signal = controller.signal; var downloadbtn = document.queryselector('.download'); var abortbtn = document.queryselector('.abort'); downloadbtn.addeventlistener('click', fetchvideo); abortbtn.addeventlistener('click', function() { controller.abort(); console.log('download aborted'); }); function fetchvideo() { ... fetch(url, {signal}).then(function(response) { ... }).catch(function(e) { reports.textcontent = 'downlo...

AbortSignal - Web APIs
isten to this event using addeventlistener() or by assigning an event listener to the oneventname property of this interface. abort invoked when the dom request(s) the signal is communicating with is/are aborted. also available via the onabort property. methods the abortsignal interface inherits methods from its parent interface, eventtarget. examples in the following snippet, we aim to download a video using the fetch api. we first create a controller using the abortcontroller() constructor, then grab a reference to its associated abortsignal object using the abortcontroller.signal property. when the fetch request is initiated, we pass in the abortsignal as an option inside the request's options object (see {signal}, below). this associates the signal and controller with the fetch req...
...nal property. when the fetch request is initiated, we pass in the abortsignal as an option inside the request's options object (see {signal}, below). this associates the signal and controller with the fetch request and allows us to abort it by calling abortcontroller.abort(), as seen below in the second event listener. var controller = new abortcontroller(); var signal = controller.signal; var downloadbtn = document.queryselector('.download'); var abortbtn = document.queryselector('.abort'); downloadbtn.addeventlistener('click', fetchvideo); abortbtn.addeventlistener('click', function() { controller.abort(); console.log('download aborted'); }); function fetchvideo() { ... fetch(url, {signal}).then(function(response) { ... }).catch(function(e) { reports.textcontent = 'downlo...

HTMLAnchorElement - Web APIs
text-anchor="middle" alignment-baseline="middle">htmlanchorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements those from htmlhyperlinkelementutils. element.accesskey is a domstring representing a single character that switches input focus to the hyperlink. htmlanchorelement.download is a domstring indicating that the linked resource is intended to be downloaded rather than displayed in the browser. the value represent the proposed name of the file. if the name is not a valid filename of the underlying os, browser will adapt it. htmlhyperlinkelementutils.hash is a usvstring representing the fragment identifier, including the leading hash mark ('#'), if any, in the refere...
...d to modify the value. the blur() and focus() methods are inherited from htmlelement from html5 on, but were defined on htmlanchorelement in dom level 2 html and earlier specifications. specifications specification status comment html living standardthe definition of 'htmlanchorelement' in that specification. living standard the following property has been added: download. technically, the url-related properties, media, host, hostname, pathname, port, protocol, search, and hash, have been moved to the htmlhyperlinkelementutils mixin, and htmlanchorelement implements this mixin. html5the definition of 'htmlanchorelement' in that specification. recommendation the methods blur() and focus(), as well as the properties tabindex and accesskey, are now...

HTMLAreaElement - Web APIs
rlinkelementutils. element.accesskey is a domstring containing a single character that switches input focus to the control. htmlareaelement.alt is a domstring that reflects the alt html attribute, containing alternative text for the element. htmlareaelement.coords is a domstring that reflects the coords html attribute, containing coordinates to define the hot-spot region. htmlareaelement.download is a domstring indicating that the linked resource is intended to be downloaded rather than displayed in the browser. the value represent the proposed name of the file. if the name is not a valid filename of the underlying os, browser will adapt it. htmlhyperlinkelementutils.hash is a usvstring containing the fragment identifier (including the leading hash mark (#)), if any, in the reference...
...lementutils. htmlhyperlinkelementutils.tostring() returns a usvstring containing the whole url of the script executed in the worker. it is a synonym for htmlhyperlinkelementutils.href. specifications specification status comment html living standardthe definition of 'htmlareaelement' in that specification. living standard the following property has been added: download. technically, the url-related properties, media, host, hostname, pathname, port, protocol, search, and hash, have been moving to the htmlhyperlinkelementutils mixin, and htmlareaelement implements this mixin. html5the definition of 'htmlareaelement' in that specification. recommendation technically, the properties tabindex and accesskey are now defined on htmlelement. the f...

HTMLMediaElement - Web APIs
oolean that reflects the controls html attribute, indicating whether user interface items for controlling the resource should be displayed. htmlmediaelement.controlslist read only returns a domtokenlist that helps the user agent select what controls to show on the media element whenever the user agent shows its own set of controls. the domtokenlist takes one or more of three possible values: nodownload, nofullscreen, and noremoteplayback. htmlmediaelement.crossorigin a domstring indicating the cors setting for this media element. htmlmediaelement.currentsrc read only returns a domstring with the absolute url of the chosen media resource. htmlmediaelement.currenttime a double-precision floating-point value indicating the current playback time in seconds; if the media has not started to pl...
...) this method, available only in mozilla's implementation, loads data from another media element. this works similarly to load() except that instead of running the normal resource selection algorithm, the source is simply set to the other element's currentsrc. this is optimized so this element gets access to all of the other element's cached and buffered data; in fact, the two elements share downloaded data, so data downloaded by either element is available to both. events inherits methods from its parent, htmlelement , defined in the globaleventhandlers mixin. listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface. abort fired when the resource was not fully loaded, but not as the result of an error. canplay fi...

Using IndexedDB - Web APIs
if (blob.type == 'text/html') { var reader = new filereader(); reader.onload = (function(evt) { var html = evt.target.result; iframe.load(function() { $(this).contents().find('html').html(html); }); }); reader.readastext(blob); } else if (blob.type.indexof('image/') == 0) { iframe.load(function() { ...
...the resource behind this url is subjected to the * "same origin policy", thus for this method to work, the url must come from * the same origin as the web site/app this code is deployed on. */ function addpublicationfromurl(biblioid, title, year, url) { console.log("addpublicationfromurl:", arguments); var xhr = new xmlhttp...

startSoftwareUpdate - Web APIs
this method has been largely superseded by newer install method, which is more flexible and allows you to install more than one xpi. note also that xpis installed with this method must have their own install.js files in which the full installation is defined. ...
...g and installation of the software at the specified url. method of installtrigger object syntax boolean startsoftwareupdate ( string url); parameters the startsoftwareupdate method has the following parameter: url a uniform resource locator specifying the location of the xpi file containing the software. returns true. description the startsoftwareupdate method triggers a software download and install from the specified url. this method has been largely superseded by newer install method, which is more flexible and allows you to install more than one xpi. note also that xpis installed with this method must have their own install.js files in which the full installation is defined. ...

msSaveBlob - Web APIs
the navigator.mssaveblob() method saves the file or blob to disk. this method behaves in the same way as navigator.mssaveoropenblob() except that this disables the file open option. syntax navigator.mssaveblob(blob, defaultname); parameters blob a blob to be saved. defaultname the file name to be used when saving file. ...
...isables the file open option. syntax navigator.mssaveblob(blob, defaultname); parameters blob a blob to be saved. defaultname the file name to be used when saving file. return value true is returned as long as the download notification bar is displayed, or false if a failure occured. notes when a site calls this method, the behavior is the same as when windows internet explorer downloads a file with the following in the header, where x-download-options removes the file open button from the browser file download dialog: content-length: <blob.size> content-type: <blob.type> content-disposition: attachment;filename=<defaultname> x-download-options: noopen specifications not part of any specifications. ...

SVGAElement - Web APIs
svgaelement.href see htmlanchorelement.href. ...
... svgaelement.href see htmlanchorelement.href. ...

WebGL best practices - Web APIs
gain can have high cost, particularly on tiled-rendering gpus common on mobile. when you're done with the contents of a framebuffer attachment, use invalidateframebuffer to discard the data, instead of leaving the driver to waste time storing the data for later use. depth/stencil and/or multisampled attachments in particular are great candidates for invalidateframebuffer. ...
...mebuffer attachment, use invalidateframebuffer to discard the data, instead of leaving the driver to waste time storing the data for later use. depth/stencil and/or multisampled attachments in particular are great candidates for invalidateframebuffer. ...

Using the Web Speech API - Web APIs
er-based recognition engine. your audio is sent to a web service for recognition processing, so it won't work offline. demo to show simple usage of web speech recognition, we've written a demo called speech color changer. when the screen is tapped/clicked, you can say an html color keyword, and the app's background color will change to that color. to run the demo, you can clone (or directly download) the github repo it is part of, open the html index file in a supporting desktop browser, or navigate to the live demo url in a supporting mobile browser like chrome. browser support support for web speech api speech recognition is curently limited to chrome for desktop and android — chrome has supported it since around version 33 but with prefixed interfaces, so you need to include prefixed ...
...his task as available. demo to show simple usage of web speech synthesis, we've provided a demo called speak easy synthesis. this includes a set of form controls for entering text to be synthesised, and setting the pitch, rate, and voice to use when the text is uttered. after you have entered your text, you can press enter/return to hear it spoken. to run the demo, you can clone (or directly download) the github repo it is part of, open the html index file in a supporting desktop browser, or navigate to the live demo url in a supporting mobile browser like chrome, or firefox os. browser support support for web speech api speech synthesis is still getting there across mainstream browsers, and is currently limited to the following: firefox desktop and mobile support it in gecko 42+ (win...

Using XMLHttpRequest - Web APIs
etrieved has changed. load the transfer is complete; all data is now in the response var oreq = new xmlhttprequest(); oreq.addeventlistener("progress", updateprogress); oreq.addeventlistener("load", transfercomplete); oreq.addeventlistener("error", transferfailed); oreq.addeventlistener("abort", transfercanceled); oreq.open(); // ... // progress on transfers from the server to the client (downloads) function updateprogress (oevent) { if (oevent.lengthcomputable) { var percentcomplete = oevent.loaded / oevent.total * 100; // ... } else { // unable to compute progress information since the total size is unknown } } function transfercomplete(evt) { console.log("the transfer is complete."); } function transferfailed(evt) { console.log("an error occurred while transferri...
...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. progress events exist for both download and upload transfers. the download events are fired on the xmlhttprequest object itself, as shown in the above sample. the upload events are fired on the xmlhttprequest.upload object, as shown below: var oreq = new xmlhttprequest(); oreq.upload.addeventlistener("progress", updateprogress); oreq.upload.addeventlistener("load", transfercomplete); oreq.upload.addeventlistener("error", transferfail...

font-display - CSS: Cascading Style Sheets
syntax /* keyword values */ font-display: auto; font-display: block; font-display: swap; font-display: fallback; font-display: optional; values auto the font display strategy is defined by the user agent. block gives the font face a short block period and an infinite swap period. swap gives the font face an extremely small block period and an infinite swap period. fallback gives the font face an extremely small block period and a short swap period. optional gives the font face an extremely small block period and no swap period. ...
...ves the font face an extremely small block period and an infinite swap period. fallback gives the font face an extremely small block period and a short swap period. optional gives the font face an extremely small block period and no swap period. description the font display timeline the font display timeline is based on a timer that begins the moment the user agent attempts to use a given downloaded font face. the timeline is divided into the three periods below which dictate the rendering behavior of any elements using the font face. font block period if the font face is not loaded, any element attempting to use it must render an invisible fallback font face. if the font face successfully loads during this period, it is used normally. font swap period if the font face is not loaded,...

unicode-range - CSS: Cascading Style Sheets
the unicode-range css descriptor sets the specific range of characters to be used from a font defined by @font-face and made available for use on the current page. if the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded. syntax /* <unicode-range> values */ unicode-range: u+26; /* single codepoint */ unicode-range: u+0-7f; unicode-range: u+0025-00ff; /* codepoint range */ unicode-range: u+4??; /* wildcard range */ unicode-range: u+0025-00ff, u+4??; /* multiple values */ values single codepoint a single unicode character code point, for example u+26. codepoint range a range of unicode code points. so for example, u+0025-00ff means include all characters in the range u+0025 to u...
...r example, u+0025-00ff means include all characters in the range u+0025 to u+00ff. wildcard range a range of unicode code points containing wildcard characters, that is using the '?' character, so for example u+4?? means include all characters in the range u+400 to u+4ff. description the purpose of this descriptor is to allow the font resources to be segmented so that a browser only needs to download the font resource needed for the text content of a particular page. for example, a site with many localizations could provide separate font resources for english, greek and japanese. for users viewing the english version of a page, the font resources for greek and japanese fonts wouldn't need to be downloaded, saving bandwidth. formal definition related at-rule@font-faceinitial valueu+0-10ffffc...

Recipe: Media objects - CSS: Cascading Style Sheets
d descriptive text on the other, e.g. a facebook post or tweet. requirements media object pattern needs some or all of the following characteristics: stacked on mobile, two columns on desktop. the image can be on the left or right. the image might be small or large. media objects can be nested. the media object should clear the contents no matter which side is tallest. the recipe download this example choices made i have chosen to use grid layout for the media object as it allows me to control the layout in two dimensions when i need to. this means that when we have a footer, with short content above, the footer can be pushed down to the bottom of the media object. another reason to use grid layout is in order that i can use fit-content() for the track sizing of the image. by ...
...irrored. when we nest one media object inside another we need to place it into the second track in the regular layout, and the first track when flipped. fallbacks there are a number of possible fallbacks for this pattern, depending on the browsers you wish to support. a good catch-all would be to float the image left, and to add a clearfix to the box to ensure that it contained the floats. download this example once floated elements become grid items the float no longer applies so you don’t need to do anything special to clear the float. what you will need to do is remove any margins applied to the item, and any widths which we don’t need in a grid context (we have the gap property to control it in grids, and the track takes control of the sizing). relevant resources on mdn css g...

Creating a cross-browser video player - Developer guides
<param name="allowfullscreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <img alt="tears of steel poster image" src="img/poster.jpg" width="1024" height="428" title="no video playback possible, please download the video from the link below" /> </object> <!-- offer download --> <a href="video/tears-of-steel-battle-clip-medium.mp4">download mp4</a> </video> <figcaption>&copy; blender foundation | <a href="http://mango.blender.org">mango.blender.org</a></figcaption> </figure> even though this player will define its own custom control set, the controls attribute is still added to t...
...ing these different source formats gives the best chance of being supported across all browsers that support html5 video. for further information on video formats and browser compatibility, see supported media formats. for browsers that do not support html5 video, a flash player is provided that will allow playback of the mp4 video source, provided the end user has flash installed. in addition a download link is displayed to allow users to download the mp4 video file, should they wish to (providing those without flash installed with a method of viewing the video, a fallback for a fallback if you like). the code above would allow playback of the video in most browsers, using the browser's default control set. the next step is to define a custom control set, also in html, which will be used to con...

Overview of events and handlers - Developer guides
ated with a page, to parse, process, draw, and present the page to the user. the displayed page remains unchanged until the browser requests a new page. with the change to dynamic page rendering, browsers loop continuously between processing, drawing, presenting content, and waiting for some new event trigger. event triggers include the completion of the loading of a resource on the network e.g., downloads an image that can now be drawn on the screen, the completion of parsing a resource by the browser e.g., processes the html content of a page, the interaction of a user with the contents of the page e.g., clicks a button. douglas crockford explains this change effectively in several lectures, notably his talk, an inconvenient api: the theory of the dom, which shows the change in flow from the ori...
...ork to make relevant; that work is awaiting some global reorganization work on the documents. this will also need finding a good explanation of the events involved during page loading, such as discussed partially in this web page or in this stack overflow question. ...

HTML5 - Developer guides
vel of security and the wished rendering of an <iframe> element. mathml allows directly embedding mathematical formulas. introduction to html5 this article introduces how to indicate to the browser that you are using html5 in your web design or web application. html5 reference guide quick-reference html5 sheet containing markup generators, code examples and web developer tools. the guide is downloadable for ease of use and access. this page was created with help from the w3c as a quick guide for those who have some basic familiarity and experience using html5. downloadable html5 guide a quick guide to html5, including the common html tags as well as the new html5 tags. downloadable in pdf and png formats. html5 cheat sheet a handy html 5 cheat sheet for beginners who want to master html...
...ions to animate between different states or using css animations to animate parts of the page without a triggering event, you can now control mobile elements on your page. typography improvement authors have better control to reach better typography. they can control text-overflow and hyphenation, but also can add a shadow to it or control more precisely its decorations. custom typefaces can be downloaded and applied thanks to the new @font-face at-rule. new presentational layouts in order to improve the flexibility of designs, two new layouts have been added: the css multi-column layouts and css flexible box layout. ...

<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
en". allowpaymentrequest set to true if a cross-origin <iframe> should be allowed to invoke the payment request api. this attribute is considered a legacy attribute and redefined as allow="payment". csp a content security policy enforced for the embedded resource. see htmliframeelement.csp for details. height the height of the frame in css pixels. default is 150. importance the download priority of the resource in the <iframe>'s src attribute. allowed values: auto (default) no preference. the browser uses its own heuristics to decide the priority of the resource. high the resource should be downloaded before other lower-priority page resources. low the resource should be downloaded after other higher-priority page resources. loading indicates how the browse...
... include the origin and the path (but not the fragment, password, or username). this value is unsafe, because it leaks origins and paths from tls-protected resources to insecure origins. sandbox applies extra restrictions to the content in the frame. the value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions: allow-downloads-without-user-activation : allows for downloads to occur without a gesture from the user. allow-downloads : allows for downloads to occur with a gesture from the user. allow-forms: allows the resource to submit forms. if this keyword is not used, form submission is blocked. allow-modals: lets the resource open modal windows. allow-orientation-lock: lets the resource lock the screen orie...

Link types - HTML: Hypertext Markup Language
ocol used to make such a call is defined in the pingback 1.0 specification. note: if the x-pingback: http header is also present, it supersedes the <link> element with this link type. <link> <a>, <area>, <form> preconnect provides a hint to the browser suggesting that it open a connection to the linked web site in advance, without disclosing any private information or downloading any content, so that when the link is followed the linked content can be fetched more quickly. <link> <a>, <area>, <form> prefetch suggests that the browser fetch the linked resource in advance, as it is likely to be requested by the user. starting with firefox 44, the value of the crossorigin attribute is taken into consideration, making it possible to make anonymous prefetc...
...linked resource in advance, as it is likely to be requested by the user. starting with firefox 44, the value of the crossorigin attribute is taken into consideration, making it possible to make anonymous prefetches. note: the link prefetch faq has details on which links can be prefetched and on alternative methods. <link> <a>, <area>, <form> preload tells the browser to download a resource because this resource will be needed later during the current navigation. see preloading content with rel="preload" for more details. <link> <a>, <area>, <form> prerender suggests that the browser fetch the linked resource in advance, and that it also render the prefetched content offscreen so it can be quickly presented to the user once needed. <link> <a>, <a...

MIME types (IANA media types) - HTTP
the most up-to-date and complete list at their media types page. important: browsers use the mime type, not the file extension, to determine how to process a url, so it's important that web servers send the correct mime type in the response's content-type header. if this is not correctly configured, browsers are likely to misinterpret the contents of files and sites will not work correctly, and downloaded files may be mishandled. structure of a mime type the simplest mime type consists of a type and a subtype; these are each strings which, when concatenated with a slash (/) between them, comprise a mime type. no whitespace is allowed in a mime type: type/subtype the type represents the general category into which the data type falls, such as video or text. the subtype identifies the exact k...
... the content-disposition header was set to attachment, and propose a "save as" dialog. text/plain this is the default for textual files. even if it really means "unknown textual file," browsers assume they can display it. note that text/plain does not mean "any kind of textual data." if they expect a specific kind of textual data, they will likely not consider it a match. specifically if they download a text/plain file from a <link> element declaring a css file, they will not recognize it as a valid css file if presented with text/plain. the css mime type text/css must be used. text/css css files used to style a web page must be sent with text/css. if a server doesn't recognize the .css suffix for css files, it may send them with text/plain or application/octet-stream mime types. if so, the...

Accept-Ranges - HTTP
the accept-ranges response http header is a marker used by the server to advertise its support of partial requests. the value of this field indicates the unit that can be used to define a range. in presence of an accept-ranges header, the browser may try to resume an interrupted download, rather than to start it from the start again. header type response header forbidden header name no syntax accept-ranges: <range-unit> accept-ranges: none directives <range-unit> defines the range unit the server supports. though bytes is the only range unit formally defined by rfc 7233, additional range units may be registered in the http range unit registry. none no range unit is supported, this makes the header equivalent of its own absence and is therefore rarely used...
...e-unit> defines the range unit the server supports. though bytes is the only range unit formally defined by rfc 7233, additional range units may be registered in the http range unit registry. none no range unit is supported, this makes the header equivalent of its own absence and is therefore rarely used, though some browsers, like ie9, it is used to disable or remove the pause buttons in the download manager. examples accept-ranges: bytes specifications specification title rfc 7233, section 2.3: accept-ranges hypertext transfer protocol (http/1.1): range requests ...

HEAD - HTTP
a response to a head method should not have a body. if it has one anyway, that body must be ignored: any entity headers that might describe the erroneous body are instead assumed to describe the response which a similar get request would have received. ...
... a response to a head method should not have a body. if it has one anyway, that body must be ignored: any entity headers that might describe the erroneous body are instead assumed to describe the response which a similar get request would have received. ...

HTTP range requests - HTTP
checking if a server supports partial requests if the accept-ranges is present in http responses (and its value isn't "none"), the server supports range requests. you can check this by issuing a head request with curl, for example. curl -i http://i.imgur.com/z4d4kwk.jpg http/1.1 200 ok ... accept-ranges: bytes content-length: 146515 in this response, accept-ranges: bytes indicates that bytes can be used as unit to define a range. ...
... content-length: 146515 in this response, accept-ranges: bytes indicates that bytes can be used as unit to define a range. here the content-length header is also useful as it indicates the full size of the image to retrieve. if sites omit the accept-ranges header, they likely don't support partial requests. some sites also explicitly send "none" as a value, indicating no support. in some apps, download managers disable their pause buttons in that case. curl -i https://www.youtube.com/watch?v=ewtz2xpqwpa http/1.1 200 ok ... accept-ranges: none requesting a specific range from a server if the server supports range requests, you can issue such a request by using the range header. it indicates the part(s) of a document that the server should return. single part ranges we can request a single...

OpenSearch description format
e <head> of your web page: <link rel="search" type="application/opensearchdescription+xml" title="searchtitle" href="pluginurl"> replace the bolded items as explained below: searchtitle the name of the search to perform, such as "search mdc" or "yahoo! search". this must match your plugin file's <shortname>. pluginurl the url to the xml search plugin, so the browser can download it. if your site offers multiple search plugins, you can support autodiscovery for them all. for example: <link rel="search" type="application/opensearchdescription+xml" title="mysite: by author" href="http://example.com/mysiteauthor.xml"> <link rel="search" type="application/opensearchdescription+xml" title="mysite: by title" href="http://example.com/mysitetitle.xml"> this way,...
...ns using content-type: application/opensearchdescription+xml. be sure that your search plugin xml is well formed. you can check by loading the file directly into firefox. ampersands (&) in the template url must be escaped as &amp;, and tags must be closed with a trailing slash or matching end tag. the xmlns attribute is important — without it you could get the error message "firefox could not download the search plugin". you must include a text/html url — search plugins including only atom or rss url types (which is valid, but firefox doesn't support) will also generate the "could not download the search plugin" error. remotely fetched favicons must not be larger than 10kb (see bug 361923). in addition, the search plugin service provides a logging mechanism that may be useful to plugin d...

Web Performance
ance, but there are some css features that impact performance more than others. in this article we look at some css properties that impact performance and suggested ways of handling styles to ensure performance is not negatively impacted. javascript performance best practices javascript, when used properly, can allow for interactive and immersive web experiences — or it can significantly harm download time, render time, in-app performance, battery life, and user experience. this article outlines some javascript best practices that should be considered to ensure even complex content is as performant as possible. mobile performance with web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, cpu and battery life...
... speculative parsing speed index ssl synthetic monitoring tcp handshake tcp slow start time to first byte time to interactive tls transmission control protocol (tcp) tree shaking web performance documents yet to be written javascript performance best practices javascript, when used properly, can allow for interactive and immersive web experiences ... or it can significantly harm download time, render time, in app performance, battery life, and user experience. this article outlines some javascript best practices that can ensure even complex content's performance is the highest possible. mobile performance with web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, cpu, and battery life, it is im...

Making PWAs work offline with Service workers - Progressive web apps (PWAs)
...
...the serviceworkercontainer.register() method. its contents reside in the sw.js file, and can be executed after the registration is successful. it's the only piece of service worker code that sits inside the app.js file; everything else that is service worker-specific is written in the sw.js file itself. lifecycle of a service worker when registration is complete, the sw.js file is automatically downloaded, then installed, and finally activated. installation the api allows us to add event listeners for key events we are interested in — the first one is the install event: self.addeventlistener('install', (e) => { console.log('[service worker] install'); }); in the install listener, we can initialize the cache and add files to it for offline use. our js13kpwa app does exactly that. first...

Graphic design for responsive sites - Progressive web apps (PWAs)
layout includes a large header graphic and several programmatic graphics (e.g. css3 drop shadows and gradients), you may want to simplify or remove certain assets for the site's mobile layout, or even provide smaller assets to suit the smaller screen better. this is because in general mobile devices will have less processing power and bandwidth available, so you want to reduce the processing and downloads. in addition, mobile devices have smaller screen sizes, so it makes sense to reduce visual clutter on a mobile layout. css media queries allow us to serve different css rules dependant on viewport dimensions, and you should consider using mobile first media queries where possible. this means that the default layout before any media queries are encountered in the css is the small screen/mobile l...
...e layout. css media queries allow us to serve different css rules dependant on viewport dimensions, and you should consider using mobile first media queries where possible. this means that the default layout before any media queries are encountered in the css is the small screen/mobile layout, not the wide screen/desktop layout. so when the page is loaded on a mobile device, the mobile will only download the mobile assets, and not the desktop resource assets. making html <img>s responsive is not as easy, as there is currently no native mechanism to serve different html images depending on context. there are a number of workarounds, but none of them are perfect right now. for an overview of what's available, read choosing a responsive image solution. coping with different resolutions in this se...

Mobile first - Progressive web apps (PWAs)
width of the content at 600px and centers it in the space available, then adds in a gradient and a nice background image for the wider layout. this is a key point - the background image is 126kb, and not ideal for narrow layouts. having it included in the "600 pixels or wider" media query means that narrow screen devices won't read that media query, so they will not waste their time and bandwidth downloading that image. note: firefox's responsive design view is a great way to get a quick idea of how your media queries are behaving themselves. try it out with tools > web developer > responsive design view. feature detection feature detection involves doing tests (usually in javascript) to determine whether a browser supports a certain feature, and then serving css or javascript to suit that si...
...e to detecting everything is a good start), but really it is much better to use a dedicated existing solution, such as modernizr. modernizr is a good choice as it not only includes a feature detect for just about everything (css, html5, some other bits besides), it is also fairly reliable, and you can create your own custom version with only the feature detects you need in it, using the modernizr download builder. the full uncompressed modernizr library is 42kb, but the version we are using in this demo is only 8kb. i put modernizr inside my js/lib directory, then included it by putting the following construct inside my html file: <script type="text/javascript" src="js/lib/modernizr.js"></script> with modernizr in place, we can now use the following js block to test whether media queries are su...

The building blocks of responsive design - Progressive web apps (PWAs)
d more these days is making image/video weight (size in kb) responsive as well as the dimensions of the image on screen. yes, you want the images to be contained inside the app ui whether you are using it on desktop or mobile, but you should also consider that mobile apps have much smaller viewport dimensions available than desktop apps, so you should try to give mobile devices a smaller image to download. mobiles in general (more commonly in some parts of the world than others) are on lower bandwidth connections and have less memory available than desktop devices, so yes, those extra kilobytes really do count. another challenge is dealing with high resolution screens — raster graphics designed for low resolutions are in danger of appearing tiny when displayed on a high resolution screen, so de...
...e 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 mobile browsers only download the mobile background image asset — not the desktop mobile assets — because they fail the media query tests and therefore ignore the media queries. you can also serve a larger graphic to a higher resolution device using a resolution media query, like so: button { background: url(images/low-res-header.jpg) 1rem center ; } @media only screen and (-webkit-min-device-pixel-ratio: 2), o...

Caching compiled WebAssembly modules - WebAssembly
this article explains the best practices around this. ...
......

WebAssembly Concepts - WebAssembly
ript is powerful enough to solve most problems people have on the web today. we have run into performance problems, however, when trying to use javascript for more intensive use cases like 3d games, virtual and augmented reality, computer vision, image/video editing, and a number of other domains that demand native performance (see webassembly use cases for more ideas). additionally, the cost of downloading, parsing, and compiling very large javascript applications can be prohibitive. mobile and other resource-constrained platforms can further amplify these performance bottlenecks. webassembly is a different language from javascript, but it is not intended as a replacement. instead, it is designed to complement and work alongside javascript, allowing web developers to take advantage of both lang...
...memories, tables, and instances. given a webassembly instance, javascript code can synchronously call its exports, which are exposed as normal javascript functions. arbitrary javascript functions can also be synchronously called by webassembly code by passing in those javascript functions as the imports to a webassembly instance. since javascript has complete control over how webassembly code is downloaded, compiled and run, javascript developers could even think of webassembly as just a javascript feature for efficiently generating high-performance functions. in the future, webassembly modules will be loadable just like es2015 modules (using <script type='module'>), meaning that javascript will be able to fetch, compile, and import a webassembly module as easily as an es2015 module. how do i u...

Reddit Example - Archive of obsolete content
addon, which will load it in a tab. event.stoppropagation(); event.preventdefault(); self.port.emit('click', t.tostring()); }); this script uses jquery to interact with the dom of the page and the self.port.emit function to pass urls back to the add-on script. to run this example you'll also have to have an icon file named "icon-16.png" saved in your add-on's "data" directory. you could download this icon: . ...

Modules - Archive of obsolete content
h behaves like the exports object, and module, which is an object representing the module itself. the require function has some extra features not provided by loadscript: it solves the problem of resolving relative urls (which we have left unresolved), and provides a caching mechanism, so that when the same module is loaded twice, it returns the cached module object rather than triggering another download. the module system is implemented using a loader object, which is actually provided as a module itself. it is defined in the module “toolkit/loader”: const { loader } = require('toolkit/loader') the loader constructor allows you to create your own custom loader objects. it takes a single argument, which is a named options object. for instance, the option paths is used to specify a list of p...

private-browsing - Archive of obsolete content
doing nothing"); } else { worker.port.emit("log-content"); } } pagemod.pagemod({ include: "*", contentscript: loggingscript, onattach: logpublicpagecontent }); tracking private-browsing exit sometimes it can be useful to cache some data from private windows while they are open, as long as you don't store it after the private browsing windows have been closed. for example, the "downloads" window might want to display all downloads while there are still some private windows open, then clean out all the private data when all private windows have closed. to do this with the sdk, you can listen to the system event named "last-pb-context-exited": var events = require("sdk/system/events"); function listener(event) { console.log("last private window closed"); } events.on("last-pb...

cfx to jpm - Archive of obsolete content
e old cfx tool. you can use jpm from firefox 38 onwards. this article highlights the main differences between cfx and jpm. a guide to working with jpm if you're already familiar with cfx. installation cfx is python-based and is distributed as a zip file. jpm is node-js-based and is distributed through npm. so for jpm you don't need python, but you do need npm. to get new updates of cfx you download and extract a new zip file, while to get the new version of jpm, use npm update. for jpm installation instructions, see the installation section in the jpm reference. activation you need to call cfx activate before you can use cfx, and this only works in the current command shell: if you open a new shell you have to call activate again. with jpm, you don't need to activate. once it's installe...

Storing annotations - Archive of obsolete content
when the panel is shown we send it the array of stored annotations. when the panel sends us a url we use the tabs module to open it in a new tab. finally we need to connect this to the widget's right-click message: var widget = widgets.widget({ id: 'toggle-switch', label: 'annotator', contenturl: data.url('widget/pencil-off.png'), contentscriptwhen: 'ready', contentscriptfile: dat...

Getting Started (jpm) - Archive of obsolete content
the command prompt, execute jpm run again. this time clicking it takes you to https://developer.mozilla.org/. packaging the add-on when you've finished the add-on and are ready to distribute it, you'll need to package it as an xpi file. this is the installable file format for firefox add-ons. you can distribute xpi files yourself or publish them to https://addons.mozilla.org so other users can download and install them. to build an xpi, just execute the command jpm xpi from the add-on's directory: jpm xpi you should see a message like: jpm info successfully created xpi at /path/to/my-addon/@my-addon-0.0.1.xpi to test that this worked, try installing the xpi file in your own firefox installation. you can do this by pressing the ctrl+o key combination (cmd+o on mac) from within firefox, or...

Getting started (cfx) - Archive of obsolete content
the command prompt, execute cfx run again. this time clicking it takes you to https://developer.mozilla.org/. packaging the add-on when you've finished the add-on and are ready to distribute it, you'll need to package it as an xpi file. this is the installable file format for firefox add-ons. you can distribute xpi files yourself or publish them to https://addons.mozilla.org so other users can download and install them. to build an xpi, just execute the command cfx xpi from the add-on's directory: cfx xpi you should see a message like: exporting extension to my-addon.xpi. to test that this worked, try installing the xpi file in your own firefox installation. you can do this by pressing the ctrl+o key combination (cmd+o on mac) from within firefox, or selecting the "open" item from firefo...

List Open Tabs - Archive of obsolete content
e user clicks it: require("sdk/ui/button/action").actionbutton({ id: "list-tabs", label: "list tabs", icon: "./icon-16.png", onclick: listtabs }); function listtabs() { var tabs = require("sdk/tabs"); for (let tab of tabs) console.log(tab.url); } note: to get this working, you will need to save an icon for the button to your add-on's "data" directory as "icon-16.png". you can download the icon here: . run the add-on, load a couple of tabs and click the button. you'll see output in the command line console that looks something like this: info: http://www.mozilla.org/about/ info: http://www.bbc.co.uk/ you don't get direct access to any content hosted in the tab. to access tab content, you need to attach a script to the tab using tab.attach(). this add-on attaches a script t...

Modifying Web Pages Based on URL - Archive of obsolete content
".org" url is loaded // the script replaces the page contents with a message pagemod.pagemod({ include: "*.org", contentscriptfile: "./my-script.js" }); loading multiple content scripts you can load more than one script, and the scripts can interact directly with each other. for example, you could rewrite my-script.js to use jquery. $("body").html("<h1>page matches ruleset</h1>"); then download jquery to add-on's data directory, and load the script and jquery together (making sure to load jquery first). // import the page-mod api var pagemod = require("sdk/page-mod"); // import the self api var self = require("sdk/self"); // create a page mod // it will run a script whenever a ".org" url is loaded // the script replaces the page contents with a message pagemod.pagemod({ include: "*.

Modifying the Page Hosted by a Tab - Archive of obsolete content
's a simple example: var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: 'document.body.style.border = "5px solid red";' }); } }); to run this example, save an icon file named "icon-16.png" in add-on's "data" directory. you could download this icon: . this add-on creates a button with mozilla favicon as an icon. it has a click handler which fetches the active tab and loads a script into the page hosted by the active tab. the script is specified using the contentscript option, and just draws a red border around the page. then open any web page in the browser window, and click the button . you should see a red border appear around...

Unit Testing - Archive of obsolete content
utton = require("sdk/ui/button/action").actionbutton({ id: "base64", label: "base64", icon: "./icon-16.png", onclick: function() { encoded = base64.btoa("hello"); console.log(encoded); decoded = base64.atob(encoded); console.log(decoded); } }); to run this example you'll also have to have an icon file named "icon-16.png" saved in your add-ons "data" directory. you could download this icon: . now "index.js" imports the base64 module and calls its two exported functions. if we run the add-on and click the button, we should see the following logging output: info: agvsbg8= info: hello testing the base64 module navigate to the add-on's test directory and delete the test-index.js file. in its place create a file called test-base64.js with the following contents: var base...

File I/O - Archive of obsolete content
ries live. defprofrt d the root of the default profile directory (for example /root/.mozilla). defrt d %curprocd%/defaults - the root directory of all defaults directories. the user's desktop directory (for example ~/desktop on linux or mac os x, c:\documents and settings\username\desktop on windows). desk f dfltdwnld f the default downloads directory (for example, ~/downloads on mac os x). home f the user's home directory (for example, /home/username). prefd f directory containing user prefs prfdef d %installation%/defaults/pref profd f the profile directory. profdef d the profile defaults of the "current" locale. should be the first choice. profdef...

Rosetta - Archive of obsolete content
ible way to start from. the following code is nothing but the base for an extensible collection of compilers. but by default, no compilers are loaded. it relies on the fact that unrecognized mime types will be simply ignored: this allows us to manually parse them. for a fast overview on the code proposed here you can git clone https://github.com/madmurphy/rosetta.js, or, at your choice, directly download this .zip file. rosetta.js: library "use strict"; /*\ |*| |*| :: rosetta.js :: |*| |*| a possible, extensible collection of compilers to native ecmascript. |*| |*| november 12, 2014 |*| |*| https://developer.mozilla.org/add-ons/code_snippets/rosetta |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is released under the gnu public license, version 3 or later. |*...

StringView - Archive of obsolete content
ag1haw4ax0p2x1jlz2lzdgvyq2xhc3nlcwbfx1rnq19ftkrfxwbfsvrnx3jlz2lzdgvyve1dbg9uzvrhymxlaf9pbml0aa==", "ascii", 1444, 12); alert(string.fromcharcode.apply(null, swhelloworld.bufferview)); // swhelloworld.buffer contains the whole file alert(swhelloworld); // "hello world" /* traslating "hello world" into italian... */ swhelloworld.rawdata.set((new stringview("ciao mondo!!", "ascii")).rawdata); /* download the new executable file... */ location.assign(url.createobjecturl(new blob([swhelloworld.buffer], { "type": "application\/x-executable" }))); note: the executable above has been compiled with gnu gcc 4.8.1 running on a 64-bit machine with arch gnu/linux. glossary element an item of the backing array (whether uint8array, uint16array, uint32array, etc.) codepoint an unique number for each ...

JavaScript Daemons Management - Archive of obsolete content
f setinterval with a recursive invocation of settimeout) daemon-methods.js (a wide and highly scalable collection of methods) the only independent module is daemon.js: both the daemon-safe.js module and the daemon-methods.js module require daemon.js to work. for a fast overview on the code proposed here you can git clone https://github.com/madmurphy/daemon.js.git. or, at your choice, directly download this .zip file. about the “callback arguments” polyfill in order to make this framework compatible with internet explorer (which doesn't support sending additional parameters to timers' callback function, neither with settimeout() or setinterval()) we included the ie-specific compatibility code (commented code), which enables the html5 standard parameters' passage functionality in that brow...

Enhanced Extension Installation - Archive of obsolete content
is possible to order install locations using the priority property on an install location object. this determines whether or not an extension from one install location can "trump" the same extension installed at a different install location. user action requested notifications are now sent with the em-action-requested topic through the observer service: item-installed an item has just been downloaded and configured for installation for the first time. item-upgraded a new version of an installed item has been downloaded and configured for installation. item-uninstalled an item has been configured for uninstallation. item-enabled an item has been configured for enabling. item-disabled an item has been configured for disabling. things this upgrade does not do replace rdf/xml as ...

Appendix: What you should know about open-source software licenses - Archive of obsolete content
could be something like “if you pay me money” or “you can print up to 10,000 copies.” software licenses software is subject to copyright law. in order to use it (in the authorial sense), you need permission from the copyright holder. how software licenses work in order to duplicate, distribute, or modify software, you need a use permit. duplicating software would be burning cd-rs or downloading from the internet (copying from server to client). distributing software would be selling that cd-r or publishing the software on the internet. modifying software would be changing its functionality or adding new functions. duplication: copying a piece of software distribution: passing a piece of software to another person modification: modifying the software a typical software license wil...

Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
sion developer. gonzui gonzui is a full-text source-code search engine from satoru takabayashi, the well-known developer of the namazu search engine software. fixme: not sure we should talk about this tool installation windows users can take advantage of a self-contained version created by soutaro matsumoto called “gonzui for win32” http://soutaro.com/gonzui-win32/ run it as follows: download gonzui-win32-1.2.2.zip and expand it into a suitable directory. download the firefox source code and place it in the same directory as gonzui (simply because it’s easier to specify a file that’s in the same directory). open a command prompt and navigate to the directory containing gonzui. the next command will import the source code: gonzui-import.exe mozilla once the import process is co...

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
d on implementations and markup as of 2001, and current xul differs from it in many aspects. for the latest xul specifications, please see the xul reference on mdc and the xul page in the mozilla wiki. for each element that i explain in this chapter, i will illustrate it with a source code example. you can type these examples up and open them in firefox to see how they behave and appear. you can download a file with all the source code examples from: fixme: attache the translated tarball - paul task !. xul display methods xul is used almost exclusively in mozilla applications like firefox and thunderbird, and extensions for them, but other web browsers based on firefox or the gecko engine, and even web-based content also used xul. for example, there is the mozilla amazon browser, which helps wi...

Custom XUL Elements with XBL - Archive of obsolete content
it's used in xul almost exclusively. with xbl you can define new elements and define their properties, attributes, methods and event handlers. many complex elements such as tabs, buttons and input controls are implemented using xbl and simpler xul elements. as explained earlier, xul is really just boxes, text and images. we'll look into xbl using a modified version of the hello world extension. download the hello world xbl project, build it and test it for a while. you should see a new item in the hello world menu, that opens a binding test window where you can add "persons" to a list. xbl basics in order to create an xbl binding you'll need 2 files: the xbl file and a css file that binds an element name to your xbl declaration. if you look into the content directory, you'll see both files: ...

Handling Preferences - Archive of obsolete content
oot. the naming of the js file is not compulsory, but it is the standard most extensions use. note: the purpose of the defaults directory is to hold non-code files your extension needs. in the past we have used this directory to store xslt files for xml transformations and local storage template files (more on this later). it's the best place to put miscellaneous files your extension needs. download this sample hello world using preferences. there are a couple of additions in the makefiles, to include the preference file xulschoolhello.js. the contents of the file are fairly simple: // amount of messages shown to the user. pref("extensions.xulschoolhello.message.count", 0); this defines a preference we'll use to keep track of the amount of times we have displayed a greeting message to ...

Intercepting Page Loads - Archive of obsolete content
t 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 objects (your xpcom service...

JavaScript Object Management - Archive of obsolete content
resource://xulschoolhello/messagecount.js code modules are regular js files, so there's nothing new in regards to naming or file types. mozilla has adopted a standard of using the extension .jsm for these files, but they say .js is fine as well. to keep things simple, specially regarding code editors and default file associations in the developer's system, we have decided to stick with .js. download this version of the hello world project with jsm to see the changes you need to make to the build system in order to include the files in the modules folder. they are minimal, and we add a very small makefile.in file in the modules directory, just to keep everything separated and organized. with the setup out of the way, let's get to it. what are javascript code modules? a javascript code modul...

XPCOM Objects - Archive of obsolete content
idl interface file, and the implementation js file. in your final extension xpi you'll need to include the js implementation file, and the xpt file, which is a compiled version of your idl file. you won't need the idl or xpt files if your components only use pre-existing firefox interfaces. in this case you may also find it easier to implement your component using jsm and the xpcomutils module. download this version of the hello world project with xpcom to see how xpcom files are structured in the project and built. (your build will probably break, we'll cover this later on.) in the components directory, the file xsihellocounter.idl has the following contents: #include "nsisupports.idl" /** * counter for the hello world extension. keeps track of how many times the * hello world message ha...

Setting up an extension development environment - Archive of obsolete content
ilename doesn't imply -no-remote, therefore use them together. if you are already running a firefox instance without -no-remote, and you attempt to start another instance with -p profilename (but without the -no-remote parameter), that second invocation would ignore its -p profilename parameter, instead opening a new window for the already running instance; sharing all its profile, sessions etc. download firefox download your desired version of firefox. unpack them in your user home directory, and name folders for easy navigation to firenightly and firedevedition or similar. you do not have to install these unstable versions, if you do not wish. make a symbolic link (also referred to as a shortcut) to the firefox binary (firefox.exe on windows), then move the link to your desktop, or your pref...

Firefox addons developer guide - Archive of obsolete content
article. apostrophes are being done using curly apostrophes instead of straight ones as is done everywhere else in mdc. the stuff about installing the dom inspector (https://developer.mozilla.org/en/firefox_addons_developer_guide/let%27s_build_a_firefox_extension#install_the_dom_inspector) is not accurate for firefox 3 or later, since it's no longer included in the firefox installer and must be downloaded from amo. filenames should use <code> styling. this is available from the style drop-down menu in the editor. variable and function names use <code> styling. xpi should be in all caps instead of written as ("xpi"). method and function names should have parentheses after them. for example, here: https://developer.mozilla.org/en/firefox_addons_developer_guide/let's_build_a_firefox_extension...

Add-ons - Archive of obsolete content
nly. for complex extensions, it may be necessary to create components in c++ that provide additional functionality. extension etiquette this article describes best practices when making extensions, including how to be kind to your users. it assumes that you are already familiar with building an extension. extension packaging extensions are packaged in a form of installable bundle which can be downloaded and installed by a user, or provided pre-packaged with an application or by an external program. extensions use a directory structure which can provide chrome, components, and other files to extend the functionality of an xul program. extensions support in seamonkey 2 starting with seamonkey 2 alpha 1 seamonkey supports toolkit/-style extensions. these type of extensions have many advantages ...

Adding preferences to an extension - Archive of obsolete content
dialog that lets you switch to a stock other than one of the ones included in the popup menu. as before, concepts covered in the previous articles in this series won't be rehashed here, so if you haven't already seen them: creating a status bar extension creating a dynamic status bar extension also, for reference, you may want to take a look at preferences system and the preferences api. download the sample you can download a copy of this sample to look over, or to use as the basis for your own extension. get the code here: download the sample update the manifests the install manifest and chrome manifest need to be updated. by and large, the changes are simply changing the id of the extension. however, we do need to add one new line to the install.rdf file: <em:optionsurl>chrome://s...

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
ld you say to a site developer considering a similar conversion to standards-based layout, either with simple tables or no tables at all? i think the conversion is a matter of taking into account several considerations. ...

CSS3 - Archive of obsolete content
osed. css style attributes recommendation since november 7th, 2013 formally defines the syntax of the content of the html style global attribute. css fonts module level 3 candidate recommendation since september 20th, 2018 amends the css2.1 font matching algorithm to be closer to what is really implemented. adds: support for downloadable fonts via the css @font-face at-rule. the control of the contextual inter-glyph spacing via the css font-kerning property. the choice of language-specific glyphs via the css font-language-override property. the choice of glyphs with specific opentype features via the css font-feature-settings property. the control of the aspect ratio to use when fallback fonts are selected...

Creating a status bar extension - Archive of obsolete content
e apply to any xul-based application; however, to keep from getting completely overwhelmed, we're going to focus specifically on firefox. this sample will add a static text string to the status bar at the bottom of firefox browser windows. if this sounds a lot like the existing building an extension article, you're right. however, this sample will be expanded upon in later articles in the series. download the sample you can download a copy of this sample to look over -- or to use as the basis for your own extension. download the sample the install manifest the install manifest, install.rdf, is a text file containing information that tells the host application important information about the extension. <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="h...

error - Archive of obsolete content
the error event is fired when an error occurred while downloading the cache manifest or updating the content of the application. general info specification offline interface event bubbles no cancelable no target applicationcache default action none properties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree). read only. type string the type of event. read only. canbubble boolean does the event normally bubble? read only. cancelable boolean is it possible to cancel the event? read only. related events checking noupdate downloading progress cached updateready obsolete error ...

noupdate - Archive of obsolete content
rty type description target eventtarget (dom element) the event target (the topmost target in the dom tree). read only. type string the type of event. read only. canbubble boolean does the event normally bubble? read only. cancelable boolean is it possible to cancel the event? read only. related events checking noupdate downloading progress cached updateready obsolete error ...

obsolete - Archive of obsolete content
rty type description target eventtarget (dom element) the event target (the topmost target in the dom tree). read only. type string the type of event. read only. canbubble boolean does the event normally bubble? read only. cancelable boolean is it possible to cancel the event? read only. related events checking noupdate downloading progress cached updateready obsolete error ...

Events - Archive of obsolete content
archived event pages domsubtreemodifiedmozaudioavailablemozbeforeresizemozorientationcachedchargingchangechargingtimechangecheckingdischargingtimechangedownloadingerrorlevelchangenoupdateobsoleteprogressupdateready ...

Install.js - Archive of obsolete content
a firefox pre-0.9 and mozilla thunderbird pre-0.7, you need to have an install.js file in the root of your xpi file. if you want your extension to install in firefox 0.9 and later and/or thunderbird 0.7 and later only, you don't need install.js, you need an install.rdf instead. see also this article from xulplanet's main tutorial. there is a different sample install.js template located at http://downloads.mozdev.org/xsidebar/mods/. this version has been developed as part of the effort to port firefox extensions to seamonkey from the xsidebar project. pros: this version consolidates all the changable information at the top of the file. and it also knows how to install packaged components, search engines and default preferences. cons: code is bloated since it has to cater for several different ways...

JXON - Archive of obsolete content
...

List of Former Mozilla-Based Applications - Archive of obsolete content
old article available about how borland embedded mozilla in kylix 2 mango im client last news item on site from january 2007 mobidvd dvd/vcd/cd ripping software site down mozilla suite internet application suite developm...

Localizing an extension - Archive of obsolete content
g a few simple steps makes your extension much easier to localize into various languages without having to edit the xul or javascript files themselves. if you haven't already created an extension, or would like to refresh your memory, take a look at the previous articles in this series: creating a status bar extension creating a dynamic status bar extension adding preferences to an extension download the sample you can download this article's sample code so you can look at it side-by-side with the article, or to use it as a basis for your own extension. download the sample localizing strings in xul files create the needed locale files each xul file that comprises the user interface for your extension should have a locale file in its locale directory. each locale file maps entity names referen...

Using content preferences - Archive of obsolete content
6" (rounding variant of "1.1") related about:config preferences: browser.zoom.full boolean, set by the menu item view / zoom / zoom text only. despite the confusion in names, this preference is not site-specific. browser.zoom.sitespecific toolkit.zoommanager.zoomvalues zoom.maxpercent and zoom.minpercent browser.download.lastdir path of a filesystem directory related about:config preferences: browser.download.lastdir the last directory for any site use downloadlastdir.jsm for access to these preferences. browser.upload.lastdir path of a filesystem directory this preference is stored and retrieved automatically by file upload controls. ...

Creating a Firefox sidebar extension - Archive of obsolete content
the jar file in the chrome folder and the manifest files. on unix systems: ~/src/emptysidebar/chrome$ cd .. ~/src/emptysidebar$ zip emptysidebar.xpi install.rdf chrome.manifest chrome/emptysidebar.jar open firefox and browse to the folder containing emptysidebar.xpi. click on the file and the extension installation window pops up. after a restart of firefox, the sidebar is installed. you can download the empty sidebar project to use as a basis for your own sidebars. the emptysidebar extension resources code snippets:sidebar building an extension creating applications with mozilla packaging firefox/thunderbird extensions creating a firefox 1 sidebar original document information author: j.c. wesdorp <jcwesdorp . at . occidopagus.nl> - may 30, 2005. updated for firefox 2 - d...

Getting Started - Archive of obsolete content
s. once you have put the files in the zip folder, rename it to myskin.jar triggering the install from the web to install the theme's jar file directly from the web, you need to run some javascript. <a href='javascript:installtrigger.installchrome(installtrigger.skin, "myskin.jar", "my skin theme")'>install my skin</a> if you have jar files on your hard drive and would like to install them, then download/use this form. you can also just open the themes window in mozilla and drag and drop your .jar file onto it. now to change your folder(s) back into a .jar well it's easy! what you do is put your folder(s) into a .zip file and then when it's compressed make the .zip into a .jar ...

Dehydra - Archive of obsolete content
o find bugs in source code as it allows for much more error checking than c++ is capable of by itself. dehydra was built as a gcc plugin, thus it is easy to use for projects that already support gcc. dehydra is also useful for generating language bindings and is used to bootstrap treehydra, a heavy-duty static analysis gcc plugin. documentation installing dehydra download, installation and dependency info for dehydra using dehydra examples for getting started writing analysis scripts. dehydra function reference callback and utility functions for dehydra scripts. dehydra object reference javascript objects and properties provided by dehydra. dehydra faq answers to common questions static analyses analyses being work...

Firefox - Archive of obsolete content
one sees them on irc or in bugs. it can be helpful to know exactly what these refer to. ...

Code snippets - Archive of obsolete content
crypt(); if (item.deleted) { deleted++; } else { items[item.type] = 1 + (items[item.type] || 0); } }; coll.get(); console.log("deleted: " + deleted + ", " + json.stringify(items)); get a log from xul fennec view about:sync-log. long-tap the log in question. choose "save link". open a mail client. click attach. choose "file manager" as the handler. navigate to "downloads", pick correct file. watch live sync logs set services.sync.log.appender.console to trace. bump meta/global's modified time components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); function getpath(path) { let r = new resource(weave.service.storageurl + path); let g = r.get(); return [g, r]; }; let [g, r] = getpath(...

Force RTL - Archive of obsolete content
(this is a temporary placeholder/stub for the force rtl page) download force rtl making sure your theme works with rtl locales ehsan's force rtl page ...

Java in Firefox Extensions - Archive of obsolete content
liveconnect before java 6 update 11) which borrows some of the code of the java firefox extension in order to grant full privileges to java within a firefox extension, but it is easier to understand and doesn't require creation of a xpcom component. ...

Jetpack - Archive of obsolete content
jetpack jetpack is a project to make it easy to build firefox add-ons using common web technologies. ...

Mac OS X Build Prerequisites/fink - Archive of obsolete content
fink installs in /sw by default. the installer should configure the fink environment for you, making it available in any new terminal window. ...

Rsyncing the CVS Repository - Archive of obsolete content
this is useful for faster diffs or for attempting to import it into another version control system. here's how to do it: rsync -az --delete --stats cvs-mirror.mozilla.org::mozilla ~/cvs-mirror this will mirror the cvs repository into ~/cvs-mirror. optionally, the --progress option will show the progress for each file, and a percentage of the total files that are transferred. at the time of this writing, this will take 2.8 gb of disk space. note that for using this copy, the nolocks line in cvsroot/config will need to be commented out, as it requires a modified cvs binary. ...

Supporting private browsing mode - Archive of obsolete content
this interface is deprecated since firefox 20, and will probably be completely removed in firefox 21.see supporting per-window private browsing for details. firefox 3.5 introduced private browsing mode, in which potentially private information is not recorded. this includes cookies, history information, download information, and so forth. when private browsing mode is enabled, temporary, databases are created to be used for cookies and local storage; these databases are thrown away when private browsing mode is turned off, and the regular databases are re-activated. the temporary cookie and local storage databases start out empty. extensions that may record potentially private information may wish to hook into the private browsing service so that they can avoid saving personal informa...

Uriloader - Archive of obsolete content
uriloader: responsible for the dispatch of content to content handlers as it comes in from the network. overview of a uri load up though dispatch to a content handler helper application tech talk mime type determination in mozilla overview of how downloads work ...

Venkman Introduction - Archive of obsolete content
new application modules in firefox by just clicking a hyperlink. if you don't already have venkman or would like to upgrade, you can easily get the latest version from firefox add-ons. the installation process is two steps. first, from within the browser you want to host the debugger application, visit the firefox add-ons page and click on the "install" link for the most recent version. when the download is complete, restart your browser (some windows users may also need to restart their computer as well). you can then access the debugger via a new, dynamically created menuitem in the tools menu of that browser, or else restart the browser with a special debugger option. to see which version of venkman you have, type /version in the interactive session view. for more information about the latest...

Venkman - Archive of obsolete content
e latest version of javascript debugger is available from firefox add-ons. mozilla suite and seamonkey these releases come with venkman pre-installed. on windows, it is an install option; choose advanced install. also available from firefox add-ons as an extension. nvu and kompozer javascript debugger extension version 0.9.84 is available from nvu's downloads page. we encourage you to use the latest available version 0.9.87.1 (or higher) with firefox instead. source code the source code for venkman may be found in mercurial at the following url: http://hg.mozilla.org/venkman/summary community view mozilla forums... mailing list newsgroup rss feed irc: #venkman on irc.mozilla.org ...

When To Use ifdefs - Archive of obsolete content
ifdefs in use in the mozilla tree: platform/widget ifdefs, feature ifdefs, and application-specific ifdefs: platform/widget ifdefs the mozilla code will frequently need to differentiate between code for different platforms or widget sets. these ifdefs are generally always acceptable. the only time when they might be a problem is in cross-platform extension code and locales: since this code is downloaded on multiple platforms, platform-specific ifdefs are generally out of the question. for an example of platform-specfic ifdefs, see nscrt.h. feature ifdefs the mozilla code has many features that can be enabled or disabled by configure flags. for instance, it is possible to disable most of the xul rendering engine by specifying --disable-xul when configuring the build. when adding ifdefs that ...

Example Sticky Notes - Archive of obsolete content
w.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- in above only xbl namespace declaration is mandatory. the others are only needed if you plan to handle xul (xml user interface language) or/and svg (scalable vector graphics) in your bindings; xlink in xml also may come useful sometimes. all namespaces above are supported by default and they do not require any additional downloads or initializations. --> <binding id="default"> <!-- a separate binding. you add a binding file using -moz-binding style rule and you address a particular binding by its id: -moz-binding: url(notes.xml#default) this id is local within the binding file (not visible in the target document dom tree). --> <resources> <!-- obtaining the stylesheet we'll use to (re)style the bound elemen...

XBL 1.0 Reference - Archive of obsolete content
s example - sticky notes updated and adjusted for the current firefox implementation. this example is targeted to demonstrate the xbl usage rather than to be a practically useful application. for this reason it contains many comments and some blocks could be avoided in a more compact solution yet used here for demonstration purposes. ...

Unix stub installer - Archive of obsolete content
setup to debug the unix stub installer? build the unix installer (debug or non-debug target) by typing "make" in the src2 directory grab a nightly build, say from <http://ftp.mozilla.org/pub/mozilla/n...staller.tar.gz> gunzip and untar the build to some temporary location like /tmp. copy the installer.ini and config.ini files over into the src2 directory. if you don't want the installer to download then grab a nightly "full" installer, say from <ftp://ftp.mozilla.org/pub/mozilla/ni...gnu-sea.tar.gz>. then untar and gunzip this to /tmp. copy the xpi directory into the src2 directory you are debugging from. run the installer from the src2 directory by either using the mozilla-installer shell script or the mozilla-installer-bin binary with the appropriate flags. if you need to use gdb to deb...

InstallTrigger.installChrome - Archive of obsolete content
installtrigger.installchrome trigger scripts are typically invoked by javascript event handlers on hyperlinks. when a user clicks the link "install the new blue theme" in the example below, xpinstall downloads, registers, and installs the theme contained in newblue.xpi to the user's profile directory. <a href="#" onclick="installtrigger.installchrome( installtrigger.skin, 'http://wildskins/newblue.xpi', 'newblue/1.0');"> install the new blue theme</a> ...

Trigger Scripts and Install Scripts - Archive of obsolete content
, and perform simple software installations. install scripts use the install, file, installversion and platform-specific installation object methods to initialize, queue, manage, and perform the installation of one or more software packages. these install scripts are typically located at the top level of the xpi archives in which the installations are stored. a trigger script may trigger the downloading of a xpi, which in turn will use its own install.js script to manage the complete installation. ...

InstallVersion Object - Archive of obsolete content
ailable. extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest. in particular plugin developers should see how to package a plugin as an extension. installversion you use installversion objects to contain version information for software. overview this object and its methods are used both when triggering a download, to see whether a particular version needs to be installed, and when installing the software. the init() method associates a particular version with an installversion object, the tostring() method converts versions in various formats to a string, and the compareto() method compares these string and indicates the relationship between the two versions. each of the version parameters is also availab...

getFolder - Archive of obsolete content
ces" "profile" "program" "temporary" "mac apple menu" "mac control panel" "mac desktop" "mac documents" "mac extension" "mac fonts" "mac shutdown" "mac startup" "mac system" "mac trash" "mac preferences" "macosx default download" "macosx home" "macosx internet sites" "macosx local applications" "macosx local desktop" "macosx local documents" "macosx local frameworks" "macosx local internet plugin" "macosx local preferences" "macosx movie documents" "macosx music documents" "macosx picture documents" ...

initInstall - Archive of obsolete content
age the client version registry pathname for the software (for example: plugins/adobe/acrobat or /royalairways/royalpi/). it is an error to supply a null or empty name. the name can be absolute or relative. a relative pathname is relative to the netscape 6 namespace. a relative pathname must start with plugins/, to be relative to the plug-ins portion of that namespace or java/download/, to be relative to the java portion. all other parts of the netscape 6 area of the registry are reserved for use by netscape. the client version registry is a hierarchical description of the software registered for use with netscape 6. the registry name provided here is not the location of the software on the machine, it is the location of information about the software inside the registr...

Properties - Archive of obsolete content
ll api. the majority of this api is now deprecated and as of gecko 1.9 no longer available. extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest. in particular plugin developers should see how to package a plugin as an extension. properties archive full local path of the archive after it is downloaded to the platform specific temp folder. (e.g. c:\temp\argstest.xpi) arguments args can be passed in through the triggering apis by attaching a ? and then the rg string to the xpi url: (e.g. startsoftwareupdate("http://webserver/argstest.xpi?argument_string") will result in the value of install.arguments being argument_string #). note that spaces in the arg string are legal. everythi...

Install Object - Archive of obsolete content
page show the use of the xpinstall api. the majority of this api is now deprecated and as of gecko 1.9 no longer available. extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest. in particular plugin developers should see how to package a plugin as an extension. install use the install object to manage the downloading and installation of software with the xpi installation manager. overview the install object is used primarily in installation scripts. in all cases, the install object is implicit--like the window object in regular web page scripts--and needn't be prefixed to the object methods. the following two lines, for example, are equivalent: f = getfolder("program"); f = install.getfolder("program"); a...

Directions of the Mozilla RDF engine - Archive of obsolete content
these include plans to expose the rdf api to public web content, as well as performance and correctness improvements. ...

Extending Gecko with XBL and XTF - Archive of obsolete content
presentation view online download summary this session explored ways to extend mozilla/firefox to handle new xml tags and namespaces via drop-in extensions to the layout engine. questions and discussion extending gecko with xbl and xtf - discussion ...

Mozilla E4X - Archive of obsolete content
e4x marries xml and javascript syntax, and extends javascript to include namespaces, qualified names, and xml elements and lists. e4x also adds new javascript operators for filtering xml lists, and for enumerating xml children and descendants. another e4x feature: the ability to bind a w3c dom document to a new xml object, reflecting the dom in e4x terms so that updates to either the dom or the e4x object hierarchy show up in the other. ...

SVG And Canvas In Mozilla - Archive of obsolete content
advances in hardware, especially graphics processors, offer the potential for far richer graphics in interactive applications. to realize this potential in web applications, browsers must expose rich new graphics apis to web content. the mozilla project will meet this challenge with two major new features to be delivered in firefox 1.5: integrated svg and a new canvas html element. work is also underway "under the hood" on a new unified graphics architecture that uses 3d graphics processors to accelerate all rendering. ...

XUL - Mozilla's XML User Interface Language - Archive of obsolete content
presentation view online download summary ben goodger, lead engineer for mozilla firefox talked about xul, mozilla's xml user interface toolkit. questions and discussion xul - mozilla's xml user interface language - discussion ...

treecol.type - Archive of obsolete content
text the content of the columns is text. if you are using type="checkbox", then the tree and each treecol must be editable. ...

Accessing Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. accessing files this section describes how to create ...

Working With Directories - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. a reference to a directory may be created in the same way as...

Getting File Information - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. the nsifile object has a number of useful attributes...

Reading from Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. reading data from a file involves getting a reference to a f...

Writing to Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. to write to a file, an output stream is used. an out...

Moving, Copying and Deleting Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. there are several methods of the nsifile object whic...

TOC - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. ...

Introduction to XUL - Archive of obsolete content
in fact, most of mozilla's windows (and dialogs) will be described using this mechanism. xul (pronounced "zool," as if that spelling helped any, and short for "xml user interface language") is our name for the language in which these ui descriptions are built. window chrome is displayed and managed by the same layout engine that manages html content in the browser. ...

The Joy of XUL - Archive of obsolete content
led by xpcom objects. together, xpcom and xpconnect enable developers to create xul applications that require the raw processing power of compiled languages (c/c++) or access to the underlying operating system. xpinstall xpinstall, mozilla's cross platform install facility, provides a standard way of packaging xul application components with an install script that mozilla can download and execute. xpinstall enables users to effortlessly install new xul applications over the internet or from corporate intranet servers. to install a new application the user need only click a hypertext link on a web page or in an email message and accept the new package through a mozilla install dialog. todo: describe cool toolkit and xul runner features case study: a mozilla cale...

Toolbars - Archive of obsolete content
stomization events a look at the events that are sent during toolbar customization; you can use these to be kept aware of changes to toolbars. creating toolbar buttons how to use overlays to add toolbar buttons to mozilla applications. custom toolbar button another example of how to create a toolbar button, complete with a sample extension you can download and try. code snippets: toolbar code snippets that are helpful when working with toolbars. community view mozilla extension development forums... mailing list newsgroup rss feed #extdev irc channel mozillazine forum about:addons newsletter mozilla's web-tech blog ...

Adding HTML Elements - Archive of obsolete content
namespace. this way, mozilla can distinguish the html tags from the xul ones. the attribute below should be added to the window tag of the xul file, or to the outermost html element. xmlns:html="http://www.w3.org/1999/xhtml" this is a declaration of html much like the one we used to declare xul. this must be entered exactly as shown or it won't work correctly. note that mozilla does not actually download this url, but it does recognize it as being html. here is an example as it might be added to the find file window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">...

Creating a Window - Archive of obsolete content
means that the items are placed in a column. this is the default value, so you may leave the attribute off entirely if you wish to have vertical orientation. xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> this line declares the namespace for xul, which you should put on the window element to indicate that all of its children are xul. note that this url is never actually downloaded. mozilla will recognize this url internally. <!-- other elements go here --> replace this comment block with other elements (the buttons, menus and other user interface components) to appear in the window. we'll add some of these in the next set of sections. </window> and finally, we need to close the window tag at the end of the file. opening a window in order to open a xul window, th...

Introduction - Archive of obsolete content
ailable in html5. the first three types all require an installation to be performed on the user's machine. however, these types of applications do not have security restrictions placed on them, so they may access local files and read and write preferences, for example. for extensions, the xul files and associated scripts and images used by an application would be packaged into a single file and downloaded and installed by the user. mozilla applications such as firefox provide an extension manager which allows packages to be installed without having to write a lot of complex code. what do i need to know to use this tutorial? you should have an understanding of html and at least a basic understanding of xml and css. here are some guidelines to keep in mind: xul elements and attributes should ...

Modifying the Default Skin - Archive of obsolete content
of firefox. using it may lead to hard-to-diagnose bugs or crashes. use at your own risk! this section describes how to modify the skin of a window. skin basics a skin is a set of style sheets, images and behaviors that are applied to a xul file. by applying a different skin, you can change the look of a window without changing its functionality. firefox provides a skin by default, and you may download others. the xul for any skins is the same, however the style sheets and images used are different. for a simple personalized look to a firefox window, you can easily change the style sheets associated with it. larger changes can be done by creating an entirely new skin. firefox has a theme manager for changing the default skin. (although the underlying code for mozilla calls them skins and the u...

Progress Meters - Archive of obsolete content
« previousnext » in this section, we'll look at creating progress meters. adding a progress meter a progress meter is a bar that indicates how much of a task has been completed. you typically see it when downloading files or when performing a lengthy operation. xul has a progressmeter element which can be used to create these. there are two types of progress meters: determinate and indeterminate. determinate progress meters are used when you know the length of time that an operation will take. the progress meter will fill up and, once full, the operation should be finished. this can be used for the download file dialog as the size of the file is known. indeterminate progress meters are used when you do not know the length of time of an operation. the progress meter will have ...

Using Remote XUL - Archive of obsolete content
https://www.mozilla.org/owners.html" /> <menuitem label="hacking" value="https://www.mozilla.org/hacking/" /> <menuitem label="get the source" value="https://www.mozilla.org/source.html" /> <menuitem label="build it" value="https://www.mozilla.org/build/" /> </menupopup> </menu> <menu label="testing"> <menupopup> <menuitem label="download" value="https://www.mozilla.org/releases/" /> <menuitem label="report a bug" value="https://bugzilla.mozilla.org/enter_bug.cgi?format=guided" /> <menuitem label="bugzilla" value="https://www.mozilla.org/bugs/" /> <menuitem label="bug writing" value="https://www.mozilla.org/quality/bug-writing-guidelines.html" /> </menupopup> </menu> <menu...

XUL accessibility guidelines - Archive of obsolete content
eplace human judgement for accessibility, and understanding the guidelines is vital. learn more accessibility platform features mozilla community software accessibility - where are we today? intro to accessibility, assistive technologies, and mozilla resources. introduction to web accessibility. overview of web accessibility from webaim. dive into accessibility. downloadable book on web accessibility with tips and character sketches. assistive technology compatibility. list of popular assistive technologies and their respective compatibility levels with xul. #accessibility. accessibility channel for general discussion around internet accessibility with logger. useful at conferences. apple accessibility. portal to apple accessibility. lars (linux a...

browser - Archive of obsolete content
[ examples | attributes | properties | methods | related ] a xul <browser> element represents a frame which is expected to contain a view of a web document. it is similar to an iframe except that it holds a page history and contains additional methods to manipulate the currently displayed page. are you here looking for information about the firefox web browser, or because you'd like to download the latest version of firefox? get firefox most of the properties and methods of the browser will rarely be used and can only be called from chrome urls. other urls will need to use the document and history objects to change the displayed document. attributes autocompleteenabled, autocompletepopup, autoscroll, disablehistory, disableglobalhistory, disablesecurity, droppedlinkhandler, homep...

treecol - Archive of obsolete content
for use in the column picker if ignoreincolumnpicker is not true and hidecolumnpicker is not true on the tree. type type: one of the values below the type of tree column. the default is a text column that displays the content as text. checkbox the content of the columns are checkboxes. progressmeter the content of the columns are a progress meters. this is used in mozilla's download manager window. text the content of the columns is text. width type: string (representing an integer) the preferred width of the tree column. the value should not include a unit as all values are in pixels. specifying widths for your columns causes gecko to allow the tree to be scrolled horizontally if it is wider than the available space. properties accessibletype ...

XULRunner 1.8.0.1 Release Notes - Archive of obsolete content
ons. xulrunner 1.8.0.4 is now available as a security/stability update; all users should install this new version. system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. installing xulrunner mozilla provides xulrunner for windows, mac os x, and linux, in english: download xulrunner for windows download xulrunner for mac os x download xulrunner for linux windows unpack the zip file to a new directory using a archive tool (7zip is recommended). the following directory is recommended: c:\program files\mozilla xulrunner\1.8.0.1 . to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-global (to register for all users) o...

XULRunner 1.8.0.4 Release Notes - Archive of obsolete content
s. as of december 2008,xulrunner 1.9.0.4 is available in the "gecko 1.9.0" branch upon which firefox 3 is based. system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. installing xulrunner mozilla provides xulrunner for windows, mac os x, and linux, in english: download xulrunner for windows download xulrunner for mac os x download xulrunner for linux windows unpack the zip file to a new directory using an archive tool (7zip is recommended). the following directory is recommended: c:\program files\mozilla xulrunner\1.8.0.4 . to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-global (to register for all users) or...

XULRunner 1.9.1 Release Notes - Archive of obsolete content
rsion the current version of xulrunner is 1.9.1.19, matching firefox 3.5.19 detailed release notes can be found here. system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. installing xulrunner mozilla provides xulrunner for windows, mac os x, and linux, in english: download xulrunner for windows download xulrunner for mac os x download xulrunner for linux windows unpack the zip file to a new directory using an archive tool (7zip is recommended). the following directory is recommended: c:\program files\mozilla xulrunner\1.9.1 . to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-global (to register for all users) or...

XULRunner 1.9.2 Release Notes - Archive of obsolete content
ion the current version of xulrunner 1.9.2 is 3.6.26, matching firefox 3.6.26 detailed release notes can be found here. system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. installing xulrunner mozilla provides xulrunner for windows, mac os x, and linux, in english: download xulrunner for windows download xulrunner for mac os x download xulrunner for linux windows unpack the zip file to a new directory using an archive tool (7zip is recommended). the following directory is recommended: c:\program files\mozilla xulrunner\1.9.2 . to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-global (to register for all users) or xulrunn...

XULRunner 1.9 Release Notes - Archive of obsolete content
the current version of xulrunner is 1.9.0.17, matching firefox 3.0.17 detailed release notes can be found here. system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. installing xulrunner mozilla provides xulrunner for windows, mac os x, and linux, in english: download xulrunner for windows download xulrunner for mac os x download xulrunner for linux windows unpack the zip file to a new directory using an archive tool (7zip is recommended). the following directory is recommended: c:\program files\mozilla xulrunner\1.9 . to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-global (to register for all users) or xul...

XULRunner 2.0 Release Notes - Archive of obsolete content
uirements before installing, make sure your computer meets the system requirements (nb: that page will change for firefox 4 shipping). the system requirements for xulrunner are the same as the system requirements for firefox. installing xulrunner mozilla provides xulrunner for windows, mac os x, and linux, in english. the releases directory can be found here. specific runtimes can be found at: download xulrunner for windows download xulrunner for mac os x download xulrunner for 32-bit linux download xulrunner for 64-bit linux (warning: links may become out-of-date at times). windows unpack the zip file to a new directory using an archive tool (7zip is recommended). the following directory is recommended: c:\program files\mozilla xulrunner\2.0 . to register xulrunner with the system, open a c...

Debugging a XULRunner Application - Archive of obsolete content
, edit about:config instead) pref("devtools.debugger.remote-enabled", true); in firefox, go to tools > web developer > connect... and you should be able to point the debugger to your app. happy debugging :) venkman follow these instructions to install venkman into your xulrunner application (xulrunner 1.9 and later): get venkman from addons.mozilla.org (v0.9.87 at the time of writing). to download the package, right-click the install link and save the package locally. create a directory <application>/distribution/bundles/venkman. unzip the package into that directory. add <script src="chrome://venkman/content/venkman-overlay.js" /> to one of your xul windows. add ui to open venkman to your window (it could be a menu item or a toolbar button). make it call start_venkman() when activated.

Deploying XULRunner - Archive of obsolete content
uctions at xul application packaging. if your installer is capable of determining whether or not xulrunner has been registered on the system you could perform the check and register the appropriate version if necessary. after that, the app could be installed to the registered xulrunner and appear in start menus, lists of installed programs, etc. (bonus points for checking the operating system and downloading the right xulrunner on the fly, or bundling them into your installer). registration and app installation are performed with command line switches as outlined in the xulrunner section of article command line options. it may turn out to be easier to create a self contained portable application, as described here, and deploy it with a generic installer that would create shortcuts to scripts that...

XULRunner - Archive of obsolete content
a runtime package that can be used to bootstrap xul+xpcom applications that are as rich as firefox and thunderbird. it provides mechanisms for installing, upgrading, and uninstalling these applications. xulrunner also provides libxul, a solution which allows the embedding of mozilla technologies in other projects and products. releases until version 41, xulrunner could be downloaded from ftp.mozilla.org. firefox (from version 3) ships with a private xulrunner package, which can run any compatible xulrunner application using the -app switch: firefox -app application.ini is equivalent to xulrunner -app application.ini older builds are also available. overview development plan what xulrunner provides xulrunner faq nightly builds: ...

symsrv_convert - Archive of obsolete content
make sure you have a symsrv.dll and symsrv.yes in the directory where symsrv_convert is looking. ...

Mozilla.dev.apps.firefox-2006-09-29 - Archive of obsolete content
binding tab bar to new theme discussion about how to bind a new theme to a tab bar without losing its original binding. the distributor university students working on cache distribution project - looking for help for how to tap the http requests. there have been no responses so far. can't view keith olbermann videos a user inability to launch videos, worked fine for others, ended up being a...

2006-09-29 - Archive of obsolete content
binding tab bar to new theme discussion about how to bind a new theme to a tab bar without losing its original binding. the distributor university students working on cache distribution project - looking for help for how to tap the http requests. there have been no responses so far. can't view keith olbermann videos a user inability to launch videos, worked fine for others, ended up being a...

2006-10-20 - Archive of obsolete content
myk melez to contribute to the brainstorming of new features for firefox 3 and future firefox releases. myk will be paying close attention to features dealing with content filtering, manipulation and control in ff3. to contribute visit the wiki discussions i wanna make an addon for firefox a commonly asked question in many newsgroups. jesper kristensen pointed the requester here change download action for .rdp files on windows and os x a question regarding enabling firefox to associate .rdp files with microsoft remote desktop client so that the correct application opens the files automatically. method shouldload in "content-policy" category problem ? a student learning xpcom is having issues with the method shouldload in the interface nslcontentpolicy. when the method is executed...

2006-11-10 - Archive of obsolete content
summary: mozilla.dev.apps.firefox - november 4, 2006 - november 10, 2006 announcements none this week. discussions site-specific search using our search box a discussion surrounding implementing a way to search a current page with the page's embedded search component and how to make this efficient and usable. event in firefox similar to ondownloadcomplete event in ie an inquiry about how to change the font of a web page before it is displayed using an extenstion. favicon as microsummary/feed/other stuff indicator suggestion about making the favicon create a bookmark for the page with a microsummary. firefox 2.0 - net accessed when bookmark properties viewed question about whether firefox 2.0 downlads the web page again when the properties of the bookmark are viewed. f...

2006-10-27 - Archive of obsolete content
receives an error which he has tried to find a solution by using google, but has not been successful. announcements there are no announcements this week. discussions final ff release already announced october 23rd: axel hecht posted an answer to cédric corazza posting. cédric's posting was about a french site which had already announced the availablity of ff 2.0 final release and provided download links, even though the release was on october 24. the owner of the site probably browsed on the releases/2.0 dir on the ftp and got the releases, which is kind of unpolite. cédric wanted to know if the release directory should be closed before a major release to avoid this kind of thing to happen. axel responded by stating that cédric should send them a nice note to correct that. on the sam...

2006-11-10 - Archive of obsolete content
d" command he receive an error saying "no such file or directory". he stated that he set is home variable to c:\mozilla, and is not sure what he is doing wrong. november 9th: jonathan watt responded to his posting stating that he must have the wrong line endings in his mozconfig or some other script fill that he is probably using to run. ...

Extentsions FAQ - Archive of obsolete content
t is to write a firefox extensions that does intercetp, process and redirect http request? can anyone point me to any good tutorials that may help me get started? where to modify the email addresses being returned by an ldap address book? friday, october 13 - 20, 2006 (↑ top) is there an extension or script get the actual link of a redirected zip file? which mozilla objects to use to download the data the url points to and how to combine them? can anyone recomment the best way to implement unit tests for an extension and are there any unit-tested extensions examples? how to get return links from google search, and what security pitfalls to look out for while writing extension? ...

2006-10-13 - Archive of obsolete content
l10n freeze on seamonkey 1.1 code is imminent in the next days, as well as beta release. do early testing using code from this link. ...

2006-10-27 - Archive of obsolete content
update check failing in firefox 2.0 if add-on type is 8 testing a custom update.rdf file for a langpack using the official version of firefox 2.0 rc 3. ...

2006-12-01 - Archive of obsolete content
underbird options dialog string changes a lot of string changes to the thunderbird options dialog was landed. discussions convert ooo .dic to .xpi convert ooo .dic to .xpi mozillatranslator and sourceforge.net about the best way to organize things creating a <locale>.jar file from the cvs structure discussion on how to package a <locale>.jar from the cvs structure without having to download the entire mozilla source. at the moment there is no simple way of doing this. from 50 to 100 locales discussion continues on finding a better tool for localization. feedback on l10n:ownership draft feedback on the l10n:ownership draft at mozilla wiki site detailed here continues. there's a question about the roles of peer in the team meetings none for this week. authors paul yanch...

2006-12-08 - Archive of obsolete content
summary: mozilla.dev.l10n - december 8, 2006 announcements mozilla sponsored server for l10n the server for mozilla sponsored server for l10n should be up and running soon. seamonkey 1.1b es-es language and region packs language and region packs for seamonkey 1.1b is ready for downloading. new strings in thunderbird new strings in thunderbird new bugzilla-staging.mozilla.org a staging server for a new bugzilla upgrade. discussions none for this week. meetings none for this week. authors paul yanchun gu (gpaul) aditya nanda kuswanto(vipers101) ...

2006-10-06 - Archive of obsolete content
rc2 testing update tim riley announced minimum tests for rc2 have been run and that rc2 is go for the final staging of the release. preed followed up and said that the checker was run and "build is go for launch". re: sunbird and lightning 0.3rc1 available sunbird and lightning 0.3rc1 is announced. this launches a (misguided?) discussion and comparison of sunbird and lightning to outlook. extension compatibility for firefox 2 chris hofmann reminds about the push to have extensions work with ff2. ...

2006-10-20 - Archive of obsolete content
completed rc3 testing key testing activities for ff2 rc3 are done. discussions sparky and comet going away on friday preed wants to get rid of sparky and comet (both older desktop class linux boxes). robert kaiser gave some background on the boxes. ...

2006-10-27 - Archive of obsolete content
visit http://www.getfirefox.com/ discussions firefox 3 feature prioritizing rudi gens pointed out that hundreds of edits have been done to the firefox 3 feature brainstorming page. he suggests that some prioritizing be done. meetings gecko 1.9/gran paradiso status meeting gecko 1.9/gran paradiso status meeting: october 25th, 2006 - 11am pdt. ...

2006-09-29 - Archive of obsolete content
when he runs xulrunner from the command line, it fails silently without any errors. this happens with all his xulrunner ports, with xulrunner 1.8.0.1, 1.8.0.4 and nightly 1.8. benjamin smedberg was able to point out one possible flaw. ...

2006-11-10 - Archive of obsolete content
. he is looking for xptcall port maintainers to submit patches to bug 349002. matthew gertner wants to know if anyone has written code to paste images from the clipboard on platforms other than windows? as of the end of the week, there is no reply. harry is looking for help with create thread in javascript using nsithread. he wants to know how to create new threads using javascript for background download operations. neil deakin points out that "downloads and other network operations are always done in another thread so you shouldn't be creating one yourself". meetings no meetings this week ...

2006-10-06 - Archive of obsolete content
update checker was run; all failures found were expected. build is go for launch. vista testers - needed to test firefox and thunderbird in vista. any test case ideas specific to vista are welcomed. check posting for details. ...

2006-12-01 - Archive of obsolete content
summary: mozilla.dev.security - november 25, 2006 to december 1, 2006 return to mozilla-dev-security announcements none during this week. discussions protocol security daniele rizzo posted a question as to whether or not it is possible to enable/disable the privilege of universalxpconnect in a 'entire' protocol (http://, file://). problem with downloading signed script components in a firefox extension andrew groom is having problems getting an extension to download a signed script and would appreciates some help with his problem. meetings none during this week. ...

NPByteRange - Archive of obsolete content
ts to the next npbyterange request in the list of requests, or null if this is the last request. description the plug-in seeks within a stream by building a linked list of one or more npbyterange objects, which represents a set of discontiguous byte ranges. the only plug-in api call that uses the npbyterange type is npn_requestread(), which lets the plug-in read specified parts of a file without downloading it. the plug-in is responsible for deleting npbyterange objects when finished with them. the browser makes a copy if it needs to keep the objects beyond the call to npn_requestread(). see also npn_requestread() ...

Adobe Flash - Archive of obsolete content
backs are specially named so that the flash plugin can find them. these special callback functions are named with a concatenation of the name of the embed element, the underscore ("_"), and the string "dofscommand". ...

Supporting private browsing in plugins - Archive of obsolete content
information is not recorded in any way. it also introduced a mechanism by which plugins can determine whether or not private browsing mode is in effect. plugins should be updated to monitor the state of private browsing mode and only save private information when private browsing is disabled. potentially private information may include (but is not necessarily limited to) history information for downloaded data. for example, if private browsing mode is in effect, video player plugins should not record the urls of watched videos in their histories. detecting private browsing mode plug-ins can detect whether or not private browsing mode is in effect by using the npn_getvalue() function to check the current value of the npnvprivatemodebool variable. ...

The First Install Problem - Archive of obsolete content
; see en/gecko_plugin_api_reference/plug-in_development_overview for current information. problem definition the first install problem is the name given to the conditions arising when a plugin or embeddable software installs itself on a system first, before any other gecko-based browser. if this happens, gecko-based browsers often won't be able to discover the plugin, and will prompt the user to download the plugin again if the affiliated mime type is encountered on the web. unless gecko does a pre-emptive scan upon startup for desirable plugins that are not in the browser's plugins directory first, the best way to solve this problem is to encourage plugin vendors to leave dlls (and xpt files, if applicable) in a location that gecko can discover at runtime. this document presents a consistent way...

Proposal - Archive of obsolete content
sed for iptv and ipradio/podcasting. spec exists newsgator feed extension created to make rss feeds work better with newsgator software. lets you specify an image, up to 277x78 pixels. and lets you specifies a specific rendering transform (xslt) to be used when rendering the feed in newsgator for outlook. the transform must already exist on the machine running newsgator; stylesheets will not be downloaded or installed automatically. spec exists rss disposition hinting a proposal to make it so iptv and ipradio/podcasting works better with rss. uses an http "content-type" parameter to hint at an rss feeds disposition type -- to hint at what is being syndicated. in development rsshints a module that adds elements to a feed that help an aggregator process them. draft exists source guid when an...

Solaris 10 Build Prerequisites - Archive of obsolete content
arball to the patches directory. % cd gnome-2-20/patches % gtar jxvf firefox-3.0-solaris-10-patches.tar.bz2 7. build pkg-config and gtk-doc from source. just unpack the source tarball, run "./configure --prefix=/opt/sfw", make and make install. add /opt/sfw/bin to path environment after installation. 8. build glib/atk/cairo/pango/gtk2/dbus/dbus-glib/firefox. % . /opt/jdsbld/bin/env.sh % pkgtool --download build-only -v solaris10/sfw{name1}.spec % pkgadd -d . {package_name1} % pkgadd -d . {package_name1}-devel % pkgtool --download build-only -v solaris10/sfw{name2}.spec % pkgadd -d . {package_name2} % pkgadd -d . {package_name2}-devel ...... ...

Making sure your theme works with RTL locales - Archive of obsolete content
the force rtl extension enables you to switch the interface of firefox from ltr to rtl and the other way around dynamically by toggling a menu item. ...

Updating an extension to support multiple Mozilla applications - Archive of obsolete content
cles in this series, updating it so it can also be used in thunderbird and sunbird (previous versions worked only in firefox). if you haven't already created an extension, or would like to refresh your memory, take a look at the previous articles in this series: creating a status bar extension creating a dynamic status bar extension adding preferences to an extension localizing an extension download the sample you can download this article's sample code so you can look at it side-by-side with the article, or to use it as a basis for your own extension. download the sample updating the install manifest the first step is to revise the extension's install manifest to indicate that it can be installed in thunderbird and sunbird. this is done by adding new <targetapplication> tags to the insta...

Using Firebug and jQuery (Screencast) - Archive of obsolete content
tation that i gave while at mashup camp boston. we're going to take an introductory look at the firebug firefox extension and the jquery javascript library - combining the two to build a reusable bookmarklet that can manipulate digg posts and comments. click the video link to begin (14:39 minutes long, 59mb): http://developer.mozilla.org/presentations/screencasts/jresig-digg-firebug-jquery.mp4 download: right-click this link and select save as... in order to download a copy of your own. (59mb) bookmarklets: in the presentation, i refer to a bookmarklet that you can use to introduce jquery into a web page. drag these bookmarklets found on this page into the bookmarks toolbar of your browser, in order to use them. related links: firebug firefox extension jquery javascript library jq...

Using SSH to connect to CVS - Archive of obsolete content
e you are certain you can access cvs.mozilla.org from the open internet. if you are behind a firewall with an http tunneling proxy, you can use a program called corkscrew, in combination with the proxycommand ssh config directive to continue to access the mozilla cvs server. this technique was taken from eric engstrom's site, but the instructions have been re-written specifically for mozilla. download, build, and install corkscrew by following the instructions in the install file in the corkscrew source distribution. corkscrew uses the standard "./configure; make install" technique common to many open source projects. make sure you have a ~/.ssh/config file that has at least the following directives preferredauthentications hostbased,publickey,password host cvs.mozilla.org proxycommand co...

Using workers in extensions - Archive of obsolete content
asks in the background without blocking the user interface. if you haven't already created an extension, or would like to refresh your memory, take a look at the previous articles in this series: creating a status bar extension creating a dynamic status bar extension adding preferences to an extension localizing an extension updating an extension to support multiple mozilla applications download the sample you may download the complete example: download the example. how this differs from previous versions this version of the stock ticker extension moves the xmlhttprequest call that fetches updated stock information into a worker thread, which then passes that information back to the main body of the extension's code to update the display in the status bar. this demonstrates not on...

ECMAScript 2015 support in Mozilla - Archive of obsolete content
s.next". in august 2014, the ecmascript 2015 draft specification was feature frozen and went through a stabilization and bug fixing period. finally, ecma-262 edition 6 got officially approved and published as a standard on june 17, 2015 by the ecma general assembly. it will also appear as the international industry standard iso/iec 16262:2016. a pdf and html version of the standard can be freely downloaded on ecma-international.org. a channel for feedback on ecmascript standards is es-discuss. standard library additions to the array object array iteration with for...of (firefox 13) array.from() (firefox 32) array.of() (firefox 25) array.prototype.fill() (firefox 31) array.prototype.find(), array.prototype.findindex() (firefox 25) array.prototype.entries(), array.prototype.keys() (fir...

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
with some basic java knowledge, you can extend javascript to include some of the most desired capability such as database access, remote web requests, and xml processing. we’ll start by taking a look at querying a sql database. this first example we’ll demonstrate is querying a mysql database for some employee contact information. it is assumed that you have already downloaded, extracted, and consumed the necessary documentation to get up and running with some basic rhino scripts. if you don’t already have it, you’ll need to also download the jdbc driver for mysql, extract the class files, and include the path in your classpath environment variable. the code in listing 1 is a sample javascript script which incorporates java classes to handle the database query. ...

Writing JavaScript for XHTML - Archive of obsolete content
are sent with the media type for html (text/html). the receiving browser considers the content to be html, and does not utilise its xml parser. there are a number of reasons for this. partially it is because, prior to version 9, internet explorer was incapable of handling xhtml sent with the official xhtml media type at all. (rather than displaying content, it would present the user with a file download dialog.) but it is also founded in the experience that javascript, authored carefully for html, can break when placed with an xml environment. this article shows some of the reasons alongside with strategies to remedy the problems. it will encourage web authors to use more xml features and make their javascript interoperable with real xhtml applications. (note that xhtml documents which behave ...

XForms - Archive of obsolete content
rms in wikibook format - over 50 examples tested with firefox. xforms support can be added to firefox and seamonkey by installing the mozilla xforms extension. this extension, while supporting a significant subset of the xforms 1.0 and 1.1 candidate recommendations, is not actively maintained any more since about 2010. the last official release has been done for firefox 3.6 and is available for download on addons.mozilla.org. for more details about the future of the mozilla xforms extension see this blog post. documentation implementation status implementation status of the mozilla xforms extension building get started with building your own xforms extensions from source. troubleshooting tips for xforms a small collection of tips for troublesh...

The Business Benefits of Web Standards - Archive of obsolete content
ndering engine), gecko-based browsers, safari, opera linux: gecko-based browsers, khtml-based browsers, opera overall, 5 different rendering engines are used to surf the web using dozens of browsers on 3 platforms. according to many sources, gecko-based browsers are now much more common than netscape 4.x and msie 4 browsers, and it is increasing significantly with time. firefox alone has been downloaded more than 50 millions times in 6 months. in such an increasingly heterogeneous environment, testing each web page in every configuration is impossible. coding to standards is then the only practical solution. in a ground breaking development microsoft have announced a new meta tag that can be used in sites to trigger ie 8 into web standards mode. at the same time in non standards mode existin...

XUL Booster - Archive of obsolete content
rlay you'll need the chrome address of the content you wish to overlay, ex. ...

Archive of obsolete content
he documentation listed below is archived, obsolete material about open web topics. beginner tutorials this page includes archived beginners tutorials, from various places around mdn. case sensitivity in class and id names creating a dynamic status bar extension concepts covered in the previous sample won't be reiterated here; instead, refer to the downloadable sample code or to the previous sample for further details. creating a status bar extension many of the concepts introduced here apply to any xul-based application; however, to keep from getting completely overwhelmed, we're going to focus specifically on firefox. css3 css3 is the latest evolution of the cascading style sheets language and aims at exte...

Game distribution - Game development
date the system and refresh the game on your server to provide players with the updated code almost instantly. direct link distribution and instant play you don't have to tell people to search for your game in an app store with html5 games. you can just send them a direct url to access the game, which they can then click to play the game right away without the need to use third party plugins or download and install a large package. bear in mind that downloading the game might still take a bit of time depending on the size of the game and your network speed. in any case, it's a lot easier to promote the game if you can drive traffic directly where you want it and don't have to jump through lots of hoops to play. desktop vs mobile the vast majority of the traffic we are interested in — people ...

Game promotion - Game development
erience yet, try writing tutorials and publish them on your own blog first. it's the easiest way to train your writing skills on your own. youtubers it's a rising trend — don't underestimate the power of youtubers playing your game, talking about it and streaming their experience to give you lots of promotion. you should also be realistic however — don't think this alone will skyrocket your downloads or visits, and be prepared to deal with bad reviews as well as good ones. there are two options to get coverage from the youtubers: first is you contact them directly and send a link to your game via email or private message. the second is earned in time - if you're known enough the youtubers will contact you and ask for the link or build of your game. this big list of youtubers is a great plac...

Building up a basic demo with A-Frame - Game development
he end result is 3d web experiences, which are vr-enabled by default. environment setup let's start by setting up an environment to create something with a-frame. we'll then build up a demo and run it. you should start off by: making sure you are using a modern browser with good webgl support (and webxr support if you have available vr or ar hardware) such as the latest firefox or chrome — download firefox nightly or chrome (v54 or higher). (optional) set up a vr device such as oculus rift or google cardboard. create a new directory to store your project in. save a copy of the latest a-frame javascript library file inside your directory (check the github repository for latest stable a dev builds). open the a-frame documentation in a separate tab — it is useful to refer to. html stru...

Crisp pixel art look with image-rendering - Game development
on artifacts. original size 4x size 4x size (scaled with an image editor) none vendor's algorithm nearest-neighbor algorithm a css-based solution the good news is that you can use css to automatically do the up-scaling, which not only solves the blur problem, but also allows you to use the images in their original, smaller size, thus saving download time. also, some game techniques require algorithms that analyse images, which also benefit from working with smaller images. the css property to achieve this scaling is image-rendering. it is still experimental, but there is partial support in most browsers. the steps to achieve this effect are: create a <canvas> element and set its width and height attributes to the original, smaller resolu...

Visual JS GE - Game development
visual-js gameengine is a small but comprehensive canvas/websocket-based game engine with gui source editor only for windows. the server is based on node.js vs mysql, the client made in four variant on a javascript frameworks for 2d canvas js , three.js , webgl2 vs glmatrix and 2d canvas with matter.js in typescript to complete the stack. installation and setup first of all download visual-js from bitbucket. extract the package into your root folder. installing modules navigate to server_instance/, then in the node.js command prompt or console enter the following installation commands: npm install mysql npm install delivery npm install express npm install mkdirp npm install socket.io npm install nodemailer@0.7.0 setting up config.js you will find config.js in the server_instance folder: al...

Visual typescript game engine - Game development
t.json 'src/**/*.ts' --fix tslint -c tslint.json 'src/**/*.ts' the external licence in this project : - networking based on : muaz khan mit license www.webrtc-experiment.com/licence - base physics based on : original source: matter.js https://github.com/liabru/matter-js matter.ts used because typescript orientation. https://www.npmjs.com/package/@types/matter-js crypto icons downloaded from https://www.behance.net/junikstudio todo list for 2019 i'm still far away from the project objective : make visual nodes for editor mode in gameplay. item's selling for crypto values. create examples demos in minimum 20 gameplay variants (table games, actions, platformers, basic demo throw the api doc etc.). implementing ar and webgl2. live demo platformer ...

Game development
are interested in how you can port your games over to the web, you should learn more about our emscripten tool — this is an llvm to javascript compiler, which takes llvm bytecode (e.g. generated from c/c++ using clang, or from another language) and compiles that into asm.js, which can be run on the web. to get started, see: about emscripten for an introduction including high-level details. download and install for installing the toolchain. emscripten tutorial for a tutorial to teach you how to get started. examples for a list of web game examples, see our examples page. also, check out games.mozilla.org for more useful resources! ...

Browser - MDN Web Docs Glossary: Definitions of Web-related terms
a web browser or browser is a program that retrieves and displays pages from the web, and lets users access further pages through hyperlinks. a browser is the most familiar type of user agent. learn more download a browser mozilla firefox google chrome microsoft edge opera browser ...

Code splitting - MDN Web Docs Glossary: Definitions of Web-related terms
code splitting is the splitting of code into various bundles or components which can then be loaded on demand or in parallel. as an application grows in complexity or is simply maintained, css and javascripts files or bundles grow in byte size, especially as the number and size of included third-party libraries increases. to prevent the requirement of downloading ginormous files, scripts can be split into multiple smaller files. then features required at page load can be downloaded immediately with additional scripts being lazy loaded after the page or application is interactive, thus improving performance. while the total amount of code is the same (and perhaps even a few bytes larger), the amount of code needed during initial load can be reduced. code splitting is a feature supported ...

Computer Programming - MDN Web Docs Glossary: Definitions of Web-related terms
n a language which the computer understands. these instructions come in the form of many different languages such as c++, java, javascript, html, python, ruby, and rust. using an appropriate language, you can program/create all sorts of software. for example, a program that helps scientists with complex calculations, a database that stores huge amounts of data, a web site that allows people to download music, or animation software that allows people to create animated movies. learn more general knowledge computer programming on wikipedia list of programming languages: wikipedia ...

First input delay - MDN Web Docs Glossary: Definitions of Web-related terms
s the length of time, in milliseconds, between the first user interaction on a web page and the browser’s response to that interaction. scrolling and zooming are not included in this metric. the time between when content is painted to the page and when all the functionality becomes responsive to human interaction often varies based on the the size and complexity of the javascript needing to be downloaded, parsed, and executed on the main thread, and on the device speed or lack thereof (think low end mobile devices). the longer the delay, the worse the user experience. reducing site initialization time and eliminating long tasks can help eliminate first input delays. see also requestidlecallback lazy loading ...

Microsoft Internet Explorer - MDN Web Docs Glossary: Definitions of Web-related terms
desktop, mobile, and xbox console versions available. formerly available on mac and unix, microsoft discontinued those versions in 2003 and 2001 respectively. ...

Page prediction - MDN Web Docs Glossary: Definitions of Web-related terms
some web applications include a prediction feature completing search text and address bar urls based on browsing history and related searches. for example, as the user types in the address bar, the browser might send the current text in the address bar to the search engine before the user submits the request. ...

Parse - MDN Web Docs Glossary: Definitions of Web-related terms
—particularly those without an async or defer attribute—blocks rendering, and pauses parsing of html. when the browser encounters css styles, it parses the text into the css object model (or cssom), a data structure it then uses for styling layouts and painting. the browser then creates a render tree from both these structures to be able to paint the content to the screen. javascript is also downloaded, parsed, and then execute. javascript parsing is done during compile time or whenever the parser is invoked, such as during a call to a method. learn more general knowledge parse on wikipedia ...

Perceived performance - MDN Web Docs Glossary: Definitions of Web-related terms
ough for users to believe it has loaded and is interactive. in terms of conversion rates, perceived performance is more important than the actual load and response times. speed index is a common metric for measuring perceived performance, though it's not perfect. other features, such as good ux design, including animations, and lazy loading, can make your site appear more responsive, even if the download and response times remain the same. actual performance is a measurement from when a request is made, through the downloading, parsing and execution of all resources, and the final paint. while increased performance generally increases perceived performance, there are some techniques that can be used to increase perceived performance while marginally decreasing actual performance. there are fron...

Web performance - MDN Web Docs Glossary: Definitions of Web-related terms
web performance is the objective time from when a request for content is made until the requested content is displayed in the user's browser, objective render times, and the subjective user experience of load time and runtime. objectively, it is measurable time, in milliseconds, it takes for the web page or web application to be downloaded, painted in the user's web browser, and become responsive and interactive. it is the frames per second and times the main thread is not available for user interactions. subjectively, it is the user's perception of whether the time it takes between the time the user requests the content and the time until the user feels the content requested is available and usable feels slow or fast. learn more learn about web performance perceived performance ...

Speculative parsing - MDN Web Docs Glossary: Definitions of Web-related terms
traditionally in browsers the html parser ran on the main thread and was blocked after a </script> tag until the script has been retrieved from the network and executed. some html parser, such as firefox since firefox 4, support speculative parsing off of the main thread. it parses ahead while scripts are being downloaded and executed. the html parser starts speculative loads for scripts, style sheets and images it finds ahead in the stream and runs the html tree construction algorithm speculatively. the upside is that when a speculation succeeds, there's no need to reparse the part of the incoming file that was already scanned for scripts, style sheets and images. the downside is that there's more work lost when the speculation fails. this document helps you avoid the kind of things that...

Accessible multimedia - Learn web development
th the audio + transcript, and specifically link to them in the places where they are referred to in the transcript. this of course will help all users, not just people who are deaf. note: an audio transcript will in general help multiple user groups. as well as giving deaf users access to the information contained in the audio, think about a user with a low bandwidth connection, who would find downloading the audio inconvenient. think also about a user in a noisy environment like a pub or bar, who is trying to access the information but can't hear it over the noise. video text tracks to make video accessible for deaf, blind, or even other groups of users (such as those on low bandwidth, or who don't understand the language the video is recorded in), you need to include text tracks along with...

Sizing items in CSS - Learn web development
scaled down to fit into the box. this technique is used to make images responsive, so that when viewed on a smaller device they scale down appropriately. you should, however, not use this technique to load really large images and then scale them down in the browser. images should be appropriately sized to be no larger than they need to be for the largest size they are displayed in the design. downloading overly large images will cause your site to become slow, and it can cost users more money if they are on a metered connection. note: find out more about responsive image techniques. viewport units the viewport — which is the visible area of your page in the browser you are using to view a site — also has a size. in css we have units which relate to the size of the viewport — the vw ...

Styling tables - Learn web development
<caption>, <thead>, <tbody>, etc. unfortunately, it doesn't look good when rendered on the screen (see it live at punk-bands-unstyled.html): with only the default browser styling it looks cramped, hard to read, and boring. we need to use some css to fix this up. styling our table let's work through styling our table example together. to start with, make a local copy of the sample markup, download both images (noise and leopardskin), and put the three resulting files in a working directory somewhere on your local computer. next, create a new file called style.css and save it in the same directory as your other files. link the css to the html by placing the following line of html inside your <head>: <link href="style.css" rel="stylesheet" type="text/css"> spacing and layout the fir...

Test Your Skills: Fundamental layout comprehension - Learn web development
if you have worked through this module then you will have already covered the basics of what you need to know to do css layout today, and to work with older css as well. this task will test some of your knowledge by way of developing a simple webpage layout using a variety of techniques. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. project brief you have been provided with some raw html, basic css, and images — now you need to create a layout for the design, which should look just like the image below. basic setup you can d...

Legacy layout methods - Learn web development
such as bootstrap and foundation include a grid system. there are also standalone grid systems, either developed using css or using preprocessors. let's take a look at one of these standalone systems as it demonstrates common techniques for working with a grid framework. the grid we will be using is part of skeleton, a simple css framework. to get started visit the skeleton website, and choose "download" to download the zip file. unzip this and copy the skeleton.css and normalize.css files into a new directory. make a copy of our html-skeleton.html file and save it in the same directory as the skeleton and normalize css. include the skeleton and normalize css in the html page, by adding the following to its head: <link href="normalize.css" rel="stylesheet"> <link href="skeleton.css" rel="styl...

Multiple-column layout - Learn web development
se this feature. prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css.) objective: to learn how to create multiple-column layout on webpages, such as you might find in a newspaper. a basic example we will now explore how to use multiple-column layout, often referred to as multicol. you can follow along by downloading the multicol starting point file and adding the css into the appropriate places. at the bottom of the section you can see a live example of what the final code should look like. our starting point contains some very simple html; a wrapper with a class of container inside which is a heading and some paragraphs. the <div> with a class of container will become our multicol container. we switch ...

Supporting older browsers - Learn web development
h number of visitors in older ie versions, you may find it better to focus on creating a fallback that works for all non-supporting browsers. testing older browsers with the majority of browsers supporting flexbox and grid, it can be reasonably hard to test older browsers. one way is to use an online testing tool such as sauce labs, as detailed in the cross browser testing module. you can also download and install virtual machines, and run older versions of browsers in a contained environment on your own computer. having access to older versions of internet explorer is particularly useful, and for that purpose, microsoft has made a range of virtual machines available for free download. these are available for mac, windows and linux operating systems and so are a great way to test in old and mod...

Test your skills: Media Queries and Responsive Design - Learn web development
this aim of this task is to get you working with responsive web design with a practical task. everything you need to know to complete this task was covered in the guide to media queries, and the other layout lessons in this section. note: due to the need to test your design in multiple screen sizes we do not have an interactive editor for this task. download the code and work locally, or use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. your task download the starting point. open this in your browser and you will find a wireframed site which will load in a mobile device in a readable manner. you can drag your window smaller or use the responsive d...

Using your new knowledge - Learn web development
ment gives you a chance to do that. prerequisites: before attempting this assessment you should have worked through the rest of the css basics module, and also have an understanding of html basics (study introduction to html). objective: to have a play with some css and test your new-found knowledge. starting point you can work in the live editor below, or you can download the starting point to work with in your own editor. this is a single page with the html, plus the starting point css in the head of the document. if you prefer you could move this css to a separate file when you create the example on your local computer. alternatively use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. note: if you get stuck, then ask us for help — s...

Fundamental text and font styling - Learn web development
ans-serif you should be careful with using this font — it isn't widely available on mobile oses. verdana sans-serif note: among various resources, the cssfontstack.com website maintains a list of web safe fonts available on windows and macos operating systems, which can help you make your decision about what you consider safe for your usage. note: there is a way to download a custom font along with a webpage, to allow you to customize your font usage in any way you want: web fonts. this is a little bit more complex, and we will be discussing this in a separate article later on in the module. default fonts css defines five generic names for fonts: serif, sans-serif, monospace, cursive and fantasy. those are very generic and the exact font face used when using tho...

Typesetting a community school homepage - Learn web development
e of an imaginary community college, plus some css that styles the page into a three column layout and provides some other rudimentary styling. you are to write your css additions below the comment at the bottom of the css file, to make sure it is easy to mark the bits you have done. don't worry if some of the selectors are repetitious; we'll let you off in this instance. fonts: first of all, download a couple of free-to-use fonts. because this is a college, the fonts should be chosen to give the page a fairly serious, formal, trustworthy feel — a serif site-wide font for the general text body, coupled with sans-serif or slab serif for the headings might be nice. use a suitable service to generate bulletproof @font-face code for these two fonts. apply your body font to the whole page, and ...

Styling text - Learn web development
to consider. this article explains all. styling links when styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. we'll look at all these topics in this article. web fonts here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling. assessments the following assessments will test your understanding of the text styling techniques covered in the guides above. typesetting a community school homepage in this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage. ...

What text editors are available? - Learn web development
ightforward. the method varies based on your platform but it shouldn't be too hard: windows. the developers will give you an .exe or .msi file. sometimes the software comes in a compressed archive like .zip, .7z, or .rar, and in that case you'll need to install an additional program to extract the content from the archive. windows supports .zip by default. mac. on the editor's website you can download a .dmg file. some text editors you can find directly in the apple store to make installation even simpler. linux. in the most popular distros you can start with your graphical package manager (ubuntu software center, mintinstall, gnome software, &c.). you can often find a .deb or .rpm file for prepackaged software, but most of the time you'll have to use your distro's repository server or, in wo...

How can we design for all types of users? - Learn web development
, use a text color that contrasts well with the background color. make it extra easy to read the text, to help visually-impaired people and people using their phones on the street. the w3c defines a good color mix with an algorithm that calculates luminosity ratio between foreground and background. the calculation may seem pretty complicated, but we can rely on tools to do the job for us. let's download and install the paciello group's colour contrast analyser. note: alternatively you can find a number of contrast checkers online, such as webaim's color contrast checker. we suggest a local checker because it comes packaged with an on-screen color picker to find out a color value. for instance, let's test the colors on this page and see how we fare in the colour contrast analyser: the lumi...

How do you host your website on Google App Engine? - Learn web development
id and note it down. for this tutorial, the following values are used: project name: gae sample site project id: gaesamplesite click the create button to create your project. creating an application each cloud platform project can contain one app engine application. let's prepare an app for our project. we'll need a sample application to publish. if you've not got one to use, download and unzip this sample app. have a look at the sample application's structure — the website folder contains your website content and app.yaml is your application configuration file. your website content must go inside the website folder, and its landing page must be called index.html, but apart from that it can take whatever form you like. the app.yaml file is a configuration file that...

How much does it cost to do something on the Web? - Learn web development
for all platforms, winscp for windows, cyberduck for mac or windows, and more. because ftp is inherently insecure, you should make sure to use sftp — the secure, encrypted version of ftp that most hosting sites you'll deal with these days will offer by default — or another secure solution like rsync over ssh. browsers you either already have a browser or can get one for free. if necessary, download firefox here or google chrome here. web access computer / modem you need a computer. costs can vary tremendously, depending on your budget, and where you live. to publish a barebones website, you only need a basic computer capable of launching an editor, and a web browser, so the entry level can be quite low. of course, you'll need a more serious computer if you want to produce complicated de...

How do you upload your files to a web server? - Learn web development
ple web page (see html basics for an example), you will probably want to put it online, on a web server. in this article we'll discuss how to do that, using various available options such as sftp clients, rsync and github. sftp there are several sftp clients out there. our demo covers filezilla, since it's free and available for windows, macos and linux. to install filezilla go to the filezilla downloads page, click the big download button, then install from the installer file in the usual way. note: of course there are lots of other options. see publishing tools for more information. open the filezilla application; you should see something like this: logging in for this example, we'll suppose that our hosting provider (the service that will host our http web server) is a fictitious comp...

What software do I need to build a website? - Learn web development
in this article we lay out which software components you need when you're editing, uploading, or viewing a website. prerequisites: you should already know the difference between webpages, websites, web servers, and search engines. objective: learn which software components you need if you want to edit, upload, or view a website. summary you can download most of the programs you need for web development for free. we'll provide a few links in this article. you'll need tools to: create and edit webpages upload files to your web server view your website nearly all operating systems by default include a text editor and a browser, which you can use to view websites. as a result, you usually only need to acquire software for transferring files to your we...

How do you set up a local testing server? - Learn web development
to do this for our purposes is to use python's simplehttpserver (or http.server, depending on the version of python installed.) to do this: install python. if you are using linux or macos, it should be available on your system already. if you are a windows user, you can get an installer from the python homepage and follow the instructions to install it: go to python.org under the download section, click the link for python "3.xxx". at the bottom of the page, choose the windows x86 executable installer and download it. when it has downloaded, run it. on the first installer page, make sure you check the "add python 3.xxx to path" checkbox. click install, then click close when the installation has finished. open your command prompt (windows)/ terminal (macos/ lin...

How to build custom form controls - Learn web development
s the user uses. the script is in conflict with, or is affected by, a browser extension (such as firefox's noscript extension or chrome's notscripts extension). the user is using a legacy browser, and one of the features you require is not supported: this will happen frequently when you make use of cutting-edge apis. the user is interacting with the content before the javascript has been fully downloaded, parsed, and executed. because of these risks, it's really important to seriously consider what will happen if your javascript doesn't work. we'll discuss options to consider and cover the basics in our example (a full discussion of solving this issue for all scenarios would require a book). just remember, it is vital make your script generic and reusable. in our example, if our javascript c...

Other form controls - Learn web development
meters and progress bars are visual representations of numeric values. progress a progress bar represents a value that changes over time up to a maximum value specified by the max attribute. such a bar is created using a <progress> element. <progress max="100" value="75">75/100</progress> this is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire. the content inside the <progress> element is a fallback for browsers that don't support the element and for screen readers to vocalize it. meter a meter bar represents a fixed value in a range delimited by max and min values. this value is visually rendered as a bar, and to know how this bar looks, we compare the value to some other s...

Sending form data - Learn web development
f post and an action of php-example.php. when it is submitted, it sends the form data to php-example.php, which contains the php code seen in the above block. when this code is executed, the output in the browser is hi mom. note: this example won't work when you load it into a browser locally — browsers cannnot interpret php code, so when the form is submitted the browser will just offer to download the php file for you. to get it to work, you need to run the example through a php server of some kind. good options for local php testing are mamp (mac and windows) and ampps (mac, windows, linux). note also that if you are using mamp but don't have mamp pro installed (or if the mamp pro demo time trial has expired), you might have trouble getting it working. to get it working again, we have ...

Test your skills: Styling basics - Learn web development
ave a lot of flexibility over what you end up doing here. but your css should aim to fulfill the following requirements: add some kind of lightweight "reset" to make fonts, padding, margin, and sizing more consistent to begin with. on top of that, add in some nice, consistent styling for the inputs and button. use some kind of layout technique to make the inputs and labels line up neatly. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting p...

Installing basic software - Learn web development
buntu comes with gedit by default. for web development, you can probably do better than notepad or textedit. we recommend starting with visual studio code, which is a free editor, that offers live previews and code hints. installing modern web browsers for now, we'll install a couple of desktop web browsers to test our code in. choose your operating system below and click the relevant links to download installers for your favorite browsers: linux: firefox, chrome, opera, brave. windows: firefox, chrome, opera, internet explorer, microsoft edge, brave (windows 10 comes with edge by default; if you have windows 7 or above, you can install internet explorer 11; otherwise, you should install an alternative browser). macos: firefox, chrome, opera, safari, brave (macos and ios come with safari b...

JavaScript basics - Learn web development
r, getting comfortable with javascript is more challenging than getting comfortable with html and css. you may have to start small, and progress gradually. to begin, let's examine how to add javascript to your page for creating a hello world! example. (hello world! is the standard for introductory programming examples.) important: if you haven't been following along with the rest of our course, download this example code and use it as a starting point. go to your test site and create a new folder named scripts. within the scripts folder, create a new file called main.js, and save it. in your index.html file, enter this code on a new line, just before the closing </body> tag: <script src="scripts/main.js"></script> this is doing the same job as the <link> element for css. it applies the...

Define terms with HTML - Learn web development
e <dfn> element and its container. if you want a more formal relationship, or your definition consists of only one sentence rather than the whole paragraph, you can use the aria-describedby attribute to associate a term more formally with its definition: <p> <span id="ff"> <dfn aria-describedby="ff">firefox</dfn> is the web browser created by the mozilla foundation. </span> you can download it at <a href="http://www.mozilla.org">mozilla.org</a> </p> assistive technology can often use this attribute to find a text alternative to a given term. you can use aria-describedby on any tag enclosing a keyword to be defined (not just the <dfn> element). aria-describedby references the id of the element containing the description. how to build a description list description lists are just w...

Debugging HTML - Learn web development
ly because when the web was first created, it was decided that allowing people to get their content published was more important than making sure the syntax was absolutely correct. the web would probably not be as popular as it is today, if it had been more strict from the very beginning. active learning: studying permissive code it's time to study the permissive nature of html code. first, download our debug-example demo and save it locally. this demo is deliberately written with some built-in errors for us to explore (the html markup is said to be badly-formed, as opposed to well-formed). next, open it in a browser. you will see something like this: this immediately doesn't look great; let's look at the source code to see if we can work out why (only the body contents are shown): <h1>h...

What’s in the head? Metadata in HTML - Learn web development
to do this, either copy and paste the code out of the page and into a new text file in your code editor, then save it in a sensible place. press the "raw" button on the github page, which causes the raw code to appear (possibly in a new browser tab). next, choose your browser's file > save page as... menu and choose a sensible place to save the fil...

Adding vector graphics to the Web - Learn web development
only one place. duplication makes for resource-intensive maintenance. extra svg code increases the size of your html file. the browser cannot cache inline svg as it would cache regular image assets, so pages that include the image will not load faster after the first page containing the image is loaded. you may include fallback in a <foreignobject> element, but browsers that support svg still download any fallback images. you need to weigh whether the extra overhead is really worthwhile, just to support obsolescent browsers. how to embed an svg with an <iframe> you can open svg images in your browser just like webpages. so embedding an svg document with an <iframe> is done just like we studied in from <object> to <iframe> — other embedding technologies. here's a quick review: <iframe...

Images in HTML - Learn web development
page, and the image hasn't yet loaded, you'll notice the browser is leaving a space for the image to appear in: this is a good thing to do, resulting in the page loading quicker and more smoothly. however, you shouldn'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,...

Index - Learn web development
hear these expressions all the time as you read on. it's easy to confuse these terms sometimes since they refer to related but different functionalities. in fact, you'll sometimes see these terms misused in news reports and elsewhere, so getting them mixed up is understandable! 33 what software do i need to build a website? beginner, needsactivelearning, webmechanics you can download most of the programs you need for web development for free. we'll provide a few links in this article. 34 what text editors are available? beginner, composing, guide, tools, text editor a website consists mostly of text files, so for a fun, pleasant development experience you should choose your text editor wisely. 35 front-end web developer beginner, css, front...

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
trols the game using the a key, and the other with the l key. when the start button is pressed, a spinner like the one we saw earlier is displayed for a random amount of time between 5 and 10 seconds. after that time, a message will appear saying "players go!!" — once this happens, the first player to press their control button will win the game. let's work through this: first of all, download the starter file for the app. this contains the finished html structure and css styling, giving us a game board that shows the two players' information (as seen above), but with the spinner and results paragraph displayed on top of one another. you just have to write the javascript code. inside the empty <script> element on your page, start by adding the following lines of code that define ...

Build your own function - Learn web development
e, except that now you can also vary the message inside the parameter to get different messages displayed in the box! a more complex parameter on to the next parameter. this one is going to involve slightly more work — we are going to set it so that depending on what the msgtype parameter is set to, the function will display a different icon and a different background color. first of all, download the icons needed for this exercise (warning and chat) from github. save them in a new folder called icons in the same location as your html file. note: the warning and chat icons were originally found on iconfinder.com, and designed by nazarrudin ansyari — thanks! (the actual icon pages were since moved or removed.) next, find the css inside your html file. we'll make a few changes to mak...

Drawing graphics - Learn web development
3.png in the same folder. this is the image we'll use as a surface texture for the cube later on. next, create a new file called main.js, again in the same folder as before. if you open index.html in your code editor, you'll see that it has two <script> elements — the first one attaching three.min.js to the page, and the second one attaching our main.js file to the page. you need to download the three.min.js library and save it in the same directory as before. now we've got three.js attached to our page, we can start to write javascript that makes use of it into main.js. let's start by creating a new scene — add the following into your main.js file: const scene = new three.scene(); the scene() constructor creates a new scene, which represents the whole 3d world we are t...

Manipulating documents - Learn web development
ss the button: the item should appear in the list. each item should be given a button that can be pressed to delete that item off the list. the input should be emptied and focused ready for you to enter another item. the finished demo will look something like this: to complete the exercise, follow the steps below, and make sure that the list behaves as described above. to start with, download a copy of our shopping-list.html starting file and make a copy of it somewhere. you'll see that it has some minimal css, a list with a label, input, and button, and an empty list and <script> element. you'll be making all your additions inside the script. create three variables that hold references to the list (<ul>), <input>, and <button> elements. create a function that will run in response t...

Test your skills: JSON - Learn web development
ou can try out the solution in the interactive editor below. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. note: in the example below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version). json 1 the one and only task in this article concerns accessing json data and using it in your page. json data about some mother cats and their kittens is available in sample.json. the json is loaded into the page as a text string and made available in the catstring parameter of the displaycatinfo() function, called when the provided promise chain (which starts by fetching the js...

Web performance resources - Learn web development
o and accessibility. ...

Web performance - Learn web development
eo the lowest hanging fruit of web performance is often media optimization. in this article we discuss the impact video content has on performance, and cover tips like removing audio tracks from background videos can improve performance. javascript performance best practices javascript, when used properly, can allow for interactive and immersive web experiences — or it can significantly harm download time, render time, in-app performance, battery life, and user experience. this article outlines some javascript best practices that should be considered to ensure even complex content is as performant as possible. html performance features some attributes and the source order of your mark-up can impact the performance or your website. by minimizing the number of dom nodes, making sure the best ...

Introduction to client-side frameworks - Learn web development
citations for this table: react browser support: official docs ember browser support: ember 3.0 release announcement ember templating language (official docs) does the framework have a strong community? this is perhaps the hardest metric to measure, because community size does not correlate directly to easy-to-access numbers. you can check a project's number of github stars or weekly npm downloads to get an idea of its popularity, but sometimes the best thing to do is search a few forums or talk to other developers. it is not just about the community's size, but also how welcoming and inclusive it is, and how good available documentation is. opinions on the web don't just take our word on this matter — there are discussions all over the web. the wikimedia foundation recently chose to ...

Handling common accessibility problems - Learn web development
e mac's dock, so you can select apps to run inside it. this seems like a lot of commands, but it isn't so bad when you get used to it, and vo regularly gives you reminders of what commands to use in certain places. have a play with vo now; you can then go on to play with some of our examples in the screenreader testing section. nvda nvda is windows-only, and you'll need to install it. download it from nvaccess.org. you can choose whether to make a donation or download it for free; you'll also need to give them your e-mail address before you can download it. once downloaded, install it — you double click the installer, accept the license and follow the prompts. to start nvda, double click on the program file/shortcut, or use the keyboard shortcut ctrl + alt + n. you'll see the nvda ...

Strategies for carrying out testing - Learn web development
ption provided by most virtual machine apps is to create a dynamically allocated hard drive that grows and shrinks as the need arises. to use a virtual box, you need to: get hold of an installer disk or image (e.g. iso file) for the operating system you want to emulate. virtual box is unable to provide these; most, like windows oses, are commercial products that can't be freely distributed. download the appropriate installer for your operating system and install it. open the app; you'll be presented with a view like the following: to create a new virtual machine, press the new button in the top left hand corner. follow the instructions and fill in the following dialog boxes as appropriate. you'll: provide a name for the new virtual machine choose which operating system and versi...

Git and GitHub - Learn web development
ges back up to the server, where an administrator will decide whether to merge your changes with the master copy. 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 to use git and github, you need: a desktop computer with git installed on it (see the git downloads page). a tool to use git. depending on how you like to work, you could use a git gui client (we'd recommend github desktop, sourcetree or git kraken) or just stick to using a terminal window. in fact, it is probably useful for you to get to know at least the basics of git terminal commands, even if you intend to use a gui. a github account. if you haven't already got one, sign up now using the...

Deploying our app - Learn web development
s 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. the above tasks also break down into further tasks; note that most web development teams will have their own terms and...

Links and Resources
dy and on opensp for sgml validation - just like w3c html validator) is a free, powerful, versatile, extended html validator. it can work offline. it can also report accessibility errors and warnings according to selectable accessibility guidelines (section 508, wcag priorities 1, 2 or 3). its accessibility report is viewable in the view source window. this html advanced validator may also be downloaded from firefox add-ons: html validator. open source assistive technology projects nonvisual desktop access open source screen reader for windows, written in python. lsr open source screen reader for linux, written in python orca open source screen reader for linux, written in python accessibility for desktop environments gnome accessibility - gnome accessibility project kde acces...

ZoomText
read the release notes if you're interested. these builds are pretty stable considering they're only alpha, i'm having very good luck with them. it doesn't do us any good to get bug reports on older stuff right now. our main focus is on the browser itself, so you you only need to install mailnews or address book if curious about the other apps. you will also need to install zoomtext 8.11.3. happy testing! you may wish to read through the current issues on this page before reporting bugs. ...

Accessibility and Mozilla
ty with questions or feedback.csun firefox materialsfirefox 1.5 is a fast, free, standards compliant web browser which is rapidly gaining recognition for its fresh, streamlined approach to browsing the web. in addition to winning major awards such as pc world product of the year, firefox has attracted a huge following among savvy users who simply care enough about their web browsing experience to download a new piece of software. websites such as online magazines with sophisticated audiences are now reporting upwards of 25% firefox usage.embedding api for accessibilityevent process procedurethis diagram outlines how events are processed within gecko. gecko info for windows accessibility vendorsplease contact the mozilla accessibility community.information for assistive technology vendorsboth e...

Index
cation, reviews, signing add-ons need to be signed before they can be installed into release and beta versions of firefox. this signing process takes place through addons.mozilla.org (amo), whether you choose to distribute your add-on through amo or to do it yourself. 678 make money from browser extensions guide, monetization, webextensions, distribution while users can download browser extensions for firefox free of cost from addons.mozilla.org (amo), this doesn’t mean you can’t make money from browser extensions, and to a more limited extent themes. 679 promoting your extension or theme add-ons, extensions, promotion, themes, webextensions, distribution so you’ve written a great extension, but only a few people have found and installed it fr...

Frequently Asked Questions for Lightweight themes
eme by clicking "tap to preview"; the design appears in your browser header so you can "try it on." when you're ready, just click the blue install theme button. once a theme is installed, it is saved in the add-ons manager, where you can enable or disable them as you wish. simply go to the tools > add-ons menu and click on the appearance tab. are lightweight themes free? yes. themes are free to download and free to use. using lightweight themes how do i change my current lightweight theme? there are two easy ways to change your theme. you can either: visit the gallery, choose your favorite theme, and click on your choice to instantly change the look of your browser. once a theme is installed, it is saved in the add-ons manager, where you can enable or disable them as you wish. simply go t...

Capturing a minidump
here is any in the browser. for this reason, you may prefer to generate minidumps against a clean profile where possible. capturing a minidump: application crash to capture a full minidump for an application crash, you can use a tool called windbg. install debugging tools for windows microsoft distributes the debugging tools for windows for free, those include windbg which you will need here. download it from install debugging tools for windows. (you'll want the 32-bit version of windbg only if you are using a 32-bit version of firefox) then install it, the standard settings in the installation process are fine. capture a minidump connect firefox to the debugger. if firefox is not already running, then open windbg from the start menu (start->all programs->debugging tools fo...

Debugging OpenGL
ets run automatically. this flushes out each call, essentially turning opengl into a synchronous api. this makes debugging crashes caused by an opengl call much easier, since the stack you see will match where the call was issued, rather than some time in the future when it happens to run and crash. if an opengl error occurred when executing the call, an error message is output. note: you can download debug builds from mozilla taskcluster — click an appropriate platform's debug build on the left, e.g. linux64-debug, then find the build link on the right hand side (this would be target.tar.bz2 for linux, target.dmg for macos, and target.zip for windows). if you need more verbose debug output, you can enable the verbose debug mode by defining the environment variable moz_gl_debug_verbose. wi...

Debugging
ples of remote debugging. useful if a developer can't reproduce your crash. http logging how to log http network traffic for debugging purposes. debugging tools tools assorted tools that will help you debug your code or web site. nserror lookup useful for when your code gets a complicated numeric error code and you can't figure out what it means. download a debug build recent automatically compiled debug builds are available. note that these are replaced frequently by our tinderboxes. the debug builds have "-debug" at the end of their file names. related topics performance and profiling troubleshooting performance problems. ...

Callgraph
od(); } int good() { return evil() ? 0 : 1; } the callgraph would be foo() -> good() -> evil(). ...

Listening to events on all tabs
progress instance responsible for handling the events. arequest the nsirequest object representing the associated request. alocation an nsiuri object indicating the tab's new uri. aflags optional: this is a value which explains the situation or the reason why the location has changed. optional from gecko 10 onprogresschange called when updated progress information for the download of a document is available. void onprogresschange( nsidomxulelement abrowser, nsiwebprogress awebprogress, nsirequest arequest, print32 acurselfprogress, print32 amaxselfprogress, print32 acurtotalprogress, print32 amaxtotalprogress ); parameters abrowser the browser representing the tab for which updated progress information is being provided. awebprogress the pro...

Working with Mozilla source code
ured mozilla build system virtual machine this is the easiest way to get started: use a virtualbox virtual machine which is already configured with a complete build environment for you to use. just boot the vm and build! viewing and searching mozilla source code online learn how to use searchfox, mozilla's online search and browsing tool for accessing the source code. this isn't a good way to download the code, but is a great way to search it. navigating the mozilla source code learn about the various folders in the mozilla source tree, and how to find what you're looking for. bugs for newcomers if you are new to the project and want something to work on, look here. interface development guide guidelines and documentation for how to create and update xpcom interfaces. the firefox c...

mach
ach tends to involve more complexity and potential for breakage. another possible reason: mach gives you an error, while running, say bootstrap.py directly (that is to type in a bash shell: python2 ./bootstrap.py enter-key ) in an otherwise empty ..../subdir/ may work for you! less may be better! and mach's error messages tend to be cryptic and not utterly helpful. that above bootstrap.py will download and setup everything so you can build a mozilla app such as firefox etcetera, so it is a nice starting point. why should i use mach? you should use mach because it provides a better and more unified developer experience for working on mozilla projects. if you don't use mach, you have to find another solution for the following problems: discovering what commands or make targets are available...

Multiple Firefox profiles
r to show up every time you launch. setting up multiple profiles for different firefox channels this section will be especially helpful if you are a developer, wanting to work with multiple channels, and each having their separate launcher. windows in windows, the developer and nightly builds get their own directory in the "programs" folder, so you don't have to worry about where to store the downloaded files. however, all three will attempt to use the same profile by default. you won't want to keep this behavior, because the different channels have different levels of features. to set each launcher, follow the windows instructions at windows launcher. linux in linux, things aren't as automatically set up. you will likely get a prompt to download a tar.bz2 file to extract from. extract the f...

Limitations of frame scripts
sent via message manager) htmlinputelement.mozsetfilenamearray (alternative: mozsetfilearray) xul and browser ui anything that tries to touch the browser ui or anything to do with xul is likely to not work in the content process. for example: nsipromptservice nsifilepicker nsixul* <need more examples> services some services will not work in frame scripts. services.search services.downloads chrome windows anything that needs to use chrome windows will not work in the content process. for example: nsisessionstore nsiwindowmediator <need more examples> places api the places api can't be used inside a frame script. for example: nsinavhistoryservice nsinavbookmarksservice observers in the content process as noted in observers in the chrome process, most observers shou...

Limitations of frame scripts
element.mozsetfilenamearray (alternative: mozsetfilearray) file: uris, see bug 1187099 <...> xul and browser ui anything that tries to touch the browser ui or anything to do with xul is likely not to work in the content process. for example: nsipromptservice nsifilepicker nsixul* <need more examples> services some services will not work in frame scripts. services.search services.downloads chrome windows anything that needs to use chrome windows will not work in the content process. for example: nsisessionstore nsiwindowmediator <need more examples> places api the places api can't be used inside a frame script. for example: nsinavhistoryservice nsinavbookmarksservice observers in the content process as noted in observers in the chrome process, most observers shou...

Firefox and the "about" protocol
the runtime of firefox (in case the user enabled the crash reporter) about:credits lists all contributors to the firefox project about:debugging switches to the developer tools debugging page, which allows you to debug add-ons, tabs and service workers about:devtools summarizes the developer tools and provides links to documentation for each tool about:downloads displays all downloads done within firefox about:home start page of firefox when opening a new window about:license displays licensing information about:logo firefox logo about:memory provides a way to display memory usage, save it as report and run the gc and cc about:mozilla special page showing a message from "the book of mozilla"...

Firefox Operational Information Database: SQLite
manager, select the database you want to explore in the '(select profile database)' pulldown, click 'go', select one of the tables listed in the left column and see the current contents of the database in the 'browse & search' tab.) some databases are used by the browser itself, others are used by applications that you have installed or used; for example: content-prefs.sqlite cookies.sqlite download.sqlite formhistory.sqlite persmissions.sqlite places.sqlite search.sqlite signons.sqlite webappstore.sqlite ...

Using the Browser API
e using this term throughout the current article, and other parts of the documentation. demo to demonstrate basic usage of this api, we have created a simple browser api demo that provides buttons allowing you to (re)load web pages, stop loading, move forward and back in history, and zoom in and out of the page. to run the demo, the best approach is to clone the github repo locally (or just download it directly if you don't do github), open webide, open the repo as a packaged app, then run it either on a simulator or a real device if you have one. in any case, you should at least download the repo and refer to the code as you read the sections below. the html an <iframe> is turned into a browser iframe by setting the mozbrowser attribute on it: <iframe src="http://mozilla.org" mozbrowser...

HTMLIFrameElement.getContentDimensions()
...

Browser API
that are no longer needed (it is used only by the firefox devtools at this point). see bug 1503070 for more details. the methods removed in firefox 65 are: htmliframeelement.addnextpaintlistener() defines a handler to listen for the next mozafterpaint event in the browser <iframe>. htmliframeelement.clearmatch() clears any content highlighted by findall() or findnext(). htmliframeelement.download() downloads a specified url, storing it at the specified filename/path. htmliframeelement.executescript() allows a specified script to be executed against a page loaded in the browser <iframe>. htmliframeelement.findall() searches for a string in a browser <iframe>'s content; if found, the first instance of the string relative to the caret position will be highlighted. htmliframeelement.fin...

Getting Started with Chat
the client to automatically connect to a server and join a particular set of channels when you start the client. the following are some other options available to you: windows mac linux colloquy ● irssi ● ● ●* xchat ● ○ ● key: ● — binary or executable program available ○ — only available by downloading and compiling source code ●* — binary or executable may be available. if not, you'll have to download source code and compile. note: for a complete list of irc clients go here. web-based clients there are also a few web-based clients which allow connecting to irc by clicking on irc:// links. one of the simplest web-based clients is mibbit, another is irccloud. these operate very much...

How to Report a Hung Firefox
he easiest way to help the firefox stability team to debug these kinds of hangs is to make the hung firefox crash and submit a crash report. then file a bug report with the crash report id. the steps to induce a crash are slightly different on each platform: windows on windows, the stability team has written a utility which will inject a crash into firefox which will trigger the crash reporter: download crashfirefox.exe here (source code). running this tool will search for firefox.exe and inject crashing code into it. the tool also has command-line options to kill processes with other names or by process id. run the crashfirefox.exe tool. the firefox crash report ui should appear. please check the box to send the crash report to mozilla start firefox. type "about:crashes" in the url bar and...

UpdateInfo
updateinfo objects hold information about available versions of add-ons and are generated as a result of an update check performed by addonupdatechecker. attributes attribute type description version string the version of the update. updateurl string the updateurl that the update can be downloaded from. updatehash string a hash for the update's file. updateinfourl string a url containing simple release notes for the update. targetapplications object[] information about what applications the update is compatible with. each item in the array contains "id", "minversion", and "maxversion" properties. ...

Add-on Manager
ed either for a specific install using the addlistener() method or for all installs using the addinstalllistener() method. finding updates add-ons can be checked for updates using the findupdates() method. it must be passed an updatelistener to receive information about compatibility information and new update information. any available update is returned as an addoninstall which is ready to be downloaded and installed. detecting add-on changes requires gecko 7.0(firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) you can also get lists of add-ons that, at startup, were changed in various ways. the getstartupchanges() method lets you find out which add-ons were installed, removed, updated, enabled, or disabled at application startup. for example, to take a look at the add-ons that were d...

Services.jsm
cookies nsicookiemanager2 cookie manager 2 service cpmm nsimessagesender child process message manager4 crashmanager crashmanager.jsm dirsvc nsidirectoryservice nsiproperties directory service domstoragemanager nsidomstoragemanager dom storage manager domrequest nsidomrequestservice domrequest service downloads nsidownloadmanager download manager droppedlinkhandler nsidroppedlinkhandler dropped link handler service els nsieventlistenerservice event listener service etld nsieffectivetldservice effectivetld service focus nsifocusmanager focus manager io nsiioservice nsiioservice2 i/o service locale nsilocales...

Using JavaScript code modules
bar in the above example). unloading code modules requires gecko 7.0(firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) components.utils.unload() allows you to unload a previously imported code module. once this method has been called, references to the module will continue to work but any subsequent import of the module will reload it and give a new reference. examples a template to download and edit is seen here on github - gists - _template-bootstrapjsm.xpi extending resource: urls prior to gecko 2.0, the most common way to load code modules was using resource: urls. the basic syntax of a resource url is as follows: resource://<alias>/<relative-path>/<file.js|jsm> the <alias> is an alias to a location, usually a physical location relative to the application or xul runtime. th...

Localizing with Koala
ote that you don't have to edit the location field, it automatically fills in when you check the "mercurial" checkbox: "c:\mozilla\l10n\application\firefox\3.6". url: http://hg.mozilla.org/releases/mozilla-1.9.2. branch: default. revision: leave empty. click "ok". koala will now try to clone the en-us source repository from http://hg.mozilla.org/releases/mozilla-1.9.2. it's almost 1 gb worth of download, so it may take a while. click "ok". on windows, if koala doesn't clone the repositories, you'll need to do it manually. the easy way involves opening the console and issuing the following commands: c:\users\stas> cd c:\mozilla\l10n\application\firefox c:\mozilla\l10n\application\firefox> rmdir 3.6 c:\mozilla\l10n\application\firefox> hg clone http://hg.mozilla.org/releases/mozilla-1.9.2 3.6 req...

Localizing with Pontoon
ike subpages or localization files. hidden if no resources available for project. locale selector (slovenian) switches between languages to localize. go opens project-resource-locale selection. progress indicator displays your progress on the resource being localized. more details are available in the popup. user menu allows for user-specific tasks, like commiting to repository, downloading files and signing out. info menu gives important information, like the anticipated project timeline and a list of keyboard shortcuts. alright, how about we do some translating now? translate strings when using pontoon for localization, you have a couple of options to translate your strings. you can translate in-context, out-of-context, or a combination of the two. we'll start with ...

Localizing without a specialized tool
et of sub-directories, you will need to run the mkdir command inside your locale directory and then copy the .dtd or .properties files into that directory. translating to start editing, you will need a text editing application. you can choose to use: notepad++ or notepad2 on windows, vim, gedit or kate on gnu/linux, textwrangler on mac os x. (read more about tools at l10n:tools.) after you have downloaded your editor of choice, type the following command in the same path from above (l10n-mozilla-1.9.2/x-testing/browser/chrome/browser) $ edit l10n-mozilla-1.9.2/x-testing/browser/chrome/browser/aboutcerterror.dtd read the top of the file to get any context on how to translate contained in the notes written by the developers or l10n-drivers. localization notes will look like this: <!-- localizatio...

Translation phase
workspaces for translating strings, reviewing string submissions, and project dashboards. see the instance of pootle used to localize mozilla applications. koala a l10n add-on for the offline, stand-alone komodo edit text editor. mozilla translator am offline, stand-alone, java-based l10n tool that helps you translate and integrates with your repositories. visit the mozilla translator (mt) download page to get your own mt client. version 5.26 is the latest version. virtaal an offline, stand-alone version of pootle that is also built on the translate toolkit api. these are the mozilla application projects that are localized using the l10n tools above: firefox the award-winning firefox® web browser has security, speed and new features that will change the way you use the web. see the...

SVN for Localizers
ne of mozilla's servers that we use to manage our localizable web system. svn client: this is what a localizer installs on their own computer. the svn client is the localizer's communication portal for accessing the mozilla svn server. you use it to copy files from the server to your computer and to push changed or localized files back onto the server. installing svn client: linux users can download the svn client from http://subversion.apache.org/packages.html or install packages provided within their distribution (for example, in debian, sudo apt-get install subversion). mac os x users can find svn inside the command line tools (available on the apple developer website), or use tools like homebrew or fink. windows users can install the svn client directly from the cygwin setup file. if y...

Localization sign-off reviews
ticle presents an overview of why we do sign-off reviews of localizations, the details on the criteria used for the sign-off reviews, and the process for requesting a review and for following its progress. the sign-off review process has been notoriously shrouded in mystery. we use this review process to perform quality assurance (qa) testing on your l10n efforts. this ensures that every user who downloads your localized mozilla application receives all of your hard work in a functional product. each qa review helps us in these ways: ensures that your l10n work is visible and functional within the mozilla application. allows us to understand how each l10n team is performing their localization work. allows us to discover potential bugs within l10n tools. overview you've done some localization ...

Localization technical reviews
n what a localization technical review is, what criteria are used for the technical reviews, and the process for requesting one and following its progress. the technical review process we use for new localizations can be confusing for any trying to start a new localization. we use this review process to perform quality assurance (qa) testing on your l10n efforts. this ensures that every user who downloads your localized mozilla application receives all of your hard work in a functional product. each qa review helps us in these ways: ensures that your l10n work is visible and functional within the mozilla application. allows us to understand how each l10n team is performing their localization work. allows us to discover potential bugs within l10n tools. overview you've completed most, if n...

Creating localizable web applications
return number_format($num, $decimals, $locale_info['decimal_point'], $locale_info['thousands_sep']); } printf(_("%s mb"), num_format($size, 1)); wrap as few html tags as possible when wrapping the localizable content with the gettext function calls, put all the code that irrelevant to localization outside the function call. snippet 1. bad: <?= _("<a href=\"https://addons.mozilla.org/firefox/downloads/latest/10900\" class=\"get-personas\" id=\"download\"><span>get personas for firefox - free</span>");?><span class="arrow"></span></a> snippet 2. good: <a href="https://addons.mozilla.org/firefox/downloads/latest/10900" class="get-personas" id="download"> <span><?= _("get personas for firefox - free");?></span><span class="arrow"></span> </a> snippet 3. bad: <p><?= _("<strong class=\"le...

Basics
</mstyle> <mstyle scriptlevel="0"> <mn>2</mn><mo>+</mo><mo mathvariant="bold">...</mo> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </math> </button> </div> for more information about mathml in mozilla, see the mathml project page. there are links to more samples, screenshots and instructions on how to download fonts for various platforms. these fonts are required to view other examples beyond the basic constructions illustrated here. mathml background image html content <div class="background"></div> <math display="block"> <mrow> <msub> <mi>z</mi> <mi>&alpha;</mi> </msub> <mrow> <mo>(</mo> <mi>f</mi> <mo>)</mo> </mrow> <mo>=</mo> <mfrac> <mn>1</mn> <mrow> <mn>2</mn> <mi>i</mi> <mo>&thinspace;</...

Fonts for Mozilla 2.0's MathML engine
t this to the default value. to do this, enter the url "about:config", "filter" for "mathfont", and "reset" to the default value through the context menu on the preference. mathml font selection with css you can get these fonts from the mathml-fonts add-on ; the xpi is just a zip archive that you can fetch and extract for example with the following command: wget https://addons.mozilla.org/firefox/downloads/latest/367848/addon-367848-latest.xpi -o mathml-fonts.zip; \ unzip mathml-fonts.zip -d mathml-fonts then copy the mathml-fonts/resource/ directory somewhere on your web site and ensure that the woff files are served with the correct mime type. finally, include the mathml-fonts/resource/mathml.css style sheet in your web pages, for example by adding the following rule to the default style sheet o...

MathML In Action
you already have a mathml-enabled build but what you see on the screenshot is not what you get? in that case you are probably missing some crucial mathml fonts. now that you are well-equipped, you should be able to see this inline equation with varying accents: x ^ + x⁢y ^ + x⁢y⁢z ^ . next to it is this tiny formula, det | a c b d | = a d - b c , which can also be typeset in displaystyle as det | a b c d | = a d - b c . ...

Mozilla Development Tools
eded to build mozilla are described on the build page for your platform. mozilla source code (mercurial and cvs) "trunk" development for gecko 1.9.1/firefox 3.5 and beyond uses the mercurial source code version control system. earlier releases and other products use the cvs version control system. if you are doing active development, checking out source code from one of these is preferable to downloading an archived snapshot, as you get up-to-the-minute changes. mxr you can browse the up-to-the-minute latest version of the source code online through a massively-hyperlinked source code browser (based on lxr) that lets you cross-reference function and variable names. bonsai bonsai is tree control (get it?). it is our home-grown web-based tool for watching the up-to-the-minute goings-on...

Investigating leaks using DMD heap scan mode
in runwatchdog but the call to ns_setcurrentthreadname. this will keep the watch dog from killing the browser when shut down takes multiple minutes. secondly, you may need to comment out the call to moz_crash("nss_shutdown failed"); in xpcom/build/xpcominit.cpp, as this also seems to trigger when shutdown is extremely slow. you need the cycle collector analysis script find_roots.py, which can be downloaded as part of this repo on github. generating logs the next step is to generate a number of log files. you need to get a shutdown cc log and a dmd log, for a single run. definitions i'll write $objdir for the object directory for your firefox dmd build, $srcdir for the top level of the firefox source directory, and $heapgraph for the location of the heapgraph repo, and $logdir for the location...

GC and CC logs
moz_cc_log_directory to moz_upload_dir, then set the other variables appropriately to generate cc logs. the way to set environment variables depends on the test harness, or you can modify the code in nscyclecollector to set that directly. to find the cc logs once the try run has finished, click on the particular job, then click on "job details" in the bottom pane in treeherder, and you should see download links. to set the environment variable, find the buildbrowserenv method in the python file for the test suite you are interested in, and add something like this code to the file: browserenv["moz_cc_log_directory"] = os.environ["moz_upload_dir"] browserenv["moz_cc_log_shutdown"] = "1" analyzing gc and cc logs there are numerous scripts that analyze gc and cc logs on github. to find out why an...

Leak-hunting strategies and tips
to generate balance trees (e.g., using make-tree.pl for the refcount balancer or diffbloatdump.pl --use-address for trace-malloc) andthen run the balance trees (which are much smaller) through the post-processing. getting symbol information for system libraries windows setting the environment variable _nt_symbol_path to something like symsrv*symsrv.dll*f:\localsymbols*http://msdl.microsoft.com/download/symbols as described in microsoft's article. this needs to be done when running, since we do the address to symbol mapping at runtime. linux many linux distros provide packages containing external debugging symbols for system libraries. fix_stacks.py uses this debugging information (although it does not verify that they match the library versions on the system). for example, on fedora, these a...

Profiling with Concurrency Visualizer - Performance
concurrency visualizer is an excellent alternative to xperf. in newer versions of visual studio, it is an addon that needs to be downloaded. here are some scripts that you can be used for manipulating the profiles that have been exported to csv: https://github.com/jrmuizel/concurrency-visualizer-scripts ...

Profiling with Xperf
symbol paths before enabling "load symbols" and before opening a summary view. you can also modify the _nt_symbol_path and _nt_symcache_path environment variables to make these changes permanent. the standard symbol path that includes both mozilla's and microsoft's symbol server configuration is as follows: _nt_symcache_path: c:\symbols _nt_symbol_path: srv*c:\symbols*http://msdl.microsoft.com/download/symbols;srv*c:\symbols*http://symbols.mozilla.org/firefox/ to add symbols from your own builds, add c:\path\to\objdir\dist\bin to _nt_symbol_path. as with all windows paths, the symbol path uses semicolons (;) as separators. make sure you select the trace -> load symbols menu option in the windows performance analyzer (xperfview). there seems to be a bug in xperf and symbols; it is very sensiti...

Profiling with the Firefox Profiler
x 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). thgis requires the following command: $ xpcshell -m -i -n -e ' const ci = components.interfaces; const cc = components.classes; var profiler = cc["@m...

browser.altClickSave
the preference browser.altclicksave controls whether clicking a link while holding the alt key starts the download of that link. type:boolean default value: false exists by default: yes application support:firefox 13.0 status: active; last updated 2012-03-19 introduction: pushed to nightly on 2012-03-02 bugs: bug 713052 values true clicking a link while holding the alt key starts the download of that link. false (default) no action triggered (see bug 736985). ...

Debugging out-of-memory problems
ry dump, but it does not currently. firefox android on firefox android, an about:memory dump may be triggered from a connect desktop machine with the command: adb shell am broadcast -a org.mozilla.gecko.memory_dump the location of the dump file will be printed to the android log (viewed with adb logcat | grep geckoconsole) and can be retrieved via adb pull. note: replace "/storage/emulated/0/download/" in the reported file path with the device's download path (e.g. "/sdcard/download/") when calling adb pull. ...

JSHydra
jshydra is a static analysis tool that is capable of performing analysis of general javascript code. it is inspired by the dehydra and treehydra tools, which can perform similar tasks in c++ code. in its back-end, it uses the parse tree created by the spidermonkey engine. all analysis is performed by running javascripts. documentation installing jshydra download, installation and dependency info for jshydra community view jshydra forums... mailing list newsgroup rss feed #static on irc.mozilla.org blogs joshua cranmer related topics dehydra, treehydra, spidermonkey categories interwiki language links ...

L20n HTML Bindings
<head> … <script src="l20n.js"></script> </head> create manifest use a localization manifest to define available languages and their resource files. ...

Leak And Bloat Tests
d]mail/local folders"); user_pref("mail.server.server1.hostname", "local folders"); user_pref("mail.server.server1.name", "local folders"); user_pref("mail.server.server1.type", "none"); user_pref("mail.server.server1.username", "nobody"); user_pref("mail.server.server2.check_new_mail", false); user_pref("mail.server.server2.directory-rel", "[profd]mail/tinderbox"); user_pref("mail.server.server2.download_on_biff", true); user_pref("mail.server.server2.hostname", "tinderbox"); user_pref("mail.server.server2.login_at_startup", false); user_pref("mail.server.server2.name", "tinderbox@invalid.com"); user_pref("mail.server.server2.type", "pop3"); user_pref("mail.server.server2.username", "tinderbox"); user_pref("mail.smtp.defaultserver", "smtp1"); user_pref("mail.smtpserver.smtp1.hostname", "tinderbox...

McCoy
ormation retrieved has not been tampered with since being written by the add-on author. specifically, it focuses on the process of digitally signing update manifests so the applications can verify the integrity of a manifest retrieved over normally insecure channels. if you want to learn about the technical details of mccoy then visit the project wiki. installing mccoy to use mccoy you need to download and install it. mccoy is provided in the standard package for your operating system, just extract it where you like and run it. mccoy-0.5.en-us.win32.zip (windows) mccoy-0.5.en-us.linux-i686.tar.bz2 (linux) mccoy-0.5.en-us.mac.dmg (mac os x universal) there are some known issues with running mccoy on linux. it will not run on older versions of linux and there are known problems even on up ...

NSPR LOG MODULES
(other tests?) ...

An overview of NSS Internals
spr layer and an ssl library layer. the mozilla applications define a third layer where application specific processing is performed. you can find more details in the nspr reference documents. nss occassionally has to create outbound network connections, in addition to the connections requested by the application. examples are retrieving ocsp (online certificate status protocol) information or downloading a crl (certificate revocation list). however, nss doesn't have an implementation to work with network proxies. if you must support proxies in your application, you are able to register your own implementation of an http request callback interface, and nss can use your application code that supports proxies. when using hashing, encryption, and decryption functions, it is possible to stream d...

NSS FAQ
ity (setting up an encrypted session, server authentication, and client authentication) to help jump start the integration process. however, there is little or no documentation currently available for the rest of the nss api. if your application requires sophisticated certificate management, smart card support, or hardware acceleration, your integration effort will be more extensive. where can i download the nss tools? binary builds of nss for several platforms including the command-line tools can be downloaded from http://ftp.mozilla.org/pub/mozilla.o...y/nss/releases/. nspr, which you will need as well, can be downloaded from http://ftp.mozilla.org/pub/mozilla.org/nspr/releases/. how can i learn more about tls? see https://developer.mozilla.org/docs/glossary/tls. licensing questions how is...

Getting Started With NSS
organizing it in a better way.) nss sample code a good place to start learning how to write nss applications are the command line tools that are maintained by the nss developers. you can find them in subdirectory mozilla/security/nss/cmd or have a look at some basic nss sample code. a new set of samples is currently under development and review, see create new nss samples. you are welcome to download the samples via: hg clone https://hg.mozilla.org/projects/nss; cd nss; hg update samples_branch how to contribute ... (this section is still under construction, but there are many contribution opportunities) start by opening a bugzilla account at bugzilla.mozilla.org if you don't have one. nss :: libraries component for issues you'd like to work on. we maintain a list of nss bugs marked with...

JSS Provider Notes
e, the jre automatically verifies this signature whenever a jss class is loaded that implements a jce algorithm. the verification is transparent to the application (unless it fails and throws an exception). if you are curious, you can verify the signature on the jar file using the jarsigner tool, which is distributed with the jdk. if you build jss yourself from source instead of using binaries downloaded from mozilla.org, your jar file will not have a valid signature. this means you will not be able to use the jss provider for jce algorithms. you have two choices. use the binary release of jss from mozilla.org. apply for your own jce code-signing certificate following the procedure at how to implement a provider for the javatm cryptography extension. then you can sign your own js...

Mozilla-JSS JCA Provider notes
time, the jre automatically verifies this signature whenever a jss class is loaded that implements a jce algorithm. the verification is transparent to the application (unless it fails and throws an exception). if you are curious, you can verify the signature on the jar file using the jarsigner tool, which is distributed with the jdk. if you build jss yourself from source instead of using binaries downloaded from mozilla.org, your jar file will not have a valid signature. this means you will not be able to use the jss provider for jce algorithms. you have two choices. use the binary release of jss from mozilla.org. apply for your own jce code-signing certificate following the procedure at how to implement a provider for the javatm cryptography extension. then you can sign your own jss jar file. ...

JSS 4.4.0 Release Notes
introduction the java security services (jss) team has released jss 4.4.0, which is a minor release. distribution information the hg tag is jss_4_4_20170313. jss 4.4.0 requires netswork security services (nss) 3.29.1 and netscape portable runtime (nspr) 4.13.1 or newer. jss 4.4.0 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/jss/releases/jss_4_4_0_rtm/src/ new in jss 4.40 new functionality new functions new macros notable changes in jss 4.40 picks up work done downstream for fedora and rhel and used by various linux distributions with includes:. support for ipv6. support for tls v1.1 and tls v1.2 via nss though jss. bugs fixed in jss 4.4.0 this bugzilla query returns al...

NSS 3.12.4 release notes
tag nss_3_12_4_rtm. nss 3.12.4 requires nspr 4.8. this is not a hard requirement. our qa tested nss 3.12.4 with nspr 4.8, but it should work with nspr 4.7.1 or later. you can check out the source from cvs by cvs co -r nspr_4_8_rtm nspr cvs co -r nss_3_12_4_rtm nss see the documentation section for the build instructions. nss 3.12.4 source is also available on ftp.mozilla.org for secure https download: source tarball: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_4_rtm/src/. major changes in nss 3.12.4 nss 3.12.4 is the version that we submitted to nist for fips 140-2 validation. currently nss 3.12.4 is in the "review pending" state in the fips 140-2 pre-validation list at http://csrc.nist.gov/groups/stm/cmvp/documents/140-1/140inprocess.pdf added crl distribution ...

NSS 3.12.5 release_notes
ri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1. distribution information the cvs tag for the nss 3.12.5 release is nss_3_12_5_rtm. nss 3.12.5 requires nspr 4.8. you can check out the source from cvs by cvs co -r nspr_4_8_rtm nspr cvs co -r nss_3_12_5_rtm nss see the documentation section for the build instructions. nss 3.12.5 source is also available on ftp.mozilla.org for secure https download: source tarball: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_5_rtm/src/. new in nss 3.12.5 ssl3 & tls renegotiation vulnerability see cve-2009-3555 and us-cert vu#120541 for more information about this security vulnerability. all ssl/tls renegotiation is disabled by default in nss 3.12.5. this will cause programs that attempt to perform renegotiation to exp...

NSS 3.12.9 release notes
xes in nss 3.12.9 are described in the "bugs fixed" section below. nss 3.12.9 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1. distribution information the cvs tag for the nss 3.12.9 release is nss_3.12.9_rtm. nss 3.12.9 requires nspr 4.8.7. see the documentation section for the build instructions. nss 3.12.9 source distribution is also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3.12.9_rtm/src/. you also need to download the nspr 4.8.7 binary distributions to get the nspr 4.8.7 header files and shared libraries, which nss 3.12.9 requires. nspr 4.8.7 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.8.7/. new in nss 3.12.9 removed functions ...

NSS 3.14.1 release notes
introduction network security services (nss) 3.14.1 is a patch release for nss 3.14. the bug fixes in nss 3.14.1 are described in the "bugs fixed" section below. nss 3.14.1 is licensed under the mpl 2.0. distribution information the cvs tag is nss_3_14_1_rtm. nss 3.14.1 requires nspr 4.9.4 or newer. nss 3.14.1 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_14_1_rtm/src/ new in nss 3.14.1 new functionality nss now has the ability to create signed ocsp responses. the ability to create signed ocsp responses has been added in nss 3.14.1. note that this code is used primarily for purposes of testing. new functions in ocspt.h cer...

NSS 3.14.2 release notes
network security services (nss) 3.14.2 is a patch release for nss 3.14. the bug fixes in nss 3.14.2 are described in the "bugs fixed" section below. nss 3.14.2 should be used with nspr 4.9.5 or newer. the release is available for download from https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_14_2_rtm/src/ for the primary nss documentation pages please visit /docs/nss new in nss 3.14.2 nss will now make use of the intel aes-ni and avx instruction sets for hardware-accelerated aes-gcm on 64-bit linux systems. note: the new assembly code requires gnu as version 2.19 or newer. on red hat enterprise linux 5.x systems, install the binutils220 package and add /usr/libexec/binutils220 to the beginning of your path environment variable. initial manual pages for some nss comm...