Index - Web APIs
y, ready, ready promise, reference, web animations, web animations api the read-only animation.ready property of the web animations api returns a promise which resolves when the animation is ready to play. a new promise is created every time the animation enters the "pending" play state as well as when the animation is canceled, since in both of those scenarios, the animation is ready to be started again. 78 animation.reverse() api, animation, interface, method, reference, web animations, reverse, waapi, web animations api the animation.reverse() method of the animation interface reverses the playback direction, meaning the animation ends at its beginning. if called on an unplayed animation, the whole animation is played backwards. if called on a paused animation, the a...
...esents events that occur when a scriptprocessornode input buffer is ready to be processed. 181 audioscheduledsourcenode api, audio, audioscheduledsourcenode, interface, media, reference, web audio api, sound the audioscheduledsourcenode interface—part of the web audio api—is a parent interface for several types of audio source node interfaces which share the ability to be started and stopped, optionally at specified times. specifically, this interface defines the start() and stop() methods, as well as the onended event handler. 182 audioscheduledsourcenode.onended api, audio, audiobuffersourcenode, audioscheduledsourcenode, constantsourcenode, event handler, media, oscillatornode, property, web audio api, onended the onended event handler for the audi...
...i, reference the css typed object model api simplifies css property manipulation by exposing css values as typed javascript objects rather than strings. this not only simplifies css manipulation, but also lessens the negative impact on performance as compared to htmlelement.style. 402 using the css typed object model css, css typed om, houdini, learn this should get you started with understanding the css typed om. take a look at all the css typed om interfaces to learn more. 403 cssconditionrule api, cssom, interface, reference an object implementing the cssconditionrule interface represents a single condition css at-rule, which consists of a condition and a statement block. it is a child of cssgroupingrule. 404 csscounterstylerule ap...
...And 29 more matches

Index - Archive of obsolete content
summary! 21 port no summary! 22 self this article documents the self object that is available as a global in content scripts. self provides: 23 contributor's guide no summary! 24 classes and inheritance add-on sdk no summary! 25 content processes add-on sdk no summary! 26 getting started add-on sdk learn how to contribute to the add-on sdk. 27 modules add-ons, extensions a module is a self-contained unit of code, which is usually stored in a file, and has a well defined interface. the use of modules greatly improves the maintainability of code, by splitting it up into independent components, and enforcing logical boundaries between them. unfortunate...
...annotations add-on sdk no summary! 151 chrome authority no summary! 152 creating event targets no summary! 153 creating reusable modules add-on sdk no summary! 154 developing for firefox mobile add-on sdk no summary! 155 display a popup add-on sdk no summary! 156 getting started (jpm) add-on sdk, jpm in this tutorial we've built and packaged an add-on using three commands: 157 getting started (cfx) in this tutorial we've built and packaged an add-on using three commands: 158 list open tabs add-on sdk no summary! 159 listen for page load add-on sdk no summary! 160 listening for load and u...
...this tutorial focuses on extensions for firefox, but the same (or very similar) principles apply to creating extensions for other applications such as thunderbird, seamonkey, and flock. 281 handling preferences add-ons, extensions, xul, xul s...
...And 19 more matches

Timing element visibility with the Intersection Observer API - Web APIs
on the web is to record how long each ad is visible, for the purpose of billing and payment of revenues. without the intersection observer api, this winds up being done using intervals and timeouts for each individual ad, or other techniques that tend to slow the page down. using this api lets everything get streamlined by the browser to reduce the impact on performance substantially. let's get started! site structure: the html the site's structure is not too complicated. we'll be using css grid to style and lay out the site, so we can be pretty straightforward here: <div class="wrapper"> <header> <h1>a fake blog</h1> <h2>showing intersection observer in action!</h2> </header> <aside> <nav> <ul> <li><a href="#link1">a link</a></li> <li><a href="#link...
...t issue entirely), we need to use the page visibility api to detect these tab switches and disable our timers for the duration. ...
...uration. function handlevisibilitychange() { if (document.hidden) { if (!previouslyvisibleads) { previouslyvisibleads = visibleads; visibleads = []; previouslyvisibleads.foreach(function(adbox) { updateadtimer(adbox); adbox.dataset.lastviewstarted = 0; }); } } else { previouslyvisibleads.foreach(function(adbox) { adbox.dataset.lastviewstarted = performance.now(); }); visibleads = previouslyvisibleads; previouslyvisibleads = null; } } since the event itself doesn't state whether the document has switched from visible to invisible or vice-versa, the document.hidden property is checked to see if the document is not currently visible. since it's theoretically possible to get called multiple times, we only proceed if we have...
...And 12 more matches

Index - Learn web development
re 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-end, html, javascript, learn, tools, web standards welcome to our front-end web developer learning pathway! 36 getting started with the web beginner, css, design, guide, html, index, l10n:priority, publishing, theory it's a lot of work to create a professional website, so if you're new to web development, we encourage you to start small. you won't build another facebook right away, but it's not hard to get your own simple website online, so we'll start there. 37 css basics beginner, css, codingsc...
...learn, server, tcp, l10n:priority this theory is not essential to writing web code in the short term, but before long you'll really start to benefit from understanding what's happening in the background. 41 installing basic software beginner, browser, learn, setup, tools, webmechanics, l10n:priority, text editor that looks like a scary list, but fortunately, you can get started in web development without knowing anything about most of these. in this article, we'll just set you up with a bare minimum — a text editor and some modern web browsers. 42 javascript basics beginner, codingscripting, javascript, learn, web, l10n:priority javascript ("js" for short) is a full-fledged dynamic programming language that can add interactivity to a website. it w...
... related topics. 70 object-oriented javascript for beginners article, beginner, codingscripting, constructor, create, javascript, learn, oojs, oop, object, object-oriented, instance, l10n:priority this article has provided a simplified view of object-oriented theory — this isn't the whole story, but it gives you an idea of what we are dealing with here. in addition, we have started to look at different ways of generating object instances. 71 test your skills: json beginner, example, json, javascript this aim of this skill test is to assess whether you've understood our working with json article. 72 test your skills: object basics beginner, javascript, learn, objects, test your skills this aim of this skill test is to assess whether ...
...And 8 more matches

Introduction to automated testing - Learn web development
other task runners there are many other task runners available. we certainly aren't trying to say that gulp is the best solution out there, but it works for us and it is fairly accessible to beginners. you could also try using other solutions: grunt works in a very similar way to gulp, except that it relies on tasks specified in a config file, rather than using written javascript. see getting started with grunt for more details. you can also run tasks directly using npm scripts located inside your package.json file, without needing to install any kind of extra task runner system. this works on the premise that things like gulp plugins are basically wrappers around command line tools. so, if you can work out how to run the tools using the command line, you can then run them using npm scripts.
... as your own local selenium environments and others, to create automated tests. note: there are other commercial browser testing systems available but in this article, we'll focus on lambdatest, sauce labs, and browserstack. we're not saying that these are necessarily the best tools available, but they are good ones that are simple for beginners to get up and running with. lambdatest getting started with lambdatest let's get started by signing up on lambdatest for free. sign in. this should happen automatically after you verify your e-mail address. note: unlike other cloud-based cross browser testing service providers, lambdatest offers a freemium account where you get lifetime access to their platform. the only difference between their premium and their freemium plan is on the amount...
...o numerous third-party tools such as jira, asana, trello, and more. that way you can log a bug directly from your test session on lambdatest to your project management instance. check out all the third-party lambdatest integrations. note: all the videos and images captured inside a test session are captured inside the gallery, test logs, and issue tracker at lambdatest. sauce labs getting started with sauce labs let's get started with a sauce labs trial. create a sauce labs trial account. sign in. this should happen automatically after you verify your e-mail address. the basics: manual tests the sauce labs dashboard has a lot of options available on it. for now, make sure you are on the manual tests tab. click start a new manual session. in the next screen, type in the url of ...
...And 4 more matches

Download
mise cancel(); promise removepartialdata(); promise whensucceeded(); promise finalize([optional] boolean aremovepartialdata); properties attribute type description canceled read only boolean indicates that the download has been canceled. this property can become true, then it can be reset to false when a canceled download is restarted. this property becomes true as soon as the cancel() method is called, though the stopped property might remain false until the cancellation request has been processed. temporary files or part files may still exist even if they are expected to be deleted, until the stopped property becomes true. contenttype string the mime type of the download, for example "text/plain"...
...rties instead, since this value may not be updated after the last piece of data is transferred. error read only downloaderror when the download fails, this is set to a downloaderror instance indicating the cause of the failure. if the download has been completed successfully or has been canceled, this property is null. this property is reset to null when a failed download is restarted. haspartialdata read only boolean indicates whether, at this time, there is any partially downloaded data that can be used when restarting a failed or canceled download. this property is relevant while the download is in progress, and also if it failed or has been canceled. if the download has been completed successfully, this property is not relevant anymore. wheth...
...t can be used when restarting a failed or canceled download. this property is relevant while the download is in progress, and also if it failed or has been canceled. if the download has been completed successfully, this property is not relevant anymore. whether partial data can actually be retained depends on the saver and the download source, and may not be known before the download is started. hasprogress read only boolean indicates whether this download's progress property is able to report partial progress while the download proceeds, and whether the value in totalbytes is relevant. this depends on the saver and the download source. launchwhensucceeded boolean if this property is true when the download finishes successfully, the target file will be...
...And 4 more matches

Understanding client-side JavaScript frameworks - Learn web development
anilla" javascript or html? after that, we'll provide some tutorials covering the essentials of some of the different framework choices, to provide you with enough context and familiarity to start going into greater depth yourself. we want you to go forward and learn about frameworks in a pragmatic way that doesn't forget about web platform fundamental best practices such as accessibility. get started now, with "introduction to client-side frameworks" prerequisites you should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — html, css, and especially javascript. your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental...
...avascript. your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of. 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 introductory guides 1. introduction to client-side frameworks we begin our look at frameworks with a general overview of the area, looking at a brief history of javascript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks. 2. framework main features each major jav...
...high level and the differences between them. react tutorials note: react tutorials last tested in may 2020, with react/reactdom 16.13.1 and create-react-app 3.4.1. if you need to check your code against our version, you can find a finished version of the sample react app code in our todo-react repository. for a running live version, see https://mdn.github.io/todo-react-build/. 1. getting started with react in this article we will say hello to react. we'll discover a little bit of detail about its background and use cases, set up a basic react toolchain on our local computer, and create and play with a simple starter app, learning a bit about how react works in the process. 2. beginning our react todo list let's say that we’ve been tasked with creating a proof-of-concept in react –...
...And 3 more matches

Setting up your own test automation environment - Learn web development
setting up a selenium-webdriver project for more details of selenium setups for different languages. different browsers require different drivers to allow webdriver to communicate with and control them. see platforms supported by selenium for more information on where to get browser drivers from, etc. we will cover writing and running selenium tests using node.js, as it is quick and easy to get started, and a more familiar environment for front end devs. note: if you want to find out how to use webdriver with other server-side environments, also check out platforms supported by selenium for some useful links. setting up selenium in node to start with, set up a new npm project, as discussed in setting up node and npm in the last chapter. call it something different, like selenium-test. n...
... your test listed; from here you'll be able to see videos, screenshots, and other such data. you can retrieve network, command, exception, and selenium logs for every test within your test build. you will also find a video recording of your selenium script execution. note: the help button on lambdatest automation dashboard will provide you with an ample amount of information to help you get started with lambdatest automation. you can also follow our documentation about running first selenium script in node js. note: if you don't want to write out the capabilities objects for your tests by hand, you can generate them using the selenium desired capabilities generator. filling in test details on lambdatest programmatically when executing numerous automation tests, marking their status a...
...omated test dashboard page, you'll see your test listed; from here you'll be able to see videos, screenshots, and other such data. note: sauce labs' platform configurator is a useful tool for generating capability objects to feed to your driver instances, based on what browser/os you want to test on. note: for more useful details on testing with sauce labs and selenium, check out getting started with selenium for automated website testing, and instant selenium node.js tests. filling in sauce labs test details programmatically you can use the sauce labs api to annotate your test with more details, such as whether it passed, the name of the test, etc. sauce labs doesn't know these details by default! to do this, you need to: install the node sauce labs wrapper using the following co...
...And 3 more matches

nsIDBChangeListener
the nsimsgdbhdr of the message that changed. aoldflags the original flags on the message. can be used to figure out what changed. flags are defined in nsmsgmessageflags. anewflags the new flags on the message. can be used to figure out what changed. flags are defined in nsmsgmessageflags. ainstigator the caller who changed the header. this can be used to filter out events that you yourself started. ainstigator may also be null. onhdrdeleted() called when a header is deleted from the database. void onhdrdeleted(in nsimsgdbhdr ahdrchanged, in nsmsgkey aparentkey, in long aflags, in nsidbchangelistener ainstigator); parameters ahdrchanged the nsimsgdbhdr of the message that was removed. aparentkey the key of the parent fold...
...elistener ainstigator); parameters ahdrchanged the nsimsgdbhdr of the message that was removed. aparentkey the key of the parent folder for deleted header. the typedef of nsmsgkey is given in mailnewstypes2.idl. aflags the flags on the message. flags are defined in nsmsgmessageflags. ainstigator the caller who deleted the header. this can be used to filter out events that you yourself started. ainstigator may also be null. onhdradded() called when a header is added to the database. void onhdradded(in nsimsgdbhdr ahdrchanged, in nsmsgkey aparentkey, in long aflags, in nsidbchangelistener ainstigator); parameters ahdrchanged the nsimsgdbhdr of the message that was added. aparentkey the key of the parent folder for new heade...
...idbchangelistener ainstigator); parameters ahdrchanged the nsimsgdbhdr of the message that was added. aparentkey the key of the parent folder for new header. the typedef of nsmsgkey is given in mailnewstypes2.idl. aflags the flags on the message. flags are defined in nsmsgmessageflags. ainstigator the caller who added the header. this can be used to filter out events that you yourself started. ainstigator may also be null. onparentchanged() called when a message's parent is changing (i.e. most likely it is being moved). void onparentchanged(in nsmsgkey akeychanged, in nsmsgkey oldparent, in nsmsgkey newparent, in nsidbchangelistener ainstigator); parameters akeychanged the key of the message that changed. the...
...And 3 more matches

Movement, orientation, and motion: A WebXR example - Web APIs
arting and stopping the webxr session; we'll see that below. the webxr session is toggled on and off by the handler for click events on the button, whose label is appropriately set to either "enter webxr" or "exit webxr". this is done by the onxrbuttonclick() event handler. ...
... if we already have an ongoing session, on the other hand, we call its end() method to stop the session. the last thing we do in this code is to check to see if xrsession is still non-null. if it is, we call sessionended(), the handler for the end event. ...
...is to check to see if xrsession is still non-null. if it is, we call sessionended(), the handler for the end event. this code should not be necessary, but there appears to be an issue in which at least some browsers are not correctly firing the end event. by running the event handler directly, we complete the close-out process manually in this situation. ...
...And 3 more matches

Index of archived content - Archive of obsolete content
cross-domain content scripts interacting with page scripts loading content scripts reddit example port self contributor's guide classes and inheritance content processes getting started modules private properties firefox compatibility module structure of the sdk porting the library detector program id sdk api lifecycle sdk and xul comparison testing the add-on sdk two types of scripts working ...
... creating annotations displaying annotations implementing the widget overview storing annotations chrome authority creating event targets creating reusable modules developing for firefox mobile display a popup getting started (jpm) getting started (cfx) list open tabs listen for page load listening for load and unload localization logging modifying web pages based on url modifying the page hosted by a tab open a web page troubleshooting unit testing usi...
...a: add-on performance appendix b: install and uninstall scripts appendix c: avoiding using eval in add-ons appendix d: loading scripts appendix e: dom building and insertion (html & xul) appendix f: monitoring dom changes connecting to remote content custom xul elements with xbl getting started with firefox extensions handling preferences intercepting page loads introduction javascript object management local storage mozilla documentation roadmap observer notifications setting up a development environment the box model the essentials of an extension...
...And 2 more matches

Priority Content - Archive of obsolete content
gging around the mirror and see anything there that you think should be migrated to devmo that isn't on this list, feel free to add it below. a raw list of everything that has not been migrated at all appears there. book length works in progress: netscape gecko plugin api reference 1.0 original: netscape gecko plugin api reference 1.0 wiki location: gecko plugin api reference migrators: started: core javascript reference 1.5 original: core javascript reference 1.5 wiki location: core javascript 1.5 reference migrators: deb richardson in progress: transforming xml: netscape and xslt 1.0 original: transforming xml: netscape and xslt 1.0 wiki location: transforming xml with xslt migrators: serge k. keller in progress: rapid application development with mozilla original: author...
...the page. dependant on: updating dhtml web pages for next generation browsers on devedge the tune-up wizard (see below, in the wishlist section) mostly completed: popup window controls devedge article migrators: mathieu deaudelin there are inline examples on this page that cannot be migrated. they are dependant on some style instructions that can only be placed in the header of the page. ...
...soap in netscape gecko-based browsers wiki location: soap in gecko-based browsers migrators: doron rosenberg in progress: css support charts original: css support charts and archive.org mirror wiki location: css support charts migrators: serge k. keller licensing: these css charts appear to be under a cc:by-nc-sa license, please make note of that on the page when you do the migration. ...
...And 2 more matches

Componentizing our Svelte app - Learn web development
the central objective of this article is to look at how to break our app into manageable components and share information between them. we'll componentize our app, then add more functionality to allow users to update existing components. prerequisites: at minimum, it is recommended that you are familiar with the core html, css, and javascript languages, and have knowledge of the terminal/command line. you'll need a terminal with node + npm installed to compile and build your app. ...
...lte: an individual todo item. each visible todo item will be displayed in a separate copy of this component. moreactions.svelte: the check all and remove completed buttons at the bottom of the ui that allow you to perform mass actions on the todo items. in this article we will concentrate on creating the filterbutton and todo components; we'll get to the others in future articles. let's get started. note: in the process of creating our first couple of components, we will also learn different techniques to communicate between components, and the pros and cons of each. extracting our filter component we'll begin by creating our filterbutton.svelte. first of all, create a new file — components/filterbutton.svelte. inside this file we will declare a filter prop, and then copy...
...plementing the "props-up, events-down" communication pattern. creating and listening to custom events. in the next article we will continue componentizing our app and look at some advanced techniques for working with the dom. ...
...And 2 more matches

Handling common JavaScript problems - Learn web development
s need supporting. convenience libraries: make difficult things easier to do. for example, the webgl api is really complex and challenging to use when you write it directly, so the three.js library (and others) is built on top of webgl and provides a much easier api for creating common 3d objects, lighting, textures, etc. the service worker api is also very complex to use, so code libraries have started appearing to make common service worker uses-cases much easier to implement (see the service worker cookbook for several useful code samples). effects libraries: these libraries are designed to allow you to easily add special effects to your websites. this was more useful back when dhtml was a popular buzzword, and implementing an effect involved a lot of complex javascript, but these days brows...
.... again, you should research them before you use them — make sure they work and are maintained. let's work through an exercise — in this example we will use a fetch polyfill to provide support for the fetch api in older browsers; however we also need to use the es6-promise polyfill, as fetch makes heavy use of promises, and browsers that don't support them will still be in trouble. to get started, make a local copy of our fetch-polyfill.html example and our nice image of some flowers in a new directory. we are going to write code to fetch the flowers image and display it in the page. next, save copies of the fetch polyfill and the es6-promises polyfill in the same directory as the html. apply the polyfill scripts to the page using the following code — place these above the existing <s...
...ain()). if an error occurs in the loading of the script, we still call the function, but with a custom error that we can retrieve to help debug a problem if it occurs. note that polyfills.js is basically the two polyfills we are using put together into one file. we did this manually, but there are cleverer solutions that will automatically generate bundles for you — see browserify (see getting started with browserify for a basic tutorial). it is a good idea to bundle js files into one like this — reducing the number of http requests you need to make improves the performance of your site. you can see this code in action in fetch-polyfill-only-when-needed.html (see the source code also). we'd like to make it clear that we can't take credit for this code — it was originally written by philip...
...And 2 more matches

Event reference
on history events event name fired when pagehide a session history entry is being traversed from. pageshow a session history entry is being traversed to. popstate a session history entry is being navigated to (in certain cases). css animation events event name fired when animationstart a css animation has started. animationcancel a css animation has aborted. animationend a css animation has completed. animationiteration a css animation is repeated. css transition events event name fired when transitionstart a css transition has actually started (fired after any delay). transitioncancel a css transition has been cancell...
...me event type specification fired when... abort uievent dom l3 the loading of a resource has been aborted. abort progressevent progress and xmlhttprequest progression has been terminated (not due to an error). abort event indexeddb a transaction has been aborted. afterprint event html5 the associated document has started printing or the print preview has been closed. animationcancel animationevent css animations a css animation has aborted. animationend animationevent css animations a css animation has completed. animationiteration animationevent css animations a css animation is repeated. animationstart animationevent css animations ...
...nt preview has been closed. animationcancel animationevent css animations a css animation has aborted. animationend animationevent css animations a css animation has completed. animationiteration animationevent css animations a css animation is repeated. animationstart animationevent css animations a css animation has started. appinstalled event web app manifest a web application is successfully installed as a progressive web app. audioprocess audioprocessingevent web audio apithe definition of 'audioprocess' in that specification. the input buffer of a scriptprocessornode is ready to be processed. audioend event web speech api the user agent has finished captu...
...And 2 more matches

Repackaging Firefox - Archive of obsolete content
the article is about repackaging firefox 2.0 and is obsolete when working on 3.x repackaging. firefox can be customized for the needs of a particular group of users (for example, your organization's employees or clients). because firefox is designed from the ground up for extensibility and customization, this process is simple and easy to maintain. important legal considerations before you get started, it is very important to know and abide by the legal requirements for distributing firefox. you must have written authorization from mozilla to distribute a modified version of firefox. to do this, please contact trademarks@mozilla.com. getting started now, on to the technical details. the following diagram represents an overview of the process and the pieces involved: you will need the foll...
... the repackager tool. ...
... track of your changes easily when the time comes to upgrade to new versions of firefox, and also ensures, when set-up correctly, that users are able to safely receive firefox updates from mozilla. more about this below. while the aim of this article is not to fully document how to make an extension (for that, try this section of the mozilla developer center), here is a basic tutorial to get you started, and some tips specific for creating a dex. if you already have an extension that you want to bundle with firefox, and don't want to bundle an extra extension solely to set a few defaults, you can do everything you need to do in your existing extension. however, it's still recommended that you look through this tutorial, as it contains tips specific for creating extensions of this type, and ther...
...rything you need to do in your existing extension. however, it's still recommended 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 lo...

Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
step 1: installing inno setup download inno setup from inno setup downloads. if you only want to compile the installer, install the stable release. if you want to edit scripts, you should get the quickstart pack (which includes istool, the script editor. ...
...ublisher properties to the same values specified in your xulrunner application's application.ini file. my app's .iss file sample as follows: ; script generated by the inno setup script wizard. ...
...pplication.ini file. my app's .iss file sample as follows: ; script generated by the inno setup script wizard. ...
... the inno setup script wizard. ...

What’s in the head? Metadata in HTML - Learn web development
itle>, links to css (if you choose to style your html content with css), links to custom favicons, and other metadata (data about the html, such as the author, and important keywords that describe the document.) in this article we'll cover all of the above and more, in order to give you a good basis for working with markup. prerequisites: basic html familiarity, as covered in getting started with html. objective: to learn about the html head, its purpose, the most important items it can contain, and what effect it can have on the html document. what is the html head? let's revisit the simple html document we covered in the previous article: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <p>this is...
...e> </head> in larger pages however, the head can get quite full. try going to some of your favorite websites and use the developer tools to check out their head contents. our aim here is not to show you how to use everything that can possibly be put in the head, but rather to teach you how to use the major elements that you'll want to include in the head, and give you some familiarity. let's get started. adding a title we've already seen the <title> element in action — this can be used to add a title to the document. this however can get confused with the <h1> element, which is used to add a top level heading to your body content — this is also sometimes referred to as the page title. but they are different things! the <h1> element appears on the page when loaded in the browser — gene...
...ontent specifies the actual meta content. two such meta elements that are useful to include on your page define the author of the page, and provide a concise description of the page. let's look at an example: <meta name="author" content="chris mills"> <meta name="description" content="the mdn web docs learning area aims to provide complete beginners to the web with all they need to know to get started with developing web sites and applications."> specifying an author is beneficial in many ways: it is useful to be able to understand who wrote the page, if you have any questions about the content and you would like to contact them. some content management systems have facilities to automatically extract page author information and make it available for such purposes. specifying a description t...
...metadata in html html text fundamentals creating hyperlinks advanced text formatting document and website structure debugging html marking up a letter structuring a page of content ...

Ember app structure and componentization - Learn web development
to be done?" placeholder="what needs to be done?" autofocus > </section> note: aria-label provides a label for assistive technology to make use of — for example, for a screenreader to read out. this is useful in such cases where we have an <input> being used with no corresponding html text that could be turned into a label. when you save application.hbs, the development server you started earlier will automatically rebuild the app and refresh the browser. the rendered output should now look like this: it doesn't take too much effort to get our html looking like a fully-featured to-do list app. update the application.hbs file again so its content looks like this: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" ...
...odo items in the next article! summary great! everything looks as it should. we have successfully refactored our html into components! in the next article we'll start looking into adding interactivity to our ember application. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Introduction to client-side frameworks - Learn web development
n web – including many of the websites you likely use every day. mdn web docs, which you are currently reading this on, uses the react/reactdom framework to power its front end. what frameworks are out there? there are many frameworks out there, but currently the "big four" are considered to be the following. ember ember was initially released in december 2011 as a continuation of work that started in the sproutcore project. it is an older framework that has less users than more modern alternatives such as react and vue, but it still enjoys a fair amount of popularity due to its stability, community support, and some clever coding principles. start learning ember angular angular is an open-source web application framework led by the angular team at google and by a community of individua...
...place and how to go about choosing one, and made you excited to learn more and get stuck in! our next article goes down to a lower level, looking at the specific kinds of features frameworks tend to offer, and why they work like they do. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

TypeScript support in Svelte - Learn web development
get the complete to-do list application in javascript before you start porting it to typescript. go to the root directory of the project and enter these commands: npx degit sveltejs/template/scripts scripts # download script file to a scripts folder node scripts/setuptypescript.js # run it converted to typescript. you will need to re-run your dependency manager to get started. npm install # download new dependencies npm run dev # start the app in development mode these instructions apply to any svelte project you'd like to convert to typescript. just take into account that the svelte community is constantly improving svelte typescript support, so you should run npm update regularly to take ...
...ol to inspect typescript issues from the command line. in the next article we will learn how to compile and deploy our app to production. we will also see which resources are available online to go further with learning svelte. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
in this article we will add the app's final features and further componentize our app. we will learn how to deal with reactivity issues related to updating objects and arrays. to avoid common pitfalls, we'll have to dig a little deeper into svelte's reactivity system. we'll also look at solving some accessibility focus issues, and more besides. ...
...he use:action directive. accessing component methods using bind:this={component} (binding components). in the next article we will see how to use stores to communicate between components, and add animations to our components. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

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. ...
... through addlistener. ...
...doninstall install) void onexternalinstall(in addon install, in addon existingaddon, in boolean needsrestart) methods onnewinstall() called when a new instance of addoninstall is created, primarily so ui can display some kind of progress for all installs. void onnewinstall( in addoninstall install ) parameters install the addoninstall representing the install ondownloadstarted() called when downloading begins for an add-on install. only called for add-ons that need to be downloaded. a listener may return false to cancel the download. void ondownloadstarted( in addoninstall install ) parameters install the addoninstall representing the install ondownloadprogress() called as data is received during a download. check the progress property for the amount of dat...
...eed to be downloaded. void ondownloadcancelled( in addoninstall install ) parameters install the addoninstall representing the install ondownloadfailed() called if there is some error downloading the add-on. only called for add-ons that need to be downloaded. void ondownloadfailed( in addoninstall install ) parameters install the addoninstall representing the install oninstallstarted() called when installation of an add-on begins. a listener may return false to cancel the install. void oninstallstarted( in addoninstall install ) parameters install the addoninstall representing the install oninstallended() called when installation of an add-on is complete. the newly installed add-on may require a restart in order to become active. void oninstallended( in addonin...

Downloads.jsm
all work on both downloads.private and downloads.public downloads. properties attribute type description error read only constructor constructor for a downloaderror object. when you catch an exception during a download, you can ...
...eatedownload(object aproperties); promise<void> fetch(asource, atarget, [optional] object aoptions); promise<downloadlist> getlist(atype); promise<downloadsummary> getsummary(atype); constants constant description public work on downloads that were not started from a private browsing window. private work on downloads that were started from a private browsing window. all work on both downloads.private and downloads.public downloads. properties attribute type description error read only constructor constructor for a downloaderror object. when you catch an exception during a download, you can use this to verify if ex instanceof downloads.error, before reading the exception proper...
...saver object. promise resolves to the newly created download object. fetch() downloads data from a remote network location to a local file. this download method does not provide user interface or the ability to cancel or restart the download programmatically. for that, you should obtain a reference to a download object using the createdownload() function. since the download cannot be restarted, any partially downloaded data will not be kept in case the download fails. promise fetch( asource, atarget, object aoptions ); parameters asource string containing the uri for the download source. alternatively, may be an nsiuri or a downloadsource object. atarget string containing the path of the target file. alternatively, may be an nsifile or a downloadtarget object. aoptions ...
...", os.path.join(os.constants.path.tmpdir, "example-download.html")); console.log("example-download.html has been downloaded."); }).then(null, components.utils.reporterror); observing downloads this example logs a message every time a change occurs in one of the global download lists. to demonstrate the logging, a new download is started while a message box is being shown. the download is stopped and removed from the list when the message box is closed, regardless of whether it has been completed or not. components.utils.import("resource://gre/modules/downloads.jsm"); components.utils.import("resource://gre/modules/osfile.jsm") components.utils.import("resource://gre/modules/task.jsm"); task.spawn(function () { let list = yi...

Starting WebLock
ts most of the generic component functionality (e.g. registration). this chapter will focus on the functionality that actually handles the web locking. getting called at startup no person is an island to himself, and neither are components. the sample component you've built up so far doesn't do anything. after having its registration procedure called, the component does nothing. in order to be started up or notified when some event happens, the sample component has to hook into mozilla, which it can do either by overriding an existing component or by registering for some event that will cause it to start up. weblock does the latter and gets called when a gecko profile startup occurs. when a gecko application starts up, registered components are created and notified via the general-purpose obse...
...ory is identified by a string that represents the name of the category. each category contains a set of name-value pairs. for example, you might have a category named "important people" in which the name-value pairs would be names and phone numbers. the format of the name-value pair is left up to you. this data structure is more than enough to support the persisting of components that want to be started up. the category name also maps nicely onto the notion of a notification "topic." the topic name could be something like "xpcom-startup", for instance, and the name-value pair could contain the contract ids required to create the components requesting startup. in fact, this is exactly how categories are used to handle registration with xpcom for startup notification. you will see the code which d...
...ion in xxx what is example 1? link to it hereexample 1. in addition to these parameters, the callback functions are passed the nsmodulecomponentinfo struct, which is the same structure initially passed into ns_impl_nsgetmodule. during registration, the registration callback is where you get the nsicategorymanager. once you have it, you can add the component to the category of components that get started automatically. as a service, the nsicategorymanager is accessible via the nsiservicemanager. also note that the nsicomponentmanager is passed into the callback. since the object that implements the nsicomponentmanager interface also implements nsiservicemanager, all you have to do is queryinterface the nsicomponentmanager to nsiservicemanager to get the service manager. you can then use the servi...
... ns_get_iid(iweblock), getter_addrefs(weblock)); if (ns_failed(rv)) { printf("error: xpcom obtaining service [%x].\n", rv); return -1; } implementing the iweblock interface once the interface is defined, you can focus on implementing the web lock startup functionality itself. the weblock component starts automatically when xpcom is started up because it's been registered as a category in xpcom. when weblock is called, one of the first things it wants to do is read in a file that lists the urls that the browser is allowed to load. this file can exist anywhere on the local system, but we've placed it next to the application to keep things simple. the first step in this implementation phase, then, is to create the functionality that a...

Mozilla
tips and techniques that can help too. also available are assorted tools that you can use when debugging. developer guide there are lots of ways to contribute to the mozilla project: coding, testing, improving the build process and tools, or contributing to the documentation. this guide provides information that will not only help you get started as a mozilla contributor, but that you'll find useful to refer to even if you are already an experienced contributor. displaying places information using views views are one component of the places model-view-controller design. use them to display nsinavhistoryresult objects to the user. see querying places for inf...
...tree and the frame tree. changes to a document originate in the content tree (from dom modification by scripting, insertion of elements from the parser, etc.) and are propogated to the layout tree through magic that primarily resides in //github.com/realityripple/uxp/blob/master/layout/base/nscssframeconstructor.cpp getting started with chat note that on 2nd march 2020, mozilla moved away from irc to matrix for its public channels, the irc server was shut down. git moved here: https://firefox-source-docs.mozilla.org/contributing/contribution_quickref.html hacking with bonsai bonsai was originally created to solve the problem of tree...
...there are actually two autocomplete mechanisms: how to investigate disconnect failures this article will guide you on how to investigate disconnect failures. an example of such a failure how to report a hung firefox is your firefox not responding? or are you regularly seeing the "firefox is runn...
...n firefox itself. many of these are components of firefox or are tools used to create firefox, but may be used by other projects as well. here you'll find links to documentation about these projects. mozilla projects on github there are a number of tools and services whose code is hosted on github. this article offers a quick guide for getting started with mozilla code on github. it also lists some interesting github repositories containing mozilla project code. mozilla quirks mode behavior the following is a rough list of the differences that exist between mozilla's standards mode and quirks mode behavior. mozilla style system the style system is the module of mozilla's...

HTMLElement: animationstart event - Web APIs
the animationstart event is fired when a css animation has started. if there is an animation-delay, this event will fire once the delay period has expired. a negative delay will cause the event to fire with an elapsedtime equal to the absolute value of the delay (and, correspondingly, the animation will begin playing at that time index into the sequence). ...
...time index into the sequence). ...
... examples this listens for the animationstart event and logs a message when it is fired: const animated = document.queryselector('.animated'); animated.addeventlistener('animationstart', () => { console.log('animation started'); }); the same, but using onanimationstart: const animated = document.queryselector('.animated'); animated.onanimationstart = () => { console.log('animation started'); }; live example html <div class="animation-example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; ...
...ex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.t...

Signaling and video calling - Web APIs
nectivity establishment (ice) comes in. exchanging ice candidates two peers need to exchange ice candidates to negotiate the actual connection between them. every ice candidate describes a method that the sending peer is able to use to communicate. each peer sends candidates in the order they're discovered, and keeps sending candidates until it runs out of suggestions, even if media has already started streaming. an icecandidate event is sent to the rtcpeerconnection to complete the process of adding a local description using pc.setlocaldescription(offer). once the two peers agree upon a mutually-compatible candidate, that candidate's sdp is used by each peer to construct and open a connection, through which media then begins to flow. if they later agree on a better (usually higher-performanc...
... process. note that for native apps, such as a phone application, you should not begin sending until the connection has been accepted at both ends, at a minimum, to avoid inadvertently sending video and/or audio data when the user isn't prepared for it. as soon as media is attached to the rtcpeerconnection, a negotiationneeded event is triggered at the connection, so that ice negotiation can be started. if an error occurs while trying to get the local media stream, our catch clause calls handlegetusermediaerror(), which displays an appropriate error to the user as required. handling getusermedia() errors if the promise returned by getusermedia() concludes in a failure, our handlegetusermediaerror() function performs. function handlegetusermediaerror(e) { switch(e.name) { case "notfoun...
...d "permissiondeniederror" results, treating refusal to grant permission to use the media hardware the same as the user canceling the call. regardless of why an attempt to get the stream fails, we call our closevideocall() function to shut down the rtcpeerconnection, and release any resources already allocated by the process of attempting the call. this code is designed to safely handle partially-started calls. creating the peer connection the createpeerconnection() function is used by both the caller and the callee to construct their rtcpeerconnection objects, their respective ends of the webrtc connection. it's invoked by invite() when the caller tries to start a call, and by handlevideooffermsg() when the callee receives an offer message from the caller. function createpeerconnection() { ...
...hat follow, an error is reported by invoking our reporterror() function. once setlocaldescription()'s fulfillment handler has run, the ice agent begins sending icecandidate events to the rtcpeerconnection, one for each potential configuration it discovers. our handler for the icecandidate event is responsible for transmitting the candidates to the other peer. session negotiation now that we've started negotiation with the other peer and have transmitted an offer, let's look at what happens on the callee's side of the connection for a while. the callee receives the offer and calls handlevideooffermsg() function to process it. let's see how the callee handles the "video-offer" message. handling the invitation when the offer arrives, the callee's handlevideooffermsg() function is called with th...

Promise - JavaScript
e is simply logged, via a fulfill callback set using p1.then(). a few logs show how the synchronous part of the method is decoupled from the asynchronous completion of the promise. ...
... via a fulfill callback set using p1.then(). a few logs show how the synchronous part of the method is decoupled from the asynchronous completion of the promise. ...
...og.insertadjacenthtml('beforeend', thispromisecount + ') started (sync code started)'); // we make a new promise: we promise a numeric count of this promise, starting from 1 (after waiting 3s) let p1 = new promise((resolve, reject) => { // the executor function is called with the ability to resolve or reject the promise log.insertadjacenthtml('beforeend', thispromisecount + ') promise started (async code started)'); // this is only an example to create asynchronism window.settimeout(function() { // we fulfill the promise ! resolve(thispromisecount); }, math.random() * 2000 + 1000); }); // we define what to do when the promise is resolved with the then() call, // and what to do when the promise is rejected with the catch() call p1.then(function(val)...
...(you need a browser that supports promise. ) by clicking the button several times in a short amount of time, you'll even see the different promises being fulfilled one after another. loading an image with xhr another simple example using promise and xmlhttprequest to load an image is available at the mdn github js-examples repository. you can also see it in action. ea...

Autoplay guide for media and Web Audio APIs - Web media technologies
r is there an exception thrown or a callback you can set up or even a flag on the media element that tells you if autoplay worked. all you can really do is examine a few values and make an educated guess as to whether or not autoplay worked. a better approach, if you're able to adjust the direction you look at things from, is to instead rely on knowing that playback of the media has successfully started, instead of when it fails to start. you can do this easily, by listening for the play event to be fired on the media element. the play event is sent both when the media is resumed after being paused and when autoplay occurs. that means that the first time the play event is fired, you know your media is being started for the first time after the page is opened. consider this html for a media ele...
...ndlefirstplay(event)"> here we have a <video> element whose autoplay attribute is set, with an onplay event handler set up; the event is handled by a function called handlefirstplay(), which receives as input the play event. handlefirstplay() looks like this: function handlefirstplay(event) { let vid = event.target; vid.onplay = null; // start whatever you need to do after playback has started } after getting a reference to the video element from the event object's target, the element's onplay handler is set to null. this will prevent any future play events from being delivered to the handler. that could happen if the video is paused and resumed by the user or automatically by the browser when the document is in a background tab. at this point, your site or app can begin whatever it ...
...from the event object's target, the element's onplay handler is set to null. this will prevent any future play events from being delivered to the handler. that could happen if the video is paused and resumed by the user or automatically by the browser when the document is in a background tab. at this point, your site or app can begin whatever it needs to do that relies upon the video having been started up. note: this approach doesn't differentiate between autoplay and the user starting playback manually. the play() method the term "autoplay" also refers to scenarios in which a script tries to trigger the playback of media that includes audio, outside the context of handling a user input event. this is done by calling the media element's play() method. note: it is strongly recommended tha...
...a.autoplay.default. if media.autoplay.default is not set to 0 (autoplay allowed by default), this preference being true allows autoplay of media with audio tracks anyway if the page has been activated by user gestures, and media that isn't audible is not restricted at all. media.block-autoplay-until-in-foreground a boolean preference which indicates whether or not media playback is blocked when started on a background tab. the default value, true, means that even when otherwise available, autoplay won't take place until after a tab is brought to the foreground. this prevents the distracting situation in which a tab begins playing sound and the user can't find the tab among all their tabs and windows. ...

Tutorials
he basics, or are an old hand at web development, you can find helpful resources here for best practices. these resources are created by forward-thinking companies and web developers who have embraced open standards and best practices for web development and that provide or allow translations, through an open content license such as creative commons. for complete beginners to the web getting started with the web getting started with the web is a concise series introducing you to the practicalities of web development. you'll set up the tools you need to construct a simple webpage and publish your own simple code. html tutorials introductory level introduction to html this module sets the stage, getting you used to important concepts and syntax, looking at applying html to text, how...
... can be a challenge. this module covers basic table markup, along with more complex features such as implementing captions and summaries. advanced level html forms forms are a very important part of the web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. this module gets you started with creating the client-side parts of forms. tips for authoring fast-loading html pages optimize web pages to provide a more responsive site for visitors and reduce the load on your web server and internet connection. css tutorials introductory level css basics css (cascading style sheets) is the code you use to style your webpage. css basics takes you through what you need to ...
...h creating the client-side parts of forms. tips for authoring fast-loading html pages optimize web pages to provide a more responsive site for visitors and reduce the load on your web server and internet connection. css tutorials introductory level css basics css (cascading style sheets) is the code you use to style your webpage. css basics takes you through what you need to get started. we'll answer questions like: how do i make my text black or red? how do i make my content show up in such-and-such a place on the screen? how do i decorate my webpage with background images and colors? css first steps css (cascading style sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns...
...les, strings, numbers and arrays. javascript building blocks in this module, we continue our coverage of all javascript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. you've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly. getting started with javascript what is javascript and how can it help you? codecademy codecademy is an easy way to learn how to code javascript. it's interactive and you can do it with your friends. freecodecamp freecodecamp teaches a variety of languages and frameworks for web development. it also has a forum, an internet radio station, and a blog. intermediate level introducing javascript objec...

Bootstrapped extensions - Archive of obsolete content
emove anything that it has added to the application, as well as all references to any of its objects. there are several scenarios in which the startup() function may be called; for example: when the extension is first installed, assuming that it's both compatible with the application and is enabled. when the extension becomes enabled using the add-ons manager window. when the application is started up, if the extension is enabled and compatible with the application. some examples of when the shutdown() function may be called: when the extension is uninstalled, if it's currently enabled. when the extension becomes disabled. when the user quits the application, if the extension is enabled. notes on modifying the application user interface chrome.manifest in bootstrapped add-ons you...
.../unload the manifest manually using nsicomponentmanager.addbootstrappedmanifestlocation() and nsicomponentmanager.removebootstrappedmanifestlocation(). this feature was unavailable in firefox versions before 8. adding user interface manually if you decide to go ahead and try to develop a bootstrapped extension that modifies the application's user interface, here are a few suggestions to get you started. you need to look up the relevant application ui elements by their id by calling document.getelementbyid(), then manipulate them to inject your ui. for example, you can get access to the menu bar in firefox with document.getelementbyid("main-menubar"). be sure that at shutdown time, you remove any user interface you've added. creating a bootstrapped extension to mark an extension as bootstrap...
...after it has been shut down in order to install an update. as such, this can be called many times during the lifetime of the application. this is when your add-on should inject its ui, start up any tasks it may need running and so forth. void startup( data, reason ); parameters data a bootstrap data structure. reason one of the reason constants, indicating why the extension is being started up. this will be one of app_startup, addon_disable, addon_install, addon_upgrade, or addon_downgrade. shutdown called when the extensidisableon needs to shut itself down, such as when the application is quitting or when the extension is about to be upgraded or disabled. any user interface that has been injected must be removed, tasks shut down, and objects disposed of. void shutdown( data, ...

JavaScript Daemons Management - Archive of obsolete content
cesses created by javascript timers or by a worker instantiation. here are some code snippets that simplify and abstract the management of daemons. the following daemons management framework is the major version of setinterval – a little framework. introduction sometimes a page uses dozens and dozens of animations. in such a condition it is difficult and unnatural to keep track of all events started and then to stop them when appropriate through the cleartimeout() function. a possible approach to solve this problem is to nest all the information needed by each animation to start, stop, etc. in different objects (daemons) and then to create a constructor for such a class of objects (daemon) in order to standardize and simplify the instantiation of them. note: a minimalistic version of it (mi...
...her the process is going backwards or not). see above. if the mydaemon.task function returns a false value, the daemon will be paused. mydaemon.rate the time lapse (in number of milliseconds) between each invocation (read/write). mydaemon.length the total number of invocations. it can be a positive integer or infinity (read/write). mydaemon.reversals the number of times the daemon must be restarted (read/write). set it to infinity for a “loop mode”. mydaemon.onstart the start listener (read/write). it will be called with three arguments: index (the iterative index of each invocation), length (the number of total invocations assigned to the daemon - finite or infinity), and backwards (a boolean expressing whether the process is going backwards or not). mydaemon.onstop the stop list...
... of total invocations assigned to the daemon - finite or infinity), and backwards (a boolean expressing whether the process is going backwards or not). note: the stop() method is not part of the base system. daemon instances methods mydaemon.isatend() returns a boolean expressing whether the daemon is at the start/end position or not. mydaemon.synchronize() synchronizes the timer of a started daemon with the time of invocation of mydaemon.synchronize(). if the rate property has been changed, the daemon will be updated with the new rate value. mydaemon.pause() pauses the daemon. mydaemon.start([backwards]) starts the daemon forwards (index of each invocation increasing) or backwards (index decreasing). mydaemon.stop() stops the daemon. all original properties will be restored. if...

Enhanced Extension Installation - Archive of obsolete content
s installed at that location. <location>/extensions.ini - an ini manifest listing the directories for all the extensions and themes at the location (used by the component manager, preferences system, chrome registry etc to locate files during the startup process). in the profile directory, the file compatibility.ini stores information about the version of the application (build info) that last started this profile - during startup this file is checked and if the version info held by the running app disagrees with the info held by this file, a compatibility check is run on all installed items. when changes are made to the extensions datasource - new items are installed, old items uninstalled, enabled or disabled, a .autoreg file is written to the profile directory as well, which tells the star...
...manifest file and copies all metadata into the appropriate datasource. at this time a new extensions.ini file is written locating the extension so that the component manager, preferences system and chrome registry can locate additional files on the next start. the finalization process then notifies the startup process that finalization has changed this manifest, and that the application must be restarted to pick up changes specified therein. the startup process receives this "needsrestart" bit when the extension manager's startup completes, shuts down xpcom and relaunches the application. on the next restart, the xredirprovider now supplies a list of directories to requesting systems listing the new item's components, defaults and chrome manifests. uninstallation, disabling, enabling these fun...
...ctory of a particular item, for a subdirectory or file within an item's directory, etc. since our needs and the needs of other applications may vary in the future, since we've already effectively generalized the concept of an install location, we can make this set configurable by applications and extensions. to this end, we scan the category extension-install-locations as the extension system is started (after profile initialization) and add these to our internal set. extension metadata the following files are now used to hold metadata: <profile>/extensions.ini -active items this file contains a list of active extension directories (i.e. directories to extensions that are enabled only), to be used by the xredirprovider during startup to locate components, preferences and chrome manifests.

Drag and Drop - Archive of obsolete content
empts to drag objects around. a user can start dragging by holding down the mouse button and moving the mouse. the drag stops when the user releases the mouse. event handlers are called when the user starts and ends dragging, and at various points in-between. mozilla implements dragging by using a drag session. when a user requests to drag something that can be dragged, a drag session should be started. the drag session handles updating the mouse cursor and where the object should be dropped. if something cannot be dragged, it should not start a drag session. because the user generally has only one mouse, only one drag session is in use at a time. note that drag sessions can be created from within mozilla itself or from other applications. mozilla will translate the data being dragged as neede...
...pport drag and drop. the first is a drag service, nsidragservice and the second is the drag session, nsidragsession. the nsidragservice is responsible for creating drag sessions when a drag starts, and removing the drag session when the drag is complete. the function invokedragsession should be called to start a drag inside an ondraggesture event handler. once this function is called, a drag has started. the function invokedragsession takes four parameters, as described below: invokedragsession(element, transferablearray, region, actions) element a reference to the element that is being dragged. this can be retrieved by getting the property event.target during the event handler. transferablearray an array of nsitransferable objects, one for each item being dragged. an array is used becau...
...ide extra feedback to the user. numdropitems the number of items being dragged. for example, this will be set to 5 if five bookmarks are being dragged. getdata(transfer,index) get the data being dragged. the first argument should be an nsitransferable object to hold the data. the second argument, index, should be the index of the item to return. sourcedocument the document where the drag started. sourcenode the dom node where the drag started. isdataflavorsupported(flavor) returns true if the data being dragged contains data of the specified flavor. next » original document information author(s): neil deakin original document: copyright information: copyright (c) neil deakin ...

Index - Archive of obsolete content
xul methods, xul reference no summary! 580 showonlythesetabs method, reference, référence(2), xul no summary! 581 showpane xul methods, xul reference no summary! 582 showpopup needshelp, needsrewrite, xul methods, xul reference no summary! 583 sizeto xul methods, xul reference no summary! 584 startediting xul methods, xul reference no summary! 585 startfind no summary! 586 stop xul methods, xul reference no summary! 587 stopediting xul methods, xul reference no summary! 588 swapdocshells xul methods, xul reference no summary! 589 syncsessions needshelp, xul methods, xul reference ...
...his indicates to the template builder that an xml source is being used as that the queries use syntax that is specific to xml. 952 textbox (xpfe autocomplete) xul elements, xul reference this element is created by setting the type attribute of a textbox to autocomplete. it is used to create a textbox with a popup containing a list of possible completions for what the user has started to type. 953 the joy of xul guide, mozilla, xpcom, xpconnect, xul this guide is designed to introduce application developers and their managers to xul so they can not only understand why mozilla's platform is based on it, but how they might adopt it for their own use. xul (pronounced "zool") is mozilla's xml-based user interface language that lets you build feature rich cross...
...ne line of text is displayed by default. the multiline attribute can be specified to display a field with multiple rows. 1190 textbox (toolkit autocomplete) xul elements, xul reference this element is created by setting the type attribute of the textbox to autocomplete. it is used to create a textbox with a popup containing a list of possible completions for what the user has started to type. 1191 textnode xul elements, xul reference normally when substituting rdf resources in template rules, you place the rdf property name inside an attribute value preceded with rdf:. in the case of the textnode element, the entire node is replaced with text corresponding to the result of the value attribute. 1192 timepicker xul elements, xul reference ...

How CSS is structured - Learn web development
plying css to a document: with an external stylesheet, with an internal stylesheet, and with inline styles. external stylesheet an external stylesheet contains css in a separate file with a .css extension. this is the most common and useful method of bringing css to a document. you can link a single css file to multiple web pages, styling all of them with the same css stylesheet. in the getting started with css, we linked an external stylesheet to our web page. you reference an external css stylesheet from an html <link> element: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>hello world!</h1> <p>this is my first css example</p> </body> </html> the css stylesheet fi...
...{ color: red; } when you find css that you want to experiment with, replace the html <body> contents with some html to style, and then add your test css code to your css file. as an altenative, you can also use the interactive editor below. read on and have fun! selectors a selector targets html to apply styles to content. we have already discovered a variety of selectors in the getting started with css tutorial. if css is not applying to content as-expected, your selector may not match the way you think it should match. each css rule starts with a selector—or a list of selectors—in order to tell the browser which element or elements the rules should apply to. all the examples below are valid selectors, or lists of selectors. h1 a:link .manythings #onething * .box p .box p:first-c...
...ep property names and property values together as single unbroken strings. ...

Installing basic software - Learn web development
what tools do the professionals use? a computer. maybe that sounds obvious to some people, but some of you are reading this article on your phone or a library computer. for serious web development, it's better to invest in a desktop or laptop computer running windows, macos or linux. a text editor, to write code in. this could be a text editor (e.g. visual studio code, notepad++, sublime text, atom, gnu emacs, or vim), or a hybrid editor (e.g. dreamweaver or webstorm). ...
...ity. a library tends to be an existing javascript or css file that provides ready-rolled functionality for you to make use of in your code. a framework tend to take this idea further, offering a complete system with some custom syntaxes for you to write a web app on top of. more tools besides! what tools do i actually need, right now? that looks like a scary list, but fortunately, you can get started in web development without knowing anything about most of these. in this article, we'll just set you up with a bare minimum — a text editor and some modern web browsers. installing a text editor you probably already have a basic text editor on your computer. by default windows includes notepad and macos comes with textedit. linux distros vary; ubuntu comes with gedit by default. for web deve...
...jects compatible with it, as very few people still use it — certainly don't worry too much about it while you are learning. you might sometimes run into a project that requires support for it. ...

Creating hyperlinks - Learn web development
html text formatting, as covered in html text fundamentals. objective: to learn how to implement a hyperlink effectively, and link multiple files together. ...
... touchscreens to navigate web pages will have difficulty accessing title information. if a title's information is truly important to the usability of page, then you should present it in a manner that will be accessible to all users, for example by putting it in the regular text. active learning: creating your own example link create an html document using your local code editor and our getting started template. inside the html body, add one or more paragraphs or other types of content you already know about. change some of the content into links. include title attributes. block level links as mentioned before, almost any content can be made into a link, even block-level elements. if you have an image you want to make into a link, use the <a> element and reference the image file with th...
...r skills: links. summary that's it for links, for now anyway! you'll return to links later on in the course when you start to look at styling them. ...

Introduction to HTML - Learn web development
three columns of content? a navigation menu?), and embed content such as images and videos into a page. this module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand html. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you don't need any previous html knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content). you should have a basic work environment set up (as detailed in installing basic software), and understand how to create and manage files (as detailed in dealing w...
...ule, you don't need any previous html knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content). you should have a basic work environment set up (as detailed in installing basic software), and understand how to create and manage files (as detailed in dealing with files). both are parts of our getting started with the web complete beginner's module. note: if you are working on a computer/tablet/other devices that doesn't let you create your own files, you can try out (most of) the code examples in an online coding program such as jsbin or glitch. guides this module contains the following articles, which will take you through all the basic theory of html and provide ample opportunity for you to te...
...'s module. note: if you are working on a computer/tablet/other devices that doesn't let you create your own files, you can try out (most of) the code examples in an online coding program such as jsbin or glitch. guides this module contains the following articles, which will take you through all the basic theory of html and provide ample opportunity for you to test out some skills. getting started with html covers the absolute basics of html, to get you started — we define elements, attributes, and other important terms, and show where they fit in the language. we also show how a typical html page is structured and how an html element is structured, and explain other important basic language features. along the way, we'll play with some html to get you interested! what’s in the head?

Drawing graphics - Learn web development
se css and javascript to animate (and otherwise manipulate) svg vector images — as they are represented by markup — there was still no way to do the same for bitmap images, and the tools available were rather limited. the web still had no way to effectively create animations, games, 3d scenes, and other requirements commonly handled by lower level languages such as c++ or java. the situation started to improve when browsers began to support the <canvas> element and associated canvas api — apple invented it in around 2004, and other browsers followed by implementing it in the years that followed. as you'll see below, canvas provides many useful tools for creating 2d animations, games, data visualizations, and other types of app, especially when combined with some of the other apis the web p...
...followed. as you'll see below, canvas provides many useful tools for creating 2d animations, games, data visualizations, and other types of app, especially when combined with some of the other apis the web platform provides. the below example shows a simple 2d canvas-based bouncing balls animation that we originally met in our introducing javascript objects module: around 2006–2007, mozilla started work on an experimental 3d canvas implementation. this became webgl, which gained traction among browser vendors, and was standardized around 2009–2010. webgl allows you to create real 3d graphics inside your web browser; the below example shows a simple rotating webgl cube: this article will focus mainly on 2d canvas, as raw webgl code is very complex. we will however show how to use a webg...
...d was standardized around 2009–2010. webgl allows you to create real 3d graphics inside your web browser; the below example shows a simple rotating webgl cube: this article will focus mainly on 2d canvas, as raw webgl code is very complex. we will however show how to use a webgl library to create a 3d scene more easily, and you can find a tutorial covering raw webgl elsewhere — see getting started with webgl. note: basic canvas functionality is supported well across browsers, with the exception of ie 8 and below for 2d canvas, and ie 11 and below for webgl. active learning: getting started with a <canvas> if you want to create a 2d or 3d scene on a web page, you need to start with an html <canvas> element. this element is used to define the area on the page into which the image will b...

Object building practice - Learn web development
le display — you don't need to have any previous knowledge of these apis, and we hope that by the time you've finished this article you'll be interested in exploring them more. along the way we'll make use of some nifty objects, and show you a couple of nice techniques like bouncing balls off walls, and checking whether they have hit each other (otherwise known as collision detection). getting started to begin with, make local copies of our index.html, style.css, and main.js files. these contain the following, respectively: a very simple html document featuring an <h1> element, a <canvas> element to draw our balls on, and elements to apply our css and javascript to our html. some very simple styles, which mainly serve to style and position the <h1>, and get rid of any scrollbars or margin...
... degrees around the circle that the arc is drawn between. here we specify 0 degrees, and 2 * pi, which is the equivalent of 360 degrees in radians (annoyingly, you have to specify this in radians). that gives us a complete circle. if you had specified only 1 * pi, you'd get a semi-circle (180 degrees). last of all, we use the fill() method, which basically states "finish drawing the path we started with beginpath(), and fill the area it takes up with the color we specified earlier in fillstyle." you can start testing your object out already. save the code so far, and load the html file in a browser. open the browser's javascript console, and then refresh the page so that the canvas size changes to the smaller visible viewport that remains when the console opens. type in the following...
...y run and passed the same function name, it runs that function a set number of times per second to create a smooth animation. this is generally done recursively — which means that the function is calling itself every time it runs, so it runs over and over again. last but not least, add the following line to the bottom of your code — we need to call the function once to get the animation started. loop(); that's it for the basics — try saving and refreshing to test your bouncing balls out! adding collision detection now for a bit of fun, let's add some collision detection to our program, so our balls know when they have hit another ball. first, add the following method definition below where you defined the update() method (i.e., the ball.prototype.update block). ball.prot...

Server-side web frameworks - Learn web development
yourself: some web frameworks include tools/libraries that address every problem their developers can think "by default", while more lightweight frameworks expect web developers to pick and choose solution to problems from separate libraries (django is an example of the former, while flask is an example of a very light-weight framework). frameworks that include everything are often easier to get started with because you already have everything you need, and the chances are that it is well integrated and well documented. however if a smaller framework has everything you (will ever) need then it can run in more constrained environments and will have a smaller and easier subset of things to learn. whether or not the framework encourages good development practices: for example, a framework that e...
...) to write our examples later on in the course, mainly because they are easy to learn and have good support. note: let's go to the main websites for django (python) and express (node/javascript) and check out their documentation and community. navigate to the main sites (linked above) click on the documentation menu links (named things like "documentation, guide, api reference, getting started", etc.). can you see topics showing how to set up url routing, templates, and databases/models? are the documents clear? navigate to mailing lists for each site (accessible from community links). how many questions have been posted in the last few days how many have responses? do they have an active community? a few good web frameworks? let's now move on, and disc...
...nt tools (often free), an active developer community, and well-written documentation. asp.net is used by microsoft, xbox.com, stack overflow, and many others. mojolicious (perl) mojolicious is a next-generation web framework for the perl programming language. back in the early days of the web, many people learned perl because of a wonderful perl library called cgi. it was simple enough to get started without knowing much about the language and powerful enough to keep you going. mojolicious implements this idea using bleeding edge technologies. some of the features provided by mojolicious are: a real-time web framework, to easily grow single-file prototypes into well-structured mvc web applications. restful routes, plugins, commands, perl-ish templates, content negotiation, session manage...

Ember Interactivity: Footer functionality, conditional rendering - Learn web development
only can we mark todos as complete, but we can clear them as well. now the only thing left to wire up the footer are the three filtering links: "all", "active", and "completed". we'll do that in the next article, using routing. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Ember interactivity: Events, classes and state - Learn web development
l move on to getting our footer functionality working, including the todo counter, and look at conditional rendering, including correctly styling todos when they've been checked. we'll also wire up our "clear completed" button. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Ember resources and troubleshooting - Learn web development
oading and error can render default templates as well as customized templates defined elsewhere in the application, unifying loading/error states. more information on everything a route can do is found in the api documentation. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Routing in Ember - Learn web development
pository for the code of this tutorial or see the live deployed version here. study the code to learn more about ember, and also check out the next article, which provides links to more resources and some troubleshooting advice. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Framework main features - Learn web development
next! at this point you can choose which framework you'd like to start learning first: react ember vue note: we only have three framework tutorial series available now, but we hope to have more available in the future. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Accessibility in React - Learn web development
in our todo-react repository. for a running live version, see https://mdn.github.io/todo-react-build/. in the very last article we'll present you with a list of react resources that you can use to go further in your learning. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Componentizing our React app - Learn web development
s it for this article — we've gone into some depth on how to break up your app nicely into components, end render them efficiently. now we'll go on to look at how we handle events in react, and start adding some interactivity. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

React interactivity: Events and state - Learn web development
eted. we are nearly there. in the next article we'll implement functionality to edit existing tasks and filter the list of tasks between all, completed, and incomplete tasks. we'll look at conditional ui rendering along the way. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

React interactivity: Editing, filtering, conditional rendering - Learn web development
users can use our app. our next article rounds things off for our react tutorials by looking at including focus management in react, which can improve usability and reduce confusion for both keyboard-only and screenreader users. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

React resources - Learn web development
place to start. there's one caveat, however: these projects will be merging in the near future. when this merge happens, react router will be the surviving project (with the addition of the focus management features of reach). ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Beginning our React todo list - Learn web development
owser, and your app should now have reasonable styling. summary now our todo list app actually looks a bit more like a real app! the problem is: it doesn’t actually do anything. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Starting our Svelte Todo list app - Learn web development
d48d473ca63ab91709a0a5a0?version=3.23.2 summary with our markup and styling in place our todo list app is starting to take shape, and we have everything ready so that we can start to focus on the features we have to implement. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Deployment and next steps - Learn web development
ith a list of svelte resources to go further with your svelte learning. congratulations! after completing this series of tutorials you should have a strong base from which to start developing professional web applications with svelte. ...
...lient-side javascript frameworks in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Working with Svelte stores - Learn web development
ve to implement animations on dom elements. in the next article we will learn how add typescript support to our svelte application. to take advantage of all its features, we will also port our entire application to typescript. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Dynamic behavior in Svelte: working with variables and props - Learn web development
e. triggering reactivity with assignments. using reactive expressions to filter data explicitly defining our reactive dependencies in the next article we will add further functionality, which will allow users to edit todos. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Using Vue computed properties - Learn web development
y to add a nice little feature to our app. we do however have bigger fish to fry — in the next article we will look at conditional rendering, and how we can use it to show an edit form when we want to edit existing todo items. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Vue conditional rendering: editing existing todos - Learn web development
tionality in our app, which is fairly exciting. we are nearing the end of our vue series now. the last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Creating our first Vue component - Learn web development
ultiple todoitem components to our app. in our next artcle we'll look at adding a set of todo item data to our app.vue component, which we'll then loop through and display inside todoitem components using the v-for directive. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Adding a new todo form: Vue events, methods, and models - Learn web development
now starting to feel interactive, but one issue is that we've completely ignored its look and feel up to now. in the next article, we'll concentrate on fixing this, looking at the different ways vue provides to style components. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Focus management with Vue refs - Learn web development
g further. note: if you need to check your code against our version, you can find a finished version of the sample vue app code in our todo-vue repository. for a running live version, see https://mdn.github.io/todo-vue/dist/. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Rendering a list of Vue components - Learn web development
nd for that we'll need a text <input>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. we'll get to these in the next article. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Vue resources - Learn web development
also a handful of other changes, including a change in how apps are initialized in vue. to read more about the changes involved with vue 3, refer to this article by vue school which goes over most of the major changes in vue 3. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Styling Vue components with CSS - Learn web development
ow. summary our work is done on the styling of our sample app. in the next article we'll return to adding some more functionlity to our app, namely using a computed property to add a count of completed todo items to our app. ...
...ide javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and ...
...ources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Learn web development
e enough detail for you to feel comfortable and learn the topics properly. you should feel at home whether you are a student learning web development (on your own or as part of a class), a teacher looking for class materials, a hobbyist, or someone who just wants to understand more about how web technologies work. what's new? the content in the learning area is being added to regularly. ...
...ave started keeping learning area release notes to show what has changed — keep checking back frequently! if you have questions regarding topics you'd like to see covered or feel are missing, drop us a message on our discourse forum. 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 where to start complete beginner: if you are a complete beginner to web development, we'd recommend that you start by working through our getting started with the web module, which provides a practical introduction to web development. beyond the basics: if you have a bit of knowledge already, the next step is to learn html and css in detail: start with our introduction to html module and mo...
...p you. random glossary entry semantics in programming, semantics refers to the meaning of a piece of code — for example "what effect does running that line of javascript have?", or "what purpose or role does that html element have" (rather than "what does it look like?".) topics covered the following is a list of all the topics we cover in the mdn learning area. getting started with the web provides a practical introduction to web development for complete beginners. html — structuring the web html is the language that we use to structure the different parts of our content and define what their meaning or purpose is. this topic teaches html in detail. css — styling the web css is the language that we can use to style and layout our web content, as well as adding...

AddonManager
urred (such as an add-on 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 be...
...st of types. promise? getinstallsbytypes( in string types[], in installlistcallback? callback ) parameters types an optional array of types to retrieve. each type is a string name. callback a callback which will be passed an array of addoninstalls. ...
... of addoninstalls. installaddonsfromwebpage() starts installation of an array of addoninstall notifying the registered web install listener of blocked or started installs. void installaddonsfromwebpage( in string mimetype, in nsidomwindow source, in nsiuri uri, in addoninstall installs[] ) parameters mimetype the mimetype of add-ons being installed source the nsidomwindow that started the installs uri the nsiuri that started the installs installs the array of addoninstalls to be installed addinstalllistener() adds a new installlistener if the listener is not already registered. void addinstalllistener( in installlistener listener ) parameters listener the installlistener to add removeinstalllistener() removes an installlistener if the listener is registered.

source-editor.jsm
otherwise false. destroy() destroys the editor, releasing resource it's allocated and removing event handlers it's installed. you should call this method when you're done using the editor object. void destroy(); parameters none. dropselection() deselects the currently selected text. void dropselection(); parameters none. endcompoundchange() ends a compound change that was previously started by calling startcompoundchange(). all changes made to the text between the two calls is considered to be a single edit for the purposes of undo operations. void endcompoundchange(); parameters none. find() finds a string in the editor's text. number find( [optional] string astring [optional] object aoptions ); parameters astring optional the string for which to search. if not spe...
...ecase boolean if true, the search is performed in a case-insensitive manner; otherwise case is considered. the default is false. start number an integer value indicating the offset into the text at which to begin the find operation. the default is 0 if backwards is false, or text.length if backwards is true. findnext() finds the next occurrence of the search operation started by the last call to find(). note: this ignores the value you specified for backwards in the original search; it always searches forward. number findnext( boolean awrap }; parameters awrap if true, the search operation will wrap around to the beginning of the text. otherwise, the search stops if the end of the text is reached. return value the offset into the text at which the next oc...
...rd. number findnext( boolean awrap }; parameters awrap if true, the search operation will wrap around to the beginning of the text. otherwise, the search stops if the end of the text is reached. return value the offset into the text at which the next occurrence of the string begins, or -1 if the string isn't found. findprevious() finds the previous occurrence of the search operation started by the last call to find(). note: this ignores the value you specified for backwards in the original search; it always searches backward. number findnext( boolean awrap }; parameters awrap if true, the search operation will wrap around to the end of the text. otherwise, the search stops if the beginning of the text is reached. return value the offset into the text at which the next o...

Localization formats
ave the answers ready before starting the web l10n process. html/php maybe you are designing a project that has relatively small translation needs like three to four lines (or more) of content asking users to update to the next version of software available. you may choose to present just the html for localization: we give an html file which lists several pieces of content like, <h1>getting started</h1> and the localizer translates to <h1>débuter avec firefox</h1> the localizer then submits the translated html or php back to us by either checking in changes to svn or sending us a patch that pascal checks in. advantages to html good for small projects very simple for web developers gives localizers the exact context of translations a localizer who knows basic html can style tra...
...bdev team sets up a site without gettext support, we still have .lang. (it should be noted that this is near impossibility since most sites will be set up with gettext support.) .lang files can be easily edited in a text editor with this setup, a localizer is given a "[something].lang" file containing all the strings needing localization. that file will have the following structure: ;getting started débuter avec firefox the english content is designated by the semi-colon and the localizer provides the translation underneath. that content is placed into an array that is used by the php code later. $array["getting started"] = "débuter avec firefox" the php code searches the array and returns the translation that is associated with the english term used by the web developer. see the e...
...t is designated by the semi-colon and the localizer provides the translation underneath. that content is placed into an array that is used by the php code later. $array["getting started"] = "débuter avec firefox" the php code searches the array and returns the translation that is associated with the english term used by the web developer. see the example below. ...

GCIntegration - SpiderMonkey Redirect 1
hing require write barriers. every time a pointer is updated, a small amount of code runs that may mark one of the objects involved in the update. this only happens if an incremental gc is in progress. spidermonkey uses a simple barrier commonly called a "snapshot at the beginning" barrier. the fundamental invariant that this barrier guarantees is that any object reachable when the incremental gc started will be marked. in addition, objects allocated during the incremental gc are marked unconditionally. at the end of the gc, any reachable object must have been newly allocated or else reachable at the beginning, since objects can never go from unreachable to reachable. the end result is that all reachable objects are marked. a simple way to visualize the invariant is that, when an incremental gc ...
...e end result is that all reachable objects are marked. a simple way to visualize the invariant is that, when an incremental gc starts, an "initial snapshot" of the heap is taken. the snapshot consists of all objects reachable from the roots via traced pointers--as if someone did a js_dumpheap() at the beginning of the incremental gc. these objects, as well as any that were allocated since the gc started, are guaranteed to be marked. the write barrier guarantees the snapshot-at-the-beginning (satb) invariant in a simple way. if, in the middle of an incremental gc, a pointer to an object x is destroyed (meaning overwritten or no longer traced for some reason), then x will be marked. in the diagram above, c will be marked when the pointer from a to c is nulled out. this barrier is conservative—i...
...hen it will be nulled out or dropped in some way. if the object is still reachable, then the pointer will be left alone. to see how weak pointers can cause trouble, consider the following situation: {{ svg{source: "http://people.mozilla.org/~wmccloskey/incremental2.svg", embedding: "iframe", height:"130"} }} in the left frame, a has a weak pointer to c. assume that an incremental gc has already started, and a and b have been marked. c was not marked by a because weak pointers are not traced. now let's assume, between the left and right frames, that some code has read the weak pointer to c and then created a regular (strong) reference from b to c. now c is reachable, but it won't be marked because b was already fully marked. no write barrier is invoked when creating the pointer from b to c becau...

Web Console remoting - Firefox Developer Tools
including chrome errors and network events. this actor is used for the browser console implementation and for debugging remote firefox/b2g instances. startlisteners(listeners, onresponse) the new startlisteners packet: { "to": "conn0.console9", "type": "startlisteners", "listeners": [ "pageerror", "consoleapi", "networkactivity", "fileactivity" ] } the reply is: { "startedlisteners": [ "pageerror", "consoleapi", "networkactivity", "fileactivity" ], "nativeconsoleapi": true, "from": "conn0.console9" } the reply tells which listeners were started and it includes a flag nativeconsoleapi which tells if the window.console object was overridden by the scripts in the page or not. tab navigation to listen to the tab navigation events you also need...
... console actor: { "to": "conn0.console9", "type": "sendhttprequest", "request": { "url": "http://localhost", "method": "get", "headers": [ { name: "header-name", value: "header value", }, // ... ], }, } the response packet is a network event actor grip: { "to": "conn0.console9", "eventactor": { "actor": "conn0.netevent14", "starteddatetime": "2013-08-26t19:50:03.699z", "url": "http://localhost", "method": "get" "isxhr": true, "private": false } } you can also use the webconsoleclient.sendhttprequest(request, onresponse) method. the request argument is the same as the request object in the above example request packet. page errors page errors come from the nsiconsoleservice. each allowed page error is a...
...o the clearmessagescache request packet that has no response. this clears the console api calls cache and should clear the page errors cache - see bug 717611. network logging the networkevent packet whenever a new network request starts being logged the networkevent packet is sent: { "from": "conn0.console10", "type": "networkevent", "eventactor": { "actor": "conn0.netevent14", "starteddatetime": "2012-09-17t19:50:03.699z", "url": "http://localhost/~mihai/mozilla/test2.css", "method": "get" "isxhr": false, "private": false } } this packet is used to inform the web console of a new network event. for each request a new networkeventactor instance is created. the isxhr flag indicates if the request was initiated via an xmlhttprequest instance, that is: the nsiht...

Document - Web APIs
indicating that a css animation has stopped playing. globaleventhandlers.onanimationiteration an eventhandler called when an animationiteration event has been sent, indicating that a css animation has begun playing a new iteration of the animation sequence. globaleventhandlers.onanimationstart an eventhandler called when an animationstart event is sent, indicating that a css animation has started playing. globaleventhandlers.onauxclick an eventhandler called when an auxclick event is sent, indicating that a non-primary button has been pressed on an input device (e.g. a middle mouse button). globaleventhandlers.onblur is an eventhandler representing the code to be called when the blur event is raised. globaleventhandlers.onerror is an onerroreventhandler representing the code to be...
...ransitioncancel event is sent, indicating that a css transition has been cancelled. globaleventhandlers.ontransitionend an eventhandler called when a transitionend event is sent, indicating that a css transition has finished playing. globaleventhandlers.ontransitionrun an eventhandler called when a transitionrun event is sent, indicating that a css transition is running, though not nessarilty started. globaleventhandlers.ontransitionstart an eventhandler called when a transitionstart event is sent, indicating that a css transition has started transitioning. globaleventhandlers.onwaiting is an eventhandler representing the code to be called when the waiting event is raised. deprecated properties document.alinkcolor returns or sets the color of active links in the document body. doc...
...ents transitioncancel fired when a css transition is canceled. also available via the ontransitioncancel property. transitionend fired when a css transition has completed. also available via the ontransitionend property. transitionrun fired when a css transition is first created. also available via the ontransitionrun property. transitionstart fired when a css transition has actually started. also available via the ontransitionstart property. non-standard extensions firefox notes mozilla defines a set of non-standard properties made only for xul content: document.currentscript returns the <script> element that is currently executing. document.documenturiobject (mozilla add-ons only!) returns the nsiuri object representing the uri of the document. this property only ...

HTMLElement: transitionstart event - Web APIs
the transitionstart event is fired when a css transition has actually started, i.e., after any transition-delay has ended. ...
...ansitionstart event is fired when a css transition has actually started, i.e., after any transition-delay has ended. ...
... no interface transitionevent event handler property ontransitionstart examples this code adds a listener to the transitionstart event: element.addeventlistener('transitionstart', () => { console.log('started transitioning'); }); the same, but using the ontransitionstart property instead of addeventlistener(): element.ontransitionrun = () => { console.log('started transitioning'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .trans...

HTMLMediaElement.play() - Web APIs
note: older browsers may not return a value from play(). ...
... note: older browsers may not return a value from play(). ...
... note: older browsers may not return a value from play(). exceptions the promise's rejection handler is called with an exception name passed in as its sole input parameter (as opposed to a traditional exception being thrown). ...

HTMLMediaElement - Web APIs
s: 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 play and has not been seeked, this value is the media's initial playback time. setting this value seeks the media to the new time. the time is specified relative to the media's timeline. htmlmediaelement.defaultmuted a boolean that reflects the muted html attribute, which indicates whether the media element's audio output should be muted by default. htmlmediaelement.defaultplaybackrate a d...
....g., 2 channels * 1024 samples = 2048 total). the mozframebufferlength property can be set to a new value for lower latency, larger amounts of data, etc. the size given must be a number between 512 and 16384. using any other size results in an exception being thrown. the best time to set a new length is after the loadedmetadata event fires, when the audio info is known, but before the audio has started or mozaudioavailable events have begun firing. htmlmediaelement.mozsamplerate read only returns a double representing the number of samples per second that will be played. for example, 44100 samples per second is the sample rate used by cd audio. htmlmediaelement.muted is a boolean that determines whether audio is muted. true if the audio is muted and false otherwise. htmlmediaelement...
...method is called to reload it. ended fired when playback stops when end of the media (<audio> or <video>) is reached or because no further data is available. error fired when the resource could not be loaded due to an error. loadeddata fired when the first frame of the media has finished loading. loadedmetadata fired when the metadata has been loaded loadstart fired when the browser has started to load a resource. pause fired when a request to pause play is handled and the activity has entered its paused state, most commonly occurring when the media's htmlmediaelement.pause() method is called. play fired when the paused property is changed from true to false, as a result of the htmlmediaelement.play() method, or the autoplay attribute playing fired when playback is ready to start ...

Web Audio API best practices - Web APIs
ry. it provides advanced scheduling capabilities, synths, and effects, and intuitive musical abstractions built on top of the web audio api. r-audio, from the bbc's research & development department, is a library of react components aiming to provide a "more intuitive, declarative interface to web audio". if you're used to writing jsx it might be worth looking at. ...
...this is because autoplaying audio can be really annoying and obtrusive. but how do we handle this? when you create an audio context (either offline or online) it is created with a state, which can be suspended, running, or closed. when working with an audiocontext, if you create the audio context from inside a click event the state should automatically be set to running. ...
...ent the state should automatically be set to running. here is a simple example of creating the context from inside a click event: const button = document.queryselector('button'); button.addeventlistener('click', function() { const audioctx = new audiocontext(); }, false); if however, you create the context outside of a user gesture, its state will be set to suspended and it will need to be started after user interaction. we can use the same click event example here, test for the state of the context and start it, if it is suspended, using the resume() method. const audioctx = new audiocontext(); const button = document.queryselector('button'); button.addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspen...

XRSystem: isSessionSupported() - Web APIs
in this example, we see issessionsupported() used to detect whether or not the device supports vr mode by checking to see if an immersive-vr session is supported. if it is, we set up a button to read "enter xr", to call a method onbuttonclicked(), and enable the button. if no session is already underway, we request the vr session and, if successful, set up the session in a method called onsessionstarted(), not shown. if a session is already underway when the button is clicked, we call the xrsession object's end() method to shut down the webxr session. if (navigator.xr) { navigator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { userbutton.addeventlistener('click', onbuttonclicked); userbutton.innerhtml = 'enter xr'; userbutton.disabled...
... xrsession.end(); } } specifications specification status comment webxr device apithe definition of 'issessionsupported()' in that specification. working draft initial definition. ...
... xrsession.end(); } } specifications specification status comment webxr device apithe definition of 'issessionsupported()' in that specification. working draft initial definition. ...

XRSystem - Web APIs
if it's found, we know webxr is present, so we proceed by establishing a handler for the...
...igator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { immersivebutton.disabled = false; } else { immersivebutton.disabled = true; }); } function onbuttonclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then(() => { // onsessionstarted() not shown for reasons of brevity and clarity. onsessionstarted(xrsession); }); } else { // shut down the already running xrsession xrsession.end() .then(() => xrsession = null); } } this code starts by checking to see if webxr is available by looking for the navigator.xr property. if it's found, we know webxr is present, so we proceed by establishing a handler for the button which the user can click to toggle immersive vr mode on and off...
...ton, immersivebutton, which the user can then use to switch to immersive mode only if immersive vr mode is available. if immersive vr isn't available, the button is disabled to prevent its use. the onbuttonclicked() function checks to see if there's already a session running. if there isn't, we use requestsession() to start one and, once the returned promise resolves, we call a function onsessionstarted() to set up our session for rendering and so forth. if, on the other hand, there is already an ongoing xr session, we instead call end() to end the current session. when the returned promise resolves, we set xrsession to null to record the fact that we no longer have an ongoing session. that way, if the user clicks the button again, a new session will start. specifications specificati...

Index - Developer guides
mlhttprequest asynchronous javascript and xml, while not a technology in itself, is a term coined in 2005 by jesse james garrett, that describes a "new" approach to using a number of existing technologies together 3 community ajax if you know of useful mailing lists, newsgroups, forums, or other communities related to ajax, please link to them here. 4 getting started ajax, api, advanced, javascript, webmechanics, xmlhttprequest this article guides you through the ajax basics and gives you some simple hands-on examples to get you started. 5 wai aria live regions/api support ajax, accessibility firefox 3 contains important improvements to the way the mozilla engine exposes live changes in a document. 6 audio and video d...
...n employed to relay live events such as sports, concerts and more generally tv and radio programmes that are output live. often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. this is a fairly complex and nascent subject with a lot of variables, so in this article, we'll introduce you to the subject and let you know how you can get started. 11 media buffering, seeking, and time ranges apps, buffer, html5, timeranges, video, buffering, seeking sometimes it's useful to know how much <audio> or <video> has downloaded 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 fea...
...unning either on the web, locally, or through technology such as node.js, on a server. on this page you'll find a complete list of all of the apis provided by the full web technology stack. 29 index guide, index found 31 pages: 30 introduction to web development beginner, css, codingscripting, development, html, javascript, web whether you're just getting started with web development, or are just expanding your horizons into new realms of web awesomeness, the links here should help you get started. 31 localizations and character encodings character encodings, html, localization, needsmarkupwork browsers process text as unicode internally. however, a way of representing characters in terms of bytes (character encoding) is used for tran...

Introduction to Web development - Developer guides
for another (overlapping) set of links to learning resources, see the mdn learning pages. note: the recommended resources on this page are subject to change. documentation topics html the basics of hypertext mark-up langage (html) — what exactly is html? basic structure of a web page — the doctype and document 'tree' fundamental html elements — structural, head, list, form elements and more, explained by category. html beginners tutorial — a tutorial and exercise that recap and take you through the basics you've learned above. ...
...nd document 'tree' fundamental html elements — structural, head, list, form elements and more, explained by category. html beginners tutorial — a tutorial and exercise that recap and take you through the basics you've learned above. html elements reference guide — a comprehensive guide to html elements with details on how browsers support them css getting started with css — an absolute beginners guide to css covers basic concepts and fundamentals css reference guide — a complete guide to css with details on the level of gecko/firefox support for each. the w3c introduction to styling with css — a brief guide to styling web pages for beginners. common css questions — common questions and answers for beginners intermediate css con...
...erence guide — a complete guide to css with details on the level of gecko/firefox support for each. the w3c introduction to styling with css — a brief guide to styling web pages for beginners. common css questions — common questions and answers for beginners intermediate css concepts — grouping, pseudo-classes and more. javascript beginning getting started with javascript — what is javascript and how can it help you? javascript reference guide — a comprehensive, regularly updated guide to javascript for all levels of learning from beginner to advanced. crockford on javascript — an in-depth video series on the javascript language. eloquent javascript — a comprehensive guide to intermediate and advanced javascript methodologie...

Navigation and resource timings - Web Performance
returned is 0. redirectend when the last http redirect is completed, that is when the last byte of the http response has been received. if there is no redirect, or if one of the redirects is not of the same origin, the value returned is 0. connectend when the connection is opened network. if the transport layer reports an error and the connection establishment is started again, the last connection establishment end time is given. if a persistent connection is used, the value will be the same as performancetiming.fetchstart. a connection is considered as opened when all secure connection handshake, or socks authentication, is terminated. connectstart when the request to open a connection is sent to the network. if the transport layer reports an error a...
...shment end time is given. if a persistent connection is used, the value will be the same as performancetiming.fetchstart. a connection is considered as opened when all secure connection handshake, or socks authentication, is terminated. connectstart when the request to open a connection is sent to the network. if the transport layer reports an error and the connection establishment is started again, the last connection establishment start time is given. if a persistent connection is used, the value will be the same as performancetiming.fetchstart. domainlookupend when the domain lookup is finished. if a persistent connection is used, or the information is stored in a cache or a local resource, the value will be the same as performancetiming.fetchstart. domainlooku...
...sponding to the new request. responsestart when the browser received the first byte of the response, from the server from a cache, or from a local resource. responseend when the browser received the last byte of the response, or when the connection is closed if this happened first, from the server, the cache, or from a local resource. domloading when the parser started its work, that is when its document.readystate changes to 'loading' and the corresponding readystatechange event is thrown. unloadeventstart when the unload> event has been thrown, indicating the time at which the previous document in the window began to unload. if there is no previous document, or if the previous document or one of the needed redirects is not of the same origin, the ...

remote/parent - Archive of obsolete content
as a simple list of all running processes: const { processes } = require("sdk/remote/parent"); for (var p of processes) { console.log(p.isremote); } each element in this list is a process. there will always be at least one process in this list, the main process. a multiprocess application will usually have at least one more process. listen to attach and detach events to hear as processes are started and stopped: const { processes } = require("sdk/remote/parent"); processes.on("attach", function(process) { console.log("new process is remote: " + process.isremote); }); methods forevery(callback) calls the callback for every existing process and any new processes created in the future. this is a shortcut for enumerating existing processes and then listening for attach events. properties...
...mote: " + process.isremote); }); methods forevery(callback) calls the callback for every existing process and any new processes created in the future. this is a shortcut for enumerating existing processes and then listening for attach events. properties port an event emitter that sends messages to and receives messages from all processes. events attach event emitted when a new process is started. the event handler is called with a process representing the new process. detach event emitted when a process disconnects from the application. it may have been closed normally or it may have crashed. the event handler is called with the process that detached. frames a list of the content frames across all processes. each element in this list is a frame. listen to attach and detach events to ...

Tutorials - Archive of obsolete content
create user interfaces add a toolbar button attach a button to the firefox add-on toolbar. add a menu item to firefox add items to firefox's main menus. display a popup display a popup dialog implemented with html and javascript. ...
... create user interfaces add a toolbar button attach a button to the firefox add-on toolbar. add a menu item to firefox add items to firefox's main menus. display a popup display a popup dialog implemented with html and javascript. ...

Examples and demos from articles - Archive of obsolete content
eation of complete rich-text editors in web pages. [article] typewriter effect [html] the following example will delete and re-type simulating a typewriter all the text content of the nodelist which match a specified group of selectors. [article] fade in/out [html] sometimes a page uses dozens and dozens of animations. in such a condition is difficult and unnatural to keep track of all events started and then to stop them when appropriate through the cleartimeout() function. a possible approach to solve this problem is to nest all the informations needed by each animation to start, stop, etc. etc. in different objects and then to create a constructor for such class of objects in order to standardize and simplify the instantiation of them. here is a possible and minimalist example of such abs...
...growing <textarea> this example shows how to make a textarea really autogrowing during a typing. insert some custom text in a <textarea> this example shows how to insert some html tags or smiles or any custom text in a textarea. using setinterval within animations sometimes a page uses dozens and dozens of animations. in such a condition is difficult and unnatural to keep track of all events started and then to stop them when appropriate through the cleartimeout() function. a possible approach to solve this problem is to nest all the informations needed by each animation to start, stop, etc. etc. in different objects and then to create a constructor for such class of objects in order to standardize and simplify the instantiation of them. convert relative paths to absolute this example show...

Communication between HTML and your extension - Archive of obsolete content
but i still would rather have the client less responsible for pinging the extension to "look" for what is on the page. what i tried my first attempt was trying to create an xbl component. from what i gather, xbl components are more designed for creating custom components and their specific component behavior rather than trying to impose some kind of messaging on existing components. next i started investigating events, there are only a handful of events and the w3c documentation is pretty complete. the basic problem with the event model is probably due to what i was trying to do. in my html i have an input element in a form. i set the onblur action to a little javascript function that performed a standard ajax request to get a result. the onreadystatechange was set to another little javas...
...rt i tried setting a timeout using settimeout when i got the event in the extension to wait a few milliseconds before looking for the desired element. this was non-optimal and the timeout wasn't very reliable for some reason. sometimes i would get the timeout, sometimes i would'nt. what i ended up with some helpful information on the irc channel led me to believe that a custom event might help. i started to research custom events on google but everything that i found was far too complicated for what i wanted to achieve. eventually i put the creation of the custom event into the statechanged function that was handling the receipt of the ajax request. after the html component was update with the result of the ajax request, i created and dispatched the event like this: var event = document.crea...

Content states and the style system - Archive of obsolete content
whether the content state change something could affect any styles. this is done by walking the list of all css2.1 simple selectors in all style sheets applied to the page that have a state-dependent pseudo-class as part of the selector. this list is created during the parsing of the stylesheets involved. ...
...pendent pseudo-class as part of the selector. this list is created during the parsing of the stylesheets involved. for each selector in this list we check whether it might have stopped matching the node or started matching it. if that has happened, then the style could depend on the state that changed and we have to reresolve style. the way we determine whether the selector might have stopped or started matching the node is by just checking whether it matches with the caveat that all the state-dependent pseudo-classes corresponding to the states that changed must be treated as matching (whether they actually do and whether they're negated or not). this is needed to catch both selectors that now match and selectors that no longer match. for example, say we have the selectors: a:hover a:not(...

Introducing the Audio API extension - Archive of obsolete content
's also possible to auto-detect the minimal duration of the pre-buffer, such that the sound is played without interruptions, and lag between writing and playback is minimal. to do this start writing the data in small portions and wait for the value returned by mozcurrentsampleoffset() to be greater than 0. ...
...g and playback is minimal. to do this start writing the data in small portions and wait for the value returned by mozcurrentsampleoffset() to be greater than 0. var prebuffersize = samplerate * 0.020; // initial buffer is 20 ms var autolatency = true, started = new date().valueof(); ... // auto latency detection if (autolatency) { prebuffersize = math.floor(samplerate * (new date().valueof() - started) / 1000); if (audio.mozcurrentsampleoffset()) { // play position moved? autolatency = false; } processing an audio stream since the mozaudioavailable event and the mozwriteaudio() method both use float32array values, it is possible to take the output of one audio stream and pass it directly (or process first and then pass) to a second. the first audio stream needs to be muted so that onl...

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

Makefile.mozextension.2 - Archive of obsolete content
the same goes for this slight makefile rework here. ...
..., all of the < > will be quoted as & lt ; so again it will be corrupt :( therefore, here is a direct link to this makefile: makefile.mozextension2 ## file: makefile.mozextension2 ## based on http://kb.mozillazine.org/makefile_for_packaging_an_extension ## "this makefile.mozextention is for the test extension" ## the original makefile.mozextention reconstructs http://kb.mozillazine.org/getting_started_with_extension_development # call with: # make -f makefile.mozextension2 make_structure ## (without args for 'all') # note: @echo silent; without @ the command is written in stdout project=test project_name=testworld #~ project_id={xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx} project_id=test@testworld.ext project_version=1.0 project_desc="a $(project_name) project with advanced features" project_a...

Monitoring downloads - Archive of obsolete content
introduces new api that allows any number of listeners to observe downloads. this article demonstrates how to monitor downloads in firefox 3, using the download manager. as a nice bonus, it also demonstrates how to use the storage api to issue sqlite commands on a database. the result is a window you can open by choosing "download log" in the tools menu, which lists all downloads that have been started since you installed the extension. in the list is the name of the file, the start and end times of the download, the download speed, and the status of the download. a tooltip is included that displays the full source url of the file. download the full sample. setting up when the extension loads, it will do some housekeeping chores. in particular, it needs to get an instance of the download man...
...s run, our ondownloadstatechange() method is called whenever a download's state changes. this is part of the nsidownloadprogresslistener interface. that code looks like this: ondownloadstatechange: function(astate, adownload) { var statement; switch(adownload.state) { case components.interfaces.nsidownloadmanager.download_downloading: // add a new row for the download being started; each row includes the // source uri, size, and start time. the end time and download speed // are both set to 0 at first, since we don't know those yet. // status is the same status value that came from the download manager. var dbconn = this.storageservice.opendatabase(this.dbfile); statement = dbconn.createstatement("replace into items values " + ...

[Deprecated] The Mozilla build VM - Archive of obsolete content
ild environment setup process, it's much simpler and easier to get set up and stay up to date by starting with building firefox instead. other links of interest may include: developer guide (documentation about developing on and for mozilla projects). mentored bugs have a mentor who commits to helping you every step of the way. generally, there should be enough information in the bug to get started. whenever you need help, contact the mentor via matrix, in the bug itself, or by email. when you've completed the bug, they will help you get your code into the tree. "good" first bugs may be a little stale, but at some point in their lives we considered that they would be a good first step for newcomers to mozilla. we are in the process of migrating these bugs to mentored bugs, but more recent ...
...hey will help you get your code into the tree. "good" first bugs may be a little stale, but at some point in their lives we considered that they would be a good first step for newcomers to mozilla. we are in the process of migrating these bugs to mentored bugs, but more recent "good first bugs" may be good starting points if there are no appropriate mentored bugs. you can also ask your getting-started questions in the introduction chat room on matrix, and any firefox development questions in the developers room. ...

XULRunner - Archive of obsolete content
xulrunner is a mozilla 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. ...
...ps 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: unstable-trunk documentation getting started with xulrunner short tutorial on building desktop applications with xulrunner. xul tutorial once you have a working xulrunner application, use the xul tutorial to expand it into a fantastic xul application. xulrunner tips a collection of tips for working with xulrunner. deploying xulrunner an introduction on how to package your application with xulrunner. x...

Archived Mozilla and build documentation - Archive of obsolete content
a extension that 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 everythi...
...ps users create custom generators for their favorite sites -- obtain a reference to the nsimicrosummaryservice interface implemented by the nsimicrosummaryservice component, then call its installgenerator() method, passing it an xml document containing the generator. migrate apps from internet explorer to mozilla when netscape started the mozilla browser, it made the conscious decision to support w3c standards. as a result, mozilla is not fully backwards-compatible with netscape navigator 4.x and microsoft internet explorer legacy code; for example, mozilla does not support <layer> as i will discuss later. browsers, like internet explorer 4, that were built before the conception of w3c standards inherited many quirks.

GetObject - Archive of obsolete content
et explorer 10 standards mode, internet explorer 11 standards mode, and windows store apps or later. use the getobject function to access an automation object from a file. assign the object returned by getobject to the object variable. for example: var cadobject; cadobject = getobject("c:\\cad\\schema.cad"); when this code is executed, the application associated with the specified pathname is started, and the object in the specified file is activated. if pathname is a zero-length string (""), getobject returns a new object instance of the specified type. if the pathnameargument is omitted, getobject returns a currently active object of the specified type. if no object of the specified type exists, an error occurs. some applications allow you to activate part of a file. to do so, add an excla...
...methods of the new object using the object variable myobject. for example: myobject.line(9, 90); myobject.inserttext(9, 100, "hello, world."); myobject.saveas("c:\\drawings\\sample.drw"); note: use the getobject function when there is a current instance of the object, or if you want to create the object with a file already loaded. if there is no current instance, and you don't want the object started with a file loaded, use the activexobject object. if an object has registered itself as a single-instance object, only one instance of the object is created, no matter how many times activexobject is executed. with a single-instance object, getobject always returns the same instance when called with the zero-length string ("") syntax, and it causes an error if the pathname argument is omitted. ...

Building Mozilla XForms - Archive of obsolete content
during cvs times, the mozilla repository contained both extensions. since the switch to mercurial, the extensions live in separate repositories. before you can start building the xforms extension, you should check your mozilla build environment by doing a regular firefox build. have a look at the build instructions for detailed information for your platform. ...
...up: get the source code if you want to build xforms for firefox up to 3.0, you already have the required source code, it's part of your cvs checkout. skip to the next section. starting with firefox 3.5, you need to do two more mercurial checkouts: cd extensions hg clone http://hg.mozilla.org/xforms hg clone http://hg.mozilla.org/schema-validation that's it, you now have everything you need to get started. configure your build: the .mozconfig file mozilla uses a file called .mozconfig in your home directory to store the build configuration. for xforms, you will need to add the following line: ac_add_options --enable-extensions="default,xforms" # if you're using a mozilla source before 2010-11-06 (e.g. an old firefox 3.6 release) use this instead (see bug 601570 for details): ac_add_options --enab...

XForms Custom Controls - Archive of obsolete content
ou are only comfortable with a couple of these technologies, we hope that the possibilities outlined below will inspire you to learn more where you need to. implementation status the framework we use in the mozilla xforms processor is very much a "work in progress". please keep in mind that just about everything we mention here may change to some degree as we continue to work on it. work has just started in the w3c xforms working group to investigate the custom control issue, so eventually (hopefully?) there will be an "official" and common way to customize your form's user interface across all xforms processors. why do you need this you will probably find that your need for customization will fall into one of the following categories: custom presentation - xforms controls as rendered by the moz...
...implemented using xbl and the bindings are applied to the individual xforms control tags via css. so you can always refer to our source code to get some great examples of how xforms controls can be written. this will also allow you to be up to date with our current approaches (often the result of hard-learned lessons) and that will hopefully help you to more easily write your own controls. to get started, you really only need to know the language where you'd like to use xforms (like xhtml or xul), some xbl and javascript, and the xpcom interfaces we are exposing for your use. details interfaces this section describes interfaces you need to know. there are two main groups of interfaces -> callback interfaces that must be implemented by the custom controls and the interfaces that custom controls ca...

Audio for Web games - Game development
top and mobile browsers. there is further information about it here from the google developers site. it is worth noting that autoplay with sound is allowed if: the user has interacted with the domain. on mobile the user has added the site to their home screen. many browsers will simply ignore any requests made by your game to automatically play audio; instead playback for audio needs to be started by a user-initiated event, such as a click or tap. this means you will have to structure your audio playback to take account of that. this is usually mitigated against by loading the audio in advance and priming it on a user-initiated event. for more passive audio auto play, for example background music that starts as soon as a game loads, one trick is to detect any user initiated event and star...
...er async function to set up the sample — we can combine the two async functions in a nice promise pattern to perform further actions when each file is loaded and buffered: async function loadfile(filepath) { const track = await getfile(filepath); return track; } let's also create a playtrack() function, which we can call once a file has been fetched. we need an offset here, so if we have started one file playing, we have a record of how far through to start another file. start() takes two optional parameters. the first is when to commence playback and the second is where, which is our offset. let offset = 0; function playtrack(audiobuffer) { const tracksource = audioctx.createbuffersource(); tracksource.buffer = audiobuffer; tracksource.connect(audioctx.destination) if (offse...

Game development
ill find many useful tutorials and technique articles in the main menu on the left, so feel free to explore. we've also included a reference section so you can easily find information about all the most common apis used in game development. note: creating games on the web draws on a number of core web technologies such as html, css, and javascript. the learning area is a good place to go to get started with the basics. port native games to the web if you are a native developer (for example writing games in c++), and you 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.j...
...o the web if you are a native developer (for example writing games in c++), and you 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! ...

WAI-ARIA basics - Learn web development
nderstanding of html, css, and javascript, an understanding of the previous articles in the course. objective: to gain familiarity with wai-aria, and how it can be used to provide useful additional semantics to enhance accessibility where required. what is wai-aria? let's start by looking at what wai-aria is, and what it can do for us. a whole new set of problems as web apps started to get more complex and dynamic, a new set of accessibility features and problems started to appear. for example, html5 introduced a number of semantic elements to define common page features (<nav>, <footer>, etc.) before these were available, developers would simply use <div>s with ids or classes, e.g. <div class="nav">, but these were problematic, as there was no easy way to easily find a spe...
... page feature such as the main navigation programmatically. the initial solution was to add one or more hidden links at the top of the page to link to the navigation (or whatever else), for example: <a href="#hidden" class="hidden">skip to navigation</a> but this is still not very precise, and can only be used when the screenreader is reading from the top of the page. as another example, apps started to feature complex controls like date pickers for choosing dates, sliders for choosing values, etc. html5 provides special input types to render such controls: <input type="date"> <input type="range"> these are not well-supported across browsers, and it is also difficult to style them, making them not very useful for integrating with website designs. as a result, developers quite often rely on ...

Advanced styling effects - Learn web development
like text shadows, box shadows are supported pretty well across browsers, including ie9+ and edge. users of older ie versions might just have to cope with no shadows, so just test your designs to make sure your content is legible without them. you can find the examples in this section at box-shadow.html (see the source code too). a simple box shadow let's look at a simple example to get things started. first, some html: <article class="simple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> now the css: p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .simple { box-shadow: 5px 5px 5px rgba(0,0,0...
... it is popular, and used fairly widely by developers. when used in this context, both of the properties would require a -webkit- vendor prefix, even for non-webkit/chrome-based browsers: .text-clip { -webkit-background-clip: text; -webkit-text-fill-color: transparent; } so why have other browsers implemented a -webkit- prefix? mainly for browser compatibility — so many web developers have started implementing websites with -webkit- prefixes that it started to look like the other browsers were broken, whereas in actual fact they were following the standards. so they were forced to implement a few such features. this highlights the danger of using non-standard and/or prefixed css features in your work — not only do they cause browser compatibility issues, but they are also subject to chan...

Legacy layout methods - Learn web development
percentage. 60 / 960 = 0.0625 we then move the decimal point 2 places giving us a percentage of 6.25%. so, in our css we can replace the 60 pixel column width with 6.25%. we need to do the same with our gutter width: 20 / 960 = 0.02083333333 so we need to replace the 20 pixel margin-left on our .col rule and the 20 pixel padding-right on .wrapper with 2.08333333%. updating our grid to get started in this section, make a new copy of your previous example page, or make a local copy of our simple-grid-finished.html code to use as a starting point. update the second css rule (with the .wrapper selector) as follows: body { width: 90%; max-width: 980px; margin: 0 auto; } .wrapper { padding-right: 2.08333333%; } not only have we given it a percentage width, we have also added a max-w...
...t of options to choose from. popular frameworks 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=...

Responsive design - Learn web development
a horizontal scrollbar on screens smaller than the site width (as seen below), and lots of white space at the edges of the design on larger screens. note: see this simple fixed-width layout: example, source code. again, observe the result as you change the browser window size. note: the screenshots above are taken using the responsive design mode in firefox devtools. as the mobile web started to become a reality with the first feature phones, companies who wished to embrace mobile would generally create a special mobile version of their site, with a different url (often something like m.example.com, or example.mobi). this meant that two separate versions of the site had to be developed and kept up-to-date. in addition, these mobile sites often offered a very cut down experience. as m...
...ale=1"> this meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended. why is this needed? because mobile browsers tend to lie about their viewport width. this meta tag exists because when the original iphone launched and people started to view websites on a small phone screen, most sites were not mobile optimized. the mobile browser would, therefore, set the viewport width to 960 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. other mobile browsers (e.g. on google android) did the same thing. users could zoom in and pan around the website to view the bits they were inter...

CSS layout - Learn web development
e necessary prerequisites so we can now dive deep into css layout, looking at different display settings, modern layout tools like flexbox, css grid, and positioning, and some of the legacy techniques you might still want to know about. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should already: have basic familiarity with html, as discussed in the introduction to html module. be comfortable with css fundamentals, as discussed in introduction to css. understand how to style boxes. note: if you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out ...
... this article explains all the fundamentals. after studying this guide you can test your flexbox skills to check your understanding before moving on. grids css grid layout is a two-dimensional layout system for the web. it lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. this article will give you all you need to know to get started with page layout, then test your grid skills before moving on. floats originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages. with the advent of flexbox and grid it has now returned to its original purpose, as this article explains. positioning positioning allows you to take elements ...

CSS first steps - Learn web development
add animations and other decorative features. this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to html. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should have: basic familiarity with using computers, and using the web passively (i.e. looking at it, consuming the content.) a basic work environment set up as detailed in installing basic software, and an understanding of how to create and manage files, as detailed in dealing with files. basic familiarity with html, as discussed in the intr...
...tains the following articles, which will take you through all the basic theory of css, and provide opportunities for you to test out some skills. what is css? css (cascading style sheets) allows you to create great-looking web pages, but how does it work under the hood? this article explains what css is, with a simple syntax example, and also covers some key terms about the language. getting started with css in this article we will take a simple html document and apply css to it, learning some practical things about the language along the way. how css is structured now that you have an idea about what css is and the basics of using it, it is time to look a little deeper into the structure of the language itself. we have already met many of the concepts discussed here; you can return to th...

Learn to style HTML using CSS - Learn web development
emantics of your content, css is used to style it and lay it out. for example, you can use css to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites you should learn the basics of html before attempting any css. we recommend that you work through our introduction to html module first. in that module, you will learn about: css, starting with the introduction to css module more advanced html modules javascript, and how to use it to add dynamic functionality to web pages once you understand the fundamentals of html, we re...
...arn css without knowing html. before starting this topic, you should also be familiar with using computers and using the web passively (i.e., just looking at it, consuming the content). you should have a basic work environment set up as detailed in installing basic software and understand how to create and manage files, as detailed in dealing with files — both of which are parts of our getting started with the web complete beginner's module. it is recommended that you work through getting started with the web before proceeding with this topic. however, doing so isn't absolutely necessary as much of what is covered in the css basics article is also covered in our css first steps module, albeit in a lot more detail. modules this topic contains the following modules, in a suggested order for w...

Front-end web developer - Learn web development
can skip ahead to the css section. prerequisites you don't need any previous knowledge to start this course. all you need is a computer that can run modern web browsers, an internet connection, and a willingness to learn. if you are not sure if front-end web development is for you, and/or you want a gentle introduction before starting a longer and more complete course, work through our getting started with the web module first. getting help we have tried to make learning front-end web development as comfortable as possible, but you will probably still get stuck because you don't understand something, or some code is just not working. don't panic. we all get stuck, whether we are beginner or professional web developers. the learning and getting help article provides you with a series of tips...
...ll probably still get stuck because you don't understand something, or some code is just not working. don't panic. we all get stuck, whether we are beginner or professional web developers. the learning and getting help article provides you with a series of tips for looking up information and helping yourself. if you are still stuck, feel free to post a question on our discourse forum. let's get started. good luck! the learning pathway getting started time to complete: 1.5–2 hours prerequisites nothing except basic computer literacy. how will i know i'm ready to move on? there are no assessments in this part of the course. but make sure you don't skip. it is important to get you set up and ready to do work for exercises later on in the course. guides installing basic software — ba...

CSS basics - Learn web development
we'll answer questions like: how do i make text red? how do i make content display at a certain location in the (webpage) layout? how do i decorate my webpage with background images and colors? what is css? like html, css is not a programming language. it's not a markup language either. css is a style sheet language. css is what you use to selectively style html elements. for example, this css selects paragraph text, setting the color to red: p { color: red; } let's try it out! using a text editor, paste the three lines of css (above) into a new file. ...
... dealing with files html basics css basics javascript basics publishing your website how the web works ...

Dealing with files - Learn web development
when you're building a website, you need to assemble these files into a sensible structure on your local computer, make sure they can talk to one another, and get all your content looking right before you eventually upload them to a server. dealing with files discusses some issues you should be aware of so you can set up a sensible file structure for your website. where should your website live on your computer? when you are working on a website locally on your computer, you should keep all the related files in a single folder that mirrors the published website's file structure on the server. ...
...t all you need to know. note: the windows file system tends to use backslashes, not forward slashes, e.g. c:\windows. ...

HTML basics - Learn web development
for example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. as the title suggests, this article will give you a basic understanding of html and its functions. so what is html? html is not a programming language; it is a markup language that defines the structure of your content. html consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. ...
... dealing with files html basics css basics javascript basics publishing your website how the web works ...

JavaScript basics - Learn web development
what is javascript? javascript ("js" for short) is a full-fledged dynamic programming language that can add interactivity to a website. it was invented by brendan eich (co-founder of the mozilla project), the mozilla foundation, and the mozilla corporation. javascript is versatile and beginner-friendly. ...
... what is javascript? javascript ("js" for short) is a full-fledged dynamic programming language that can add interactivity to a website. it was invented by brendan eich (co-founder of the mozilla project), the mozilla foundation, and the mozilla corporation. javascript is versatile and beginner-friendly. ...

Publishing your website - Learn web development
this article explains how to get your simple sample code online with little effort. what are the options? publishing a website is a complex topic because there are many ways to go about it. this article doesn't attempt to document all the possible methods. instead, it explains the advantages and disadvantages of three approaches that are practical for beginners. then it steps through one method that can work right away for many readers. ...
...earn more, see github pages help. ...

The web and web standards - Learn web development
happened, but i did promise you a brief summary. one last significant data point to share is that in 1994, timbl founded the world wide web consortium (w3c), an organization that brings together representatives from many different technology companies to work together on the creation of web technology specifications. after that other technologies followed such as css and javascript, and the web started to look more like the web we know today. web standards web standards are the technologies we use to build web sites. these standards exist as long technical documents called specifications, which detail exactly how the technology should work. these documents are not very useful for learning how to use the technologies they describe (this is why we have sites like mdn web docs), but instead are ...
...alled upon to implement. it'll take you a few months to really start to get into it, and then you'll need to keep learning so that your knowledge stays up-to-date with all the new tools and features that appear on the web platform, and keep practicing and refining your craft. the only constant is change. does this sound hard? don't worry — we aim to give you everything you need to know to get started, and things will get easier. once you embrace the constant change and uncertainty of the web, you'll start to enjoy yourself. as a part of the web community, you'll have an entire web of contacts and useful material to help you, and you'll start to enjoy the creative possibilities it brings. you're a digital creative now. enjoy the experience, and the potential for earning a living. overview of...

What will your website look like? - Learn web development
what should your website actually do? a website can do basically anything, but, for your first try, you should keep things simple. we'll start by creating a simple webpage with a heading, an image, and a few paragraphs. ...
...so use the controls on the right to further filter the results. click the "plus" (add to) icon next to the font you want. ...

Advanced text formatting - Learn web development
t fundamentals article. the elements described in this article are less known, but still useful to know about (and this is still not a complete list by any means). here you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more. prerequisites: basic html familiarity, as covered in getting started with html. html text formatting, as covered in html text fundamentals. objective: to learn how to use lesser-known html elements to mark up advanced semantic features. description lists in html text fundamentals, we walked through how to mark up basic lists in html, but we didn't mention the third type of list you'll occasionally come across — description lists. the purpose ...
... in the wild, or at least might find interesting. ...

Debugging HTML - Learn web development
previous overview: introduction to html next writing html is fine, but what if something goes wrong, and you can't work out where the error in the code is? this article will introduce you to some tools that can help you find and fix errors in html. prerequisites: html familiarity, as covered in, for example, getting started with html, html text fundamentals, and creating hyperlinks. objective: learn the basics of using debugging tools to find problems in html. debugging isn't scary when writing code of some kind, everything is usually fine, until that dreaded moment when an error occurs — you've done something wrong, so your code doesn't work — either not at all, or not quite how you wanted it to. for example, the following shows an error reported wh...
...ml, which should give you some useful skills to count on when you start to debug css, javascript, and other types of code later on in your career. ...

HTML text fundamentals - Learn web development
verview: introduction to html next one of html's main jobs is to give text structure and meaning (also known as semantics) so that a browser can display it correctly. this article explains the way html can be used to structure a page of text by adding headings and paragraphs, emphasizing words, creating lists, and more. prerequisites: basic html familiarity, as covered in getting started with html. objective: learn how to mark up a basic page of text to give it structure and meaning—including paragraphs, headings, lists, emphasis, and quotations. the basics: headings and paragraphs most structured text consists of headings and paragraphs, whether you are reading a story, a newspaper, a college textbook, a magazine, etc. structured content makes the readin...
...most important elements in this area. there are a lot more semantic elements to cover in this area, and we'll look at a lot more in our advanced text formatting article, later on in the course. ...

Marking up a letter - Learn web development
html next we all learn to write a letter sooner or later; it is also a useful example to test our text formatting skills. in this assignment, you'll have a letter to mark up as a test for your html text formatting skills, as well as hyperlinks and proper use of the html <head> element. prerequisites: before attempting this assessment you should have already worked through getting started with html, what's in the head? metadata in html, html text fundamentals, creating hyperlinks, and advanced text formatting. objective: test basic and advanced html text formatting, use of hyperlinks, and use of html <head>. starting point to begin, get the raw text you need to mark up, and the the css to style the html. create a new .html file using your text editor or use an...
...aluated or need help with, in an online shareable editor (as mentioned in step 1 above). this is a good habit to develop. it's very hard to help someone with a coding problem without seeing their code. ...

Structuring a page of content - Learn web development
...
...e you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). this is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code. ...

Adding vector graphics to the Web - Learn web development
svg can get complicated very quickly, meaning that file sizes can grow; complex svgs can also take significant processing time in the browser. svg can be harder to create than raster images, depending on what kind of image you are trying to create. svg is not supported in older browsers, so may not be suitable if you need to support older versions of internet explorer with your web site (svg started being supported as of ie9.) raster graphics are arguably better for complex precision images such as photos, for the reasons described above. note: in inkscape, save your files as plain svg to save space. also, please refer to this article describing how to prepare svgs for the web. adding svg to your pages in this section we'll go through the different ways in which you can add svg vector...
... iframes altogether. moreover, unless the svg and your current webpage have the same origin, you cannot use javascript on your main webpage to manipulate the svg. active learning: playing with svg in this active learning section we'd like you to simply have a go at playing with some svg for fun. in the input section below you'll see that we've already provided you with some samples to get you started. you can also go to the svg element reference, find out more details about other toys you can use in svg, and try those out too. this section is all about practising your research skills, and having some fun. if you get stuck and can't get your code working, you can always reset it using the reset button. playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div...

From object to iframe — other embedding technologies - Learn web development
<embed> and <object> elements. <iframe>s are for embedding other web pages, and the other two allow you to embed pdfs, svg, and even flash — a technology that is on the way out, but which you'll still see semi-regularly. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html) and the previous articles in this module. objective: to learn how to embed items into web pages using <object>, <embed>, and <iframe>, like flash movies and other webpages. a short history of embedding a long time ago on the web, it was popular to use frames to create websites — small parts of a website stored in individual html pages. these were embedded in a mas...
...the website pages to disallow them from being embedded inside <iframe>s (see configure csp directives, below.) this makes sense — an entire mdn page doesn't really make sense to be embedded in other pages unless you want to do something like embed them on your site and claim them as your own — or attempt to steal data via clickjacking, which are both really bad things to do. plus if everybody started to do this, all the additional bandwidth would start to cost mozilla a lot of money. only embed when necessary sometimes it makes sense to embed third-party content — like youtube videos and maps — but you can save yourself a lot of headaches if you only embed third-party content when completely necessary. a good rule of thumb for web security is "you can never be too cautious. if you made ...

Video and audio content - Learn web development
t adding video and audio players to your html documents! in this article we'll look at doing just that with the <video> and <audio> elements; we'll then finish off by looking at how to add captions/subtitles to your videos. ...
...knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html) and images in html. objective: to learn how to embed video and audio content into a webpage, and add captions/subtitles to video. video and audio on the web web developers have wanted to use video and audio on the web for a long time, ever since the early 2000s when we started to have bandwidth fast enough to support any kind of video (video files are much larger than text or even images.) in the early days, native web technologies such as html didn't have the ability to embed video and audio on the web, so proprietary (or plugin-based) technologies like flash (and later, silverlight) became popular for handling such content. this kind of technology worked ok, but it h...

HTML Tables - Learn web development
web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team. this module takes you through all you need to know about structuring tabular data using html. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should already have covered the basics of html — see introduction to html. note: if you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch. guides this module contains the following articles...
... you should already have covered the basics of html — see introduction to html. note: if you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch. guides this module contains the following articles: html table basics this article gets you started with html tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes. html table advanced features and accessibility this module looks at some more advanced features of html tables — such as captions/summaries and grouping your rows into table head, body and footer sec...

Structuring the web with HTML - Learn web development
ture of a webpage. html is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this topic, you should have at least basic familiarity with using computers and using the web passively (i.e. just looking at it, consuming the content). you should have a basic work environment set up as detailed in installing basic software, and understand how to create and manage files, as detailed in dealing with files — both are parts of our getting star...
...th using computers and using the web passively (i.e. just looking at it, consuming the content). you should have a basic work environment set up as detailed in installing basic software, and understand how to create and manage files, as detailed in dealing with files — both are parts of our getting started with the web complete beginner's module. it is recommended that you work through getting started with the web before attempting this topic, however, it isn't absolutely necessary; much of what is covered in the html basics article is also covered in our introduction to html module, albeit in a lot more detail. after learning html, you can then move on to learning about more advanced topics such as: css, and how to use it to style html (for example alter your text size and fonts used, add...

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
d down, the browser might try to run the animation faster than 60 fps, and it wouldn't make any difference to the animation's smoothness, anyway. as we said before, 60hz is the standard refresh rate. including a timestamp the actual callback passed to the requestanimationframe() function can be given a parameter, too: a timestamp value, that represents the time since the requestanimationframe() started running. this is useful as it allows you to run things at specific times and at a constant pace, regardless of how fast or slow your device might be. the general pattern you'd use looks something like this: let starttime = null; function draw(timestamp) { if (!starttime) { starttime = timestamp; } currenttime = timestamp - starttime; // do something based on current time ...
... pressed, set isover to true. only if isover is true, remove the keydown event listener using removeeventlistener() so that once the winning press has happened, no more keyboard input is possible to mess up the final game result. you also use settimeout() to call reset() after 5 seconds — as explained earlier, this function resets the game back to its original state so that a new game can be started. that's it—you're all done! note: if you get stuck, check out our version of the reaction game (see the source code also). conclusion so that's it — all the essentials of async loops and intervals covered in one article. you'll find these methods useful in a lot of situations, but take care not to overuse them! because they still run on the main thread, heavy and intensive callbac...

Client-side storage - Learn web development
complex related data, the types of which aren't limited to simple values like strings or numbers. you can store videos, images, and pretty much anything else in an indexeddb instance. however, this does come at a cost: indexeddb is much more complex to use than the web storage api. in this section, we'll really only scratch the surface of what it is capable of, but we will give you enough to get started. working through a note storage example here we'll run you through an example that allows you to store notes in your browser and view and delete them whenever you like, getting you to build it up for yourself and explaining the most fundamental parts of idb as we go along. the app looks something like this: each note has a title and some body text, each individually editable. the javascript...
...store notes in your browser and view and delete them whenever you like, getting you to build it up for yourself and explaining the most fundamental parts of idb as we go along. the app looks something like this: each note has a title and some body text, each individually editable. the javascript code we'll go through below has detailed comments to help you understand what's going on. getting started first of all, make local copies of our index.html, style.css, and index-start.js files into a new directory on your local machine. have a look at the files. you'll see that the html is pretty simple: a web site with a header and footer, as well as a main content area that contains a place to display notes, and a form for entering new notes into the database. the css provides some simple styli...

Third-party APIs - Learn web development
getting the example to work, check your code against our finished version — see expanded-example.html (also see it running live here). what about google maps? google maps is arguably the most popular maps api, so why didn't we use it for our maps example? we did create an example to show how to use it, but in the end we went with mapquest for a couple of reasons: it is much easier to get started with. for google apis in general, you need to create a google account and log into the google cloud platform console to create api keys, etc., and the process is fairly complex. for the google maps api in particular, you need to provide a credit card for billing purposes (although basic usage is free), which we didn't think was acceptable for a basic tutorial. we wanted to show that there are ot...
... out where the documentation is, so you can find out what features the api has, how you use them, etc. the new york times api documentation is at https://developer.nytimes.com/. get a developer key most apis require you to use some kind of developer key, for reasons of security and accountability. to sign up for an nytimes api key, following the instructions at https://developer.nytimes.com/get-started. let's request a key for the article search api — create a new app, selecting this as the api you want to use (fill in a name and description, toggle the switch under the "article search api" to the on position, and then click "create"). get the api key from the resulting page. now, to start the example off, make copies of nytimes_start.html and nytimes.css in a new directory ...

Adding features to our bouncing balls demo - Learn web development
e the bouncing balls demo from the previous article as a starting point, and add some new and interesting features to it. prerequisites: before attempting this assessment you should have already worked through all the articles in this module. objective: to test comprehension of javascript objects and object-oriented constructs starting point to get this assessment started, make a local copy of index-finished.html, style.css, and main-finished.js from our last article in a new directory in your local computer. alternatively, you could use a site like jsbin or glitch to do your assessment. you could paste the html, css and javascript into one of these online editors. if the online editor you are using doesn't have separate javascript/css panels, feel free to put th...
...ste the html, css and javascript into one of these online editors. if the online editor you are using doesn't have separate javascript/css panels, feel free to put them inline <script>/<style> elements inside the html page. note: if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. hints and tips a couple of pointers before you get started. this assessment is quite challenging. read the whole assessment before you start coding, and take each step slowly and carefully. it might be a good idea to save a separate copy of the demo after you get each stage working, so you can refer back to it if you find yourself in trouble later on. project brief our bouncy ball demo is fun, but now we want to make it a little bit more interacti...

Object-oriented JavaScript for beginners - Learn web development
name: 'sarah', greeting: function() { alert('hi! i\'m ' + this.name + '.'); } } note that when we are calling our constructor function, we are defining greeting() every time, which isn't ideal. to avoid this, we can define functions on the prototype instead, which we will look at later. creating our finished constructor the example we looked at above was only a simple example to get us started. let's now get on and create our final person() constructor function. remove the code you inserted so far, and add in this replacement constructor — this is exactly the same as the simple example in principle, with just a bit more complexity: function person(first, last, age, gender, interests) { this.name = { first : first, last : last }; this.age = age; this.gender = ge...
... see test your skills: object-oriented javascript. note that this set of tests relies on some of the knowledge taught in the next two articles, so you might want to read them first before you try the tests. summary this article has provided a simplified view of object-oriented theory — this isn't the whole story, but it gives you an idea of what we are dealing with here. in addition, we have started to look at different ways of generating object instances. in the next article, we'll explore javascript object prototypes. previous overview: objects next in this module object basics object-oriented javascript for beginners object prototypes inheritance in javascript working with json data object building practice adding features to our bouncing balls demo ...

JavaScript — Dynamic client-side scripting - Learn web development
than just sit there and display static information for you to look at—displaying timely content updates, interactive maps, animated 2d/3d graphics, scrolling video jukeboxes, or more—you can bet that javascript is probably involved. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. ...
...l the essential information you need to work towards your goal. get started prerequisites javascript is arguably more difficult to learn than related technologies such as html and css. before attempting to learn javascript, you are strongly advised to get familiar with at least these two technologies first, and perhaps others as well. start by working through the following modules: getting started with the web introduction to html introduction to css having previous experience with other programming languages might also help. after getting familiar with the basics of javascript, you should be in a position to learn about more advanced topics, for example: javascript in depth, as taught in our javascript guide web apis modules this topic contains the following modules, in a sugg...

Git and GitHub - Learn web development
ame time. you need to have some kind of mechanism in place to manage the occurences, and help avoid loss of work as a result. when working on a project on your own or with others, you'll want to be able to back up the code in a central place, so it is not lost if your computer breaks. you will also want to be able to roll back to earlier versions if a problem is later discovered. you might have started doing this in your own work by creating different versions of the same file, e.g. mycode.js, mycode_v2.js, mycode_v3.js, mycode_final.js, mycode_really_really_final.js, etc., but this is really error-prone and unreliable. different team members will commonly want to create their own separate versions of the code (called branches in git), work on a new feature in that version, and then get it mer...
...e codebase is made on your computer (and everyone else's). you make changes to your own copy, and then push those changes 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 termi...

Tools and testing - Learn web development
as your web projects become larger and more complex, you'll want to start taking advantage of some of these tools, working out a reliable toolchain to give your development process superpowers. ...
..., not because we endorse them or think they are the best, but because we know they work and have good industry support. in most cases there are other tools available, old ones will go out of fashion, and new ones will no doubt appear. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites you should really learn the basics of the core html, css, and javascript languages first before attempting to use many the tools detailed here. for example, you'll need to know the fundamentals of these languages before you start debugging problems in complex web code, making effective use of javascript frameworks, or writing tests and running them against your code using test ru...

Debugging Frame Reflow
unt is 856 (cnt=856). below this is a line that reads: tblo 02d7b5f0 r=0 a=8940,uc c=0,0 cnt=870 here the uc shows that on initial reflow the available height for the outer table frame is unconstrained. the table cell requires its children to compute the mes. it is reported back from the block as: block 02d7bcf8 d=300,300 me=300 the block max. element size is 300 twips. the second table reflow is started at rowg 00b984a4 r=2 a=1500,uc c=1500,uc cnt=879 where the previous information is used. the block has been required to compute the max. element size only once and it reports now: block 02d7bcf8 d=1410,300 the block shows the same address as the previous one. frames with children that overflow the parent have the ns_frame_outside_children flag set. for these frames the overflow area is displayed ...
...it reports now: block 02d7bcf8 d=1410,300 the block shows the same address as the previous one. frames with children that overflow the parent have the ns_frame_outside_children flag set. for these frames the overflow area is displayed as block 025ed8f0 d=8940,1020 o=(0,0) 9180 x 1020. the overflow area is specified as (x,y) origin and width x height. the reflow finishes at the same level where it started. advanced reflow debugging the previously described technique dumps the data for every frame. sometimes the log is clearer if only the main frames are shown. the entries in the reflow log can be controlled on a frame level. for instance adding text 0 to the rules in reflow_rules.txt would hide the text entries from the reflow. the display of the following frames can be turned on by adding a line ...

Developer guide
for new mozilla developers a directory of articles which are particularly helpful for new mozilla developers. ...
... for new mozilla developers a directory of articles which are particularly helpful for new mozilla developers. ...

HTML parser threading
of open formatting elements and copies of various fields that define the tree builder state. it contains all the information that is necessary to load back into the tree builder to restore it into a behaviorally equivalent state. the flush timer is disengaged, because it's not useful to make the tree builder flush ops into the queue of the speculation incrementally. after the speculation has been started and mspeculationmutex released, the parser thread will parse incoming data and the tree builder will produce tree ops so that they get flushed into the queue in the speculation object. if another tree op that attempts to execute a script is generated while speculating, another speculation object is initialized as described above and placed in the queue of speculation objects after the previous on...
...e stage again. if the speculation failed, the first buffer corresponding to the starting point of the speculation gets its start index restored to the index stored on the speculation object. subsequent buffers get their start index reset back to zero. the tokenizer gets its line number restored from the speculation object. this is equivalent to rewinding the input to where it was when speculation started. all the speculations in the speculation queue are destroyed. pending tree ops in the tree builder are cleared. the tree op stage is set as the tree op sink for the tree builder. the executor is told that it's reading from the stage again. the state of the main-thread tokenizer is copied to the parser-thread tokenizer. likewise for the tree builders. the "last was carriage return" flag is copied ...

DeferredTask.jsm
e task is running and the timer is armed, then one last execution from start to finish will happen again, immediately after the current execution terminates; then the returned promise will be resolved. if the task is running and the timer is not armed, the returned promise will be resolved when the current execution terminates. if the task is not running and the timer is armed, then the task is started immediately, and the returned promise resolves when the new execution terminates. if the task is not running and the timer is not armed, the method returns a resolved promise. promise finalize(); example firefox 28 note this section describes about deferredtask.jsm in firefox 28.0 or higher. set up a function or an asynchronous task whose execution can be triggered after a define...
...et the delay, or just to cancel execution: savedeferredtask.disarm(); savedeferredtask.arm(); // the task will be executed in 2 seconds from now. when the internal timer fires and the execution of the task starts, the task cannot be canceled anymore. it is, however, possible to arm the timer again during the execution of the task, in which case the task will need to finish before the timer is started again, thus guaranteeing a time of inactivity between executions that is at least equal to the provided delay. the "finalize" method can be used to ensure that the task terminates properly. the promise it returns is resolved only after the last execution of the task is finished. to guarantee that the task is executed for the last time, the method prevents any attempt to arm the timer again. if ...

WebRequest.jsm
nd chrome's, though: see chrome incompatibilities for the details. usage to import webrequest, use code like: let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); the webrequest object has the following properties, each of which corresponds to a specific stage in executing a web request: onbeforerequest onbeforesendheaders onsendheaders onheadersreceived onresponsestarted oncompleted each of these objects defines two functions: addlistener(callback, filter, opt_extrainfospec) removelistener(callback) adding listeners use addlistener to add a listener to a particular event. it takes one mandatory argument and two optional arguments, as detailed below. name type description callback function the callback argument is ...
... if the resource will not be loaded into a xul browser. method string the http method to be used (get, post, etc). responseheaders array of http headers. the http response headers that were received. this is only included if you set "responseheaders" in the opt_extrainfospec argument. statuscode number http response code. onresponsestarted triggered once the browser has started to receive the response body. note that you can't pass "blocking" for this event, so you can't modify or cancel the request from this event: it's informational only. opt_extrainfospec values name description "responseheaders" include response headers in the argument passed to the listener. listener argument nam...

Profiling with the Firefox Profiler
s available at profiler.firefox.com. it has tighter integration with firefox than external profilers, and has more of a platform focus than the devtools performance panel. it can be used in a variety of situations where external profilers are not available, and can provide more information and insight into what the browser is doing. using the firefox profiler visit profiler.firefox.com to get started. it has instructions for enabling the profiler menu button, and getting going. there are also product docs available at profiler.firefox.com/docs/. in addition to profiler.firefox.com, the firefox devtools have a simplified interface targeted towards web developers, but does not include as much information as the firefox profiler web app. it is available from the menu at tools > web developer > p...
...his will add a icon in the top right of the browser. set devtools.debugger.remote-enabled to true in about:config for fennec. select target mobile usb and press connect. the first run will take an additional 1 minute or so to pull in the required system libraries. profiling firefox startup start your firefox with the environment variable moz_profiler_startup=1 set. this way the profiler is started as early as possible during startup. then capture the profile using the add-on as usual. startup profiling does not use the settings that you configured in the add-on's panel. it uses settings that can be configured with the environment variables moz_profiler_startup_entries, moz_profiler_startup_interval and moz_profiler_startup_filters: if it looks like the buffer is not large enough, you...

Emscripten
using emscripten, you can compile c and c++ code into javascript compile any other code that can be translated into llvm bytecode into javascript. ...
...g from high performance games that need to render graphics, play sounds, and load and process files, through to application frameworks like qt. emscripten generates fast code — its default output format is asm.js , a highly optimizable subset of javascript that can execute at close to native speed in many cases. note: sound interesting? read more about emscripten and try some demos, then get started with using it. other articles of interest on mdn our games zone contains some useful content related to games development, which is a common area of use for emscripten. our emscripten techniques page is a place to store useful emscripten-related ideas that haven't made it onto the emscripten wiki. ...

Anonymous Shared Memory
examples, the server creates the file-mapped shared memory, the client attaches to it. first protocol server: fm = pr_openanonfilemap(dirname, size, filemapprot); addr = pr_memmap(fm); attr = pr_newprocessattr(); pr_processattrsetinheritablefilemap( attr, fm, shmname ); pr_createprocess(client); pr_destroyprocessattr(attr); ... yadda ... pr_memunmap( addr ); pr_closefilemap(fm); client: ... started by server via pr_createprocess() fm = pr_getinheritedfilemap( shmname ); addr = pr_memmap(fm); ... yadda ... pr_memunmap(addr); pr_closefilemap(fm); second protocol server: fm = pr_openanonfilemap(dirname, size, filemapprot); fmstring = pr_exportfilemapasstring( fm ); addr = pr_memmap(fm); ... application specific technique to pass fmstring to child ... yadda ... server uses his own magic to ...
... ); addr = pr_memmap(fm); ... yadda ... pr_memunmap(addr); pr_closefilemap(fm); second protocol server: fm = pr_openanonfilemap(dirname, size, filemapprot); fmstring = pr_exportfilemapasstring( fm ); addr = pr_memmap(fm); ... application specific technique to pass fmstring to child ... yadda ... server uses his own magic to create child pr_memunmap( addr ); pr_closefilemap(fm); client: ... started by server via his own magic ... application specific technique to find fmstring from parent fm = pr_importfilemapfromstring( fmstring ) addr = pr_memmap(fm); ... yadda ... pr_memunmap(addr); pr_closefilemap(fm); anonymous shared memory functions pr_openanonfilemap pr_processattrsetinheritablefilemap pr_getinheritedfilemap pr_exportfilemapasstring pr_importfilemapfromstring ...

Index
ble and works fine in all simple scenarios, for example if all (b) candidate issuer certificates have the same subject and issuer names and differ by validity period; however, it works only in a limited amount of more advanced scenarios. unfortunately, the world of certificates has become more complex in the recent past. new certificate authorities enter the global pki market, and in order to get started with their business, they might make deals with established cas and receive so-called cross-signing-certificates. as a result, when searching for a trust path from (a) to a trusted anchor (root) certificate (z), the set of candidate issuer certificates might have different issuer names (referring to the second or higher issuer level). as a consequence, it will be necessary to try multiple differe...
...ken for storing. 11 fips mode - an explanation nss nss has a "fips mode" that can be enabled when nss is compiled in a specific way. (note: mozilla does not distribute a "fips mode"-ready nss with firefox.) this page attempts to provide an informal explanation of what it is, who would use it, and why. 12 function_name nss no summary! 13 getting started with nss samples wip network security services (nss) is a base library for cryptographic algorithms and secure network protocols used by mozilla software. would you like to get involved and help us to improve the core security of mozilla firefox and other applications that make use of nss? we are looking forward to your contributions! we have a large list of tasks waiting for attentio...

NSS Sample Code Sample1
gets the server's public key (wrapping key) to // send to another server. this becomes the input to // the exportkeys method on the remote server. int exportpublickey(secitem **pubkeydata); // export the encryption and key using the key // provided. the key should come from another server // in the cluster. (the admin should verify this.) // // in this example, the server must be started to perform // this function (see start()) int exportkeys(secitem *pubkey, secitem **wrappedenckey, secitem **wrappedmackey); // import the keys received from another server in the // cluster. the admin should make sure the keys actually // came from the correct source. int importkeys(secitem *wrappedenckey, secitem *wrappedmackey); // start the server, loading the e...
...s(secitem *wrappedenckey, secitem *wrappedmackey); // start the server, loading the encryption and macing keys // from files int start(); // shut down the server. (for completeness) int shutdown(); // compare keys in two server instances. use this in the // example to make sure the keys are transferred correctly. ...

NSS sources building testing
server. find the directory that contains the highest version number. because nss depends on the base library nspr, you should download the archive that combines both nss and nspr. 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). in order to get started, anonymous read-only access is sufficient. create a new directory on your computer that you will use as your local work area, and run the following commands. hg clone https://hg.mozilla.org/projects/nspr hg clone https://hg.mozilla.org/projects/nss after the above commands complete, you should have two local directories, named nspr and nss, next to each other. (historical information: nspr and...
...mands. hg clone https://hg.mozilla.org/projects/nspr hg clone https://hg.mozilla.org/projects/nss after the above commands complete, you should have two local directories, named nspr and nss, next to each other. (historical information: nspr and nss source code have recently been re-organized into a new directory structure. in past versions, all files were located in a directory hierarchy that started with the "mozilla" prefix. the nspr base library was located in directory mozilla/nsprpub. the subdirectories dbm, security/dbm, security/coreconf, security/nss were part of the nss sources.) the nss directory contains the following important subdirectories: nss/coreconf contains knowledge for cross platform building. nss/lib contains all the library code that is used to create the runti...

OLD SSL Reference
und in the current nss reference ssl reference newsgroup: mozilla.dev.tech.crypto writer: sean cotter manager: wan-teh chang chapter 1 overview of an ssl application ssl and related apis allow compliant applications to configure sockets for authenticated, tamper-proof, and encrypted communications. this chapter introduces some of the basic ssl functions. ...
...the sample code and makefiles are available via lxr in the sslsamples directory. ...

sslfnc.html
cate ssl_badcerthook ssl_getclientauthdatahook nss_getclientauthdata ssl_handshakecallback setting up the callback functions described in this section may be optional for some applications. however, all applications must use pk11_setpasswordfunc to set up the password callback function during nss initialization. for examples of the callback functions listed here, see chapter 2, "getting started with ssl." ssl_authcertificatehook specifies a certificate authentication callback function called to authenticate an incoming certificate. syntax #include "ssl.h" secstatus ssl_authcertificatehook( prfiledesc *fd, sslauthcertificate f, void *arg); parameters this function has the following parameters: fd a pointer to the file descriptor f...
...eviously called ssl_badcerthook. a bad-certificate callback function gives the application the opportunity to choose to accept the certificate as authentic and authorized even though it failed the check performed by the certificate authentication callback function. see also for examples of certificate authentication callback functions, see the sample code referenced from chapter 2, "getting started with ssl." ssl_authcertificate default callback function used to authenticate certificates received from the remote end of an ssl connection if the application has not previously called ssl_authcertificatehook to specify its own certificate authentication callback function. syntax #include "ssl.h" secstatus ssl_authcertificate( void *arg, prfiledesc *fd, prbool checksig, ...

Network Security Services
formation 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 basic questions about nss. introduction to public-key cryptography explains the basic concepts of public-key cryptography that underlie nss. introduction to ssl introduces the ssl protocol, including ...
...mary of nss and its capabilities. nss faq answers basic questions about nss. introduction to public-key cryptography explains the basic concepts of public-key cryptography that underlie nss. introduction to ssl introduces the ssl protocol, including information about cryptographic ciphers supported by ssl and the steps involved in the ssl handshake. getting started nss releases this page contains information about the current and past releases of nss. get the source code and build it instructions on how to build nss on the different supported platforms. nss apis introduction to network security services provides an overview of the nss libraries and what you need to know to use them. nss ssl public fun...

Receiving startup notifications
his now works, if you're interested in specifics. the important thing to note is that now instead of registering with the category manager programmatically as was done in the past, you add lines to your chrome.manifest to let the application handle it for you. for example: category profile-after-change mycomponent @foobar/mycomponent;1 important: in the past, the contract id of the category entry started with "service," if the component was implemented as a service. this is no longer the case, so be sure to remove that when migrating existing code. additionally, the earliest startup time notification you can receive is now profile-after-change. your add-on will not receive xpcom-startup or app-startup notifications. the startup process during application startup, the application's manifest is use...
...ethod: categorymanager->addcategoryentry(appstartup_category, "mycomponentname", "contract-id", pr_true, pr_true, getter_copies(previous)); this causes your component to be instantiated using nsicomponentmanager.createinstance(). ...

Index
80 frequently asked questions xpcom this section will help you if you're fixing a broken build, or have what you think is a quick obvious question, and you don't have time to read the reference manual. this faq usually just refers back directly to the appropriate answer, there. if you're looking here just to learn about nscomptrs, you'll get a better introduction in the getting started guide. 81 getting started guide xpcom an nscomptr is an owning reference. whatever it points to has been addrefed, counting the nscomptr as one of its `owners'. an nscomptr always calls release before letting go, whether the nscomptr is letting go so that it can point to a different object, or because the nscomptr is going out of scope. any time a new value is assigned into a...
... of scope. any time a new value is assigned into an nscomptr, the nscomptr automatically always releases its old referent, if any, and (unless you tell it you already have) addrefs the new. 82 reference manual xpcom this section will help you if you're already familiar with nscomptr but you need details. if you've never use nscomptrs before, you might want to read the getting started guide first. if you're trying to fix a broken build, the faq might lead you to the answer more quickly. 83 status, recent changes, and plans xpcom no summary! 84 using nsiclassinfo xpcom if you use a c++ class which implements nsiclassinfo from javascript, then you don't have to explicitly call queryinterface on the javascript object to access the object'...

amIInstallTrigger
each property is the name of an add-on to be installed. the value of the property should either be a string url, or an object with the following properties: url for the add-on's url iconurl for an icon for the add-on hash for a hash of the add-on. acallback optional a callback to call as each installation succeeds or fails. return value true if the installations were successfully started. installchrome starts installing a new add-on. this method is deprecated, please use install() in the future. boolean installchrome( in pruint32 atype, in astring aurl, in astring askin ); parameters atype unused, retained for backwards compatibility. aurl the url of the add-on. askin unused, retained for backwards compatibility. return value true if the installation was suc...
...chrome starts installing a new add-on. this method is deprecated, please use install() in the future. boolean installchrome( in pruint32 atype, in astring aurl, in astring askin ); parameters atype unused, retained for backwards compatibility. aurl the url of the add-on. askin unused, retained for backwards compatibility. return value true if the installation was successfully started. startsoftwareupdate starts installing a new add-on. boolean startsoftwareupdate( in astring aurl, in print32 aflags optional ); parameters aurl the url of the add-on. aflags optional unused, retained for backwards compatibility. return value true if the installation was successfully started. updateenabled tests if installation is enabled. boolean updateenabled(); parameter...

nsIAppStartup
ion to restart after it quits. constant value description econsiderquit 0x01 attempt to quit if all windows are closed. eattemptquit 0x02 try to close all windows, then quit if successful. eforcequit 0x03 force all windows to close, then quit. erestart 0x10 restart the application after quitting. the application will be restarted with the same profile and an empty command line. erestartnotsameprofile 0x100 restart the application after quitting. the application will be restarted with an empty command line and the normal profile selection process will take place on startup. methods createhiddenwindow() create the hidden window. void createhiddenwindow(); parameters none. createstartups...
...hutdown. run() runs an application event loop: normally the main event pump which defines the lifetime of the application. if there are no windows open and no outstanding calls to enterlastwindowclosingsurvivalarea() this method will exit immediately. void run(); parameters none. return value returns ns_success_restart_app code. this return code indicates that the application should be restarted because quit was called with the erestart flag. see also nsicmdlineservice nsiappstartup_mozilla_2_0 ...

nsIDocShell
ages or web pages are composed in this window. busy_flags_none 0 returned by the busyflags attribute when the nsidocshell is not loading a document. busy_flags_busy 1 returned by the busyflags attribute when the nsidocshell is loading a document from the network. busy_flags_before_page_load 2 returned by the busyflags attribute when the nsidocshell has started loading a document from the network, but no data has been received yet. busy_flags_page_loading 4 returned by the busyflags attribute when the nsidocshell is receiving data from the network. load_cmd_normal 0x1 returned by the loadtype attribute for normal loads. load_cmd_reload 0x2 returned by the loadtype attribute for reloads. load_cmd_hist...
...like who wish to change the uri associated with the document. note if you want to get the current uri, use the read-only property on nsiwebnavigation. void setcurrenturi( in nsiuri auri ); parameters auri the uri to load. suspendrefreshuris() cancel the xpcom timers for each meta-refresh uri in this docshell, and this docshell's children, recursively. the meta-refresh timers can be restarted using resumerefreshuris(). if the timers are already suspended, this has no effect. void suspendrefreshuris(); parameters none. tabtotreeowner() tells the docshell to offer focus to its tree owner. this is currently only necessary for embedding chrome. void tabtotreeowner( in boolean forward, out boolean tookfocus ); parameters forward whether to tab forwards or backwards. took...

nsIDownloadManager
les are downloaded to the desktop by default. 1: files are downloaded to the system's downloads folder by default. 2: files are downloaded to the local path specified by the browser.download.dir preference. if this preference is invalid, the download directory falls back to the default. read only. constants constant value description download_notstarted -1 the download has not been started yet. download_downloading 0 the download is in the process of being downloaded. download_finished 1 download completed including any processing of the target file. download_failed 2 the download failed due to error. download_canceled 3 the user canceled the download. download_paused ...
...es observers of the "download-manager-remove-download" topic with the download id as the subject to allow any download manager consumers to react to the removal. void removedownload( in unsigned long aid ); parameters aid the unique id of the download. exceptions thrown ns_error_failure the download is active. removedownloadsbytimeframe() removes all inactive downloads that were started inclusively within the specified time frame. void removedownloadsbytimeframe( in long long abegintime, in long long aendtime ); parameters abegintime the start time to remove downloads by in microseconds. aendtime the end time to remove downloads by in microseconds. removelistener() removes a listener from the download manager. void removelistener( in nsidownloadprogresslistene...

nsIDragService
meters none. return value the current drag session, or null if no drag is in progress. invokedragsession() starts a modal drag session with an array of transferables void invokedragsession( in nsidomnode adomnode, in nsisupportsarray atransferables, in nsiscriptableregion aregion, in unsigned long aactiontype ); parameters adomnode the source node on which the drag gesture was started. atransferables an array of transferables to be dragged. aregion a region containing rectangles for cursor feedback, in window coordinates. aactiontype specified which of copy/move/link are allowed. invokedragsessionwithimage() starts a modal drag session using an image. a custom image may be specified using the aimage argument. if this is supplied, the aimagex and aimagey arguments spe...
...ate the image location. void invokedragsessionwithimage( in nsidomnode adomnode, in nsisupportsarray atransferablearray, in nsiscriptableregion aregion, in unsigned long aactiontype, in nsidomnode aimage, in long aimagex, in long aimagey, in nsidomdragevent adragevent, in nsidomdatatransfer adatatransfer ); parameters adomnode the source node on which the drag gesture was started. atransferables an array of transferables to be dragged. aregion a region containing rectangles for cursor feedback, in window coordinates. aactiontype specified which of copy/move/link are allowed. aimage image object. aimagex x position of image. aimagey y position of image. adragevent the drag gesture event that initiated the drag. adatatransfer a data transfer object that is ...

nsIHttpServer
erk/test/httpserver/nsihttpserver.idl [scriptable, uuid(cea8812e-faa6-4013-9396-f9936cbb74ec)] interface nsihttpserver : nsisupports { /** * starts up this server, listening upon the given port. ...
...faa6-4013-9396-f9936cbb74ec)] interface nsihttpserver : nsisupports { /** * starts up this server, listening upon the given port. * * @param port * the port upon which listening should happen, or -1 if no specific port is * desired * @throws ns_error_already_initialized * if this server is already started * @throws ns_error_not_available * if the server is not started and cannot be started on the desired port * (perhaps because the port is already in use or because the process does * not have privileges to do so) * @note * behavior is undefined if this method is called after stop() has been * called on this but before the provided callback function has been * called. */ void start(in long port); /** * shuts down this serv...

nsIPlacesImportExportService
te: this method has been removed; use the bookmarkhtmlutils.jsm javascript code module instead. loads the given bookmarks.html file and replaces it with the current bookmarks hierarchy (if aisinitialimport is true) or appends it (if aisinitialimport is false). three nsiobserverservice notifications are fired as a result of the import. "bookmarks-restore-begin" is fired just before the import is started. "bookmarks-restore-success" is fired right after the bookmarks are successfully imported. "bookmarks-restore-failed" is fired right after a failure occurs when importing the bookmarks. observers will be passed through their data parameters either "html" if aisinitialimport is false or "html-initial" if aisinitialimport is true. the observer subject will be null. void importhtmlfromfile( in ns...
... obsolete since gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11) note: this method has been removed; use the bookmarkhtmlutils.jsm javascript code module instead.loads the given bookmarks.html file and puts it in the given folder. three nsiobserverservice notifications are fired as a result of the import. "bookmarks-restore-begin" is fired just before the import is started. "bookmarks-restore-success" is fired right after the bookmarks are successfully imported. "bookmarks-restore-failed" is fired right after a failure occurs when importing the bookmarks. observers will be passed through their data parameters either "html" if aisinitialimport is false or "html-initial" if aisinitialimport is true. the observer subject will be an nsisupportsprint64 whose value is af...

Storage
rently "unfrozen", which means it is subject to change at any time; in fact, it has changed somewhat with each release of firefox since it was introduced, and will likely continue to do so for a while. note: storage is not the same as the dom:storage feature which can be used by web pages to store persistent data or the session store api (an xpcom storage utility for use by extensions). getting started this document covers the storage api and some peculiarities of sqlite. it does not cover sql or "regular" sqlite. you can find some very useful links in the see also section however. for storage api help, you can post to mozilla.dev.apps.platform on the news server news.mozilla.org. to report bugs, use bugzilla. the overall procedure for use is: get the storage service - mozistorageservice. ...
...execution. the best way to deal with this is to only execute your statements asynchronously using mozistorageconnection.executeasync(). this method will manage the transactions for you, so you don't have to worry about them. note: the database engine does not support nested transactions, so attempting to start a transaction when one is already active will throw an exception. transactions can be started with mozistorageconnection.begintransaction() or mozistorageconnection.begintransactionas(). the latter takes one of three constants to describe the type of transaction: mozistorageconnection.transaction_deferred mozistorageconnection.transaction_immediate mozistorageconnection.transaction_exclusive mozistorageconnection.begintransaction() is equivalent to calling mozistorageconnection.beg...

Status, Recent Changes, and Plans
i put this section at the top so that checking for recent changes will be easy. recent changes to nscomptr most recent first made == and != between an nscomptr and a raw pointer (or a literal 0 or nsnull) work correctly on all compilers. see bug 65664. made getter_addrefs( nscomptr& ) apply the same type-safety check that the simple assignment forms do. added do_createinstance. added do_getservice. eliminated the need to cast getter_addrefs when an nsisupports** is needed. ...
...rivate may help prevent some leaks caused by casting move the factored nscomptr routines into their own library, to reduce nscomptr clients' dependency on the xpcom library. recent changes to this document removed the statement that == and != between an nscomptr and a raw pointer or literal 0 does not work on some compilers since it is no longer true. added an entire section to the getting started guide on nscomptrs in function signatures added references to recent bugs influencing the use of nscomptr machinery: bug 59212, and bug 59414 fixed comparisons 1 and 3, as per comments by morten welinder updated examples to prefer direct initialization over copy initialization. ...

Xptcall Porting Guide
ng platform specific assembly language code. this code needs to be ported to all platforms that want to support xptcall (and thus mozilla). the tree mozilla/xpcom/reflect/xptcall +--public // exported headers +--src // core source | \--md // platform specific parts | +--mac // mac ppc | +--unix // all unix | \--win32 // win32 | +--test // simple tests to get started \--tests // full tests via api porters are free to create subdirectories under the base md directory for their given platforms and to integrate into the build system as appropriate for their platform. theory of operation there are really two pieces of functionality: invoke and stubs... the invoke functionality requires the implementation of the following on each platform (from xptcall/publi...
...please remember that safety and reliability are more important than speed optimizations. this code is primarily used to connect xpcom components with javascript; function call overhead is a tiny part of the time involved. i put together xptcall/src/md/test as a place to evolve the basic functionality as a port is coming together. not all of the functionality is exercised, but it is a place to get started. xptcall/tests has an api level test for ns_invokebyindex, but no tests for the stubs functionality. such a test ought to be written, but this has not yet been done. a full 'test' at this point requires building the client and running the xpconnect test called testxpc in mozilla/js/src/xpconnect/tests. getting these ports done is very important. please let me know if you are interested in doing o...

Firefox Developer Tools
u can use them to examine, edit, and debug html, css, and javascript. this section contains detailed guides to all of the tools as well as information on how to debug firefox for android, how to extend devtools, and how to debug the browser as a whole. if you have any feedback on devtools, or want to contribute to the project, you can join the devtools community. note: if you are just getting started with web development and using developer tools, our learning docs will help you — see getting started with the web and what are browser developer tools? for good starting points. the core tools you can open the firefox developer tools from the menu by selecting tools > web developer > toggle tools or use the keyboard shortcut ctrl + shift + i or f12 on windows and linux, or cmd + opt + i on...
... get involved our community website explains how to get involved. bugs.firefox-dev.tools a tool helping to find bugs to work on. ...

console - Web APIs
ofiler. you can see the resulting profile in the browser's performance tool (for example, the firefox performance tool). console.table() displays tabular data as a table. console.time() starts a timer with a name specified as an input parameter. up to 10,000 simultaneous timers can run on a given page. console.timeend() stops the specified timer and logs the elapsed time in seconds since it started. console.timelog() logs the value of the specified timer to the console. console.timestamp() adds a marker to the browser's timeline or waterfall tool. console.trace() outputs a stack trace. console.warn() outputs a warning message. you may use string substitution and additional arguments with this method. examples outputting text to the console the most frequently-used feature of t...
... note: it's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. if you have response body logging enabled, the time listed for the response header and body combined should match what you see i...

Document: animationstart event - Web APIs
if there is an animation-delay, this event will fire once the delay period has expired. a negative delay will cause the event to fire with an elapsedtime equal to the absolute value of the delay (and, correspondingly, the animation will begin playing at that time index into the sequence). bubbles yes cancelable no interface animationevent event handler property onanimationstart the original target for this event is the element that had the animation applied. you can listen for this event on the document interface to handle it in the capture or bubbling phases. ...
... the element that had the animation applied. you can listen for this event on the document interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: animationstart. examples this listens for the animationstart event and logs a message when it is fired: document.addeventlistener('animationstart', () => { console.log('animation started'); }); the same, but using onanimationstart: document.onanimationstart = () => { console.log('animation started'); }; see a live example of this event. specifications specification status comment css animations working draft initial definition ...

Document: transitionstart event - Web APIs
the difference is transitionstart and transitionrun is that transitionrun fires when the transition is created (i.e. at the start of any delay) and transitionstart fires when the actual animation has begun (i.e. at the end of any delay). bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitionstart the original target for this event is the element that had the transition applied. ...
...ginal target for this event is the element that had the transition applied. you can listen for this event on the document interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: transitionstart. examples this code adds a listener to the transitionstart event: document.addeventlistener('transitionstart', () => { console.log('started transitioning'); }); the same, but using the ontransitionstart property instead of addeventlistener(): document.ontransitionrun = () => { console.log('started transitioning'); }; see a live example of this event. specifications specification status comment css transitionsthe definition of 'transitionstart' in that specification. working draft initial defin...

GlobalEventHandlers - Web APIs
indicating that a css animation has stopped playing. globaleventhandlers.onanimationiteration an eventhandler called when an animationiteration event has been sent, indicating that a css animation has begun playing a new iteration of the animation sequence. globaleventhandlers.onanimationstart an eventhandler called when an animationstart event is sent, indicating that a css animation has started playing. globaleventhandlers.onauxclick an eventhandler called when an auxclick event is sent, indicating that a non-primary button has been pressed on an input device (e.g. a middle mouse button). globaleventhandlers.onblur is an eventhandler representing the code to be called when the blur event is raised. globaleventhandlers.onerror is an onerroreventhandler representing the code to be...
...ransitioncancel event is sent, indicating that a css transition has been cancelled. globaleventhandlers.ontransitionend an eventhandler called when a transitionend event is sent, indicating that a css transition has finished playing. globaleventhandlers.ontransitionrun an eventhandler called when a transitionrun event is sent, indicating that a css transition is running, though not nessarilty started. globaleventhandlers.ontransitionstart an eventhandler called when a transitionstart event is sent, indicating that a css transition has started transitioning. globaleventhandlers.onwaiting is an eventhandler representing the code to be called when the waiting event is raised. methods this interface defines no methods. specifications specification status comment ...

HTMLElement: transitionrun event - Web APIs
en a css transition is first created, i.e. before any transition-delay has begun. ...
... event handler property ontransitionrun examples this code adds a listener to the transitionrun event: el.addeventlistener('transitionrun', () => { console.log('transition is running but hasn\'t necessarily started transitioning yet'); }); the same, but using the ontransitionrun property instead of addeventlistener(): el.ontransitionrun = () => { console.log('transition started running, and will start transitioning when the transition delay has expired'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform, backgroun...

Using microtasks in JavaScript with queueMicrotask() - Web APIs
ed by calls to log(), a custom function that simply outputs text to the screen. the code below schedules a timeout to occur in zero milliseconds, then enqueues a microtask. this is bracketed by calls to log() to output additional messages. let callback = () => log("regular timeout callback has run"); let urgentcallback = () => log("*** oh noes! an urgent callback has run!"); log("main program started"); settimeout(callback, 0); queuemicrotask(urgentcallback); log("main program exiting"); result note that the output logged from the main program body appears first, followed by the output from the microtask, followed by the timeout's callback. that's because when the task that's handling the execution of the main program exits, the microtask queue gets processed before the task queue on whic...
...gram exits, since that's when the task exits and there's nothing else on the execution stack. ...

IDBTransaction - Web APIs
/idbtransaction" target="_top"><rect x="151" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbtransaction</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} transactions are started when the transaction is created, not when the first request is placed; for example consider this: var trans1 = db.transaction("foo", "readwrite"); var trans2 = db.transaction("foo", "readwrite"); var objectstore2 = trans2.objectstore("foo") var objectstore1 = trans1.objectstore("foo") objectstore2.put("2", "key"); objectstore1.put("1", "key"); after the code is executed the object store should...
...hanged. read_write "readwrite" (1 in chrome) allows reading and writing of data in existing data stores to be changed. version_change "versionchange" (2 in chrome) allows any operation to be performed, including ones that delete and create object stores and indexes. this mode is for updating the version number of transactions that were started using the setversion() method of idbdatabase objects. transactions of this mode cannot run concurrently with other transactions. transactions in this mode are known as "upgrade transactions." even if these constants are now deprecated, you can still use them to provide backward compatibility if required (in chrome the change was made in version 21). you should code defensively in case the ...

Transcoding assets for Media Source Extensions - Web APIs
depending on the codec, you might need to fragment the file to comply with the iso bmff spec. ...
...frag_keyframe+empty_moov bunny_fragmented.mp4 if you already have an mp4, but it's not properly fragmented, you can again use ffmpeg: $ ffmpeg -i non_fragmented.mp4 -movflags frag_keyframe+empty_moov fragmented.mp4 in both cases, chrome may require an extra movie flag to be set: -movflags frag_keyframe+empty_moov+default_base_moof having a properly fragmented mp4 file is all you need to get started. if you wish to employ adaptive bitrate streaming, you'll have to create encodings at multiple resolutions. while mse is flexible enough to allow you to make your implementation, it's highly recommended to use an existing dash client as dash is a well-specified application protocol. creating content for dash given that you have ffmpeg and bento4's utilities accessible through your $path, you ...

MessageEvent - Web APIs
inside different windows. the following code snippet shows creation of a sharedworker object using the sharedworker() constructor. both scripts contain this: var myworker = new sharedworker('worker.js'); both scripts then access the worker through a messageport object created using the sharedworker.port property. ...
...haredworker object using the sharedworker() constructor. both scripts contain this: var myworker = new sharedworker('worker.js'); both scripts then access the worker through a messageport object created using the sharedworker.port property. ...

PerformanceTiming - Web APIs
lookupend read only when the domain lookup is finished. if a persistent connection is used, or the information is stored in a cache or a local resource, the value will be the same as performancetiming.fetchstart. performancetiming.connectstart read only when the request to open a connection is sent to the network. if the transport layer reports an error and the connection establishment is started again, the last connection establishment start time is given. if a persistent connection is used, the value will be the same as performancetiming.fetchstart. performancetiming.connectend read only when the connection is opened network. if the transport layer reports an error and the connection establishment is started again, the last connection establishment end time is given. if a persiste...
...ead only when the browser received the first byte of the response, from the server from a cache, or from a local resource. performancetiming.responseend read only when the browser received the last byte of the response, or when the connection is closed if this happened first, from the server, the cache, or from a local resource. performancetiming.domloading read only when the parser started its work, that is when its document.readystate changes to 'loading' and the corresponding readystatechange event is thrown. performancetiming.dominteractive read only when the parser finished its work on the main document, that is when its document.readystate changes to 'interactive' and the corresponding readystatechange event is thrown. performancetiming.domcontentloadedeventstart rea...

Using Service Workers - Web APIs
the premise of service workers one overriding problem that web users have suffered with for years is loss of connectivity. the best web app in the world will provide a terrible user experience if you can’t download it. there have been various attempts to create technologies to solve this problem, and some of the issues have been solved. ...
...eveloper tools chrome has chrome://inspect/#service-workers, which shows current service worker activity and storage on a device, and chrome://serviceworker-internals, which shows more detail and allows you to start/stop/debug the worker process. in the future they will have throttling/offline modes to simulate bad or non-existent connections, which will be a really good thing. firefox has also started to implement some useful tools related to service workers: you can navigate to about:debugging to see what sws are registered and update/remove them. when testing you can get around the https restriction by checking the "enable service workers over http (when toolbox is open)" option in the firefox developer tools settings. the "forget" button, available in firefox's customization options, c...

SharedWorker - Web APIs
inside different windows. the following code snippet shows creation of a sharedworker object using the sharedworker() constructor. both scripts contain this: var myworker = new sharedworker('worker.js'); both scripts then access the worker through a messageport object created using the sharedworker.port property. ...
...haredworker object using the sharedworker() constructor. both scripts contain this: var myworker = new sharedworker('worker.js'); both scripts then access the worker through a messageport object created using the sharedworker.port property. ...

Touch.target - Web APIs
note that if the target element is removed from the document, events will still be targeted at it, and hence won't necessarily bubble up to the window or document anymore. if there is any risk of an element being removed while it is being touched, the best practice is to attach the touch listeners directly to the target. syntax var el = touchpoint.target; return value el the target element of the touch object. ...
...f an element being removed while it is being touched, the best practice is to attach the touch listeners directly to the target. syntax var el = touchpoint.target; return value el the target element of the touch object. example this example illustrates how to access the touch object's touch.target property. the touch.target property is an element (eventtarget) on which a touch point is started when contact is first placed on the surface. in following simple code snippet, we assume the user initiates one or more touch contacts on the source element. when the touchstart event handler for this element is invoked, each touch point's touch.target property is accessed via the event's touchevent.targettouches list. // register a touchmove listener for the 'source' element var src = document...

Multi-touch interaction - Web APIs
the threshold for pinch and zoom movement detection is application specific (and device dependent). // this is a very basic 2-touch move/pinch/zoom handler that does not include // error handling, only handles horizontal moves, etc. ...
...t least one touchmove event and some will fire several touchmoves. // consequently, an application might want to "ignore" some touchmoves. // // this function sets the target element's border to "dashed" to visually // indicate the target received a move event. // ev.preventdefault(); if (logevents) log("touchmove", ev, false); // to avoid too much color flashing many touchmove events are started, // don't update the background if two touch points are active if (!(ev.touches.length == 2 && ev.targettouches.length == 2)) update_background(ev); // set the target element's border to dashed to give a clear visual // indication the element received a move event. ev.target.style.border = "dashed"; // check this event for 2-touch move/pinch/zoom gesture handle_pinch_zoom(ev); } tou...

USBDevice - Web APIs
me. usbdevice.deviceversionminor read only the minor version number of the device in a semantic versioning scheme. usbdevice.deviceversionsubminor read only the patch version number of the device in a semantic versioning scheme. usbdevice.manufacturername read only the of the organization that manufactured the usb device. usbdevice.opened read only indicates whether a session has been started with a paired usb device. usbdevice.productid read only the manufacturer-defined code that identifies a usb device. usbdevice.productname read only the manufacturer-defined name that identifies a usb device. usbdevice.serialnumber read only the manufacturer-defined serial number for the specific usb device. usbdevice.usbversionmajor read only one of three properties that declare the u...
...eturns a promise that resolves with a usbisochronousintransferresult when time sensitive information has been transmitted to the usb device. usbdevice.isochronoustransferout() returns a promise that resolves with a usbisochronousouttransferresult when time sensitive information has been transmitted from the usb device. usbdevice.open() returns a promise that resolves when a device session has started. usbdevice.releaseinterface() returns a promise that resolves when a cliamed interface is released from exclusive access. usbdevice.reset() returns a promise that resolves when the device is reset and all app operations canceled and their promises rejected. usbdevice.selectalternateinterface() returns a promise that resolves when the specified alternative endpoint is selected. usbdevice.se...

WebGL tutorial - Web APIs
a computer's graphics processing unit (gpu). webgl elements can be mixed with other html elements and composited with other parts of the page or page background. this tutorial describes how to use the <canvas> element to draw webgl graphics, starting with the basics. the examples provided should give you some clear ideas what you can do with webgl and will provide code snippets that may get you started in building your own content. before you start using the <canvas> element is not very difficult, but you do need a basic understanding of html and javascript. the <canvas> element and webgl are not supported in some older browsers, but are supported in recent versions of all major browsers. in order to draw graphics on the canvas we use a javascript context object, which creates graphics on the...
...ore you start using the <canvas> element is not very difficult, but you do need a basic understanding of html and javascript. the <canvas> element and webgl are not supported in some older browsers, but are supported in recent versions of all major browsers. in order to draw graphics on the canvas we use a javascript context object, which creates graphics on the fly. in this tutorial getting started with webgl how to set up a webgl context. adding 2d content to a webgl context how to render simple flat shapes using webgl. using shaders to apply color in webgl demonstrates how to add color to shapes using shaders. animating objects with webgl shows how to rotate and translate objects to create simple animations. creating 3d objects using webgl shows how to create and animate a 3d obj...

Writing a WebSocket server in C# - Web APIs
lient accepttcpclient() waits for a tcp connection, accepts it and returns it as a tcpclient object. here's a barebones server implementation: ​using system.net.sockets; using system.net; using system; class server { public static void main() { tcplistener server = new tcplistener(ipaddress.parse("127.0.0.1"), 80); server.start(); console.writeline("server has started on 127.0.0.1:80.{0}waiting for a connection...", environment.newline); tcpclient client = server.accepttcpclient(); console.writeline("a client connected."); } } tcpclient methods: system.net.sockets.networkstream getstream() gets the stream which is the communication channel. both sides of the channel have reading and writing capability. properties: int availab...
... wsserver.cs // // csc wsserver.cs // wsserver.exe using system; using system.net; using system.net.sockets; using system.text; using system.text.regularexpressions; class server { public static void main() { string ip = "127.0.0.1"; int port = 80; var server = new tcplistener(ipaddress.parse(ip), port); server.start(); console.writeline("server has started on {0}:{1}, waiting for a connection...", ip, port); tcpclient client = server.accepttcpclient(); console.writeline("a client connected."); networkstream stream = client.getstream(); // enter to an infinite cycle to be able to handle every change in stream while (true) { while (!stream.dataavailable); while (client.available < 3);...

Using the Web Speech API - Web APIs
nitionlist.addfromstring(grammar, 1); we then add the speechgrammarlist to the speech recognition instance by setting it to the value of the speechrecognition.grammars property. we also set a few other properties of the recognition instance before we move on: speechrecognition.continuous: controls whether continuous results are captured (true), or just a single result each time recognition is started (false). speechrecognition.lang: sets the language of the recognition. setting this is good practice, and therefore recommended. speechrecognition.interimresults: defines whether the speech recognition system should return interim results, or just final results. final results are good enough for this simple demo. speechrecognition.maxalternatives: sets the number of alternative potential match...
...){ console.log(v, i); colorhtml += '<span style="background-color:' + v + ';"> ' + v + ' </span>'; }); hints.innerhtml = 'tap/click then say a color to change the background color of the app. ...

Window: animationstart event - Web APIs
if there is an animation-delay, this event will fire once the delay period has expired. a negative delay will cause the event to fire with an elapsedtime equal to the absolute value of the delay (and, correspondingly, the animation will begin playing at that time index into the sequence). bubbles yes cancelable no interface animationevent event handler property onanimationstart the original target for this event is the element that had the animation applied. you can listen for this event on the window interface to handle it in the capture or bubbling phases. ...
...t is the element that had the animation applied. you can listen for this event on the window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: animationstart. examples this listens for the animationstart event and logs a message when it is fired: window.addeventlistener('animationstart', () => { console.log('animation started'); }); the same, but using onanimationstart: window.onanimationstart = () => { console.log('animation started'); }; see a live example of this event. specifications specification status comment css animations working draft initial definition ...

Window.mozAnimationStartTime - Web APIs
obsolete since gecko 42 (firefox 42 / thunderbird 42 / seamonkey 2.39)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. returns the time, in milliseconds since the epoch, at which animations started now should be considered to have started. this value should be used instead of, for example, date.now(), because this value will be the same for all animations started in this window during this refresh interval, allowing them to remain in sync with one another. this also allows javascript-based animations to remain synchronized with css transitions and smil animations triggered during the same refresh interval. syntax time = window.mozanimationstarttime; parameters time is the time in m...
... ...

Window: transitionstart event - Web APIs
the transitionstart event is fired when a css transition has actually started, i.e., after any transition-delay has ended. bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitionstart the original target for this event is the element that had the transition applied. you can listen for this event on the window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: transitionstart. ...
... original target for this event is the element that had the transition applied. you can listen for this event on the window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: transitionstart. examples this code adds a listener to the transitionstart event: window.addeventlistener('transitionstart', () => { console.log('started transitioning'); }); the same, but using the ontransitionstart property instead of addeventlistener(): window.ontransitionrun = () => { console.log('started transitioning'); }; see a live example of this event. specifications specification status comment css transitionsthe definition of 'transitionstart' in that specification. working draft initial definit...

Window - Web APIs
ssaging events message fired when the window receives a message, for example from a call to window.postmessage() from another browsing context. also available via the onmessage property. messageerror fired when a window object receives a message that can't be deserialized. also available via the onmessageerror property. print events afterprint fired after the associated document has started printing or the print preview has been closed. also available via the onafterprint property. beforeprint fired when the associated document is about to be printed or previewed for printing. also available via the onbeforeprint property. promise rejection events rejectionhandled sent every time a javascript promise is rejected, regardless of whether or not there is a handler in place to ...
...ents transitioncancel fired when a css transition is canceled. also available via the ontransitioncancel property. transitionend fired when a css transition has completed. also available via the ontransitionend property. transitionrun fired when a css transition is first created. also available via the ontransitionrun property. transitionstart fired when a css transition has actually started. also available via the ontransitionstart property. interfaces see dom reference. ...

XRSystem: requestSession() - Web APIs
xrsession.end().then(() => xrsession = null); } } specifications specification status comment webxr device apithe definition of 'requestsession()' in that specification. working draft initial definition. ...
...n.disabled = false; } else { console.log("webxr doesn't support immersive-vr mode!"); } }); } else { console.log("webxr is not available!"); } function onbuttonclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then((session) => { xrsession = session; // onsessionstarted() not shown for reasons of brevity and clarity. onsessionstarted(xrsession); }); } else { // button is a toggle button. xrsession.end().then(() => xrsession = null); } } specifications specification status comment webxr device apithe definition of 'requestsession()' in that specification. working draft initial definition. ...

:-moz-loading - CSS: Cascading Style Sheets
note that images that are in the process of loading are not matched by this pseudo-class. note: this selector is mainly intended to be used by theme developers. ...
...note that images that are in the process of loading are not matched by this pseudo-class. note: this selector is mainly intended to be used by theme developers. ...

Using CSS animations - CSS: Cascading Style Sheets
e, that happens before our code runs. so we’ll start the animation ourselves by setting the class of the element to the style that gets animated after the fact. receiving the events the events get delivered to the listener() function, which is shown below. function listener(event) { var l = document.createelement("li"); switch(event.type) { case "animationstart": l.innerhtml = "started: elapsed time is " + event.elapsedtime; break; case "animationend": l.innerhtml = "ended: elapsed time is " + event.elapsedtime; break; case "animationiteration": l.innerhtml = "new loop started at time " + event.elapsedtime; break; } document.getelementbyid("output").appendchild(l); } this code, too, is very simple. it simply looks at the event.type to...
...loop started at time " + event.elapsedtime; break; } document.getelementbyid("output").appendchild(l); } this code, too, is very simple. it simply looks at the event.type to determine which kind of animation event occurred, then adds an appropriate note to the <ul> (unordered list) we’re using to log these events. the output, when all is said and done, looks something like this: started: elapsed time is 0 new loop started at time 3.01200008392334 new loop started at time 6.00600004196167 ended: elapsed time is 9.234000205993652 note that the times are very close to, but not exactly, those expected given the timing established when the animation was configured. note also that after the final iteration of the animation, the animationiteration event isn’t sent; instead, the ...

touch-action - CSS: Cascading Style Sheets
ould be handled by the browser, an application can supply its own behavior in pointermove and pointerup listeners for the remaining gestures. applications using touch events disable the browser handling of gestures by calling preventdefault(), but should also use touch-action to ensure the browser knows the intent of the application before any event listeners have been invoked. when a gesture is started, the browser intersects the touch-action values of the touched element and its ancestors, up to the one that implements the gesture (in other words, the first containing scrolling element). this means that in practice, touch-action is typically applied only to top-level elements which have some custom behavior, without needing to specify touch-action explicitly on any of that element's descendant...
...such as double-tap to zoom. disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen. this is an alias for "pan-x pan-y pinch-zoom" (which, for compatibility, is itself still valid). pan-left, pan-right, pan-up, pan-down enable single-finger gestures that begin by scrolling in the given direction(s). once scrolling has started, the direction may still be reversed. note that scrolling "up" (pan-up) means that the user is dragging their finger downward on the screen surface, and likewise pan-left means the user is dragging their finger to the right. multiple directions may be combined except when there is a simpler representation (for example, "pan-left pan-right" is invalid since "pan-x" is simpler, but "pan-left pan-do...

CSS: Cascading Style Sheets
ss web browsers according to the w3c specification. previously development of various parts of css specification was done synchronously, which allowed versioning of the latest recommendation. you might have heard about css1, css2.1, css3. however, css4 has never become an official version. from css3, the scope of the specification increased significantly and the progress on different css modules started to differ so much, that it became more effective to develop and release recommendations separately per module. instead of versioning the css specification, w3c now periodically takes a snapshot of the latest stable state of the css specification. css introduction if you're new to web development, be sure to read our css basics article to learn what css is and how to use it. css tutorial...
...ea contains a wealth of tutorials to take you from beginner level to proficiency, covering all the fundamentals. css reference our exhaustive css reference for seasoned web developers describes every property and concept of css. 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 tutorials our css learning area features multiple modules that teach css from the ground up — no previous knowledge required. css first steps css (cascading style sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. this module provides...

Ajax - Developer guides
asynchronous javascript and xml, while not a technology in itself, is a term coined in 2005 by jesse james garrett, that describes a "new" approach to using a number of existing technologies together, including html or xhtml, css, javascript, dom, xml, xslt, and most importantly the xmlhttprequest object. when these technologies are combined in the ajax model, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. this makes the application faster and more responsive to user actions. although x in ajax stands for xml, json is used more than xml nowadays because of its many advantages such as being lighter and a part of javascript. ...
...tal updates to the user interface without reloading the entire browser page. this makes the application faster and more responsive to user actions. although x in ajax stands for xml, json is used more than xml nowadays because of its many advantages such as being lighter and a part of javascript. both json and xml are used for packaging information in the ajax model. documentation getting started this article guides you through the ajax basics and gives you two simple hands-on examples to get you started. using the xmlhttprequest api the xmlhttprequest api is the core of ajax. this article will explain how to use some ajax techniques, like: analyzing and manipulating the response of the server monitoring the progress of a request submitting forms and upload binary files – in ...

<input type="button"> - HTML: Hypertext Markup Language
addeventlistener() is then used to establish a function that will be run when click events occur on the button. adding keyboard shortcuts to but...
...in a real site, you'd have to provide this information in a way that doesn't intefere with the site design (for example by providing an easily accessible link that points to inf...

HTML: Hypertext Markup Language
cles about how to use html, as well as tutorials and complete examples, check out our html learning area. html reference in our extensive html reference section, you'll find the details about every element and attribute in html. 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 beginner's tutorials our html learning area features multiple modules that teach html from the ground up — no previous knowledge required. introduction to html this module sets the stage, getting you used to important concepts and syntax such as looking at applying html to text, how to create hyperlinks, and how to use html to structure a web page. multimedia and embedding this modul...
...andable, accessible way can be a challenge. this module covers basic table markup, along with more complex features such as implementing captions and summaries. html forms forms are a very important part of the web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. this module gets you started with creating the client-side/front-end parts of forms. use html to solve common problems provides links to sections of content explaining how to use html to solve very common problems when creating a web page: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc. advanced topics cors enabled image the crossorigin attribute, in combination with an ...

Introduction - JavaScript
pecification uses terminology and syntax that may be unfamiliar to a javascript programmer. although the description of the language may differ in ecmascript, the language itself remains the same. javascript supports all functionality outlined in the ecmascript specification. the javascript documentation describes aspects of the language that are appropriate for a javascript programmer. getting started with javascript getting started with javascript is easy: all you need is a modern web browser. this guide includes some javascript features which are only currently available in the latest versions of firefox, so using the most recent version of firefox is recommended. the web console tool built into firefox is useful for experimenting with javascript; you can use it into two modes: single-line...
...function greetme(yourname) { alert("hello " + yourname) } console.log(eval('3 + 5')) multi-line input in the web console the single-line input mode of the web console is great for quick testing of javascript expressions, but although you can execute multiple lines, it's not very convenient for that. for more complex javascript, you can use the multi-line line input mode. ...

JavaScript modules - JavaScript
fast forward a few years and we now have complete applications being run in browsers with a lot of javascript, as well as javascript being used in other contexts (node.js, for example). it has therefore made sense in recent years to start thinking about providing mechanisms for splitting javascript programs up into separate modules that can be imported when needed. ...
...viding mechanisms for splitting javascript programs up into separate modules that can be imported when needed. node.js has had this ability for a long time, and there are a number of javascript libraries and frameworks that enable module usage (for example, other commonjs and amd-based module systems like requirejs, and more recently webpack and babel). the good news is that modern browsers have started to support module functionality natively, and this is what this article is all about. this can only be a good thing — browsers can optimize loading of modules, making it more efficient than having to use a library and do all of that extra client-side processing and extra round trips. browser support use of native javascript modules is dependent on the import and export statements; these are s...

Template literals (Template strings) - JavaScript
ethod exists to create raw strings—just like the default template function and string concatenation would create. ...
...tring.raw`hi\n${2+3}!`; // "hi\n5!" str.length; // 6 array.from(str).join(','); // "h,i,\,n,5,!" tagged templates and escape sequences es2016 behavior as of ecmascript 2016, tagged templates conform to the rules of the following escape sequences: unicode escapes started by "\u", for example \u00a9 unicode code point escapes indicated by "\u{}", for example \u{2f804} hexadecimal escapes started by "\x", for example \xa9 octal literal escapes started by "\0o" and followed by one or more digits, for example \0o251 this means that a tagged template like the following is problematic, because, per ecmascript grammar, a parser looks for valid unicode escape sequences, but finds malformed syntax: latex`\unicode` // throws in older ecmascript versions (es2016 and earlier) // syntaxerror: ma...

restart - SVG: Scalable Vector Graphics
specifications specification status comment ...
...r("click", evt => { document.queryselectorall("animate").foreach(element => { element.beginelement(); }); }); usage notes value always | whennotactive | never default value always animatable no always this value indicates that the animation can be restarted at any time. whennotactive this value indicates that the animation can only be restarted when it is not active (i.e. after the active end). attempts to restart the animation during its active duration are ignored. never this value indicates that the animation cannot be restarted for the time the document is loaded. specifications specification status comment svg animations level 2the definition of 'restart' in that specification. editor's draft ...

SVG documentation index - SVG: Scalable Vector Graphics
d with each type. 275 filter effects advanced, needscontent, svg, svg:tutorial there are situations, where basic shapes do not provide the flexibility you need to achieve a certain effect. drop shadows, to provide a popular example, cannot be created reasonably with a combination of gradients. filters are svg's mechanism to create sophisticated effects. 276 getting started beginner, needsbeginnerupdate, svg, svg:tutorial let us dive straight in with a simple example. take a look at the following code. 277 gradients in svg intermediate, svg, svg:tutorial perhaps more exciting than just fills and strokes is the fact that you can also create and apply gradients as either fills or strokes. 278 introduction beginner, guide, ...
...ts and later on attach them to an object. 284 svg in html introduction intermediate, needsupdate, svg this article and its associated example shows how to use inline svg to provide a background picture for a form. it shows how javascript and css can be used to manipulate the picture in the same way you would script regular html. 285 svg and css css, css:getting_started, example, guide, intermediate, needsupdate, svg, web below you'll create a simple demonstration that runs in your svg-enabled browser. 286 svg fonts advanced, needsupdate, svg, svg:tutorial when svg was specified, support for web fonts was not widespread in browsers. since accessing the correct font file is however crucial for rendering text correctly, a font descriptio...

SVG and CSS - SVG: Scalable Vector Graphics
you should use css custom properties. example make a new svg document as a plain text file, doc8.svg. ...
...r pseudo-class and other more complex css selectors on elements referenced via <use> elements, at the moment. there is some discussion about what rules apply to such referenced elements. see below how the structure then looks like. ...

Contributor's Guide - Archive of obsolete content
ciated with a single tab. conversely, an add-on process was supposed to run all the code associated with a single add-on. neither content or add-on proceses were ever actually implemented, but by the time they were cancelled, the sdk was already designed with them in mind. to understand this article, it's probably best to read it as if content and add-on processes actually exist. getting started learn how to contribute to the add-on sdk. modules a module is a self-contained unit of code, which is usually stored in a file, and has a well defined interface. the use of modules greatly improves the maintainability of code, by splitting it up into independent components, and enforcing logical boundaries between them. unfortunately, javascript does not yet have native support for modules: i...

Guides - Archive of obsolete content
modules learn about the module system used by the sdk (which is based on the commonjs specification), how sandboxes and compartments can be used to improve security, and about the built-in sdk module loader, known as cuddlefish. classes and inheritance learn how classes and inheritance can be implemented in javascript, using constructors and prototypes, and about the helper functions provided by the sdk to simplify this. ...

notifications - Archive of obsolete content
o you can rewrite the above code like this: var notifications = require("sdk/notifications"); var myiconurl = "./myicon.png"; notifications.notify({ text: "i have an icon!", iconurl: myiconurl }); this module depends on the underlying system's notification service. if the user's system does not support desktop notifications or if its notifications service is not running: if firefox was started normally, notifications are logged to firefox's error console if the user launched firefox from the command line, notifications are logged to the terminal. globals functions notify(options) displays a transient notification to the user. parameters options : object optional options: name type title string a string to display as the message's title...

simple-storage - Archive of obsolete content
line 2 needs to be made conditional, so the array is only constructed if it does not already exist: if (!ss.storage.pages) ss.storage.pages = []; deleting data you can delete properties using the delete operator. here's an add-on that adds three buttons to write, read, and delete a value: var ss = require("sdk/simple-storage"); require("sdk/ui/button/action").actionbutton({ id: "write"...

event/core - Archive of obsolete content
the event/core module allows the creation of apis to broadcast and subscribe to events. usage many modules in the sdk can broadcast events. for example, the tabs module emits an open event when a new tab is opened. also see the tutorial on implementing event targets to get started with this api. an event listener may be registered to any event target using the on function: var { on, once, off, emit } = require('sdk/event/core'); var target = { name: 'target' }; on(target, 'message', function listener(event) { console.log('hello ' + event); }); on(target, 'data', console.log); an event of a specific type may be emitted on any event target object using the emit function. this will call all registered listeners for the given type on the given event target in the same order they were regis...

event/target - Archive of obsolete content
ce emits an show event when the panel is shown. with this module you can create your own objects that emit events. this module provides an exemplar eventtarget object, that implements an interface for adding and removing event listeners of a specific type. eventtarget is the base class for all objects in sdk on which events are emitted. also see the tutorial on implementing event targets to get started with this api. instantiation it's easy to create event target objects, no special arguments are required. const { eventtarget } = require("sdk/event/target"); let target = eventtarget(); for a convenience though optional options arguments may be used, in which case all the function properties with keys like: onmessage, onmyevent... will be auto registered for associated 'message', 'myevent' e...

system/runtime - Archive of obsolete content
os a string identifying the current operating system. for example, . "winnt", "darwin", or "linux". see os_target for a more complete list of possible values. ...

ui/frame - Archive of obsolete content
e. after calling this function, the frame will no longer appear in the ui, and accessing any of its properties or methods will throw an error. properties url url for the content loaded into the frame. this is read-only. it's only accessible after the attach event has occurred for this frame. events attach this event is emitted whenever a new frame instance is constructed and the browser has started to load its document: for example, when the user opens a new browser window, if that window has a toolbar containing this frame. since the event is dispatched asynchronously, the document may already be loaded by the time the event is received. at this point, you should not try to send messages to scripts hosted in the frame, because the frame scripts may not have been loaded. arguments event ...

console - Archive of obsolete content
if the add-on has been installed in firefox, then the messages appear in the browser console. if you're developing your add-on using the extension auto-installer, then the add-on is installed in firefox, meaning that messages will appear in the browser console. but see the discussion of logging levels: by default, messages logged using log(), info(), trace(), or warn() won't be logged in these situations. ...

jpm - Archive of obsolete content
jpm usage is: 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. ...

Overview - Archive of obsolete content
re annotations. because we are recording potentially sensitive information, we want to prevent the user creating annotations when in private browsing mode. the simplest way to do this is to omit the "private-browsing" key from the add-on's "package.json" file. if we do this, then the add-on won't see any private windows, and the annotator's widget will not appear in any private windows. getting started let's get started by creating a directory called "annotator". navigate to it and type cfx init. next, we will implement the widget. ...

Developing for Firefox Mobile - Archive of obsolete content
latform tools will have installed adb in the "platform-tools" directory under the directory in which you installed the android sdk. make sure the "platform-tools" directory is in your path. then type: adb devices you should see some output like: list of devices attached 51800f220f01564 device (the long hex string will be different.) if you do, then adb has found your device and you can get started. running add-ons on android you can develop your add-on as normal, as long as you restrict yourself to the supported modules. when you need to run the add-on, first ensure that firefox is not running on the device. then execute jpm-mobile run with some extra options: jpm-mobile run --adb /path/to/adb in the command shell, you should see something like: launching mobile application with int...

Add-on SDK - Archive of obsolete content
interact with the browser open web pages, listen for pages loading and list open pages. ...

Preferences - Archive of obsolete content
{}); will return these items (for the example tree above): "typeaheadfind.autostart", "typeaheadfind.enablesound", and "usebrailledisplay", not just direct children ("typeaheadfind" and "usebrailledisplay"), as you might have expected. using preference observers changes a user makes to your extension's preferences, such as through an options dialog, may not take effect until the browser is restarted (e.g., if you have initialized local variables when the browser loads). you may wish for such changes to be applied immediately in your extension. in this case, you can use the nsiprefbranch2 interface to "listen" for changes to preferences in a certain branch. note that it need not be your own extension's preferences; you can set an observer on any preference or branch. when a change is made to ...

Migrating raw components to add-ons - Archive of obsolete content
, this document will be updated with additional information addressing scenarios we see developers encountering. simple migration if your goal is just to get your raw component working properly as an extension, you can do this in three steps: create a new add-on using the instructions here. as you'll see, add-ons give you much more flexibility than simply loading a component, but in order to get started, all you'll need is your directory structure and install manifest. create a components/ directory in the root of your add-on's directory. add your js and binary components within that directory. they will be registered the first time firefox is run once your add-on is installed. automatic installation once you have an add-on packaged, users can install it by visiting your site and giving the add...

Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
ty, you can learn a lot about how software works by studying its source code; with a massive project like firefox, people typically use special source-code browsing tools to make sense of it. mozilla cross-reference mozilla cross-reference is a full-text searchable source-code listing hosted at mozilla.org. we’re going to use mxr (http://mxr.mozilla.org), a linux source-code browser. getting started visit this url: http://mxr.mozilla.org . in the left-hand sidebar, you should see a link to a search starting point and a search form (figure 5). fixme: figure 5: mxr.mozilla.org usage what am i looking for? if you just start poking through the source code at random, you may not find much of anything. so let’s figure out where to start looking. let’s say we’ve found the contents of li...

Appendix B: Install and Uninstall Scripts - Archive of obsolete content
" extensions, like those explained in the tutorial, both steps happen at different times. in this case the user is told that firefox needs to restart in order for the extension to be completely removed. then the user has the option to restart right away, wait to restart whenever is convenient, or even cancel the uninstall operation. the add-on will not be completely removed until the browser is restarted. so, in order to detect the first stage, you'll need to add an event listener using the addaddonlistener method. the data parameter explains the action being performed. if you detect your add-on is going to be uninstalled at this stage, it's a good time to show the uninstall feedback form. it is not a good time to clean up your files, at least not without prior user consent. remember that the u...

Setting Up a Development Environment - Archive of obsolete content
very useful. dom inspector the dom inspector used to be part of firefox as an installer option, but since firefox 3 it has been separated as another add-on you can add and remove. it's a very useful inspection tool that lets you look into the dom of html and xul documents, as well as applied css rules and associated javascript objects. introduction to dom inspector is a good guide on how to get started using it. the dom inspector is particularly useful in finding out how to overlay a window, and how to replace default css style rules. you can see the names of the files involved, which gives you a good starting point when looking into the mozilla source. you can even change styles, attributes and execute javascript code in it, although that's not completely reliable. javascript debugger the n...

The Box Model - Archive of obsolete content
the dimensions and appearance of buttons, changing the background color of the toolbars and status bars, font styles, sizes, etc. note that this is not really what you would expect from an extension, it's more like a theme. however, it's very interesting and useful to see how you can manipulate the appearance of firefox so easily. if you're not familiar with css, you should read this css getting started guide and other online resources before continuing with this tutorial. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Useful Mozilla Community Sites - Archive of obsolete content
ces 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 joining the large mozilla add-ons developer community. the sheer volume of material can be overwhelming, but you can always come back and use this tutorial as a reference for your future development. now all you need is a good idea (in case you didn't have one already) and get started. happy coding! « previous this tutorial was kindly do...

XUL School Tutorial - Archive of obsolete content
xul school is a comprehensive add-on development tutorial, focusing on firefox extension development. it is recommended that you read through all of it at least once. while firefox changes rapidly, the content in this tutorial should be up to date and valid. ...

Signing an XPI - Archive of obsolete content
tion of the jar and xpi files. this example is using the cygwin bin/zip.exe tool. build.bat is placed in the extension's root folder. e.g. /dev/fsb/build.bat /dev/fsb/install.rdf /dev/fsb/chrome.manifest /dev/fsb/chrome/ /dev/fsb/chrome/content/ /dev/fsb/chrome/locale/ /dev/fsb/chrome/skin/ here it is with the code-signing steps included: @echo off set x=%cd% echo building %x%.xpi ... echo started at %date% %time% > %x%\build.log md build\chrome cd chrome zip -r -0 "%x%.jar" * >> %x%\build.log move "%x%.jar" ..\build\chrome >> %x%\build.log cd .. copy install.rdf build >> %x%\build.log copy chrome.manifest build >>%x%\build.log signtool.exe -d c:\projects\codesigning -k "code signing (certum)" -p "password" build/ >> %x%\build.log cd build zip "%x%.xpi" meta-inf/zigbert.rsa >> %...

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
ably enough to double file size. my initial attempts at the markup and css for the wired news design eliminated the majority of our tables, but left one master table to control the primary columns of each page. that approach meant that the content of every column would have to be loaded and calculated before it would be rendered in the browser window. that wasn't good enough. around that time, i started discovering great sites like glish.com and bluerobot.com. both presented and documented viable means of producing multi-column layouts without a single table. despite some initial setbacks with those approaches due to our own unique scenarios, it wasn't long before i discovered a variation of one of their methods that worked for the wired news design. by eliminating tables that were strictly use...

Creating reusable content with CSS and XBL - Archive of obsolete content
ing at the document level, you can make self-contained parts that are easy to maintain and reuse. more details for more information about xbl bindings, see the xbl page in this wiki. action: an xbl demonstration make a new html document, doc6.html. copy and paste the content from here: <!doctype html public "-//w3c//dtd html 4.0//en"> <html> <head> <title>mozilla css getting started - xbl demonstration</title> <link rel="stylesheet" type="text/css" href="style6.css"> </head> <body> <h1>xbl demonstration</h1> <div id="square">click me</div> </body> </html> make a new css file, style6.css. this stylesheet contains the document style. copy and paste the content from here: /*** xbl demonstration ***/ #square { -moz-binding: url("square.xbl#square"); } make a new text...

XUL user interfaces - Archive of obsolete content
e the xul page in this wiki. action: a xul demonstration make a new xul document as a plain text file, doc7.xul. ...

Creating a status bar extension - Archive of obsolete content
next » this is the first in a series of articles that will demonstrate how to create increasingly intricate extensions for the firefox browser. some of the samples in this series may be similar to samples you've seen elsewhere, but the goal of this series of articles is to help compile information for new extension developers into one place to make it easy to jump in and get started. note: the extension created by this tutorial won't work in firefox that don't have a static status bar (that is, firefox 4 and up). you can find a more up-to-date tutorial in the xul school tutorial the essentials of an extension. many of the concepts introduced here apply to any xul-based application; however, to keep from getting completely overwhelmed, we're going to focus specifically on firefox.

List of Mozilla-Based Applications - Archive of obsolete content
ng uses mozilla rhino phloneme publishing tool for vocab collab phped php editor embedded mozilla browser in product pidgin im client uses nss plain old webserver extension and standalone webserver 5,000 users and 30,000 downloads poe::xul framework for remote xul application in poe postbox email client started as a fork of thunderbird printgroove jt suite print process software uses xulrunner and spidermonkey prism (was webrunner) single-site browser xulrunner application pro/engineer wildfire cadcam product psycrunner chat, messenger, multicast toolkit about 1,000 users – xulrunner version of psyczilla extension pyjamas-desktop ...

MMgc - Archive of obsolete content
memory the application is using). one way to avoid this unbounded pause is to break up the work the gc needs to do into "increments". in order to collect garbage we must trace all the live objects and mark them. this is the part of the gc work that takes the most time and the part that needs to be incrementalized. in order to incrementalize marking it needs to be a process that can be stopped and started. our marking algorithm is a conservative marking algorithm that makes marking automatic, there are no mark() methods the gc engine needs to call, marking is simply a tight loop that processes a queue. the way it works is that all gc roots are registered with the gc library and it can mark everything by traversing the roots. at the beginning all the gc roots are pushed onto the work queue. items o...

Images, Tables, and Mysterious Gaps - Archive of obsolete content
the techniques described this article are no longer best practices for web-based development. it is now preferable to use css for layout. however, these techniques may be relevant when the developer cannot assume that users have a modern browser, such as for html-based e-mail messages. almost no matter when you started creating web pages, odds are pretty high you have one or more designs based on the classic "convoluted tables and lots of images" paradigm. whether you've sliced up a logo so it fits in well with the design, or used tons of single-pixel spacer gifs, the principles (and perils) remain largely the same. back in the early days, this approach worked, because browsers would usually make a table cell exactly as wide and tall as an image it contained. fast forward to 2001, and...

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
$ rm -rf ~/.thunderbird start it $ thunder...

Monitoring WiFi access points - Archive of obsolete content
ts array and adds them to the html in the div. then the c div is updated with the number of times the list has been refreshed. the onerror() method simply opens an alert that displays the error code received. starting to monitor access points to start monitoring the access points, we instantiate the listener (on line 44), then get access to the wifi monitor interface on line 45. the monitoring is started up on line 47, by calling the wifi monitoring service's startwatching() method. ...

Misc top level - Archive of obsolete content
whether you've sliced up a logo so it fits in well with the design, or used tons of single-pixel spacer gifs, the principles (and perils) remain largely the same. ...

Blackwood - Archive of obsolete content
blackwood consists of a series of java-based extensions to mozilla. blackwood's mission is to put java support in mozilla on a par with javascript support. ...

Bonsai - Archive of obsolete content
query page or seamonkey tree control page here are some example queries that will give you a taste of what bonsai is capable of: today's checkins to the mozilla source mainline. checkins to any branch of xfe by ramiro between 26-feb-1998 and 12-may-1998 differences between revisions 3.1 and 3.3 of the file mozilla/cmd/xfe/forms.c that's a small sample, but it should be enough to get you started. play around with the various options on the main bonsai query page. if you're updating our cvs tree you'll need to learn about hacking with bonsai. bonsai source code the source code to the bonsai tool itself is also available, check out the information available at the bonsai project page. original document information author(s): jamie zawinski last updated date: september 8, 2004 copy...

Creating a Skin for SeaMonkey 2.x - Archive of obsolete content
introduction you're going to make a theme for seamonkey 2, but don't know how? i hope this manual will help you. contents getting started ...

Creating a Skin for Mozilla - Archive of obsolete content
not totally change the interface, it just defines how it looks. you cannot change what happens when the user right clicks on an image, but you can change the look of the right click menu (make it blue with pink polka dots, for example). if you want to change the functionality of mozilla, you'll have to look into modifying the chrome. that is beyond the scope of this document. ...

Dehydra - Archive of obsolete content
f. 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 worked on for mozilla 2 todo steps to dehydra 1.0 release commu...

Download Manager preferences - Archive of obsolete content
ations the default value is true. browser.download.manager.quitbehavior indicates what should happen to in-progress downloads if the application is quit while they're ongoing. 0 indicates that the downloads should be paused and resumed automatically the next time firefox is run; 1 indicates that the downloads should be paused but will not automatically resume when the application is restarted; and 2 indicates that the downloads will be canceled on quit. default value is 0 (resume on next launch). browser.download.manager.resumeonwakedelay an integer value indicating the number of milliseconds to wait after the system wakes up from sleep before resuming downloads. default value is 10000. browser.download.manager.retention indicates how long downloads are r...

Drag and Drop JavaScript Wrapper - Archive of obsolete content
aganddrop object. <button label="drag me" ondraggesture="nsdraganddrop.startdrag(event,buttonobserver);" /> the function startdrag will be called when a drag starts on the button. the first parameter is the event object, available in all event handlers. the second parameter to this function is the observer, which we'll create soon. in this case we only do anything special when the button drag is started. if we wanted to handle the other cases also, we can call the other functions, as in the following example: <description value="click and drag this text." ondraggesture="nsdraganddrop.startdrag(event,textobserver)" ondragover="nsdraganddrop.dragover(event,textobserver)" ondragexit="nsdraganddrop.dragexit(event,textobserver)" ondragdrop="nsdragan...

Extension Frequently Asked Questions - Archive of obsolete content
this is quick set of answers to the most common issues with extension development. they are currently written with mostly firefox in mind, but most if not all should easily translate to seamonkey, thunderbird or any of the other applications. for thunderbird, you may also find the extension howto or faq pages helpful. if you're looking for a place to get started, try our tutorial, building an extension or mozillazine's getting started tutorial. use the extension wizard to generate a template to start with. be sure to set the development preferences. todo: add content. where can i get more help? please see extensions:other resources and extensions:community. before asking for help, be sure to set the debugging prefs and check the error console for related messages. also, don't forget...

Gecko Coding Help Wanted - Archive of obsolete content
d, ugly and inefficient method signatures to more natural c++ method signatures. it's really improved code readability, reduced code size, and sped up performance. it's kind of tedious but it's extremely valuable and will help you learn the way around the codebase. we've done a lot, but there's a lot more to do. roc is willing to work closely with anyone with reasonable c++ experience to get them started on this. just send him mail. not up for coding yet? join the gecko bugathon and help save gecko engineers from imminent doom! original document information author(s): fantasai last updated date: may 4, 2004 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details. ...

Isp Data - Archive of obsolete content
do a variety of things. this page applies to thunderbird (mail/news). introduction these files allow for adding to the new account wizard a new option, and help with, among other things, deployment of custom thunderbird. tools needed the files are simple text files, in utf-8 encoding, so use your favorite modern text editor. a working install of thunderbird is also handy for testing. getting started first take a look at the number of examples available: http://infosec.ufl.edu/tbird/gatorlink.xml mailnews/base/ispdata/aol.rdf see the thunderbird isp hooks for more details. ...

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
as a result, mozilla is not fully backwards-compatible with netscape navigator 4.x and microsoft internet explorer legacy code; for example, mozilla does not support <layer> as i will discuss later. browsers, like internet explorer 4, that were built before the conception of w3c standards inherited many quirks. in this article, i will describe mozilla's quirks mode, which provides strong backwards html compatibility with internet explorer and other legacy browsers. i'll also cover nonstandard technologies, such as xmlhttprequest and rich text editing, that mozilla does support because no w3c equivalent existed at the time. ...

Plug-n-Hack Get Involved - Archive of obsolete content
if you would like to add pnh support to a browser or tool, or even get involved in onward pnh development, then please get in touch and we will give you whatever assistance we can. to contribute or keep up to date with plug-n-hack changes please joion the mozilla plug-n-hack google group. you can also talk to the mozilla security team about this project on the #websectools irc channel. ...

Plug-n-Hack Phase1 - Archive of obsolete content
var manifest = {"detail":{"url":"http://localhost:8080/manifest"}}; var evt = new customevent('configuresectool', manifest); it is suggested that browsers wishing to support pnh restrict handling of customevents such that they’re ignored where the event happens outside of user initiated actions. the configuration document should then listen for a number of other events: configuresectoolstarted - this notifies the document that the browser is processing the configuration; if this event is not received within a reasonable amount of time after the configuresectool event has been fired, you might want to warn the user that pnh does not seem to be supported by this browser (perhaps prompting them to install the appropriate addon). configuresectoolfailed - this notifies the document that c...

File object - Archive of obsolete content
warning: this section describes the file component of the spidermonkey javascript interpreter. file is non-standard, not generally compiled into distributions, is a potential source of huge security holes, and not well tested. getting started in order to use the file object from your javascript programs, you must enable it by setting the make variable js_has_file_object during the compilation of your spidermonkey engine. if you are building a standalone version of spidermonkey (see: spidermonkey build documentation), this variable can be added on the make command line, like so: cd mozilla/js/src make -f makefile.ref js_has_file_object=1 alternatively, if you are building a larger product (such as a browser) and want to include the file object, you may need to perform minor makefil...

Running Tamarin acceptance tests - Archive of obsolete content
to the path of the generated/shell_toplevel.abc. $ cd tamarin-redux/test/acceptance $ export asc=/users/build/hg/tamarin-redux/utils/asc.jar $ export builtinabc=/users/build/hg/tamarin-redux/generated/builtin.abc $ export shellabc=/users/build/hg/tamarin-redux/generated/shell_toplevel.abc $ export avm=/users/build/hg/tamarin-redux/objdir-release/shell/avmshell $ python runtests.py tamarin tests started: 2010-09-28 10:37:06.410676 current configuration: x64-mac-tvm-release avm version: 5260:6d1899261bac executing 2532 tests against vm: /users/build/hg/builds/5260-6d1899261bac/mac/avmshell_64 2532 running abcasm/abs_helper.as skipping... reason: 2531 running abcasm/adhoc.abs skipping... reason: inconsistencies in different debug output, need to implement regex matching of diffs 2527 running a...

Tamarin build documentation - Archive of obsolete content
h. branch: which branch of tamarin the repository is based on, tamarin-central or tamarin-tracing. description: self explanatory check the status of the build @ http://tamarin-builds.mozilla.org/tamarin-redux/ , you can also see your build request in the queue at http://tamarin-builds.mozilla.org/build_trigger/requestbuild.cfm. if you no longer want you sandbox to build and it has not started yet, you can delete the build request from the queue from the request page. tryserver etiquette the sandbox is not a good substitute for running the regression tests locally to catch obvious problems. this is a shared resource, each request takes approximately 2+ hours to run so please use wisely. ...

Tamarin Build System Documentation - Archive of obsolete content
ilds are displayed in next 3 sections: sandbox compile, sandbox smoke, sandbox test tamarin-central is considered a "sandbox" and will appear under sandbox phase what are the build phases? compile, smoke, test. when all of the slave machines are free they all start the first build phase simultaneously. if an error or failure occurs on any slave in a phase the build stops. the next phase is started when all slaves have completed the previous phase successfully. the compile phase compiles all of the tamarin source code and builds all of the shell executables, any errors will stop the phase and a red box will appear on the slave where the error occurred. the compile phase takes about 20-25 minutes. the smoke phase runs a set of tests on each platform until 2 minute is exceeded. the set of...

The life of an HTML HTTP request - Archive of obsolete content
the webshell then tells its documentloader to load (command "view") the specified url. [note: passes nswebshell.mobserver as nsistreamobserver and the webshell as nsicontentviewercontainer to the docloader.] (2) the document loader calls ns_openuri with the url to begin transfering the requested file. ...

Tuning Pageload - Archive of obsolete content
in your profile to change these. to best understand what the following preferences affect, there are a few things you should know. the data flows in gecko as follows: network -> necko -> parser -> content sink -> content model -> rendering model -> layout -> painting. nglayout.initialpaint.delay this is a preference that specifies a delay, in milliseconds, after the data from the server has started coming in. during this delay, the page that's coming in is not painted, unless it ends up fully loaded before the delay expires. the idea here is twofold.this reduces ugly visual jitter as the new page comes in by not starting painting till after we have a bunch of the data.this makes overall page load time shorter by not doing extra repaints very early on. content.interrupt.parsing this pref...

URIs and URLs - Archive of obsolete content
echanism responsible for generating or interpreting that component can determine whether or not escaping a character will change its semantics. likewise, a uri must be separated into its components before the escaped characters within those components can be safely decoded. this implies that the segments of urls are escaped differently. this is done by ns_escapeurl which is now part of xpcom, but started as part of necko. the information how to escape each segment is stored in a matrix. also a string should not be escaped more than once. necko will not escape an already escaped character unless forced by a special mask that can be used if it is known that a string is not escaped. parsing urls rfc 2396 defines an url parser that can deal with the syntax that is common to most url schemes that are ...

Venkman Introduction - Archive of obsolete content
gger with javascript it executes as the browser opens web pages, it's usually enough simply to browse the sites whose scripts you are interested in debugging. debugging basics this section provides a brief example of a debugging session in order to familiarize you with some of the basic commands and operations of the debugger. start venkman note: at one point, the debugger needed to be started before the scripts it was going to debug. this limitation is fixed, and now the javascript compiler makes all the scripts you access via the browser available to the debugger. see loading scripts into the debugger for more information about finding and loading scripts in venkman. launch a browser window and go to http://wp.netscape.com/fishcam/dhtmltank.html. note that in mozilla 1.x and...

Return Codes - Archive of obsolete content
no_such_component -213 the specified component is not present in the client version registry. does_not_exist -214 the specified...

XPJS Components Proposal - Archive of obsolete content
le might implement one or more components. we will have one native module - called the xpjsmanager - which holds this system together. the xpjsmanager is in charge of loading these .js files, helping them register themselves, and acting as an intermediary between the xpcom component manager and the js code. xjs components are not run in browser windows. each .js file (let's call it a module) is started up and run in the context of a relatively 'raw' js global object. the standard (non-dom) js classes will be available. the xpconnectcomponents object will be available. and some additional yet to be defined objects may be available. the xpconnectcomponents object allows access to the whole repository of native and js xpcom components, so this is not as isolated an environment as it might at first...

multiline - Archive of obsolete content
if false, the textbox only allows entry of one line. ...

Methods - Archive of obsolete content
removecurrenttab removeitemat removeitemfromselection removenotification removeprogresslistener removesession removetab removetabsprogresslistener removetransientnotifications replacegroup reset rewind scrollbyindex scrollbypixels scrolltoindex select selectall selectitem selectitemrange selecttabatindex setselectionrange showpane showpopup sizeto startediting stop stopediting swapdocshells syncsessions timedselect toggleitemselection related dom element methods dom:element.addeventlistener dom:element.appendchild dom:element.comparedocumentposition dom:element.dispatchevent dom:element.getattribute dom:element.getattributenode dom:element.getattributenodens dom:element.getattributens dom:element.getelementsbytagnam...

RDF Modifications - Archive of obsolete content
being used, since it is the value of the ref attribute we've been using in these examples. this would also be the case for any starting points used in recursive generation. if the calculated ?start variable was something different, naturally we don't need to change the template output, as that resource isn't being used in a template. finally, the builder processes any statements below the one we started at, in order to fill in any remaining variables. in this case, there are no other statements, so the builder accepts this result as a new match. since all the variables have been filled in, the action body can be processed and a new block of content generated and inserted into the output. we'll find out how the builder determines where to insert the new content is an upcoming section. however, th...

Rule Compilation - Archive of obsolete content
this step involves working through the query rules and processing them into internal structures. thus, changing the rule elements around dynamically doesn't affect anything. however, rebuilding the template (using the builder.rebuild method) will recompile the query and rules and reapply the template again. this means that you can...

textbox (Toolkit autocomplete) - Archive of obsolete content
toolkit applications (such as firefox) use a different autocomplete mechanism than the mozilla suite. the example below will create an autocomplete textbox that will search the user's history. ...

Textbox (XPFE autocomplete) - Archive of obsolete content
the autocomplete functionality is handled through one of more session objects, each of which can return a set of results given the current value of the textbox. ...

Toolbar customization events - Archive of obsolete content
hildren to determine what changes were made. example in this example, we watch for toolbar changes. ...

Creating an Installer - Archive of obsolete content
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. 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 t...

Modifying the Default Skin - Archive of obsolete content
ge: url("chrome://findfile/skin/images/check-on.jpg"); } this code changes the image associated with a checkbox. the first style sets the image for a normal checkbox and the second style sets the image for a checked checkbox. the modifier 'checked=true' makes the style only apply to elements which have their checked attributes set to true. see also : creating a skin for firefox and css getting started in the next section, we will look at creating a new skin. « previousnext » ...

Skinning XUL Files by Hand - Archive of obsolete content
etely -- by pressing a button, selecting a skin from a menu, or by accepting a skin from over the web. when this day comes, skins defined in a global skin file will be applied to a whole application -- like the mozilla browser -- so that all the various windows and parts will look consistent. in the meantime, however, skinning a file requires some manual interaction. this article can help you get started understanding skins and creating skins for xul. it presumes you have at least basic understanding of xul and the application object model that xul describes. following the instructions here, you are going to create a skin for a xul file and apply it by specifying classes for all of the interested elements. the skin will reside in a single css file, appropriately named drxul.css. as you will see, ...

Using Spacers - Archive of obsolete content
flex of 1. this makes the spacer element stretchy. if you place a spacer directly inside a window, the spacer will grow in size when the size of the window is changed. we'll add a spacer to our find file dialog soon. first, let's take a look at what happens when the current dialog is resized. if you change the size of the find files window, you can see that the elements have remained where they started. none of them have been moved or resized even though the window has more room in it. let's see what happens when a spacer is added between the text box and the find button. by adding a spacer and resizing the window, you can see that the spacer has expanded to fill the space. the buttons have been pushed over. our find file example the code to add a spacer is shown below. insert it just bef...

XUL Structure - Archive of obsolete content
chrome urls may be used to access installed packages and open them with enhanced privileges. html, xml, and xul each have a different document type. some features may be used in any document type whereas some features are specific to one kind of document. the next few sections describe the basic structure of a chrome package which can be installed into mozilla. however, if you just want to get started building a simple application, you may skip ahead to creating a window and save this section for later. package organization mozilla is organized such that you can have as many components as you want pre-installed. each extension is something of a standalone component with a separate chrome url. mozilla also has one component for each installed theme and locale. each of these components, or pac...

preference - Archive of obsolete content
node(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata events change when a preference value changes, an onchange/change event is fired on the <preference> element. you can handle this if you wish to. related preferences system documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes ...

preferences - Archive of obsolete content
lnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related preferences system documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes ...

prefpane - Archive of obsolete content
nt/script0.js"> <script type="application/javascript" src="chrome://myext/content/script1.js"> </prefwindow> when opening a dialog with multiple panes you must include the toolbar feature in the call to opendialog, for example: window.opendialog("chrome://example/content/prefwin.xul", "", "chrome,toolbar"); related prefwindow preferences system documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes ...

prefwindow - Archive of obsolete content
418. ...

textbox - Archive of obsolete content
ult value is 100 for scales and infinity for number boxes. maxlength type: integer the maximum number of characters that the textbox allows to be entered. min type: integer the minimum value the textbox's value may take. the default value is 0. multiline type: boolean if true, the textbox displays multiple lines. if the user presses enter, a new line is started. if false, the textbox only allows entry of one line. newlines type: one of the values below how the text box handles pastes with newlines in them. possible values: pasteintact paste newlines unchanged pastetofirst paste text up to the first newline, dropping the rest of the text replacewithcommas pastes the text with the newlines replaced with commas replacewithspaces ...

tree - Archive of obsolete content
the tree view's nsitreeview.getcelltext() method is called to obtain the cell contents. stopediting( shouldaccept ) return type: no return value stops editing the cell currently being edited. if the shouldaccept par...

XUL - Archive of obsolete content
xul tutorial a guided tutorial that will help you get started with xul, originally from xulplanet. xul (xml user interface language) is mozilla's xml-based language for building user interfaces of applications like firefox. the term xul is sometimes used to refer to the whole mozilla platform (e.g. xul applications are applications using xul and other components of the platform). xul controls lists some of the common controls provided by xul. documentation xul tutorial a guided tutorial that will help you get started with xul, originally from xulplanet. xul reference xul elements, attributes, properties, methods, and event handl...

Application Update - Archive of obsolete content
you will need to compile a unix/linux executable mar from mozilla/modules/libmar. ...

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

How to enable locale switching in a XULRunner application - Archive of obsolete content
// is this the current locale? selecteditem = listitem; } localelistbox.appendchild(listitem); } // highlight current locale localelistbox.selecteditem = selecteditem; } catch (err) { alert (err); } 4. code to update the locale user preference and restart the application mozilla xulrunner doesn't allow runtime switching of the locale, therefore the application must be restarted to activate the new choice. here is an example event handler which is fired when the user clicks on the button to change the locale. it saves the new locale to the user application preferences (thereby overriding the default prefs.js above) and then asks xulrunner to restart. function changelocale() { try { // which locale did the user select? var localelistbox = document.getelementbyid("lo...

Mozilla release FAQ - Archive of obsolete content
with netscape. various other people have contributed to this faq. general questions about the mozilla project what is mozilla? mozilla is a project to continue netscape communicator as an open project. the project is maintained by employees of netscape (now a division of aol), red hat, some other companies, as well as contributors from the community. on what is mozilla based? the mozilla project started near the end of life of the 4.x line of netscape communicator. originally, the plan was just to re-stabilize the code and release 5.0, but it was decided within the community that the more ambitious changes that were planned for later integration were close to being ready. the old layout engine, networking engine, and several of the older modules were gutted, and much later, the sources reached t...

2006-10-06 - Archive of obsolete content
ght need dealing with for thunderbird 2. discussion highlights: ziga sancin suggests writing an introductory article for potential developers containing basic project information (history, list of main developers, project goals, roadmap and available communication channels, etc), tools needed to start developing and building tb, documentation on source structure as well as links to help one get started on the project. david bienvenu suggests a top down architectural description of tb's data structures along with documentation about extracting them. brian king also mentions that documentation on handling message headers on the ui side would be helpful. cédric corazza recommends that the proposed documention should be made available on the l10n cvs once it reaches a decent stage so that local...

2006-10-20 - Archive of obsolete content
ions/ folder originally posted on oct 19th: christopher finke is currently learning how to compile firefox. though he has succeeded in building firefox he has so far failed to compile firefox with his own extensions of choice so that his custom build would have those extensions enabled in the end product. christopher finke is asking the community members for tutorials or any tips on how to get started. on october 20th christopher finke responded to his original post. he stated that he was able to pre-package the extensions that he wanted by following this walkthrough and a little bit of help from this post. christopher would not like to learn how to create a build of firefox with custom extensions and not have those extensions appear in the addons window. on october 20th jeff walden...

Extentsions FAQ - Archive of obsolete content
t require to write xpcom/xpconnect component that able to intercept,process and redirect http request? when does content become available in the cache? can "partial" data be read from the cache while the request is still in progress?how difficult 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-t...

2006-10-06 - Archive of obsolete content
respond with relative dates but still no schedule. rc2 status schrep asks for any final things standing in the way of rc2. rc2 starts spinning and en-us builds are annoucned. beltzner says that (as per bon echo status meeting) that rc2 is going to be re-spun to fix some final bugs that were regressed and patches that were just landed. reminder - ff2 rc2 code freeze 9/29/2006 at 9am pdt schrep started a discussion of bugs that need to be fixed for the ff2 rc2 code freeze to go ahead. meetings weekly status meeting - 10/02/2006 - (last meeting notes) bon echo status meeting - 10/03/2006 - (last meeting notes) ...

2006-10-20 - Archive of obsolete content
summary: mozilla.dev.platform - october 14th to october 20th 2006 announcements no announcements this week. traffic october 14, 2006, 6:53pm - ed notes that, on windows, composer 0.1's reccomended install directory needs to be different than those noted in the release notes. this is a xulrunner 1.8.0.4 application. benjamin smedberg would like to know what paths were used. started wed, oct 18 2006 9:38 am - a xulrunner developer, frank, discusses his desire to make xul/browser based applications. he wants to be able to build applications that will run inside the browser. nickolay ponomarev, benjamin smedberg, axel hecht clarify some misconceptions about front-end and back-end programming with xulrunner, including the difficulty of writing the backends in c++ (since that would require ...

2006-12-01 - Archive of obsolete content
lorne kates replies, pointing to the existing faq for this newsgroup. meetings no meetings this week ...

2006-11-03 - Archive of obsolete content
the aim of the group is to develop a new, higher standard for the validation which is done before certificate issuance, called extended validation. ...

2006-10-27 - Archive of obsolete content
summary: mozilla.dev.apps.calendar - october 20 - october 27, 2006 announcements calendar test day october 31st a test date has been set for october 31st. more information can be found here. discussions importing outlook address files a discussion was started to attempt the export of outlook datae from ms outlook. storage calendar optimization a general discussion on optimization of widgets, java and the core of calendar's database. meetings no meetings were scheduled this week. authors mark paruzel yi (eric) shen [back to weekly summaries ] ...

Writing a plugin for Mac OS X - Archive of obsolete content
this article is adapted from josh aas's blog post writing an npapi plugin for mac os x. before you go on reading this article, you may wish to grab the sample code located here, as it will be referenced during this tutorial. the sample is posted under a bsd-style license that means you can use it for anything, even if you don't plan to release your source code. getting started if you check out the mozilla source code in mac os x, you can simply open basicplugin.xcodeproj in xcode, click build, and you're done. xcode will create a "build" directory next to the project file, and if you built it in release mode, that folder in turn contains a "release" directory with the plugin inside it. to install the plugin, just copy it into one of these two locations: /library/internet plugins/...

XEmbed Extension for Mozilla Plugins - Archive of obsolete content
call, the window parameter will be the xid of the hosting xembed window. as an implementation note, this is really the xid of a gtksocket window. in your plugin instance npp_getvalue call you need to make sure that you support the new nppvpluginneedsxembed value. more information is included on this below. hosting using gtk2.x included below are a couple of code snippits that should help you get started as well as some hints on building a successful plugin. please use the following diagram as a reference: as you can see from the diagram above, it's pretty easy to set up a plugin using gtk2. the general idea is that you use the xid that was passed into your npp_setwindow() call and create a gtkplug to host inside of that socket. since the gtkplug is just a container, you can add your own widgets...

Atomic RSS - Archive of obsolete content
atomic rss uses atom as an rss module. it brings in atom elements into rss, adding the advantages of atom to rss while maintaining backwards compatibility. documentation selected articles atomic rss tim bray talks about using atom 1.0 as a micro format and extension module for rss 2.0; keeping rss 2.0 as your sydication format but bringing in and using selected atom 1.0 elements. ...

Content - Archive of obsolete content
the rss content module provides facilities to include content for an <item>. but doing this in more efficient ways. documentation selected articles why rss content module is popular - including html contents charles iliya krempeaux talks about the rss content module, why it is popular among some, and how it is used to include html contents. ...

Slash - Archive of obsolete content
the rss slash module is popular among slash based blogs and blogs imitating the feel for slashdot. slash is the engine behind the famous slashdot. documentation selected articles up to 10 why rss slash is popular: counting your comments charles iliya krempeaux talks about the rss slash module, why it is popular among some, and how it is used to give a count for your comments (2005-08-22). ...

Well-Formed Web - Archive of obsolete content
the well-formed web rss module provides facilities for <item> level commenting: for linking to comments contained in an external rss feed, and for posting new comments. documentation selected articles why well-formed web rss module is popular - syndicating your comments charles iliya krempeaux talks about the rss well-formed web module, why it is popular among some, and how it is used to link to your comments (2005-08-22). ...

RSS - Archive of obsolete content
really simple syndication (rss) is a popular html-like xml-based data format used for syndication. rss has a sordid history and a multitude of different incompatible rss versions. (some being based on rdf, but most only being based on xml.) nonetheless, rss is an extremely popular format that is used for syndicating news, blog posts, ipradio, and iptv, with an amazing amount of momentum. documentation why rss slash is popular - counting your comments charles iliya krempeaux talks about the rss slash module, why it is popular among some, and how it is used to give a count for your comments. ...

SAX - Archive of obsolete content
r); after you created the sax parser, you need to set the handlers for the events you're interested in and fire off the parsing process. all functionality is available through the nsisaxxmlreader interface. set the handlers handlers are user-defined objects implementing sax handler interfaces, depending on what kind of information they need to get from the parser. after the parsing process is started, handlers receive a series of callbacks for the content of xml being parsed. the following handlers are available: interface purpose nsisaxcontenthandler receive notification of the logical content of a document (e.g. elements, attributes, whitespace, and processing instructions). nsisaxdtdhandler receive notification of basic dtd-related events. nsis...

Table Reflow Internals - Archive of obsolete content
e the continuations were created when the row group created the row's continutation. a cell is incomplete because its block is incomplete. the block uses the overflow lines mechanism (mentioned above) for its continued children there are two splitting scenarios for a table an incomplete cells block causes the cell, row, row group, table, outer table to be incomplete a truncated row or a row that started too far down the page causes the row group, table, outer table to be incomplete. original document information author(s): chris karnaze last updated aug 7, 2002 ...

Common Firefox theme issues and solutions - Archive of obsolete content
the purpose of this page is to provide provide theme developers with notes on how to fix common issues. it is a companion document to the amo editors guide common theme problems, which provides editors with "boilerplate" copy and paste review notes for common theme issues. this document was started on july 27, 2012 so it will take some time to completely fill in and some issues still need to have solutions written for them. operating system specific issues windows 7 windows 7 aero missing right-hand title bar buttons when tabs are on top and the menu bar is disabled, firefox is missing the min/max/restore/close button on the right side of the title bar. please see the following threads on mozillazine for solutions to this issue: http://forums.mozillazine.org/viewtopic.php?f=18&t=2131121 h...

Create Your Own Firefox Background Theme - Archive of obsolete content
ith the browser ui. firefox may reveal more of the upper portion of the image if the find bar is open or if an extension adds more height to the bottom of the window. the left-hand side of the image should have the most important information—as a user increases the width of the browser window, the browser reveals more of the right-hand side of the image. submitting your theme images to get started submitting your images, go to the theme submission page: name your theme — pick a unique name for your theme. duplicate names are not allowed, so you may need to try a few times to find a unique name. pick a category and tags — select a category and enter some tags that best describe your theme. keep in mind that a reviewer may reject your theme if it is obvious that your category and/or ...

Creating a Skin for Firefox - Archive of obsolete content
he interface; instead, it just defines how the interface looks. you can't change what happens when the user right clicks on an image, but you can change the look of the right click menu (make it blue with pink polka dots, for example). if you want to change the functionality of firefox, you'll have to look into modifying the chrome, which is beyond the scope of this document. contents getting started original document information author(s): neil marshall and tucker lee other contributors: brent marshall, cdn (http://themes.mozdev.org), jp martin, boris zbarsky, asa dotzler, wesayso, david james, dan mauch, anders conbere, tim regula (http://www.igraphics.nn.cx) copyright information: copyright 2002-2003 neil marshall, permission given to mdc to migrate into the wiki april 2005 via email. ...

Using SSH to connect to CVS - Archive of obsolete content
eed to find an alternative solution. if you're typing the commands directly (as opposed to storing them in a batch file that you call), you'll need to replace the occurances of "%%" in the first line with "%". finally, note that ssh-add needs the environment variable home to be set with the cygwin path to your cygwin home directory. mozillabuild if you're using mozillabuild, ssh-agent should be started when you run the start-msvc???.bat file. you should be prompted to enter your passphrase. mozillabuild 1.2 contains a bug that will stop ssh-agent from automatically starting with msys. to fix this, apply this diff to c:\mozilla-build\msys\etc\profile.d\profile-sshagent.sh. ...

Using workers in extensions - Archive of obsolete content
it starts by setting up an interval handler (in lines 26-28) that calls refreshinformation() every 10 minutes. then it sets the worker's onmessage event handler to a function which looks at the event passed into it, and does one of two things: if there is a data field on the event, the stock symbol being tracked is set to the upper cas...

XForms - Archive of obsolete content
ons, 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 troubleshooting common problems with xforms forms. mozilla xforms specials explains where, and how, mozilla xforms deviates or extends the xforms 1.0 specification. xforms custom controls custom controls lets the form author "skin...

Index - Game development
g three, including setting up a development environment, structuring the necessary html, the fundamental objects of three, and how to build up a basic demo. 22 explaining basic 3d theory 3d, coordinates, textures, basics, fragment, lighting, primitives, rendering, theory, vertex, vertices this article explains all of the basic theory that's useful to know when you are getting started working with 3d. 23 glsl shaders beginner, glsl, opengl, shader, texture shader, three.js, vertex shader shaders use glsl (opengl shading language), a special opengl shading language with syntax similar to c. glsl is executed directly by the graphics pipeline. there are two types of shaders: vertex shaders and fragment (pixel) shaders. vertex shaders transform shape positions...

Game promotion - Game development
king part in competitions will not only level up your gamedev skills and let you meet new devs to befriend and learn from — and it will also get you involved in the community. if you make a good game for a competition and win some prizes in the process your game will automatically be promoted by the organizers and other attendees. you'll be rich and famous, or so they say. many great games get started as a quick, sloppy demo submitted to a competition. if both the idea and the execution are good enough, you will succeed. plus competitions generally require games to follow a mandatory theme, so you can get creative around a theme if you are stuck for ideas. website and blog you should definitely create your own website containing all the information about your games, so people can see what yo...

Explaining basic 3D theory - Game development
coordinate system 3d essentially is all about representations of shapes in a 3d space, with a coordinate system used to calculate their position. webgl uses the right-hand coordinate system — the x axis points to the right, the y axis points up, and the z axis points out of the screen, as seen in the above diagram. objects different types of objects are built using vertices. a vertex is a point in space having its own 3d position in the coordinate system and usually some additional information that defines it. ...

Building up a basic demo with Three.js - Game development
-in helper functions to help you implement common 3d functionality more quickly. in this article we'll take you through the real basics of using three, including setting up a development environment, structuring the necessary html, the fundamental objects of three, and how to build up a basic demo. note: we chose three because it is one of the most popular webgl libraries, and it is easy to get started with. we are not trying to say it is better than any other webgl library available, and you should feel free to try another library, such as copperlicht, glge, or playcanvas. environment setup to start developing with three.js, you don't need much. you should: make sure you are using a modern browser with good webgl support, such as the latest firefox or chrome. create a directory to store...

3D games on the Web - Game development
for more, see webxr device api. there's also the building up a basic demo with a-frame article showing you how easy it is to build 3d environments for virtual reality using the a-frame framework. the rise of libraries and frameworks coding raw webgl is fairly complex, but you'll want to get to grips with it in the long run, as your projects get more advanced (see our webgl documentation to get started.) for real-world projects you'll probably also make use of a framework to speed up development and help you manage the project you're working on. using a framework for 3d games also helps optimize the performance as a lot is taken care of by the tools you use, so you can focus on building the game itself. the most popular javascript 3d library is three.js, a multi-purpose tool that makes common ...

Desktop gamepad controls - Game development
e start button the relevant function will be called to begin the game, and the same approach is used for turning the audio on and off. there's an option wired up to show screengamepadhelp, which holds an image with all the button controls explained — if the y button is pressed and held, the help becomes visible; when it is released the help diappears. on-screen instructions when the game is started, some introductory text is shown that shows you available controls — we are already detecting if the game is launched on desktop or mobile then showing a relevant message for the device, but we can go even further, to allow for the presence of a gamepad: create() { // ... if(this.game.device.desktop) { if(gamepadapi.active) { movetext = 'dpad or left stick\nto move'...

Unconventional controls - Game development
by javascript developers visiting demo booths at conferences around the world. as well as being great for virtual interfaces, it can also be used for a casual 2d gaming experiences. it would be very difficult to do everything with only your hands, but it's totally doable for the simple captain roger's gameplay — steering the ship and shooting the bullets. there's good hello world and getting started javascript tutorials available on the leap motion documentation pages, which will get you through the basics. you can also check out the tutorial about using leap motion plugin for kiwi.js, or the case study of building a web game with leap motion and pixi.js. be sure to visit the leapjs repository on github to learn about the javascript client for the leap motion controller and read the document...

Implementing game control mechanisms - Game development
are loaded into the index file in this exact order. the first one initializes phaser, the second preloads all the assets, the third one controls the main menu welcoming the player, and the fourth controls the actual gameplay. every state has its own default methods: preload(), create(), and update(). the first one is needed for preloading required assets, create() is executed once the state had started, and update() is executed on every frame. for example, you can define a button in the create() function: create: function() { // ... var buttonenclave = this.add.button(10, 10, 'logo-enclave', this.clickenclave, this); // ... } it will be created once at the start of the game, and will execute this.clickenclave() action assigned to it when clicked, but you can also use the mouse's pointer ...

2D breakout game using pure JavaScript - Game development
next » ...

Buttons - Game development
n, sets the ball's initial velocity and set the playing variable to true. finally for this section, go back into your create() function, find the ball.body.velocity.set(150, -150); line, and remove it. you only want the ball to move when the button is pressed, not before! keeping the paddle still before the game starts it works as expected, but we can still move the paddle when the game hasn't started yet, which looks a bit silly. to stop this, we can take advantage of the playing variable and make the paddle movable only when the game has started. to do that, adjust the update() function like so: function update() { game.physics.arcade.collide(ball, paddle, ballhitpaddle); game.physics.arcade.collide(ball, bricks, ballhitbrick); if(playing) { paddle.x = game.input.x || ga...

Randomizing gameplay - Game development
point you would have learnt the basics of phaser and the logic behind simple 2d games. exercises to follow you can do a lot more in the game — add whatever you feel would be best to make it more fun and interesting. it's a basic intro scratching the surface of the countless helpful methods that phaser provides. below are some suggestions as to how you could expand our little game, to get you started: add a second ball or paddle. change the color of the background on every hit. change the images and use your own. grant extra bonus points if bricks are destroyed rapidly, several-in-a-row (or other bonuses of your choosing.) create levels with different brick layouts. be sure to check the ever growing list of examples and the official documentation, and visit the html5 gamedevs forums ...

2D breakout game using Phaser - Game development
next » ...

Microsoft Internet Explorer - MDN Web Docs Glossary: Definitions of Web-related terms
vailable on mac and unix, microsoft discontinued those versions in 2003 and 2001 respectively. ...

Assessment: Accessibility troubleshooting - Learn web development
module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix. prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, an understanding of the previous articles in the course. objective: to test basic knowledge of accessibility fundamentals. starting point to get this assessment started, you should go and grab the zip containing the files that comprise the example. decompress the contents into a new directory somewhere on your local computer. alternatively, you could use a site like jsbin or glitch to do your assessment. you could paste the html, css, and javascript into one of these online editors. if the online editor you are using doesn't have a separate css/js panel, feel f...

Mobile accessibility - Learn web development
right with a smooth motion to enter the local content menu. swipe right until you find the "headings and landmarks" option. double-tap to select it. now you'll be able to swipe left and right to move between headings and aria landmarks. to go back to the default mode, enter the local context menu again by swiping up and right, select "default", and then double-tap to activate. note: see get started on android with talkback for more complete documentation. ios voiceover a mobile version of voiceover is built into the ios operating system. to turn it on, go to your settings app and select accessibility > voiceover. press the voiceover slider to enable it (you'll also see a number of other options related to voiceover on this page). note: some older ios devices have the voiceover menu at...

What is accessibility? - Learn web development
...

Accessibility - Learn web development
remains accessible, regardless of who and how the web is accessed. the firefox accessibility inspector is a very useful tool for checking out accessibility issues on web pages. the following video provides a nice introduction to it: 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 get the most out of this module, it would be a good idea to either work through at least the first two modules of the html, css, and javascript topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics. note: if you are working on a computer/tablet/other devices where you don't have the abili...

A cool-looking box - Learn web development
me more practice in creating cool-looking boxes by trying to create an eye-catching box. prerequisites: before attempting this assessment, you should have already worked through all the articles in this module. objective: to test comprehension of the css box model and other box-related features such as borders and backgrounds. starting point to get this assessment started, you should: make local copies of the starting html and css — save them as index.html and style.css in a new directory. alternatively, you could use a site like jsbin or glitch to do your assessment. you could paste the html and fill in the css into one of these online editors. if the online editor you are using doesn't have a separate css panel, feel free to put it in a <style> element in...

Cascade and inheritance - Learn web development
ed above — this can be achieved by using !important in their rules. test your skills! we have covered a lot in this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: the cascade. what's next if you understood most of this article, then well done — you've started getting familiar with the fundamental mechanics of css. next up, we'll look at selectors in detail. if you didn't fully understand the cascade, specificity, and inheritance, then don't worry! this is definitely the most complicated thing we've covered so far in the course, and is something that even professional web developers sometimes find tricky. we'd advise that you return to this article a ...

Creating fancy letterheaded paper - Learn web development
in this assessment we'll challenge you to create an online template to achieve such a look. prerequisites: before attempting this assessment you should have already worked through all the articles in this module. objective: to test comprehension of css box model, and other box-related features such as implementing backgrounds. starting point to get this assessment started, you should: make local copies of the html and css — save them as index.html and style.css in a new directory. save local copies of the top, bottom and logo images in the same directory as your code files. alternatively, you could use a site like jsbin or glitch to do your assessment. you could paste the html and fill in the css into one of these online editors. if the online editor you a...

Fundamental CSS comprehension - Learn web development
ted exercises that must be completed in order to create the final design — a business card/gamer card/social media profile. prerequisites: before attempting this assessment you should have already worked through all the articles in this module. objective: to test comprehension of fundamental css theory, syntax and mechanics. starting point to get this assessment started, you should: go and grab the html file for the exercise, and the associated image file, and save them in a new directory on your local computer. if you want to use your own image file and fill your own name in, you are welcome to — just make sure the image is square. grab the css resources text file — this contains a set of raw selectors and rulesets that you'll need to study and combine ...

Attribute selectors - Learn web development
li[class~="a"] will match a class of a but also a value that contains the class of a as part of a whitespace-separated list. it selects the second and third list items. substring matching selectors these selectors allow for more advanced matching of substrings inside the value of your attribute. for example, if you had classes of box-warning and box-error and wanted to match everything that started with the string "box-", you could use [class^="box-"] to select them both (or [class|="box"] as described in section above). selector example description [attr^=value] li[class^="box-"] matches elements with an attr attribute (whose name is the value in square brackets), whose value begins with value. [attr$=value] li[class$="-box"] matches elemen...

CSS values and units - Learn web development
s. i have then set the boxes to have different opacity values — notice how the background shows through more when the alpha channel value is smaller. in this example, try changing the alpha channel values to see how it affects the color output. note: at some point modern browsers were updated so that rgba() and rgb(), and hsl() and hsla() (see below), became pure aliases of each other and started to behave exactly the same. so for example both rgba() and rgb() accept colors with and without alpha channel values. try changing the above example's rgba() functions to rgb() and see if the colors still work! which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can a...

CSS building blocks - Learn web development
rders, debugging, and lots more. the aim here is to provide you with a toolkit for writing competent css and help you understand all the essential theory, before moving on to more specific disciplines like text styling and css layout. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should have: basic familiarity with using computers, and using the web passively (i.e. just looking at it, consuming the content.) a basic work environment set up as detailed in installing basic software, and an understanding of how to create and manage files, as detailed in dealing with files. basic familiarity with html, as discussed in the...

Flexbox - Learn web development
ht is available. making all columns in a multiple column layout adopt the same height even if they contain a different amount of content. as you'll see in subsequent sections, flexbox makes a lot of layout tasks much easier. let's dig in! introducing a simple example in this article we are going to get you to work through a series of exercises to help you understand how flexbox works. to get started, you should make a local copy of the first starter file — flexbox0.html from our github repo — load it in a modern browser (like firefox or chrome), and have a look at the code in your code editor. you can see it live here also. you'll see that we have a <header> element with a top level heading inside it, and a <section> element containing three <article>s. we are going to use these to crea...

Grids - Learn web development
previous overview: css layout next css grid layout is a two-dimensional layout system for the web. it lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. this article will give you all you need to know to get started with page layout. prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css and styling boxes.) objective: to understand the fundamental concepts behind grid layout systems, and how to implement a grid layout using css grid. what is grid layout? a grid is a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements. they help us to create designs where elements don’...

How CSS works - Learn web development
th: 500px; width: calc(100% - 50px); } we will look at many more ways to support varying browsers in later lessons. and finally you've nearly finished this module; we only have one more thing to do. in the next article you'll use your new knowledge to restyle an example, testing out some css in the process. previous overview: first steps next in this module what is css? getting started with css how css is structured how css works using your new knowledge ...

Using your new knowledge - Learn web development
uestion you want help with. what's next? congratulations on finishing this first module. ...

What is CSS? - Learn web development
6.0legend full support full support no support no supportsee implementation notes.see implementation notes.uses a non-standard name.uses a non-standard name. what's next now that you have some understanding of what css is, let's move on to getting started with css, where you can start to write some css yourself. overview: first steps next in this module what is css? getting started with css how css is structured how css works using your new knowledge ...

CSS FAQ - Learn web development
oduction websites is not recommended — they have already created a huge web compatibility mess. for example, many developers only using the -webkit- prefixed version of a property when the non-prefixed version is supported across all browsers meant that a feature relying on that property would break in non-webkit-based browsers, completely needlessly. this problem got so bad that other browsers started to implement -webkit- prefixed aliases to improve web compatibility, as specified in the compatibility living standard. in fact most browsers now do not use css prefixes when implementing experimental features, instead implementing those features only on nightly browser versions or similar. if you need to use prefixes in your work, you are advised to write your code in a way that uses the prefi...

Typesetting a community school homepage - Learn web development
covered throughout this module by getting you to style the text for a community school's homepage. you might just have some fun along the way. prerequisites: before attempting this assessment you should have already worked through all the articles in this module. objective: to test comprehension of css text styling techniques. starting point to get this assessment started, you should: go and grab the html and css files for the exercise, and the provided external link icon. make a copy of them on your local computer. alternatively, you could use a site like jsbin or glitch to do your assessment. you could paste the html and fill in the css into one of these online editors, and use this url to point the background image. if the online editor you are using does...

Web fonts - Learn web development
let's go through it to see what it does: font-family: this line specifies the name you want to refer to the font as. you can put this as anything you like, as long as you use it consistently throughout your css. src: these lines specify the paths to the font files to be imported into your css (the url part), and the format of each font file (the...

Styling text - Learn web development
text styling fundamentals including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. we round off the module by looking at applying custom fonts to your page, and styling lists and links. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should already have basic familiarity with html, as discussed in the introduction to html module, and be comfortable with css fundamentals, as discussed in introduction to css. note: if you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an ...

What text editors are available? - Learn web development
ists mostly of text files, so for a fun, pleasant development experience you should choose your text editor wisely. the sheer number of choices is a bit overwhelming, since a text editor is so basic to computer science (yes, web development is computer science). ideally, you'd try as many editors as you can and get a feel for what suits your workflow. but we'll give you some pointers for getting started. here are the primary questions you should consider: which os (operating system) do i want to work with? what kind of technologies do i want to manipulate? what kind of basic features do i expect from my text editor? do i want to add extra features to my text editor? do i need support/help while using my text editor? does my text editor's look-and-feel matter to me? notice we didn't me...

How do you upload your files to a web server? - Learn web development
using the command line. acrosync is one such tool, and it is available for windows and macos. again, you would have to get the connection credentials from your hosting provider, but this way you'd have a gui to enter them in. github github allows you to publish websites via github pages (gh-pages). we've covered the basics of using this in the publishing your website article from our getting started with the web guide, so we aren't going to repeat it all here. however, it is worth knowing that you can also host a website on github, but use a custom domain with it. see using a custom domain with github pages for a detailed guide. other methods to upload files the ftp protocol is one well-known method for publishing a website, but not the only one. here are a few other possibilities: web...

What are browser developer tools? - Learn web development
ful suite of developer tools. these tools do a range of things, from inspecting currently-loaded html, css and javascript to showing which assets the page has requested and how long they took to load. this article explains how to use the basic functions of your browser's devtools. note: before you run through the examples below, open the beginner's example site that we built during the getting started with the web article series. you should have this open as you follow the steps below. how to open the devtools in your browser the devtools live inside your browser in a subwindow that looks roughly like this, depending on what browser you are using: how do you pull it up? three ways: keyboard: ctrl + shift + i, except internet explorer and edge: f12 macos: ⌘ + ⌥ + i ...

UI pseudo-classes - Learn web development
the full example looks like so: note: :enabled and :read-write are two more pseudo-classes that you'll probably rarely use, given that they describe the default states of input elements. radio and checkbox states — checked, default, indeterminate as we've seen in earlier articles in the module, radio buttons and checkboxes can be checked or unchecked. b...

Web forms — Working with user data - Learn web development
e them to their full potential. in the articles listed below, we'll cover all the essential aspects of web forms including marking up their html structure, styling form controls, validating form data, and submitting data to the server. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should at least work through our introduction to html. at this point you should find the introductory guides easy to understand, and also be able to make use of our basic native form controls guide. mastering forms however requires more than just html knowledge — you also need to learn some specific techniques to style form controls, and some s...

How the Web works - Learn web development
this theory is not essential to writing web code in the short term, but before long you'll really start to benefit from understanding what's happening in the background. clients and servers computers connected to the web are called clients and servers. ...

Document and website structure - Learn web development
s of your page (such as "a paragraph" or "an image"), html also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column"). this article looks into how to plan a basic website structure, and write the html to represent this structure. prerequisites: basic html familiarity, as covered in getting started with html. html text formatting, as covered in html text fundamentals. how hyperlinks work, as covered in creating hyperlinks. objective: learn how to structure your document using semantic tags, and how to work out the structure of a simple website. basic sections of a document webpages can and will look pretty different from one another, but they all tend to share similar st...

Images in HTML - Learn web development
ment, used to embed a simple image in a webpage. in this article we'll look at how to use it in depth, including the basics, annotating it with captions using <figure>, and detailing how it relates to css background images. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html.) objective: to learn how to embed simple images in html, annotate them with captions, and how html images relate to css background images. how do we put an image on a webpage? in order to put a simple image on a webpage, we use the <img> element. this is an empty element (meaning that it has no text content or closing tag) that requires a minimum of one attribute to...

Responsive images - Learn web development
le image on both wide screen and narrow screen displays, as shown below: note: you should use the media attribute only in art direction scenarios; when you do use media, don't also offer media conditions within the sizes attribute. why can't we just do this using css or javascript? when the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's css and javascript. that mechanism is useful in general for reducing page load times, but it is not helpful for responsive images — hence the need to implement solutions like srcset. for example, you couldn't load the <img> element, then detect the viewport width with javascript, and then dynamically change the source image to a smaller one if desired. by then, ...

Multimedia and Embedding - Learn web development
b come alive with more interesting content! this module explores how to use html to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire webpages. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should have a reasonable understanding of the basics of html, as previously covered in introduction to html. if you've not worked through this module (or something similar), work through it first, then come back! note: if you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try ou...

HTML table basics - Learn web development
prerequisites: the basics of html (see introduction to html). objective: to gain basic familiarity with html tables. what is a table ? a table is a structured set of data made up of rows and columns (tabular data). a table allows you to quickly and easily look up values that indicate some kind of connection between different types of data, for example a person and their age, or a day of the week, or the timetable for a local swimming pool. ...

Making asynchronous programming easier with async and await - Learn web development
imeoutpromise(3000); const timeoutpromise2 = timeoutpromise(3000); const timeoutpromise3 = timeoutpromise(3000); await timeoutpromise1; await timeoutpromise2; await timeoutpromise3; } here we store the three promise objects in variables, which has the effect of setting off their associated processes all running simultaneously. next, we await their results — because the promises all started processing at essentially the same time, the promises will all fulfill at the same time; when you run the second example, you'll see the alert box reporting a total run time of just over 3 seconds! you'll have to test your code carefully, and bear this in mind if performance starts to suffer. another minor inconvenience is that you have to wrap your awaited promises inside an async function. a...

General asynchronous programming concepts - Learn web development
y is this? the answer is because javascript, generally speaking, is single-threaded. at this point, we need to introduce the concept of threads. threads a thread is basically a single process that a program can use to complete tasks. each thread can only do a single task at once: task a --> task b --> task c each task will be run sequentially; a task has to complete before the next one can be started. as we said earlier, many computers now have multiple cores, so can do multiple things at once. programming languages that can support multiple threads can use multiple cores to complete multiple tasks simultaneously: thread 1: task a --> task b thread 2: task c --> task d javascript is single-threaded javascript is traditionally single-threaded. even with multiple cores, you could only get i...

Graceful asynchronous programming with Promises - Learn web development
n promises using the promise() constructor. the main situation in which you'll want to do this is when you've got code based on an old-school asynchronous api that is not promise-based, which you want to promis-ify. this comes in handy when you need to use existing, older project code, libraries, or frameworks along with modern promise-based code. let's have a look at a simple example to get you started — here we wrap a settimeout() call with a promise — this runs a function after two seconds that resolves the promise (using the passed resolve() call) with a string of "success!". let timeoutpromise = new promise((resolve, reject) => { settimeout(function(){ resolve('success!'); }, 2000); }); resolve() and reject() are functions that you call to fulfil or reject the newly-created pr...

Asynchronous JavaScript - Learn web development
in this module we take a look at asynchronous javascript, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites asynchronous javascript is a fairly advanced topic, and you are advised to work through javascript first steps and javascript building blocks modules before attempting this. if you are not familiar with the concept of asynchronous programming, you should definitely start with the general asynchronous programming concepts article in this module. if you are, then you can probably skip to the introducing asynchronous jav...

Image gallery - Learn web development
by getting you to build a fairly common item you'll see on a lot of websites — a javascript-powered image gallery. prerequisites: before attempting this assessment you should have already worked through all the articles in this module. objective: to test comprehension of javascript loops, functions, conditionals, and events. starting point to get this assessment started, you should go and grab the zip file for the example, unzip it somewhere on your computer, and do the exercise locally to begin with. alternatively, you could use a site like jsbin or glitch to do your assessment. you could paste the html, css and javascript into one of these online editors. if the online editor you are using doesn't have separate javascript/css panels, feel free to put them inl...

JavaScript building blocks - Learn web development
turning our attention to commonly-encountered types of code blocks such as conditional statements, loops, functions, and events. you've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should have some familiarity with the basics of html and css, and you should have also worked through our previous module, javascript first steps. note: if you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as ...

Video and Audio APIs - Learn web development
you to control video and audio players programmatically — 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 ...

Client-side web APIs - Learn web development
rating system the site is running on, or manipulating data from other web sites or services. in this module, we will explore what apis are, and how to use some of the most common apis you'll come across often in your development work. 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 get the most out of this module, you should have worked your way through the previous javascript modules in the series (first steps, building blocks, and javascript objects). those modules typically involve simple api usage, as it is often difficult to write client-side javascript examples without them. for this tutorial, we will assume that you are knowledgable about the core...

A first splash into JavaScript - Learn web development
en it in both your text editor and your web browser. at the moment you'll see a simple heading, paragraph of instructions and form for entering a guess, but the form won't currently do anything. the place where we'll be adding all our code is inside the <script> element at the bottom of the html: <script> // your javascript goes here </script> adding variables to store our data let's get started. first of all, add the following lines inside your <script> element: let randomnumber = math.floor(math.random() * 100) + 1; const guesses = document.queryselector('.guesses'); const lastresult = document.queryselector('.lastresult'); const loworhi = document.queryselector('.loworhi'); const guesssubmit = document.queryselector('.guesssubmit'); const guessfield = document.queryselector('.guess...

Basic math in JavaScript — numbers and operators - Learn web development
a future article. for now, let's look at a quick example: <button>start machine</button> <p>the machine is stopped.</p> const btn = document.queryselector('button'); const txt = document.queryselector('p'); btn.addeventlistener('click', updatebtn); function updatebtn() { if (btn.textcontent === 'start machine') { btn.textcontent = 'stop machine'; txt.textcontent = 'the machine has started!'; } else { btn.textcontent = 'start machine'; txt.textcontent = 'the machine is stopped.'; } } open in new window you can see the equality operator being used just inside the updatebtn() function. in this case, we are not testing if two mathematical expressions have the same value — we are testing whether the text content of a button contains a certain string — but it is stil...

Silly story generator - Learn web development
s and applying it to creating a fun app that generates random silly stories. have fun! prerequisites: before attempting this assessment you should have already worked through all the articles in this module. objective: to test comprehension of javascript fundamentals, such as variables, numbers, operators, strings, and arrays. starting point to get this assessment started, you should: go and grab the html file for the example, save a local copy of it as index.html in a new directory somewhere on your computer, and do the assessment locally to begin with. this also has the css to style the example contained within it. go to the page containing the raw text and keep this open in a separate browser tab somewhere. you'll need it later. alternatively, you could u...

What went wrong? Troubleshooting JavaScript - Learn web development
results. these are often harder to fix than syntax errors, as there usually isn't an error message to direct you to the source of the error. okay, so it's not quite that simple — there are some other differentiators as you drill down deeper. but the above classifications will do at this early stage in your career. we'll look at both of these types going forward. an erroneous example to get started, let's return to our number guessing game — except this time we'll be exploring a version that has some deliberate errors introduced. go to github and make yourself a local copy of number-game-errors.html (see it running live here). to get started, open the local copy inside your favorite text editor, and your browser. try playing the game — you'll notice that when you press the "submit g...

JavaScript First Steps - Learn web development
ook like?", and "what can it do?", before moving on to taking you through your first practical experience of writing javascript. after that, we discuss some key building blocks in detail, such as variables, strings, numbers and arrays. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you don't need any previous javascript knowledge, but you should have some familiarity with html and css. you are advised to work through the following modules before starting on javascript: getting started with the web (which includes a really basic javascript introduction). introduction to html. introduction to css. note: if you are working ...

Inheritance in JavaScript - Learn web development
ement inheritance in javascript. prototypal inheritance so far we have seen some inheritance in action — we have seen how prototype chains work, and how members are inherited going up a chain. but mostly this has involved built-in browser functions. how do we create an object in javascript that inherits from another object? let's explore how to do this with a concrete example. getting started first of all, make yourself a local copy of our oojs-class-inheritance-start.html file (see it running live also). inside here you'll find the same person() constructor example that we've been using all the way through the module, with a slight difference — we've defined only the properties inside the constructor: function person(first, last, age, gender, interests) { this.name = { firs...

Working with JSON - Learn web development
sion inside json, not just arrays or objects. so for example, a single string or number would be a valid json object. unlike in javascript code in which object properties may be unquoted, in json only quoted strings may be used as properties. active learning: working through a json example so, let's work through an example to show how we could make use of some json data on a website. getting started to begin with, make local copies of our heroes.html and style.css files. the latter contains some simple css to style our page, while the former contains some very simple body html: <header> </header> <section> </section> plus a <script> element to contain the javascript code we will be writing in this exercise. at the moment it only contains two lines, which grab references to the <header> a...

Introducing JavaScript objects - Learn web development
t is important to understand if you want to go further with your knowledge of the language, therefore we've provided this module to help you. here we teach object theory and syntax in detail, then look at how to create your own objects. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should have some familiarity with html and css. you are advised to work through the introduction to html and introduction to css modules before starting on javascript. you should also have some familiarity with javascript basics before looking at javascript objects in detail. before attempting this module, work through javascript first steps and ...

What is web performance? - Learn web development
ally means loading your web site assets in a sensible order so that the user can start to actually use it really quickly. any other assets can continue to load in the background while the user gets on with primary tasks, and sometimes we only load assets when they are actually needed (this is called lazy loading). the measurement of how long it takes the site to get to a usable start after it has started loading is called time to interactive. smoothness and interactivity: does the application feel reliable and pleasurable to use? is the scrolling smooth? are buttons clickable? are pop-ups quick to open up, and do they animate smoothly as they do so? there are a lot of best practices to consider in making apps feel smooth, for example using css animations rather than javascript for animation, and...

Web performance - Learn web development
. learning pathway while knowing html, css, and javascript is needed for implementing many web performance improvement recommendations, knowing how to build applications is not a necessary pre-condition for understanding and measuring web performance. we do however recommend that before you work through this module, you at least get a basic idea of web development by working through our getting started with the web module. it would also be helpful to go a bit deeper into these topics, with modules such as: introduction to html css first steps javascript first steps once you've worked through this module, you'll probably be excited to go deeper into web performance — you can find a lot of further teachings in our main mdn web performance section, including overviews of performance apis...

Server-side website programming - Learn web development
pages would be extremely inefficient, so instead such sites display static templates (built using html, css, and javascript), and then dynamically update the data displayed inside those templates when needed, such as when you want to view a different product on amazon. in the modern world of web development, learning about server-side development is highly recommended. ...

Handling common accessibility problems - Learn web development
o refresh the current page and begin from the top again. nvda has many keyboard commands, and we won't list them all here. the basic ones you'll need for web page testing are in the following table. in the keyboard shortcuts, "nvda" means "the nvda modifier". most common nvda keyboard shortcuts keyboard shortcut description nvda + q turn nvda off again after you've started it. nvda + up cursor read the current line. nvda + down cursor start reading at the current position. up cursor and down cursor, or shift + tab and tab move to previous/next item on page and read it. left cursor and right cursor move to previous/next character in current item and read it. shift + h and h move to previous/next heading and...

Handling common HTML and CSS problems - Learn web development
es this feature). prefixed features were never supposed to be used in production websites — they are subject to change or removal without warning, and cause cross browser issues. this is particularly a problem when developers decide to only use say, the -webkit- version of a property — meaning that the site won't work in other browsers. this actually happens so much that other browsers have started to implement -webkit- prefixed versions of various css properties, so they will work with such code. usage of prefixes by browser vendors has declined recently precisely because of these types of problems, but there are still some that need attention. if you insist on using prefixed features, make sure you use the right ones. you can look up what browsers require prefixes on mdn reference pages,...

Strategies for carrying out testing - Learn web development
page, and start looking at the data you've collected about your site (you need to leave a little bit of time for some data to actually be collected, of course.) by default, you should see the reporting tab, like so: there is a huge amount of data you could look at using google analytics — customized reports in different categories, etc. — and we haven't got time to discuss it all. getting started with analytics provides some useful guidance on reporting (and more) for beginners. you should also be encouraged to look at the different options on the left hand side, and see what kinds of data you can find out. for example, you can find out what browsers and operating systems your users are using by selecting audience > technology > browser & os from the left hand menu. note: when using go...

Cross browser testing - Learn web development
ut?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites you should really learn the basics of the core html, css, and javascript languages first before attempting to use the tools detailed here. guides introduction to cross browser testing this article starts the module off by providing an overview of the topic of cross browser testing, answering questions such as "what is cross browser testing?", "what are the most common types ...

Command line crash course - Learn web development
ewing the command line for the first time can be a daunting experience: a blank screen and a blinking cursor, with very little obvious help available on what to do. on the surface they’re far from welcoming but there’s a lot you can do with them, and we promise that, with a bit of guidance and practise, using them will get easier! this is why we are providing this chapter — to help you get started in this seemingly unfriendly environment. where did the terminal come from? the terminal originates from around the 1950s-60s and its original form really doesn’t resemble what we use today (for that we should be thankful). you can read a bit of the history on wikipedia’s entry for computer terminal. since then, the terminal has remained a constant feature of all operating systems — from...

Deploying our app - Learn web development
me deployment platforms will include a specific method for testing as part of their pipeline. products like github, gitlab, etc., all support running tests against individual commits. as this project is deploying to netlify, and netlify only asks about the build command, we will have to make the tests part of the build. if the test fails, the build fails, and netlify won’t deploy. let’s get started. go to your package.json file and open it up. find your scripts member, and update it so that it contains the following test and build commands: "scripts": { … "test": "node tests/*.js", "build": "npm run test && parcel build src/index.html" } now of course we need to add the test to our codebase; create a new directory in your root directory called tests: mkdir te...

Client-side tooling overview - Learn web development
ort 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 example are pretty good, complete, and easy to follow. some documentation however can be rather technical and academic and not a good fit for your learning needs. instead, you might want to find some dedicated tutorials on getting started with particular types of tools. great starting places is to search web sites like css tricks, dev, freecodecamp, and smashing magazine, as they’re tailored to the web development industry. again, you’ll probably go through several different tools as you search for the right ones for you, trying them out to see if they make sense, are well-supported, and do what you want them to do. this is f...

Package management basics - Learn web development
ride or lock certain packages), github also offers a package registry service, and there will be likely more options appearing as time goes on. what is important is that you ensure you've chosen the best registry for you. many projects will use npm, and we’ll stick to this in our examples throughout the rest of the module. using the package ecosystem let’s run through an example to get you started with using a package manager and registry to install a command line utility. parcel is a(nother) tool that developers commonly use in their development process. parcel is clever in that it can watch the contents of our code for calls to dependencies and automatically installs any dependencies it sees that our code needs. it can also automatically build our code. in our previous chapter we insta...

Understanding client-side web development tools - Learn web development
client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line. we finish up by providing a complete toolchain example showing you how to get productive. get started now, with our "client-side tooling overview" prerequisites you should really learn the basics of the core html, css, and javascript languages first before attempting to use the tools detailed here. 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 guides 1. client-side tooling overview in this ...

Index
on, end-of-life, publication there may be occasions where you want to retire one of your extensions. this article suggests the steps you might want to follow, as well as offering some pointers to a suitable timeline. 682 submitting an add-on add-ons, beginner, tutorial, webextensions this article walks through the process of publishing an add-on. if you just want to get started, head to the submit a new add-on page on amo. 683 source code submission add-ons, extensions, review policy, distribution to complete the review process at addons.mozilla.org (amo), reviewers must be able to read the code in your extension. some build processes render extension code difficult to read. these processes include minifying your code, as well as the use of module b...

Frequently Asked Questions for Lightweight themes
theme you want to undo, click the disable button. how do i provide feedback? we're always looking for ways to improve themes, and would love to hear what you think. visit the themes forum to send us your feedback. creating your own themes can i create my own theme? absolutely! all you need to do is create two graphics files in your favorite graphics editing program (e.g., photoshop). to get started read more about how to create a theme. are there any content guidelines? yes. we are big fans of creativity, but want to ensure that the art displayed in the themes gallery meets a basic set of guidelines. please review the terms of service and conditions of use for authoritative and complete language. do i still retain ownership over artwork that i upload? yes. your artwork will always be yo...

Lightweight themes
nitors can run to 3440px wide, to look good on these monitors, ensure the left of the image fades to a solid color. online image editor resources pixlr — pixlr offers professional and easy-to-use tools for creating and editing images within a browser. photoshop — tweak, rotate and touch up photos with photoshop® express, a free online photo editor. submitting your theme image to get started submitting your images, go to the theme submission page: name your theme — pick a unique name for your theme. duplicate names are not allowed, so you may need to try a few times to find a unique name. pick a category and tags — select a category and enter some tags that best describe your theme. keep in mind that a reviewer may reject your theme if it is obvious that your category and/or ...

Adding a new CSS property
or the property available. issues about how to write such a specification (including things such as whether it is appropriate to use prefixes or when properties should be inherited by default) are not covered here. if you need more details on any of the points mentioned here, a good place to find them is by looking at other changes in the version control history of the files mentioned. getting started first, you'll want to add an appropriate test entry to property_database.js. see the documentation at the top of the file and the other entries for examples. this will cause tests of your new property to be added to many of the mochitests in layout/style/test, which can be run with the command "./mach mochitest -f plain layout/style/". then, unless you're implementing a shorthand property, yo...

Application cache implementation overview
tempt for the manifest is scheduled after the document completely loads. marking entries as foreign when nscontentsink::processofflinemanifest() discovers that the url in the manifest attribute of the html tag is different from the manifest url the channel's nsiapplicationcache object belongs to, the entry the document has been loaded from is marked “foreign” and the page load is completely restarted. the load starts again from the top with a completely new channel. but this time the entry is not selected to load the top level document from. we search another, if available, potentially even in a different offline cache group. loading subresources of a document using offline cache each sub resource loading channel is set inheritapplicationcache flag. this flag is by default true, but it is dro...

Testopia
n. despite bugzilla 5.0 has already been released a few months ago, we don't plan to release a fix for testopia immediately, because it's currently under heavy work to make testopia a fully self-contained extension, which means that all tr_*.cgi scripts which are currently in the bugzilla/ root directory are being moved into extensions/testopia/lib/. this is not an trivial task, it takes time (it started in august 2014), and we decided that it was not a good idea to release half-baked code which still needs testing to make sure we didn't regress anything. the good news is that the current code in the git repository already works with bugzilla 5.0, and so if you upgraded to 5.0 already, and if you don't mind having a work-in-progress extension on your machine, you can decide to pull the code from...

Debugging Internet Explorer
...

Debugging on Mac OS X
instead, add the following to your $home/.lldbinit: # this automatically sources the mozilla project's .lldbinit as soon as lldb # starts or attaches to a mozilla app (that's in an object directory). # # this is mainly a workaround for xcode not providing a way to specify that # lldb should be run from a given directory. (xcode always runs lldb from "/", # regardless of what directory xcode was started from, and regardless of the # value of the "custom working directory" field in the scheme's run options. # therefore setting `settings set target.load-cwd-lldbinit true` can't help us # without xcode providing that functionality.) # # the following works by setting a one-shot breakpoint to break on a function # that we know will both run early (which we want when we start first start the # app) a...

Articles for new developers
to help you find the most critical stuff as quickly as possible, we've created this list of the articles you'll find most useful as you get yourself oriented and make your first contributions to the project. also, before you go any further, we'd like to welcome you to the mozilla community of developers! we look forward to your input! contributing to the mozilla code base this page should guide you through the initial steps of contributing to mozilla. ...

Eclipse CDT Manual Setup
d of the field labeled "command to get compiler specs". in cdt 8.3 (unreleased as of august 2013), there will be a more user-friendly way to specify this (see http://wiki.eclipse.org/cdt/user/newin83#toolchains). building the index once you see the end of the build output in the console tab and the build item has disappeared from the progress tab, you can start indexing the source. if indexing started automatically (see the progress tab), cancel it, since there seems to be a bug that makes it give bad results when it starts automatically at this stage. right-click the project root in the project explorer tab and select "index > rebuild". you will now see "indexing..." in the status bar at the bottom right and an indexing item in the progress tab. it will take 10 minutes or so on a decent devel...

Gecko Logging
rotate:n this limits the produced log files' size. only most recent n megabytes of log data is saved. we rotate four log files with .0, .1, .2, .3 extensions. note: this option disables 'append' and forces 'timestamp'. for example, if you want to specify "sync", "timestamp" and "rotate": set moz_log="example_logger:3,timestamp,sync,rotate:10" to adjust the logging after firefox has started, you can set prefs under the logging. prefix. for example, setting logging.foo to 3 will set the log module foo to start logging at level 3. the special boolean prefs logging.config.sync and logging.config.add_timestamp can be used to control the sync and timestamp properties described above. redirecting logging output to a file logging output can be redirected to a file by passing its path vi...

Contributing to the Mozilla code base
e should guide you through the initial steps of contributing to mozilla. welcome, we're delighted to see you! :) need help? the mozilla community prides itself on being an open, accessible, and friendly community for new participants. if you have any difficulties getting involved or finding answers to your questions, please come and ask your questions in our chatroom, where we can help you get started. we know even before you start contributing that getting set up to work on firefox and finding a bug that's a good fit for your skills can be a challenge. we're always looking for ways to improve this process: making mozilla more open, accessible, and easier to participate with. if you're having any trouble following this documentation, or hit a barrier you can't get around, please contact mike ...

Working with Mozilla source code
the articles below will help you get your hands on the mozilla source code, learn to navigate the code, and how to get the changes you propose checked into the tree. getting a pre-configured 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 newcomer...

Using the Browser API
when the mozbrowserloadend event fires, the latest page request has finished loading, and at this point we want to change the icon back to the reload icon (in this case we are just using a capital "r"). notice that this is also where we call the canmovebwd() and canmovefwd() functions we discussed earlier — it makes sense to updat...

mozbrowserloadstart
s 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 mozbrowserloadstart event is fired when the browser <iframe> starts to load a new page. this can be used when the embedder wants to start spinning a loading indicator, or update the ui in some other way to indicate loading has started. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean ...

mozbrowserscrollviewchange
hether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: state a domstring representing the current state of scrolling in the viewport — available values are started and stopped. example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscrollviewchange", function( event ) { console.log("scrolling has " + event.details.state + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange ...

MozBeforePaint
gecko 2.0 adds a new method for performing javascript controlled animations that synchronize not only with one another, but also with css transitions and smil animations being performed within the same window. usage outline in order to time your animation, the first thing you need to know is the time base; that is, the time at which your animation sequence started. you can determine this value by looking at window.mozanimationstarttime. this new property indicates the time, in milliseconds since epoch, at which all animations started in the specified window during the current refresh interval should be considered to have started running. with that value in hand, you can then schedule all your subsequent animation frames. whenever you're ready to refresh your animation, you call the window.req...

Overview of Mozilla embedding APIs
ns_error_failure ns_error_not_implemented public functions the following functions are available from the xpcom dll. ns_initembedding this function initializes the gecko embedding support. this must be the first function call made into gecko. ns_termembedding this function shuts down gecko and cleans up any remaining resources... currently, once gecko has been shutdown, it cannot be restarted in the same process space... this should change in the future. nsmemory nsmemory::alloc nsmemory::realloc nsmemory::free this helper class provides static accessors to the global nsmemory service. ns_getglobalcomponentmanager this function returns an instance of the component manager service. ns_convertasciitoucs2 this is a helper class which converts an...

Roll your own browser: An embedding how-to
ory are a couple of makefiles: basebrowser-unix basebrowser-win the xpinstall packager follows the same format. however in our case, we only have one named xpi package. after the build is done, you can change directory into mozilla/embedding/config, and do a make. this will produce a directory in dist named embed. it should include all of the base support that you need to get a web browser started up. included is the sample test application (gtkembed or winembed). what initializations do i have to do? somewhere during the start of your application, you must initialize xpcom. you will also want to shut this down when you quit. other initialization must be done to start up event queues and load some string bundles. all of this is somewhat generic and has been isolated into a static libra...

HTTP Cache
cacheentry::asyncopen consumer reference -- cacheentry::asyncopen (entry atomic): the opener is added to fifo, consumer reference ++ (dropped back after an opener is removed from the fifo) state == notloaded: state = loading when open_truncate flag was used: cachefile is created as 'new', state = empty otherwise: cachefile is created and load on it started cacheentry::onfileready notification is now expected state == loading: just do nothing and exit call to cacheentry::invokecallbacks cacheentry::invokecallbacks (entry atomic): called on: a new opener has been added to the fifo via an asyncopen call asynchronous result of cachefile open the writer throws the entry away the output stream of the entry has bee...

How to implement a custom autocomplete search component
there are actually two autocomplete mechanisms: an older mechanism that is part of the "xpfe" codebase and is used in older applications such as thunderbird and seamonkey. a newer and slightly simplified mechanism that is used in "toolkit" applications such as firefox and xulrunner. thunderbird 2.x and seamonkey 1.1.x support the toolkit interfaces, although they do not use the same autocomplete widget. ...

IME handling guide
d/or tip during composition may behave them odd. when a composition is committed and it receives notify_ime_of_composition_event_handled, tsftextstore clears the cache of contents and notifying tsf of merged text changes and the last selection change if they are not caused by composition. by this step, tsf and tip may sync its internal cache with actual contents. note that if new composition is started before notify_ime_of_composition_event_handled notification, tsftextstore handles the new composition with cached contents which may be different from actual contents. so, e.g., reconvertion around caret may not work as unexpectd in such case, but we don't have a good solution for this issue. on the other hand, tsftextstore cannot cache character rects since if there are a lot of characters, cac...

JavaScript-DOM Prototypes in Mozilla
the interface that the iid stored in the nsscriptnamespacemanager for this name represents (if the name is a class prototype, such as node). once the name of the parent interface is known (and the name is not nsisupports) the code will look up a property by that name on the global object. this will cause the code to recurse down along the parent chain of the interface of interest for the name we started out resolving (i.e. nswindowsh::globalresolve() will be called for every name on the parent chain). the result of this recursion is that by resolving the name htmlimageelement, we'll create the constructor htmlimageelement, htmlelement, element, and node, and the prototype properties on all those constructor will be correctly set up. this means that the next time the name of a class constructor i...

JavaScript Tips
properties whereas the above list are all string properties. xul also maps other useful properties and methods using xbl bindings; these vary from element to element. ...

AddonInstall
that this install will install. only available after downloading is complete. methods install() starts or continues the install process. the process will continue in the background until it fails, completes, one of the registered installlisteners pauses it, or the process is canceled by a call to the cancel() method. void install( ) cancel() cancels the install process, it cannot be restarted after this. void cancel( ) addlistener() adds a new installlistener if the listener is not already registered to monitor this specific addoninstall. void addlistener( in installlistener listener ) parameters listener the installlistener to add. removelistener() removes an installlistener if the listener is registered for monitoring this specific addoninstall. void removelistener( ...

Sqlite.jsm
ed value will be an array of mozistoragerow. executetransaction(func, type) this function is used to execute a database transaction. a transaction is a series of related statements treated as one functional unit. if the transaction succeeds, all the statements contained within it are committed as one unit. if the transaction fails, the database is rolled back to its state before the transaction started. this function receives the following arguments: func the function defining the transaction body. type the type of transaction to perform. this must be one of the transaction_* constants on the opened connection instance. valid values are transaction_deferred, transaction_immediate, transaction_exclusive. see the sqlite documentation for their meaning. the default is transaction_deferred. ...

Bootstrapping a new locale
we'll first navigate to the directory called "browser" by running the following commands one after the other from your command line: $ cd [ab-cd]/browser/chrome/browser to see what is contained in "browser" type $ ls and, you should see the following output ...

Index
2 svn for localizers intro, localization, svn, opensource welcome to the svn tutorial for localizers! here you'll learn the process of using svn to obtain mozilla website source files from the mozilla servers and pushing your localizations right back to them. first things first, we need to give you a brief introduction to what svn is and where you can find the necessary tools to get started. if you're already familiar with this information, skip ahead to mozilla's svn repositories. 33 uplifting a localization from central to aurora guide, localization, mozilla localizers who are working on l10n-central are responsible for getting their work onto the aurora repository. 34 web localizability internationalization, localizability, localization, web de...

Localizing with Mozilla Translator
platform that supports java 1.7 or above supports mozillatranslator also. if you decide to use mozillatranslator, be sure you have java 1.7 or above installed on your system. like most cat tools, mozillatranslator employs glossaries and translation memory to leverage your work from previous translations, thus cutting time and effort when localizing new versions of mozilla applications. getting started with mozillatranslator mt uses products as groups of localization files with a common root directory (for instance, you may have a product for thunderbird, other for seamonkey, other for dom, other for toolkit, etc.) you update your repository copy using your favorite repository tool, and then update the product(s) in mt. this will remove obsolete strings and files from the internal database o...

Localizing with Pontoon
are you a developer? read about implementing pontoon in your project or learn how to get involved on github. first steps pontoon's home page is very easy to use. to begin localizing the project, click on the persona icon and sign in. next, simply select the project you want to work on and your locale from the dropdown menus. pontoon will automatically open that locale's project for you to get started. note that for our purposes here, we'll be using firefox affiliates website to demo pontoon's functionality and workflow. and there it is, opened inside pontoon: main toolbar as you can see, most of the interface is taken by the website being translated. only the toolbar on top belongs to pontoon, containing the following items (from left to right): list of strings opens a sidebar with a ...

Localizing without a specialized tool
be in l10n-mozilla-1.9.2). $ hg clone http://bitbucket.org/mozillal10n/x-testing if there is an hg.mozilla.org repository with localization files, you can pull from it too: $ hg clone http://hg.mozilla.org/releases/l10n-mozilla-1.9.2/x-testing eventually, you should end up with a folder hierarchy described above in the folder structure section. you are now ready to start translating! getting started with compare-locales you are going to need to create the structure of your localization, where, one-by-one, each of the files needing localization will be copied. this directory structure needs to mimic the same as the en-us source files concerning localization. you will use a tool called compare-locales to do the comparison between your locale's files and the en-us reference. first, install com...

Localization quick start guide
welcome to mozilla localization (l10n for short)! whether you're here to start up your own localization in the mozilla project or to join the efforts of an existing localization, you've come to the right place. this guide is filled with all of the basic, technical information you need to get involved in the mozilla l10n program. we will take you through the steps to get started, from the initial environment setup to testing and releasing your own localization. along the way, you'll learn about the variety of projects you can contribute to and the tools used to localize them. when we get to specific examples, we'll take them from the firefox project, as it is the most widely localized project within mozilla. as you near the end of this guide, you should be able to make a change to firefo...

SVN for Localizers
if you're already familiar with this information, skip ahead to mozilla's svn repositories. ...

Creating localizable web applications
bad: ...

What every Mozilla translator should know
ther interesting way of getting help is the irc channel #l10n at irc.mozilla.org useful tools the l10n dashboard pontoon narro translate toolkit koala 0.1 mozillatranslator mercurial the hg is organized into several repositories, sometimes called branches. we have the main repository called mozilla-central (or trunk) where the day to day developing work is done. when a development is started for an specific version, a new repository is created under hg.mozilla.org/releases/. all the content of the trunk is copied to this new branch so that the developing work is done in two (or more) parallel places: the generic trunk and the version oriented branch(es). for every branch and every locale, there is a separate repository for localization files committed by the localizers. some branch/...

MathML Accessibility in Mozilla
this table below provides a list of mathml constructions and how they are read in mozilla applications for various platforms: windows: mathml support is provided by nvda, which actually delegates math reading to the proprietary mathplayer plugin. we started exposing generic accessible objects for mathml in bug 920547 and so these can be retrieved by nvda starting with gecko 27.0 (firefox 27.0 / thunderbird 27.0 / seamonkey 2.24). mozilla and nvda developers essentially do not have control on how mathematical formulas are read, please contact design science for any inquiries. mac: mathml support is provided by voiceover. in bug 1175269 and bug 1001641, we relied on the webkit's nsaccessibility mathml tree to expose the main constructions. hence basic support is available in gecko 41.0...

Mozilla projects on GitHub
that is the first thing to know. to do more—to contribute to the code, or to fork it and start your own project based on mozilla-related code—you need a github account. to learn more about setting up a github account, visit the github website. most mozilla project code is located in repositories within the mozilla github organization. ...

Mozilla Quirks Mode Behavior
d width (bug 277232). in quirks mode, tables with no rows/rowgroups have zero height even when a height is specified (bug 241161). something about the overhanging border (i.e., the half of the border that's outside the border-box) in border-collapse tables differs between quirks mode and standards mode. [see nstableframe::getdeflationforbackground and figure out what really differs, and when it started differing.] gecko had bug 248239, where table cells acted as they had box-sizing:border-box applied for the purpose of the height property. this is fixed in gecko 16 (firefox 16) for standards mode but remains in quirks mode for compatibility with quirks mode behavior of other browsers. (firefox 16 / thunderbird 16 / seamonkey 2.13) since this version bug 338554 is fixed and (-moz-)box-sizing ...

Activity Monitor, Battery Status Menu and top
is running and using a lot of cpu. furthermore, if you click on an application name in the menu activity monitor will be opened and that application’s entry will be highlighted. based on these facts it seems reasonable to assume that “energy impact” is again being used to determine which applications are "using significant energy". testing shows that once an energy-intensive application is started it takes less than a minute for it to show up in the battery status menu. and once the application stops using high amounts of energy it takes a few minutes to disappear. the exception is when the application is closed, in which case it disappears immediately. and it appears that a program with an “energy impact” of roughly 20 or more will eventually show up as significant, and programs that ...

Build Metrics
"build metrics" is a catch-all term for performance measures that are generated by the firefox build system and tracked by perfherder. num_constructors number of static constructors found by the compiler in the firefox c++ codebase. lower is better. static constructors are undesirable because their initialization imposes an unavoidable time penalty every time firefox is started. installer size size in bytes of the firefox installer. lower is better here, especially on space-restricted platforms like android. build times amount of time it takes to build firefox in automation on a specific platform / configuration. lower is better. compiler warnings number of compiler warnings detected during a build. lower is better. due to the way the build system works, compiler warnings are not...

Investigating leaks using DMD heap scan mode
urned by xre_getprocesstype(), so adjust as needed. finally, the --dmd option need to be passed in so that dmd will be run. --mode=scan is needed so that when we get a dmd log the entire contents of each block of memory is saved for later analysis. with that command line in hand, you can start firefox. be aware that this may take multiple minutes if you have optimization disabled. once it has started, go through the steps you need to reproduce your leak. if your leak is a ghost window, it can be handy to get an about:memory report and write down the pid of the leaking process. you may want to wait 10 or so seconds after this to make sure as much as possible is cleaned up. next, exit the browser. this will cause a lot of logs to be written out, so it can take a while. analyzing the logs get...

Gecko Profiler FAQ
s regardless of which thread used the time, real interrupts every nms of wall-clock time) the gecko profiler does not know which thread is used at which time. it interrupts all threads based on wall-clock time. [jesup] ok, that's the equivalent to itimer_real, kinda, except that per the previous question it doesn't interrupt every thread at once and snapshot the thread you started the itimer on, it interrupts each thread one at a time, which likely means distortion of the measurement if the number of threads monitored is significant (especially at high sample rates). a cleaner snapshot would stop all threads, walk all their stacks, and then resume all threads, especially on high-core systems. (itimer_real (due to posix) requires the signal occur on the calling thread, no...

Preferences system
this document describes toolkit's preferences system. using this system it is possible to create preferences windows that display and operate appropriately on various platforms (windows, macos x and gnome). the system is implemented through a few xul elements and attributes. ...

About NSPR
be restructured and perhaps even rewritten in order to use the nspr api. it is not a goal to provide a platform for the porting into netscape of externally developed code. at the time of writing the current generation of nspr was known as nspr20. the first generation of nspr was originally conceived just to satisfy the requirements of porting java to various host environments. nspr20, an effort started in 1996, built on that original idea, though very little is left of the original code. (the "20" in "nspr20" does not mean "version 2.0" but rather "second generation".) many of the concepts have been reformed, expanded, and matured. today nspr may still be appropriate as the platform dependent layer under java, but its primary application is supporting clients written entirely in c or c++. how ...

Optimizing Applications For NSPR
products - yet. the specific area surrounding pthread's continuation thread has been both observed and empirically proven faulty, and a correction identified. macintosh the current port of nspr for macintosh will not be usable in its own right. the implementation has dependencies on libraries that are implemented in the netscape communicator. the work to undo this dependency has already been started and the result will be made available soon. macintosh threads are not preemptable. as usual, it isn't that we couldn't preempt them, but rather that the macintosh libraries are not prepared for such things to happen. nspr does take advantage of macintosh' asynchronous i/o capability to perform scheduling during i/o. still, there is no enforceable mechanism to guarantee thread scheduling fairness...

An overview of NSS Internals
ble and works fine in all simple scenarios, for example if all (b) candidate issuer certificates have the same subject and issuer names and differ by validity period; however, it works only in a limited amount of more advanced scenarios. unfortunately, the world of certificates has become more complex in the recent past. new certificate authorities enter the global pki market, and in order to get started with their business, they might make deals with established cas and receive so-called cross-signing-certificates. as a result, when searching for a trust path from (a) to a trusted anchor (root) certificate (z), the set of candidate issuer certificates might have different issuer names (referring to the second or higher issuer level). as a consequence, it will be necessary to try multiple differe...

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

NSS API Guidelines
) and using reader/writer locks. copy the linked list: instead of operating on the global list, you can copy the list. this also requires small lists. lock over single element with retry: for medium sized lists, you can secure the reference to each element, complete a test, then detect if the given element has been removed from the list. in the case of removal, the search can either be either restarted, or terminated. this method is a more complicated than the other methods: requiring the calling of search code tolerant to often repeated element inspection. examples of the previous strategies can be found in security/nss/lib/pk11wrap/pk11slot.c. where possible use the nspr list primitives. from these you can even set up secutil style thread-safe lists that use some combination of the above s...

NSS reference
the proposed chapters below are based on the chapters of the ssl reference and the categories of functions in nss public functions. should a particular page require the use of an underscore, please see the documentation for the title override extension. building and installing nss overview of an nss application based on "overview of an ssl application" in the ssl reference. getting started with nss based on "getting started with ssl" in the ssl reference. data types based on "selected ssl types and structures" in the ssl reference. nss initialization and shutdown nss_init nss_initreadwrite nss_nodb_init nss_initialize nss_shutdown utility functions based on "utility functions" in nss public functions. certificate functions based on certificate functions in the ssl r...

gtstd.html
this page is part of the ssl reference that we are migrating into the format described in the mdn style guide. if you are inclined to help with this migration, your help would be very much appreciated. upgraded documentation may be found in the current nss reference getting started with ssl chapter 2 getting started with ssl this chapter describes how to set up your environment, including certificate and key databases. ssl, pkcs #11, and the default security databases setting up the certificate and key databases building nss programs ssl, pkcs #11, and the default security databases the basic relationships among the nss libraries are described in introduction to network security services. before running the sample programs, it's important to und...

sslintro.html
be very much appreciated. upgraded documentation may be found in the current nss reference overview of an ssl application chapter 1 overview of an ssl application ssl and related apis allow compliant applications to configure sockets for authenticated, tamper-proof, and encrypted communications. this chapter introduces some of the basic ssl functions. chapter 2, "getting started with ssl" illustrates their use in sample client and server applications. an ssl application typically includes five parts: initialization configuration communication functions used by callbacks cleanup although the details differ somewhat for client and server applications, the concepts and many of the functions are the same for both. warning: some of the ssl header files provided...

Necko Architecture
begin until the user initiates the transaction using the nsichannel api. receiving data & nsistreamlistener you can read or write, from or to a channel using either the synchronous api, or the asynchronous api. if you want to move data asynchronously you need to be able to receive callbacks using an implementation of nsistreamlistener. an nsistreamlistener is told when the uri transaction has "started," when data is available (in the case of reading data), and when it has "stopped." it is up to the nsistreamlistener implementation to decide what to do with these various notifications. the ondataavailable() notification provides a chance for the nsistreamlistener to actually retrieve data that the channel has acquired. one of the arguments to the ondataavailable() notification is an nsiinputstr...

Rhino history
at the time, netscape was planning to produce a version of navigator written entirely in java and so it needed an implementation of javascript written in java. when netscape stopped work on "javagator," as it was called, somehow rhino escaped the axe (rumor had it that the executives "forgot" it existed). for a time, a couple of major companies (including sun) licensed rhino for use in their products and paid netscape to do so, allowing work on rhino to continue. now rhino is part of mozilla's open-source repository. ...

Scripting Java
, and access fields, methods, and properties of those objects, we have a great deal of power at our fingertips. however, there are a few instances where that is not enough: many apis in java work by providing interfaces that clients must implement. one example of this is the thread class: its constructor takes a runnable that contains a single method run that will be called when the new thread is started. to address this need, rhino provides the ability to create new java objects that implement interfaces. first we must define a javascript object with function properties whose names match the methods required by the java interface. to implement a runnable, we need only define a single method run with no parameters. if you remember from chapter 3, it is possible to define a javascript object with...

SpiderMonkey Build Documentation
# choose the appropriate sdk version for your version of os/x to build a 64-bit version on a 32-bit mac system (e.g. mac os x 10.5), you can use the following: ar=ar cc="gcc -m64" cxx="g++ -m64" ../configure --target=x86_64-apple-darwin10.0.0 to build a 64-bit windows version, you can use the following: $src/configure --host=x86_64-pc-mingw32 --target=x86_64-pc-mingw32 note: you must have started your mozillabuild shell with the proper -x64.bat script in order for the 64-bit compilers to be in your path. whatever compiler and flags you pass to configure are recorded in the generated makefile, so you don't need to specify them again until you re-run configure. building your application while "how to build your complete application" is clearly out of scope for this document, here are som...

Creating JavaScript jstest reftests
the ecmascript standard for example, the exact definition of pi or some details of array sorting. you should not add tests of the following type: tests of the jit test of jit correctness belong in the jit-test suite, read more here. performance tests or stress tests tests of spidermonkey's comformance to the ecmascript standard a brief history: in 2017, spidermonkey started comsuming test262, a comprehensive tests suite for ecmascript implementations. before using test262, spidermonkey had a fair number of internal tests of conformance to ecmascript, and many of those tests remain in the js/src/non262 directory as regressions. test262 tests test262 is the implementation conformance test suite for the latest drafts of ecmascript language specification, as well as i...

FOSS
feel free to add your own spidermonkey-based open source projects (and if necessary add categories)! wrappers / bindings c++ cocos2d-js - cocos2d-js is a cross-platform game engine which embeds spidermonkey, providing the same api for both web and native platforms. getting started here. flusspferd - (newer) c++ bindings libjspp - c++ template based library for extending & embedding spidermonkey; works with spidermonkey 1.8.5 and above, has lots of goodies spiderape - the oldest c++ bindings for spidermonkey trixul - (trixul cvs) - trixul xml-based gui toolkit embeds spidermonkey, using javascript to implement logic behind its gui, supporting calls from javascript to c++ objects rust mozjs - rust bindings used by servo gnome gjs - javascript bindings to gnome (broadly, to any l...

Hacking Tips
b for you, the other way documented here is to let valgrind act as a gdb server which can be manipulated from the gdb remote. $ valgrind --smc-check=all-non-file --vex-iropt-register-updates=allregs-at-mem-access --vgdb-error=0 ./js … this command will tell you how to start gdb as a remote. be aware that functions which are usually dumping some output will do it in the shell where valgrind is started and not in the shell where gdb is started. thus functions such as js::dumpbacktrace, when called from gdb, will print their output in the shell containing valgrind. adding spew for compilations & bailouts & invalidations (from gdb) if you are in rr, and forgot to record with the spew enabled with ionflags or because this is an optimized build, then you can add similar spew with extra breakpoint...

Statistics API
c work is done in each slice. in between slices, other browser code is allowed to run. the slices array describes how long each slice took and what work was done during the slice. each element of the slices array is an object with these fields: slice: integer - the slice index, starting at 0. pause: number (milliseconds) - the slice duration. when: number (milliseconds) - the time this slice started, relative to the first slice's start time. reason: string - a string describing the api that initiated this gc slice. page_faults: integer - number of page faults incurred during the processing of this slice. start_timestamp: integer (microseconds) - time of slice start from epoch. end_timestamp: integer (microseconds) - time of slice end from epoch. times: object - a map from phase names to...

SavedFrame
ack frame’s function, or null. asynccause if this stack frame is the asyncparent of other stack frames, then this is a string representing the type of asynchronous call by which this frame invoked its children. for example, if this frame’s children are calls to handlers for a promise this frame created, this frame’s asynccause would be "promise". if the asynchronous call was started in a descendant frame to which the requester of the property does not have access, this will be the generic string "async". if this is not an asynchronous call point, this will be null. asyncparent if this stack frame was called as a result of an asynchronous operation, for example if the function referenced by this frame is a promise handler, this property points to the stack frame responsible ...

TPS Tests
sually need to scroll up a bit in the log past the end of the test to find the actual failure. when one of the cleanup phases fails (often possible if firefox crashes or tps hangs), there's no guarantee that the data was properly cleaned up, and so the next tps test you run may fail due to the leftover data. this means you may want to run a tps test twice to see if it really failed, or it just started with garbage. feel free to ask for help with setting up and running tps in the #sync irc channel! ...

Web Replay
continues as a standalone project. learn more web replay allows firefox content processes to record their behavior, replay it later, and rewind to earlier states. replaying processes preserve all the same js behavior, dom structures, graphical updates, and most other behaviors that occurred while recording. devtools' debugger and console can be used to inspect and control the replay. getting started to enable web replay (macos and firefox nightly only), go to devtools settings and select "enable webreplay". web replay's features can only be used in a tab that is recording or replaying. there are a few ways to start recording a tab: record current tab open the developer tools and click the button indicated below. this will refresh the tab and start recording. the button will be colore...

Redis Tips
u use. time complexity - each command's complexity is given in big-o notation. this is immensely helpful. related commands - an ever-growing list of related commands is given on the right-hand side of the page. recipes - at the bottom of many pages is a section that gives usage patterns or recipes for the command under discussion. there are many insightful ideas to be found here. getting started with redis before you go any further in this document, make sure you have played with redis for at least 5 or 10 minutes. if you have not, here is a fantastic on-line, interactive redis tutorial: http://try.redis.io/ for reference later on, you'll want the source of all things redis: https://redis.io you'll want to run a redis-server on your machine, and use the redis-cli at the command-lin...

Setting up an update server
e: stat --format "%s" <filename> starting your update server now, start an update server to serve the update files on port 8000. an easy way to do this is with python. remember to navigate to the correct directory before starting the server. this is the python2 command: python -m simplehttpserver 8000 or, this is the python3 command: python3 -m http.server 8000 if you aren't sure that you started the server correctly, try using a web browser to navigate to http://127.0.0.1:8000/update.xml and make sure that you get the xml file you created earlier. installing the update you may want to start by deleting any pending updates to ensure that no previously found updates interfere with installing the desired update. you can use this command with firefox's browser console to determine the upd...

Animated PNG graphics
ned to allow incremental display of frames before the entire image has been read. this implies that some errors may not be detected until partway through the animation. it is strongly recommended that when any error is encountered decoders should discard all subsequent frames, stop the animation, and revert to displaying the default image. a decoder which detects an error before the animation has started should display the default image. an error message may be displayed to the user if appropriate. structure an apng stream is a normal png stream as defined in the png specification, with three additional chunk types describing the animation and providing additional frame data. to be recognized as an apng, an 'actl' chunk must appear in the stream before any 'idat' chunks. the 'actl' structure i...

Gecko events
context-sensitive help mode is supported: no event_dragdrop_start an application is about to enter drag-and-drop mode is supported: yes event_dragdrop_end an application is about to exit drag-and-drop mode is supported: no event_dialog_start a dialog box has been displayed is supported: no event_dialog_end a dialog box has been closed is supported: no event_scrolling_start scrolling has started on a scroll bar is supported: yes event_scrolling_end scrolling has ended on a scroll bar is supported: yes event_minimize_start a window object is about to be minimized or maximized is supported: no event_minimize_end a window object has been minimized or maximized is supported: no event_document_load_start is supported: yes event_document_load_complete the loading of the document ha...

DocShell
at the moment, the transition from webshell to docshell is not fully completed, but the long-term goal is to remove webshell and switch over entirely to docshell. nswebbrowser project page (outlines the design of nswebbrowser and docshell). overview of a uri load up though dispatch to a content handler. overview of a uri load in general (more bird's-eye view). ...

Using the Places history service
story system. observers generally stop updating ui when they are inside a batch, potentially making the operations faster. if you are just doing a few changes, it is probably better to not use a batch since incremental updates are not done. be sure to call endupdatebatch when you are done or the ui will be permanently broken. nsinavhistoryservice.endupdatebatch: ends a batch operation previously started with beginupdatebatch. see also manipulating bookmarks using places ...

Using the Places livemark service
aller is responsible for reloading the livemark after changing its feed uri (since the contents are likely to be different given a different feed). livemarkservice.setfeeduri(newlvmkid, uri("http://foo.example.com/rss.xml")); //newlvmkid = see "create a new livemark" for more detail. update behavior five seconds after the browser starts up, the livemark service's update timer is started. the update timer fires immediately, and then every 15 minutes thereafter. when the update timer fires, it iterates over the list of livemarks, and will refresh a livemark *only* if it's expired. the expiration time for a livemark is determined by using information provided by the server when the feed was requested, specifically nsicacheentryinfo.expirationtime. if no information was provided by ...

Creating a Python XPCOM component
of the methods. testing it to see this work, you will have to start firefox from the command line, since that'll be where the stuff will be printed out. external links creating xpcom components, on which this short tutorial is based. a three-part tutorial on ibm developerworks: getting to know pyxpcom - info on building pyxpcom (and maybe mozilla) to get it to work. getting started with pyxpcom, part 2 - accessing xpcom from python. getting started with pyxpcom, part 3 - creating your own components. the problem with this one is that the sample code they give is slightly broken (it ends with a "retu" which shouldn't be there. i haven't tried it, but it looks like nothing is missing, so getting rid of the "retu" should make it work fine.). ...

Building the WebLock UI
mozilla or another gecko-based browser, then this third section shows you how to create the entry point in the browser for controlling the web locking. if you are planning on deploying the weblock component in some other application, you'll have to devise a different means of access (e.g., native widgetry that instantiates and controls the weblock component). client code overview before we get started on the actual user interface, we should establish how the client code is to access the weblock component and use its interfaces to control the web locking of the browser. first of all, it's important to be able to represent the basic state of the lock as soon as it's loaded. like the secure page icon, the weblock icon that appears in the lower right corner of the browser should indicate whether ...

xpcshell
e option, which tells xpcshell to use javascript 1.8. example you can input javascript, straight to mozilla. js> 5+7 12 js> print("hello, world!") hello, world! js> see also howto for common problems in writing xpcshell scripts, e.g., doing async network calls or using js modules. pretty much all mozilla programs use xpcom components via xpconnect. read xpconnect:using components to get started with that. see the xpcshell reference for information on command line arguments and extension functions. learn how to write xpcshell-based unit tests. read xpcshell:profiling for information on how to profile scripts. ...

amIWebInstallInfo
nstalls running. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void install(); attributes attribute type description installs nsivariant an array of addoninstall objects. read only. originatinguri nsiuri the uri that started the installs. for example, the referring page for a link to an xpi download. read only. originatingwindow nsidomwindow the window that started the installs. read only. note: prior to gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5), this was an nsidomwindowinternal. methods install() starts all installs. void install(); parameters none. ...

amIWebInstaller
for the add-ons to be installed. anames the names for the add-ons to be installed. aicons the icons for the add-ons to be installed. acallback optional an optional callback to notify about installation success and failure. ainstallcount optional an optional argument including the number of add-ons to install. return value true if the installation was successfully started. isinstallenabled() checks if installation is enabled for a web page. boolean isinstallenabled( in astring amimetype, in nsiuri areferer ); parameters amimetype the mime type for the add-on to be installed. areferer the uri of the web page for which to see if installation is allowed. return value true if installation is enabled. ...

imgIRequest
hat this image was loaded with. read only. decoderobserver imgidecoderobserver read only. image imgicontainer the image container. read only. imageprincipal nsiprincipal the principal gotten from the channel the image was loaded from. read only. imagestatus unsigned long status flags of the status_* variety. read only. mimetype string read only. uri nsiuri the uri the image load was started with. note that this might not be the actual uri for the image (for example if http redirects happened during the load). read only. constants constant value description status_none 0x0 nothing to report. status_size_available 0x1 we received enough image data from the network or filesystem that we know the width and height of the image, and have thus called setsize() on the container.

nsIAccessibleEvent
context-sensitive help mode. event_dragdrop_start 0x0022 0x001f an application is about to enter drag-and-drop mode. event_dragdrop_end 0x0023 0x0020 an application is about to exit drag-and-drop mode. event_dialog_start 0x0024 0x0021 a dialog box has been displayed. event_dialog_end 0x0025 0x0022 a dialog box has been closed. event_scrolling_start 0x0026 0x0023 scrolling has started on a scroll bar. event_scrolling_end 0x0027 0x0024 scrolling has ended on a scroll bar. event_minimize_start 0x0028 0x0025 a window object is about to be minimized or maximized. event_minimize_end 0x0029 0x0026 a window object has been minimized or maximized. event_document_load_complete 0x002b 0x0027 the loading of the document has completed. event_document_reload 0x002c 0x00...

nsICacheListener
ns_ok on success. see nsicacheservice for accessgranted values. void oncacheentryavailable( in nsicacheentrydescriptor descriptor, in nscacheaccessmode accessgranted, in nsresult status ); parameters descriptor the cache entry descriptor. accessgranted the cache access mode. status the status of the cache entry availability. oncacheentrydoomed() this method is called when the processing started by nsicachesession.doomentry() is completed. void oncacheentrydoomed( in nsresult status ); parameters status the status is ns_ok when the entry was doomed, or ns_error_not_available when there is no such entry. see also nsicache nsicachesession nsicacheentrydescriptor ...

nsIDownload
and if the server supports it. read only. size long long the total size of the file in bytes, or ll_maxuint if the file's size is unknown. read only. source nsiuri the source uri of the download. read only. speed double the downloads transfer speed in bytes per second. read only. starttime long long the time at which the transfer was started. read only. state short the downloads current state. see nsidownloadmanager.constants. read only. target nsiuri the target of the transfer. read only. targetfile nsilocalfile indicates the location at which the downloaded file will be (or is, if the download is complete) stored. read only. see also nsidownloadmanager nsidownloadprogressli...

nsIDownloadHistory
if the start time is not given, the current time is used. ...

nsIDownloadManagerUI
. constants constant value description reason_user_interacted 0 when opening the download manager user interface, this value indicates that it's being done at the user's request. reason_new_download 1 when opening the download manager user interface, this value indicates that the user interface is being displayed because a new download is being started. methods getattention() calls attention to the download manager's user interface if it's already open. the ui need not be visible to call this function, nor will the ui be made visible. void getattention(); parameters none. exceptions thrown ns_error_unexpected the user interface isn't currently open. show() shows the download manager's user interface to the user. void show(...

nsIDownloadProgressListener
of a download request has changed. the received status message is intended to be displayed visibly to the user. note: if source and destination are identical, which is possible in case of file urls or chrome urls, this is called even in gecko 1.9.2. in such a situation no further event handlers are called and the stop flag is set; if there are more pending downloads in such a situation not yet started they never start. in normal situations this is never called. the method even if never called must be implemented in the listener, because the webprogress used to do the physical part of the download requires it and uses the listener instance provided to the download manager. void onstatuschange( in nsiwebprogress awebprogress, in nsirequest arequest, in nsresult astatus, in wstring ames...

nsIDragSession
ink and so on) for the current drag. (see nsidragservice) numdropitems unsigned long get the number of items that were dropped. read only. onlychromedrop boolean indicates if the drop event should be dispatched only to chrome. this allows chrome to handle a drag that was refused by content. sourcedocument nsidomdocument the document where the drag was started, which will be null if the drag originated outside the application. useful for determining if a drop originated in the same document. read only. sourcenode nsidomnode the dom node that was originally dragged to start the session, which will be null if the drag originated outside the application. read only. targetsize nssize sets the current width and height of the dr...

nsIHTMLEditor
in nsicontentfilter infilter ); parameters infilter function which callers want called during insertion. align() document me! void align( in astring aalign ); parameters aalign breakisvisible() checks whether a br node is visible to the user. boolean breakisvisible( in nsidomnode anode ); parameters anode return value candrag() decides if a drag should be started (for example, based on the current selection and mousepoint). boolean candrag( in nsidomevent aevent ); parameters aevent return value checkselectionstateforanonymousbuttons() checks if the anonymous nodes created by the html editor have to be refreshed or hidden depending on a possible new state of the selection. void checkselectionstateforanonymousbuttons( in nsiselection as...

nsIHttpActivityObserver
0002 http transport activity has occurred. activity subtype constants constant value description activity_subtype_request_header 0x5001 the http request is about to be queued for sending. observers can look at request headers in aextrastringdata activity_subtype_request_body_sent 0x5002 the http request's body has been sent. activity_subtype_response_start 0x5003 the http response has started to arrive. activity_subtype_response_header 0x5004 the http response header has arrived. activity_subtype_response_complete 0x5005 the complete http response has been received. activity_subtype_transaction_close 0x5006 the http transaction has been closed. methods observeactivity() called when activity occurs on the http transport. you should implement this method to perform whatever tas...

nsIMIMEInputStream
attributes attribute type description addcontentlength boolean when true a "content-length" header is automatically added to the stream. the value of the content-length is automatically calculated using the available() method on the data stream. the value is recalculated every time the stream is rewound to the start. not allowed to be changed once the stream has been started to be read. methods addheader() adds an additional header to the stream on the form "name: value". may not be called once the stream has been started to be read. void addheader( in string name, in string value ); parameters name name of the header. value value of the header. setdata() sets data-stream. may not be called once the stream has been started to be read. the...

nsIMemoryReporter
g units. constant value description units_bytes 0 the amount is specified as a number of bytes. units_count 1 the amount is an instantaneous count of things currently in existence. for example, the number of tabs currently open. units_count_cumulative 2 the amount contains the number of times some event has occurred since the application started up. for example, the number of times the user has opened a new tab. the amount returned must never decrease over the lifetime of the application. units_percentage 3 the amount contains a fraction that should be expressed as a percentage. note: the amount field should be given a value 100 times the actual percentage; this number will be divided by 100 when shown. this all...

nsINavBookmarkObserver
aitemtype the type of the item that is about to be removed; this is one of the nsinavbookmarksservice.type constants. aparentid the id of the folder containing the item. aguid the unique id associated with the item. aparentguid the unique id associated with the item's parent. onbeginupdatebatch() this method notifies this observer that a batch transaction has started. other notifications will be sent during the batch change, but the observer is guaranteed that onendupdatebatch() will be called at the completion of changes. during a batch the observer should do its best to reduce the work done to handle notifications, since multiple changes are going to happen in a short timeframe. void onbeginupdatebatch(); parameters none. onendupdatebatch() this method not...

nsIPrivateBrowsingService
= components.classes["@mozilla.org/privatebrowsing;1"] .getservice(components.interfaces.nsiprivatebrowsingservice); c++ callers should use the contract id @mozilla.org/privatebrowsing-wrapper;1 instead. method overview void removedatafromdomain(in autf8string adomain); attributes attribute type description autostarted boolean indicates whether or not private browsing was started automatically at application launch time. this is only ever true if privatebrowsingenabled is also true. read only. lastchangedbycommandline boolean indicates whether or not the last private browsing mode transition was performed on the command line (using either the -private or -private-toggle...

nsIProcess
e if the process was run with blocking disabled. read only. location nsifile the location of the executable file on disk. read only. gecko 1.9.1 note this attribute is no longer implemented as of gecko 1.9.1, and is removed entirely in gecko 1.9.2. pid unsigned long the process id of the process. this value is only available after the process has started; in addition, some platforms may not offer this value at all. read only. processname string the name of the process. read only. gecko 1.9.1 note this attribute is no longer implemented as of gecko 1.9.1, and is removed entirely in gecko 1.9.2. processsignature unsigned long the process signature. read only. gecko 1.9.1 note this att...

nsISHistory
count long the number of toplevel documents currently available in session history. read only. index long the index of the current document in session history. read only. maxlength long used to get/set the maximum number of toplevel documents, session history can hold for each instance. requestedindex long the index of the last document that started to load that is not yet finished loading. when the document finishes loading the value -1 is returned. read only. shistoryenumerator nsisimpleenumerator called to obtain a enumerator for all the documents stored in session history. the enumerator object thus returned by this method can be traversed using nsisimpleenumerator. to access individual history entries of the enu...

nsITextInputProcessor
however, if the event is consumed by web content, it returns false. in this case, composition isn't created. so, js-ime shouldn't continue to compose the string. finally, when you commit the composition with the last composition string, just do this: tip.commitcomp...

nsITimer
methods. type unsigned long defines the timer type: one shot, repeating slack or repeating precise. must be one of the constants defined under constants on this page. constants constant value description type_one_shot 0 type of a timer that fires once only. type_repeating_slack 1 after firing, the timer is stopped and not restarted until its callback completes. the timer period will ideally be at least the time between when processing for last firing the callback completes and when the next firing occurs, but note that this is not guaranteed: the timer can fire at any time. this is the preferable repeating type for most situations. type_repeating_precise 2 type_repeating_precise is just a synonym for...

Frequently Asked Questions
the faq is divided into sections to help you find what you're looking for faster. ...

Reference Manual
if you're trying to fix a broken build, the faq might lead you to the answer more quickly. the basics design an nscomptr is designed to be a complete replacement for raw xpcom interface pointers where they are used as owning references. almost any place you could use a raw xpcom interface pointer, you should be able to use an nscomptr. an nscomptr is the exact same size and shape as a raw xpcom interface pointer. ...

Using nsCOMPtr
used nscomptr before, you're starting in the right place. just keep reading. you'll know when to stop. after you've been using nscomptrs for a while, and you reach unfamiliar territory, or run into compiler errors; you may want to return to this document to get help from the reference manual or the faq. contents status, recent changes, and plans recent changes to nscomptr getting started guide introduction using nscomptr summary reference manual the basics initialization and assignment using an nscomptr<t> as a t* efficiency and correctness compiler annoyances frequently asked questions buildtime errors runtime errors how do i... general bibliography original document information author(s): scott collins last...

Xptcall Porting Status
m> evan hunt <evanh@sco.com> recent (feb-2001) email from jkj@sco.com suggests that work will be occuring soon. <font color="black">works</font> netbsd/m68k dave huang <khym@bga.com> dave's changes are in the tree. waiting for verification that it is really finished. <font color="black">partially working</font> netbsd/arm32 mike pumford <mpumford@black-star.demon.co.uk> mike writes: i have started porting to the platform based on the code for linux arm. the invokebyindex code works correctly when used with testxptcinvoke. i am currently working on making testxpc function correctly. i am doing the porting work with egcs-1.1.2 on netbsd 1.4p (netbsd-current snapshot from a couple of days ago). <font color="white">done</font> linux ia64 hp ulrich drepper <drepper@redhat.com> bug 40950 co...

Mozilla technologies
ain documentation on mozilla specific implementation details of assistive technology apis.animated png graphicsapng is an extension of the portable network graphics (png) format, adding support for animated images. apng is a simpler alternative to mng, providing a spec suitable for the most common usage of animated images on the internet.docshelldocshell is the second iteration of what originally started out as webshell. at the moment, the transition from webshell to docshell is not fully completed, but the long-term goal is to remove webshell and switch over entirely to docshell.embedded dialog apifeed content access apifirefox 2 and thunderbird 2 introduce a series of interfaces that make it easy for extension authors to access rss and atom feeds.life after xul: building firefox interfaces with...

Index
.mozilla.org/thu...er-categories/ for an example. 106 modify message list needscontent, needsupdate, missing, thunderbird this page has no content. enrich mdc by contributing. 107 use sqlite thunderbird if you'd like to use an sqlite database in your extension you'll need to look over the storage docs for an api reference, however this code should get you started. be careful of multi-thread access to your database. 108 folders and message lists guide, thunderbird the folderdisplaywidget for the current folder can be accessed via the global variable gfolderdisplay. this object provides many of the functions required for working with folder views. we'll look at some of them below. 109 thunderbird developer reference docs ...

Creating a Custom Column
one of the new and exciting features available to thunderbird extension developers in thunderbird 2.0 is the ability to easily create and handle custom columns in thunderbird's main view. the following step through will get you well on the road to creating your own columns and populating them with custom data. getting started in this example we will be developing a small extension that will be adding a column that will display the "reply-to:" field of an email (if it exists, it if often not set). if you are unfamiliar with the setup and creation of an extension please read building a thunderbird extension. adding a column by far the easiest part is the physical addition of the column. for this we overlay messenger.xul, by placing the following line in our chrome.manifest file: ove...

FAQ
...

Use SQLite
be careful of multi-thread access to your database. this will create an sqlite db named tbird.sqlite inside your profile directory with a table called attachments. you can see the schema for the attachments table in the code. to double check the information you've inserted you can query the tbird.sqlite file using regular sqlite programs. ...

customDBHeaders Preference
ibed here is really new, so please try to be understanding if some of these things change tomorrow (or have changed already). while i was going through the creating a custom column guide, i built and used thunderbird-2.0b1 checked-out from cvs with the thunderbird_2_0b1_release tag. there is a high probability that your experience will be different should you use an earlier release. getting started to build upon the reply-to column tutorial, i'll describe the process i went through in developing a custom column to display a 'superfluous' column within thunderbird's main view. the data will come from a custom header labeled x-superfluous. setting the preferences although there are various ways to set preferences, i tend to just navigate to the directory where my profile is stored and edit...

Thunderbird extensions
sions, but there are also differences that may confound the starting thunderbird developer. this documention series focuses on thunderbird. need personalized help? see community / communications. warning: this content is for older versions of thunderbird. much of it may no longer be relevant. see developer.thunderbird.net for newer information. documentation getting started with thunderbird a brave, young developer wants to develop an add-on for thunderbird. these links to help through this journey. start by reading the tutorial and learn how to build a thunderbird extension. also see thunderbird 57-60 add-ons guide for changes introduced in thunderbird 60. read about the main windows to learn about « thread pane », « preview pane », and «...

WebIDL bindings
ot exposed to webpages). from the point of view of web content, it's as if the interface member were not there at all. these members are exposed to chrome script working with a content object via xrays. if specified on an interface as a whole, this functions like [func] except that the binding code will automatically check whether the caller script has the system principal (is chrome or a worker started from a chrome page) instead of calling into the c++ implementation to determine whether to expose the interface object on the global. this means that accessing a content global via xrays will show [chromeonly] interface objects on it. if specified on a dictionary member, then the dictionary member will only appear to exist in system-privileged code. this extended attibute can be specified toget...

Using COM from js-ctypes
the windows api mostly concerns itself with the interaction between the operating system and an application. for communication between the different windows applications among themselves, microsoft has developed a series of technologies alongside the main windows api. this started out with dynamic data exchange (dde), which was superseded by object linking and embedding (ole) and later by the component object model (com), automation objects, activex controls, and the .net framework. com is c++ and it cannot be written directly with js-ctypes. this documentaion explains how to convert the com c++ code into js-ctypes code. basis and reference for this article bugzilla :: bug 738501 - implement ability to create windows shortcuts from javascript - comment 4 relavent topic bugzilla :: bug 505...

Plug-in Basics - Plugins
it. notice in view-source that this information is simply gathered from the javascript. because plug-ins are platform-specific, you must port them to every operating system and processor platform upon which you want to deploy your plug-in. plug-ins and helper applications before plug-ins, there were helper applications. a helper application is a separate, free-standing application that can be started from the browser. like a plug-in, the browser starts a helper application when the browser encounters a mime type that is mapped to it. unlike a plug-in, a helper application runs separately from the browser in its own application space and does not interact with the browser or the web. when the browser encounters a mime type, it always searches for a registered plug-in first. if there are no ma...

Preferences System
this document describes toolkit's preferences system. using this system it is possible to create preferences windows that display and operate appropriately on various platforms (windows, macos x and gnome). the system is implemented through a few xul elements and attributes. ...

Accessibility Inspector - Firefox Developer Tools
m to interact with the page. the accessibility inspector also uses this information to provide valuable accessibility debugging capabilities in the devtools. accessing the accessibility inspector when you first open any of the other developer tools, the accessibility features are turned off (unless you've already got them turned on in another browser tab, or got the firefox accessibility engine started already, e.g., you might be a screenreader user or tester). this is because the accessibility engine runs in the background when the accessibility features are turned on. while it’s running, it slows performance and takes up memory; therefore it interferes with the metrics from other panels such as memory and performance as well as overall browser performance. for this reason, you should keep i...

DOM Inspector - Firefox Developer Tools
ated using a two-paned window that allows a variety of different views on the document and all nodes within. this tool is an add-on for xul-based applications such as firefox and thunderbird. if you are looking for the dom inspector that's built into firefox, see the documentation for the page inspector. documentation introduction to dom inspector a guided tutorial that will help you get started with dom inspector. dom inspector faq answers to common questions on dom inspector. dom inspector page at mozillazine more information on the dom inspector. how to build the dom inspector blog post on building the dom inspector from source. getting dom inspector firefox & thunderbird you may download and install the dom inspector from the amo web site. (thunderbird users browsin...

DevTools API - Firefox Developer Tools
select(toolid) a tool has been selected. this event is emitted before the corresponding {toolid}-selected event. {toolid}-init(frame) a tool is about to be loaded. the frame is the <iframe> element that has been created for the tool. {toolid}-build(panel) the frame for a tool has loaded and the toolpanel.build() method has been called but the asynchronous initialization has not started. the parameter is a toolpanel object. {toolid}-ready(panel) the asynchronous initialization for a tool has completed and it is ready to be used. the parameter is a toolpanel object. {toolid}-selected(panel) a tool has been selected. the parameter is a toolpanel object. {toolid}-destroy(panel) a tool is about to be destroyed. the parameter is a toolpanel object. destroy the...

Network request details - Firefox Developer Tools
html preview 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...

Performance - Firefox Developer Tools
d garbage collection the call tree shows the javascript functions in which the browser spent most of its time the flame chart shows the javascript call stack over the course of the recording the allocations view shows the heap allocations made by your code over the course of the recording. this view only appears if you checked "record allocations" in the performance tool settings. getting started ui tour to find your way around the performance tool, here's a quick tour of the ui. how to basic tasks: open the tool, create, save, load, and configure recordings components of the performance tool frame rate understand your site's overall responsiveness. call tree find bottlenecks in your site's javascript. allocations see the allocations made by your code over ...

Shader Editor - Firefox Developer Tools
the unreal engine demo): opening the shader editor the shader editor is disabled by default. to enable it, open the toolbox settings and check "shader editor" in the "default firefox developer tools" item. you'll now see "shader editor" appear in the toolbar. click it and the shader editor opens. at first you'll just see a blank window with a button asking you to reload the page: to get started, load a page which creates a webgl context and loads a program into it. the screenshots below are from the unreal engine demo. you'll now see a window divided into three panes: a list of all the glsl programs on the left, the vertex shader for the currently selected program in the middle, and the fragment shader for the currently selected program on the right: managing programs the left hand...

Animation.pause() - Web APIs
suspends playback of the animation. syntax animation.pause(); parameters none. return value none. exceptions invalidstateerror the animation's currenttime is unresolved (for example, if it's never been played or isn't currently playing) and the end time of the animation is positive infinity. throws an invalidstateerror if the animation's currenttime is unresolved (perhaps it hasn't started playing yet) and the end time of the animation is positive infinity. example animation.pause() is used many times in the alice in web animations api land growing/shrinking alice game, largely because animations created with the element.animate() method immediately start playing and must be paused manually if you want to avoid that: // animation of the cupcake slowly getting eaten up var nommin...

Animation.ready - Web APIs
the read-only animation.ready property of the web animations api returns a promise which resolves when the animation is ready to play. a new promise is created every time the animation enters the "pending" play state as well as when the animation is canceled, since in both of those scenarios, the animation is ready to be started again. since the same promise is used for both pending play and pending pause requests, authors are advised to check the state of the animation when the promise is resolved. syntax var readypromise = animation.ready; value a promise which resolves when the animation is ready to be played. you'll typically use a construct similar to this when using the ready promise: animation.ready.then(function() { // do whatever needs to be done when // the animation is ...

Animation.startTime - Web APIs
animation interface is a double-precision floating-point value which indicates the scheduled time when an animation's playback should begin. an animation’s start time is the time value of its documenttimeline when its target keyframeeffect is scheduled to begin playback. an animation’s start time is initially unresolved (meaning that it's null because it has no value). syntax var animationstartedwhen = animation.starttime; animation.starttime = newstarttime; value a floating-point number representing the current time in milliseconds, or null if no time is set. you can read this value to determine what the start time is currently set at, and you can change this value to make the animation start at a different time. examples in the running on web animations api example, the we can sync...

AnimationEvent.initAnimationEvent() - Web APIs
uctor, animationevent(), to create a synthetic animationevent. syntax animationevent.initanimationevent(typearg, canbubblearg, cancelablearg, animationnamearg, elapsedtimearg); parameters typearg a domstring identifying the specific type of animation event that occurred. the following values are allowed: value meaning animationstart the animation has started. animationend the animation completed. animationiteration the current iteration just completed. canbubblearg a boolean flag indicating if the event can bubble (true) or not (false). cancelablearg a boolean flag indicating if the event associated action can be avoided (true) or not (false). animationnamearg a domstring containing the value of the an...

AudioContext.createMediaStreamDestination() - Web APIs
mediastreamaudiodestinationnode. examples in the following simple example, we create a mediastreamaudiodestinationnode, an oscillatornode and a mediarecorder (the example will therefore only work in firefox and chrome at this time.) the mediarecorder is set up to record information from the mediastreamdestinationnode. when the button is clicked, the oscillator starts, and the mediarecorder is started. when the button is stopped, the oscillator and mediarecorder both stop. stopping the mediarecorder causes the dataavailable event to fire, and the event data is pushed into the chunks array. after that, the stop event fires, a new blob is made of type opus — which contains the data in the chunks array, and a new window (tab) is then opened that points to a url created from the blob. from here...

AudioScheduledSourceNode.start() - Web APIs
he audio buffer where playback should begin. if 0 is passed then the playback will start from the beginning. duration optional a floating-point number indicating the duration, in seconds, to be played. if no value is passed then the duration will be equal to the length of the audio buffer minus the offset value return value undefined exceptions invalidstatenode the node has already been started. this error occurs even if the node is no longer running because of a prior call to stop(). rangeerror the value specified for when is negative. example this example demonstrates how to create an oscillatornode which is scheduled to start playing in 2 seconds and stop playing 1 second after that. the times are calculated by adding the desired number of seconds to the context's current time s...

AudioScheduledSourceNode.stop() - Web APIs
en optional the time, in seconds, at which the sound should stop playing. this value is specified in the same time coordinate system as the audiocontext is using for its currenttime attribute. omitting this parameter, specifying a value of 0, or passing a negative value causes the sound to stop playback immediately. return value undefined exceptions invalidstatenode the node has not been started by calling start(). rangeerror the value specified for when is negative. example this example demonstrates starting an oscillator node, scheduled to begin playing at once and to stop playing in one second. the stop time is determined by taking the audio context's current time from audiocontext.currenttime and adding 1 second. context = new audiocontext(); osc = context.createoscillator(); o...

AudioScheduledSourceNode - Web APIs
specifically, this interface defines the start() and stop() methods, as well as the onended event handler. you can't create an audioscheduledsourcenode object directly. instead, use the interface which extends it, such as audiobuffersourcenode, oscillatornode, and constantsourcenode. ...

Background Tasks API - Web APIs
g processed (currenttasknumber), then we update the displayed value of the currently-being-processed task and the current value of the progress bar. then, if there's text waiting to be added to the log (that is, if logfragment isn't null), we append it to the log element using element.appendchild() and set logfragment to null so we don't add it again. if the log was scrolled to the end when we started, we make sure it still is. then we set statusrefreshscheduled to false to indicate that we've handled the refresh and that it's safe to request a new one. adding text to the log the log() function adds the specified text to the log. since we don't know at the time log() is called whether or not it's safe to immediately touch the dom, we will cache the log text until it's safe to update. above, ...

Using the CSS Typed Object Model - Web APIs
he value returned is the absolute path to the image — this is returned even if the original url() value was relative. had the background image been a gradient or multiple background images, .get('background-image') would have returned a cssstylevalue. the cssimagevalue is returned only if there is a single image, and only if that single image declaration is a url. summary this should get you started with understanding the css typed om. take a look at all the css typed om interfaces to learn more. see also using the css painting api ...

CanvasPattern.setTransform() - Web APIs
document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); }; note that newer browser versions started to support dommatrix as an input to settransform(), so for example you could replace the svgmatrix in the above example with the following: const matrix = new dommatrix([1, .2, .8, 1, 0, 0]); edit the code below and see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <svg id="svg1" style="display:none"></svg...

A basic ray-caster - Web APIs
mation yet, so i thought i'd try a port of a basic raycaster i'd worked on a while ago, and see what sort of performance we can expect from a javascript-controlled pixel buffer. how? the basic idea is to use setinterval() at some arbitrary delay that corresponds to a desired frame rate. after every interval an update function will repaint the canvas showing the current view. i know i could have started with a simpler example, but i'm sure the canvas tutorial will get to that, and i wanted to see if i could do this. so every update, the raycaster looks to see if you've pressed any keys lately, to conserve calculations by not casting if you're idle. if you have, then the canvas is cleared, the ground and sky are drawn, the camera position and/or orientation are updated, and the rays are cast out...

Canvas tutorial - Web APIs
, or create simple (and not so simple) animations. the images on this page show examples of <canvas> implementations which will be created in this tutorial. this tutorial describes how to use the <canvas> element to draw 2d graphics, starting with the basics. the examples provided should give you some clear ideas about what you can do with canvas, and will provide code snippets that may get you started in building your own content. first introduced in webkit by apple for the os x dashboard, <canvas> has since been implemented in browsers. today, all major browsers support it. before you start using the <canvas> element is not very difficult, but you do need a basic understanding of html and javascript. the <canvas> element is not supported in some older browsers, but is supported in recent v...

Using channel messaging - Web APIs
ou have to think about whether the origins trust one another, and how the messages are passed. message channels on the other hand can provide a secure channel that allows you to pass data between different browsing contexts. note: for more information and ideas, the ports as the basis of an object-capability model on the web section of the spec is a useful read. simple examples to get your started, we have published a couple of demos on github. first up, check out our channel messaging basic demo (run it live too), which shows a really simple single message transfer between a page and an embedded <iframe>. secondly, have a look at our multimessaging demo (run this live), which shows a slightly more complex setup that can send multiple messages between the main page and an iframe. we'll b...

CompositionEvent.data - Web APIs
f event that generated the compositionevent object. syntax mydata = compositionevent.data value a domstring representing the event data: for compositionstart events, this is the currently selected text that will be replaced by the string being composed. this value doesn't change even if content changes the selection range; rather, it indicates the string that was selected when composition started. for compositionupdate, this is the string as it stands currently as editing is ongoing. for compositionend events, this is the string as committed to the editor. specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'data' in that specification. obsolete initial definition. ...

Console.profileEnd() - Web APIs
calling this api immediately after console.profile() can cause it to not work. to work around this, call it in a settimeout with at least 5ms delay. see bug 1240249. the profileend method stops recording a profile previously started with console.profile(). you can optionally supply an argument to name the profile. doing so enables you to stop only that profile if you have multiple profiles being recorded. if console.profileend() is passed a profile name, and it matches the name of a profile being recorded, then that profile is stopped. if console.profileend() is passed a profile name and it does not match the name of a profile being recorded, no changes will be made. if console.profileend() is not passed a profile name, the most recently started profile is stopped. note: this featur...

Console.time() - Web APIs
see timers in the console documentation for details and examples. note: this feature is available in web workers. syntax console.time(label); parameters label the name to give the new timer. ...

Console.timeEnd() - Web APIs
see timers in the documentation for details and examples. note: this feature is available in web workers. syntax console.timeend(label); parameters label the name of the timer to stop. once stopped, the elapsed time is automatically displayed in the web console along with an indicator that the time has ended. ...

Console.timeLog() - Web APIs
see timers in the documentation for details and examples. note: this feature is available in web workers. syntax console.timelog(label); parameters label the name of the timer to log to the console. return if no label parameter included: default: 1042ms if an existing label is included: timer name: 1242ms exceptions if there is no running timer, timelog() returns the warning: timer “default” doesn’t exist. if a label parameter is included, but there is no corresponding timer: timer “timer name” doesn’t exist. ...

Console API - Web APIs
the console api provides functionality to allow developers to perform debugging tasks, such as logging messages or the values of variables at set points in your code, or timing how long an operation takes to complete. concepts and usage the console api started as a largely proprietary api, with different browsers implementing it, albeit it in inconsistent ways. the console api spec was created to define consistent behavior, and all modern browsers eventually settled on implementing this behavior — although some implementations still have their own additional proprietary functions. find out about these at: google chrome devtools implementation safari devtools implementation usage is very simple — the console object — available via window.console, or workerglobalscope.console in work...

DOMUserData - Web APIs
(), used as the third argument to handle() on userdatahandler, and is used or returned by various domconfiguration methods. note that although it can be an object, in mozilla, it may be returned as a string or other type, if it was set as such a type (e.g., node.setuserdata() and node.getuserdata()). domuserdata is not persisted nor serialized and will not be present after the application has restarted or after a crash. if you are interested in persisting data you might rather need to use nsisessionstore. specifications specification status comment document object model (dom) level 3 core specificationthe definition of 'domuserdata' in that specification. obsolete initial specification ...

DataTransfer.clearData() - Web APIs
event.datatransfer.cleardata(); // set the drag's format and data (use event target's id for data) event.datatransfer.setdata('text/plain', event.target.id); data.innerhtml = event.datatransfer.getdata('t...

DataTransfer.setData() - Web APIs
use the event target's id for the data ev.datatransfer.setdata("text/plain", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); // get the data, which is the id of the drop target var data = ev.d...

DedicatedWorkerGlobalScope - Web APIs
workerglobalscope interface, and its parent eventtarget, and therefore implements event handlers from windowtimers, windowbase64, and windoweventhandlers. dedicatedworkerglobalscope.onmessage is an eventhandler representing the code to be called when the message event is raised. these events are of type messageevent and will be called when the worker receives a message from the document that started it (i.e. from the worker.postmessage method.) dedicatedworkerglobalscope.onmessageerror is an eventhandler representing the code to be called when the messageerror event is raised. methods this interface inherits methods from the workerglobalscope interface, and its parent eventtarget, and therefore implements methods from windowtimers, windowbase64, and windoweventhandlers. dedicatedwork...

Document: pointercancel event - Web APIs
rcancel some examples of situations that will trigger a pointercancel event: a hardware event occurs that cancels the pointer activities. this may include, for example, the user switching applications using an application switcher interface or the "home" button on a mobile device. the device's screen orientation is changed while the pointer is active. the browser decides that the user started pointer input accidentally. this can happen if, for example, the hardware supports palm rejection to prevent a hand resting on the display while using a stylus from accidentally triggering events. the touch-action css property prevents the input from continuing. after the pointercancel event is fired, the browser will also send pointerout followed by pointerleave. examples using addeventli...

Document: selectstart event - Web APIs
the selectstart event of the selection api is fired when a user starts a new selection. if the event is canceled, the selection is not changed. bubbles yes cancelable yes interface event event handler property onselectstart examples // addeventlistener version document.addeventlistener('selectstart', () => { console.log('selection started'); }); // onselectstart version document.onselectstart = () => { console.log('selection changed.'); }; specifications specification status comment selection apithe definition of 'selectstart' in that specification. working draft initial definition. ...

Document: transitionrun event - Web APIs
ent that had the transition applied. you can listen for this event on the document interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: transitionrun. examples this code adds a listener to the transitionrun event: document.addeventlistener('transitionrun', () => { console.log('transition is running but hasn't necessarily started transitioning yet'); }); the same, but using the ontransitionrun property instead of addeventlistener(): document.ontransitionrun = () => { console.log('transition started running'); }; see a live example of this event. specifications specification status comment css transitionsthe definition of 'transitionrun' in that specification. working draft initial ...

EffectTiming.fill - Web APIs
ment immediately after the animation first begins to play, and the second defines the effect applied to the element in the last moment before it ends. those phrases are crucial. let's look at why. the first keyframe says that when the animation begins, the element should be rotated 90° to the left. that means that unless we specify otherwise using the fill property, the instant the animation is started the element will be rotated to the left 90°, and then it will animate smoothly from there. since by default the box isn't rotated, the last keyframe says that the animation's final frame should draw the animation rotated 90° to the right from its original orientation. var boxrotationtiming = { duration: 2000, iterations: 1, fill: "none" }; the boxrotationtiming object describes how lon...

Element: MSGestureHold event - Web APIs
ains in the same position for a while. it is a proprietary event specific to microsoft edge and internet explorer. bubbles unknown cancelable unknown interface msgestureevent event handler property unknown the uievent.detail property of an msgesturehold event has 3 possible values: msgesture_flag_begin this value indicates that the user started contacting the touch surface. msgesture_flag_end this value indicates that the user has stopped touching the touch surface. msgesture_flag_end & msgesture_flag_cancel (bitwise and-ed together) this value indicates that the user has moved their finger, regardless of whether they also stopped touching the touch surface specifications not part of any specification. ...

Fetch API - Web APIs
safari version 12. chrome version 68. if you are targetting older versions of these browsers, be sure to include credentials: 'same-origin' init option on all api requests that may be affected by cookies/user login state. note: find out more about using the fetch api features in using fetch, and study concepts in fetch basic concepts. aborting a fetch browsers have started to add experimental support for the abortcontroller and abortsignal interfaces (aka the abort api), which allow operations like fetch and xhr to be aborted if they have not already completed. see the interface pages for more details. fetch interfaces windoworworkerglobalscope.fetch() the fetch() method used to fetch a resource. headers represents response/request headers, allowing you to q...

FileReader - Web APIs
called filereader.abort(). also available via the onabort property. error fired when the read failed due to an error. also available via the onerror property. load fired when a read has completed successfully. also available via the onload property. loadend fired when a read has completed, successfully or not. also available via the onloadend property. loadstart fired when a read has started. also available via the onloadstart property. progress fired periodically as data is read. also available via the onprogress property. specifications specification status comment file apithe definition of 'filereader' in that specification. working draft initial definition ...

FileRequest.lockedFile - Web APIs
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. summary the lockedfile property represents the lockedfile object from which the request was started. syntax var lockedfile = instanceoffilerequest.lockedfile value a lockedfile object. specifications specification status comment filesystem api editor's draft draft proposal. ...

FileRequest - Web APIs
ng 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. summary the filerequest interface extends the domrequest interface to provide some extra properties necessary for the lockedfile objects. properties filerequest.lockedfile read only the lockedfile object from which the request was started. filerequest.onprogress a callback handler called repeatedly while the operation represented by the filerequest is in progress. the filerequest interface also inherits from the domrequest interface. methods none. specifications specification status comment filesystem api editor's draft draft proposal. ...

FontFaceSet - Web APIs
their download status. properties fontfaceset.status read only indicates the font-face's loading status. it will be one of 'loading' or 'loaded'. fontfaceset.ready read only promise which resolves once font loading and layout operations have completed. events fontfaceset.onloading an eventlistener called whenever an event of type loading is fired, indicating a font-face set has started loading. fontfaceset.onloadingdone an eventlistener called whenever an event of type loadingdone is fired, indicating that a font face set has finished loading. fontfaceset.onloadingerror an eventlistener called whenever an event of type loadingerror is fired, indicating that an error occurred whilst loading a font-face set. methods fontfaceset.add() adds a font to the font set. fontfa...

Frame Timing API - Web APIs
e timing api. performance frames the performanceframetiming interface extends the following performanceentry properties (for "frame" performance entry types) by qualifying and constrainting the properties as follows: performanceentry.entrytype set to "frame". performanceentry.name set to the document's address. performanceentry.starttime set to the domhighrestimestamp when the frame was started. performanceentry.duration set to a timestamp indicating the difference between the starttimes of two successive frames. this data, particularly the duration timestamp, can be used to help identify performance problems. frame observers the performance observer interfaces allow an application to register an observer for specific performance event types. when one of those event types is reco...

Using the Gamepad API - Web APIs
; }); chrome does things differently here. instead of constantly storing the gamepad's latest state in a variable it only stores a snapshot, so to do the same thing in chrome you have to keep polling it and then only use the gamepad object in code when it is available. we have done this below using window.setinterval(); once the object is available the gamepad info is outputted, the game loop is started, and the interval is cleared using window.clearinterval(). note that in older versions of chrome navigator.getgamepads() is implemented with a webkit prefix. we attempt to detect and handle both the prefixed version and the standard version of the function for backwards compatibility. var interval; if (!('ongamepadconnected' in window)) { // no gamepad events available, poll instead. interv...

GlobalEventHandlers.onanimationend - Web APIs
ogbox.innerhtml += msg; if (event) { logbox.innerhtml += " <code>"+ event.animationname + "</code> at time " + event.elapsedtime.tofixed(2) + " seconds."; } logbox.innerhtml += "\n"; }; then we set up the event handlers for the animationstart and animationend events: let box = document.getelementbyid("box"); box.onanimationstart = function(event) { log("animation started", event); } box.onanimationend = function(event) { log("animation stopped", event); }; finally, we set up a handler for a click on the button that runs the animation: document.getelementbyid("play").addeventlistener("click", function(event) { document.getelementbyid("box").classname = "slideanimation"; event.target.style.display = "none"; }, false); this sets the class of the box we wa...

GlobalEventHandlers.onanimationstart - Web APIs
ogbox.innerhtml += msg; if (event) { logbox.innerhtml += " <code>"+ event.animationname + "</code> at time " + event.elapsedtime.tofixed(2) + " seconds."; } logbox.innerhtml += "\n"; }; then we set up the event handlers for the animationstart and animationend events: let box = document.getelementbyid("box"); box.onanimationstart = function(event) { log("animation started", event); } box.onanimationend = function(event) { log("animation stopped", event); }; finally, we set up a handler for a click on the button that runs the animation: document.getelementbyid("play").addeventlistener("click", function(event) { document.getelementbyid("box").classname = "slideanimation"; event.target.style.display = "none"; }, false); this sets the class of the box we wa...

GlobalEventHandlers.ondragend - Web APIs
e drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.

GlobalEventHandlers.ondragenter - Web APIs
e drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.

GlobalEventHandlers.ondragexit - Web APIs
e drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.

GlobalEventHandlers.ondragleave - Web APIs
f using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's border to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's background color to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var ...

GlobalEventHandlers.onloadend - Web APIs
onloadend = funcref; value funcref is the handler function to be called when the resource's loadend event fires. examples html content <img src="myimage.jpg"> javascript content // 'loadstart' fires first, then 'load', then 'loadend' image.addeventlistener('load', function(e) { console.log('image loaded'); }); image.addeventlistener('loadstart', function(e) { console.log('image load started'); }); image.addeventlistener('loadend', function(e) { console.log('image load finished'); }); ...

GlobalEventHandlers.onloadstart - Web APIs
adstart = funcref; value funcref is the handler function to be called when the resource's loadstart event fires. examples html content <img src="myimage.jpg"> javascript content // 'loadstart' fires first, then 'load', then 'loadend' image.addeventlistener('load', function(e) { console.log('image loaded'); }); image.addeventlistener('loadstart', function(e) { console.log('image load started'); }); image.addeventlistener('loadend', function(e) { console.log('image load finished'); }); specifications specification status comment html living standardthe definition of 'onloadstart' in that specification. living standard initial definition ...

GlobalEventHandlers.onplay - Web APIs
living standard ...

GlobalEventHandlers.onselectstart - Web APIs
ixin is an eventhandler that processes selectstart events. the selectstart event fires when the user starts to make a new text selection on a webpage. syntax object.onselectstart = functionref; value functionref is a function name or a function expression. the function receives a focusevent object as its sole argument. example document.onselectstart = function() { console.log('selection started!'); }; for a full example, see our key quote generator demo. specifications specification status comment selection apithe definition of 'globaleventhandlers.onselectstart' in that specification. working draft initial definition. ...

HTMLElement: animationcancel event - Web APIs
ex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.t...

HTMLElement: animationend event - Web APIs
100%; } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.t...

HTMLElement: animationiteration event - Web APIs
ex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.t...

HTMLElement: pointercancel event - Web APIs
rcancel some examples of situations that will trigger a pointercancel event: a hardware event occurs that cancels the pointer activities. this may include, for example, the user switching applications using an application switcher interface or the "home" button on a mobile device. the device's screen orientation is changed while the pointer is active. the browser decides that the user started pointer input accidentally. this can happen if, for example, the hardware supports palm rejection to prevent a hand resting on the display while using a stylus from accidentally triggering events. the touch-action css property prevents the input from continuing. after the pointercancel event is fired, the browser will also send pointerout followed by pointerleave. examples using addeventli...

HTMLElement - Web APIs
ents transitioncancel fired when a css transition is canceled. also available via the ontransitioncancel property. transitionend fired when a css transition has completed. also available via the ontransitionend property. transitionrun fired when a css transition is first created. also available via the ontransitionrun property. transitionstart fired when a css transition has actually started. also available via the ontransitionstart property. specifications specification status comment css object model (cssom) view modulethe definition of 'htmlelement' in that specification. working draft added the following properties: offsetparent, offsettop, offsetleft, offsetwidth, and offsetheight. html living standardthe definition of 'htmlelement'...

HTMLMediaElement: loadstart event - Web APIs
the loadstart event is fired when the browser has started to load a resource. bubbles no cancelable no interface event event handler property onloadstart examples live example html <div class="example"> <button type="button">load video</button> <video controls width="250"></video> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } video...

Recommended Drag Types - Web APIs
method is used for non-textual data. as some contexts may only include some of these types, it is important to check which type is made available when receiving dropped images. dragging nodes nodes and elements in a document may be dragged using the application/x-moz-node type. the data for the type should be a dom node. this allows the drop target to receive the actual node where the drag was started from. note that callers from a different domain will not be able to access the node even when it has been dropped. you should always include a text/plain alternative for the node. dragging custom data you can also use other types that you invent for custom purposes. strive to always include a text/plain alternative, unless the dragged object is specific to a particular site or application. in ...

IDBTransaction.mode - Web APIs
stores: value explanation readonly allows data to be read but not changed. readwrite allows reading and writing of data in existing data stores to be changed. versionchange allows any operation to be performed, including ones that delete and create object stores and indexes. this mode is for updating the version number of transactions that were started using idbdatabase.setversion(). transactions of this mode cannot run concurrently with other transactions. transactions in this mode are known as "upgrade transactions." example in the following code snippet, we open a read/write transaction on our database and add some data to an object store. note also the functions attached to transaction event handlers to report on the outcome of the ...

MediaRecorder.ondataavailable - Web APIs
dataavailable event occurred is delivered in a blob; after this, capturing ends. when mediarecorder.requestdata() is called, all media data which has been captured since recording began or the last time a dataavailable event occurred is delivered; then a new blob is created and media capture continues into that blob. if a timeslice property was passed into the mediarecorder.start() method that started media capture, a dataavailable event is fired every timeslice milliseconds. that means that each blob will have a specific time duration (except the last blob, which might be shorter, since it would be whatever is left over since the last event). so if the method call looked like this — recorder.start(1000); — the dataavailable event would fire after each second of media capture, and our even...

MediaRecorder.onstart - Web APIs
the mediarecorder.onstartevent handler (part of the mediarecorder api) handles the start event, allowing you to run code in response to media recording being started by a mediarecorder. the start event is thrown as a result of the mediarecorder.start() method being invoked. at this point, the data starts being gathered into a blob. syntax mediarecorder.onstart = function(event) { ... } mediarecorder.addeventlistener('start', function(event) { ... }) example ... record.onclick = function() { mediarecorder.start(); console.log("recorder started"); } mediarecorder.onstart = function() { // do something in response to // recording being started } ... properties none. specifications specification status comment mediastream recordingthe defin...

MediaRecorder.start() - Web APIs
within the stream is marked as isolated due to the peeridentity constraint on the source stream. this exception may also be delivered as an error event if the security options for the source media change after recording begins. unknownerror something else went wrong during the recording process. example ... record.onclick = function() { mediarecorder.start(); console.log("recorder started"); } ... specifications specification status comment mediastream recordingthe definition of 'mediarecorder.start()' in that specification. working draft initial definition ...

MediaRecorder.state - Web APIs
the mediarecorder.state read-only property returns the current state of the current mediarecorder object. syntax var state = mediarecorder.state values a animationplaystate object containing one of the following values: enumeration description inactive recording is not occuring — it has either not been started yet, or it has been started and then stopped. recording recording has been started and the ua is capturing data. paused recording has been started, then paused, but not yet stopped or resumed. example ... record.onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); // will return "recording" console.log("recorder started"); } ... specifications specification stat...

MediaRecorder - Web APIs
diadevices) { console.log('getusermedia supported.'); var constraints = { audio: true }; var chunks = []; navigator.mediadevices.getusermedia(constraints) .then(function(stream) { var mediarecorder = new mediarecorder(stream); visualize(stream); record.onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); console.log("recorder started"); record.style.background = "red"; record.style.color = "black"; } stop.onclick = function() { mediarecorder.stop(); console.log(mediarecorder.state); console.log("recorder stopped"); record.style.background = ""; record.style.color = ""; } mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop()...

Using the MediaStream Recording API - Web APIs
ethods available in the mediarecorder interface that allow you to control recording of the media stream; in web dictaphone we just make use of two, and listen to some events. first of all, mediarecorder.start() is used to start recording the stream once the record button is pressed: record.onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); console.log("recorder started"); record.style.background = "red"; record.style.color = "black"; } when the mediarecorder is recording, the mediarecorder.state property will return a value of "recording". as recording progresses, we need to collect the audio data. we register an event handler to do this using mediarecorder.ondataavailable: let chunks = []; mediarecorder.ondataavailable = function(e) { chunks.push(e.d...

MediaTrackSupportedConstraints.cursor - Web APIs
tsupportedconstraints(). syntax iscursorsupported = supportedconstraints.cursor; value a boolean value which is true if the cursor constraint is supported by the device and user agent. example this method sets up the constraints object specifying the options for the call to getdisplaymedia(). it adds the cursor constraint only if it is known to be supported by the browser. capturing is then started by calling getdisplaymedia() and attaching the returned stream to the video element referenced by the variable videoelem. async function capturewithcursor() { let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); let displaymediaoptions = { video: { displaysurface: "browser" }, audio: false; }; if (supportedconstraints.cursor) { displaymediao...

MediaTrackSupportedConstraints.displaySurface - Web APIs
playsurface; value a boolean value which is true if the displaysurface constraint is supported by the device and user agent. example this method sets up the constraints object specifying the options for the call to getdisplaymedia(). it adds the displaysurface constraint (requesting that only full-screen sharing be allowed) only if it is known to be supported by the browser. capturing is then started by calling getdisplaymedia() and attaching the returned stream to the video element referenced by the variable videoelem. async function capture() { let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); let displaymediaoptions = { video: { }, audio: false; }; if (supportedconstraints.displaysurface) { displaymediaoptions.video.displaysurface = "mon...

MediaTrackSupportedConstraints.logicalSurface - Web APIs
the device and user agent. example this method sets up the constraints object specifying the options for the call to getdisplaymedia(). it adds the logicalsurface constraint (requesting that only logical display surfaces—those which may not be entirely visible onscreen—be included among the options available to the user) only if it is known to be supported by the browser. capturing is then started by calling getdisplaymedia() and attaching the returned stream to the video element referenced by the variable videoelem. async function capture() { let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); let displaymediaoptions = { video: { }, audio: false; }; if (supportedconstraints.logicalsurface) { displaymediaoptions.video.logicalsurface = "mon...

Capabilities, constraints, and settings - Web APIs
ovide the right constraints you can get media from other sources). when the stream is obtained, it's attached to the <video> element so that it's visible on screen, and we grab the audio track and video track into the variables audiotrack and videotrack. then we set up a promise which resolves when the onloadedmetadata event occurs on the video element. when that happens, we know the video has started playing, so we call our getcurrentsettings() function (described above) to display the actual settings that the browser decided upon after considering our constraints and the capabilities of the hardware. if an error occurs, we log it using the handleerror() method that we'll look at farther down in this article. we also need to set up an event listener to watch for the "start video" button to...

Media Capture and Streams API (Media Stream) - Web APIs
nederror url early versions of the media capture and streams api specification included separate audiostreamtrack and videostreamtrack interfaces—each based upon mediastreamtrack—which represented streams of those types. these no longer exist, and you should update any existing code to instead use mediastreamtrack directly. events addtrack ended muted overconstrained removetrack started unmuted guides and tutorials the articles below provide additional guidance and how-to information that will help you learn to use the api, and how to perform specific tasks that you may wish to handle. capabilities, constraints, and settingsthe twin concepts of constraints and capabilities let the browser and web site or app exchange information about what constrainable propertie...

NDEFWriter.write() - Web APIs
s rejected or overwrite is false and there are already records on the tag. notsupportederror there is no nfc adapter compatible with web nfc, or the available nfc adapter does not support pushing messages, or connection can not be established. notreadableerror the ua is not allowed to access underlying nfc adapter (e.g., due to user preference). networkerror transfer failed after it already started (e.g., the tag was removed from the reader). specifications specification status comment web nfc, write() draft initial definition. ...

OfflineAudioContext.resume() - Web APIs
the resume() method of the offlineaudiocontext interface resumes the progression of time in an audio context that has been suspended. the promise resolves immediately because the offlineaudiocontext does not require the audio hardware. if the context is not currently suspended or the rendering has not started, the promise is rejected with invalidstateerror. syntax offlineaudiocontext.resume().then(function() { ... }); parameters none. returns a promise resolving to void. exceptions the promise is rejected when the following exception is encountered. invalidstateerror if the context is not currently suspended or the rendering has not started. specifications specification status comment web audio apithe definition of 'resume()' in that specification. work...

PerformanceEntry.startTime - Web APIs
"mark" - returns the timestamp when the mark was created by a call to performance.mark(). "measure" - returns the timestamp when the measure was created by a call to performance.measure(). "navigation" - returns the timestamp with a value of "0". ...

PerformanceEventTiming - Web APIs
dragleave dragover dragstart drop input keydown keypress keyup mousedown mouseenter mouseleave mouseout mouseover mouseup pointerover pointerenter pointerdown pointerup pointercancel pointerout pointerleave gotpointercapture lostpointercapture touchstart touchend touchcancel properties performanceeventtiming.processingstart returns the time at which event dispatch started. performanceeventtiming.processingend returns the time at which the event dispatch ended. performanceeventtiming.cancelable returns the associated event's cancelable attribute. performanceeventtiming.target returns the associated event's last target, if it is not removed. methods performanceeventtiming.tojson() converts the performanceeventtiming object to json. examples the follow...

PerformanceFrameTiming - Web APIs
pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties (for "frame" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "frame". performanceentry.name returns the document's address. performanceentry.starttime returns the timestamp when the frame was started. performanceentry.duration returns a timestamp indicating the difference between the starttimes of two successive frames. methods this interface has no methods. example see the example in using the frame timing api. specifications specification status comment frame timingthe definition of 'performanceframetiming' in that specification. draft initial definiti...

PerformanceNavigationTiming.type - Web APIs
reload navigation is through the browser's reload operation or location.reload(). back_forward navigation is through the browser's history traversal operation. prerender navigation is initiated by a prerender hint. this property is read only . ...

PerformanceResourceTiming - Web APIs
ilable in web workers. properties this interface extends the following performanceentry properties for resource performance entry types by qualifying and constraining them as follows: performanceentry.entrytyperead only returns "resource". performanceentry.nameread only returns the resources url. performanceentry.starttimeread only returns the timestamp for the time a resource fetch started. this value is equivalent to performanceentry.fetchstart. performanceentry.durationread only returns a timestamp that is the difference between the responseend and the starttime properties. the interface also supports the following properties which are listed in the order in which they are recorded for the fetching of a single resource. an alphabetical listing is shown in the navigation, at ...

PerformanceTiming.connectEnd - Web APIs
operty is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.connectend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the connection is opened network. if the transport layer reports an error and the connection establishment is started again, the last connection establisment end time is given. if a persistent connection is used, the value will be the same as performancetiming.fetchstart. a connection is considered as opened when all secure connection handshake, or socks authentication, is terminated. syntax time = performancetiming.connectend; specifications specification status comment navigation ti...

PerformanceTiming.connectStart - Web APIs
he navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.connectstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the request to open a connection is sent to the network. if the transport layer reports an error and the connection establishment is started again, the last connection establisment start time is given. if a persistent connection is used, the value will be the same as performancetiming.fetchstart. syntax time = performancetiming.connectstart; specifications specification status comment navigation timingthe definition of 'performancetiming.connectstart' in that specification. recommendation initial defi...

PerformanceTiming.domLoading - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.domloading read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the parser started its work, that is when its document.readystate changes to 'loading' and the corresponding readystatechange event is thrown. syntax time = performancetiming.domloading; specifications specification status comment navigation timingthe definition of 'performancetiming.domloading' in that specification. recommendation initial definition. ...

ProgressEvent.initProgressEvent() - Web APIs
ndard constructor, progressevent(), to create a synthetic progressevent syntax progress.initprogressevent(typearg, canbubblearg, cancelablearg, lengthcomputable, loaded, total); parameters typearg is a domstring identifying the specific type of animation event that occurred. the following values are allowed: value meaning loadstart the operation has started. progress the operation still is in progress. error the operation failed and didn't complete. abort the operation was cancelled and didn't complete. load the operation completed. loadend the operation stopped. canbubblearg is a boolean flag indicating if the event can bubble (true) or not (false). cancel...

Push API - Web APIs
xsrf attacks for an app to receive push messages, it has to have an active service worker. when the service worker is active, it can subscribe to push notifications, using pushmanager.subscribe(). the resulting pushsubscription includes all the information that the application needs to send a push message: an endpoint and the encryption key needed for sending data. the service worker will be started as necessary to handle incoming push messages, which are delivered to the serviceworkerglobalscope.onpush event handler. this allows apps to react to push messages being received, for example, by displaying a notification (using serviceworkerregistration.shownotification().) each subscription is unique to a service worker. the endpoint for the subscription is a unique capability url: knowledge ...

RTCDTMFSender.ontonechange - Web APIs
r the tonechange event, which is sent to the rtcdtmfsender each time a tone begins or ends. the event handler receives as input a single parameter of type rtcdtmftonechangeevent, which describes the change. syntax rtcdtmfsender.ontonechange = tonechangehandlerfunction; value a function which is called when a tonechange event is sent to the rtcdtmfsender, indicating that a dtmf tone has either started playing, or if all tones have finished playing. example tbd specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'ontonechange' in that specification. candidate recommendation ...

RTCDTMFSender: tonechange event - Web APIs
the tonechange event is sent to an rtcdtmfsender by the webrtc api to indicate when dtmf tones previously queued for sending (by calling rtcdtmfsender.insertdtmf()) begin and end. bubbles no cancelable no interface rtcdtmftonechangeevent event handler property ontonechange to determine what tone started playing, or if a tone stopped playing, check the value of the event's tone property. examples this example establishes a handler for the tonechange event which updates an element to display the currently playing tone in its content, or, if all tones have played, the string "<none>". this can be done using addeventlistener(): dtmfsender.addeventlistener("tonechange", ev => { let tone = ev.tone; if (tone === "") { tone = "&lt;none&...

RTCDTMFSender - Web APIs
y-pending tones from the tonebuffer. you can abort sending queued tones by specifying an empty string ("") as the set of tones to play. events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface. tonechange the tonechange event is sent to the rtcdtmfsender instance's event handler to indicate that a tone has either started or stopped playing. also available using the ontonechange event handler property. example see the article using dtmf with webrtc for a full example. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdtmfsender' in that specification. candidate recommendation ...

RTCDTMFToneChangeEvent - Web APIs
this interface is used by the tonechange event. properties in addition to the properties of event, this interface offers the following: rtcdtmftonechangeevent.tone read only a domstring specifying the tone which has begun playing, or an empty string ("") if the previous tone has finished playing. constructors rtcdtmftonechangeevent() returns a new rtcdtmftonechangeevent. it takes two parameters, the first being a domstring representing the type of the event (always "tonechange"); the second a dictionary containing the initial state of the properties of the event. ...

RTCDataChannel: close event - Web APIs
created. bubbles no cancelable no interface event event handler property rtcdatachannel.onclose examples this example sets up a handler for the close event for the rtcdatachannel named dc; its responsibility in this example is to update user interface elements to reflect that there is no longer an ongoing call, and to allow a new call to be started. dc.addeventlistener("close", ev => { messageinputbox.disabled = true; sendbutton.disabled = true; connectbutton.disabled = false; disconnectbutton.disabled = true; }, false); all this code does in response to receiving the close event is to disable an input box and its "send" button, and to enable the button used to start a call (while disabling the one that ends a call). you can als...

RTCDataChannel.readyState - Web APIs
connection. constant description "connecting" the user agent (browser) is in the process of creating the underlying data transport; that is, whatever network level connection is used to link the two peers together is in the process of being set up. this is the state of a new rtcdatachannel after being created by rtcpeerconnection.createdatachannel() (on the peer which started the connection process). "open" the underlying data transport has been established and data can be transferred bidirectionally across it. this is the default state of a new rtcdatachannel created by the webrtc layer when the remote peer created the channel and delivered to the site or app in a datachannel event of type rtcdatachannelevent. "closing" the process of closing ...

RTCDtlsTransport.state - Web APIs
the state read-only property of the rtcdtlstransport interface provides information which describes a datagram transport layer security (dtls) transport state. syntax let mystate = dtlstransport.state; value a string whose value is taken from the rtcdtlstransportstate enumerated type. its value is one of the following: new the initial state when dtls has not started negotiating yet. connecting dtls is in the process of negotiating a secure connection and verifying the remote fingerprint. connected dtls has completed negotiation of a secure connection and verified the remote fingerprint. closed the transport has been closed intentionally as the result of receipt of a close_notify alert, or calling rtcpeerconnection.close(). failed the transport has failed as the result of an error...

RTCIceGathererState - Web APIs
"gathering" the transport is in the process of gathering candidates. "complete" the transport has finished gathering ice candidates and has sent the end-of-candidates indicator to the remote device. the transport won't gather any further candidates unless an ice restart occurs, at which point the gathering process starts over from scratch. ...

RTCIceTransport.gatheringState - Web APIs
ated type rtcicegathererstate that indicates what gathering state the ice agent is currently in: "new", "gathering", or "complete". syntax gatherstate = rtcicetransport.gatheringstate; value a string from the rtcicegathererstate enumerated type whose value indicates the current state of the ice agent's candidate gathering process: "new" the rtcicetransport is newly created and has not yet started to gather ice candidates. "gathering" the transport is in the process of gathering candidates. "complete" the transport has finished gathering ice candidates and has sent the end-of-candidates indicator to the remote device. the transport won't gather any further candidates unless an ice restart occurs, at which point the gathering process starts over from scratch. specifications ...

RTCIceTransport.ongatheringstatechange - Web APIs
angehandler; value a function to be called when the rtcicetransport object's gathering state changes. to determine the new state, examine the value of gatheringstate. the gathering state indicates whether or not the ice agent has begun gathering candidates, and if so, whether or not gathering has finished. its possible values are: "new" the rtcicetransport is newly created and has not yet started to gather ice candidates. "gathering" the transport is in the process of gathering candidates. "complete" the transport has finished gathering ice candidates and has sent the end-of-candidates indicator to the remote device. the transport won't gather any further candidates unless an ice restart occurs, at which point the gathering process starts over from scratch. example this snippet est...

RTCIceTransportState - Web APIs
checking pairs of candidates, without successfully finding a pair that is both valid and for which consent can be obtained. this is a terminal state, indicating that the connection cannot be achieved or maintained. "closed" the transport has shut down and is no longer responding to stun requests. usage notes if an ice restart occurs, the candidate gathering and connectivity check process is started over again; this will cause a transition from the "connected" state if the restart occurred while the state was "completed". if the restart occured during a transient "disconnected" state, the state transitions to "checking" the disconnected state "disconnected" is a transient state that occurs when the connection between the two peers fails in a manner that the webrtc infrastructure can autom...

RTCPeerConnection.createDataChannel() - Web APIs
the createdatachannel() method on the rtcpeerconnection interface creates a new channel linked with the remote peer, over which any kind of data may be transmitted. this can be useful for back-channel content such as images, file transfer, text chat, game update packets, and so forth. if the new data channel is the first one added to the connection, renegotiation is started by delivering a negotiationneeded event. syntax datachannel = rtcpeerconnection.createdatachannel(label[, options]); parameters label a human-readable name for the channel. this string may not be longer than 65,535 bytes. options optional an rtcdatachannelinit dictionary providing configuration options for the data channel rtcdatachannelinit dictionary the rtcdatachannelinit dictionary provides the following fiel...

RTCPeerConnection: iceconnectionstatechange event - Web APIs
an be skipped, causing a connection to transition directly from the checking state to completed. this can happen when only the last checked candidate is successful, and the gathering and end-of-candidates signals both occur before the successful negotiation is completed. ice connection state during ice restarts when an ice restart is processed, the gathering and connectivity checking process is started over from the beginning, which will cause the iceconnectionstate to transition to connected if the ice restart was triggered while in the completed state. if ice restart is initiated while in the transient disconnected state, the state transitions instead to checking, essentially indicating that the negotiation is ignoring the fact that the connection had been temporarily lost. state transitions...

RTCPeerConnection.setConfiguration() - Web APIs
on.createoffer({"icerestart": true}).then(function(offer) { return mypeerconnection.setlocaldescription(offer); }) .then(function() { // send the offer to the other peer using the signaling server }) .catch(reporterror); first, a new rtcconfiguration is created, restartconfig, specifying the new ice server and its credentials. this is then passed into setconfiguration(). ice negotiation is restarted by calling createoffer(), specifying true as the value of the icerestart option. from there, we handle the process as usual, by setting the local description to the returned offer and then sending that offer to the other peer. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'setconfiguration()' in that spe...

ReportingObserver.disconnect() - Web APIs
after calling disconnect(), neither reportingobserver.takerecords() nor the records parameter of the reportingobserver() callback will return any reports. the associated observer will no longer be active. syntax reportingobserverinstance.disconnect() examples let options = { types: ['deprecation'], buffered: true } let observer = new reportingobserver(function(reports, observer) { reportbtn.onclick = () => displayreports(reports); }, options); observer.observe() ... ...

ReportingObserver - Web APIs
the reportingobserver interface of the reporting api allows you to collect and access reports. constructor reportingobserver() creates a new reportingobserver object instance, which can be used to collect and access reports. properties this interface has no properties defined on it. methods reportingobserver.disconnect() stops a reporting observer that had previously started observing from collecting reports. reportingobserver.observe() instructs a reporting observer to start collecting reports in its report queue. reportingobserver.takerecords() returns the current list of reports contained in the observer's report queue, and empties the queue. events this interface has no events that fire on it. examples in our deprecation_report.html example, we create a simple...

Resource Timing API - Web APIs
property returns the network protocol used to fetch the resource. the initiatortype property returns the type of resource that initiated the performance entry such as "css" for a css resource, "xmlhttprequest" for an xmlhttprequest and "img" for an image (such as a jpeg). if the current context is a worker, the workerstart property can be used to obtain a domhighrestimestamp when the worker was started. methods the resource timing api includes two methods that extend the performance interface. the clearresourcetimings() method removes all "resource" type performance entries from the browser's resource performance entry buffer. the setresourcetimingbuffersize() method sets the resource performance entry buffer size to the specified number of resource performance entries. the performanceresour...

Selection API - Web APIs
pying the selection to a text string using selection.tostring(), adding a range (as represented by a standard range object) to the selection (or removing one) with selection.addrange()/selection.removerange(), or changing the selection to be the entire contents of a dom node using selection.selectallchildren(). you can run code in response to the selection being changed, or a new selection being started, using the globaleventhandlers.onselectionchange and globaleventhandlers.onselectstart event handlers. selection api interfaces selection represents the range of text selected by the user or the current position of the caret. extensions to other interfaces window.getselection(), document.getselection() returns a selection object representing the range of text selected by the user or...

Using server-sent events - Web APIs
h as a network timeout or issues pertaining to access control), an error event is generated. you can take action on this programmatically by implementing the onerror callback on the eventsource object: evtsource.onerror = function(err) { console.error("eventsource failed:", err); }; closing event streams by default, if the connection between the client and server closes, the connection is restarted. the connection is terminated with the .close() method. evtsource.close(); event stream format the event stream is a simple stream of text data which must be encoded using utf-8. messages in the event stream are separated by a pair of newline characters. a colon as the first character of a line is in essence a comment, and is ignored. note: the comment line can be used to prevent connections ...

ServiceWorkerGlobalScope - Web APIs
ext of a service worker. developers should keep in mind that the serviceworker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state. once successfully registered, a service worker can and will be terminated when idle to conserve memory and processor power. an active service worker is automatically restarted to respond to events, such as serviceworkerglobalscope.onfetch or serviceworkerglobalscope.onmessage. additionally, synchronous requests are not allowed from within a service worker — only asynchronous requests, like those initiated via the fetch() method, can be used. this interface inherits from the workerglobalscope interface, and its parent eventtarget, and therefore implements properties...

SharedWorker.port - Web APIs
orker interface returns a messageport object used to communicate and control the shared worker. syntax myworker.port; value a messageport object. example the following code snippet shows creation of a sharedworker object using the sharedworker() constructor. multiple scripts can then access the worker through a messageport object accessed using the sharedworker.port property — the port is started using its start() method: var myworker = new sharedworker('worker.js'); myworker.port.start(); for a full example, see our basic shared worker example (run shared worker.) specifications specification status comment html living standardthe definition of 'abstractworker.onerror' in that specification. living standard ...

SpeechRecognition: audiostart event - Web APIs
the audiostart event of the web speech api is fired when the user agent has started to capture audio for speech recognition. bubbles no cancelable no interface event event handler onaudiostart examples you can use the audiostart event in an onaudiostart method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('audiostart', function() { console.log('audio capturing started'); }); or use the onaudiostart event handler property: recognition.onaudiostart = function() { console.log('audio capturing started'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification. draft...

SpeechRecognition.onaudiostart - Web APIs
the onaudiostart property of the speechrecognition interface represents an event handler that will run when the user agent has started to capture audio (when the audiostart event fires.) syntax myspeechrecognition.onaudiostart = function() { ... }; examples var recognition = new speechrecognition(); recognition.onaudiostart = function() { console.log('audio capturing started'); } specifications specification status comment web speech apithe definition of 'onaudiostart' in that specification. draft ...

SpeechRecognition.onstart - Web APIs
draft ...

SpeechRecognition: start event - Web APIs
current speechrecognition. bubbles no cancelable no interface event event handler property onstart examples you can use the start event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('start', function() { console.log('speech recognition service has started'); }); or use the onstart event handler property: recognition.onstart = function() { console.log('speech recognition service has started'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification. draft ...

SpeechRecognition - Web APIs
with the current speechrecognition. speechrecognition.stop() stops the speech recognition service from listening to incoming audio, and attempts to return a speechrecognitionresult using the audio captured so far. events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface. audiostart fired when the user agent has started to capture audio. also available via the onaudiostart property. audioend fired when the user agent has finished capturing audio. also available via the onaudioend property. end fired when the speech recognition service has disconnected. also available via the onend property. error fired when a speech recognition error occurs. also available via the onerror property. nomatch fired when...

SpeechSynthesisEvent.elapsedTime - Web APIs
syntax event.elapsedtime; value a float. ...

SpeechSynthesisEvent - Web APIs
the speechsynthesisevent interface also inherits properties from its parent interface, event. speechsynthesisevent.charindex read only returns the index position of the character in the speechsynthesisutterance.text that was being spoken when the event was triggered. speechsynthesisevent.elapsedtime read only returns the elapsed time in milliseconds after the speechsynthesisutterance.text started being spoken that the event was triggered at. speechsynthesisevent.name read only returns the name associated with certain types of events occuring as the speechsynthesisutterance.text is being spoken: the name of the ssml marker reached in the case of a mark event, or the type of boundary reached in the case of a boundary event. speechsynthesisevent.utterance read only returns the speechsy...

SpeechSynthesisUtterance.onstart - Web APIs
draft ...

SpeechSynthesisUtterance: start event - Web APIs
nt of the web speech api speechsynthesisutterance object is fired when the utterance has begun to be spoken. bubbles no cancelable no interface speechsynthesisevent event handler property onstart examples you can use the start event in an addeventlistener method: utterthis.addeventlistener('start', function(event) { console.log('we have started uttering this speech: ' + event.utterance.text); }); or use the onstart event handler property: utterthis.onstart = function(event) { console.log('we have started uttering this speech: ' + event.utterance.text); } specifications specification status comment web speech apithe definition of 'speech synthesis utterance events' in that specification. draft ...

TextTrack - Web APIs
"en-us" for united states english or "pt-br" for brazilian portuguese. texttrack.mode a domstring specifying the track's current mode. changing this property's value changes the track's current mode to match. permitted values are listed under text track mode constants. the default is disabled, unless the <track> element's default boolean attribute is specified, in which case the default mode is started. events cuechange fired when cues are entered and exited. a given text cue appears when the cue is entered and disappears when the cue is exited. also available via the oncuechange property. methods this interface also inherits methods from eventtarget. texttrack.addcue() adds a cue (specified as a texttrackcue object to the track's list of cues. texttrack.removecue() removes a cu...

Touch() - Web APIs
the touch() constructor creates a new touch object. syntax touch = new touch(touchinit); arguments touchinit is a touchinit dictionary, having the following fields: "identifier", required, of type long, that is the identification number for the touch point. "target", required, of type eventtarget, the item at which the touch point started when it was first placed on the surface. "clientx", optional and defaulting to 0, of type double, that is the horizontal position of the touch on the client window of user's screen, excluding any scroll offset. "clienty", optional and defaulting to 0, of type double, that is the vertical position of the touch on the client window of the user's screen, excluding any scroll offset. "screenx", optional and defaulting to 0, of type double...

Touch - Web APIs
e x coordinate of the touch point relative to the left edge of the document. unlike clientx, this value includes the horizontal scroll offset, if any. touch.pagey read only returns the y coordinate of the touch point relative to the top of the document. unlike clienty, this value includes the vertical scroll offset, if any. touch.target read only returns the element on which the touch point started when it was first placed on the surface, even if the touch point has since moved outside the interactive area of that element or even been removed from the document. touch area touch.radiusx read only returns the x radius of the ellipse that most closely circumscribes the area of contact with the screen. the value is in pixels of the same scale as screenx. touch.radiusy read only ...

TouchEvent() - Web APIs
event. toucheventinit optional is a toucheventinit dictionary, having the following fields: "touches", optional and defaulting to [], of type touch[], that is a list of objects for every point of contact currently touching the surface. "targettouches", optional and defaulting to [], of type touch[], that is a list of objects for every point of contact that is touching the surface and started on the element that is the target of the current event. "changedtouches", optional and defaulting to [], of type touch[], that is a list of objects for every point of contact which contributed to the event. "ctrlkey", optional and defaulting to false, of type boolean, that indicates if the ctrl key was simultaneously pressed. "shiftkey", optional and defaulting to false, of type boolean, th...

TouchEvent.targetTouches - Web APIs
ouch objects for touch points that are still in contact with the touch surface and whose touchstart event occurred inside the same target element as the current target element. example this example illustrates the touchevent object's touchevent.targettouches property. the touchevent.targettouches property is a touchlist object that includes those tps that are currently touching the surface and started on the element that is the target of the current event. as such, the targettouches list is a strict subset of the touches list. in following code snippet, the function compares the length of the touches list to the the length of the targettouches list and returns true if the lengths are the same and returns false otherwise. function touches_in_target(ev) { // return true if all of the touches...

TouchEvent - Web APIs
chevent.metakey read only a boolean value indicating whether or not the meta key was down when the touch event was fired. touchevent.shiftkey read only a boolean value indicating whether or not the shift key was down when the touch event was fired. touchevent.targettouchesread only a touchlist of all the touch objects that are both currently in contact with the touch surface and were also started on the same element that is the target of the event. touchevent.touches read only a touchlist of all the touch objects representing all current points of contact with the surface, regardless of target or changed status. touchevent.rotation read only change in rotation (in degrees) since the event's beginning. positive values indicate clockwise rotation; negative values indicate anticlockw...

TouchList.item() - Web APIs
touchlist. return value touchpoint the requested touch object from the touchlist. returns null if the index is not less than the length of the list. example this code example illustrates the use of the touchlist interface's item method and the length property. ...

TouchList.length - Web APIs
ms (touch points) in a given touchlist. syntax var numtouches = touchlist.length; return value numtouches the number of touch points in touchlist. example this code example illustrates the use of the touchlist interface's item method and the length property. ...

TransitionEvent - Web APIs
ransition doesn't run on a pseudo-element but on the element, an empty string: ''. types of transitionevent transitioncancel an event fired when a css transition has been cancelled. transitionend an event fired when a css transition has finished playing. transitionrun an event fired when a css transition is created, when it is added to a set of running transitions, though not nessarilty started transitionstart an event fired when a css transition has started transitioning. methods also inherits properties from its parent event. transitionevent.inittransitionevent() initializes a transitionevent created using the deprecated document.createevent("transitionevent") method. specifications specification status comment css transitionsthe definition o...

USBDevice.open() - Web APIs
syntax var promise = usbdevice.open() parameters none. return value a promise. ...

USBDevice.opened - Web APIs
a device must be opened before it can be controlled by a web page. syntax var serialnumber = usbdevice.opened value a boolean. example this example is for a hypothetical usb device with a multi-colored led. it shows how to test that a device is open before calling usbdevice.controltransferout to set a specified led color. what data can be passed to a usb device and how it is passed is particular and unique to each device. ...

WebGL2RenderingContext - Web APIs
etcontext('webgl2'); webgl 2 is an extension to webgl 1. the webgl2renderingcontext interface implements all members of the webglrenderingcontext interface. some methods of the webgl 1 context can accept additional values when used in a webgl 2 context. you will find this info noted on the webgl 1 reference pages. the webgl tutorial has more information, examples, and resources on how to get started with webgl. constants see the webgl constants page. state information webgl2renderingcontext.getindexedparameter() returns the indexed value for the given target. buffers webgl2renderingcontext.bufferdata() initializes and creates the buffer object's data store. webgl2renderingcontext.buffersubdata() updates a subset of a buffer object's data store. webgl2renderingcontext.copybuff...

WebGLRenderingContext.makeXRCompatible() - Web APIs
"click", handlestartbuttonclick); }); outputcanvas.addeventlistener("webglcontextlost", (event) => { /* the context has been lost but can be restored */ event.canceled = true; }); /* when the gl context is reconnected, reload the resources for the current scene. ...

WebGLRenderingContext - Web APIs
to get an access to a webgl context for 2d and/or 3d graphics rendering, call getcontext() on a <canvas> element, supplying "webgl" as the argument: var canvas = document.getelementbyid('mycanvas'); var gl = canvas.getcontext('webgl'); once you have the webgl rendering context for a canvas, you can render within it. the webgl tutorial has more information, examples, and resources on how to get started with webgl. if you require a webgl 2.0 context, see webgl2renderingcontext; this supplies access to an implementation of opengl es 3.0 graphics. constants see the webgl constants page. the webgl context the following properties and methods provide general information and functionality to deal with the webgl context: webglrenderingcontext.canvas a read-only back-reference to the htmlcanv...

WebGL constants - Web APIs
as = document.getelementbyid('mycanvas'); var gl = canvas.getcontext('webgl'); gl.getparameter(gl.line_width); some constants are also provided by webgl extensions. a list is provided below. var debuginfo = gl.getextension('webgl_debug_renderer_info'); var vendor = gl.getparameter(debuginfo.unmasked_vendor_webgl); the webgl tutorial has more information, examples, and resources on how to get started with webgl. table of contents standard webgl 1 constants standard webgl 2 constants webgl extension constants standard webgl 1 constants these constants are defined on the webglrenderingcontext interface. clearing buffers constants passed to webglrenderingcontext.clear() to clear buffer masks. constant name value description depth_buffer_bit 0x00000100 ...

Adding 2D content to a WebGL context - Web APIs
ntextured plane, so let's start there, by building code to draw a square plane. the complete source code for this project is available on github. this project uses the glmatrix library to perform its matrix operations, so you will need to include that in your project. we're loading a copy from a cdn in our html's <head>. drawing the scene the most important thing to understand before we get started is that even though we're only rendering a square plane object in this example, we're still drawing in 3d space. it's just we're drawing a square and we're putting it directly in front of the camera perpendicular to the view direction. we need to define the shaders that will create the color for our simple scene as well as draw our object. these will establish how the square plane appears on the ...

Animating textures in WebGL - Web APIs
you can use similar code to use any sort of data (such as a <canvas>) as the source for your textures. this example uses the glmatrix library to perform its matrix and vertex math. you'll need to include it if you create your own project based on this code. our sample loads a copy from a cdn in our html's <head>. ...

Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
rt of trickle ice. the candidate is destined to be delivered to the local ice layer by passing it into addicecandidate(). on receiving a description if we received a description, we prepare to respond to the incoming offer or answer. first, we check to make sure we're in a state in which we can accept an offer. if the connection's signaling state isn't stable or if our end of the connection has started the process of making its own offer, then we need to look out for offer collision. if we're the impolite peer, and we're receiving a colliding offer, we return without setting the description, and instead set ignoreoffer to true to ensure we also ignore all candidates the other side may be sending us on the signaling channel belonging to this offer. doing so avoids error noise since we never inf...

Lifetime of a WebRTC session - Web APIs
e of the content will move to other pages as the webrtc guide material is built out. pardon our dust! establishing the connection the internet is big. really big. it’s so big that years ago, smart people saw how big it was, how fast it was growing, and the limitations of the 32-bit ip addressing system, and realized that something had to be done before we ran out of addresses to use, so they started working on designing a new 64-bit addressing system. but they realized that it would take longer to complete the transition than 32-bit addresses would last, so other smart people came up with a way to let multiple computers share the same 32-bit ip address. network address translation (nat) is a standard which supports this address sharing by handling routing of data inbound and outbound to and ...

Writing WebSocket servers - Web APIs
sketch, in which a server reacts to a client sending text messages. the first message is sent in a single frame, while the second message is sent across three frames. fin and opcode details are shown only for the client: client: fin=1, opcode=0x1, msg="hello" server: (process complete message immediately) hi. client: fin=0, opcode=0x1, msg="and a" server: (listening, new message containing text started) client: fin=0, opcode=0x0, msg="happy new" server: (listening, payload concatenated to previous message) client: fin=1, opcode=0x0, msg="year!" server: (process complete message) happy new year to you too! notice the first frame contains an entire message (has fin=1 and opcode!=0x0), so the server can process or respond as it sees fit. the second frame sent by the client has a text payload (opc...

Writing a WebSocket server in Java - Web APIs
java.net.socket getoutputstream() returns an output stream for this socket. outputstream methods: write(byte[] b, int off, int len) writes len bytes from the spe...

Web Video Text Tracks Format (WebVTT) - Web APIs
- [ bats screeching ] - they won't get in your hair. they're after the bugs. inner structure of a webvtt file let's re-examine one of our previous examples, and look at the cue structure in a bit more detail. webvtt 00:01.000 --> 00:04.000 - never drink liquid nitrogen. 00:05.000 --> 00:09.000 - it will perforate your stomach. - you could die. in the case of each cue: the first line is started with a time, which is the starting time for showing the text that appears underneath. on the same line, we then have a string of "-->". we finish the first line with a second time, which is the ending time for showing the associated text. we can then have one or more lines that start with a hyphen (-), each containing part of the text track to be shown. we can also place comments in our .vtt...

Using bounded reference spaces - Web APIs
method requestsession() isn't enough to get a bounded space. you need to ask for one when you call requestreferencespace() as well. ...

Web Animations API Concepts - Web APIs
animation. core concepts web animations consist of timeline objects, animation objects, and animation effect objects working together. by assembling these disparate objects, we can create animations of our own. timeline timeline objects provide the useful property currenttime, which lets us see how long the page has been opened for: it's the "current time" of the document's timeline, which started when the page was opened. as of this writing, there’s only one kind of timeline object: the one based on the active document’s timeline. in the future we may see timeline objects that correspond to the length of the page, perhaps a scrolltimeline, or other things entirely. animation animation objects can be imagined as dvd players: they’re used for controlling media playback, but without ...

Controlling multiple parameters with ConstantSourceNode - Web APIs
context.createoscillator(). set the oscillator's type to "sine" to use a sine wave as the audio waveform. set the oscillator's frequency to the desired value; in this case, oscnode1 is set to a middle c, while oscnode2 and oscnode3 round out the chord by playing the e and g notes. connect the new oscillator to the corresponding gain node. once all three oscillators have been created, they're started by calling each one's constantsourcenode.start() method in turn, and playing is set to true to track that the tones are playing. stopping the oscillators stopping the oscillators when the user toggles the play state to pause the tones is as simple as stopping each node. function stoposcillators() { oscnode1.stop(); oscnode2.stop(); oscnode3.stop(); playing = false; } each node is stop...

Migrating from webkitAudioContext - Web APIs
if you need to compare this attribute to unscheduled_state, you can basically remember whether you've called start() on the node or not. if you need to compare this attribute to scheduled_state, you can basically remember whether you've called start() on the node or not. you can compare the value of audiocontext.currenttime to the first argument passed to start() to know whether playback has started or not. if you need to compare this attribute to playing_state, you can compare the value of audiocontext.currenttime to the first argument passed to start() to know whether playback has started or not. if you need to know when playback of the node is finished (which is the most significant use case of playbackstate), there is a new ended event which you can use to know when playback is finishe...

Example and tutorial: Simple synth keyboard - Web APIs
he oscillator's type to custom. if any other waveform type is selected in the wave picker, we simply set the oscillator's type to the value of the picker; that value will be one of sine, square, triangle, and sawtooth. the oscillator's frequency is set to the value specified in the freq parameter by setting the value of the oscillator.frequency audioparam object. then, at last, the oscillator is started up so that it begins to produce sound by calling the oscillator's inherited audioscheduledsourcenode.start() method. playing a tone when the mousedown or mouseover event occurs on a key, we want to start playing the corresponding note. the notepressed() function is used as the event handler for these events. function notepressed(event) { if (event.buttons & 1) { let dataset = event.targe...

Using the Web Audio API - Web APIs
we'll briefly look at some concepts, then study a simple boombox example that allows us to load an audio track, play and pause it, and change its volume and stereo panning. the web audio api does not replace the <audio> media element, but rather complements it, just like <canvas> coexists alongside the <img> element. your use case will determine what tools you use to implement audio. if you simply want to control playback of an audio track, the <audio> media element provides a better, quicker solution than the web audio api. if you want to carry out more complex audio processing, as well as playback, the web audio api provides much more power and control. ...

Visualizations with Web Audio API - Web APIs
8; var bufferlength = analyser.frequencybincount; var dataarray = new uint8array(bufferlength); next, we clear the canvas of what had been drawn on it before to get ready for the new visualization display: canvasctx.clearrect(0, 0, width, height); we now define the draw() function: function draw() { in here, we use requestanimationframe() to keep looping the drawing function once it has been started: var drawvisual = requestanimationframe(draw); next, we grab the time domain data and copy it into our array analyser.getbytetimedomaindata(dataarray); next, fill the canvas with a solid colour to start canvasctx.fillstyle = 'rgb(200, 200, 200)'; canvasctx.fillrect(0, 0, width, height); set a line width and stroke colour for the wave we will draw, then begin drawing a path canvasctx.linewi...

Web Audio API - Web APIs
attenuation induced by a moving source (or moving listener). you can read about the theory of the web audio api in a lot more detail in our article basic concepts behind web audio api. web audio api target audience the web audio api can seem intimidating to those that aren't familiar with audio or music terms, and as it incorporates a great deal of functionality it can prove difficult to get started if you are a developer. it can be used to simply incorporate audio into your website or application, by providing atmosphere like futurelibrary.no, or auditory feedback on forms. however, it can also be used to create advanced interactive instruments. with that in mind, it is suitable for both developers and musicians alike. we have a simple introductory tutorial for those that are familiar wit...

Using Web Workers - Web APIs
ndex2.html) — each one has to spin up the worker using code like the following: var myworker = new sharedworker('worker.js'); one big difference is that with a shared worker you have to communicate via a port object — an explicit port is opened that the scripts can use to communicate with the worker (this is done implicitly in the case of dedicated workers). the port connection needs to be started either implicitly by use of the onmessage event handler or explicitly with the start() method before any messages can be posted. calling start() is only needed if the message event is wired up via the addeventlistener() method. note: when using the start() method to open the port connection, it needs to be called from both the parent thread and the worker thread if two-way communication is need...

Window: afterprint event - Web APIs
the afterprint event is fired after the associated document has started printing or the print preview has been closed. bubbles no cancelable no interface event event handler property onafterprint examples using addeventlistener(): window.addeventlistener('afterprint', (event) => { console.log('after print'); }); using the onafterprint event handler property: window.onafterprint = (event) => { console.log('after print'); }; specifications specification status html living standard living standard ...

window.dump() - Web APIs
if the -console option was not specified then the output goes to stderr. ...

Window: transitionrun event - Web APIs
element that had the transition applied. you can listen for this event on the window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: transitionrun. examples this code adds a listener to the transitionrun event: window.addeventlistener('transitionrun', () => { console.log('transition is running but hasn't necessarily started transitioning yet'); }); the same, but using the ontransitionrun property instead of addeventlistener(): window.ontransitionrun = () => { console.log('transition started running'); }; see a live example of this event. specifications specification status comment css transitionsthe definition of 'transitionrun' in that specification. working draft initial de...

WindowOrWorkerGlobalScope.setInterval() - Web APIs
used. mydaemon.rate the time lapse (in number of milliseconds) between each invocation (read/write). mydaemon.length the total number of invocations. it can be a positive integer or infinity (read/write). minidaemon instances methods mydaemon.isatend() returns a boolean expressing whether the daemon is at the start/end position or not. mydaemon.synchronize() synchronize the timer of a started daemon with the time of its invocation. mydaemon.pause() pauses the daemon. mydaemon.start([reverse]) starts the daemon forward (index of each invocation increasing) or backwards (index decreasing). minidaemon global object methods minidaemon.forcecall(minidaemon) forces a single callback to the minidaemon.task function regardless of the fact that the end has been reached or not. in any...

WindowOrWorkerGlobalScope.setTimeout() - Web APIs
4 ms when successive calls are triggered due to callback nesting (where the nesting level is at least a certain depth), or after certain number of successive intervals. take this example: function cb() { f(); settimeout(cb, 0); } settimeout(cb, 0); setinterval(f, 0); in chrome and firefox, the 5th successive callback call is clamped; safari clamps on the 6th call; in edge its the 3rd one. gecko started to treat setinterval() like this in version 56 (it already did this with settimeout(); see below). historically some browsers implemented this throttling behaviour a bit differently (e.g. firefox) — on setinterval() calls made from anywhere, or when a nested settimeout() is called where the nesting level is at least a certain depth. to implement a 0 ms timeout in a modern browser, you can use...

WorkerGlobalScope.dump() - Web APIs
rglobalscope interface allows you to write a message to stdout — i.e. in your terminal, in firefox only. this is the same as firefox's window.dump, but for workers. syntax dump('my message\n'); parameters a domstring containing the message you want to send. returns void. example to write an output from your worker to your computer's terminal, you first have to run an instance of firefox started from your command line/terminal. for example, on mac os x you'd run it using something like this (assuming you are inside the applications folder): ./firefox.app/contents/macos/firefox-bin -profile /tmp -no-remote now go into about:config and enable the browser.dom.window.dump.enabled pref. next, run a worker containing the following line: dump('test\n'); this should result in a "test" messa...

XMLHttpRequest: loadstart event - Web APIs
the loadstart event is fired when a request has started to load data. bubbles no cancelable no interface progressevent event handler property onloadstart examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = ...

XMLHttpRequest - Web APIs
ed when the request encountered an error. also available via the onerror property. load fired when an xmlhttprequest transaction completes successfully. also available via the onload property. loadend fired when a request has completed, whether successfully (after load) or unsuccessfully (after abort or error). also available via the onloadend property. loadstart fired when a request has started to load data. also available via the onloadstart property. progress fired periodically when a request receives more data. also available via the onprogress property. timeout fired when progress is terminated due to preset time expiring. also available via the ontimeout property. specifications specification status comment xmlhttprequest living standard ...

XRReferenceSpace: reset event - Web APIs
f sync on position and orientation. note: a reset event will not occur if the reference space is able to regain tracking of its previous origin, since that means the origin has not been forced to be relocated. this event is only fired when the origin has to be relocated to recover from the tracking loss. manual resets if you've spent any time using a vr headset, you've had times when you've started it up and although you're facing straight ahead, the headset thinks you're looking at the sky or the floor; or times when you point the hand controller straight forward, but it thinks you're pointing it up and to the right somewhere. when that happens, you typically hold down a button somewhere and it causes the world to resynchronize to the device's current orientation. that works by sending a `...

XRRigidTransform.position - Web APIs
nslation component of the transform. syntax let pos = xrrigidtransform.position; value a read-only dompointreadonly indicating the 3d position component of the transform matrix. the units are meters. note: the w component of the point is always 1.0. ...

XRSession.cancelAnimationFrame() - Web APIs
xrsession.cancelanimationframe(handle); parameters handle the unique value returned by the call to requestanimationframe() that previously scheduled the animation callback. return value none. usage notes this function has no effect if the specified handle cannot be found. example in the example below we see code which starts up a webxr session if immersive vr mode is supported. once started, the session schedules its first frame to be rendered by calling requestanimationframe(). the pausexr() function shown at the bottom can be called to suspend the webvr session, in essence, by canceling any pending animation frame callback. since each frame callback schedules the next one, removing the callback terminates updating of the webxr scene. const xr = navigator.xr; let requesthandle =...

XRSession.onselectstart - Web APIs
ort of selection by pressing a trigger, touchpad, or button, speaking a command, or making a hand gesture. for example, this might include pressing a button or moving a joystick. note: not to be confused with xrsession.onselect and xrsession.onselectend. syntax xrsession.onselectstart = function(event) { ... } example xrsession.onselectstart = function(event) { console.log("the user has started a primary action, but might not have completed it.") } specifications specification status comment webxr device apithe definition of 'xrsession.onselectstart' in that specification. working draft initial definition. ...

XRSession.requestAnimationFrame() - Web APIs
animationframe(time) { window.requestanimationframe(onwindowanimationframe) // this may be called while an immersive session is running on some devices, // such as a desktop with a tethered headset. to prevent two loops from // rendering in parallel, skip drawing in this one until the session ends. if (!xrsession) { renderframe(time, null) } } // the window animation loop can be started immediately upon the page loading. window.requestanimationframe(onwindowanimationframe) function onxranimationframe(time, xrframe) { xrsession.requestanimationframe(onxranimationframe) renderframe(time, xrframe) } function renderframe(time, xrframe) { // shared rendering logic. } // assumed to be called by a user gesture event elsewhere in code. function startxrsession() { navigator.xr...

XRSession.updateRenderState() - Web APIs
pdaterenderstate() was called. the inlineverticalfieldofview property was set, but the session is immersive and therefore does not allow this property to be used. examples this example creates a webgl context that is compatible with an immersive xr device and then uses it to create an xrwebgllayer. updaterenderstate() is then called to associate the new xrwebgllayer. ...

:-moz-ui-invalid - CSS: Cascading Style Sheets
has focus, and the value was valid (including empty) when it gained focus, do not apply the pseudo-class. if the control has focus, and the value was invalid when it gained focus, re-validate on every keystroke. if the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the form. the result is that if the control was valid when the user started interacting with it, the validity styling is changed only when the user shifts focus to another control. however, if the user is trying to correct a previously-flagged value, the control shows immediately when the value becomes valid. required items have the pseudo-class applied only if the user changes them or attempts to submit an unchanged valid value. by default, gecko applies a style that c...

:-moz-ui-valid - CSS: Cascading Style Sheets
ntrol has focus, and the value was valid (including empty) when it gained focus, apply this pseudo-class. if the control has focus, and the value was invalid when it gained focus, re-validate on every keystroke. if the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the form. the result is that if the control was valid when the user started interacting with it, the validity styling is changed only when the user shifts focus to another control. however, if the user is trying to correct a previously-flagged value, the control shows immediately when the value becomes valid. required items are flagged as invalid only if the user changes them or attempts to submit an unchanged invalid value. syntax syntax not found in db! specificatio...

Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
the items out we have some positive free space in the flex container, shown in this image as the hatched area: we are working with a flex-basis equal to the content size so the available space to distribute is subtracted from the total available space (the width of the flex container), and the leftover space is then shared out equally among each item. ...

Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
o examples as chrome and safari treat collapse as hidden. when dealing with multiple-line flex containers however you need to understand that the wrapping is re-done after collapsing. so the browser needs to re-do the wrapping behaviour to account for the new space that the collapsed item has left in the inline direction. this means that items might end up on a different line to the one they started on. in the case of an item being shown and hidden it could well cause the items to end up in a different row. i have created this behaviour in the next live example. you can see how the stretching changes row based on the location of the collapsed item. if you add more content to the second item, it changes row once it gets long enough. that top row then only becomes as tall as a single line of ...

Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
modules relate to each other, and are at different stages of development. the box alignment module for many people the first reason they start to look at flexbox is because of the ability to properly align flex items inside a flex container. flexbox provides access to properties that allow the alignment of items on their cross axis and justification of items on the main axis. these properties started life in the flexbox specification, but are now also part of the box alignment specification. this specification details how alignment works in all layout — not just flexbox. box alignment deals with alignment and justification, and also distribution of space along an axis. the reason that the box alignment properties remain detailed in the flexbox specification as well as being in box alignmen...

Typical use cases of Flexbox - CSS: Cascading Style Sheets
but it uses the space left after the two items are accounted for. patterns like this can make it much easier to create a library of form elements for your design, which easily accommodate additional elements being added. you are taking advantage of the flexibility of flexbox by mixing items that do not grow with those that do. conclusion while exploring the above patterns you have hopefully started to see how you can think through the best way to use flexbox to achieve the result that you want. quite often you have more than one choice. mix items that cannot stretch with those that can, use the content to inform the size, or allow flexbox to share out space in proportion. it’s up to you. think about the best way to present the content that you have and then see how flexbox or other layo...

Variable fonts guide - CSS: Cascading Style Sheets
le fonts are an evolution of the opentype font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. they let you access all the variations contained in a given font file via css and a single @font-face reference. this article will give you all you need to know to get you started using variable fonts. warning: in order to use variable fonts on your operating system, you need to make sure that it is up to date. for example linux oses need the latest linux freetype version, and macos prior to 10.13 does not support variable fonts. if your operating system is not up to date, you will not be able to use variable fonts in web pages or the firefox developer tools. variable ...

CSS Fonts - CSS: Cascading Style Sheets
e provides you with all you need to know about using opentype font features in css. variable fonts guide variable fonts are an evolution of the opentype font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. this article will give you all you need to know to get you started using variable fonts. specifications specification status comment css fonts module level 4 working draft adds font-variation-settings (and related higher-level properties) and font-optical-sizing. css fonts module level 3 candidate recommendation adds font-feature-settings (and related higher-level properties) css level 2 (revision 1) ...

Line-based placement with CSS Grid - CSS: Cascading Style Sheets
in this article we will fully explore how this fundamental feature of the specification works. starting your exploration of grid with numbered lines is the most logical place to begin, as when you use grid layout you always have numbered lines. the lines are numbered for columns and rows, and are indexed from 1. note that grid is indexed according to the writing mode of the document. in a left to right language such as english line 1 is on the left-hand side of the grid. if you are working in a right-to-left language then line 1 will be the far right of the grid. ...

CSS Shapes - CSS: Cascading Style Sheets
svg: shapes and arbitrarily-shaped ui components specifications specification status comment css shapes module level 1 candidate recommendation initial definition ...

CSS Tutorials - CSS: Cascading Style Sheets
resent complex features to be used by more experienced users. this page lists them all, with a short description. they are grouped by complexity so that you can choose the most appropriate for your level. editor's note: we should look at using "difficulty level" tags on the tutorial/guide pages so that difficulty-based lists can be automatically built. beginner-level css tutorials getting started this guide is aimed at complete beginners: you haven't written one single line of css? — this is for you. it explains the fundamental concepts of the language and guides you in writing basic stylesheets. using multiple backgrounds backgrounds are fundamental for nice styling: css allows you to set several of them on each box. this tutorial explains how they interact and how to achieve nice e...

<easing-function> - CSS: Cascading Style Sheets
ere it stays until the end. this keyword represents the easing function steps(1, jump-start) or steps(1, start). step-end the animation stays in its initial state until the end, at which point it jumps directly to its final state. this keyword represents the easing function steps(1, jump-end) or steps(1, end). examples easing function comparison this example creates an animation that can be started and stopped again using the provided button, and a select menu that can be used to switch its easing function between the available keywords, plus a couple of cubic-bezier() and steps() options. the idea is to provide an easy comparison between different easing functions. html <div> <div></div> </div> <ul> <li> <button class="animation-button">start animation</button> </li> <li> ...

text-transform - CSS: Cascading Style Sheets
etters, but other browsers did not. both webkit and gecko incorrectly considered letter-based symbols like ⓐ to be real letters. internet explorer 9 was the closest to the css 2 definition, but with some weird cases.) by precisely defining the correct behavior, css text level 3 cleans this mess up. the capitalize line in the browser compatibility table contains the version the different engines started to support this now precisely-defined behavior. uppercase is a keyword that converts all characters to uppercase. lowercase is a keyword that converts all characters to lowercase. none is a keyword that prevents the case of all characters from being changed. full-width is a keyword that forces the writing of a character — mainly ideograms and latin scripts — inside a square, allowin...

Cross-browser audio basics - Developer guides
own how you can create a very simple audio player, but what if we want to show progress, buffering and only activate the buttons when the media is ready to play? fortunately, there are a number of events we can use to let our player know exactly what is happening. first, let's take a look at the media loading process in order: loadstart the loadstart event tells us simply that load process has started and the browser is connecting to the media. myaudio.addeventlistener("loadstart", function() { //grabbing the file }); durationchange if you just want to know as soon as the duration of your media is established, this is the event for you. this can be useful because the initial value for duration is nan (not a number), which you probably don't want to display to your users. myaudio.addevent...

Live streaming web audio and video - Developer guides
n employed to relay live events such as sports, concerts and more generally tv and radio programmes that are output live. often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. this is a fairly complex and nascent subject with a lot of variables, so in this article, we'll introduce you to the subject and let you know how you can get started. the key consideration when streaming media to a browser is the fact that rather than playing a finite file we 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 o...

Video player styling basics - Developer guides
le looks at how to style this custom player, including making it responsive. the example in action you can find the code for the updated, styled example on github, and view it live. preliminary modifications from the original example this section summarises the modifications that were made to the original video player example to make the styling task easier, before the bulk of the work was started. html markup there are a few changes that were made to the html markup shown in the previous article. the custom video controls and <progress> element are now contained within <div> elements, rather than residing inside unordered list items. the markup for the custom controls now looks as follows: <div id="video-controls" class="controls" data-state="hidden"> <button id="playpause" type="b...

Audio and Video Delivery - Developer guides
en employed to relay live events such as sports, concerts and more generally tv and radio programmes that are output live. often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. this is a fairly complex and nascent subject with a lot of variables, so in this article we'll introduce you to the subject and let you know how you can get started. setting up adaptive streaming media sources let's say you want to set up an adaptive streaming media source on a server, to be consumed inside an html5 media element. how would you do that? this article explains how, looking at two of the most common formats: mpeg-dash and hls (http live streaming.) dash adaptive streaming for html 5 video details how to set up adaptive streaming using dash ...

Challenge solutions - Developer guides
these are not the only possible solutions. the sections below correspond to the titles of the tutorial sections. why use css colors challenge without looking up a reference, find five more color names that work in your stylesheet. solution css supports common color names like orange, yellow, blue, green, or black. it also supports some more exotic color names like chartreuse, fuschia, or burlywood. see css color value for a complete list as well as other ways of specifying colors. how css works dom inspector challenge in domi, click on a strong node. ...

Media events - Developer guides
various events are sent when handling media that are embedded in html documents using the <audio> and <video> elements; this section lists them and provides some helpful information about using them. event name description abort sent when playback is aborted; for example, if the media is 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 playb...

Graphics on the Web - Developer guides
ese articles provide insight into how you can accomplish this. 2d graphics canvas the <canvas> element provides apis to draw 2d graphics using javascript. svg scalable vector graphics (svg) lets you use lines, curves, and other geometric shapes to render graphics. with vectors, you can create images that scale cleanly to any size. view all... 3d graphics webgl a guide to getting started with webgl, the 3d graphics api for the web. this technology lets you use standard opengl es in web content. video using html5 audio and video embedding video and/or audio in a web page and controlling its playback. webrtc the rtc in webrtc stands for real-time communications, a technology that enables audio/video streaming and data sharing between browser clients (peers). ...

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
your content being outright unusable by people withcertain vision problems, particularly color blindness. finding the right colors coming up with just the right colors can be tricky, especially without training in art or design. fortunately, there are tools available that can help you. while they can't replace having a good designer helping you make these decisions, they can definitely get you started. base color the first step is to choose your base color. this is the color that in some way defines your website or the subject matter of the site. just as we associate green with the beverage mountain dew and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. there are plenty of ways t...

<input type="checkbox"> - HTML: Hypertext Markup Language
checkbox, a javascript function checks the total number of checked ingredients: if none are checked, the recipe name's checkbox is set to unchecked. if one or two are checked, the recipe name's checkbox is set to indeterminate. if all three are checked, the recipe name's checkbox is set to checked. so in this case the indeterminate state is used to state that collecting the ingredients has started, but the recipe is not yet complete. var overall = document.queryselector('input[id="enchtbl"]'); var ingredients = document.queryselectorall('ul input'); overall.addeventlistener('click', function(e) { e.preventdefault(); }); for(var i = 0; i < ingredients.length; i++) { ingredients[i].addeventlistener('click', updatedisplay); } function updatedisplay() { var checke...

<input type="hidden"> - HTML: Hypertext Markup Language
when it's submitted to the server. let's look at some examples that illustrate its use. tracking edited content one of the most common uses for hidden inputs is to keep track of what database record needs to be updated when an edit form is submitted. a typical workflow looks like this: user decides to edit some content they have control over, such as a blog post, or a product entry. they get started by pressing the edit button. the content to be edited is taken from the database and loaded into an html form to allow the user to make changes. after editing, the user submits the form, and the updated data is sent back to the server to be updated in the database. the idea here is that during step 2, the id of the record being updated is kept in a hidden input. when the form is submitted in ...

<isindex> - HTML: Hypertext Markup Language
." action="/search"> </head> in past browsers, this would generate, at parse time, a dom tree equivalent to the following html: <form action="/search"> <hr> <label> search document... <input name="isindex"> </label> <hr> </form> history on june 1992, dan connolly would prefer a different anchor type instead of isindex. on november 1992, indexes as links rather than documents started by dan connolly who is pushing the idea that indexes are more links than documents. in this thread, different type of solutions are proposed. the question of forms for making queries is mentioned in reference to dynatext browser: "the browser displays toggle buttons, text fields etc. the user fills in the fields, clicks ok, and the query results come up in the table of contents window." a thread...

<video>: The Video Embed element - HTML: Hypertext Markup Language
ending the origin: http header), preventing its non-tainted used in <canvas> elements. if invalid, it is handled as if the enumerated keyword anonymous was used. see cors settings attributes for additional information. currenttime reading currenttime returns a double-precision floating-point value indicating the current playback position of the media specified in seconds. if the media has not started playing yet, the time offset at which it will begin is returned. setting currenttime sets the current playback position to the given time and seeks the media to that position if the media is currently loaded. if the media is being streamed, it's possible that the user agent may not be able to obtain some parts of the resource if that data has expired from the media buffer. other media may have ...

Strict-Transport-Security - HTTP
immediately expire the strict-transport-security header, allowing access via http. preloading strict transport security google maintains an hsts preload service. by following the guidelines and successfully submitting your domain, browsers will never connect to your domain using an insecure connection. while the service is hosted by google, all browsers have stated an intent to use (or actually started using) the preload list. however, it is not part of the hsts specification and should not be treated as official. information regarding the hsts preload list in chrome : https://www.chromium.org/hsts consultation of the firefox hsts preload list : nsstspreloadlist.inc examples all present and future subdomains will be https for a max-age of 1 year. this blocks access to pages or sub domain...

202 Accepted - HTTP
the request might or might not eventually be acted upon, as it might be disallowed when processing actually takes place. 202 is non-committal, meaning that there is no way for the http to later send an asynchronous response indicating the outcome of processing the request. ...

Indexed collections - JavaScript
// until index 3, returning [ "b", "c", "d"] splice(index, count_to_remove, addelement1, addelement2, ...) removes elements from an array and (optionally) replaces them. it returns the items which were removed from the array. let myarray = new array('1', '2', '3', '4', '5') myarray.splice(1, 3, 'a', 'b', 'c', 'd') // myarray is now ["1", "a", "b", "c", "d", "5"] // this code started at index one (or where the "2" was), // removed 3 elements there, and then inserted all consecutive // elements in its place. reverse() transposes the elements of an array, in place: the first array element becomes the last and the last becomes the first. it returns a reference to the array. let myarray = new array('1', '2', '3') myarray.reverse() // transposes the array so that myarray = ["3"...

Assertions - JavaScript
x 'greon' but does not touch 'on'. matching the beginning of input using a ^ control character use ^ for matching at the beginning of input. in this example, we can get the fruits that start with 'a' by a /^a/ regex. for selecting appropriate fruits we can use the filter method with an arrow function. let fruits = ["apple", "watermelon", "orange", "avocado", "strawberry"]; // select fruits started with 'a' by /^a/ regex. // here '^' control symbol used only in one role: matching beginning of an input. let fruitsstartswitha = fruits.filter(fruit => /^a/.test(fruit)); console.log(fruitsstartswitha); // [ 'apple', 'avocado' ] in the second example ^ is used both for matching at the beginning of input and for creating negated or complemented character sets when used within groups. let fruit...

SyntaxError: identifier starts immediately after numeric literal - JavaScript
identifiers can only start with a letter, underscore (_), or dollar sign ($). message syntaxerror: unexpected identifier after numeric literal (edge) syntaxerror: identifier starts immediately after numeric literal (firefox) syntaxerror: unexpected number (chrome) error type syntaxerror what went wrong? the names of variables, called identifiers, conform to certain rules, which your code must adhere to! a javascript identifier must start with a letter, underscore (_), or dollar sign ($). ...

String.prototype.indexOf() - JavaScript
the search. defaults to 0. for fromindex values lower than 0, or greater than str.length, the search starts at index 0 and str.length, respectively. for example, 'hello world'.indexof('o', -5) will return 4, as it starts at position 0, and o is found at position 4. on the other hand, 'hello world'.indexof('o', 11) (and with any fromindex value greater than 11) will return -1, as the search is started at position 11, a position after the end of the string. return value the index of the first occurrence of searchvalue, or -1 if not found. an empty string searchvalue produces strange results. with no fromindex value, or any fromindex value lower than the string's length, the returned value is the same as the fromindex value: 'hello world'.indexof('') // returns 0 'hello world'.indexof('',...

this - JavaScript
ntering an execution context, it remains as undefined, as shown in the following example: function f2() { 'use strict'; // see strict mode return this; } f2() === undefined; // true in the second example, this should be undefined, because f2 was called directly and not as a method or property of an object (e.g. window.f2()). this feature wasn't implemented in some browsers when they first started to support strict mode. as a result, they incorrectly returned the window object. to set the value of this to a particular value when calling a function, use call(), or apply() as in the examples below. class context the behavior of this in classes and functions is similar, since classes are functions under the hood. but there are some differences and caveats. within a class constructor, this...

JavaScript
with the java programming language. both "java" and "javascript" are trademarks or registered trademarks of oracle in the u.s. and other countries. however, the two programming languages have a very different syntax, semantic, and use. 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 tutorials learn how to program in javascript with guides and tutorials. for complete beginners head over to our learning area javascript topic if you want to learn javascript but have no previous experience of javascript or programming. the complete modules available there are as follows: javascript first steps answers some fundamental questions such as "what is javascript?", "what doe...

Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
he page layout. this wasn't an attractive thing for your users to see, and could also result in performance issues due to the repainting required after each image loads, hence adding the attributes being a good idea. let’s move forward a few years to the era of responsive design. to keep images from breaking out of their containers when the container becomes narrower than the image, developers started using css like the following: img { max-width: 100%; height: auto; } this is really useful for responsive layouts, but unfortunately it causes the jank problem to return — the above css overrides the width and height attribute information, meaning that if the image has not loaded for some reason, its height will be set to 0. when the image finally loads, the same jank will occur as the pa...

Progressive web app structure - Progressive web apps (PWAs)
o 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, chained with another stream, cancelled, checked for errors, and more. in theory, streaming is a better model, but it's also more complex, and at the time of writing (march 2018) the streams api is still a work-in-progress and not yet fully available in any of the major browsers. when it is available, it will be the fastest way of serving the content — the benefits are going to be huge in term...

PWA developer guide - Progressive web apps (PWAs)
ct of development specific to the greation of progressive web applications (pwas). for all other documentation about web development, which generally pertains to pwas as well, see our primary web development documentation. --->>> titles below are just for the list; give articles good seo names and feel free to tweak those and this as needed... <<<--- web app basics introduction and getting started with pwa development some description installing and uninstalling web apps an introductory guide to how a web app can be installed on the user's device... using service workers to run offline description alerting the user using notifications description creating a web app from an existing site description advanced topics pushing data from the server to your web application some des...

How to make PWAs installable - Progressive web apps (PWAs)
tem, the web app's icon may be badged with a small icon that indicates that it's a web app. in the screen shot above, for example, the app has a tiny firefox icon, indicating that it's a web app that uses the firefox runtime. splash screen in some browsers, a splash screen is also generated from the information in the manifest, which is shown when the pwa is launched and while it's being loaded started up. the icon and the theme and background colors are used to create this screen. summary in this article, we learned about how we can make pwas installable with a properly-configured web manifest, and how the user can then install the pwa with the "add to home screen" feature of their browser. for more information on a2hs, be sure to read our add to home screen guide. browser support is cur...

Introduction to progressive web apps - Progressive web apps (PWAs)
015, which resulted in 70% increase in conversions. the aliexpress pwa has also seen much better results than either the web or the native app, with a 104% increase in conversion rates for new users. given their profit increase, and the relatively low amount of work required for the conversion of these apps to pwas, the advantage is clear. early stage emerging startups like couponmoto have also started using progressive web apps to drive more consumer engagement, showing that they can help small as well as big companies to (re-)engage users more effectively. you can check the list at pwa.rocks for more examples. particularly worth mentioning is the hnpwa.com page—this lists an example implementation of the hacker news website (instead of the usual todomvc app), in which you can see the use ...

Media - Progressive web apps (PWAs)
many pages in this tutorial focused on the css properties and values, as well as how you use these to specify the way that content displays. information: media the purpose of css is to specify how content is presented to the user. this presentation can take more than one form. for example, you are probably reading this on a device with a display. but you might also want to project it to a big screen for a large audience, or you might want to print it. these different media have different characteristics. css has the capacity to present content according to the media type. ...

Structural overview of progressive web apps - Progressive web apps (PWAs)
o 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, chained with another stream, canceled, checked for errors, and more. in theory, streaming is a better model than the app shell model, but it's also more complex, and the streams api isn't yet fully supported by any of the major browsers. once it's available, however, it will be the fastest way to serve your app's content. the performance benefits will be truly spectacular. for working examples...

Web technology reference
rmation about document text and may include other tags as sub-elements. obviously, browsers do not display them, since they are used to interpret the content of the page. introduction to html | learn html | html5 | developer guide | element reference | reference css — styling the web cascading style sheets are used to describe the appearance of web content. introduction to css | getting started with css | learn css | common css questions | reference javascript — dynamic client-side scripting the javascript programming language is used to add interactivity and other dynamic features to web sites. learn javascript | developer guide | reference ...

SVG Tutorial - SVG: Scalable Vector Graphics
ust want to draw beautiful images, you might find more useful resources at inkscape's documentation page. another good introduction to svg is provided by the w3c's svg primer. the tutorial is in an early stage of development. if you're able, please help out by chipping in and writing a paragraph or two. extra points for writing a whole page! introducing svg from scratch introduction getting started positions basic shapes paths fills and strokes gradients patterns texts basic transformations clipping and masking other content in svg filter effects svg fonts svg image tag tools for svg svg and css the following topics are more advanced and hence should get their own tutorials. scripting svg with javascript tbd svg filters tutorial tbd animations with smil in svg tbd cr...

SVG: Scalable Vector Graphics
scalable vector graphics (svg) are an xml-based markup language for describing two-dimensional based vector graphics. as such, it's a text-based, open web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including css, dom, javascript, and smil. svg is, essentially, to graphics what html is to text. svg images and their related behaviors are defined in xml text files, which means they can be searched, indexed, scripted, and compressed. additionally, this means they can be created and edited with any text editor or with drawing software. ...

Features restricted to secure contexts - Web security
at vary by browser some browsers may decide to disable certain apis in non-secure contexts or apply other restrictions/security measures, despite the spec not requiring them. this section lists any such differences existing in browsers. api chrome edge safari firefox application cache restricted to secure contexts planned in chrome 70 deprecation planning started in february 2018 public interest on deprecation webkit bug 182442 restricted to secure contexts in firefox 62 geolocation restricted to secure contexts in 50 restricted to secure contexts in 10 restricted to secure contexts in 55 device orientaion / device motion deprecation warning deprecation warnings since 60. note that these apply to secure c...

How to turn off form autocompletion - Web security
this article explains how a website can disable autocomplete for form fields. by default, browsers remember information that the user submits through <input> fields on websites. this enables the browser to offer autocompletion (that is, suggest possible completions for fields that the user has started typing in) or autofill (that is, pre-populate certain fields upon load). these features are usually enabled by default, but they can be a privacy concern for users, so browsers can let users disable them. however, some data submitted in forms either are not useful in the future (for example, a one-time pin) or contain sensitive information (for example, a unique government identifier or credit card security code). as website author, you might prefer that the browser not remember the values...

XML introduction - XML: Extensible Markup Language
more powerful way to display xml: the extensible stylesheet language transformations (xslt) which can be used to transform xml into other languages such as html. this makes xml incredibly versatile. <?xml-stylesheet type="text/xsl" href="transform.xsl"?> recommendations this article is obviously only a very brief introduction to what xml is, with a few small examples and references to get you started. for more details about xml, you should look around on the web for more in-depth articles. learning the hypertext markup language (html) will help you better understand xml. ...

Compiling a New C/C++ Module to WebAssembly - WebAssembly
when you’ve written a new code module in a language like c/c++, you can compile it into webassembly using a tool like emscripten. let’s look at how it works. emscripten environment setup first, let's set up the required development environment. prerequisites get the emscripten sdk, using these instructions: https://emscripten.org/docs/getting_started/downloads.html compiling an example with the environment set up, let's look at how to use it to compile a c example to emscripten. there are a number of options available when compiling with emscripten, but the main two scenarios we'll cover are: compiling to wasm and creating html to run our code in, plus all the javascript "glue" code needed to run the wasm in the web environment. compiling to wasm and just creating the javascript. ...

WebAssembly Concepts - WebAssembly
s format by hand and then convert it into the binary format with any of several webassemby text-to-binary tools. for a simple guide on how to do this, see our converting webassembly text format to wasm article. writing rust targeting webassembly it is also possible to write rust code and compile over to webassembly, thanks to the tireless work of the rust webassembly working group. you can get started with installing the necessary toolchain, compiling a sample rust program to a webassembly npm package, and using that in a sample web app, over at our compiling from rust to webassembly article. using assemblyscript for web developers who want to try webassembly without needing to learn the details of c or rust, assemblyscript will be the best option. it generates a small bundle and it's perfor...

WebAssembly
ake advantage of webassembly's performance and power and javascript's expressiveness and flexibility in the same apps, even if you don't know how to write webassembly code. and what's even better is that it is being developed as a web standard via the w3c webassembly working group and community group with active participation from all major browser vendors. guides webassembly concepts get started by reading the high-level concepts behind webassembly — what it is, why it is so useful, how it fits into the web platform (and beyond), and how to use it. compiling a new c/c++ module to webassembly when you’ve written code in c/c++, you can then compile it into .wasm using a tool like emscripten. let’s look at how it works. compiling an existing c module to webassembly a core use-case...