PaymentDetailsUpdate.shippingAddressErrors - Web APIs
the paymentdetailsupdate dictionary's shippingaddresserrors property, if present, contains an addresserrors object whose contents provide error messages for one or more of the values in the paymentaddress specified as paymentrequest.shippingaddress. syntax var addresserrors = paymentdetailsupdate.shippingaddresserrors; value an addresserrors object, which contains domstrings describing errors in the properties of a paymentaddress. for each property in paymentaddress, a property by the same name is found in shippingaddresserrors if and only if a validation error occurred for that property. in that case, the property in shippingaddresserrors is a string describing the validation error, ideally including suggestions about fixing the error. specifications specification ...
...ty by the same name is found in shippingaddresserrors if and only if a validation error occurred for that property. in that case, the property in shippingaddresserrors is a string describing the validation error, ideally including suggestions about fixing the error. specifications specification status comment payment request apithe definition of 'paymentdetailsupdate.shippingaddresserrors' in that specification. candidate recommendation initial definition. ...

Warning: -file- is being assigned a //# sourceMappingURL, but already has one - JavaScript
error type a warning. javascript execution won't be halted. what went wrong? a source map has been specified more than once for a given javascript source. javascript sources are often combined and minified to make delivering them from the server more efficient. with source maps, the debugger can map the code being executed to the original source files. ...
...ces are often combined and minified to make delivering them from the server more efficient. ...

Grouping operator ( ) - JavaScript
the grouping operator ( ) controls the precedence of evaluation in expressions. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax ( ) description the grouping operator consists of a pair of parentheses around an expression or sub-expression to override the normal operator precedence so that expressions with lower precedence can be evaluated before an expression with higher priority. as it sounds, it groups what's inside of the parentheses. examples using the grouping operator overriding multiplication and division first, then addition and subtraction to evaluate addition first. var a = 1; var b = 2; var...
...and subtraction to evaluate addition first. var a = 1; var b = 2; var c = 3; // default precedence a + b * c // 7 // evaluated by default like this a + (b * c) // 7 // now overriding precedence // addition before multiplication (a + b) * c // 9 // which is equivalent to a * c + b * c // 9 specifications specification ecmascript (ecma-262)the definition of 'the grouping operator' in that specification. ...

Clipping and masking - SVG: Scalable Vector Graphics
in this case, any half-transparent effects are not possible, it's an all-or-nothing approach. masking on the other hand allows soft edges by taking transparency and grey values of the mask into account. ...
...sually placed in a defs section. the rect will not be painted, however. instead its pixel data will be used to determine, which pixels of the circle "make it" to the final rendering. since the rectangle covers only the upper half of the circle, the lower half of the circle will vanish: screenshotlive sample we now have a semicircle without having to deal with arcs in path elements. for the clipping, every path inside the clippath is inspected and evaluated together with its stroke properties and transformation. then every part of the target lying in a transparent area of the resulting clippath's content will not be rendered. color, opacity and such have no effect as long as they don't let parts vanish completely. masking the effect of masking is most impressively presented with a gradient...

Developing for Firefox Mobile - Archive of obsolete content
to follow this tutorial you'll need to have learned the basics of jpm. firefox for android implements its ui using native android widgets instead of xul. with the add-on sdk you can develop add-ons that run on this new version of firefox mobile as well as on the desktop version of firefox. you can use the same code to target both desktop firefox and firefox mobile, and use jpm-mobile instead of the normal jpm. right now not all modules are fully functional, but we're working on adding support for more modules. the tables at the end of this guide list the modules that are currently supported on firefox mobile. ...

Developing New Mozilla Features - Archive of obsolete content
re you use it well before going too far with your project. and of course, we have a set of coding practices to help everyone live together. life will be much easier if your team has one or more members who are already familiar with and to the mozilla world. develop relationships with existing developers in the area of your feature if you want to add a big new feature to mail, spend some time helping the existing mail developers. talk to the developers about fixing some of their bugs. fix some bugs. have some of your qa team get involved. once you’re familiar with an area, do the completely unexpected and write a piece of documentation. developers will be grateful, and you’ll be known as someone seriously interested in contributing. become familiar with our code review processes. have som...

XPCOM Interface Reference by grouping
using this guide this page lists the current (as of dec. 01, 2010) list of mozilla interfaces as listed on the xpcom interface reference page where that page lists items by alphabetical sorting, this page attempts to group them by function. grouping and category names were made by somewhat arbitrary decision by the author. (i'm fully aware that this will be a great point of discussion and probably will end in tears, but since i'm the first person to apparently take a swing at this, i get first dibs.) the primary sections consist of: browser this section contains elements associated with the view pane or the content of the "browser window" proper. it is wrapped by system, but displayed for convenience. data this section contains data wrappers and core object definitions. ...

Gamepad.mapping - Web APIs
the gamepad.mapping property of the gamepad interface returns a string indicating whether the browser has remapped the controls on the device to a known layout. currently there is only one supported known layout–the standard gamepad. if the browser is able to map controls on the device to that layout the mapping property will be set to the string standard. syntax readonly attribute domstring mapping; example var gp = navigator.getgamepads()[0]; console.log(gp.mapping); value a string. specifications specification status comment gamepadthe definition of 'gamepad.mapping' in that specification. working draft initial definition ...

Index - Web APIs
found 5328 pages: # page tags and summary 1 web apis api, dom, landing, reference, web when writing code for the web, there are a large number of web apis available. below is a list of all the apis and interfaces (object types) that you may be able to use while developing your web app or site. 2 angle_instanced_arrays api, reference, webgl, webgl extension the angle_instanced_arrays extension is part of the webgl api and allows to draw the same object, or groups of similar objects multiple times, if they share the same vertex data, primitive count and type. 3 angle_instanced_arrays.drawarraysinstancedangle() angle_instanced_arrays, api, method, reference, webgl, webgl extension the angle_instanced_arrays.dra...
...ng the acceleration of the device along the its z axis. 29 addresserrors api, address, addresserrors, dictionary, errors, interface, payment address, payment request, payment request api, reference, payment, paymentaddress the addresserrors dictionary is used by the payment request api to to report validation errors in a physical address (typically a billing address or a shipping address). 30 addresserrors.addressline api, addresserrors, error, payment request, payment request api, property, reference, validation, addressline, payment an object based on addresserrors includes an addressline property when validation of the address finds one or more errors in the array of strings in the address's addressline. the returned string explains the error and s...
... api, audio, audioparamdescriptor, audioworkletprocessor, dictionary, reference, web audio api, parameterdescriptors the audioparamdescriptor dictionary of the web audio api specifies properties for an audioparam objects. 179 audioparammap draft, experimental the web audio api interface audioparammap represents a set of multiple audio parameters, each described as a mapping of a domstring identifying the parameter to the audioparam object representing its value. 180 audioprocessingevent api, deprecated, interface, internationalization, reference, référence(2), web audio api the web audio api audioprocessingevent represents events that occur when a scriptprocessornode input buffer is ready to be processed. 181 audioscheduledsourcenod...
...And 46 more matches

Index - Archive of obsolete content
sdk, add-ons, beginner, extensions, tutorial no summary! 149 overview add-on sdk no summary! 150 storing 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...
...refox 4, gecko 2.0, guide, localization no summary! 171 code snippets add-ons, code snippets, extensions no summary! 172 alerts and notifications code snippets non-modal notification and further interaction with users 173 autocomplete code snippets, form fill, satchel no summary! 174 bookmarks code snippets, developing mozilla, extensions, places no summary! 175 boxes code snippets make the box style="display: block" and the wrapping behavior will occur when the box is resized: 176 canvas code snippets canvas, code snippets, graphics no summary! 177 cookies add-ons, code snippets, cookies, extensions no summary! 178 customizing the ...
...these are the sort of things that super-review should be catching for code that goes into the tree; avoiding these to start with saves super-reviewers a lot of effort. 224 communication between html and your extension add-ons, extensions, web developm...
...And 38 more matches

nss tech note5
most of them ...
...most of them are cipher ...
...most of them are cipher mechanisms. ...
...And 32 more matches

Index
om:language bindings creating applications with mozilla already provides a tutorial for making a simple javascript or c++ component (implementing the nsisimple interface). here is how to make the same component in python using pyxpcom. 7 fun with xbl and xpconnect xbl, xpcom, xpcom:language bindings, xpconnect no summary! 8 generating guids add-ons, developing mozilla, developing_mozilla:tools, extensions, tools, xpcom guids are used in mozilla programming for identifying several types of entities, including xpcom interfaces (this type of guids is callled iid), components (cid), and legacy add-ons—like extensions and themes—that were created prior to firefox 1.5. add-ons can (and should) be identified with ids of the form extensionname@organi...
...llector firefox 3, xpcom this is a quick overview of the cycle collector introduced into xpcom for firefox 3, including a description of the steps involved in modifying an existing c++ class to participate in xpcom cycle collection. if you have a class that you think is involved in a cyclical-ownership leak, this page is for you. 14 introduction to xpcom for the dom developing mozilla warning: this document has not yet been reviewed by the dom gurus, it might contain some errors. 15 language bindings embedding, landing, mozilla, xpcom, xpcom:language bindings an xpcom language binding is a bridge between a particular language and xpcom to provide access to xpcom objects from that language, and to let modules written in that language be used a...
...ect components.utils.sandbox is used to create a sandbox object for use with evalinsandbox(). 32 components.utils.cloneinto this function provides a safe way to take an object defined in a privileged scope and create a structured clone of it in a less-privileged scope. ...
...And 30 more matches

AddressErrors - Web APIs
see the examples below to see how this works. ...
... see the examples below to see how this works. ...
... see the examples below to see how this works. properties addressline a domstring which, if present, indicates that the addressline property of the paymentaddress could not be validated. ...
...And 20 more matches

SubtleCrypto.unwrapKey() - Web APIs
at can be used in the web crypto api. as with subtlecrypto.importkey(), you specify the key's import format and other attributes of the key to import details such as whether it is extractable, and which operations it can be used for. but because unwrapkey() also decrypts the key to be imported, you also need to pass in the key that must be used to decrypt it. ...
...it can be one of the following: raw: raw format. pkcs8: pkcs #8 format. ...
...key, unwrapalgo, unwrappedkeyalgo, extractable, keyusages ); parameters format is a string describing the data format of the key to unwrap. it can be one of the following: raw: raw format. pkcs8: pkcs #8 format. spki: subjectpublickeyinfo format. jwk: json web key format. wrappedkey is an arraybuffer containing the wrapped key in the given format. unwrappingkey is the cryptokey to use to decrypt the wrapped key. the key must have the unwrapkey usage set. unwrapalgo is an object specifying the algorithm to be used to encrypt the exported key, and any extra parameters as required: to use rsa-oaep, pass an rsaoaepparams object. to use aes-ctr, pass an aesctrparams object. to use aes-cbc, pass an aescbcparams object. to use aes-gcm, pass ...
...And 13 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
bstraction, coding, codingscripting, glossary, programming language abstraction in computer programming is a way to reduce complexity and allow efficient design and implementation in complex software systems. it hides the technical complexity of systems behind simpler apis. 11 accessibility accessibility, glossary web accessibility (a11y) refers to best practices for keeping a website usable despite physical and technical restrictions. web accessibility is formally defined and discussed at the w3c through the web accessibility initiative (wai). 12 accessibility tree (aom) aom, accessibility, dom, glossary, reference the accessibility tree, or accessibility object model (aom), contains accessibility-related information for most html elements. ...
...nd 3d shapes and bitmap images. 66 card sorting card sorting, design, glossary card sorting is a simple technique used in information architecture whereby people involved in the design of a website (or other type of product) are invited to write down the content / services / features they feel the product should contain, and then organize those features into categories or groupings. this can be used for example to work out what should go on each page of a website. the name comes from the fact that often card sorting is carried out by literally writing the items to sort onto cards, and then arranging the cards into piles. 67 carddav carddav, glossary, infrastructure carddav (vcard extension to webdav) is a protocol standardized by the ietf and used to r...
... message. 71 character codingscripting, glossary, strings a character is either a symbol (letters, numbers, punctuation) or non-printing "control" (e.g., carriage return or soft hyphen). utf-8 is the most common character set and includes the graphemes of the most popular human languages. 72 character encoding composing, glossary an encoding defines a mapping between bytes and text. a sequence of bytes allows for different textual interpretations. by specifying a particular encoding (such as utf-8), we specify how the sequence of bytes is to be interpreted. 73 character set glossary, character encoding, character set a character set is an encoding system to let computers know how to recognize character, including letters, numbers,...
...And 12 more matches

clip-path - CSS: Cascading Style Sheets
parts that are inside the region are shown, while those outside are hidden. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ath> element. <basic-shape> a shape whose size and position is defined by the <geometry-box> value. if no geometry box is specified, the border-box will be used as the reference box. <geometry-box> if specified in combination with a <basic-shape>, this value defines the reference box for the basic shape. if specified by itself, it causes the edges of the specified box, including any corner shaping (such as a border-radius), to be the clipping path. the geometry box can be one of the following values: margin-box uses the margin box as the reference box. border-box uses the border box as the reference box. padding-box uses the padding box as the reference box. content-box uses the content box as the reference box. fill-box uses the object bounding box as the reference...
...reference box. view-box uses the nearest svg viewport as the reference box. if a viewbox attribute is specified for the element creating the svg viewport, the reference box is positioned at the origin of the coordinate system established by the viewbox attribute and the dimension of the size of the reference box is set to the width and height values of the viewbox attribute. none no clipping path is created. note: a computed value other than none results in the creation of a new stacking context the same way that css opacity does for values other than 1. formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to reference box when specified, otherwise bord...
...And 12 more matches

HTML documentation index - HTML: Hypertext Markup Language
one level larger than the surrounding text (medium becomes large, for example). 71 <blink>: the blinking text element (obsolete) blink, element, html, obsolete, reference, web the html blink element (<blink>) is a non-standard element which causes the enclosed text to flash slowly. 72 <blockquote>: the block quotation element blockquote, element, html, html grouping content, html:flow content, html:palpable content, html:sectioning root, quotations, reference, web the html <blockquote> element (or html block quotation element) indicates that the enclosed text is an extended quotation. usually, this is rendered visually by indentation (see notes for how to change it). a url for the source of the quotation may be given using the cite attribute, while a t...
...be used. 86 <datalist>: the html data list element element, html, html forms, html5, reference, web the html <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls. 87 <dd>: the description details element definition, description details, element, html, html grouping content, reference, web, dd, description list, details the html <dd> element provides the description, definition, or value for the preceding term (<dt>) in a description list (<dl>). 88 <del>: the deleted text element deleted text, element, html, html edits, reference, web, del the html <del> element represents a range of text that has been deleted from a document. ...
... 92 <dir>: the directory element (obsolete) directory, element, html, html lists, obsolete, reference, web, dir, lists the obsolete html directory element (<dir>) is used as a container for a directory of files and/or folders, potentially with styles and icons applied by the user agent. ...
...And 12 more matches

ui/frame - Archive of obsolete content
s is more secure: it prevents another window from intercepting messages that were intended for someone else. from frame to add-on to send a message from a frame script to the add-on, use window.parent.postmessage(). this takes two arguments, the message itself and a target origin. ...
...ot on the frame itself but on the source attribute of the object passed into an event listener. for targetorigin, you can use the origin property of the event object passed to the message listener: var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url: "./city-info.html", onmessage: function(e) { // message only the frame that pinged us e.source.postmessage("pong", e.origin); } }); var toolbar = toolbar({ name: "ping-pong", title: "ping pong", items: [frame] }); this does not have to be the message event: the other events frame can emit: attach, load and ready, also provide access to source and origin. to receive such messages in the frame script, listen for the window's message event: window.addeventlistene...
...essage event: window.addeventlistener("message", handlepong, false); sending json in all cases, you can send a string as a message or a json object. if you send a json object, the sdk takes care of serializing and deserializing it for you: // frame.js var label = window.document.getelementbyid("linky"); label.addeventlistener("click", function() { window.parent.postmessage({ "type" : "ping", "reason" : "they clicked me" }, "*"); }, true); // main.js var { frame } = require("sdk/ui/frame"); var frame = new frame({ url: "./frame.html" }); frame.on("message", pong); function pong(e) { if (e.data.type == "ping") { console.log(e.data.reason); e.source.postmessage("pong", event.origin); } } globals constructors frame(options) creates an frame. once created, ...
...And 11 more matches

Inputs and input sources - Web APIs
t features to determine what input sources are available and how to then monitor those sources for inputs in order to handle user interactivity with your virtual or augmented environment. inputs in webxr fundamentally, inputs in webxr fall into two basic categories: targeting and actions. targeting is the specification of a point in space by the user's input. this may involve the user simply tapping on a spot on the screen, tracking their eyes, or the use of a joystick or motion-sensing controller to move a cursor. actions include both selection actions, such as clicking on a button, and squeeze actions, such as pulling a trigger or tightening your grip while wearing haptic gloves. by combining these two types of input with the changing of viewing position and/or orientation through the he...
...s in the same direction the user is pointing in with their index finger, if it were currently outstretched. the third and final target ray mode is most commonly found on mobile devices like smartphones and tablets. the screen mode indicates that the target ray is determined based on the user interacting with the webxr context by engaging with the screen in some way—most likely by the viewer tapping the screen or dragging the target ray around with their fingers. target ray space the xrspace used to describe the position and orientation of the target ray is found in the targetrayspace property. this space's native origin is located at the point from which the target ray is emitted (such as the front tip of the controller, or the end of a gun barrel if the controller is being rendered as a ...
...o represent your controller, your player's avatar's hands, or anything else representative of the controller's position in space, the gripspace can be used as the transform matrix that correctly positions and orients the object's model for rendering. to do this, it's necessary to use the transform to convert the grip space to the world coordinate system used by webgl for rendering purposes. mapping the grip space to the world coordinate system. the distances x, y, and z together make up the world coordinates (x, y, z) corresponding to the origin of the grip space g. in the diagram above, we see the grip space, whose origin is located at g, at the midpoint of the user's grip on the controller, which is pointing directly away from the user, parallel to the z axis. relative to the origin ...
...And 10 more matches

Mobile accessibility - Learn web development
ccessibility best practices. there are some exceptions that need special consideration for mobile; the main ones are: control mechanisms — make sure interface controls such as buttons are accessible on mobiles (i.e., mainly touchscreen), as well as desktops/laptops (mainly mouse/keyboard). user input — make user input requirements as painless as possible on mobile (e.g., in forms, keep typing to a minimum). responsive design — make sure layouts work on mobile, conserve image download sizes, and think about the provision of images for high-resolution screens. summary of screenreader testing on android and ios the most common mobile platforms have fully functional screen readers. these function in much the same way as desktop screenreaders, except they are largely operated using t...
.... some phone manufacturers (e.g. samsung) don't even have talkback in newer phones, and instead opted for their own screen reader. when you've found the talkback menu, press the slider switch to turn talkback on. follow any additional on-screen prompts that you are presented with. when talkback is turned on, your android device's basic controls will be a bit different. for example: single-tapping an app will select it, and the device will read out what the app is. swiping left and right will move between apps, or buttons/controls if you are in a control bar. the device will read out each option. double-tapping anywhere will open the app/select the option. you can also "explore by touch" — hold your finger down on the screen and drag it around, and your device will read out the differ...
...ouch" — hold your finger down on the screen and drag it around, and your device will read out the different apps/items you move across. if you want to turn talkback off: navigate back to the talkback menu screen (using the different gestures that are currently enabled.) navigate to the slider switch and activate it to turn it off. note: you can get to your home screen at any time by swiping up and left in a smooth motion. if you have more than one home screen, you can move between them by swiping two fingers left and right. for a more complete list of talkback gestures, see use talkback gestures. unlocking the phone when talkback is turned on, unlocking the phone is a bit different. you can do a two-finger swipe up from the bottom of the lock screen. if you've set a passcode or...
...And 9 more matches

WebGL model view projection - Web APIs
// y depth : 0, // z color : [1, 0.4, 0.4, 1] // red }); next, draw a green box up top and behind the red box. box.draw({ top : 0.9, // x bottom : 0, // x left : -0.9, // y right : 0.9, // y depth : 0.5, // z color : [0.4, 1, 0.4, 1] // green }); finally, for demonstration that clipping is actually going on, this box doesn't get drawn because it's entirely outside of clip space. the depth is outside of the -1.0 to 1.0 range. box.draw({ top : 1, // x bottom : -1, // x left : -1, // y right : 1, // y depth : -1.5, // z color : [0.4, 0.4, 1, 1] // blue }); the results view on jsfiddle exerc...
...using homogeneous coordinates is that they fit very nicely for multiplying against 4x4 matrices. a vertex must match at least one of the dimensions of a matrix in order to be multiplied against it. the 4x4 matrix can be used to encode a variety of useful transformations. in fact, the typical perspective projection matrix uses the division by the w component to achieve its transformation. the clipping of points and polygons from clip space actually happens after the homogeneous coordinates have been transformed back into cartesian coordinates (by dividing by w). this final space is known as normalized device coordinates or ndc. to start playing with this idea the previous example can be modified to allow for the use of the w component. //redefine the triangles to use the w component var data...
...sformedposition.xyz, w); the results view on jsfiddle see that small dark blue triangle? that's an additional face added to our object because the rotation of our shape has caused that corner to extend outside clip space, thus causing the corner to be clipped away. see perspective projection matrix below for an introduction to how to use more complex matrices to help control and prevent clipping. exercise if that sounds a little abstract, open up the vertex shader and play around with the scale factor and watch how it shrinks vertices more towards the surface. completely change the w component values for really trippy representations of space. in the next section we'll take this step of copying z into the w slot and turn it into a matrix. simple projection the last step of filling i...
...And 8 more matches

/loader - Archive of obsolete content
des a set of globals shared across modules loaded via this loader. optional. resolve: provide customized module resolution logic. optional. id: provide add-on id to attach to loaded modules. optional. paths the loader needs to be provided with a set of locations to indicate where to find modules loaded using require(). this is provided by a mandatory options.paths hash that represents the mapping between module id prefixes and locations. there are lots of different possibilities, but the most common setup looks like this: let { loader } = require('toolkit/loader'); let loader = loader({ paths: { // resolve all modules starting with `toolkit/` as follows: // toolkit/foo -> resource://gre/modules/commonjs/toolkit/foo.js // toolkit/foo/bar -> resource://gre/modules/com...
...les/', } }) all relative url require() statements (those that start with ".") are first resolved relative to the requirer module id and the result of it is then resolved using the paths option. you may still end up with a relative module id if the entry point module id is itself relative. ...
... modules the loader may optionally be provided with a set of module exports. in the sdk we call these "pseudo modules". this feature may be used in a few different ways: to expose an api that doesn't have a js file with an implementation or is written in an incompatible format suc...
...And 7 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
everyday browsing environment from your development environment in firefox, set up a second profile for development. to create this dev profile start firefox with firefox.exe -no-remote -p dev on the first start the profile manager will appear, where you can create the dev profile and configure its home-path. change your preferences for more efficient development before you get to work developing your extension, you’ll want to change some of your firefox preferences. this isn’t a requirement for extension development, but i recommend it as a way to work more efficiently. preference description value nglayout.debug.disable_xul_cache (not present in firefox 3.5+) ordinarily, firefox will cache xul documents after they have been read in once, to s...
...se of the dump method for debugging. refer to the “javascript debugging methods” sidebar. true javascript.options.showinconsole (present in firefox 3.5+) outputs javascript errors to the error console. true javascript.options.strict (present in firefox 3.5+) enforces strict error output from javascript true table 1: preferences to set for developing extensions to make these changes, start your development profile, type about:config into firefox’s location bar and open the preferences window; find the preferences listed in table 1 and double-click on them to set them accordingly. some of these preferences do not exist—to create them, right-click, select “new>boolean”, and type in the name and set the value accordingly. install the d...
... table 1 and double-click on them to set them accordingly. some of these preferences do not exist—to create them, right-click, select “new>boolean”, and type in the name and set the value accordingly. install the dom inspector the dom inspector is an extension that lets you examine html and xul dom tree structures, javascript objects and css properties, etc. this is not required for developing extensions, but it is handy to have around. install extensions for firefox from the mozilla add-ons website. optional - install firebug and chromebug chromebug is used by the firebug development team to develop firebug. you can use it to help debug firefox extensions as well as to inspect and learn how the firefox ui (chrome) is constructed. you can learn more about chromebug and download it ...
...And 7 more matches

Using the Payment Request API - Web APIs
reation of a new paymentrequest object — using the paymentrequest() constructor. this takes two mandatory parameters and one option parameter: methoddata — an object containing information concerning the payment provider, such as what payment methods are supported, etc. ...
......
... buildshoppingcartdetails()); the functions invoked inside the constructor simply return the required object parameters: function buildsupportedpaymentmethoddata() { // example supported payment methods: return [{ supportedmethods: 'basic-card', data: { supportednetworks: ['visa', 'mastercard'], supportedtypes: ['debit', 'credit'] } }]; } function buildshoppingcartdetails() { // hardcoded for demo purposes: return { id: 'order-123', displayitems: [ { label: 'example item', amount: {currency: 'usd', value: '1.00'} } ], total: { label: 'total', amount: {currency: 'usd', value: '1.00'} } }; } starting the payment process once the paymentrequest object has been created, you call the payment...
...And 7 more matches

Index - Learn web development
and navigating to the html file. there are many ways to achieve this. 21 how do you upload your files to a web server? beginner, ftp, github, uploading, webmechanics, hosting, rsync, sftp if you have built a simple web page (see html basics for an example), you will probably want to put it online, on a web server. in this...
...e actually do? a website can do basically anything, but, for your first try, you should keep things simple. we'll start by creating a simple webpage with a heading, an image, and a few paragraphs. 46 how to contribute to the learning area on mdn beginner, contribute, documentation, guide, learn, mdn meta, l10n:priority on this page, you'll find everything you need to start helping improve mdn's learning content. there are many things you can do, depending on how much time you have and whether you are a beginner, a web developer, or a teacher. 47 index index, learn, mdn meta found 348 pages: 48 javascript — dynamic client-side scripting beginner, codingscripting, javascript, javascripting beginner, landing, module, topic, l10n:priority ...
...xt — strings in javascript article, beginner, codingscripting, guide, javascript, join, quotes, concatenation, l10n:priority, strings next, we'll turn our attention to strings — this is what pieces of text are called in programming. in this article, we'll look at all the common things that you really ought to know about strings when learning javascript, such as creating strings, escaping quotes in strings, and joining strings together. 80 silly story generator arrays, assessment, beginner, codingscripting, javascript, learn, numbers, operators, variables, l10n:priority, strings in this assessment you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stori...
...And 6 more matches

A guide to searching crash reports
investigating large numbers of firefox crash reports. this guide to searching through crash reports may help you locate the crash reports that will help you find and fix the firefox bug you're working on. specifically, crash-stats offers two basic functions: searching you can search the crash reports database by over 100 criteria: crash signature, date, platform, product, version, etc. grouping you can cluster the results of each search into groups using the same criteria. to achieve full power and flexibility requires a good understanding of both of these functions. search is easy to understand, but the grouping capabilities are easy to overlook. searching the search form you can get to the search page by clicking on the "super search" link near the toolbar at the top right of an...
...ly generic signature and you want to see how many of them are a particular case of it that you've come across. or instead of a signature foo, a moz crash reason or something else. use it as a facet. this lets you skim the full signatures of crashes at a glance, bucketed together a bit. note that because the proto signature includes the entire signature, things aren't grouped all that well. grouping in the previous section we saw one example of grouping, in the "signature facet" tab that is shown by default. but there are many other interesting ways to group searches. facets in the search form to do a search with non-signature grouping first click on the "more options..." text, which reveals the additional fields shown in the following screenshot. (the "show columns" and "sort by" fiel...
... but there are many other interesting ways to group searches. facets in the search form to do a search with non-signature grouping first click on the "more options..." text, which reveals the additional fields shown in the following screenshot. (the "show columns" and "sort by" fields are straightforward. they apply to the "crash reports" tab of any search results, and are not related to grouping.) the "facet on" field is the one that controls grouping. by default, it contains the value "signature", which explains why we saw a "signature facet" tab in the earlier search results. ...
...And 6 more matches

Index
he context. when done, you call a finalization function that will flush out any pending data and free the resources. this line is a placeholder for future sections that should explain how libpkix works and is designed. if you want to work with nss, it's often helpful to use the command line utilities that are provided by the nss developers. there are tools for managing nss databases, for dumping or verifying certificates, for registering pkcs#11 modules with a database, for processing cms encrypted/signed messages, etc. for example, if you wanted to create your own pair of keys and request a new certificate from a ca, you could use certutil to create an empty database, then use certutil to operate on your database and create a certificate request (which involves creating the desired k...
...ast versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o secmod.db for pkcs #11 module information berkeleydb has performance limitations, though, which prevent it from being easily used by multiple applications simultaneously. nss has some flexibility that allows applications to use their own, independent database engine while keeping a shared database and working around the access issues. still, nss requires more flexibility to provide a truly shared security database. in 2009, nss introduced a new set of databases that are sqlite databases rather than berkleydb. these new databases provide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which ...
...ast versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o secmod.db for pkcs #11 module information berkeleydb has performance limitations, though, which prevent it from being easily used by multiple applications simultaneously. nss has some flexibility that allows applications to use their own, independent database engine while keeping a shared database and working around the access issues. still, nss requires more flexibility to provide a truly shared security database. in 2009, nss introduced a new set of databases that are sqlite databases rather than berkleydb. these new databases provide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which ...
...And 6 more matches

CanvasRenderingContext2D.clip() - Web APIs
it doesn't work with shape primitives drawn directly to the canvas, such as fillrect(). instead, you'd have to use rect() to add a rectangular shape to the path before calling clip(). ...
...it doesn't work with shape primitives drawn directly to the canvas, such as fillrect(). instead, you'd have to use rect() to add a rectangular shape to the path before calling clip(). ...
...it doesn't work with shape primitives drawn directly to the canvas, such as fillrect(). instead, you'd have to use rect() to add a rectangular shape to the path before calling clip(). ...
...And 6 more matches

SubtleCrypto.wrapKey() - Web APIs
the wrapkey() method of the subtlecrypto interface "wraps" a key. this means that it exports the key in an external, portable format, then encrypts the exported key. wrapping a key helps protect it in untrusted environments, such as inside an otherwise unprotected data store or in transmission over an unprotected network. as with subtlecrypto.exportkey(), you specify an export format for the key. to export a key, it must have cryptokey.extractable set to true. but because wrapkey() also encrypts the key to be imported, you also need to pass in the key that must be used to encrypt it. this is sometimes called the "wrapping key". the inverse of wrapkey() is subtlecrypto.unwrapkey(): while wrapkey is composed of export + encrypt, unwrapkey is composed of import + decrypt. syntax const res...
... true. but because wrapkey() also encrypts the key to be imported, you also need to pass in the key that must be used to encrypt it. this is sometimes called the "wrapping key". the inverse of wrapkey() is subtlecrypto.unwrapkey(): while wrapkey is composed of export + encrypt, unwrapkey is composed of import + decrypt. syntax const result = crypto.subtle.wrapkey( format, key, wrappingkey, wrapalgo ); parameters format is a string describing the data format in which the key will be exported before it is encrypted. it can be one of the following: raw: raw format. pkcs8: pkcs #8 format. spki: subjectpublickeyinfo format. jwk: json web key format. key is the cryptokey to wrap. wrappingkey is the cryptokey used to encrypt the exported key. the key mu...
...ams object. to use aes-gcm, pass an aesgcmparams object. to use aes-kw, pass the string "aes-kw", or an object of the form { "name": "aes-kw }. return value result is a promise that fulfills with an arraybuffer containing the encrypted exported key. ...
...And 6 more matches

Graceful asynchronous programming with Promises - Learn web development
and why promises are a good thing, it helps to think back to old-style callbacks and to appreciate why they are problematic. let's talk about ordering pizza as an analogy. there are certain steps that you have to take for your order to be successful, which doesn't really make sense to try to execute out of order, or in order but before each previous step has quite finished: you choose what toppings you want. this can take a while if you are indecisive, and may fail if you just can't make up your mind, or decide to get a curry instead. you then place your order. this can take a while to return a pizza and may fail if the restaurant does not have the required ingredients to cook it. you then collect your pizza and eat. this might fail if, say, you forgot your wallet so can't pay for the pi...
... instead. you then place your order. this can take a while to return a pizza and may fail if the restaurant does not have the required ingredients to cook it. you then collect your pizza and eat. this might fail if, say, you forgot your wallet so can't pay for the pizza! with old-style callbacks, a pseudo-code representation of the above functionality might look something like this: choosetoppings(function(toppings) { placeorder(toppings, function(order) { collectorder(order, function(pizza) { eatpizza(pizza); }, failurecallback); }, failurecallback); }, failurecallback); this is messy and hard to read (often referred to as "callback hell"), requires the failurecallback() to be called multiple times (once for each nested function), with other issues besides. improvemen...
... to read (often referred to as "callback hell"), requires the failurecallback() to be called multiple times (once for each nested function), with other issues besides. improvements with promises promises make situations like the above much easier to write, parse, and run. ...
...And 5 more matches

Storing the information you need — Variables - Learn web development
an think of them being like little cardboard boxes that you can store things in. declaring a variable to use a variable, you've first got to create it — more accurately, we call this declaring the variable. to do this, we type the keyword var or let followed by the name you want to call your variable: let myname; let myage; here we're creating two variables called myname and myage. try typing these lines into your web browser's console. after that, try creating a variable (or two) with your own name choices. note: in javascript, all code instructions should end with a semi-colon (;) — your code may work correctly for single lines, but probably won't when you are writing multiple lines of code together. try to get into the habit of including it. you can test whether these values ...
.... after that, try creating a variable (or two) with your own name choices. note: in javascript, all code instructions should end with a semi-colon (;) — your code may work correctly for single lines, but probably won't when you are writing multiple lines of code together. try to get into the habit of including it. ...
...le lines of code together. try to get into the habit of including it. you can test whether these values now exist in the execution environment by typing just the variable's name, e.g. myname; myage; they currently have no value; they are empty containers. when you enter the variable names, you should get a value of undefined returned. if they don't exist, you'll get an error message — try typing in scoobydoo; note: don't confuse a variable that exists but has no defined value with a variable that doesn't exist at all — they are very different things. in the box analogy you saw above, not existing would mean there's no box (variable) for a value to go in. no value defined would mean that there is a box, but it has no value inside it. initializing a variable once you've declared a ...
...And 5 more matches

Command line crash course - Learn web development
welcome to the terminal the terminal is a text interface for executing text-based programs. if you're running any tooling for web development there's a near-guaranteed chance that you'll have to pop open the command line and run some commands to use your chosen tools (you'll often see such tools referred to as cli tools — command line interface tools). a large number of tools can be used by typing commands into the command line; many come pre-installed on your system, and a huge number of others are installable from package registries. package registries are like app stores, but (mostly) for command line based tools and software. we’ll see how to install some tools later on in this chapter, and we’ll learn more about package registries in the next chapter. one of the biggest criticism...
... long time. anyway, the terminal is not going away anytime soon. what does the terminal look like? below you can see some of the different flavours of programs that are available that can get you to a terminal. the next images show the command prompts available in windows — there’s a good range of options from the "cmd" program to "powershell" — which can be run from the start menu by typing the program name. and below, you can see the macos terminal application. how do you access the terminal? many developers today are using unix-based tools (e.g. the terminal, and the tools you can access through it). many tutorials and tools that exist on the web today support (and sadly assume) unix-based systems, but not to worry — they are available on most systems. in this section, we...
...tally delete it — thank goodness! you don’t need to worry too much about whether a command is a built-in or not, but bear in mind that built-ins appear on all unix-based systems. to change directory, you type cd into your terminal, followed by the directory you want to move to. assuming the directory is inside your home directory, you can use cd desktop (see the screenshots below). ...
...And 5 more matches

PaymentRequest.PaymentRequest() - Web APIs
bout the requested transaction. this parameter contains the following fields: total the total amount of the payment request. id optional a free-form identifier for this payment request. if a value is not supplied, the browser will construct one. displayitems an array of optional line items for the payment request that the user agent may display, such as product details, tax, and shipping. shippingoptions the shipping options the user may choose from. if this sequence is blank, it indicates the merchant cannot ship to the current shipping address. the default shipping option may be indicated in this sequence. modifiers modifiers for specific payment methods; for example, adjusting the total amount based on the payment method. this parameter contains the following fields: ...
...t with the payment request. the default is false. requestpayeremail a boolean indicating whether the user agent should collect the payer's email address and submit it with the payment request. the default is false. requestpayerphone a boolean indicating whether the user agent should collect the payer's phone number and submit it with the payment request. the default is false. requestshipping a boolean indicating whether the user agent should collect the payer's shipping address and submit it with the payment request. if you set this type to true, you should select an appropriate shippingtype. the default is false. shippingtype lets you specify how the user interface refers to shipping when the word 'shipping' isn't appropriate for your use case. for example, in english speaking...
... return value a new paymentrequest object, configured for use as configured by the input parameters. ...
...And 5 more matches

ARIA: gridcell role - Accessibility
<div role="gridcell">potato</div> <div role="gridcell">cabbage</div> <div role="gridcell">onion</div> elements that have role="gridcell" applied to them must be the child of an element with a role of row. ...
...e, use it instead of re-purposing an element and adding aria. instead use the native html td element in conjunction with the and contenteditable attribute: <td>potato</td> <td>cabbage</td> <td>onion</td> description gridcells with dynamically added, hidden, or removed rows and columns any element with a role="gridcell" applied to it should use aria to describe its order in the table-style grouping, provided the table, grid, or treegrid has the ability to have rows and/or columns dynamically added, hidden, or removed. use aria-colindex to describe a gridcell's order in the list of columns, and aria-rowindex to describe a gridcell's order in the list of rows. use aria-colcount and aria-rowcount on the parent element with role="grid" applied to it to set the total number of columns or rows. ...
...bility to have rows and/or columns dynamically added, hidden, or removed. use aria-colindex to describe a gridcell's order in the list of columns, and aria-rowindex to describe a gridcell's order in the list of rows. use aria-colcount and aria-rowcount on the parent element with role="grid" applied to it to set the total number of columns or rows. this sample code demonstrates a table-style grouping of information where the third and fourth columns have been removed. aria-colindex is being used to describe the rows' position and allows a person using assistive technology to infer that certain rows have been removed: <div role="grid" aria-colcount="6"> <div role="rowgroup"> <div role="row"> <div role="columnheader" aria-colindex="1">first name</div> <div role="columnheader"...
...And 5 more matches

How to convert an overlay extension to restartless - Archive of obsolete content
some of that will have to be replaced and the rest will need to be loaded differently. ...
...t code like this: components.utils.import("resource://gre/modules/services.jsm"); from here on out, it is assumed you've imported services.jsm somewhere at the top of whatever file you're in and will be using it in all code examples. the examples will also assume that you know how to properly add instructions to your add-on's chrome.manifest to add and remove resource, chrome, locale, & etc. ...
... the examples will also assume that you know how to properly add instructions to your add-on's chrome.manifest to add and remove resource, chrome, locale, & etc. mappings, so that you can access your files with custom paths such as: resource://myaddon/filename.ext chrome://myaddon/content/filename.ext step 2: no more resource:// uris for files internal to your bundle unfortunately, resource mappings in your chrome.manifest were not usable in restartless add-ons until mozilla finally fixed this bug in firefox 38, which looked bad, but only because mozilla is still using resource:// uris internally and in examples. ...
...And 4 more matches

Index of archived content - Archive of obsolete content
toolbar annotator 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 ...
...ase support in old browsers xpath getattributens common pitfalls communication between html and your extension creating custom firefox extensions with the mozilla build system custom about: urls default preferences deploying a plugin as an extension developing add-ons displaying web content in an extension without security issues downloading json and javascript in extensions enhanced extension installation extension etiquette extension library extension packaging extension samples extension theming guidelines extension versioning, update and compatibility ...
... multiple item extension packaging offering a context menu for form controls overlay extensions firefox addons developer guide appendix: what you should know about open-source software licenses chapter 1: introduction to extensions chapter 2: technologies used in developing extensions chapter 3: introduction to xul—how to build a more intuitive ui chapter 4: using xpcom—implementing advanced processes chapter 5: let's build a firefox extension chapter 6: firefox extensions and xul applications license and authors xul school tutorial ...
...And 4 more matches

JavaScript Client API - Archive of obsolete content
bookmarks, etc). it is possible for other components, including 3rd party extensions, to supplement the set of engines and synchronize their own data. a word of warning: the javascript client api is still a young component and is continuing to evolve. therefore, developers outside of the sync core should know that their code could require significant refactoring in future releases. before developing against the javascript api, it is recommended to speak to developers of the api. see https://wiki.mozilla.org/services/sync for their contact information. to create a custom sync engine to synchronize a new data you, you'll need to define an engine object that extends the base syncengine object. this involves writing types that extend the store, tracker, and record types as well. it will be ver...
...function foorecord(collection, id) { cryptowrapper.call(this, collection, id); } foorecord.prototype = { __proto__: cryptowrapper.prototype, _logname: "record.foo", ttl: foo_ttl, // optional get bar() this.cleartext.bar, set bar(value) { this.cleartext.bar = value; }, get baz() this.cleartext.baz, set baz(value) { this.cleartext.baz = value; } }; to save all that typing for declaring the getters and setters, you can also use utils.defergetset: function foorecord(collection, id) { cryptowrapper.call(this, collection, id); } foorecord.prototype = { __proto__: cryptowrapper.prototype, _logname: "record.foo", ttl: foo_ttl // optional }; utils.defergetset(foorec, "cleartext", ["bar", "baz"]); the store object the store object (which extends store, as def...
... the store implementation. each record that the store keeps track of must be identified by a unique id (unique among all records in the store) called guid. depending of what type of data you're working with, you might already have guids built into your data that you can make use of (note that guids must be allowed to change and should be url friendly). if not, you may have to invent your own mapping from data objects to guids as long as it's consistent. in this case, it is highly recommended to use the utils.makeguid() helper to generate new guids: let newguid = utils.makeguid(); your store object must implement the following methods: itemexists(id) createrecord(id, collection) changeitemid(oldid, newid) getallids() wipe() create(record) update(record) remove(record) you may ...
...And 4 more matches

Bytecode Descriptions
al ⇒ val throw a typeerror if val is null or undefined. implements: requireobjectcoercible. but most instructions that require an object will perform this check for us, so of the dozens of calls to requireobjectcoercible in the spec, we need this instruction only for destructuring assignment and initialization. toasynciter stack: iter, next ⇒ asynciter create and push an async iterator wrapping the sync iterator iter. next should be iter's .next method. implements: createasynctosynciterator. the spec says this operation takes one argument, but that argument is a record with two relevant fields, [[iterator]] and [[nextmethod]]. used for for await loops. setprototype mutateproto stack: obj, protoval ⇒ obj set the prototype of obj. obj must be an object. implements: b.3.1 proto prop...
...her awaiting 'value' can be skipped. this is part of an optimization for await expressions. programs very often await values that aren't promises, or promises that are already resolved. we can then sometimes skip suspending the current frame and returning to the microtask loop. if the circumstances permit the optimization, tryskipawait replaces value with the result of the await expression (unwrapping the resolved promise, if any) and pushes true. otherwise, it leaves value unchanged and pushes 'false'. resumekind operands: (generatorresumekind resumekind (encoded as uint8_t)) stack: ⇒ resumekind pushes one of the generatorresumekind values as int32value. checkresumekind stack: rval, gen, resumekind ⇒ rval handle throw and return resumption. gen must be the generator object for the c...
...te: jsop::bindname and jsop::getboundname are the two halves of the jsop::getname operation: finding and reading a variable. this decomposed version is needed to implement the compound assignment and increment/decrement operators, which get and then set a variable. the spec says the variable lookup is done only once. if we did the lookup twice, there would be observable bugs, thanks to dynamic scoping. we could set the wrong variable or call proxy traps incorrectly. implements: getvalue steps 4 and 6. format: jof_atom, jof_name, jof_typeset, jof_ic getintrinsic operands: (uint32_t nameindex) stack: ⇒ intrinsic[name] push the value of an intrinsic onto the stack. non-standard. intrinsics are slots in the intrinsics holder object (see globalobject::getintrinsicsholder), which is used in lie...
...And 4 more matches

AudioWorkletNode.port - Web APIs
: the port at the other end of the channel is available under the port property of the processor. syntax audioworkletnodeinstance.port; value the messageport object that is connecting the audioworkletnode and its associated audioworkletprocessor. ...
...is connecting the audioworkletnode and its associated audioworkletprocessor. examples to demonstrate bidirectional communication capabilities, we'll create an audioworkletprocessor, which will output silence and respond to ping requests from its audioworkletnode. first, we need to define a custom audioworkletprocessor, and register it. note that that this should be done in a separate file. ...
...tnode and its associated audioworkletprocessor. examples to demonstrate bidirectional communication capabilities, we'll create an audioworkletprocessor, which will output silence and respond to ping requests from its audioworkletnode. first, we need to define a custom audioworkletprocessor, and register it. note that that this should be done in a separate file. ...
...And 4 more matches

AudioWorkletProcessor.port - Web APIs
: the port at the other end of the channel is available under the port property of the node. syntax audioworkletprocessorinstance.port; value the messageport object that is connecting the audioworkletprocessor and the associated audioworkletnode. ...
...is connecting the audioworkletprocessor and the associated audioworkletnode. examples to demonstrate bidirectional communication capabilities, we'll create an audioworkletprocessor, which will output silence and respond to ping requests from its audioworkletnode. first, we need to define a custom audioworkletprocessor, and register it. note that that this should be done in a separate file. ...
...tprocessor and the associated audioworkletnode. examples to demonstrate bidirectional communication capabilities, we'll create an audioworkletprocessor, which will output silence and respond to ping requests from its audioworkletnode. first, we need to define a custom audioworkletprocessor, and register it. note that that this should be done in a separate file. ...
...And 4 more matches

PaymentRequest: paymentmethodchange event - Web APIs
nterface paymentmethodchangeevent event handler property onpaymentmethodchange examples let's take a look at an example. this code creates a new paymentrequest, adds a handler for the paymentmethodchange event by calling the request's addeventlistener(), then calls show() to present the payment interface to the user. ...
... onpaymentmethodchange examples let's take a look at an example. this code creates a new paymentrequest, adds a handler for the paymentmethodchange event by calling the request's addeventlistener(), then calls show() to present the payment interface to the user. ...
...amples let's take a look at an example. this code creates a new paymentrequest, adds a handler for the paymentmethodchange event by calling the request's addeventlistener(), then calls show() to present the payment interface to the user. the code assumes the existence of a method detailsforshipping(), which returns a paymentdetailsupdate object containing the shipping options for the ground shipping method, in the form found in the paymentshippingoption dictionary. ...
...And 4 more matches

PaymentRequestUpdateEvent - Web APIs
constructor paymentrequestupdateevent() secure context creates a new paymentrequestupdateevent object. ...
... constructor paymentrequestupdateevent() secure context creates a new paymentrequestupdateevent object. ...
... constructor paymentrequestupdateevent() secure context creates a new paymentrequestupdateevent object. ...
...And 4 more matches

Using textures in WebGL - Web APIs
// webgl1 has different requirements for power of 2 images // vs non power of 2 images so check if the image is a // power of 2 in both dimensions. if (ispowerof2(image.width) && ispowerof2(image.height)) { // yes, it's a power of 2. generate mips. gl.generatemipmap(gl.texture_2d); } else { // no, it's not a power of 2. ...
...image to download. to load the texture from the image file, it then creates an image object and assigns the src to the url for our image we wish to use as our texture. the function we assign to image.onload will be called once the image has finished downloading. at that point we again call teximage2d() this time using the image as the source for the texture. after that we setup filtering and wrapping for the texture based on whether or not the image we download was a power of 2 in both dimensions or not. webgl1 can only use non power of 2 textures with filtering set to nearest or linear and it can not generate a mipmap for them. their wrapping mode must also be set to clamp_to_edge. on the other hand if the texture is a power of 2 in both dimensions then webgl can do higher quality filtering...
... image we download was a power of 2 in both dimensions or not. webgl1 can only use non power of 2 textures with filtering set to nearest or linear and it can not generate a mipmap for them. their wrapping mode must also be set to clamp_to_edge. on the other hand if the texture is a power of 2 in both dimensions then webgl can do higher quality filtering, it can use mipmap, and it can set the wrapping mode to repeat or mirrored_repeat. an example of a repeated texture is tiling an image of a few bricks to cover a brick wall. mipmapping and uv repeating can be disabled with texparameteri(). this will allow non-power-of-two (npot) textures at the expense of mipmapping, uv wrapping, uv tiling, and your control over how the device will handle your texture. // gl.nearest is also allowed, instead...
...And 4 more matches

SVG documentation index - SVG: Scalable Vector Graphics
ou may assign the same class name or names to any number of elements, however, multiple class names must be separated by whitespace characters. 40 clip svg, svg attribute the clip attribute is a presentation attribute defining the visible region of an element. 41 clip-path svg, svg attribute the clip-path presentation attribute defines or associates a clipping path with the element it is related to. 42 clip-rule svg, svg attribute the clip-rule attribute only applies to graphics elements that are contained within a <clippath> element. the clip-rule attribute basically works as the fill-rule attribute, except that it applies to <clippath> definitions. 43 clippathunits svg, svg attribute the clippathunits attribu...
...vertical direction of the convolution matrix relative to a given target pixel in the input image. the topmost row of the matrix is row number zero. the value must be such that: 0 <= targety < ordery. 218 text-anchor svg, svg attribute the text-anchor attribute is used to align (start-, middle- or end-alignment) a string of pre-formatted text or auto-wrapped text where the wrapping area is determined from the inline-size property relative to a given point. 219 text-decoration svg, svg attribute the text-decoration attribute defines whether text is decorated with an underline, overline and/or strike-through. 220 text-rendering svg, svg attribute the text-rendering attribute provides hints to the renderer about what tradeoffs to make ...
...se of these shapes is fairly obvious from their names. some of the parameters that determine their position and size are given, but an element reference would probably contain more accurate and complete descriptions along with other properties that won't be covered in here. however, since they're used in most svg documents, it's necessary to give them some sort of introduction. 273 clipping and masking advanced, svg, svg:tutorial erasing part of what one has created might at first sight look contradictory. but when you try to create a semicircle in svg, you will find out the use of the following properties quickly. 274 fills and strokes beginner, needlivesamples, svg, svg:tutorial there are several ways to color shapes (including specifying attributes ...
...And 4 more matches

3D collision detection - Game development
this article provides an introduction to the different bounding volume techniques used to implement collision detection in 3d environments. followup articles will cover implementations in specific 3d libraries. axis-aligned bounding boxes as with 2d collision detection, axis-aligned bounding boxes (aabb) are the quickest algorithm to determine whether the two game entities are overlapping or not. ...
...introduction to the different bounding volume techniques used to implement collision detection in 3d environments. followup articles will cover implementations in specific 3d libraries. axis-aligned bounding boxes as with 2d collision detection, axis-aligned bounding boxes (aabb) are the quickest algorithm to determine whether the two game entities are overlapping or not. ...
...ions in specific 3d libraries. axis-aligned bounding boxes as with 2d collision detection, axis-aligned bounding boxes (aabb) are the quickest algorithm to determine whether the two game entities are overlapping or not. this consists of wrapping game entities in a non-rotated (thus axis-aligned) box and checking the positions of these boxes in the 3d coordinate space to see if they are overlapping. the axis-aligned constraint is there because of performance reasons. the overlapping area between two non-rotated boxes can be checked with logical comparisons alone, whereas rotated boxes require additional trigonometric operations, which are slower to calculate. if you have entities that will be rotating, you can either modify the dimensions of the bounding box so it still wraps the object,...
...And 3 more matches

Arrays - Learn web development
to add to the invoice it would already be annoying, but what about 100 items, or 1000? we'll return to this example later on in the article. as in previous articles, let's learn about the real basics of arrays by entering some examples into browser developer console. creating arrays arrays consist of square brackets and elements that are separated by commas. suppose we want to store a shopping list in an array. paste the following code into the console: let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles']; shopping; in the above example, each element is a string, but in an array we can store various data types — strings, numbers, objects, and even other arrays. we can also mix data types in a single array — we do not have to limit ourselves to storing only numbers i...
...array, and in another only strings. for example: let sequence = [1, 1, 2, 3, 5, 8, 13]; let random = ['tree', 795, [0, 1, 2]]; before proceeding, create a few example arrays. accessing and modifying array items you can then access individual items in the array using bracket notation, in the same way that you accessed the letters in a string. ...
...e proceeding, create a few example arrays. accessing and modifying array items you can then access individual items in the array using bracket notation, in the same way that you accessed the letters in a string. enter the following into your console: shopping[0]; // returns "bread" you can also modify an item in an array by simply giving a single array item a new value. try this: shopping[0] = 'tahini'; shopping; // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ] note: we've said it before, but just as a reminder — computers start counting from 0! note that an array inside an array is called a multidimensional array. you can access an item inside an array that is itself inside another array by chaining two sets of square brackets together. for ...
...And 3 more matches

TypeScript support in Svelte - Learn web development
e to fully take advantage of typescript features. 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. objective: learn how to configure and use typescript when developing svelte applications. note that our application is fully functional and porting it to typescript is completely optional. there are different opinions about it, and in this chapter we will talk briefly about the pros and cons of using typescript. even if you are not planning to adopt it, this article will be useful for allowing you to learn what it has to offer and help you make your own dec...
...lte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/07-typescript-support or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/07-typescript-support remember to run npm install && npm run dev to start your app in development mode. repl unfortunately, typescript support is not yet available in the repl. typescript: optional static typing for javascript typescript is a superset of javascript that provides features such as optional static typing, classes, interfaces, and generics. the goal of typescript is to help catch mistakes early through its type system and make javascript development more efficient. one of the big benefits is enabling ides to provide a richer environment for spotting common errors as you type the code. best...
...is the 7th most used and 5th fastest growing language used on github. according to stackoverflow's 2019 developer survey it is the third most loved language, right behind rust and python. so typescript is going through a great phase of adoption. typescript's main advantages are: early spotted bugs: the compiler checks types at compile time and provides error reporting. readability: static typing gives the code more structure, making it self-documenting and more readable. rich ide support: type information allows code editors and ides to offer features like code navigation, autocompletion, and smarter hints. safer refactoring: types allows ides to know more about your code, and assist you while refactoring large portions of your code base. type inference: enables you to take advantage ...
...And 3 more matches

HTTP Cache
ove) any intermediate cache data held in memory for faster access (more about the intermediate cache below) nsiloadcontextinfo distinguishes the scope of the storage demanded to open. mandatory argument to *storage methods of nsicachestorageservice. ...
...pports reading a cache entry data while it is still being written by the first consumer - the writer. this can only be engaged for resumable responses that (bug 960902) don't need revalidation. reason is that when the writer is interrupted (by e.g. external canceling of the loading channel) concurrent readers would not be able to reach the remaning unread content. this could be improved by keeping the network load running and being stored to the cache entry even after the writing channel has been canceled. when the writer is interrupted, the first concurrent reader in line does a range request for the rest of the data - and becomes that way a new writer. the rest of the readers are still concurrently reading the content since output stream for the cache entry is again open and kept by th...
...y by this new one and handles it as a new one. the writer then (in this order) fills the necessary meta data of the cache entry, opens the output stream on it and calls metadataready on it. any other pending openers, if any, are now given this new entry to examine and read as an existing entry. adding a new storage should there be a need to add a new distinct storage for which the current scoping model would not be sufficient - use one of the two following ways: [preffered] add a new <your>storage method on nsicachestorageservice and if needed give it any arguments to specify the storage scope even more. implementation only should need to enhance the context key generation and parsing code and enhance current - or create new when needed - nsicachestorage implementations to carry any a...
...And 3 more matches

Localizing without a specialized tool
mpare-locales to do the comparison between your locale's files and the en-us reference. first, install compare-locales. you can follow more detailed guidelines on compare-locale's page, but running the following command from the command line should be enough: $ sudo easy_install -u compare-locales to start, be sure to open your command line interface and change your directory to where you are keeping your localization files, the en-us sources $ cd /path/to/your/working/directory now, you will need run compare locales. to do this, enter the following commands, keeping sure to change "x-testing" to the actual locale code of your locale. $ compare-locales mozilla-1.9.2/browser/locales/l10n.ini l10n-mozilla-1.9.2 x-testing for convenience, try saving the output of this command to a text file o...
...m of the list of search engines that appears, you'll see, "manage search engines...". to start, make sure you are in /path/to/your/working/directory/l10n-mozilla-1.9.2/x-testing and then, type the command mkdir /browser/chrome/browser now, step back out to the broader directory that contains both your l10n base (l10n-mozilla-1.9.2) and the en-us source code (mozilla-1.9.2). ...
...-mozilla-1.9.2/x-testing and then, type the command mkdir /browser/chrome/browser now, step back out to the broader directory that contains both your l10n base (l10n-mozilla-1.9.2) and the en-us source code (mozilla-1.9.2). you can do this by typing: cd ../../ where each ".." represents the prior sub directory before the main directory where you want to be. you can always check the path by typing pwd once you are in the root working directory with both en-us source and the l10n base, copy the searchbar.dtd file by typing cp mozilla-1.9.2/browser/locales/chrome/browser/searchbar.dtd l10n-mozilla-1.9.2/x-testing/browser/chrome/browser/ open the file in your x-testing directory and translate the words inside the quotation marks. be sure to only translate what is in the quotation marks. for...
...And 3 more matches

NSS Sample Code Sample1
nss sample code 1: key generation and transport between servers. this is an example program that demonstrates how to do key generation and transport between cooperating servers. ...
...pair generation naming rsa key pairs looking up a previously generated key pair by name creating aes and mac keys (or encryption and mac keys in general) wrapping symmetric keys using your own rsa key pair so that they can be stored on disk or in a database. as an alternative to token symmetric keys as a way to store large numbers of symmetric keys wrapping symmetric keys using an rsa key from another server unwrapping keys using your own rsa key pair the main part of the program shows a typical sequence of events for two servers that are trying to extablish a shared key pair. we will add message protection (encryption and macing) examples to this program in the future. sample code #include <iostream.h> #include "pk11pub.h" #include "keyhi.h...
...rates a buffer with the result. // - the application sends or uses the result (possibly // after base64 encoding it. // // server - an instance of a server that is part of a // cluster of servers that are sharing a common set // of encryption and macing keys. // class server { public: // initializes the server instance. in particular, this // creates the key pair that is used for wrapping keys int init(); // generates keys for encryption (aes) and macing. the // wrapped keys are stored in data files. int generatekeys(); // 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 //...
...And 3 more matches

Web Replay
the last time a breakpoint was set. it is the opposite of the normal button for playing forward. seek to console messages errors and logged messages in the console developer tool can be clicked on to cause the tab to seek to the point in the recording where the error was generated or the message was logged. the tab will pause at this point and allow state to be inspected, forward/reverse stepping, and so forth. timeline the timeline is shown above the developer tools and provides several features to help with navigating the recording: the timeline changes color depending on whether the tab is currently recording (red) or replaying (blue). the current position within the recording is shown on the timeline with a progress indicator. console error/messages are marked on the timeline a...
...ated and write-protected, and as faults occur a special exception handler thread unprotects the memory, copies its contents and marks it as dirty. when the next snapshot is taken, only the dirty memory is examined for any changes vs. the copy made. ...
... all snapshots are taken from the main thread. ...
...And 3 more matches

PaymentResponse.retry() - Web APIs
the paymentresponse interface's retry() method makes it possible to ask the user to retry a payment after an error occurs during processing. this lets your app gracefully deal with situations such as invalid shipping addresses or declined credit cards. syntax retrypromise = paymentrequest.retry(errorfields); parameters errorfields a paymentvalidationerrors object, with the following properties: error optional a general description of a payment error from which the user may attempt to recover by retrying the payment, possibly after correcting mistakes in the payment information. error can be provided all by itself to provide only a generic error message, or in concert with the other properties to serve as an overview while other properties' values gude the user to errors in sp...
... object which provides appropriate error messages for any of the fields describing the payer which failed validation. paymentmethod optional any payment method specific errors which may have occurred. this object's contents will vary depending on the payment used. for example, if the user chose to pay by credit card using the basic-card payment method, this is a basiccarderrors object. shippingaddress optional an addresserrors object which contains error messages for any of the fields in the shipping address that failed validation. return value a promise which is resolved when the payment is successfully completed. the promise is rejected with an appropriate exception value if the payment fails again. typically you will use this by calling show(), then entering a loop or recursi...
...uest(methoddata, details, options); const response = await request.show(); await recursivevalidate(request, response); await response.complete("success"); } // keep validating until the data looks good! ...
...And 3 more matches

Writing WebSocket servers - Web APIs
e client whether the server supports websockets. this is important because security issues might arise if the server accepts a websockets connection but interprets the data as a http request. so if the key was "dghlihnhbxbszsbub25jzq==", the sec-websocket-accept header's value is "s3pplmbitxaq9kygzzhzrbk+xoo=". ...
...s a http request. so if the key was "dghlihnhbxbszsbub25jzq==", the sec-websocket-accept header's value is "s3pplmbitxaq9kygzzhzrbk+xoo=". once the server sends these headers, the handshake is complete and you can start swapping data! note: the server can send other headers like set-cookie, or ask for authentication or redirects via other status codes, before sending the reply handshake. keeping track of clients this doesn't directly relate to the websocket protocol, but it's worth mentioning here: your server must keep track of clients' sockets so you don't keep handshaking again with clients who have already completed the handshake. the same client ip address can try to connect multiple times. however, the server can deny them if they attempt too many connections in order to save itse...
...(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 (opcode=0x1), but the entire message has not arrived yet (fin=0). all remaining parts of that message are sent with continuation frames (opcode=0x0), and the final frame of the message is marked by fin=1. section 5.4 of the spec describes message fragmentation. ...
...And 3 more matches

scroll-snap-stop - CSS: Cascading Style Sheets
of this element's scroll container is scrolled, it may "pass over" possible snap positions. always the scroll container must not "pass over" a possible snap position; and must snap to the first of this elements' snap positions. formal definition initial valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | always examples snapping in different axes this example is duplicated from scroll-snap-type with minor variances. css /* setup */ :root, body { height: 100%; display: flex; align-items: center; justify-content: space-between; flex-flow: column nowrap; font-family: monospace; } .container { display: flex; overflow: auto; outline: 1px dashed lightgray; flex: none; } .container.x { width: 100%; h...
...: center; justify-content: space-between; flex-flow: column nowrap; font-family: monospace; } .container { display: flex; overflow: auto; outline: 1px dashed lightgray; flex: none; } .container.x { width: 100%; height: 128px; flex-flow: row nowrap; } .container.y { width: 256px; height: 256px; flex-flow: column nowrap; } /* definite scroll snap */ .mandatory-scroll-snapping > div { scroll-snap-stop: always; } .proximity-scroll-snapping > div { scroll-snap-stop: normal; } /* scroll-snap */ .x.mandatory-scroll-snapping { scroll-snap-type: x mandatory; } .y.mandatory-scroll-snapping { scroll-snap-type: y mandatory; } .x.proximity-scroll-snapping { scroll-snap-type: x proximity; } .y.proximity-scroll-snapping { scroll-snap-type: y proximity; } .container...
...ltr</div> <div>2</div> <div>3</div> <div>4</div> ...
...And 3 more matches

<input type="range"> - HTML: Hypertext Markup Language
ing set to the maximum. additional attributes in addition to the attributes shared by all <input> elements, range inputs offer the following attributes: attribute description list the id of the <datalist> element that contains optional pre-defined options max the maximum permitted value min the minimum permitted value step the stepping interval, used both for user interface and validation purposes list the values of the list attribute is the id of a <datalist> element located in the same document. the <datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the type are not included in the suggested options. the values provided are suggest...
...tion. if a value is specified for min that isn't a valid number, the input has no minimum value. this value must be less than or equal to the value of the max attribute. see the html min attribute. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. ...
... attribute. see the html min attribute. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid. a string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max). ...
...And 3 more matches

Cross-Origin Resource Sharing (CORS) - HTTP
request by the options method to the resource on the other domain, to determine if the actual request is safe to send. cross-site requests are preflighted like this since they may have implications to user data. the following is an example of a request that will be preflighted: const xhr = new xmlhttprequest(); xhr.open('post', 'https://bar.other/resources/post-here/'); xhr.setrequestheader('x-pingother', 'pingpong'); xhr.setrequestheader('content-type', 'application/xml'); xhr.onreadystatechange = handler; xhr.send('<person><name>arun</name></person>'); the example above creates an xml body to send with the post request. also, a non-standard http x-pingother request header is set. such headers are not part of http/1.1, but are generally useful to web applications. since the request uses ...
...t/response: options /doc http/1.1 host: bar.other user-agent: mozilla/5.0 (macintosh; intel mac os x 10.14; rv:71.0) gecko/20100101 firefox/71.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip,deflate connection: keep-alive origin: http://foo.example access-control-request-method: post access-control-request-headers: x-pingother, content-type http/1.1 204 no content date: mon, 01 dec 2008 01:15:39 gmt server: apache/2 access-control-allow-origin: https://foo.example access-control-allow-methods: post, get, options access-control-allow-headers: x-pingother, content-type access-control-max-age: 86400 vary: accept-encoding, origin keep-alive: timeout=2, max=100 connection: keep-alive once the preflight request is c...
...timeout=2, max=100 connection: keep-alive once the preflight request is complete, the real request is sent: post /doc http/1.1 host: bar.other user-agent: mozilla/5.0 (macintosh; intel mac os x 10.14; rv:71.0) gecko/20100101 firefox/71.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip,deflate connection: keep-alive x-pingother: pingpong content-type: text/xml; charset=utf-8 referer: https://foo.example/examples/preflightinvocation.html content-length: 55 origin: https://foo.example pragma: no-cache cache-control: no-cache <person><name>arun</name></person> http/1.1 200 ok date: mon, 01 dec 2008 01:15:40 gmt server: apache/2 access-control-allow-origin: https://foo.example vary: accept-encoding, origin content-e...
...And 3 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
f firefox 3 hacks (o'reilly japan, 2008). before you learn how to develop extensions, let's learn about xul, the xml-based user-interface language, which is one of the building blocks for extensions. introduction an overview of xul xul is an xml-based language, and was developed to be the gui markup language for the mozilla browser. there are earlier experiments going back a long way in developing user interfaces using a combination of html and scripting languages, and xul could be considered an evolutionary step from that. similar approaches are found in xaml, which is used in windows vista, and flex, which is used in adobe flash. like web pages, which display the same regardless of platform, applications marked up in xul will work the same in any environment where firefox runs. because ...
... with all the source code examples from: fixme: attache the translated tarball - paul task !. xul display methods xul is used almost exclusively in mozilla applications like firefox and thunderbird, and extensions for them, but other web browsers based on firefox or the gecko engine, and even web-based content also used xul. for example, there is the mozilla amazon browser, which helps with shopping at amazon, and the presentation method in xul, a tool for writing and displaying presentations to try out the code samples in this chapter, save them as text files with .xul extensions and drag and drop them into the firefox browser window. fixme: explain how setting this option and use next listings if we want to run firefox displaying none of its gui and only the contents of a certain xul fi...
...pplication that can open any web page, this could give a script on a web page access to an xul document's frame, creating a dangerous opening for personal information to leak out. in the interests of security, you can enforce access restrictions by declaring type="content" on a browser element. when you do this, any web page that gets opened will see itself as the topmost frame. if you are developing an application with an interface that can open web pages, i recommend that you always use this declaration to limit access to the parent frame. in certain circumstances, you may want to declare type="content-primary". a browser element with this declaration is treated as a special browser among other xul documents, such that the window object displaying its web page can be accessed using the win...
...And 2 more matches

MMgc - Archive of obsolete content
builds, mmgc writes "poison" into deallocated memory as a debugging aid. here's what the different poison values mean: 0xfafafafa uninitialized unmanaged memory 0xedededed unmanaged memory that was freed explicitly 0xbabababa managed memory that was freed by the sweep phase of the garbage collector 0xcacacaca managed memory that was freed by an explicit call to gc::free (including drc reaping) 0xdeadbeef this is written to the 4 bytes just after any object allocated via mmgc. it is used for overwrite detection. 0xfbfbfbfb a block given back to the heap manager is memset to this (fb == free block). finalizers if your c++ class is a subclass of gcfinalizedobject or rcfinalizedobject, it has finalizer support. a finalizer is a method which will be invoked by the gc when an unreach...
...ese destroyed objects. if you get a crash dereferencing a pointer to a gc object, and the pointer was a member variable in an unmanaged (non-gc) object, check whether the unmanaged object is a gcroot. if it isn't, maybe it needs to be. finding missing write barriers there are some automatic aids in the mmgc library which can help you find missing write barriers. look in mmgc/gc.cpp. // before sweeping we check for missing write barriers bool gc::incrementalvalidation = false; // check for missing write barriers at every alloc bool gc::incrementalvalidationpedantic = false; if you suspect you have missing write barriers, turn these switches on in a debug build. (the second switch will slow your application down a lot more than the first switch, so you could try the first, then the second.) wh...
...sh>600 300 gc.swf</gflash> one pass the mark sweep algorithm described above decomposes into clearmarks/mark/finalize/sweep. in our original implementation clearmarks/finalize/sweep visited every gc page and every object on that page. 3 passes! now we have one pass where marks are cleared during sweep so clear marks isn't needed at the start. also finalize builds up a lists of pages that need sweeping so sweep doesn't need to visit every page. this has been shown to cut the finalize/sweep pause in half (which happens back to back atomically). overall this wasn't a huge performance increase due to the fact the majority of our time is spent in the mark phase. conservative collection mmgc is a conservative mark/sweep collector. conservative means that it may not reclaim all of the memory that it ...
...And 2 more matches

E4X for templating - Archive of obsolete content
ds a few common purpose functions (especially along with the convenience of javascript 1.8 expression closures), the templates can function more dynamically, offering the power and readability of templating languages such as smarty for php (though admittedly without the currently wider cross-browser support of xslt or the strictly-xml approach of phptal or seethrough templating). ...
...he simple xmllist() constructor (<></>) may be useful to still be able to use an expression closure (i.e., without needing return statements and braces): {_if(elems.length(), function () <> <markup/> <markup/> </>)} note that, while it is convenient to store such e4x in separate file templates (to be eval()d at a later time, taking into account security considerations, such as escaping with the above), e4x content using such functions can also be easily serialized inline (and then perhaps converted to the dom) as needed: var list = <>{_if(elems.length(), function () <> <markup/> <markup/> </>)}</>.toxmlstring(); iterating functions such as the following foreach (which can work with arrays, objects, or e4x objects) are quite convenient in iterating over complex ...
...if the input is an htmlcollection, an array of strings, an array of dom objects, or an array of e4x objects (assuming the comparison function is changed or adapted accordingly). ...
...And 2 more matches

XForms Select1 Element - Archive of obsolete content
troduction allows the user to choose a single value from a list of pre-defined values (see the spec). the list of pre-defined items can be specified by either item (see the spec) or itemset (see the spec) elements. you can visually group these pre-defined items by using the choices (see the spec) element to contain them. note, some representations of the select1 element do not support visual grouping. attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control. accesskey - used to specify the keyboard shortcut for focusing this control. single-node binding special selection - this attribute, when set to 'open', allows the user to provide free entry to the list. possible values are o...
...epresented by the following widgets for the specified appearance attribute values: combobox - default representation (xhtml/xul) listbox - used when appearance = 'compact' (xhtml/xul) radio group - used when appearance = 'full' (xhtml/xul) combobox displaying a combobox is the default representation (xhtml/xul). ...
...loses focus), otherwise it is updated upon item selection listbox the select1 is represented as listbox (xhtml/xul). ...
...And 2 more matches

UI pseudo-classes - Learn web development
to fix this we style the parent <div> to become a flex container, but also tell it to wrap its contents onto new lines if the content becomes too long: fieldset > div { margin-bottom: 20px; display: flex; flex-flow: row wrap; } the effect this has is that the label and input sit on separate lines be...
...ed on, typed into, etc. a disabled element on the other hand cannot be interacted with in any way, and its data isn't even sent to the server these two states can be targeted using :enabled and :disabled. why are disabled inputs useful? well, sometimes if some data does not apply to a certain user, you might not even want to submit that data when they submit the form. a classic example is a shipping form — commonly you'll get asked if you want to use the same address for billing and shipping; if so, you can just send a single address to the server, and might as well just disable the billing address fields. let's have a look at an example that does just this. first of all, the html is a simple form containing text inputs, plus a checkbox to toggle disabling the billing address on and off. ...
...ing and shipping; if so, you can just send a single address to the server, and might as well just disable the billing address fields. let's have a look at an example that does just this. first of all, the html is a simple form containing text inputs, plus a checkbox to toggle disabling the billing address on and off. the billing address fields are disabled by default. ...
...And 2 more matches

HTML text fundamentals - Learn web development
ss to given text content. among the various techniques used, they provide an outline of the document by reading out the headings, allowing their users to find the information they need quickly. if headings are not available, they will be forced to listen to the whole document read out loud. to style content with css, or make it do interesting things with javascript, you need to have elements wrapping the relevant content, so css/javascript can effectively target it. we therefore need to give our content structural markup. active learning: giving our content structure let's jump straight in with a live example. in the example below, add elements to the raw text in the input field so that it appears as a heading and two paragraphs in the output field. if you make a mistake, you can always ...
...any extra meaning. (you'll find out more about these later on in the course.) we've applied some css to it to make it look like a top level heading, but since it has no semantic value, it will not get any of the extra benefits described above. it is a good idea to use the relevant html element for the job. lists now let's turn our attention to lists. ...
...fe—from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! lists are everywhere on the web, too, and we've got three different types to worry about. unordered unordered lists are used to mark up lists of items for which the order of the items doesn't matter—let's take a shopping list as an example. milk eggs bread hummus every unordered list starts off with a <ul> element—this wraps around all the list items: <ul> milk eggs bread hummus </ul> the last step is to wrap each list item in a <li> (list item) element: <ul> <li>milk</li> <li>eggs</li> <li>bread</li> <li>hummus</li> </ul> active learning: marking up an unordered list try editing the live sample ...
...And 2 more matches

Creating localizable web applications
listed below are good practices and recommendations that should be followed in order to make your content easily localizable. note: most of the code snippets used in the examples below come from an early version of the getpersonas.com website. in some cases, the code snippets were slightly changed to better illustrate the recommendations or for clarity. cheatsheet don't hardcode english text, formats (numbers, dates, addresses, etc.), word order or sentence structure. don't put text or numbers in images. don't forget about right-to-left locales. take advantage of printf() (or equivalents) and use variables in the english strings. ...
...nformation directly from the url. after that, it is tempting to use the $category or $tab variables in the interface. however, this is problematic for localization. you probably don't want to localize the urls to keep them uniform across locales as well as to avoid issues with non-latin and/or rtl characters. so in order to display a localized label of a category or a tab, you should create a mapping between the non-localizable english names used in the urls and the localizable english strings used in the interface. consider the following example: snippet 1. good: $tab_labels = array( "popular" => _('popular'), "recent" => _('recent'), "all" => _('all'), "my" => _('my'), "favorites" => _('favorites') ...
...at localizable using the information returned by localeconv() in php. snippet 1. bad: printf(_("%s mb>"), $size); snippet 2. good: function num_format($num, $decimals) { $locale_info = localeconv(); return number_format($num, $decimals, $locale_info['decimal_point'], $locale_info['thousands_sep']); } printf(_("%s mb"), num_format($size, 1)); wrap as few html tags as possible when wrapping the localizable content with the gettext function calls, put all the code that irrelevant to localization outside the function call. snippet 1. bad: <?= _("<a href=\"https://addons.mozilla.org/firefox/downloads/latest/10900\" class=\"get-personas\" id=\"download\"><span>get personas for firefox - free</span>");?><span class="arrow"></span></a> snippet 2. good: <a href="https://addons.mozilla...
...And 2 more matches

Index
eal future state" for the engine. that means the code as it is today won't match this document, and that's ok. whenever practical, new code and changes should move code closer to the ideal future. and of course, the idea of the future is always evolving in time as things change and we learn more. 6 gc rooting guide spidermonkey no summary! 7 gcintegration developing mozilla, firefox, garbage collection, intermediate, intro, jsapi, needsupdate, spidermonkey, tools, memory the spidermonkey garbage collector (gc) will be changing a lot in the future. this page is intended to explain the changes that are happening, with a focus on how they will affect gecko code that uses jsapi. at a high level, there are three issues to be aware of: 8 getting s...
... spidermonkey js_forget_string_flatness converts jsflatstring * to jsstring *. 268 js_fs jsapi reference, spidermonkey use these macros to define an array of jsfunctionspecs to pass to js_definefunctions or js_initclass. 269 js_fileescapedstring jsapi reference, reference, référence(2), spidermonkey js_fileescapedstring writes str into file fp escaping any non-printable or non-ascii character. if quote is not 0, it must be a single or double quote character that will quote the output. 270 js_finish jsapi reference, obsolete, spidermonkey js_finish is obsolete. use js_destroyruntime instead. 271 js_flattenstring jsapi, jsapi reference, reference, référence(2), spidermonkey js_flattenstring flattens a s...
...tions can be used. 428 js_pusharguments jsapi reference, obsolete, spidermonkey js_pusharguments provides a convenient way to translate a series of native c/c++ values to jsvals with a single function call. 429 js_putescapedstring jsapi reference, reference, référence(2), spidermonkey js_putescapedstring and js_putescapedstring write str into buffer escaping any non-printable or non-ascii character using \escapes for js string literals. guarantees that a nul is at the end of the buffer unless size is 0. returns the length of the written output, not including the nul. thus, a return value of size or more means that the output was truncated. if buffer is null, just returns the length of the output. if quote is not 0, it must be a single or double quote...
...And 2 more matches

Index
same pattern as the c++ protocols. 40 mailnews fakeserver mailnews, seamonkey, thunderbird fakeserver is a testing server that implements a generic text-based protocol common to all major mailnews protocols (pop, imap, smtp, and nntp) designed for use in automated tests. it can also be used in manual qa tests. 41 mailnews xpcshell-tests automated testing, developing mozilla, mailnews, seamonkey, thunderbird mailnews xpcshell-tests are written and run in the same manner as the core xpcshell-tests. this page describes additional resources and facilities that mailnews has developed to support the xpcshell-tests; see the core xpcshell-tests page for more information on how to develop these. 42 mailbox mailnews the mailbox protocol is u...
...essage list interfaces thunderbird no summary! 50 spam filtering seth spitzer the mozilla implement is based on paul graham's a plan for spam. training data is global across all mail accounts within a profile training data is stored in a binary format, in a file named "training.dat". initially, the training.dat file is empty (there was discussion of shipping with a default file) on spam detection, the user can choose to move spam to a special "junk" folder the user can configure junk mail can be automatically purged from the "junk" folder to analyze a message for spam, we need the entire message, not just the headers. spam detection happens after filters are run white listing happens after filters, but before spam detection the purg...
...pt in this step we will create a small piece of javascript code that inserts the current date into our statusbar widget. the statusbar is usually displayed at the bottom of the thunderbird window. depending on the installed theme the result will look something like this: 80 building a thunderbird extension 7: installation extensions, thunderbird while you are developing the extension, there are two ways you can make thunderbird load it so you can test it as you go. you can either put the folder with the extension files directly into thunderbird's extensions folder, or you can put a file there that tells thunderbird where your extension is located. (in step 8 you will learn how to package an .xpi file for distribution and installation.) 81 building a t...
...And 2 more matches

The JavaScript input interpreter - Firefox Developer Tools
al time using the interpreter provided by the web console. it has two modes: single-line entry and multi-line entry. single-line mode for single-line entry, you can type javascript expressions in the field at the bottom of the console log, at the >> prompt. to enter expressions in single-line mode, type at the prompt and press enter. to enter multi-line expressions, press shift+enter after typing each line, then enter to run all the entered lines. the expression you type is echoed under the input prompt, followed by the result. if your input does not appear to be complete when you press enter, then the console treats this as shift+enter , enabling you to finish your input. for example, if you type: function foo() { and then enter, the console does not immediately execute the input, b...
... console autocomplete suggestions are case-insensitive. the console suggests completions from the scope of the currently executing stack frame. this means that if you've hit a breakpoint in a function you get autocomplete for objects local to the function. you get autocomplete suggestions for array elements, as well: you can enable or disable autocom...
...onsole toolbar. the menuitem enable autocompletion has a checkmark next to it when the feature is enabled, which is missing when it is disabled. select the menuitem to change the state. instant evaluation this feature is available in firefox nightly, in versions labeled 74 and later. when the "instant evaluation" feature is enabled, the interpreter displays results of expressions as you're typing them in single-line mode. note that the result might be an error message. expressions that have side effects are not evaluated. you can enable or disable instant evaluation via the settings ("gear") menu in the web console toolbar. the menuitem instant evaluation has a checkmark next to it when the feature is enabled, which is missing when it is disabled. select the menuitem to change the state.
...And 2 more matches

BasicCardRequest - Web APIs
the first of these three (supportedinstruments in the example below) contains a data property that has to conform to the structure defined by the basiccardrequest dictionary. var supportedinstruments = [{ supportedmethods: 'basic-card', data: { supportednetworks: ['vis...
... following example, the paymentrequest() constructor is used to create a new payment request, which takes three objects as parameters — one containing details of the payment methods that can be used for the payment, one containing details of the actual order (such as items bought and shipping options), and an optional object that describes what data is needed to fullfil the payment (e.g., a shipping address). the first of these three (supportedinstruments in the example below) contains a data property that has to conform to the structure defined by the basiccardrequest dictionary. var supportedinstruments = [{ supportedmethods: 'basic-card', data: { supportednetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'] } }]; va...
... // call show() to trigger the browser's payment flow. request.show().then(function(inst...
...And 2 more matches

HTML Drag and Drop API - Web APIs
atatransferitemlist interfaces have limited browser support. see interoperability for more information about drag-and-drop interoperability. gecko-specific interfaces mozilla and firefox support some features not in the standard drag-and-drop model. these are convenience functions to help with dragging multiple items or non-string data (such as files). for more information, see dragging and dropping multiple items. additionally, see the datatransfer reference page for all of the gecko-specific properties and gecko-specific methods. the basics this section is a summary of the basic steps to add drag-and-drop functionality to an application. identify what is draggable making an element draggable requires adding the draggable attribute and the ondragstart global event handler, as shown in t...
...drop locations. during the drag operation, drag effects may be modified to indicate that certain effects are allowed at certain locations. the following example shows how to use this property. function dragstart_handler(ev) { ev.datatransfer.dropeffect = "copy"; } for more details, see: drag effects define a drop zone by default, the browser prevents anything from happening when dropping something onto most html elements. to change that behavior so that an element becomes a drop zone or is droppable, the element must have both ondragover and ondrop event handler attributes. the following example shows how to use those attributes, and includes basic event handlers for each attribute. <script> function dragover_handler(ev) { ev.preventdefault(); ev.datatransfer.dropeffect = "mo...
...op interoperability is relatively broad among desktop browsers (except the datatransferitem and datatransferitemlist interfaces have less support). this data also indicates drag-and-drop support among mobile browsers is very low. ...
...And 2 more matches

Using server-sent events - Web APIs
you'll need a bit of code on the server to stream events to the front-end, but the client side code works almost identically to websockets in part of handling incoming events. this is one-way connection, so you can't send events from a client to a server. receiving events from the server the server-sent event api is contained in the eventsource interface; to open a connection to the server to begin receiving events from it, create a new eventsource object with the url of a script that generates the events. ...
...entlist = document.getelementbyid("list"); newelement.innerhtml = "message: " + event.data; eventlist.appendchild(newelement); } this code listens for incoming messages (that is, notices from the server that do not have an event field on them) and appends the message text to a list in the document's html. ...
...listens for incoming messages (that is, notices from the server that do not have an event field on them) and appends the message text to a list in the document's html. you can also listen for events with addeventlistener(): evtsource.addeventlistener("ping", function(event) { const newelement = document.createelement("li"); const time = json.parse(event.data).time; newelement.innerhtml = "ping at " + time; eventlist.appendchild(newelement); }); this code is similar, except that it will be called automatically whenever the server sends a message with the event field set to "ping"; it then parses the json in the data field and outputs that information. when not used over http/2, sse suffers from a limitation to the maximum number of open connections, which can be especially painful...
...And 2 more matches

WebGLRenderingContext.depthRange() - Web APIs
clamped to the range 0 to 1. the default value is 1. return value none. ...
...clamped to the range 0 to 1. the default value is 1. return value none. ...
...clamped to the range 0 to 1. the default value is 1. return value none. ...
...And 2 more matches

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
phic techniques are used, since the viewer has likely grown up watching films using those techniques, and has subconscious expectations that a film or animation will follow those methods. deviating from them can pull the viewer out of the moment. in business applications, the 3d camera is used to simply set the apparent size and perspective when rendering things such as graphs and charts. in mapping applications, the camera may either be placed directly over the scene, or might use various angles to show perspective. for 3d gps solutions, the camera is positioned to show the area around the user, with the majority of the display showing the area ahead of the user's path of motion. when using webgl to accelerate 2d graphics drawing, the camera is typically placed directly above the center of...
... fov smaller reduces the arc that will be included in the viewport, thus enlarging that content when rendered to the view. there are differences between this and an optical zoom effect, but the result is generally close enough to get the job done. ...
...r converting the fov angle, fovdegrees, from degrees to radians and computing the aspect ratio of the xrviewport specified by the viewport parameter, this function uses the glmatrix library's mat4.perspective() function to compute the perspective matrix. ...
...And 2 more matches

Logical properties for floating and positioning - CSS: Cascading Style Sheets
they assume a horizontal writing-mode, with a left-to-right direction. ...
...they assume a horizontal writing-mode, with a left-to-right direction. ...
...set-inline-start left inset-inline-end right inset-block-start top inset-block-end bottom text-align: start text-align: left text-align: end text-align: right in addition to these mapped properties there are some additional shorthand properties made possible by being able to address block and inline dimensions. these have no mapping to physical properties, aside from the inset property. logical property purpose inset-inline sets both of the above inset values for the inline dimension simultaneously. inset-block sets both of the above inset values for the block dimension simultaneously. inset sets all four inset values simultaneously with physical mapping of multi-value. ...
...And 2 more matches

scroll-snap-type - CSS: Cascading Style Sheets
l container snaps to snap positions in its horizontal axis only. y the scroll container snaps to snap positions in its vertical axis only. block the scroll container snaps to snap positions in its block axis only. inline the scroll container snaps to snap positions in its inline axis only. both the scroll container snaps to snap positions in both of its axes independently (potentially snapping to different elements in each axis). mandatory the visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled. that means it snaps on that point when the scroll action finished, if possible. if content is added, moved, deleted or resized the scroll offset will be adjusted to maintain the resting on that snap point. proximity the visual viewport of this s...
...crolled considering the user agent's scroll parameters. if content is added, moved, deleted or resized the scroll offset may be adjusted to maintain the resting on that snap point. formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | [ x | y | block | inline | both ] [ mandatory | proximity ]? examples snapping in different axes html <div class="holster"> <div class="container x mandatory-scroll-snapping" dir="ltr"> <div>x mand. ltr</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="container x proximity-scroll-snapping" dir="ltr"> <div>x prox. ltr</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="container y mandatory-scroll-s...
... different axes html <div class="holster"> <div class="container x mandatory-scroll-snapping" dir="ltr"> <div>x mand. ltr</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="container x proximity-scroll-snapping" dir="ltr"> <div>x prox. ltr</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="container y mandatory-scroll-snapping" dir="ltr"> <div>y mand. ltr</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="container y proximity-scroll-snapping" dir="ltr"> <div>y prox. ltr</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="container x mandatory-scroll-snapping" dir="rtl"> <div>x mand. rtl</div> <div>2</div> <div>3</div> <div>4</div> <div>...
...And 2 more matches

<input type="date"> - HTML: Hypertext Markup Language
pe is date, and sets its value to 2017-06-01 (june 1st, 2017). it then reads that value back in string and number formats. additional attributes along with the attributes common to all <input> elements, date inputs have the following attributes: attribute description max the latest acceptable date min the earliest acceptable date step the stepping interval, when clicking up and down spinner buttons and validating the date max the latest date to accept. if the value entered into the element occurs afterward, the element fails constraint validation. if the value of the max attribute isn't a possible date string in the format yyyy-mm-dd, then the element has no maximum date value. if both the max and min attributes are set, this valu...
...he format yyyy-mm-dd, then the element has no minimum date value. if both the max and min attributes are set, this value must be a date string earlier than or equal to the one in the max attribute. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. ...
... equal to the one in the max attribute. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid. a string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max). note: when the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options. for date inputs, the value of step is given in days; and is treated as a number of...
...And 2 more matches

<input type="datetime-local"> - HTML: Hypertext Markup Language
an do it manually. for example, the date.toisostring() method can be used for this purpose. additional attributes in addition to the attributes common to all <input> elements, datetime-local inputs offer the following attributes: attribute description max the latest date and time to accept min the earliest date and time to accept step the stepping interval to use for this input, such as when clicking arrows on spinner controls or performing validation max the latest date and time to accept. if the value entered into the element is later than this timestamp, the element fails constraint validation. if the value of the max attribute isn't a valid string which follows the format yyyy-mm-ddthh:mm, then the element has no maximum value.
...valid string which follows the format yyyy-mm-ddthh:mm, then the element has no minimum value. this value must specify a date string earlier than or equal to the one specified by the max attribute. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. ...
...the one specified by the max attribute. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid. a string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max). note: when the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options. for datetime-local inputs, the value of step is given in seconds, with a scaling f...
...And 2 more matches

<input type="number"> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...the <datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the type are not included in the suggested options. t...
...directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. ...
...And 2 more matches

<input type="week"> - HTML: Hypertext Markup Language
if the value entered into the element exceeds this, the element fails constraint validation. if the value of the max attribute isn't a valid week string, then the eleme...
... directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. ...
...the readonly attribute also specified. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid. a string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max). note: when the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options. for week inputs, the value of step is given in weeks, with a scaling factor of 604...
...And 2 more matches

<xsl:number> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:number> element counts things sequentially. it can also be used to quickly format a number. syntax <xsl:number count=expression level="single" | "multiple" | "any" from=expression value=expression format=format-string lang=xml:lang-code letter-value="alphabetic" | "traditional" grouping-separator=character grouping-size=number /> required attributes none. optional attributes count specifies what in the source tree should be numbered sequentially. it uses an xpath expression. level defines how levels of the source tree should be considered in generating sequential numbers. it has three valid values: single, multiple, and any. the default value is single: sin...
...of the source tree should be considered in generating sequential numbers. it has three valid values: single, multiple, and any. the default value is single: single numbers sibling nodes sequentially, as in the items in a list. the processor goes to the first node in the ancestor-or-self axis that matches the count attribute and then counts that node plus all its preceding siblings (stopping when it reaches a match to the from attribute, if there is one) that also match the count attribute.if no match is found, the sequence will be an empty list. multiple numbers nodes as a composite sequence that reflects the hierarchic position of the node, e.g. 1.2.2.5. (the nested format can be specified with the format attribute, e.g. a.1.1). the processor looks at all ancestors o...
...here is one) that also match the count attribute.if no match is found, the sequence will be an empty list. multiple numbers nodes as a composite sequence that reflects the hierarchic position of the node, e.g. 1.2.2.5. (the nested format can be specified with the format attribute, e.g. a.1.1). the processor looks at all ancestors of the current node and the current node itself, stopping when it reaches a match for the from attribute, if there is one. for each node in this list that matches the count attribute, the processor counts how many preceding matching siblings it has, and adds one for the node itself. if no match is found, the sequence will be an empty list. any (not supported at this time.) numbers all matching nodes, regardless of level, sequentially. the...
...And 2 more matches

ui/sidebar - Archive of obsolete content
s a simple but complete add-on that shows how to set up communication between main.js and a script in a sidebar, in the case where the sidebar script initiates communication: the html file includes just a script, "sidebar.js": <!doctype html> <html> <body> content for my sidebar <script type="text/javascript" src="sidebar.js"></script> </body> </html> the "sidebar.js" file sends a ping message to main.js using port.emit() as soon as it loads, and adds a listener to the pong message. addon.port.emit("ping"); addon.port.on("pong", function() { console.log("sidebar script got the reply"); }); the "main.js" file creates a sidebar object and adds a listener to its attach event. on attach, "main.js" starts listening to the ping message, and responds with a pong: var sidebar = r...
...r script got the reply"); }); the "main.js" file creates a sidebar object and adds a listener to its attach event. on attach, "main.js" starts listening to the ping message, and responds with a pong: var sidebar = require("sdk/ui/sidebar").sidebar({ id: 'my-sidebar', title: 'my sidebar', url: require("sdk/self").data.url("sidebar.html"), onattach: function (worker) { worker.port.on("ping", function() { console.log("add-on script got the message"); worker.port.emit("pong"); }); } }); try running the add-on, and showing the sidebar using the "view->sidebar->my sidebar" menu item. you should see console output like: console.log: add-on: add-on script got the message console.log: add-on: sidebar script got the reply using ready the ready event is emitted when t...
...ple but complete add-on that shows how to set up communication between main.js and a script in a sidebar, in the case where the main.js script initiates communication: the html file includes just a script, "sidebar.js": <!doctype html> <html> <body> content for my sidebar <script type="text/javascript" src="sidebar.js"></script> </body> </html> the "sidebar.js" file listens to the ping message from main.js, and responds with a pong message. addon.port.on("ping", function() { console.log("sidebar script got the message"); addon.port.emit("pong"); }); the "main.js" file creates a sidebar object and adds a listener to its attach event. on attach, "main.js" sends the ping message, and starts listening for the pong: var sidebar = require("sdk/ui/sidebar").sidebar({ id: 'my-...
...); addon.port.emit("pong"); }); the "main.js" file creates a sidebar object and adds a listener to its attach event. on attach, "main.js" sends the ping message, and starts listening for the pong: var sidebar = require("sdk/ui/sidebar").sidebar({ id: 'my-sidebar', title: 'my sidebar', url: require("sdk/self").data.url("sidebar.html"), onready: function (worker) { worker.port.emit("ping"); worker.port.on("pong", function() { console.log("add-on script got the reply"); }); } }); try running the add-on, and showing the sidebar using the "view->sidebar->my sidebar" menu item. you should see console output like: console.log: add-on: sidebar script got the message console.log: add-on: add-on script got the reply globals constructors sidebar(options) creates a...

StringView - Archive of obsolete content
/* both the source and the new stringview have a fixed-length encoding... */ awhole = new ftaview(noutptlen); for (var noutptidx = 0; noutptidx < noutptlen; awhole[noutptidx] = vsource[nstartidx + noutptidx++]); break conversionswitch; case 1: /* the source has a fixed-length encoding but the new stringview has a variable-length encoding... */ /* mapping... */ noutptlen = 0; for (var ninptidx = nstartidx; ninptidx < nendidx; ninptidx++) { noutptlen += fgetoutptchrsize(vsource[ninptidx]); } awhole = new ftaview(noutptlen); /* transcription of the source... */ for (var ninptidx = nstartidx, noutptidx = 0; noutptidx < noutptlen; ninptidx++) { noutptidx = fputoutptcode(awhole, v...
...en); /* transcription of the source... */ for (var ninptidx = nstartidx, noutptidx = 0; noutptidx < noutptlen; ninptidx++) { noutptidx = fputoutptcode(awhole, vsource[ninptidx], noutptidx); } break conversionswitch; case 2: /* the source has a variable-length encoding but the new stringview has a fixed-length encoding... */ /* mapping... */ nstartidx = 0; var nchrcode; for (nchridx = 0; nchridx < ncharstart; nchridx++) { nchrcode = fgetinptchrcode(vsource, nstartidx); nstartidx += fgetinptchrsize(nchrcode); } awhole = new ftaview(noutptlen); /* transcription of the source... */ for (var ninptidx = nstartidx, noutptidx = 0; noutptidx < noutptlen; ...
...urce... */ for (var ninptidx = nstartidx, noutptidx = 0; noutptidx < noutptlen; ninptidx += fgetinptchrsize(nchrcode), noutptidx++) { nchrcode = fgetinptchrcode(vsource, ninptidx); awhole[noutptidx] = nchrcode; } break conversionswitch; case 3: /* both the source and the new stringview have a variable-length encoding... */ /* mapping... */ noutptlen = 0; var nchrcode; for (var nchridx = 0, ninptidx = 0; nchridx < ncharend; ninptidx += fgetinptchrsize(nchrcode)) { nchrcode = fgetinptchrcode(vsource, ninptidx); if (nchridx === ncharstart) { nstartidx = ninptidx; } if (++nchridx > ncharstart) { noutptlen += fgetoutptchrsize(nchrcode); } } awhole = new ftav...
...ch; case 4: /* domstring to ascii or binarystring or other unknown encodings */ awhole = new ftaview(noutptlen); /* transcription... */ for (var nidx = 0; nidx < noutptlen; nidx++) { awhole[nidx] = vsource.charcodeat(nidx) & 0xff; } break conversionswitch; case 5: /* domstring to utf-8 or to utf-16 */ /* mapping... */ noutptlen = 0; for (var nmapidx = 0; nmapidx < ninptlen; nmapidx++) { if (nmapidx === ncharstart) { nstartidx = noutptlen; } noutptlen += fgetoutptchrsize(vsource.charcodeat(nmapidx)); if (nmapidx === ncharend) { nendidx = noutptlen; } } awhole = new ftaview(noutptlen); /* transcription... */ for (var noutpti...

Layout System Overview - Archive of obsolete content
out disconcerting flicker or other artifacts that might bother the user. consider a text entry field: the user types text into a form on the web. as the user types a new character it is inserted into the content model. this causes layout to be notified that a new piece of content has been entered, which causes layout to create a new frame and format it. ...
... this causes layout to be notified that a new piece of content has been entered, which causes layout to create a new frame and format it. this must happen very fast, so the user's typing is not delayed. in the case of the wysiwyg html editor, the user expects that the modifications they make to the document will appear immediately, not seconds later. this is especially critical when the user is typing into the document: it would be quite unusable if typing a character at the end of a document in the html editor caused the entire document to be reformatted - it would be too slow, at least on low-end machines. thus the html editor and text controls put considerable performance requirements on the layout system's handling of dynamic content manipulation. the fundamentals of frames: block and line...
... frame manager is responsible for making frames available to clients. there are several collections of frames maintained by the frame manager. the most basic is a list of all of the frames starting at the root frame. clients generally do not want to incur the expense of traversing all of the frames from the root to find the frame they are interested in, so the frame manager provides some other mappings based on the needs of the clients. the most crucial mapping is the primary frame map. this collection provides access to a frame that is designated as the primary frame for a piece of content. when a frame is created for a piece of content, it may be the 'primary frame' for that content element (content elements that require multiple frames have primary and secondary frames; only the primary fra...
... primary frame map. this collection provides access to a frame that is designated as the primary frame for a piece of content. when a frame is created for a piece of content, it may be the 'primary frame' for that content element (content elements that require multiple frames have primary and secondary frames; only the primary frame is mapped). the frame manager is then instructed to store the mapping from a content element to the primary frame. this mapping facilitates updates to frames that result in changes to content (see discussion above). another important mapping maintained by the frame manager is that of the undisplayed content. when a content element is defined as having no display (via the css property 'display:none') it is noted by a special entry in the undisplayed map. this is imp...

URIs and URLs - Archive of obsolete content
resource a resource can be anything that has identity. familiar examples include an electronic document, an image, a service (e.g., "today's weather report for los angeles"), and a collection of other resources. not all resources are network "retrievable"; e.g., human beings, corporations, and bound books in a library can also be considered resources. the resource is the conceptual mapping to an entity or set of entities, not necessarily the entity which corresponds to that mapping at any particular instance in time. thus, a resource can remain constant even when its content---the entities to which it currently corresponds---changes over time, provided that the conceptual mapping is not changed in the process. identifier an identifier is an object that can act as a refe...
...me://username:password@host:port/directory/filebasename.fileextension;param?query#ref for performance reasons the complete spec is stored in escaped form in the nsstandardurl object with pointers (position and length) to each basic segment and for the more global segments like path and prehost for example. necko provides pre written urlparsers for schemes based on hierachical naming systems. escaping to be able to parse an url safely it is sometimes necessary to "escape" certain characters, to hide them from the parser. an escaped character is encoded as a character triplet, consisting of the percent character "%" followed by the two hexadecimal digits representing the octet code. for example, "%20" is the escaped encoding for the us-ascii space character. another quote from rfc 2396: a uri...
...metimes necessary to "escape" certain characters, to hide them from the parser. an escaped character is encoded as a character triplet, consisting of the percent character "%" followed by the two hexadecimal digits representing the octet code. for example, "%20" is the escaped encoding for the us-ascii space character. ...
...ary to "escape" certain characters, to hide them from the parser. an escaped character is encoded as a character triplet, consisting of the percent character "%" followed by the two hexadecimal digits representing the octet code. for example, "%20" is the escaped encoding for the us-ascii space character. another quote from rfc 2396: a uri is always in an "escaped" form, since escaping or unescaping a completed uri might change its semantics. normally, the only time escape encodings can safely be made is when the uri is being created from its component parts; each component may have its own set of characters that are reserved, so only the mechanism responsible for generating or interpreting that component can determine whether or not escaping a character will change its semantics. likewise, ...

Using the Editor from XUL - Archive of obsolete content
itorshell.init(); editorshell.seteditortype(editortype); editorshell.webshellwindow = window; editorshell.contentwindow = window._content; the webshellwindow (a settable attribute on nsieditorshell) points to the top-level window element, from which the editorshell can get the xul document in which it is living. it needs this to poke the ui (e.g. for command state maintenance, starting and stopping the throbber etc.). the contentwindow (another settable attribute on nsieditorshell) points to the xul element which is to become editable. note: since we already know this when we have an <editor></editor> tag, we should remove the need to call this. editorstartup() does some other minor bits of setup before finally kicking off the url load, which the most important part here. ...
...orshell::preparedocumentforediting(), we install a mouse listener. this only happens for situations where the nseditorshell is used (i.e. not for text widgets): nseditorshellmouselistener (as a nsidommouselistener) note: starting in gecko 12, the editor refuses any events sent by unprivileged content. nstexteditorkeylistener this event listener handles key presses for typing, and other editing operations (backspace, delete, enter/return). cases that it does not handle explicitly it passes on to nshtmleditor::editorkeypress(), which is where normal typing keys end up. note that it only responds to the keypress event; keydown and keyup events are ignored. nstexteditormouselistener the mouse listener is used to do middle-mouse paste (which is a unix copy/paste feature...
...:typedtext(), which simply calls nshtmleditor::inserttext(). nshtmleditor::inserttext() hides quite a bit of complexity in some stack-based classes. nsautoplaceholderbatch is a utility class that wraps text insertion with calls to turn off selection and layout updating (to avoid flicker), and the maintenance of a placeholder transaction. this placeholder transaction enables us to batch typing events together, so that an undo undoes the whole series of keystrokes. another stack-based class, nsautorules, ensures that text insertion is wrapped with calls to nshtmleditor::startoperation() / endoperation(). these functions call beforeedit() and afteredit() on the current typing rules. now, we initialize a nstextrulesinfo with the information about the string being inserted, and call ...
...tion of inserting text differs between the different rules (plain text vs. html, for example), it is handled entirely by the rules code, in the willdoaction()call. in composer, we are using nshtmleditrules, so we end up in nshtmleditrules::willdoaction(). for text insertion, this drops into nshtmleditrules::willinserttext(). this code first deletes the selection if there is one (e.g. you are typing over selected text), then calls a generic pre-insertion call willinsert(), which sets up inline styles for the inserted text, and moves the selection to an appropriate place where the text is to be inserted. now we are ready to actually insert the text. recall that we're going through a generic inserttext() call, so this code deals with pasting long strings, as well as inserting single charact...

Anatomy of a video game - Game development
b standards like javascript lend themselves as tools. experienced game programmers who are new to web development could also benefit, too. present, accept, interpret, calculate, repeat the goal of every video game is to present the user(s) with a situation, accept their input, interpret those signals into actions, and calculate a new situation resulting from those acts. games are constantly looping through these stages, over and over, until some end condition occurs (such as winning, losing, or exiting to go to bed). not surprisingly, this pattern corresponds to how a game engine is programmed. the specifics depend on the game. some games drive this cycle by user input. imagine that you are developing a "find the differences between these two similar pictures"-type game. these games prese...
...ain loop and immediately queue it for the next frame. it will not be attached to any object and main (or main() for methods) will be a valid unused name in the rest of the application, free to be defined as something else. note: in practice, it is more common to prevent the next requestanimationframe() with an if-statement, rather than calling cancelanimationframe(). for the second issue, stopping the main loop, you will need to cancel the call to main() with window.cancelanimationframe(). you will need to pass cancelanimationframe() the id token given by requestanimationframe() when it was last called. let us assume that your game's functions and variables are built on a namespace that you called mygame. expanding our last example, the main loop would now look like: /* * starting with th...
...art a new frame (while the previous frame is handled by the display). go through the list of requestanimationframe callbacks and invoke them. perform garbage collection and other per-frame tasks when the above callbacks stop controlling the main thread. sleep (unless an event interrupts the browser's nap) until the monitor is ready for your image (vsync) and repeat. you can think about developing realtime applications as having a budget of time to do work. all of the above steps must take place every 16-and-a-half milliseconds to keep up with a 60 hz display. browsers invoke your code as early as possible to give it maximum computation time. your main thread will often start workloads that are not even on the main thread (such as rasterization or shaders in webgl). long calculations can b...
...s lose visual quality to keep the game running at optimal speed (eventually it outright fails, if quality becomes too low.) other ways to handle variable refresh rate needs other methods of tackling the problem exist. one common technique is to update the simulation at a constant frequency and then draw as much (or as little) of the actual frames as possible. the update method can continue looping without care about what the user sees. the draw method can view the last update and when it happened. since draw knows when it represents, and the simulation time for the last update, it can predict a plausible frame to draw for the user. it does not matter whether this is more frequent than the official update loop (or even less frequent). the update method sets checkpoints and, as frequently as...

Building up a basic demo with the PlayCanvas engine - Game development
an impressive list of features — let's see some in action. we will try putting together a simple demo first — a cube rendered on the screen. if you have already worked through our building up a basic demo with three.js article (or you are familiar with other 3d libraries) you'll notice that playcanvas works on similar concepts: camera, light and objects. environment setup to start developing with playcanvas, you don't need much. you should start off by: making sure you are using a modern browser with good webgl support, such as the latest firefox or chrome. creating a directory to store your experiments in. saving a copy of the latest playcanvas engine inside your directory. opening the playcanvas documentation in a separate tab — it is useful to refer to. html structure h...
...ire available viewport space. the first <script> element includes the playcanvas library in the page; we will write our example code in the second one. there is one helper variable already included, which will store a reference to the <canvas> element. before reading on, copy this code to a new text file and save it in your working directory as index.html. playcanvas application to begin developing our game we have to create the playcanvas application first (using the given <canvas> element), and then start the update loop. add the following code to the bottom of your second <script> element: var app = new pc.application(canvas); app.start(); the pc global object contains all the playcanvas functions available in the engine. next, we'll set the canvas to fill the window, and automatical...
...then the material is created, given a gray color, and assigned to the cone entity. here's how it should look right now: this works, but it is a bit boring. in a game something is usually happening — we can see animations and such — so let's try to breathe a little life into those shapes by animating them. animation we already used translate or rotate to adjust the position...
...time*20 on the y axis and deltatime*30 on the z axis, on very frame — giving us a smooth animation. scaling we can also scale a given object — there's a function for that called setlocalscale. add the following, again into the callback: cylinder.setlocalscale(1, math.abs(math.sin(timer)), 1); here we are using math.sin to scale the cylinder in a cycle, bigger and smaller again. we're wrapping the y scale value in math.abs to pass the absolute values (greater or equal to 0); sin varies between -1 and 0, and for negative values the cylinder scaling can render unexpectedly (in this case it looks black half the time.) now onto the movement part. moving beside rotation and scaling we can also move objects around the scene. add the following code to achieve that. cone.setposition(2, mat...

Round Trip Time (RTT) - MDN Web Docs Glossary: Definitions of Web-related terms
round trip time (rtt) is the length time it takes for a data packet to be sent to a destination plus the time it takes for an acknowledgment of that packet to be received back at the origin. the rtt between a network and server can be determined by using the ping command. ...
... round trip time (rtt) is the length time it takes for a data packet to be sent to a destination plus the time it takes for an acknowledgment of that packet to be received back at the origin. the rtt between a network and server can be determined by using the ping command. ...
... round trip time (rtt) is the length time it takes for a data packet to be sent to a destination plus the time it takes for an acknowledgment of that packet to be received back at the origin. the rtt between a network and server can be determined by using the ping command. ...
... $ ping example.com ping example.com (216.58.194.174): 56 data bytes 64 bytes from 216.58.194.174: icmp_seq=0 ttl=55 time=25.050 ms 64 bytes from 216.58.194.174: icmp_seq=1 ttl=55 time=23.781 ms 64 bytes from 216.58.194.174: icmp_seq=2 ttl=55 time=24.287 ms 64 bytes from 216.58.194.174: icmp_seq=3 ttl=55 time=34.904 ms 64 bytes from 216.58.194.174: icmp_seq=4 ttl=55 time=26.119 ms --- google.com ping statistics --- 5 packets transmitted, 5 packets received, 0.0% packet loss round-trip min/avg/max/stddev = 23.781/26.828/34.904/4.114 ms in the above example, the average round trip time is shown on the final line as 26.8ms. see also time to first byte (ttfb) latency ...

How do you make sure your website works properly? - Learn web development
.org or browser add-ons like yslow can tell you a few interesting things: grades go from a to f. our page is just small and meets most criteria. but we can already note it would have been better to use a cdn. that doesn't matter very much when we're only serving one image, but it would be critical for a high-bandwidth website serving many thousands of images. ...
...all and meets most criteria. but we can already note it would have been better to use a cdn. that doesn't matter very much when we're only serving one image, but it would be critical for a high-bandwidth website serving many thousands of images. ...
...t criteria. but we can already note it would have been better to use a cdn. that doesn't matter very much when we're only serving one image, but it would be critical for a high-bandwidth website serving many thousands of images. ...
...you provide and tells you if the server's responding or not: $ ping mozilla.org ping mozilla.org (63.245.215.20): 56 data bytes 64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms 64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms 64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms 64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms ^c --- mozilla.org ping statistics --- 4 packets transmitted, 4 packets received, 0.0% packet loss round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms just keep in mind a handy keyboard shortcut: ctrl+c. ctrl+c sends an “interrupt” signal to the runtime and tells it to stop. if you don't stop the runtime, ping will ping the server indefinitely. a simple checklist check for 404s make sure all web...

Document and website structure - Learn web development
tions that you should try to understand: <main> is for content unique to this page. use <main> only once per page, and put it directly inside <body>. ideally this shouldn't be nested within other elements. <article> encloses a block of related content that makes sense on its own without the rest of the page (e.g., a single blog post). <section> is similar to <article>, but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and summaries). it's considered best practice to begin each section with a heading; also note that you can break <article>s up into different <section>s, or <section>s up into different <article>s, depending on the context. <aside> contains content that is not di...
...ide extra direction for the director of the play; it is not supposed to have extra semantic meaning. for sighted users, css would perhaps be used to distance the note slightly from the main text. <div> is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning. for example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site: <div class="shopping-cart"> <h2>shopping cart</h2> <ul> <li> <p><a href=""><strong>silver earrings</strong></a>: $99.95.</p> <img src="../products/3333-0985/thumb.png" alt="silver earrings"> </li> <li> ... </li> </ul> <p>total cost: $237.89</p> </div> this ...
...he code, the markup renders like this: <hr> elements create a horizontal rule in the document that denotes a thematic change in the text (such as a change in topic or scene). visually it just looks like a horizontal line. as an example: <p>ron was backed into a corner by the marauding netherbeasts. scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p> <hr> <p>meanwhile, harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. he read it hazily and sighed; "better get back to work then", he mused.</p> would render like this: planning a simple website ...
...e to make a site about? note: save your work somewhere; you might need it later on. test your skills! you've reached the end of this article, but can you remember the most important information? you can find a detailed assessment that tests these skills at the end of the module; see structuring a page of content. we'd advise going through the next article in the series first and not just skipping to it though! summary at this point you should have a better idea about how to structure a web page/site. in the last article of this module, we'll study how to debug html. ...

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
nterval() both use the same list of entries to clear from. interestingly enough, this means that you can use either method to clear a settimeout() or setinterval(). for consistency, you should use cleartimeout() to clear settimeout() entries and clearinterval() to clear setinterval() entries. this will help to avoid confusion. requestanimationframe() requestanimationframe() is a specialized looping function created for running animations efficiently in the browser. it is basically the modern version of setinterval() — it executes a specified block of code before the browser next repaints the display, allowing an animation to be run at a suitable frame rate regardless of the environment it is being run in. it was created in response to perceived problems with setinterval(), which for exam...
...ependent on your animation's frame rate and it is measured in frames per second (fps). the higher this number is, the smoother your animation will look, to a point. since most screens have a refresh rate of 60hz, the fastest frame rate you can aim for is 60 frames per second (fps) when working with web browsers. however, more frames means more processing, which can often cause stuttering and skipping — also known as dropping frames, or jank. if you have a monitor with a 60hz refresh rate and you want to achieve 60 fps you have about 16.7 milliseconds (1000 / 60) to execute your animation code to render each frame. this is a reminder that you'll need to be mindful of the amount of code that you try to run during each pass through the animation loop. requestanimationframe() always tries to ...
...ame() call clearing a requestanimationframe() call can be done by calling the corresponding cancelanimationframe() method. (note that the function name starts with "cancel", not "clear" as with the "set..." methods.) just pass it the value returned by the requestanimationframe() call to cancel, which you stored in the variable raf: cancelanimationframe(raf); active learning: starting and stopping our spinner in this exercise, we'd like you to test out the cancelanimationframe() method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page. some hints: a click event handler can be added to most elements, including the document <body>. it makes more sense to put it on the <body> element if yo...
... next, display the results paragraph and set its text content to "players go!!" to signal to the players that they can now press their button to win. attach a keydown event listener to the document. when any button is pressed...

Making decisions in your code — conditionals - Learn web development
is much easier to read the code and work out what is going on if you use the curly braces to delimit the blocks of code, and use multiple lines and indentation. a real example to understand this syntax better, let's consider a real example. imagine a child being asked for help with a chore by their mother or father. the parent might say "hey sweetheart! if you help me by going and doing the shopping, i'll give you some extra allowance so you can afford that toy you wanted." in javascript, we could represent this like so: let shoppingdone = false; if (shoppingdone === true) { let childsallowance = 10; } else { let childsallowance = 5; } this code as shown always results in the shoppingdone variable returning false, meaning disappointment for our poor child. it'd be up to us to provide ...
...u can afford that toy you wanted." in javascript, we could represent this like so: let shoppingdone = false; if (shoppingdone === true) { let childsallowance = 10; } else { let childsallowance = 5; } this code as shown always results in the shoppingdone variable returning false, meaning disappointment for our poor child. it'd be up to us to provide a mechanism for the parent to set the shoppingdone variable to true if the child did the shopping. note: you can see a more complete version of this example on github (also see it running live.) else if the last example provided us with two choices, or outcomes — but what if we want more than two? there is a way to chain on extra choices/outcomes to your if...else — using else if. each extra choice requires an additional block to pu...
...else it is perfectly ok to put one if...else statement inside another one — to nest them. for example, we could update our weather forecast application to show a further set of choices depending on what the temperature is: if (choic...
...else it is perfectly ok to put one if...else statement inside another one — to nest them. for example, we could update our weather forecast application to show a further set of choices depending on what the temperature is: if (choice === 'sunny') { if (temp...

A first splash into JavaScript - Learn web development
function in our code that creates an alert whenever we call it. note: you'll learn a lot more about functions later in the course. operators javascript operators allow us to perform tests, do math, join strings together, and other such things. if you haven't already done so, save your code, refresh the page in your browser, and open the developer tools javascript console. then we can try typing in the examples shown below — type in each one from the "example" columns exactly as shown, pressing return/enter after each one, and see what results they return. first let's look at arithmetic operators, for example: operator name example + addition 6 + 9 - subtraction 20 - 15 * multiplication 3 * 7 / division 10...
... a small discussion on objects let's add one more final improvement before we get to this discussion. add the following line just below the let resetbutton; line near the top of your javascript, then save your file: guessfield.focus(); this line uses the focus() method to automatically put the text cursor into the <input> text field as soon as the page loads, meaning that the user can start typing their first guess right away, without having to click the form field first. it's only a small addition, but it improves usability — giving the user a good visual clue as to what they've got to do to play the game. let's analyze what's going on here in a bit more detail. in javascript, most of the items you will manipulate in your code are objects. an object is a collection of related functiona...
...y, without having to click the form field first. it's only a small addition, but it improves usability — giving the user a good visual clue as to what they've got to do to play the game. let's analyze what's going on here in a bit more detail. in javascript, most of the items you will manipulate in your code are objects. an object is a collection of related functionality stored in a single grouping. you can create your own objects, but that is quite advanced and we won't be covering it until much later in the course. for now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things. in this particular case, we first created a guessfield constant that stores a reference to the text input form field in our html — the following ...
...tains an <input> element. you'll also notice that the console autocompletes the names of objects that exist inside the execution environment, including your variables! now type in the following: guessfield.value = 'hello'; the value property represents the current value entered into the text field. you'll see that by entering this command, we've changed the text in the text field! now try typing guesses into the console and pressing return. the console shows you that the variable contains a <p> element. now try entering the following line: guesses.value the browser returns undefined, because paragraphs don't have the value property. to change the text inside a paragraph, you need the textcontent property instead. try this: guesses.textcontent = 'where is my paragraph?'; now fo...

Server-side web frameworks - Learn web development
istinct urls. handling these all in one function would be hard to maintain, so web frameworks provide simple mechanisms to map url patterns to specific handler functions. this approach also has benefits in terms of maintenance, because you can change the url used to deliver a particular feature without having to change the underlying code. different frameworks use different mechanisms for the mapping. for example, the flask (python) web framework adds routes to view functions using a decorator. @app.route("/") def hello(): return "hello world!" while django expects developers to define a list of url mappings between a url pattern and a view function. urlpatterns = [ url(r'^$', views.index), # example: /best/myteamname/5/ url(r'^best/(?p<team_name>\w.+?)/(?p<team_number>[0-9...
...ny information about the underlying database as that is a configuration setting that may be changed separately of our code. the first code snippet below shows a very simple django model for a team object. this stores the team name and team level as character fields and specifies a maximum number of characters to be stored for each record. the team_level is a choice field, so we also provide a mapping between choices to be displayed and data to be stored, along with a default value. #best/models.py from django.db import models class team(models.model): team_name = models.charfield(max_length=40) team_levels = ( ('u09', 'under 09s'), ('u10', 'under 10s'), ('u11', 'under 11s'), ... #list our other teams ) team_level = models.charfield(max_len...
...t it is not always enabled by default. there are many other possible factors, including licensing, whether or not the framework is under active development, etc. if you're an absolute beginner at programming then you'll probably choose your framework based on "ease of learning". in addition to "ease of use" of the language itself, high quality documentation/tutorials and an active community helping new users are your most valuable resources. we've chosen django (python) and express (node/javascript) 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) c...
...tive community? a few good web frameworks? let's now move on, and discuss a few specific server-side web frameworks. the server-side frameworks below represent a few of the most popular available at the time of writing. all of them have everything you need to be productive — they are open source, are under active development, have enthusiastic communities creating documentation and helping users on discussion boards, and are used in large numbers of high-profile websites. there are many other great server-side frameworks that you can discover using a basic internet search. note: descriptions come (partially) from the framework websites! django (python) django is a high-level python web framework that encourages rapid development and clean, pragmatic design. built by experienc...

Handling common JavaScript problems - Learn web development
runner to automate testing tools in a later article.) see eslint integrations for eslint options; jshint is supported out of the box by grunt, and also has other integrations available, e.g. jshint loader for webpack. note: eslint takes a bit more setup and configuration than jshint, but it is more powerful too. browser developer tools browser developer tools have many useful features for helping to debug javascript. for a start, the javascript console will report errors in your code. make a local copy of our broken-ajax.html example (see the source code also). if you look at the console, you'll see the error message "uncaught typeerror: can't access property "length", heroes is undefined", and the referenced line number is 49. if we look at the source code, the relevant code section is...
... for example start to manipulate streams of raw video and audio data. these are available in ie10 and above, and all modern browsers. there are also many new apis appearing in recent browsers, which don't work in older browsers, for example: indexeddb api, web storage api, and others for storing website data on the client-side. web workers api for running javascript in a separate thread, helping to improve performance. webgl api for real 3d graphics. web audio api for advanced audio manipulation. webrtc api for multi-person, real-time video/audio connectivity (e.g. video conferencing). there are a few strategies for handling incompatibilities between browsers relating to feature support; let's explore the most common ones. note: these strategies do not exist in separate silos — ...
... for such libraries, like installing them as bower components, or including them as dependencies via the webpack module bundler. you will have to read the libraries' individual install pages for more information. note: you will also come across javascript frameworks in your travels around the web, like ember and angular. whereas libraries are often usable for solving individual problems and dropping into existing sites, frameworks tend to be more along the lines of complete solutions for developing complex web applications. polyfills polyfills also consist of 3rd party javascript files that you can drop into your project, but they differ from libraries — whereas libraries tend to enhance existing functionality and make things easier, polyfills provide functionality that doesn't exist at...
...cause cross browser issues. if you insist on using prefixed features, make sure you use the right ones. you can look up what browsers require prefixes for different javascript/api features on mdn reference pages, and sites like caniuse.com. if you are unsure, you can also find out by doing some testing directly in browsers. for example, try going into your browser's developer console and start typing window.audiocontext if this feature is supported in your browser, it will autocomplete. finding help there are many other issues you'll encounter with javascript; the most important thing to know really is how to find answers online. consult the html and css article's finding help section for our best advice. summary so that's javascript. simple huh? maybe not so simple, but this article sh...

Software accessibility: Where are we today?
ces and software include: screen reading software, which speaks text displayed on the screen using hardware or software text-to-speech, and which allows a blind person to use the keyboard to simulate mouse actions alternate input devices, which allow people with physical disabilities to use alternatives to a keyboard and mouse voice recognition software, which allows a person to simulate typing on a keyboard or selecting with a mouse by speaking into the computer screen magnification software, which allows a low-vision computer user to more easily read portions of the screen comprehension software, which allows a dyslexic or learning disabled computer user to see and hear text as it is manipulated on the computer screen in fact, the entire adaptive technology industry has grown up ...
...with the support of gnome's atk apis in many of these packages, and the development of gok (gnome onscreen keyboard) and gnopernicus (screenreader and magnifier). however, these solutions are not yet truly usable for real disabled end users. ...
... there are a number of potential "gotchas" when developing xul ui. please follow the practical techniques put forth listed in the accessible xul authoring guidelines. these guidelines cover many possible scenarios. if you take a little time to learn them, they will become an unconscious improvement to your design and engineering technique. ensure correct keyboard accessibility when developing new controls: mozilla's xul and html widgets already support proper keyboard accessibility, so let's not regress in that area. make sure that every new ui control that's developed provides the correct keyboard support. follow the accessible toolkit checklist whenever using xbl to create a new widget. ...
...engineers can provide context simply by creating an nsiaccessible for each custom control. the infrastructure to do this is straightforward. ...

Eclipse CDT
n the case of the build-backend command, instructions on how to open the project will be displayed after the command completes. manual setup, and more more information can be found on the eclipse cdt manual setup page. much of that page is redundant (taken care of by the mach setup), but there is still some information there that is relevant that should make its way back here at some point. keeping the index up-to-date as the source changes from day-to-day, you'll want to update the index to keep the code assistance working well. since the compiler options used to build the source change relatively infrequently, the "build" step above doesn't need to be rerun all that often. rerun it (and then rebuild the index) once a week or so, or as necessary when you start to notice unusual code assi...
...slightly is eclipse bug 26873). alternately, you can jump to the definition of the symbol under the cursor by pressing f3. to do a c++ symbol search select "search > c/c++" from the menubar, or use ctrl-h and select the "c/c++" search tab. to quickly find the definition of an enum, class, method, etc. use ctrl-shift-t/cmd-shift-t. to get a list of autocomplete options in an editor tab, start typing the name of an identifier and then type ctrl-space. unfortunately, the autocomplete list cannot (currently) be configured to appear automatically as soon as you start typing a character that might be the start of an identifier name. to see the callers of a method (and their callers, etc.), select the method and use the context menu to select "open call hierarchy". note that there are buttons to ...
..., non-parallel, full rebuild. (see the "code assistance" section above for why.) nevertheless, if you understand the above warning and you still want to configure eclipse's "build" button to invoke a real build, then read on. basically, you want to do something similar to the steps in the initial project properties section above, but use "make -j1 -wb" (or just "make" if you don't care about keeping code assistance working) instead of using just-print-mozilla-build.py. if you want to invoke "make -f client.mk" from your source directory instead of invoking 'make' from your object directory, then in the "c/c++ build" section of the project properties, set "build command" to "make -f client.mk" and set "build directory" to just "${projdirpath}" (this is the top of the source tree). select the...
...et gdb connection timeouts. this is because eclipse is trying to push every subfolder in gdb's environment. the easiest way to resolve this issue is to remove any source entry from the debug configuration (run->open debug dialog...) in the source tab. doing so will, unfortunately, remove the binding between the binaries and the source code. to keep this feature working, you need to add a "path mapping" by clicking "add..." in the source tab. once a "path mapping" is created, select "edit..." and add an entry with these values compilation path: / local file system path: / this is the only known workaround to bind binaries to source files. it has been tested and works perfectly under eclipse europa (3.3.2) with eclipse-cdt (4.0.3). ...

SourceMap.jsm
r(rawsourcemap) the only parameter is the raw source map (either as a string which can be json.parse'd, or an object). according to the spec, source maps have the following attributes: version: which version of the source map spec this map is following. sources: an array of urls to the original source files. names: an array of identifiers that can be referenced by individual mappings. sourceroot: optional. the url root from which all sources are relative. mappings: a string of base64 vlqs which contain the actual mappings. file: the generated filename this source map is associated with. sourcemapconsumer.prototype.originalpositionfor(generatedposition) returns the original source, line, and column information for the generated source's line and column ...
...cemapgenerator represents a source map which is being built incrementally. new sourcemapgenerator(startofsourcemap) to create a new one, you must pass an object with the following properties: file: the filename of the generated source that this source map is associated with. sourceroot: an optional root for all relative urls in this source map. sourcemapgenerator.prototype.addmapping(mapping) add a single mapping from original source line and column to the generated source's line and column for this source map being created. the mapping object should have the following properties: generated: an object with the generated line and column positions. original: an object with the original line and column positions. source: the original source file (relative to t...
... sourcemapgenerator.prototype.tostring() renders the source map being generated to a string. ...
...ent: the thing to replace the pattern with. sourcenode.prototype.tostring() return the string representation of this source node. walks over the tree and concatenates all the various snippets together to one string. sourcenode.prototype.tostringwithsourcemap(startofsourcemap) returns the string representation of this tree of source nodes, plus a sourcemapgenerator which contains all the mappings between the generated and original sources. the arguments are the same as those to new sourcemapgenerator. ...

Mozilla Web Developer FAQ
ntype formats (.ttf and .otf) are supported since firefox 3.5. the fonts have to be served from the same origin (protocol, host, port) as the content that uses them unless the fonts are served with the appropriate cross-origin resource sharing http headers. downloadable fonts in the eot format are not supported. if you use downloadable fonts, please make sure the fonts have the right unicode mappings and the content uses the right unicode characters. the past practice of displaying non-latin text by assigning non-latin glyphs to latin code points breaks copying and pasting, breaks searching on the page, breaks indexing by search engines and breaks readability in browsers that do not support downloadable fonts (e.g. legacy browsers or mobile browsers that opt not to download fonts due to file...
...upport. there is a fad of serving text/html to ie but serving the same markup with no added value as application/xhtml+xml to gecko. this is usually done without a mechanism that would ensure the well-formedness of the served documents. mechanisms that ensure well-formed output include serializing from a document tree object model (eg. dom) and xslt transformations that do not disable output escaping. when xhtml output has been retrofitted to a content management system that was not designed for xml from the ground up, the system usually ends up discriminating gecko users by serving tag soup labeled as xml to gecko (leading to a parse error) and serving the same soup labeled as text/html to ie (not leading to a parse error). how is the treatment of application/xhtml+xml documents different f...
...arser (expat) is used instead of the tag soup parser. most well-formedness constraints are enforced. despite common allegations to the contrary, the document is not checked for validity. externally defined character entities other than the five pre-defined ones (&lt;, &gt;, &amp;, &quot; and &apos;) are only supported if the document references a public identifier for which there is a mapping in mozilla’s pseudo-dtd catalog and the document has not been declared standalone. in older versions of mozilla as well as in old mozilla-based products, there is no pseudo-dtd catalog and the use of externally defined character entities (other than the five pre-defined ones) leads to an xml parsing error. there are also other xhtml user agents that do not support externally defined characte...
...ags are not examined for character encoding information. tbody, head, body, and html are not inferred if the tags are not explicitly present. cdata sections are supported. xml empty element notation (<foo/>) is supported. white space characters in attribute values are normalized to spaces at parse time, so the original white space never makes it to the dom. this affects data round tripping using hidden form inputs. in versions prior to gecko 1.9/firefox 3, the document is not loaded and rendered incrementally. the layout mode is the (full) standards mode regardless of doctype. css works according to the xml+css rules. html-specific css exceptions do not apply. for example, the body element gets no special treatment. css selectors are case-sensitive. the dom i...

Research and prep
ive queries; the secondary engine should produce the best local language results and the primary/default position should produce the best global results. e-commerce search these search engines should allow users to get connected to new and used products they want to buy as quickly and painlessly as possible in a "trusted" site -- for example, choosing the most popular auction, general shopping, or classified type sites that have the desired user experience are good choices. there should be no more than two. specific interest search where users are using popular search engines to search more specific areas of interest that are very popular in your language or locale. there should be no more than two. in all cases, user experience should be taken into account and given preference...
... no more than three (if possible) choices. choosing based on popularity is fine. examples from various localizations some examples from en-us web service provider rationale global search google best user experience and broadest results. e-commerce search amazon broad set of products, simple search interface with no/limited advertising, popular shopping engine. specific interest wikipedia good user experience (no ads, simple interface), popular site. rss reader google reader popular, no advertising, simple interface. some examples from es-es web service provider rationale global search google best user experience and broadest results. e-commerce search amazon br...
...le interface), popular site. rss reader google reader popular, no advertising, simple interface. some examples from es-es web service provider rationale global search google best user experience and broadest results. e-commerce search amazon broad set of products, simple search interface with no/limited advertising, popular shopping engine. specific interest wikipedia good user experience (no ads, simple interface), popular site. rss reader google reader popular, no advertising, simple interface. some examples from wo web service provider rationale global search google best user experience and broadest results. e-commerce search amazon broad...
...imple interface), popular site. rss reader google reader popular, no advertising, simple interface. some examples from wo web service provider rationale global search google best user experience and broadest results. e-commerce search amazon broad set of products, simple search interface with no/limited advertising, popular shopping engine. specific interest wikipedia good user experience (no ads, simple interface), popular site. rss reader google reader popular, no advertising, simple interface. next » ...

Creating a Cookie Log
below to run firefox with cookie logging enabled. enabling cookie logging windows open a command prompt (this is under programs or programs/accessories in normal installations of windows). ...
... change to the installation directory for firefox, e.g. ...
... shell in mac os x 10.3 and higher; if you use something else, you probably know how to modify these instructions already). change to the installation directory for firefox, e.g. type "cd /applications/firefox.app/contents/macos" and press return. type "export nspr_log_file=~/desktop/cookie-log.txt" and press return. type "export nspr_log_modules=cookie:4" and press return. run firefox by typing "./firefox-bin" and pressing return (note that firefox will launch behind windows for other applications). creating the log now that you have firefox running with logging enabled, please try to replicate the bug using the steps to reproduce from the bug report. once you have reproduced the bug, shut down firefox. close out of the command prompt/shell/terminal, and then launch firefox normally.
...e steps to reproduce from the bug report. once you have reproduced the bug, shut down firefox. close out of the command prompt/shell/terminal, and then launch firefox normally. finally, attach the cookie-log.txt file to the bug where it was requested (by clicking on create new attachment). it should be in c:\temp on windows, your home directory on linux, or the desktop on mac os x. thanks for helping us make firefox better! original document information author(s): mike connor last updated date: december 4, 2004 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details. ...

PR_CreateFileMap
if unsuccessful, null. ...
... if unsuccessful, null. ...
...is to be mapped to memory. size size of the file specified by fd. prot protection option for read and write accesses of a file mapping. this parameter consists of one of the following options: pr_prot_readonly. read-only access. pr_prot_readwrite. readable, and write is shared. pr_prot_writecopy. readable, and write is private (copy-on-write). returns if successful, a file mapping of type prfilemap. if unsuccessful, null. ...
...copy. readable, and write is private (copy-on-write). returns if successful, a file mapping of type prfilemap. if unsuccessful, null. description the prfilemapprotect enumeration used in the prot parameter is defined as follows: typedef enum prfilemapprotect { pr_prot_readonly, pr_prot_readwrite, pr_prot_writecopy } prfilemapprotect; pr_createfilemap only prepares for the mapping a file to memory. the returned file-mapping object must be passed to pr_memmap to actually map a section of the file to memory. the file-mapping object should be closed with a pr_closefilemap call when it is no longer needed. ...

NSS_3.12_release_notes.html
til sqlite nssdbm 1 new include file is shipped with nss3.12: utilrename.h new functions in the nss shared library: cert_checknamespace (see cert.h) cert_encodecertpoliciesextension (see cert.h) cert_encodeinfoaccessextension (see cert.h) cert_encodeinhibitanyextension (see cert.h) cert_encodenoticereference (see cert.h) cert_encodepolicyconstraintsextension (see cert.h) cert_encodepolicymappingextension (see cert.h) cert_encodesubjectkeyid (see certdb/cert.h) cert_encodeusernotice (see cert.h) cert_findcrlentryreasonexten (see cert.h) cert_findcrlnumberexten (see cert.h) cert_findnameconstraintsexten (see cert.h) cert_getclassicocspdisabledpolicy (see cert.h) cert_getclassicocspenabledhardfailurepolicy (see cert.h) cert_getclassicocspenabledsoftfailurepolicy (see cert.h) cert_getpkixver...
... in pkcs11n.h, all the _netscape_ macros are renamed with _nss_ for example, cko_netscape_crl becomes cko_nss_crl. new for pkcs #11 (see pkcs11t.h for details): ckk: keys ckk_camellia ckm: me...
..._camellia_ecb ckm_camellia_cbc ckm_camellia_mac ckm_camellia_mac_general ckm_camellia_cbc_pad ckm_camellia_ecb_encrypt_data ckm_camellia_cbc_encrypt_data ckg: mfgs ckg_mgf1_sha224 new error codes (see secerr.h): sec_error_not_initialized sec_error_token_not_logged_in sec_error_ocsp_responder_cert_invalid sec_error_ocsp_bad_signature sec_error_out_of_search_limits sec_error_invalid_policy_mapping sec_error_policy_validation_failed sec_error_unknown_aia_location_type sec_error_bad_http_response sec_error_bad_ldap_response sec_error_failed_to_encode_data sec_error_bad_info_access_location sec_error_libpkix_internal new mechanism flags (see secmod.h) public_mech_aes_flag public_mech_sha256_flag public_mech_sha512_flag public_mech_camellia_flag new oids (see secoidt.h) new ec signature ...
... tls session ticket extension (off by default) ...

Hacking Tips
nspew(ionspew_codegen, "instruction %s", iter->opname()); […] masm.store16(imm32(iter->id()), address(stackpointer, -8)); // added if (!iter->accept(this)) return false; […] } this modification will add an instruction which abuse the stack pointer to store an immediate value (the lir id) to a location which would never be generated by any sane compiler. thus when dumping the assembly under gdb, this kind of instructions would be easily noticeable. viewing the mirgraph of ion/odin compilations (from gdb) with gdb instrumentation, we can call iongraph program within gdb when the execution is stopped. this instrumentation adds an iongraph command when provided with an instance of a mirgenerator*, will call iongraph, graphviz and your prefered png viewer to displa...
...zemir function has a mir argument, and the codegenerator::generatebody function has a member this->gen. (gdb) bt #0 0x00000000007eaad4 in js::inlinelist<js::jit::mbasicblock>::begin() const (this=0x33dbbc0) at …/js/src/jit/inlinelist.h:280 #1 0x00000000007cb845 in js::jit::mirgraph::begin() (this=0x33dbbc0) at …/js/src/jit/mirgraph.h:787 #2 0x0000000000837d25 in js::jit::buildphireversemapping(js::jit::mirgraph&) (graph=...) at …/js/src/jit/ionanalysis.cpp:2436 #3 0x000000000083317f in js::jit::optimizemir(js::jit::mirgenerator*) (mir=0x33dbdf0) at …/js/src/jit/ion.cpp:1570 … (gdb) frame 3 #3 0x000000000083317f in js::jit::optimizemir(js::jit::mirgenerator*) (mir=0x33dbdf0) at …/js/src/jit/ion.cpp:1570 (gdb) iongraph mir function 0 (asm.js compilation): success; 1 passes. /*...
...er gdb. one way to investigate is to let valgrind start gdb 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 optimi...
...of the script. the other way is to wrap the section that you want to measure with the datenow() function call which returns the number of milliseconds, with a decimal part for sub-milliseconds. js> datenow() - datenow() -0.0009765625 benchmarking with sub-milliseconds (browser) in a simillar way as datenow() in the js shell, you can use performance.now() in the javascript code of a page. dumping the javascript heap from the shell, you can call the dumpheap before firefox function to dump out all gc things (reachable and unreachable) that are present in the heap. by default the function writes to stdout, but a filename can be specified as an argument. example output might look as follows: 0x1234abcd b global object ========== # zone 0x56789123 # compartment http://gmail.com [in zone 0...

Querying Places
order, // which is nsinavhistoryqueryoptions.sort_by_none. let options = placesutils.history.getnewqueryoptions(); // no query parameters will return everything let query = placesutils.history.getnewquery(); // execute the query let result = placesutils.history.executequery(query, options); result types nsinavhistoryqueryoptions has a resulttype property that allows configuration of the grouping and level of detail to be returned in the results. the different values for this property are listed below. these values are also properties of nsinavhistoryqueryoptions, and are accessed like this: components.interfaces.nsinavhistoryqueryoptions.results_as_visit. results_as_uri: this is the default, and returns one result node of type result_type_uri for each uri that matches the query. the v...
...use sort_by_none (the default) since this will return items in their "natural" order as specified by the user in the bookmarks manager. other sortings will work, however. for bookmark queries you will generally want no query parameters to retrieve all items from the requested folder(s). when you specify exactly one folder and no query parameters, the system will be more efficient querying and keeping the results up-to-date since this maps to exactly one bookmark folder. // |query| and |options| are objects created in the previous section query.setparents([placesutils.bookmarks.toolbarguid], 1); let result = placesutils.history.executequery(query, options); serializing queries query and options objects can be serialized into a string starting with "place:" using queriestoquerystring. the r...
...older: // note that folder nodes are of type nsinavhistorycontainerresultnode by default, but // can be qi'd to nsinavhistoryqueryresultnode to access the query and options that // created it. dump("folder " + node.title + " id = " + node.itemid + "\n"); break; case node.result_type_separator: dump("-----------\n"); break; } the result view interface if you are mapping a result into ui, you can implement the nsinavhistoryresultviewer interface and attach it to the result with the nsinavhistoryresult.viewer attribute. this viewer will be called when the result tree changes, either as a result of user action or as a result of notifications from the bookmarks and history systems. your implementation would then reflect these changes in the ui. a prepackaged view i...
...or more information and examples. containers containers hold lists of other containers and result nodes. each result has a container representing the root of the query. it can be retrieved using the root attribute of the result. for general queries, this root container is a nsinavhistoryqueryresultnode with the query parameters and options that you supplied in the original query. for queries mapping to one bookmark folder, this will be a nsinavhistorycontainerresultnode. containers can be open or closed. this corresponds to the open and closed state in a tree view, and can also be mapped to showing and hiding menus. to get at a container's contents, you must first open the container. most container types populate themselves lazily, so opening a container actually corresponds to executing th...

nsIMsgSearchTerm
nfused with arbitraryheader, which is a header in the * rfc822 message. this is a property of the nsimsgdbhdr, and may have * nothing to do the message headers, e.g., gloda-id. * value.str will be compared with nsimsghdr::getproperty(hdrproperty). */ attribute acstring hdrproperty; customid /// identifier for a custom id used for this term, if any. ...
...h is a header in the * rfc822 message. this is a property of the nsimsgdbhdr, and may have * nothing to do the message headers, e.g., gloda-id. * value.str will be compared with nsimsghdr::getproperty(hdrproperty). */ attribute acstring hdrproperty; customid /// identifier for a custom id used for this term, if any. ...
...the * rfc822 message. this is a property of the nsimsgdbhdr, and may have * nothing to do the message headers, e.g., gloda-id. * value.str will be compared with nsimsghdr::getproperty(hdrproperty). */ attribute acstring hdrproperty; customid /// identifier for a custom id used for this term, if any. ...
...a property of the nsimsgdbhdr, and may have * nothing to do the message headers, e.g., gloda-id. * value.str will be compared with nsimsghdr::getproperty(hdrproperty). */ attribute acstring hdrproperty; customid /// identifier for a custom id used for this term, if any. ...

AudioBufferSourceNode.AudioBufferSourceNode() - Web APIs
d. detune: a value in cents to modulate the speed of audio stream rendering. its nominal range is (-∞ to +∞). the default is 0. loop: a boolean indicating whether the audio should play in a loop. the default is false. if the loop is dynamically modified during playback, the new value will take effect on the next processing block of audio. ...
...this attribute is converted to an exact sample frame offset within the buffer, by multiplying by the buffer's sample rate and rounding to the nearest integer value. ...
...ping should end if the loop attribute is true. the default is 0. its value is exclusive to the content of the loop. the sample frames, comprising the loop, run from the values loopstart to loopend-(1/samplerate). it's sensible to set this to a value between 0 and the duration of the buffer. if loopend is less than 0, looping will end at 0. if loopend is greater than the duration of the buffer, looping will end at the end of the buffer. this attribute is converted to an exact sample frame offset within the buffer, by multiplying by the buffer's sample rate and rounding to the nearest integer value. thus, its behavior is independent of the value of the playbackrate parameter. loopstart: an optional value in seconds, where looping should begin if the loop attribute is true. the default is ...
... by multiplying by the buffer's sample rate and rounding to the nearest integer value. thus, its behavior is independent of the value of the playbackrate parameter. loopstart: an optional value in seconds, where looping should begin if the loop attribute is true. the default is 0. it's sensible to set this to a value between 0 and the duration of the buffer. if loopstart is less than 0, looping will begin at 0. if loopstart is greater than the duration of the buffer, looping will begin at the end of the buffer. this attribute is converted to an exact sample frame offset within the buffer, by multiplying by the buffer's sample rate and rounding to the nearest integer value. thus, its behavior is independent of the value of the playbackrate parameter. playbackrate: the speed at which to...

BasicCardResponse - Web APIs
ecure context optional contains the billing address of the card used to make the payment. examples in the following example, the paymentrequest() constructor is used to create a new payment request, which takes three objects as parameters — one containing details of the payment methods that can be used for the payment, one containing details of the actual order (such as items bought and shipping options), and an optional object containing further options. the first of these three (supportedinstruments in the example below) contains a data property that has to conform to the structure defined by the basiccardrequest dictionary. var supportedinstruments = [{ supportedmethods: 'basic-card', data: { supportednetworks: ['visa', 'mastercard', 'amex', 'jcb', 'd...
... // call show() to trigger the browser's payment flow. request.show().then(function(inst...
... // call show() to trigger the browser's payment flow. request.show().then(function(instrumentresponse) { // do something with the response from the ui. ...
... // call show() to trigger the browser's payment flow. ...

Key Values - Web APIs
_level5_lock (0xfe13) qt::key_altgr (0x01001103 qt::key_mode_switch (0x0100117e) "capslock" the caps lock key. toggles the capital character lock on and off for subsequent input. vk_capital (0x14) kvk_capslock (0x39) gdk_key_caps_lock (0xffe5) qt::key_capslock (0x01000024) keycode_caps_lock (115) "control" the control, ctrl, or ctl key. allows typing control characters. vk_control (0x11) vk_lcontrol (0xa2) vk_rcontrol (0xa3) kvk_control (0x3b) kvk_rightcontrol (0x3e) gdk_key_control_l (0xffe3) gdk_key_control_r (0xffe4) qt::key_control (0x01000021) keycode_ctrl_left (113) keycode_ctrl_right (114) "fn" the fn (function modifier) key. used to allow generating function key (f1–f15, for instance) ...
...vk_numlock (0x90) gdk_key_num_lock (0xff7f) qt::key_numlock (0x01000025) keycode_num_lock (143) "scrolllock" [2] the scroll lock key. toggles between scrolling and cursor movement modes. vk_scroll (0x91) gdk_key_scroll_lock (0xff14) qt::key_scrolllock (0x01000026) keycode_scroll_lock (116) "shift" the shift key. modifies keystrokes to allow typing upper (or other) case letters, and to support typing punctuation and other special characters. vk_shift (0x10) vk_lshift (0xa0) vk_rshift (0xa1) kvk_shift (0x38) kvk_rightshift (0x3c) gdk_key_shift_l (0xffe1) gdk_key_shift_r (0xffe2) qt::key_shift (0x01000020) keycode_shift_left (59) keycode_shift_right (60) "super" [4] the super key. gdk...
...lecandidate (0xff3d qt::key_multiplecandidate (0x0100113d) "alphanumeric" the alphanumeric key. vk_oem_attn (0xf0) gdk_key_eisu_shift (0xff2f) gdk_key_eisu_toggle (0xff30) qt::key_eisu_shift (0x0100112f) qt::key_eisu_toggle (0x01001130) "codeinput" the code input key, which enables code input mode, which lets the user enter characters by typing their code points (their unicode character numbers, typically). gdk_key_codeinput (0xff37) qt::key_codeinput (0x01001137) "compose" the compose key. gdk_key_multi_key (0xff20) [1] qt::key_multi_key (0x01001120) "convert" [4] the convert key, which instructs the ime to convert the current input method sequence into the resulting charact...
...de is currently displayed, this button tells the guide to display the previous day's content. vk_prev_day "info" toggles the display of information about the currently selected content, program, or media. vk_info qt::key_info (0x0100011b) keycode_info (165) "instantreplay" tellls the device to perform an instant replay (typically some form of jumping back a short amount of time then playing it again, possibly but not usually in slow motion). vk_instant_replay "link" opens content liniked to the current program, if available and possible. vk_link "listprogram" lists the current program. vk_list "livecontent" toggles a display listing currently available live conte...

PaymentRequest.show() - Web APIs
yntax or the use of show().then().catch() to handle the response and any possible rejection. ...
...ion. ...
...using await to wait for a promise to be resolved makes it possible to write the code to handle payments particularly cleanly: async function processpayment() { try { const payrequest = new paymentrequest(methoddata, details, options); payrequest.onshippingaddresschange = ev => ev.updatewith(checkaddress(payrequest)); payrequest.onshippingoptionchange = ev => ev.updatewith(checkshipping(payrequest)); const repsonse = await payrequest.show(); await validateresponse(response); } catch(err) { /* handle the error; aborterror usually means a user cancellation */ } } in this code, the methods checkaddress() and checkshipping(), respectively, check the shipping address and the shipping option changes and supply in response either a paymentdetailsupdate object or a pr...
...s to the order. starting the payment process, in the end, is as simple as calling the processpayment() method. then/catch syntax you can also use the older promise-based approach to work with payments, using the then() and catch() functions on the promise returned by show(): function processspayment() { const payrequest = new paymentrequest(methoddata, details, options); payrequest.onshippingaddresschange = ev => ev.updatewith(checkaddress(payrequest)); payrequest.onshippingoptionchange = ev => ev.updatewith(checkshipping(payrequest)); payrequest.show() .then(response => validateresponse(response)) .catch(err => handleerror(err)); } this is functionally equivalent to the processpayment() method using the await syntax. function validateresponse(response) { checkallval...

PaymentRequest - Web APIs
apps accept payments from the end user on behalf of the operator of the site or the publisher of the app. constructor paymentrequest() secure context creates a new paymentrequest object. properties paymentrequest.id read only secure context an unique identifier for a particular paymentrequest, which can be set via details.id. when none is set, it defaults to a uuid. paymentrequest.shippingaddress read only secure context if requested via payment options, returns the shipping address chosen by the user for the purposes of calculating shipping. this property is only populated if the constructor is called with the requestshipping flag set to true. additionally, in some browsers, the parts of the address will be redacted for privacy until the user indicates they are ready to complete...
...ptions, returns the shipping address chosen by the user for the purposes of calculating shipping. this property is only populated if the constructor is called with the requestshipping flag set to true. additionally, in some browsers, the parts of the address will be redacted for privacy until the user indicates they are ready to complete the transaction (i.e., they hit "pay"). paymentrequest.shippingoption read only secure context returns the identifier of the selected shipping option. this property is only populated if the constructor is called with the requestshipping flag set to true. paymentrequest.shippingtype read only secure context returns the type of shipping used to fulfill the transaction. ...
... methods paymentrequest.canmakepayment() secure context indicates whether the paymentrequest object can make a payment before calling show(). ...
...hat the merchant or vendor requesting payment is legitimate. also available using the onmerchantvalidation event handler property. paymentmethodchange secure context with some payment handlers (e.g., apple pay), dispatched whenever the user changes payment instrument, like switching from a credit card to a debit card. also available using the onpaymentmethodchange event handler property. shippingaddresschange secure context dispatched whenever the user changes their shipping address. also available using the onshippingaddresschange event handler property. shippingoptionchange secure context dispatched whenever the user changes a shipping option. also available using the onshippingoptionchange event handler property. specifications specification status comment ...

Rendering and the WebXR frame animation callback - Web APIs
me rate. time available to render each frame this makes using the most of the time available between frames critical. if the user's device is using a 60 hz display, your callback will be called up to 60 times per second, and your goal is to do what you can to ensure that it doesn't get called less often than that. you achieve this by doing as much as is practicable off the main thread and by keeping your frame rendering callback as efficient as possible. the division of time into 60 hz blocks with each block being used at least in part to render the scene is shown in the diagram below. this is important because as the computer becomes increasingly busy, it may not be able to accurately call your callback every frame and may have to skip frames. this is called dropping frames. this happens...
...seconds. that is, by dividing 1 by the display's refresh rate. the resulting value is the amount of time available for each frame to be rendered in order to not drop the frame. for example, a 60 hz display has 1/60th of a second to render a single frame, or 0.0166667 seconds. and if the device's refresh rate is 120 hz, you only have 0.00883333 seconds to render each frame if you want to avoid dropping frames. even if the hardware is actually 120 hz, though, you can get by with just refreshing 60 times per second anyway, and targeting that is usually a good baseline to follow. 60 fps is already beyond the point at which most people can easily detect that the animation isn't simply a series of still images going by really fast. in other words, when in doubt, you can assume that the display is r...
...eye's image by calling the xrwebgllayer method getviewport(). we then set the webgl viewport to match, passing in the x and y origin of the viewport along with its width and height into gl.viewport(). finally, we call our method mydrawsceneintoview() to actually use webgl to render the scene. into this, we pass the xrview representing the eye we're drawing for (in order to perform perspective mapping and the like) and deltatime, so the scene drawing code can accurately represent the elapsed time when determining the positions of objects moving over time. when the loop that's iterating over the views ends, every image required to represent the scene to the viewer has been rendered, and upon return, the framebuffer makes its way through the gpu and eventually to the xr device's display or disp...
...rograms, uniforms, buffers, textures, and potentially other things once per frame instead of twice for each object found in the scene. this reduces overhead by a potentially very large margin. limiting the frame rate if you need to intentionally cap your frame rate in order to establish a baseline frame rate to try to maintain while allowing more time for other code to run, you can do so by skipping frames intentionally, on a timed basis. for example, to reduce the frame rate by 50%, just skip every other frame: let tick = 0; function drawframe(time, frame) { animationframerequestid = frame.session.requestanimationframe(drawframe); if (!(tick % 2)) { /* draw the scene */ } tick++; } this version of the frame callback maintains a tick counter. the frame is only rendered if ti...

WindowOrWorkerGlobalScope.setInterval() - Web APIs
s a conditional or ternary operator. ...
...3: typewriter simulation the following example simulates typewriter by first clearing and then slowly typing content into the nodelist that matches a specified group of selectors. ...
...= spart.slice(1); } function sheet (onode) { this.ref = onode; if (!onode.haschildnodes()) { return; } this.parts = array.prototype.slice.call(onode.childnodes); for (var nchild = 0; nchild < this.parts.length; nchild++) { onode.removechild(this.parts[nchild]); this.parts[nchild] = new sheet(this.parts[nchild]); } } var nintervid, ocurrent = null, btyping = false, bstart = true, nidx = 0, spart = "", asheets = [], amap = []; this.rate = nrate || 100; this.play = function () { if (btyping) { return; } if (bstart) { var aitems = document.queryselectorall(sselector); if (aitems.length === 0) { return; } for (var nitem = 0; nitem < aitems.length; nitem++) { asheets.push(new sheet(aitems[nitem])); /*...
... if (aitems.length === 0) { return; } for (var nitem = 0; nitem < aitems.length; nitem++) { asheets.push(new sheet(aitems[nitem])); /* uncomment the following line if you have previously hidden your elements via css: */ // aitems[nitem].style.visibility = "visible"; } bstart = false; } nintervid = setinterval(typewrite, this.rate); btyping = true; }; this.pause = function () { clearinterval(nintervid); btyping = false; }; this.terminate = function () { ocurrent.nodevalue += spart; spart = ""; for (nidx; nidx < asheets.length; scroll(asheets[nidx++], 0, false)); clean(); }; } /* usage: */ var otwexample1 = new typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): ...

-webkit-mask-composite - CSS: Cascading Style Sheets
stination-in; -webkit-mask-composite: destination-out; -webkit-mask-composite: destination-atop; -webkit-mask-composite: xor; /* global values */ -webkit-mask-composite: inherit; -webkit-mask-composite: initial; -webkit-mask-composite: unset; there is a standardized mask-composite property covering parts of this non-standard property using different keywords. syntax values clear overlapping pixels in the source mask image and the destination mask image are cleared. copy the source mask image replaces the destination mask image. source-over the source mask image is rendered over the destination mask image. source-in overlapping pixels in the source mask image and the destination mask image are replaced by the pixels of the source mask image; all other pixels are cleared. sourc...
... source mask image and the destination mask image are cleared. copy the source mask image replaces the destination mask image. source-over the source mask image is rendered over the destination mask image. source-in overlapping pixels in the source mask image and the destination mask image are replaced by the pixels of the source mask image; all other pixels are cleared. source-out overlapping pixels in the source mask image and the destination mask image are cleared; all remaining pixels of the source mask image are rendered. source-atop the pixels of the destination mask image are rendered. the pixels of the source mask image are rendered only if they overlap a nontransparent portion of the destination mask image. this causes the source mask image to have no effect. destination-ov...
...ls of the source mask image are rendered. source-atop the pixels of the destination mask image are rendered. the pixels of the source mask image are rendered only if they overlap a nontransparent portion of the destination mask image. this causes the source mask image to have no effect. destination-over the destination mask image is rendered over the source mask image. destination-in overlapping pixels in the source mask image and the destination mask image remain the pixels of the destination mask image; all other pixels are cleared. destination-out overlapping pixels in the source mask image and the destination mask image are cleared; all remaining pixels of the source mask image are rendered. destination-atop the pixels of the source mask image are rendered. the pixels of the dest...
...in the source mask image and the destination mask image are cleared; all remaining pixels of the source mask image are rendered. destination-atop the pixels of the source mask image are rendered. the pixels of the destination mask image are rendered only if they overlap a nontransparent portion of the destination mask image. this causes the destination mask image to have no effect. xor overlapping pixels in the source mask image and the destination mask image become fully transparent if they are both fully opaque. formal definition initial valuesource-overapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <composite-style>#where <composite-style> = clear | copy | source-over | source-in | source-out | source-atop | destination-over | destin...

:disabled - CSS: Cascading Style Sheets
the :disabled css pseudo-class represents any disabled element. an element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus. the element also has an enabled state, in which it can be activated or accept focus. /* selects any disabled <input> */ input:disabled { background: #ccc; } syntax :disabled examples this example shows a basic shipping form. ...
... typed into, etc.) or accept focus. the element also has an enabled state, in which it can be activated or accept focus. /* selects any disabled <input> */ input:disabled { background: #ccc; } syntax :disabled examples this example shows a basic shipping form. it uses the javascript change event to let the user enable/disable the billing fields. ...
...ccept focus. the element also has an enabled state, in which it can be activated or accept focus. /* selects any disabled <input> */ input:disabled { background: #ccc; } syntax :disabled examples this example shows a basic shipping form. it uses the javascript change event to let the user enable/disable the billing fields. ...
...the user enable/disable the billing fields. ...

CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
see e.g. tabindex html5). if you reorder things visually using grid layout, this will not change how the items are ordered if the content is being read out by a screen reader, or other text to speech user agent. in addition, the reordering will not change tab order. this means that someone navigating using the keyboard could be tabbing through links on your site and suddenly find themselves jumping from the top to the bottom of the document due to a reordered item being next in line. the specification warns authors (the csswg term for web developers) not to do this reordering. authors must use order and the grid-placement properties only for visual, not logical, reordering of content. style sheets that use these features to perform logical reordering are non-conforming. what does this ...
...g media queries to create additional columns and make changes for different screen sizes and devices. grid can be really very useful here, elements deprioritized in the mobile source order can be moved into a sidebar in a desktop layout, for example. the key here is to keep testing, a very simple test is to tab around the document. does that order still make sense? check that you do not end up leaping from the top to the bottom of the layout in a peculiar way. if so that would be a sign that you need to address something about the layout. returning to the source if at any time in the design process you find yourself using grid to relocate the position of an element, consider whether you should return to your document and make a change to the logical order too. the nice thing about using css ...
...to do this is to use display: contents to cause the box generated by the ul to disappear from the dom. for more information about this interaction see the guide on the relationship of grid layout to other layout methods and the section on display: contents. given that interoperable support for display: contents is limited and we do not yet have subgrids, there is a definite temptation when developing a site using css grid layout to flatten out the markup, to remove semantic elements in order to make it simpler to create a layout. an example would be where some content was semantically marked up as a list but you decide to use a set of <div> elements instead as then you can have the element to be a direct child of a container set to display: grid. be aware of this temptation and find ways to d...
... flatten out the markup, to remove semantic elements in order to make it simpler to create a layout. an example would be where some content was semantically marked up as a list but you decide to use a set of <div> elements instead as then you can have the element to be a direct child of a container set to display: grid. be aware of this temptation and find ways to develop your design without stripping out the markup. starting out with a well-structured document is a very good way to avoid the problem, as you will be aware that you are removing semantic elements in order to make the layout work if you actually have to go into the document and do so! further reading there is not a lot of existing material regarding accessibility and css grid layout. many of the issues are similar to those rais...

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
ty. .main-head { grid-area: header; } .content { grid-area: content; } .main-nav { grid-area: nav; } .side { grid-area: sidebar; } .ad { grid-area: ad; } .main-footer { grid-area: footer; } this will not create any layout, however our items now have names we can use to do so. staying outside of any media queries i am now going to set up the layout for the mobile width. here i am keeping everything in source order, trying to avoid any disconnect between the source and display as described in the guide grid layout and accessibility. i have not defined any column or row tracks but this layout dictates a single column, and rows will be created as needed for each of the items in the implicit grid. .wrapper { display: grid; grid-gap: 20px; grid-template-areas: "header" ...
...ter now spans right across the bottom of the layout. i then use a flexbox to display the navigation as a column. this is a simple example but demonstrates how we can use a grid layout to rearrange our layout for different breakpoints. in particular i am changing the location of that ad block, as appropriate in my different column setups. i find this named areas method very helpful at a prototyping stage, it is easy to play around with the location of elements. you could always begin to use grid in this way for prototyping, even if you can’t rely on it fully in production due to the browsers that visit your site. a flexible 12-column layout if you have been working with one of the many frameworks or grid systems you may be accustomed to laying out your site on a 12- or 16-column flexibl...
...t that for different breakpoints. to see how the blocks align themselves to the tracks, use the firefox grid inspector. it clearly demonstrates how our items are placed. there are some key differences with how a grid layout works over the grid systems you may have used previously. as you can see, we do not need to add any markup to create a row, grid systems need to do this to stop elements popping up into the row above. with css grid layout, we can place things into rows, with no danger of them rising up into the row above if it is left empty. due to this strict column and row placement we can also easily leave white space in our layout. we also don’t need special classes to pull or push things, to indent them into the grid. all we need to do is specify the start and end line for the ite...
...id inspector is useful to help us see how our layout has taken shape. something to note as we create this layout is that we haven’t needed to explicitly position every element on the grid at each breakpoint. we have been able to inherit the placement set up for earlier breakpoints – an advantage of working “mobile first”. we are also able to take advantage of grid auto-placement. by keeping elements in a logical order, auto-placement does quite a lot of work for us in placing items onto the grid. in the final example in this guide we will create a layout that entirely relies on auto-placement. a product listing with auto-placement many layouts are essentially sets of “cards” – product listings, image galleries, and so on. a grid can make it very easy to create these listings...

Basic concepts of Logical Properties and Values - CSS: Cascading Style Sheets
the logical properties and values specification introduces flow-relative mappings for many of the properties and values in css. this article introduces the specification, and explains flow relative properties and values. why do we need logical properties? ...
...tive properties and values. why do we need logical properties? css traditionally has sized things according to the physical dimensions of the screen. therefore we describe boxes as having a width and height, position items from the top and left, float things left, assign borders, margin, and padding to the top, right, bottom, left, etc. the logical properties and values specification defines mappings for these physical values to their logical, or flow relative, counterparts — e.g. start and end as opposed to left and right/top and bottom. an example of why these mappings might be needed is as follows. i have a layout using css grid, the grid container has a width applied and i am using the align-self and justify-self properties to align the items. these properties are flow relative — ju...
...run vertically, whereas in any vertical writing mode these run horizontally. the below diagram shows the inline and block directions in a horizontal writing mode: this diagram shows block and inline in a vertical writing mode: browser support logical properties and values can be thought of as a couple of groups in terms of current browser support. some of the properties are essentially mappings from the physical versions, for example inline-size for width or margin-inline-start rather than margin-left. these mapped properties are starting to see good browser support, and if you look at the individual pages for the properties in the reference here on mdn you will see that edge is the only modern browser currently missing these. there are then a group of properties which do not have a d...
...e physical versions, for example inline-size for width or margin-inline-start rather than margin-left. these mapped properties are starting to see good browser support, and if you look at the individual pages for the properties in the reference here on mdn you will see that edge is the only modern browser currently missing these. there are then a group of properties which do not have a direct mapping in terms of existing physical properties. these are shorthands made possible by the fact that we can refer to both edges of the block or inline dimension at once. an example would be margin-block, which is a shorthand setting for margin-block-start and margin-block-end. note: the css working group are currently trying to decide what to do about the four-value shorthands for logical properties, ...

Logical properties for sizing - CSS: Cascading Style Sheets
in this guide we will explain the flow-relative mappings between physical dimension properties and logical properties used for sizing elements on our pages. when specifying the size of an item, the logical properties and values specification gives you the ability to indicate sizing as it relates to the flow of text (inline and block) rather than physical sizing which relates to the physical dimensions of horizontal and vertical (e.g. left and right). while these flow relative mappings may well become the default for many of us, in a design you may well use both physical and logical sizing. you might want some features to always relate to the physical dimensions whatever the writing mode. mappings for dimensions the table below provides mappings between logical and physical properties. thes...
... if you were in a vertical writing mode then inline-size would be mapped to height. ...
......
...the writing mode to horizontal-tb. change it to vertical-rl and you will see that the first example — which uses width and height — remains the same size in each dimension, despite the text becoming vertical. the second example — which uses inline-size and block-size — will follow the text direction as if the entire block has rotated. min-width and min-height example there are also mappings for min-width and min-height — these are min-inline-size and min-block-size. these work in the same way as the inline-size and block-size properties, but setting a minimum rather than a fixed size. try changing the example below to vertical-rl, as with the first example, to see the effect it has. i am using min-height in the first example and min-block-size in the second. max-width and max...

Browser compatibility and Scroll Snap - CSS: Cascading Style Sheets
atibility across browsers and versions of browsers when adding support for scroll-snap to your web site or app. what should i do if i used the old firefox implementation? if you have only used the old firefox implementation of the specification, with the properties that are detailed in scroll snap points, you should update your code to use the new specification. this will ensure your scroll snapping works in all browsers which implement the specification, including firefox. if you do not do this your scroll snapping will no longer work in firefox 68 and up. the main things to note are as follows: the scroll-snap-type-x and scroll-snap-type-y properties have been dropped the scroll-snap-type property has become a longhand, so the old shorthand syntax like scroll-snap-type:mandatory will ...
...can i use the old implementation as a fallback? if you have already used the old implementation as a fallback, or feel you want to support users of old firefox (or -webkit prefixed safari), then you can continue to use the old specification as outlined in the example below. in this initial example we have used the old specification alongside the current specification in order to make scroll snapping work in all browsers which support some form of scroll snapping. the example adds the scroll-snap-points-y and scroll-snap-destination properties, which are deprecated, to make scroll snapping work in firefox. we also added the scroll-snap-type property twice, once with the y axis value needed for browsers that support the new spec, and once for firefox pre-68, which supports the property but wi...
...g. the example adds the scroll-snap-points-y and scroll-snap-destination properties, which are deprecated, to make scroll snapping work in firefox. we also added the scroll-snap-type property twice, once with the y axis value needed for browsers that support the new spec, and once for firefox pre-68, which supports the property but without the y value. do i need to use both specs? scroll snapping is one of those nice parts of css in which the fallback is that you don't get the enhanced functionality, but everything still works. i would suggest at this point you should implement the new specification only, unless you have data to show a large number of users who would benefit from a fallback version. if you want to test using feature queries for support of the new spec then we'd suggest t...
...or scroll-snap-align as this property did not exist in the old implementation. however, these properties shouldn't cause any problems to non-supporting browsers due to the way that browsers simply ignore css that they do not understand. why are there two versions of scroll snap? finally, you might wonder why we ended up in a scenario where two versions exist at all. this is the reality of developing new css — it can't be developed in a vacuum away from browser implementations. at some point browsers need to implement a spec to show that it works, and to discover any problems that only become apparent when the spec is in use alongside other properties in the real world. in such cases we can end up with implementations of older versions available alongside newer versions as browsers are in t...

HTML attribute: step - HTML: Hypertext Markup Language
valid for the numeric input types, including the date, month, week, time, datetime-local, number and range types, the step attribute is a number that specifies the granularity that the value must adhere to or the keyword any. the step sets the stepping interval when clicking up and down spinner buttons, moving a slider left and right on a range, and validating the different date types. if not explicitly included, step defaults to 1 for number and range, and 1 unit type (minute, week, month, day) for the date/time input types. ...
... the stepping interval when clicking up and down spinner buttons, moving a slider left and right on a range, and validating the different date types. if not explicitly included, step defaults to 1 for number and range, and 1 unit type (minute, week, month, day) for the date/time input types. the value can must be a positive number - integer or float -- or the special value any, which means no stepping is implied, and any value is allowed (barring other constraints, such as min and max). the default stepping value for number inputs is 1, allowing only integers to be entered, unless the stepping base is not an integer. the default stepping value for time is 1 second, with 900 being equal to 15 minutes. default values for step input type value example date 1 (day...
...for example, if we have <input type="number" min="10" step="2"> any even integer, 10 or great, is valid. if omitted, <input type="number">, any integer is valid, but floats, like 4.2, are not valid, as step defaults to 1. for 4.2 to be valid, step would have had to be set to any, 0.1, 0.2, or any the min value wo...
...umber" type="number" step="2" min="1.2"> valid values include 1.2, 3.2, 5.2, 7.2, 9.2, 11.2, and so on. integers and even numbers follwed by .2 are not valid. as we included an invalid value, supporting browsers will show the value as invalid. the number spinner, if present, will only show valid float values of 1.2 and greater note: when the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in contraint validation and will match the :invalid and :out-of-range pseudoclasses see client-side validation and stepmismatch for more information. specifications specification status comment html living standardthe definition of 'step attribute' in that specification. living standard html5the definit...

<input type="month"> - HTML: Hypertext Markup Language
the <datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the type are not included in the suggested options. the values pro...
...sets the value of the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. ...
...the readonly attribute also specified. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid. a string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max). note: when the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options. for month inputs, the value of step is given in months, with a scaling factor of 1...
... specifications specification status comments html living standardthe definition of '<input type="month">' in that specification. living standard ...

<input type="time"> - HTML: Hypertext Markup Language
for example, specifying a min of 14:00 and a max of 2:00 means that the permitted time values start at 2:00 pm, run through midnight to the next ...
... directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. ...
...the readonly attribute also specified. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid. a string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max). note: when the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options. for time inputs, the value of step is given in seconds, with a scaling factor of 1...
...de the hours and minutes: <form> <label for="appt-time">choose an appointment time: </label> <input id="appt-time" type="time" name="appt-time" step="2"> </form> in chrome and opera, which are the only browsers to show up/down iteration arrows, clicking the arrows changes the seconds value by two seconds, but doesn't affect the hours or minutes. minutes (or hours) can only be used for stepping when you specify a number of minutes (or hours) in seconds, such as 120 for 2 minutes, or 7200 for 2 hours). in firefox, there are no arrows, so the step value isn't used. however, providing it does add the seconds input area adjacent to the minutes section. the steps value seems to have no effect in edge. using step seems to cause validation to not work properly (as seen in the next section)...

Browser detection using the user agent - HTTP
s it is not. for example, in the above code snippets, using lookbehind in short-regexp notation (e.g. /reg/igm) will cause a parser error in unsupported browsers. thus, in the above example, you would use new regexp("(?<=look_behind_stuff)"); instead of /(?<=look_behind_stuff)/, even in the lookbehind supported section of your code. progressive enhancement this design technique involves developing your web site in 'layers', using a bottom-up approach, starting with a simpler layer and improving the capabilities of the site in successive layers, each using more features. graceful degradation this is a top-down approach in which you build the best possible site using all the features you want, then tweak it to make it work on older browsers. this can be harder to do, and less effective, th...
...nd has a small screen so they can optimize their website accordingly. while user agent sniffing can sometimes detect these, not all devices are the same: some mobile devices have big screen sizes, some desktops have a small touchscreen, some people use smart tv's which are an entirely different ballgame altogether, and some people can dynamically change the width and height of their screen by flipping their tablet on its side! so, user agent sniffing is definitely not the way to go. thankfully, there are much better alternatives. use navigator.maxtouchpoints to detect if the user's device has a touchscreen. then, default back to checking the user agent screen only if (!("maxtouchpoints" in navigator)) { /*code here*/}. using this information of whether the device has a touchscreen, do not chan...
...c, perhaps the following detailed example might give you insights and ideas that persuade you to forgo user agent sniffing. let us imagine a page composed of boxes of information; each box is about a different feline breed or canine breed. each box has an image, an overview, and a historical funfact. the pictures are kept to a maximum reasonable size even on large screens. for the purposes of grouping the content meaningfully, all the cat boxes are separated from all the dog boxes such that the cat and dog boxes are not intermixed together. on a large screen, it saves space to have multiple columns to reduce the space wasted to the left and to the right of the pictures. the boxes can be separated into multiple columns via two equally fair method. from this point on, we shall assume that all th...
...ut all the cats higher in the source code than the dogs so that more people can find what they are looking for faster on smaller screens where the content collapses down to one column. next, always make your code dynamic. the user can flip their mobile device on its side, changing the width and height of the page. or, there might be some weird flip-phone-like device thing in the future where flipping it out extends the screen. do not be the developer having a headache over how to deal with the flip-phone-like device thing. never be satisfied with your webpage until you can open up the dev tools side panel and resize the screen while the webpage looks smooth, fluid, and dynamically resized. the simplest way to do this is to separate all the code that moves content around based on screen size t...

OPTIONS - HTTP
an respond if it is acceptable to send the request. in this example, we will request permission for these parameters: the access-control-request-method header sent in the preflight request tells the server that when the actual request is sent, it will have a post request method. ...
...en the actual request is sent, it will have the x-pingother and content-type headers. options /resources/post-here/ http/1.1 host: bar.example accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip,deflate connection: keep-alive origin: https://foo.example access-control-request-method: post access-control-request-headers: x-pingother, content-type the server now can respond if it will accept a request under these circumstances. in this example, the server response says that: access-control-allow-origin the https://foo.example origin is permitted to request the bar.example/resources/post-here/ url via the following: access-control-allow-methods post, get, and options are permitted methods for the url. (this header ...
...w-origin the https://foo.example origin is permitted to request the bar.example/resources/post-here/ url via the following: access-control-allow-methods post, get, and options are permitted methods for the url. ...
...the response is permitted to read the values of the x-pingother and content-type headers. access-control-max-age the above permissions may be cached for 86,400 seconds (1 day). ...

An overview of HTTP - HTTP
ntroduced by a simple agreement between a client and a server about a new header's semantics. http is stateless, but not sessionless http is stateless: there is no link between two requests being successively carried out on the same connection. this immediately has the prospect of being problematic for users attempting to interact with certain pages coherently, for example, using e-commerce shopping baskets. but while the core of http itself is stateless, http cookies allow the use of stateful sessions. using header extensibility, http cookies are added to the workflow, allowing session creation on each http request to share the same context, or the same state. http and connections a connection is controlled at the transport layer, and therefore fundamentally out of scope for http. though ...
...s efficient than sharing a single tcp connection when multiple requests are sent in close succession. in order to mitigate this flaw, http/1.1 introduced pipelining (which proved difficult to implement) and persistent connections: the underlying tcp connection can be partially controlled using the connection header. http/2 went a step further by multiplexing messages over a single connection, helping keep the connection warm and more efficient. experiments are in progress to design a better transport protocol more suited to http. for example, google is experimenting with quic which builds on udp to provide a more reliable and efficient transport protocol. what can be controlled by http this extensible nature of http has, over time, allowed for more control and functionality of the web. cac...
...in constraint, by contrast, has only been added in the 2010s. here is a list of common features controllable with http. caching how documents are cached can be controlled by http. the server can instruct proxies and clients, about what to cache and for how long. the client can instruct intermediate cache proxies to ignore the stored document. relaxing the origin constraint to prevent snooping and other privacy invasions, web browsers enforce strict separation between web sites. only pages from the same origin can access all the information of a web page. though such constraint is a burden to the server, http headers can relax this strict separation on the server side, allowing a document to become a patchwork of information sourced from different domains; there could even be security-...
...ugh proxies to cross this network barrier. not all proxies are http proxies. the socks protocol, for example, operates at a lower level. other protocols, like ftp, can be handled by these proxies. sessions using http cookies allows you to link requests with the state of the server. this creates sessions, despite basic http being a state-less protocol. this is useful not only for e-commerce shopping baskets, but also for any site allowing user configuration of the output. http flow when a client wants to communicate with a server, either the final server or an intermediate proxy, it performs the following steps: open a tcp connection: the tcp connection is used to send a request, or several, and receive an answer. the client may open a new connection, reuse an existing connection, or o...

Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing <b class="target">elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b> ut enim ad minim veniam. </p> the above example would be rendered with the mask applied to it. example: clipping this example demonstrates using svg to clip html content. notice that even the clickable areas for links are clipped. <p class="target" style="background:lime;"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing <b class...
... elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing <b class="target">elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b> ut enim ad minim veniam. ...
...tempor incididunt ut labore et dolore magna aliqua.</b> ut enim ad minim veniam. </p> <button onclick="toggleradius()">toggle radius</button> <svg height="0"> <clippath id="clipping-path-1" clippathunits="objectboundingbox"> <circle cx="0.25" cy="0.25" r="0.25" id="circle"/> <rect x="0.5" y="0.2" width="0.5" height="0.8"/> </clippath> </svg> .target { clip-path: url(#clipping-path-1); } p { width: 300px; border: 1px solid #000; display: inline-block; } this establishes a clipping area made of a circle and rectangle, assigns it the id #clipping-path-1, then references it in the css. the clip path can be assigned to any element with the target class. you can make changes to the svg in real time and see them immediately affect the rendering of the html. for examp...
...o be used to add a more dynamic and flexible approach to adding text compared to plain html text. by creating the text using svg elements combined with html you can make a variety of different text effects. you can rotate the text: <svg height="60" width="200"> <text x="0" y="15" fill="blue" transform="rotate(30 20,50)">example text</text> </svg> using external references svg used for clipping, masking, and filtering can be loaded from an external source, as long as that source comes from the same origin as the html document to which it's applied. for example, if your css is in a file named default.css, it can look like this: .target { clip-path: url(resources.svg#c1); } the svg is then imported from a file named resources.svg, using the clip path with the id c1. ...

clip-rule - SVG: Scalable Vector Graphics
« svg attribute reference home the clip-rule attribute only applies to graphics elements that are contained within a <clippath> element. the clip-rule attribute basically works as the fill-rule attribute, except that it applies to <clippath> definitions. ...
... « svg attribute reference home the clip-rule attribute only applies to graphics elements that are contained within a <clippath> element. the clip-rule attribute basically works as the fill-rule attribute, except that it applies to <clippath> definitions. ...
...he clip-rule attribute only applies to graphics elements that are contained within a <clippath> element. the clip-rule attribute basically works as the fill-rule attribute, except that it applies to <clippath> definitions. ...
... the following fragment of code will cause an evenodd clipping rule to be applied to the clipping path because clip-rule is specified on the <path> element that defines the clipping shape: <g> <clippath id="myclip"> <path d="..." clip-rule="evenodd" /> </clippath> <rect clip-path="url(#myclip)" ... /> </g> whereas the following fragment of code will not cause an evenodd clipping rule to be applied because the clip-rule is specified on the referencing element, not on the object defining the clipping shape: <g> <clippath id="myclip"> <path d="..." /> </clippath> <rect clip-path="url(#myclip)" clip-rule="evenodd" ... /> </g> as a presentation attribute, it also can be used as a property directly inside a css stylesheet usage context categor...

jpm - Archive of obsolete content
ter installation, at the command prompt, type: jpm you should see a screen summarizing the available jpm commands. note that unlike cfx, jpm is available in every command prompt you start, as long as you installed it with the --global flag. install a different version of firefox as of firefox 48, it is not possible to use unsigned add-ons (i.e. any add-on which you are in the process of developing) in the branded release or beta versions of firefox. thus, you will need to download and install a different version of firefox. assuming you don't want an old version of firefox, your options are firefox developer edition, firefox nightly, unbranded beta, or unbranded release. when testing your add-on, you will need to use the -b option to jpm run. see selecting a browser version. problems? i...
... the profile you wish to use, or the path to the profile. jpm run --profile boogaloo jpm run --profile path/to/boogaloo use the profile manager to create a new profile if needed. if you need changes to the profile to persist, add the --no-copy argument. however beware that jpm might also apply changes to the profile, setting some preferences that will make it unusable for daily usage. developing without browser restarts because jpm run restarts the browser each time you invoke it, it can be a little cumbersome if you are making very frequent changes to an add-on. an alternative development model is to use the extension auto-installer add-on: this listens for new xpi files on a specified port and installs them automatically. that way you can test new changes without needing to restart th...
...ting. see the documentation on logging levels for the details on this. overloading the built-in modules the sdk modules you use to implement your add-on are built into firefox. when you run or package an add-on using jpm run or jpm xpi, the add-on uses the versions of the modules in the version of firefox that hosts it. as an add-on developer, this is usually what you want. but if you're developing the sdk modules themselves, of course, it isn't. in this case you need to: get a local copy of the sdk modules that you want: this usually means checking out the sdk from its github repo set the jetpack_root environment variable to your local copy pass the -o option to jpm run or jpm xpi: jpm run -o this instructs jpm to use the local copies of the sdk modules, not the ones in firefox. i...

Getting started (cfx) - Archive of obsolete content
en it and follow the prompts to install the add-on. summary in this tutorial we've built and packaged an add-on using three commands: cfx init to initialize an empty add-on template cfx run to run a new instance of firefox with the add-on installed, so we can try it out cfx xpi to package the add-on into an xpi file for distribution these are the three main commands you'll use when developing sdk add-ons. there's comprehensive reference documentation covering all the commands you can use and all the options they take. the add-on code itself uses two sdk modules, action button and tabs. there's reference documentation for all the high-level and low-level apis in the sdk. what's next? to get a feel for some of the things you can do with the sdk apis, try working through some of the t...
...is, try working through some of the tutorials. advanced techniques overriding the built-in modules the sdk modules you use to implement your add-on are built into firefox. when you run or package an add-on using cfx run or cfx xpi, the add-on will use the versions of the modules in the version of firefox that hosts it. as an add-on developer, this is usually what you want. ...
...an alternative development model is to use the extension auto-installer add-on: this listens for new xpi files on a specified port and installs them automatically. ...

Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
for complex extensions, it may be necessary to create components in c++ that provide additional functionality. reasons why you might want to include c++ components in your extension include: need for high-performance beyond what can be delivered by javascript code. use of third-party libraries written in c or c++. use of mozilla interfaces that are not exposed via xpcom (e.g. nspr). ...
... in order for the script to know where your source is (it'll use the extension path you gave it relative to the current dir to figure out where you want your makefiles to go). this will generate the proper makefile for your extension. whether you build the whole mozilla tree or take this shortcut, you can build from now on by going to /mozilla/$(moz_objdir)/extensions/myextension/ and typing "make" on the command line. it should build your component without bothering with the rest of mozilla. if everything works out, you'll see your xpi file in the xpi staging area. you'll also see the "exploded" version of the xpi (i.e. the unzipped directory structure) underneath /mozilla/$(moz_objdir)/dist/bin/extensions. (if something goes wrong, figure out what, fix it and then come back here an...
...la/$(moz_objdir)/dist/bin/extensions/myextension@mycompany.com/). note that the chrome directory contains a jar (i.e. zip) file with all the chrome files listed in jar.mn as well as a complete directory structure mirroring that of the jar file. the directory structure, however, is empty. why? i don't know. don't worry about this, the files in the jar are the ones that are actually used. keeping it complex if you're developing a really complex extension with lots of xpcom components, you'll probably want to divide your code up into smaller modules. kinda, sorta complex extensions for a moderately complex extension, it's probably enough just to subdivide the code into a single level of modules. let's assume that you have a base/ module that defines a bunch of basic xp...

Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
draft this page is not complete. « previous this document was authored by taro (btm) matsuzawa and was originally published in japanese for the firefox developers conference summer 2007. matsuzawa-san is a co-author of firefox 3 hacks (o'reilly japan, 2008.) this chapter discusses tools to assist in developing extensions. tools for extension developers fixme: are we sure we'll talking about venkman since it's not well maintained fixme: we maybe should talk about firebug and chromebug fixme: and what about console 2 and docked-js console? venkman, the javascript debugger venkman is a full-fledged javascript debugger that runs inside firefox. it works like typical debuggers, and is useful not only for developing extensions, but also for general web development. also, be...
...t out specific variables that you want to watch (figure 4). watched variables appear under the watches tab, and are updated every time they are evaluated. you can then continue with stepwise execution and watch the changes in the program and variables. once you’ve finished your inspection, you can continue and let the halted program resume execution. the author has done almost no work developing extensions, but has used this to investigate how extensions were implemented. in the quicknote example, we first set one breakpoint and then stepped through it. use step over to avoid a function, and step into to always call it; once you are done investigating a function, use step out, and then you can step into the next function. set breakpoints in locations of interest where you’re not sure...
... gonzui (simply because it’s easier to specify a file that’s in the same directory). open a command prompt and navigate to the directory containing gonzui. the next command will import the source code: gonzui-import.exe mozilla once the import process is complete, type the following command to launch the gonzui server: gonzui-server.exe now you can access gonzui from your web browser by typing the following into your location bar : http://localhost:46984 this lets you browse all packages, click on links to traverse them, and take traversed-link locations as search starting points (figure a). fixme: figure a: gonzui 1 - http://quicknote.mozdev.org 2 - http://www5f.biglobe.ne.jp/~t-susumu/ 3 - reverse-polish notation. a way to represent arithmetic formulas. for example, (1+2)*(3-...

Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
constructor, only empty tags should be specified in order to avoid invoking the dom parser. var href = "http://www.google.com/"; var text = "google"; $("body").append( $("<div>", { class: "foo" }) .append($("<a>", { href: href, text: text }) .click(function (event) { alert(event.target.href) })) .append($("<span>").text("foo"))); innerhtml with html escaping this method is a last resort which should be used only as a temporary measure in established code bases. it is safe, though inefficient, to assign dynamic values to innerhtml if any dynamic content in the value is escaped with the following function: function escapehtml(str) { return str.replace(/[&"'<>]/g, (m) => ({ "&": "&amp;", '"': "&quot;", "'": "&#39;", "<": "&lt;", ">": "&gt;" })[m]); } ...
... var href = "http://www.google.com/"; var text = "google"; document.getelementbyid("target-div").innerhtml = '<div>\ <a href="' + escapehtml(href) + '" target="_top">' + escapehtml(text) + '</a>\ </div>' it needs to be stressed that this method should not be used in new code and is only a temporary measure to shore up legacy code bases. safely generating event li...
... elem.onclick = function (event) { openwindow(address) }; } multiple attributes sometimes there is a need for event listeners to appear as attributes in the dom. in these cases, multiple attributes should be used, one for each variable: function clickify(elem, address) { elem.setattribute("href", address); elem.setattribute("onclick", "openwindow(this.getattribute('href'))"); } escaping functions when the code fragment in question is not an event handler attribute and there is no feasible way to pass the data through other means, they must be escaped with functions such as uneval, string.quote, json.stringify, or number. generating scripts in this matter is deprecated and should be avoided wherever possible, but is relatively safe and sometimes acceptable. function createscrip...

The Box Model - Archive of obsolete content
text, and also avoid designing your ui so that everything fits just right around text. you should always keep in mind that the text can be much longer, and your ui should adapt to it. labels should generally be short, and they should always be displayed in a single line. descriptions may be longer, and in general you should plan it so that they can wrap into multiple lines. in order to have wrapping descriptions, you need to set the text as a child node instead of using the value attribute: <description>&xulschoolhello.description.label;</description> even then, the text will extend as much as it can in a single line, so you need to add some css limits in order to make it wrap inside a xul dialog or window. you can use the css property width to restrict the width of the description so ...
...>&xulschoolhello.description.label;</description> even then, the text will extend as much as it can in a single line, so you need to add some css limits in order to make it wrap inside a xul dialog or window. you can use the css property width to restrict the width of the description so that it wraps as you need it to. never cut text lines into separate locale strings in order to bypass wrapping difficulties. this makes localization much harder, or even impossible in some cases. there are other more complicated text wrapping cases where a description won't be good enough. for instance, templates don't allow you to set the internal text in a description element in a way that it wraps properly. one way to work around this is using a textbox element instead. this blog post is a good guid...
... textbox element instead. this blog post is a good guide on the subject, and you should keep it in mind if you need to do some advanced text handling. another way to handle excessive text length is to use the crop attribute. if the line of text is longer than its container will allow, the text will be cut, showing "..." in the place where it was cut. you can choose where to cut the text, but cropping at the end is the most common practice. similarly as with wrapping, cropping will only occur is there is no room for the text to grow, so you'll need to restrict the width using css. text links xul makes it very easy for you to create a label that is also a link. all you need is to set the text-link class to the label, and add an onclick handler (oncommand won't work for this). the label is dis...

Setting up an extension development environment - Archive of obsolete content
dev & on windows: start -> run "%programfiles%\mozilla firefox\firefox.exe" -no-remote -p dev on windows 64 bit: start -> run "%programfiles(x86)%\mozilla firefox\firefox.exe" -no-remote -p dev to start thunderbird or seamonkey instead of firefox, substitute thunderbird, or seamonkey for the firefox used in our examples. note: you could run firefox using your regular profile while developing. however, you won't enjoy the benefits of isolated resources, which we discussed earlier. the parameter -p profilename doesn't imply -no-remote, therefore use them together. if you are already running a firefox instance without -no-remote, and you attempt to start another instance with -p profilename (but without the -no-remote parameter), that second invocation would ignore its -p profilename ...
... document overlaid. browser.dom.window.dump.enabled = true. enables the use of the dump() statement to print to the standard console. see window.dump for more info. you can use nsiconsoleservice instead of dump() from a privileged script. javascript.options.strict = true. enables strict javascript warnings in the error console. note that since many people have this setting turned off when developing, you will see lots of warnings for problems with their code in addition to warnings for your own extension. you can filter those with console2. devtools.chrome.enabled = true. this enables to run javascript code snippets in the chrome context of the scratchpad from the tools menu. don't forget to switch from content to browser as context. devtools.debugger.remote-enabled = true. this adds a "br...
...of proxy files requires that the extension's chrome.manifest defines its chrome urls using traditional directories, rather than a jared structure. see below. place the file in the extensions folder of your profile and restart the application. using directories rather than jars regardless of whether you choose to eventually package your extension's chrome in a jar or in directories, developing in directories is simpler. if you choose a jared structure for releasing, you can still develop with a directory structure by editing your chrome.manifest. for example, rather than having content myextension jar:chrome/myextension.jar!/content/ use content myextension chrome/content/ preventing the first launch extension selector requires gecko 8.0(firefox 8.0 / thunderbird 8.0 / seamonk...

Add-ons - Archive of obsolete content
tml bookmark file. bookmarks.import() imports bookmarks from an html bookmark file. bootstrapped extensions browser.bookmarks.export( function() {...} // optional function ) code snippets … creating custom firefox extensions with the mozilla build system there is a wealth of material on creating extensions for firefox. all of these documents currently assume, however, that you are developing your extension using xul and javascript only. for complex extensions, it may be necessary to create components in c++ that provide additional functionality. extension etiquette this article describes best practices when making extensions, including how to be kind to your users. it assumes that you are already familiar with building an extension. extension packaging extensions are packaged in ...
...ot on xuldev), and to japanese things (like some specific locales, which have been translated to french since non-latin characters are not well supported). hotfix extension this document has been moved to the add-ons wiki. how to convert an overlay extension to restartless first off, what kind of add-on are we talking about here? well, xul overlays and windows, jsm files, chrome & resource mappings with localization, default preferences, but no xpcom components of your own. some of that will have to be replaced and the rest will need to be loaded differently. inline options firefox 7 supports a new syntax for defining extensions' preferences for both bootstrapped and traditional extensions. the user interface for the preferences defined with this new syntax appears in the extension's det...
...custom dom event. here we call the event myextensionevent. legacy add-ons this section contains links to documentation for legacy technology for add-on development, including: legacy extensions for firefox for android add-ons that work with desktop firefox do not automatically work in firefox for android: overlay extensions this page contains links to documentation for the approach to developing extensions for gecko-based applications which uses: performance best practices in extensions one of firefox's great advantages is its extreme extensibility. extensions can do almost anything. there is a down side to this: poorly written extensions can have a severe impact on the browsing experience, including on the overall performance of firefox itself. this article offers some best practices ...

CSS3 - Archive of obsolete content
flexbox layout to the css display property and several new css properties to control it: flex, flex-align, flex-direction, flex-flow, flex-item-align, flex-line-pack, flex-order, flex-pack, and flex-wrap. css cascading and inheritance level 3 candidate recommendation adds: the initial, unset values for properties. the css all property. the scoping mechanism. clarifies: interaction of media-dependent @import statements and style sheet loading requirements. css writing modes module level 3 proposed recommendation defines the writing modes of both horizontal and vertical scripts and clarifies how the css direction and unicode-bidi properties interact with the new css text-orientation p...
... text-decoration-skip, line positioning rules and the ability to place both emphasis marks and ruby above the same base text may be postponed to the next iteration of this module. css shapes module level 1 candidate recommendation defines geometric shapes, which can be applied to floats. these shapes describe areas, around which inline content wraps instead of wrapping around the bounding box. css masking module level 1 candidate recommendation defines a way for partially or fully hiding portions of visual elements. it describes how to use another graphical element or image as a luminance or alpha mask. css fragmentation module level 3 candidate recommendation defines how partitions of a web page should ha...
... layout module level 3 working draft css regions module level 1 working draft defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions. css object model (cssom) working draft css font loading module level 3 working draft css scoping module level 1 working draft css inline layout working draft css images module level 4 working draft extends: the image() functional notation to describe the directionality of the image (rtl or ltr), allowing for bidi-sensitive images. the image-orientation property by adding the keyword from-image, allowin...

List of Mozilla-Based Applications - Archive of obsolete content
s 9 clines a clone of color lines (game) standalone version cloud web operating system cloud browse iphone/ipad/ipod touch browser seems to be firefox running remotely on servers that people access through device conkeror keyboard-oriented browser convertigo enterprise mashup server server tool for transactional web scraping and for web clipping cometbird another firefox mod modified version of firefox correo email couac (fr) web-based email and jabber app couchdb document-oriented database uses spidermonkey courtanet benefit (fr) underwriting software for french insurance brokers crosscheck browserless testing framework ...
... dogtag certificate system uses nss dojo javascript toolkit uses mozilla rhino in shrinksafe eclipse pla...
... orca browser web browser gecko-based version of avant browser pale moon web browser optimized browser developed by moonchild productions for gnu/linux & windows platforms, originally forked from firefox palo suite excel extension uses prism partygaming online gaming product uses gecko pencil tool for making diagrams and gui prototyping available as a firefox extension or a standalone app pentaho bi suite commercial open source business intelligence uses xul and mozilla rhino persevere tools for persistence and distributed computing uses mozilla rhino phloneme publishing tool for vocab collab phped php editor embedded mozilla browser in product pidgin im...

Venkman Introduction - Archive of obsolete content
in the top left portion of the window. when a file is loaded by the browser it will appear in this view, and when unloaded it will be removed. files are listed in alphabetical order, grouped by file type. file names are displayed after a color coded, single letter icon representing the file extension. figure 6 shows the table of icon and file types. at the time if this writing, the order and grouping of file names cannot be changed. icon file type .js .html, .htm .xul .xml all other files javascript function figure 6. icons in the script view the "special" function name __toplevel__ is displayed for scripts that are not part of an actual function. clicking on a file name brings you to the top...
... a textual description of the type of the object. flags lists one or more applicable flags for this object. flags are shown enumerated in figure 8. if an item visible in the local variables view is modified via the interactive session view the modification will be immediately reflected in the local variable view. at the time of this writing, the local variables view's default sort order and grouping are not adjustable. the call stack view the call stack view is on the left portion of the window by default, at the bottom. when the debugger is stopped, the call stack view displays the list of active functions. the function at the top of the call stack view is the one in which the debugger stopped, the function below it is the caller, below that is the caller's caller, and so on. these item...
...ected stack frame, and script evaluated in the interactive session view will be relative to the selected frame. if you would like to copy the current call stack to the clipboard, select "dump stack to interactive session" from the context menu, or type /where in the interactive session view. you may then copy the text from the interactive session view. if you would like to keep venkman from stopping in a particular stack frame in the future, check "don't debug" from the stack frame's context menu. source code view the source code view is a read-only file viewer. files and specific functions within them can be displayed by selecting the appropriate file or function name in the script view. when script execution is interrupted by the debugger, the line of the file where the interruption o...

Anonymous Content - Archive of obsolete content
l file upload control appears in most browsers as a composite widget consisting of a text field and a button. a sample xbl binding for the file widget might look as follows: <binding id="fileupload"> <content> <html:input type="text"/> <html:input type="button"/> </content> </binding> because this content is not visible to its parent element, it is said to be anonymous content. scoping and access using the dom when a binding is attached and certain conditions are met, the children of the binding's content element are cloned. elements and attributes in the xbl namespace are never cloned. for content generated underneath the bound element, the topmost nodes' parentnode pointers are set to the bound element. when anonymous content elements are built above the bound element, the t...
...ing firstchild/nextsibling to iterate over the children of the bound element. the anonymous content is accessible only through special methods like getanonymousnodes and getanonymouselementbyattribute. anonymous content introduces the concept of scope to nodes within a document. because anonymous content elements can also have bindings attached that generate their own anonymous content, this scoping can be taken to an arbitrary level of nesting. explicit content is said to be at the document-level scope. anonymous content nodes are in their own binding-level scopes. binding scopes are determined by the bound element that contains the binding responsible for the generation of the anonymous nodes. the scope of an element can be determined using the getbindingparent method on the documentxbl ...
...ys walked from the innermost scope to the outermost scope. with this ordering a binding that defines a widget can define a default look for the widget that can then be easily overridden by a client of the widget. for multiple bindings attached to the same element, the sheets are walked from the base binding down to the most derived binding. bindings can fine-tune the control of the stylesheet scoping with the inheritstyle attribute, which indicates whether or not author sheets defined at outer scopes affect the anonymous content generated by the binding. for the primary generating binding only, this attribute is checked to see if any author sheets at outer levels of scoping should be applied to the anonymous content generated by the bindings attached to the bound element. if this attribute is...

Creating XPI Installer Modules - Archive of obsolete content
w. for this option to work, the designated chrome must have been installed and registered properly with mozilla. the chrome:// url pointer corresponds to the directory mozilla/bin/chrome/barley/content, where the main xul file and the other resources live once they are installed. ...
...veloping the resources organizing the resources creating the contents.rdf file making the barley install script creating a xpi you can examine (or install!) the package described here by downloading the barley xpi file and using a zip unarchiver[zip] to open it. all of the resources described in this article are in the xpi archive and can be adapted for use in your own development. developing the resources needless to say, one of the first things you will have to create is the actual software you wish to make redistributable. the barley package ui is a single xul window with an accompanying image: <?xml version="1.0"?> <?xml-stylesheet href="chrome://communicator/skin/" type="text/css"?> <window title="barley window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.moz...
...ng instruction at the top of the xul file does not refer to any new skin, but imports communicator.css to make use of that skin's basic widget styles. the javascript file barley.js contains a single function, bar(), defined as follows: function bar() { alert("aphids"); } if you want to use the same gif image that is used in the barley package, it can be grabbed from here. while you are developing these resources and before you have made them a package of their own, you can test the basic layout and functionality by opening barley.xul from within mozilla by using file -> open. though mozilla will not display the file as a separate window (much less interpret it as a separate package), you ought to be able to see the image and the javascript function working as defined in barley.js (provide...

Using XPInstall to Install Plugins - Archive of obsolete content
as winzip. xpi packages, like zip files, "contain" other files, typically: the software component to be installed. in our case, this is the plugin software. a javascript file called install.js, which is the install logic that drives the installation. this includes instructions on where to install the software, and what messages to feed to the user. you can create an xpinstall file by first zipping all the items you want installed with winzip (create a zip archive) and then renaming it with the xpi file extension instead of the zip file extension. unlike native code installers (for example, files called setup.exe), the programming language for install operations in xpi is javascript. since the file format that contains the software and the install.js javascript file is a cross-platform file...
...pi package: shared libraries (i.e. on windows, these are dlls, on unix these are *.so files). these files are native code files made with the netscape plugin api. if the plugin is scriptable, then it will also consist of an xpt file. examples would be flash 6r47 on windows, which consists of a dll (called npswf32.dll) and an xpt file for scriptability (called flashplayer.xpt). if you are developing a plugin and wish to make it scriptable, read the relevant portions of the plugin api. additional software. many plugins are part of additional software for media types. for example, realplayer on windows consists of a plugin dll, but also the realplayer application (exe) which the plugin dll is a subset of. in this case, the plugin is the part of the software package that is browser-specific, a...
...xpi package is running on browsers that treat "=" as an illegal token, the workaround is to handle the error and invoke initinstall again. using xpinstall to run an exe (native code) installer if you wish to run a native installer (exe) to install plugin software, but wish to make the delivery of this native installer streamlined and within the browser's process, then you ought to consider wrapping it in an xpi package. from javascript, you can call xpinstall's execute method of the install object to execute the binary. you can also call the execute method of the file object if you wish to actually install the file you are executing, rather than have it deleted. you can pass command line parameters to the executable. an example of calling the execute method from the install object on an exe...

Custom toolbar button - Archive of obsolete content
et your text editor to use any encoding except unicode. if your language uses accents or other non-latin characters, set your text editor to save files using the utf-8 encoding. to check your text editor, create a plain text file named test.txt. in the file, type some of the special characters that your language uses. save the file. open the file in firefox (for example, by dragging it and dropping it in firefox, or by choosing file – open file... from firefox's menu bar). from firefox's menu bar, choose view – character encoding – unicode (utf-8). check that the text you typed looks ok with this setting. if your text editor does not support utf-8, search the internet for a better one that you can download. optional tools you can optionally use any image editor to customize the im...
...ries and files that are shown in the diagram. (other directories and files also exist, but the diagram does not show them.) 1. go to the profile directory that you use for the application, then go to the extensions directory there. ...
... explanation: the name is a unique identifier for the extension. ...

Archived Mozilla and build documentation - Archive of obsolete content
dentify the pages that the generators know how to summarize by matching patterns in those pages' urls. dehydra the development focus switched to dxr (where the "d" comes from "dehydra"), which is based on clang instead of gcc. try dxr instead, or else try the gcc python plugin: https://fedorahosted.org/gcc-python-plugin/. developing new mozilla features tips for contributing new features to mozilla. devmo 1.0 launch roadmap comments, ideas, questions and other discussion should be added on the devmo talk:1.0 launch roadmap page. further details on smaller tasks being done are available at user:dria:todo page. see also current events. download manager improvements in...
...nager and associated classes and structures are used by block and line layout to manage rectangular regions that are occupied and available, for correct handling of floated elements and the elements that flow around them. when elements are floated to the left or right in a layout, they take up space and influence where other elements can be placed. the space manager is responsible for keeping track of where space is taken up and where it is available. this information is used by block layout to correctly compute where other floated elements should be placed, and how much space is available to normal in-flow elements that flow around the floated bits. standalone xpcom standalone xpcom is a tree configuration that builds a minimal set of libraries (shar...
...ided as part of the mozilla install distribution since october 2001, as well as an extension package in xpi format. video presentations mozilla is actively working to produce video presentations that can help you learn how the mozilla codebase works and how to take advantage of its technology in your own applications and extensions. this article is a jumping-off point to help you find those presentations. gecko - the smart embedding choice xbdesignmode.js xml in mozilla mozilla has a relatively good support for xml. several world wide web consortium (w3c) recommendations and drafts from the xml family of specifications are supported, as well as other related technologies. ...

Sunbird Theme Tutorial - Archive of obsolete content
ons</tt> entries. add the line: pref("extensions.dss.enabled", false); save the file. using your theme to use your theme, restart sunbird. from the menu bar, choose tools – themes... in the themes window, check that your new theme has appeared. select it and press the use theme button. restart sunbird again. if your theme is working, you see the effect of the changes that you made. developing your theme to develop your theme, make further changes to the theme files. you might prefer to do some design work in an image editor first, so that you have a clear design concept to implement. understanding sunbird's user interface to understand sunbird's user interface, go to sunbird's program directory, then to the <tt>chrome/content/calendar</tt> directory there. examine the files there ...
...les. packaging your theme you can package your theme and make it available on a web site for other users to download and install. there are two methods: a simple method, and the normal method. simple packaging note: if you use this simple method to package your theme, then it can take up much more disk space than it really needs. you might prefer to use this method only while you are developing your theme, and to use the normal method for public releases. in sunbird, use the default theme or some other theme. move your theme directory to a temporary location. this uninstalls it from sunbird. use a jar tool or zip tool to pack the contents of your theme directory. it is usual to turn off compression so that your theme's speed is maximized. make sure that the tool packs all the directorie...
...hat the tool does not pack any component directories. name the packed file with the <tt>.jar</tt> extension. for example, when i wrote this article i used this command in my theme directory: zip -9 testing-0.1.jar * chrome/testing.jar make this jar file available to users. installing a packaged theme install your packaged theme in the normal way, by dragging the jar (or a link to it) and dropping it in sunbird's themes window. select the newly installed theme and press the use theme button. restart sunbird. ...

Building a Theme - Archive of obsolete content
nterface components which are loaded via chrome:// uris. rather than load the browser from disk using a file:// uri (since the location of firefox on the system can change from platform to platform and system to system), mozilla developers came up with a solution for creating uris to content that the installed add-on knows about. the browser window is: chrome://browser/content/browser.xul. try typing this url into the location bar in firefox! chrome uris consist of several components: firstly, the uri scheme (chrome) which tells firefox's networking library that this is a chrome uri. it indicates that the content of the uri should be handled as a (chrome). compare (chrome) to (http) which tells firefox to treat the uri as a web page. secondly, a package name (in the example above, browse...
...to look up skins for the browser package." more concisely, this means that the url chrome://browser/skin/some/path/file.css will look for a file browser/some/path/file.css in your theme's root directory. save the file. test first, we need to tell firefox about your theme. during the development phase for firefox versions 2.0 and higher, you can point firefox to the folder where you are developing the theme, and it'll load it up every time you restart firefox. locate your profile folder and beneath it the profile you want to work with (e.g. firefox/profiles/<profile_id>.default/). open the extensions/ folder, creating it if need be. create a new text file and put the full path to your development folder inside (e.g. c:\themes\my_theme\ or ~/themes/my_theme/). windows users should reta...
...lecting all the files and subfolders in your extension folder, right click and choose "send to -> compressed (zipped) folder". a .zip file will be created for you. just rename it and you're done! on mac os or linux, you can use the command-line zip tool: zip -r my_theme.xpi install.rdf chrome.manifest browser communicator global mozapps or, if you have 7-zip installed, you can use that for zipping it up: 7z a -tzip my_theme.xpi chrome chrome.manifest note: the command-line tool will update an existing zip file, not replace it - so if you have files you've deleted from your theme, be sure to remove the .xpi file before running the zip command again. now upload the .xpi file to your server, making sure it's served as application/x-xpinstall. you can link to it and allow people to downloa...

Common Firefox theme issues and solutions - Archive of obsolete content
web console), the toolbar buttons on the left-hand side do not change their appearance between their toggled on and toggled off status as a result it is not possible to determine which buttons are enabled. web console close button is missing the web console (tools > web developer > web console) is missing its close button, which makes it impossible to close. web console close button sprite mapping is messed up on the web console (tools > web developer > web console) the sprite mapping for the close button is messed up. style inspector style inspector is missing button icons on toolbar the style inspector is missing icons from its inspect and markup panel buttons on its toolbar. to fix this issue you need to copy the files chrome://browser/skin/devtools/inspect-button.png and chrome://b...
...ce firefox 4). -moz-box-shadow firefox no longer supports -moz-box-shadow style property. use css standard box-shadow property instead (supported by firefox since firefox 4). -moz-transition firefox no longer supports -moz-transition style property. use css standard transition property instead (supported by firefox since firefox 4). resources amo editors theme testing guidelines when developing and testing your themes, please refer to the theme testing guidelines amo editors use to review themes. this guide will help you thoroughly test your theme to find and fix issues before you push updates to amo. this is document is a work in progress so feedback and/or suggestions is appreciated. mdn css reference mozilla's developer network maintains a great css reference. amo themes forum we...
...participate in the amo (addons.mozilla.org) forums theme forum. mozillazine themes forum mozillazine is not an official mozilla website, but it does have the largest community of firefox theme developers and is a great resource. their theme development forum is here. mozillazine firefox nightly theme changes thread mozillazine's firefox nightly theme changes thread is a great resource for keeping up to date with the latest changes to the firefox ui and contains links to the bugzilla bug reports, which detail what changes were made. ...

Old Proxy API - Archive of obsolete content
ll mechanism (or "intercession api") the technical term for this feature. handler the object that intercepts properties. proxy the object whose properties are being intercepted. proxy factory the object or method that creates intercessive proxies. traps the methods that provide property access. this is analogous to the concept of traps in operating systems. proxies can be either be trapping or fixed. proxy api catch-alls can be defined only on distinct proxy objects, controlled by a handler object. there are two kinds of proxies: object proxies var proxy = proxy.create(handler, proto); and function proxies : var proxy = proxy.createfunction(handler, calltrap, constructtrap); where: proto is an optional object representing the proxy’s prototype (defaults to null if none i...
...the fundamental trap used in the set trap are implemented no-op forwarding proxy in this example, we are using a native javascript object to which our proxy will forward all operations that are applied to it. ...
... traps getownpropertydescriptor: function(name) { var desc = object.getownpropertydescriptor(obj, name); // a trapping proxy's properties must always be configurable if (desc !== undefined) { desc.configurable = true; } return desc; }, getpropertydescriptor: function(name) { var desc = object.getpropertydescriptor(obj, name); // not in es5 // a trapping proxy's properties must always be configurable if (desc !== undefined) { desc.configurable = true; } return desc; }, getownpropertynames: function() { return object.getownpropertynames(obj); }, getpropertynames: function() { return object.getpropertynames(obj); // not in es5 }, defineproperty: function(name, desc) { object.defin...

XForms Select Element - Archive of obsolete content
tion allows the user to choose one or more selections from a list of pre-defined items (see the spec). the list of pre-defined items can be specified by either item (see the spec) or itemset (see the spec) elements. you can visually group these pre-defined items by using the choices (see the spec) element to contain them. note, some representations of the select element do not support visual grouping. attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control. accesskey - used to specify the keyboard shortcut for focusing this control. single-node binding special selection - isn't currently supported. this attribute, when set to 'open', allows the user to provide free entry to the ...
...lement can be represented by the following widgets for the specified appearance attribute values: list - default representation (xhtml/xul) check group- used when appearance = 'full' (xhtml/xul) list displaying a listbox is the default representation (xhtml/xul). characteristics analogous widgets are <html:select size="5" multiple="true"/> and <xul:listbox seltype="multiple"/> visual grouping by choices element isn't implemented if incremental attribute value is false, the bound node is updated when the select control is blurred (i.e. loses focus), otherwise it is updated upon item selection check group the select is represented as group of checkboxes (xhtml/xul). characteristics appearance attribute contains the value full there are no analogue widgets in xhtml or in xul visu...
...ices element isn't implemented if incremental attribute value is false, the bound node is updated when the select control is blurred (i.e. loses focus), otherwise it is updated upon item selection check group the select is represented as group of checkboxes (xhtml/xul). ...

Audio for Web games - Game development
as soon as a game loads, one trick is to detect any user initiated event and start playback then. for other more active sounds that are to be used during the game we could consider priming them as soon as something like a start button is pressed. to prime audio like this we want to play a part of it; for this reason it is useful to include a moment of silence at the end of your audio sample. jumping to, playing, and then pausing that silence will mean we can now use javascript to play that file at arbitrary points. you can find out more about best practises with the autoplay policy here. note: playing part of your file at zero volume could also work if the browser allows you to change volume (see below). also note that playing and immediately pausing your audio does not guarantee that a sm...
...yer in some way. music is an important part of the gaming experience and depending on the type of game you are making you may wish to invest significant effort into getting it right. one way you can make your music soundtrack more dynamic is by splitting it up into component loops or tracks. this is often the way that musicians compose music anyway, and the web audio api is extremely good at keeping these parts in sync. once you have the various tracks that make up your piece you can bring tracks in and out as appropriate. you can also apply filters or effects to music. is your character in a cave? increase the echo. maybe you have underwater scenes, during which you could apply a filter that muffles the sound. let's look at some web audio api techniques for dynamically adjusting music fro...
...nderstand the pannernode in better detail. ...

Desktop gamepad controls - Game development
5; } else if(gamepadbuttonpressedhandler(3)) { playerx += 5; } if(gamepadbuttonpressedhandler(11)) { alert('boom!'); } // ... ctx.drawimage(img, playerx, playery); requestanimationframe(draw); } in this case, we are checking the four d-pad buttons (0-3) and the a button (11). note: please remember that different devices may have different key mappings, i.e. the d-pad right button have an index of 3 on the wireless xbox 360, but may have a different one on another device. you could also create a helper function that would assign proper names to the listed buttons, so for example istead of checking out if gamepadbuttonpressedhandler(3) is pressed, you could do a more descriptive check: gamepadbuttonpressedhandler('dpad-right'). you can see a ...
...r a=0,x=c.axes.length; a<x; a++) { axes.push(c.axes[a].tofixed(2)); } } gamepadapi.axes.status = axes; gamepadapi.buttons.status = pressed; return pressed; }, the function above clears the buttons cache, and copies their status from the previous frame to the cache. next, the button status is cleared and the new information is added. the same goes for the axes information — looping through axes adds the values to the array. received values are assigned to the proper objects and returns the pressed info for debugging purposes. the button.pressed() function detects the actual button presses: pressed: function(button, hold) { var newpress = false; for(var i=0,s=gamepadapi.buttons.status.length; i<s; i++) { if(gamepadapi.buttons.status[i] == button) { newpress =...
...buttons.cache.length; j<p; j++) { if(gamepadapi.buttons.cache[j] == button) { newpress = false; } } } } } return newpress; }, it loops through pressed buttons and if the button we're looking for is pressed, then the corresponding boolean variable is set to true. if we want to check the button is not held already (so it's a new press), then looping through the cached states from the previous frame does the job — if the button was already pressed, then we ignore the new press and set it to false. implementation we now know what the gamepadapi object looks like and what variables and functions it contain, so let's learn how all this is actually used in the game. to indicate that the gamepad controller is active we can show the user some c...

Implementing controls using the Gamepad API - Game development
is article was tested with a few gamepads, but the author's favorite configuration is a wireless xbox 360 controller and the firefox browser on mac os x. case study: hungry fridge the github game off ii competition ran in november 2013 and enclave games decided to take part in it. the theme for the competition was "change", so they submitted a game where you have to feed the hungry fridge by tapping the healthy food (apples, carrots, lettuces) and avoid the "bad" food (beer, burgers, pizza.) a countdown changes the type of food the fridge wants to eat every few seconds, so you have to be careful and act quickly. the second, hidden "change" implementation is the ability to transform the static fridge into a full-blown moving, shooting and eating machine. when you connect the controller, the ...
...ty to false and removes the variable containing the gamepad object. gamepad object there's lots of useful information contained in the gamepad object, with the states of buttons and axes being the most important: id: a string containing information about the controller. index: a unique indentifier for the connected device. connected: a boolean variable, true if the device is connected. mapping: the layout type of the buttons; standard is the only available option for now. axes: the state of each axis, represented by an array of floating-point values. buttons : the state of each button, represented by an array of gamepadbutton objects containing pressed and value properties. the index variable is useful if we're connecting more than one controller and want to identify them to act ac...
...hod has been updated with a longer explanation and an example piece of code. now the length of the array of gamepads has to be n+1 where n is the number of connected devices — when there's one device connected and it has the index of 1, the array's length is 2 and it will look like this: [null, [object gamepad]]. if the device is disconnected or unavailable, the value for it is set to null. mapping standard the mapping type is now an enumerable object instead of a string: enum gamepadmappingtype { "", "standard" }; this enum defines the set of known mappings for a gamepad. for now, there's only the standard layout available, but new ones may appear in the future. if the layout is unknown, it is set to an empty string. events there were more events available in the spec than jus...

MVC - MDN Web Docs Glossary: Definitions of Web-related terms
esign patterns are based on mvc, such as mvvm (model-view-viewmodel), mvp (model-view-presenter), and mvw (model-view-whatever). the three parts of the mvc software-design pattern can be described as follows: model: manages data and business logic. view: handles layout and display. controller: routes commands to the model and view parts. model view controller example imagine a simple shopping list app. all we want is a list of the name, quantity and price of each item we need to buy this week. below we'll describe how we could implement some of this functionality using mvc. the model the model defines what data the app should contain. if the state of this data changes, then the model will usually notify the view (so the display can change as needed) and sometimes the controller (i...
...need to buy this week. below we'll describe how we could implement some of this functionality using mvc. the model the model defines what data the app should contain. if the state of this data changes, then the model will usually notify the view (so the display can change as needed) and sometimes the controller (if different logic is needed to control the updated view). going back to our shopping list app, the model would specify what data the list items should contain — item, price, etc. — and what list items are already present. the view the view defines how the app's data should be displayed. in our shopping list app, the view would define how the list is presented to the user, and receive the data to display from the model. the controller the controller contains logic that up...
...these actions require the model to be updated, so the input is sent to the controller, which then manipulates the model as appropriate, which then sends updated data to the view. ...

HTML: A good basis for accessibility - Learn web development
the tab focus start to move through the different focusable elements. the focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused. you can then press enter/return to follow a focused link or press a button (we've included some javascript to make the buttons alert a message), or start typing to enter text in a text input. other form elements have different controls, for example, the <select> element can have its options displayed and cycled between using the up and down arrow keys. note: different browsers may have different keyboard control options available. see using native keyboard accessibility for more details. you essentially get this behavior for free, just by using the a...
...to do this, you need to know what the header rows are and if they are heading up rows, columns, etc. this can only be done visually for the above table (see bad-table.html and try the example out yourself). now have a look at our punk bands table example — you can see a few accessibility aids at work here: table headers are defined using <th> elements — you can also specify if t...
...e attribute role="presentation" as this also stops screen readers from reading out alternative text. note: if possible you should use css to display images that are only decorative. more on links links ( the <a> element with an href attribute ), depending on how they are used, can help or harm accessibility. by default, links are accessible in appearance. they can improve accessibility by helping a user quickly navigate to different sections of a document. they can also harm accessibility if their accessible styling is removed or if javascript causes them to behave in unexpected ways. link styling by default, links are visually different from other text in both color and text-decoration, with links being blue and underlined by default, purple and underlined if visited, and with a focus-...

HTML: A good basis for accessibility - Learn web development
the tab focus start to move through the different focusable elements. the focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused. you can then press enter/return to follow a focused link or press a button (we've included some javascript to make the buttons alert a message), or start typing to enter text in a text input. other form elements have different controls, for example, the <select> element can have its options displayed and cycled between using the up and down arrow keys. note: different browsers may have different keyboard control options available. see using native keyboard accessibility for more details. you essentially get this behavior for free, just by using the a...
...to do this, you need to know what the header rows are and if they are heading up rows, columns, etc. this can only be done visually for the above table (see bad-table.html and try the example out yourself). now have a look at our punk bands table example — you can see a few accessibility aids at work here: table headers are defined using <th> elements — you can also specify if t...
...e attribute role="presentation" as this also stops screen readers from reading out alternative text. note: if possible you should use css to display images that are only decorative. more on links links ( the <a> element with an href attribute ), depending on how they are used, can help or harm accessibility. by default, links are accessible in appearance. they can improve accessibility by helping a user quickly navigate to different sections of a document. they can also harm accessibility if their accessible styling is removed or if javascript causes them to behave in unexpected ways. link styling by default, links are visually different from other text in both color and text-decoration, with links being blue and underlined by default, purple and underlined if visited, and with a focus-...

Overflowing content - Learn web development
does not hide content. this would cause data loss. the problem with data loss is that you might not notice. website visitors may not notice. if the submit button on a form disappears and no one can complete the form, this could be a big problem! instead, css overflows in visible ways. you are more likely to see there is a problem. at worst, a site visitor will let you know that content is overlapping. if you restrict a box with a width or a height, css trusts you to know what you are doing. css assumes that you are managing the potential for overflow. in general, restricting the block dimension is problematic when the box contains text. there may be more text than you expected when designing the site, or the text may be larger. (for example, if the user has increased their font size) the ne...
...es exactly what it says: it hides overflow. beware that this can make some content invisible. you should only do this if hiding content won't cause problems. instead, perhaps you would like to add scrollbars when content overflows? using overflow: scroll, browsers with visible scrollbars will always display them—even if there is not enough content to overflow. this offers the advantage of keeping the layout consistent, instead of scrollbars appearing or disappearing, depending upon the amount of content in the container. remove some content from the box below. notice how the scrollbars remain, even if there is no need for scrolling. in the example above, we only need to scroll on the y axis, however we get scrollbars in both axes. to just scroll on the y axis, you could use the overf...
...tes were built with fixed-height containers to align bottoms of boxes. these boxes may otherwise have no relationship to each other. this was fragile. in a legacy application, you may encounter a box where content is overlaying other content on the page. now you can recognize that this happens with overflow. ideally, you will refactor the layout to not rely on fixed-height containers. when developing a site, always keep overflow in mind. test designs with large and small amounts of content. increase the font sizes of text. generally ensure that your css works in a robust way. changing the value of overflow to hide content, or to add scrollbars, is likely to be reserved for a few select use cases. (for example, where you intend to have a scrolling box) test your skills! there is a lot to abs...

Styling tables - Learn web development
order. it is useful to have multiple nested elements available so you can layer styles on top of one another. yes, we could have put both the background image and the linear gradient on the <thead> and <tfoot> elements using multiple background images, but we decided to do it separately for the benefit of older browsers that don't support multiple background images or linear gradients. ...
...do it separately for the benefit of older browsers that don't support multiple background images or linear gradients. zebra striping we wanted to dedicate a separate section to showing you how to implement zebra stripes — alternating rows of color that make the different data rows in your table easier to parse and read. add the following css to the bottom of your style.css file: /* zebra striping */ tbody tr:nth-child(odd) { background-color: #ff33cc; } tbody tr:nth-child(even) { background-color: #e495e4; } tbody tr { background-image: url(noise.png); } table { background-color: #ff33cc; } earlier on you saw the :nth-child selector being used to select specific child elements. it can also be given a formula as a parameter, so it will select a sequence of elements. the form...
...y set column widths by setting width on their headings (<th>). use border-collapse: collapse to make table elements borders collapse into each other, producing a neater and easier to control look. use <thead>, <tbody>, and <tfoot> to break up your table into logical chunks and provide extra places to apply css to, so it is easier to layer styles on top of one another if required. use zebra striping to make alternative rows easier to read. use text-align to line up your <th> and <td> text, to make things neater and easier to follow. 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: tables. summary with s...

Floats - Learn web development
html), and an idea of how css works (study introduction to css.) objective: to learn how to create floated features on webpages, and to use the clear property and other methods of clearing floats. the background of floats the float property was introduced to allow web developers to implement simple layouts involving an image floating inside a column of text, with the text wrapping around the left or right of it. the kind of thing you might get in a newspaper layout. but web developers quickly realized that you can float anything, not just images, so the use of float broadened, for example to fun layout effects such as drop-caps. floats have commonly been used to create entire web site layouts featuring multiple columns of information floated so they sit alongside one ano...
...: 10px; color: #fff; } .box { float: left; margin: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } once again, this is because the float has been taken out of normal flow. clearing the following element doesn't help with this box clearing problem, where you want the bottom of the box to wrap the floated item and wrapping content even if the content is shorter. there are three potential ways to deal with this, two of which work in all browsers — yet are slightly hacky — and a third new way that deals with this situation properly. the clearfix hack the way that this situation has traditionally been dealt with is to use something known as a "clearfix hack". this involves inserting some generated content after ...
...there are three potential ways to deal with this, two of which work in all browsers — yet are slightly hacky — and a third new way that deals with this situation properly. the clearfix hack the way that this situation has traditionally been dealt with is to use something known as a "clearfix hack". this involves inserting some generated content after the box which contains the float and wrapping content, and setting that to clear both. add the following css to our example: .wrapper::after { content: ""; clear: both; display: block; } now reload the page and the box should clear. this is essentially the same as if you had added an html element such as a <div> below the items and set it to clear: both. float example 5 <h1>simple float example</h1> <div class="wrapper"> <div ...

Getting started with HTML - Learn web development
ame as the opening tag, except that it includes a forward slash before the element name. this marks where the element ends. failing to include a closing tag is a common beginner error that can produce peculiar results. the element is the opening tag, followed by content, followed by the closing tag. active learning: creating your first html element edit the line below in the input area by wrapping it with the tags <em> and </em>. to open the element, put the opening tag <em> at the start of the line. to close the element, put the closing tag </em> at the end of the line. doing this should give the line italic text formatting! see your changes update live in the output area. if you make a mistake, you can clear your work using the reset button. if you get really stuck, press the show solut...
...s on the page. for example, a block-level element might represent headings, paragraphs, lists, navigation menus, or footers. a block-level element wouldn't be nested inside an inline element, but it might be nested inside another block-level element. inline elements are contained within block-level elements, and surround only small parts of the document’s content. (not entire paragraphs or groupings of content) an inline element will not cause a new line to appear in the document. it is typically used with text. for example, as an <a> element (hyperlink) or emphasis elements such as <em> or <strong>. consider the following example: <em>first</em><em>second</em><em>third</em> <p>fourth</p><p>fifth</p><p>sixth</p> <em> is an inline element. as you see below, the first three elements sit...
...he contents of the <body> element, in this case). sharpen your skills by implementing the following tasks: just below the opening tag of the <body> element, add a main title for the document. this should be wrapped inside an <h1> opening tag and </h1> closing tag. edit the paragraph content to include text about a topic that you find interesting. make important words stand out in bold by wrapping them inside a <strong> opening tag and </strong> closing tag. add a link to your paragraph, as explained earlier in the article. add an image to your document. place it below the paragraph, as explained earlier in the article. earn bonus points if you manage to link to a different image (either locally on your computer, or somewhere else on the web). if you make a mistake, you can always rese...

Functions — reusable blocks of code - Learn web development
alled ' + name + '.'); } both functions you want to call are called greeting(), but you can only ever access the first.js file's greeting() function (the second one is ignored). in addition, attempting to declare the name variable a second time with the let keyword in the second.js file results in an error. note: you can see this example running live on github (see also the source code). keeping parts of your code locked away in functions avoids such problems, and is considered the best practice. it is a bit like a zoo. the lions, zebras, tigers, and penguins are kept in their own enclosures, and only have access to the things inside their enclosures — in the same manner as the function scopes. if they were able to get into other enclosures, problems would occur. at best, different an...
...ble inside unfamiliar habitats — a lion or tiger would feel terrible inside the penguins' watery, icy domain. at worst, the lions and tigers might try to eat the penguins! the zoo keeper is like the global scope — he or she has the keys to access every enclosure, to restock food, tend to sick animals, etc. active learning: playing with scope let's look at a real example to demonstrate scoping. first, make a local copy of our function-scope.html example. this contains two functions called a() and b(), and three variables — x, y, and z — two of which are defined inside the functions, and one in the global scope. it also contains a third function called output(), which takes a single parameter and outputs it in a paragraph on the page. open the example up in a browser and in your...
...nd reload again, and try this again in your javascript console: a(); b(); this time the a() and b() calls will both return an annoying referenceerror: variable name is not defined error — this is because the output() calls and the variables they are trying to print are not in the same function scopes — the variables are effectively invisible to those function calls. note: the same scoping rules do not apply to loop (e.g. for() { ... }) and conditional blocks (e.g. if() { ... }) — they look very similar, but they are not the same thing! take care not to get these confused. note: the referenceerror: "x" is not defined error is one of the most common you'll encounter. if you get this error and you are sure that you have defined the variable in question, check what scope it is in...

Image gallery - Learn web development
ed in the displayed-img <img> element. attach an onclick handler to the <button> so that when it is clicked, a darken effect is applied to the full-size image. when it is clicked again, the darken effect is removed again. to give you more of an idea, have a look at the finished example (no peeking at the source code!) steps to complete the following sections describe what you need to do. ...
... in each loop iteration, replace the xxx placeholder value with a string that will equal the path to the image in each case. ...
... in an online shareable editor (as mentioned in step 1 above). ...

Client-side storage - Learn web development
milar principles, but has different uses. it consists of javascript apis that allow you to store data on the client (i.e. on the user's machine) and then retrieve it when needed. this has many distinct uses, such as: personalizing site preferences (e.g. showing a user's choice of custom widgets, color scheme, or font size). persisting previous site activity (e.g. storing the contents of a shopping cart from a previous session, remembering if a user was previously logged in). saving data and assets locally so a site will be quicker (and potentially less expensive) to download, or be usable without a network connection. saving web application generated documents locally for use offline often client-side and server-side storage are used together. for example, you could download a batch of...
...sists data for as long as the browser is open (the data is lost when the browser is closed) and the second one persists data even after the browser is closed and then opened again. we'll use the second one in this article as it is generally more useful. the storage.setitem() method allows you to save a data item in storage — it takes two parameters: the name of the item, and its value. ...
... the storage.removeitem() method takes one parameter — the name of a data item you want to remove — and removes that item out of web storage. ...

Drawing graphics - Learn web development
of the image on the canvas. we just want to keep its original size, so we specify 102 and 148 as the width and height. now we'll alter the sprite value after each draw — well, after some of them anyway. add the following block to the bottom of the draw() function: if (posx % 13 === 0) { if (sprite === 5) { sprite = 0; } else { sprite++; } } we are wrapping the whole block in if (posx % 13 === 0) { ... }. we use the modulo (%) operator (also known as the remainder operator) to check whether the posx value can be exactly divided by 13 with no remainder. if so, we move on to the next sprite by incrementing sprite (wrapping to 0 after we're done with sprite #5). this effectively means that we are only updating the sprite on every 13th frame, or rough...
...as> element created by the renderer to the document's <body>. now anything the renderer draws will be displayed in our window. next, we want to create the cube we'll display on the canvas. ...
...he document's <body>. now anything the renderer draws will be displayed in our window. next, we want to create the cube we'll display on the canvas. ...

Manipulating documents - Learn web development
rerun our sizing code each time it changes. add the following to the bottom of your code: window.onresize = function() { winwidth = window.innerwidth; winheight = window.innerheight; div.style.width = winwidth + 'px'; div.style.height = winheight + 'px'; } note: if you get stuck, have a look at our finished window resize example (see it live also). active learning: a dynamic shopping list to round off the article, we'd like to set you a little challenge — we want to make a simple shopping list example that allows you to dynamically add items to the list using a form input and button. when you add an item to the input and press the button: the item should appear in the list. each item should be given a button that can be pressed to delete that item off the list. the in...
...should appear in the list. each item should be given a button that can be pressed to delete that item off the list. the input should be emptied and focused ready for you to enter another item. the finished demo will look something like this: to complete the exercise, follow the steps below, and make sure that the list behaves as described above. to start with, download a copy of our shopping-list.html starting file and make a copy of it somewhere. you'll see that it has some minimal css, a list with a label, input, and button, and an empty list and <script> element. you'll be making all your additions inside the script. create three variables that hold references to the list (<ul>), <input>, and <button> elements. create a function that will run in response to the button being clic...
... the list item. set the text content of the span to the input element value you saved earlier, and the text content of the button to 'delete'. append the list item as a child of the list. attach an event handler to the delete button, so that when clicked it will delete the entire list item it is inside. finally, use the focus() method to focus the input element ready for entering the next shopping list item. note: if you get really stuck, have a look at our finished shopping list (see it running live also.) summary we have reached the end of our study of document and dom manipulation. at this point you should understand what the important parts of a web browser are with respect to controlling documents and other aspects of the user's web experience. most importantly, you should under...

Basic math in JavaScript — numbers and operators - Learn web development
ata types sometimes you might end up with a number that is stored as a string type, which makes it difficult to perform calculations with it. this most commonly happens when data is entered into a form input, and the input type is text. there is a way to solve this problem — passing the string value into the number() constructor to return a number version of the same value. ...
...ered into a form input, and the input type is text. there is a way to solve this problem — passing the string value into the number() constructor to return a number version of the same value. for example, try typing these lines into your console: let mynumber = '74'; mynumber + 3; you end up with the result 743, not 77, because mynumber is actually defined as a string. you can test this by typing in the following: typeof mynumber; to fix the calculation, you can do this: number(mynumber) + 3; arithmetic operators arithmetic operators are the basic operators that we use to do sums in javascript: operator name purpose example + addition adds two numbers together. 6 + 9 - subtraction subtracts the right number from the left. 20 ...
...in each case, see if you can guess what the value is before you type in the second line. note that you can quite happily use other variables on the right hand side of each expression, for example: let x = 3; // x contains the value 3 let y = 4; // y contains the value 4 x *= y; // x now contains the value 12 note: ...

Handling text — strings in JavaScript - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and css, an understanding of what javascript is. ...
... let sgldbl = 'would you eat a "fish supper"?'; let dblsgl = "i'm feeling blue."; sgldbl; dblsgl; however, you can't include the same quote mark inside the string if it's being used to contain them. the following will error, as it confuses the browser as to where the string ends: let bigmouth = 'i've got no right to take my place...'; this leads us very nicely into our next subject. escaping characters in a string to fix our previous problem code line, we need to escape the problem quote mark. escaping characters means that we do something to them to make sure they are recognized as text, not part of the code. in javascript, we do this by putting a backslash just before the character. try this: let bigmouth = 'i\'ve got no right to take my place...'; bigmouth; this works fine. you...
...r console: 'front ' + 242; you might expect this to return an error, but it works just fine. trying to represent a string as a number doesn't really make sense, but representing a number as a string does, so the browser rather cleverly converts the number to a string and concatenates the two strings. you can even do this with two numbers — you can force a number to become a string by wrapping it in quote marks. try the following (we are using the typeof operator to check whether the variable is a number or a string): let mydate = '19' + '67'; typeof mydate; if you have a numeric variable that you want to convert to a string but not change otherwise, or a string variable that you want to convert to a number but not change otherwise, you can use the following two constructs: ...

React interactivity: Events and state - Learn web development
note: we decided to name our callback prop addtask to make it easy to understand what the prop will do. another common convention you may well come across in react code is to prefix callback prop names with the word on, followed by the name of the event that will cause them to be run. for instance, we could have given our form a prop of onsubmit w...
...is what we want for our initial state. const [name, setname] = usestate(''); reading user input before we can change the value of name, we need to capture a user's input as they type. for this, we can listen to the onchange event. let’s write a handlechange() function, and listen for it on the <input /> tag. // near the top of the `form` component function handlechange(e) { console.log("typing!"); } // down in the return statement <input type="text" id="new-todo-input" classname="input input__lg" name="text" autocomplete="off" value={name} onchange={handlechange} /> currently, your input’s value will not change as you type, but your browser will log the word "typing!" to the javascript console, so we know our event listener is attached to the input. in order to change...
... into app.js, so that we can store our tasks in state — update your react import line to the following: import react, { usestate } from "react"; we want to pass props.tasks into the usestate() hook – this will preserve its initial state. add the following right at the top of your app() function definition: const [tasks, settasks] = usestate(props.tasks); now, we can change our tasklist mapping so that it is the result of mapping tasks, instead of props.tasks. your tasklist constant declaration should now look like so: const tasklist = tasks.map(task => ( <todo id={task.id} name={task.name} completed={task.completed} key={task.id} /> ) ); adding a task we’ve now got a settasks hook that we can use in our addtask() function to update o...

Getting started with Svelte - Learn web development
work? being a compiler, svelte can extend html, css, and javascript, generating optimal javascript code without any runtime overhead. to achieve this, svelte extends vanilla web technologies in the following ways: it extends html by allowing javascript expressions in markup and providing directives to use conditions and loops, in a fashion similar to handlebars. it extends css by adding a scoping mechanism, allowing each component to define their own styles without the risk of clashing with other component's styles. it extends javascript by reinterpreting specific directives of the language to achieve true reactivity and ease component state management. the compiler only intervenes in very specific situations and only in the context of svelte components. extensions to the javascript la...
...state, and they are reactive by default. we will explain in detail what this means later on. <script> export let name; </script> svelte uses the export keyword to mark a variable declaration as a property (or prop), which means it becomes accessible to consumers of the component (e.g. other components). this is one example of svelte extending javascript syntax to make it more useful, while keeping it familiar. the markup section in the markup section you can insert any html you like, and in addition you can insert valid javascript expression inside single curly brackets ({}). in this case we are embedding the value of the name prop right after the hello text. <main> <h1>hello {name}!</h1> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build sv...
... building our first proper application — a todo list. before we do that, however, let's recap some of the things we’ve learned. in svelte: we define the script, style and markup of each component in a single .svelte file. component props are declared with the export keyword. svelte components can be used just by importing the corresponding .svelte file. components styles are scoped, keeping them from clashing with each other. in the markup section you can include any javascript expression by putting it between curly braces. the top-level variables of a component constitute its state. reactivity is fired just by assigning a new value to a top level variable. previous overview: client-side javascript frameworks next in this module introduction to client-side framework...

Creating our first Vue component - Learn web development
. vue templates are currently only allowed a single root element — one element needs to wrap everything inside the template section (this will change when vue 3 comes out). we'll use a <div> for that root element. add an empty <div> inside your component template now. inside that <div>, let's add a checkbox and a corresponding label. add an id to the checkbox, and a for attribute mapping the checkbox to the label, as shown below. <template> <div> <input type="checkbox" id="todo-item" checked="false" /> <label for="todo-item">my todo item</label> </div> </template> using todoitem inside our app this is all fine, but we haven’t added the component to our app yet, so there’s no way to test it and see if everything is working. let’s add it now. open up...
... registering props in vue, there are two ways to register props: the first way is to just list props out as an array of strings. each entry in the array corresponds to the name of a prop. the second way is to define props as an object, with each key corresponding to the prop name. listing props as an object allows you to specify default values, mark props as required, perform basic object typing (specifically around javascript primitive types), and perform simple prop validation. note: prop validation only happens in development mode, so you can't strictly rely on it in production. additionally, prop validation functions are invoked before the component instance is created, so they do not have access to the component state (or other props). for this component, we’ll use the object...
...t in errors with assistive technology since the id is needed to correctly map labels to their checkboxes. to fix this, we can programmatically set the id in the component data. we can use the lodash package's uniqueid() method to help keep the index unique. this package exports a function that takes in a string and appends a unique integer to the end of the prefix. this will be sufficient for keeping component ids unique. let’s add the package to our project with npm; stop your server and enter the following command into your terminal: npm install --save lodash.uniqueid note: if you prefer yarn, you could instead use yarn add lodash.uniqueid. we can now import this package into our todoitem component. add the following line at the top of todoitem.vue’s <script> element: import uniq...

Understanding client-side JavaScript frameworks - Learn web development
y and build it for production. 2. starting our svelte todo list app now that we have a basic understanding of how things work in svelte, we can start building our example app: a todo list. in this article we will first have a look at the desired functionality of our app, then we'll create a todos.svelte component and put static markup and styles in place, leaving everything ready to start developing our to-do list app features, which we'll go on to in subsequent articles. 3. dynamic behavior in svelte: working with variables and props now that we have our markup and styles ready we can start developing the required features for our svelte to-do list app. in this article we'll be using variables and props to make our app dynamic, allowing us to add and delete todos, mark them as complete, a...
...on. it is very important to be able to get help with learning a complex subject, especially when you are just starting out. we don't have the resources to cover all modern frameworks. that list would be very difficult to keep up-to-date anyway, as new ones appear all the time. as a beginner, trying to choose what to focus on out of the huge number of choices available is a very real problem. ...
... as a beginner, trying to choose what to focus on out of the huge number of choices available is a very real problem. keeping the list short is therefore helpful. we want to say this upfront — we've not chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. we just think they score highly on the above criteria. note that we were hoping to have more frameworks included upon initial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. if your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! get in touch with us via matrix, or discourse, or drop us a mail on the mdn-admins list. ...

Introduction to cross browser testing - Learn web development
of the site without this feature to users of older ie versions. you should compile a list of the potential problem areas. note: you can find browser support information for technologies by looking up the different features on mdn — the site you're on! you should also consult caniuse.com, for some further useful details. once you've agreed on these details, you can go ahead and start developing the site. development now on to the development of the site. you should split the different parts of the development into modules, for example you might split the different site areas up — home page, product page, shopping cart, payment workflow, etc. you might then further subdivide these — implement common site header and footer, implement product page detail view, implement persistent sh...
...he site. development now on to the development of the site. you should split the different parts of the development into modules, for example you might split the different site areas up — home page, product page, shopping cart, payment workflow, etc. you might then further subdivide these — implement common site header and footer, implement product page detail view, implement persistent shopping cart widget, etc. there are multiple general strategies to cross browser development, for example: get all the functionality working as closely as possible in all target browsers. this may involve writing different code paths that reproduce functionality in different ways aimed at different browsers, or using a polyfill to mimic any missing support using javascript or other technologies, or u...
... normally your development will involve a combination of the above three approaches. the most important thing is that you test each small part before committing it — don't leave all the testing till the end! testing/discovery after each implementation phase, you will need to test the new functionality. to start with, you should make sure there are no general issues with your code that are stopping your feature from working: test it in a couple of stable browsers on your system, like firefox, safari, chrome, or ie/edge. do some lo-fi accessibility testing, such as trying to use your site with only the keyboard, or using your site via a screen reader to see if it is navigable. test on a mobile platform, such as android or ios. at this point, fix any problems you find with your new cod...

Introducing a complete toolchain - Learn web development
lude tests before you deploy to your production server to ensure your software works as intended — this already sounds like a necessary toolchain. for our sample project, we'll be using a toolchain specifically designed to aid our software development and support the technical choices made during the software design phase. we will however be avoiding any superfluous tooling, with the aim of keeping complexity to a minimum. for example, we could have included a tool to minimize our svg file sizes during build. however, this project has only 4 svg images, which were manually minified using svgo before adding them to the project. a couple of prerequisites besides the tools we're going to install that contribute to our toolchain, we mentioned two web services in the above list of tools. let...
...e npm tool that these particular dependencies are only needed for development (npm therefore lists them in the package.json file under devdependencies, not dependencies). this means that if this project is installed in production mode these dependencies will not be installed. a "typical" project can have many development dependencies which are not needed to actually run the code in production. ...
...many development dependencies which are not needed to actually run the code in production. keeping them as separate dependencies reduces any unnecessary work when deploying to production (which we will look at in the next chapter). before starting on the development of the actual application code, a little configuration is required for our tools to work properly. it's not a prerequisite of developing for the web, but it's useful to have the tools configured correctly if they’re going to help catch errors during development — which eslint is particularly useful for. configuring our tools in the root of the project (not in the src directory), we will add configuration files to configure some of our tools, namely prettier and eslint. this is general practice for tool configuration — you ...

Accessibility API cross-reference
this table is the start of a cross-reference, so we can spot the differences and similarities in the apis. aria is a standard developed as part of the web accessibility initiative, which uses markup syntax quite familiar to users of html, xml, sgml and others. the roles it specifies have already informed the 'semantic elements' of html5 (such as main and footer), but there is not a one-to-one mapping between the aria roles and the semantics of html5. aria can be used to 'fill out' the missing semantics of html, but may also be used in other markup languages (such as svg) and expresses semantics using attributes, compared with html, which tends to have distinct named elements for its roles. for all these reasons, aria and html are given separate columns. aria abstract roles should not be used ...
...on of one or more rows with one or more cells where some or all cells in the grid are focusable by using methods of two-dimensional navigation, such as directional arrow keys, e.g. a spreadsheet. gridcell a type of mouse pointer used for resizing windows grip n/a n/a n/a probably a group box (titledbox in mozilla) grouping panel panel group <fieldset>, <div> a heading for a section of the page. in aria, the heading level is expressed with the aria-level attribute. heading <h1> ... <h6> <h1> ... <h6>. <h> is also available but its use is not recommended because of lack of suitable tools - and the heading level is undefined click on this thing and...
...aria permits this only with button role pressed pressed pressed aria-pressed=true ...

Gecko info for Windows accessibility vendors
eful for them to receive a child id that helps them correlate back to a known object. we provide support for this technique via isimpledomnode::get_nodeinfo(), which returns a uniqueid for any iaccessible that can be cached in the internal model. when an event is received, the negative childid should match one of these cached uniqueid's, if the entire document has been stored and kept current. keeping an internal cache current means getting new subtrees of iaccessibles whenever an event_reorder is received, indicating important changes have invalidated part of the model. msaa features we do not support no one has yet asked for the following features (if you need something, please contact the mozilla accessibility community ): iaccessible methods that we don't currently support: ...
...indicates that the absence of state_checked should be spoken as // "unchecked", and t...
... pane. sets state_readonly unless it's an editable frame via designmode. role_chart not supported. n/a role_dialog xul: <dialog> dhtml: role="wairole:dialog" accname() exposes the <title> of the current dialog. role_border not supported. ...

Accessible Toolkit Checklist
t api for each platform. since the individual widgets predominately come from the operating system, they already implement standard keyboard commands and follow the operating system's visual theme. also, assistive technologies already understand native widgets so it is only necessary to implement microsoft active accessibility (msaa) api support for custom controls. however, be aware that the wrapping layer will introduce accessibility bugs, and thus you will need to test extensively and fill in the holes. you will also need to provide a way for custom and owner drawn controls to easily accessibility api support, as wxwidgets does. there will be custom and owner drawn controls -- there always are. for example, lists of checkboxes are implemented in windows with images of checked and unchecked ...
...'t localize it. lists and combo boxes when a list is tabbed to, select the first item if nothing else is already selected f4, alt+down or alt+up toggle a combo box open and closed escape closes combo box if it was open (be careful not to have it cancel entire dialog) up/down arrow key navigation. shift+up and shift+down move and extend the selection. typing letter or several letters to navigate (same letter goes to each item starting with that, different letters go to first item starting with that entire string). multiple selection is possible with ctrl+arrow to move focus without selecting, then space to select item, shift+space to select to current point or control+space to toggle selection of current item shift+f10 or context menu key...
... space bar toggles checkboxes the enter key should activate an item if double clicking would do so msaa support, including accessible selection, exposing current level and posi...

Security best practices for Firefox front-end engineers
existing security controls sanitizing all strings that enter the dom through apis such as innerhtml when running system-privileged chrome code, we sanitize all html fragments that are created for chrome-privileged documents. this policy includes all dom apis that take a string and parse it into a dom tree. ...
...omments sanitizerdropforms sanitizerlogremovals the sanitizer removes all scripts (script tags, event handlers) and form elements (form, input, keygen, option, optgroup, select, button, datalist). the canonical truth for the list of whitelisted elements is the source code. ...
...rly on in the development cycle and before shipping the code. linter rules against unsanitized dom interaction the security assurance team maintains an eslint rule that disallows unsafe uses of innerhtml and similar dom apis. the linter makes an exception for code that uses string literals that are hard coded in the source code, assuming benevolent developers. developers are able to avoid tripping the rule by using escaping functions in combination with template strings, for example: bar.innerhtml = escapehtml`<a href='${url}'>about</a>`; in system-privileged chrome code, any kind of remaining scripts will still be removed by our sanitizer. appendix list of disallowed dom apis innerhtml outerhtml insertadjacenthtml() createcontextualfragment() document.write() document.write...

Index
erest in the technical aspects involved in localization. 2 application translation with mercurial android, draft, editing, firefox, lightning, localization, mercurial, seamonkey, translate, patch, thunderbird first, get the required programs to compile mozilla applications like firefox and thunderbird from build instructions. this is only necessary once. 3 bootstrapping a new locale localization, mercurial, translate, bit bucket (see also https://developer.mozilla.org/en/create_a_new_localization) 4 encodings for localization files internationalization, localization when creating a localization for mozilla products, it’s important to be aware of the encoding of the files that you generate. 5 index localization ...
...r localization team have decided, together, to follow when localizing mozilla products and web sites. you are free to add, edit, remove, and localize everything in this section according to how the localization team for your language agrees. all we ask is that you name this page according to this example, "mozilla content in spanish (es-mx)" and add your locale code tag at the bottom. enjoy developing your style guide! 31 patching a localization localization say you have found a problem with an existing localization. more specifically, it's a problem with an already released localization. what do you do now? well, you have come to the right place! this page will walk you through creating a patch for an existing localization. the steps below are fairly generic; for the most...
...) is a characteristic found in an application or content that enables localization. the following list contains links to pages that highlight steps that can be taken to make web content localizable. the documentation is divided into 4 parts: 35 creating localizable web applications internationalization, localizability, localization, web development an important step of developing a web application or creating web content is making sure that it can be localized. listed below are good practices and recommendations that should be followed in order to make your content easily localizable. 36 creating localizable web apps no summary! 37 creating localizable web content internationalization, localizability, localization, web development ...

Localizing with Koala
rting a new localization, you may not have a remote repository set up yet. it is still recommended to use mercurial locally to version your local files. just type a single dot (".") in the url field to enable mercurial support in koala. branch: default. revision: leave empty. user: type your name and your e-mail address in the form: "firstname lastname <me@example.com>" (be sure to type the wrapping quotes: "") note that you no longer have to edit the location now, it automatically fills in when you check the "mercurial" checkbox (e.g. "c:\mozilla\l10n\locale\x-testing\3.6" if you enabled mercurial (recommended), koala will ask you if you wish to clone the remote repository. click "ok" (even if you're creating a new localization and there is no remote repository). existing localizations: ...
...over the magnifying glass icon in the search bar. once you translated the searchendcap.label entity, add the other one from this file, i.e. cmd_enginemanager.label. you can right-click it and choose "add entity" as you did previously, or just double-click the entity name to add it to the file. note how koala is smart enough to insert this entity before searchendcap.label. this is helpful for keeping the localization files clean and tidy at all times. the string to translated is selected so that you can translate it without any further clicking. when you are done with translating the cmd_enginemanager.label entity, save the file. now let's create the other file. double-click on search.properties and click "ok" when koala asks if you want to create this file. from the sidebar, add the cmd_add...
...ate the other file. double-click on search.properties and click "ok" when koala asks if you want to create this file. from the sidebar, add the cmd_addfoundengine string to the newly-created search.properties file in your locale file structure. translate the cmd_addfoundengine string. notice that the .properties files have a different syntax than the dtd files. they're just a simple key=value mapping. save the file to save your work. re-running the comparison a common scheme of working with the compare-locales tools (included in koala) is to incrementally translate and commit the files and then re-run comparison to see what is left to be translated. to make sure you're always translating the most recent en-us reference, you should update the source repository before you start working. ope...

Leak-hunting strategies and tips
lease do, since it's often hard to be sure to break the cycle in every last case. sometimes these cycles extend through js objects (discussed further below), and since js is garbage-collected, every pointer acts like an owning pointer and the potential for fan-out is larger. see bug 106860 and bug 84136 for examples. (is this advice still accurate now that we have a cycle collector? --jesse) dropping a reference on the floor by: forgetting to release (because you weren't using nscomptr when you should have been): see bug 99180 or bug 93087 for an example or bug 28555 for a slightly more interesting one. this is also a frequent problem around early returns when not using nscomptr. double-addref: this happens most often when assigning the result of a function that returns an addrefed p...
...t_addref(). see bug 76091 or bug 49648 for an example. [obscure] double-assignment into the same variable: if you release a member variable and then assign into it by calling another function that does the same thing, you can leak the object assigned into the variable by the inner function. (this can happen equally with or without nscomptr.) see bug 38586 and bug 287847 for examples. dropping a non-refcounted object on the floor (especially one that owns references to reference counted objects). see bug 109671 for an example. destructors that should have been virtual: if you expect to override an object's destructor (which includes giving a derived class of it an nscomptr member variable) and delete that object through a pointer to the base class using delete, its destructor better b...
...c) andthen run the balance trees (which are much smaller) through the post-processing. getting symbol information for system libraries windows setting the environment variable _nt_symbol_path to something like symsrv*symsrv.dll*f:\localsymbols*http://msdl.microsoft.com/download/symbols as described in microsoft's article. this needs to be done when running, since we do the address to symbol mapping at runtime. linux many linux distros provide packages containing external debugging symbols for system libraries. fix_stacks.py uses this debugging information (although it does not verify that they match the library versions on the system). for example, on fedora, these are in *-debuginfo rpms (which are available in yum repositories that are disabled by default, but easily enabled by editing...

Phishing: a short definition
f phishing, and various forms of identity theft, to be as high as $5 billion usd. the impact has not improved much since. phishing is an attempt to collect sensitive information, such as usernames, passwords, and financial details by disguising as a trustworthy entity online. a relatively simple, yet effective, phishing scheme is sending an email with a fake invoice of a person’s favorite shopping site. this email will usually contain a link pretending to lead to the original service, but in reality, taking the victim to an attacker-controlled website. the login portal might resemble the trusted website's login page very closely, and convince users to enter their credentials, letting others hijack their account. past and current countermeasures various technical, and social approaches, e...
...supports verification, via sms, it sends a text message with a one-time pin to the user’s phone number. the user then enter this pin after the web service verifies the username and password. this was chosen as an early second factor 'protocol' as text messages are widely supported, however, even nist no longer recommends sms verification. the ss7 telephony system is vulnerable, making eavesdropping, or rerouting text messages quite trivial. one-time password algorithms a better way to use phones as second factor, are one-time password (otp) protocols, like totp and hotp. at service registration, the provider will often generate a qr code to be read by an otp app. this qr code is nothing more than a random, secret key, that is stored on the user’s phone. after verifying username and pass...
...password, the user is prompted to open the otp app and enter the corresponding 6-digit code, representing a hashed version of the secret key and a nonce - potentially time-based. otp is the most widely supported second factor schemes and can be used to secure your most important accounts. unfortunately, some users still feel it's too tedious unlocking a phone, opening the otp app, and manually typing a few digits each time a provider requests a new token. this can be phished by an attacker, though with totp apps the attacker has limited time to make their unauthorized login. ...

FC_UnwrapKey
pwrappedkey [in] pointer to the wrapped key. uswrappedkeylen [in] length of the wrapped key. ptemplate [in] pointer to the list of attributes for the unwrapped key. ...
...pwrappedkey [in] pointer to the wrapped key. uswrappedkeylen [in] length of the wrapped key. ptemplate [in] pointer to the list of attributes for the unwrapped key. ...
...pwrappedkey [in] pointer to the wrapped key. uswrappedkeylen [in] length of the wrapped key. ptemplate [in] pointer to the list of attributes for the unwrapped key. usattributecount [in] number of attributes in the template. ...

NSS tools : ssltab
stead of outputting raw data, the command interprets each record as a numbered line of hex values, followed by the same data as ascii characters. the two parts are separated by a vertical bar. nonprinting characters are replaced by dots. -f turn on fancy printing. output is printed in colored html. data sent from the client to the server is in blue; the server's reply is in red. when used with looping mode, the different connections are separated with horizontal lines. you can use this option to upload the output into a browser. -s turn on ssl parsing and decoding. the tool does not automatically detect ssl sessions. if you are intercepting an ssl connection, use this option so that the tool can detect and decode ssl structures. if the tool detects a certificate chain, it saves the der-encoded...
...he files are named cert.0x, where x is the sequence number of the certificate. if the -s option is used with -h, two separate parts are printed for each record: the plain hex/ascii output, and the parsed ssl output. -x turn on hex/ascii printing of undecoded data inside parsed ssl records. used only with the -s option. this option uses the same output format as the -h option. -l prefix turn on looping; that is, continue to accept connections rather than stopping after the first connection is complete. -p port change the default rendezvous port (1924) to another port. the following are well-known port numbers: * http 80 * https 443 * smtp 25 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps 563 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept a...
...t a basic, printable interpretation of the data, use the -h option, or, if you are looking at an ssl connection, the -s option. you will notice that the page you retrieved looks incomplete in the browser. this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images. to make the tool continue to accept connections, switch on looping mode with the -l option. the following examples show the output from commonly used combinations of options. example 1 $ ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output connected to interzone.mcom.com:443 -->; [ alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-length = 39 (0x27) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x01008...

NSS tools : ssltap
stead of outputting raw data, the command interprets each record as a numbered line of hex values, followed by the same data as ascii characters. the two parts are separated by a vertical bar. nonprinting characters are replaced by dots. -f turn on fancy printing. output is printed in colored html. data sent from the client to the server is in blue; the server's reply is in red. when used with looping mode, the different connections are separated with horizontal lines. you can use this option to upload the output into a browser. -s turn on ssl parsing and decoding. the tool does not automatically detect ssl sessions. if you are intercepting an ssl connection, use this option so that the tool can detect and decode ssl structures. if the tool detects a certificate chain, it saves the der-encoded...
...he files are named cert.0x, where x is the sequence number of the certificate. if the -s option is used with -h, two separate parts are printed for each record: the plain hex/ascii output, and the parsed ssl output. -x turn on hex/ascii printing of undecoded data inside parsed ssl records. used only with the -s option. this option uses the same output format as the -h option. -l prefix turn on looping; that is, continue to accept connections rather than stopping after the first connection is complete. -p port change the default rendezvous port (1924) to another port. the following are well-known port numbers: * http 80 * https 443 * smtp 25 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps 563 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept a...
...t a basic, printable interpretation of the data, use the -h option, or, if you are looking at an ssl connection, the -s option. you will notice that the page you retrieved looks incomplete in the browser. this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images. to make the tool continue to accept connections, switch on looping mode with the -l option. the following examples show the output from commonly used combinations of options. example 1 $ ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output connected to interzone.mcom.com:443 -->; [ alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-length = 39 (0x27) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x01008...

NSS Tools ssltap
ead of outputting raw data, the command interprets each record as a numbered line of hex values, followed by the same data as ascii characters. the two parts are separated by a vertical bar. nonprinting characters are replaced by dots. -f turn on fancy printing. output is printed in colored html. data sent from the client to the server is in blue; the server's reply is in red. when used with looping mode, the different connections are separated with horizontal lines. you can use this option to upload the output into a browser. -s turn on ssl parsing and decoding. the tool does not automatically detect ssl sessions. if you are intercepting an ssl connection, use this option so that the tool can detect and decode ssl structures. if the tool detects a certificate chain, it saves the der-enco...
.... the files are named cert.0x, where x is the sequence number of the certificate. if the -s option is used with -h, two separate parts are printed for each record: the plain hex/ascii output, and the parsed ssl output. -x turn on hex/ascii printing of undecoded data inside parsed ssl records. used only with the -s option. this option uses the same output format as the -h option. -l turn on looping; that is, continue to accept connections rather than stopping after the first connection is complete. -p port change the default rendezvous port (1924) to another port. the following are well-known port numbers: http 80 https 443 smtp 25 ftp 21 imap 143 imaps 993 (imap over ssl) nntp 119 nntps 563 (nntp over ssl) examples you can use the ssl debugging tool to inter...
... a basic, printable interpretation of the data, use the -h option, or, if you are looking at an ssl connection, the -s option. you will notice that the page you retrieved looks incomplete in the browser. this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images. to make the tool continue to accept connections, switch on looping mode with the -l option. the following examples show the output from commonly used combinations of options. example 1 the s and x options in this example turn on ssl parsing and show undecoded values in hex/ascii format. the output is routed to a text file. command ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output output connected to interzone.mcom.com:443--> [allo...

NSS tools : ssltap
umbered line of hex values, followed by the same data as ascii characters. the two parts are separated by a vertical bar. nonprinting characters are replaced by dots. -f turn on fancy printing. output is printed in colored html. data sent from the client to the server is in blue; the server's reply is in red. when used with looping mode, the different connections are separated with horizontal lines. you can use this option to upload the output into a browser. -s turn on ssl parsing and decoding. the tool does not automatically detect ssl sessions. if you are intercepting an ssl connection, use this option so that the tool can detect and decode ssl struct...
... if the -s option is used with -h, two separate parts are printed for each record: the plain hex/ascii output, and the parsed ssl output. -x turn on hex/ascii printing of undecoded data inside parsed ssl records. used only with the -s option. this option uses the same output format as the -h option. -l prefix turn on looping; that is, continue to accept connections rather than stopping after the first connection is complete. -p port change the default rendezvous port (1924) to another port. the following are well-known port numbers: * http 80 * https 443 * smtp 25 * ftp 21 * imap 143 * imaps 993 (imap over s...
...table interpretation of the data, use the -h option, or, if you are looking at an ssl connection, the -s option. you will notice that the page you retrieved looks incomplete in the browser. this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images. to make the tool continue to accept connections, switch on looping mode with the -l option. the following examples show the output from commonly used combinations of options. example 1 $ ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output connected to interzone.mcom.com:443 -->; [ alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-length = 39 (0x27) sid-length = ...

Scripting Java
s of the packages variable are all the top-level java packages, such as java and com. for example, we can access the value of the java package: js> packages.java [javapackage java] as a handy shortcut, rhino defines a top-level variable java that is equivalent to packages.java. so the previous example could be even shorter: js> java [javapackage java] we can access java classes simply by stepping down the package hierarchy: js> java.io.file [javaclass java.io.file] if your scripts access a lot of different java classes, it can get awkward to use the full package name of the class every time. rhino provides a top-level function importpackage that serves the same purpose as java's import declaration. for example, we could import all of the classes in the java.io package and access class ...
...age you could use importpackage() as follows: $ java org.mozilla.javascript.tools.shell.main js> importpackage(packages.org.mozilla.javascript); js> context.currentcontext; org.mozilla.javascript.context@bb6ab6 occasionally, you will see examples that use the fully qualified name of the package instead of importing using the importpackage() method. this is also acceptable, it just takes more typing. using a fully qualified name, the above example would look as follows: $ java org.mozilla.javascript.tools.shell.main js> jspackage = packages.org.mozilla.javascript; [javapackage org.mozilla.javascript] js> jspackage.context.currentcontext; org.mozilla.javascript.context@bb6ab6 alternatively, if you want to import just one class from a package you can do so using the importclass() method. th...
...lls the file object's getname and isdirectory methods. js> f.name test.txt js> f.directory false calling overloaded methods the process of choosing a method to call based upon the types of the arguments is called overload resolution. in java, overload resolution is performed at compile time, while in rhino it occurs at runtime. this difference is inevitable given javascript's use of dynamic typing as was discussed in chapter 2: since the type of a variable is not known until runtime, only then can overload resolution occur. as an example, consider the following java class that defines a number of overloaded methods and calls them. public class overload { public string f(object o) { return "f(object)"; } public string f(string s) { return "f(string)"; } public string f(int i)...

SpiderMonkey Internals
ere without dragging in struct definitions from n different files. the jspubtd.h file contains public typedefs, and is included automatically when needed. the jsprvtd.h file contains private typedefs and is included by various .h files that need type names, but not type sizes or declarations. jsdbgapi.cpp, jsdbgapi.h the debugging api. provided so far: traps, with which breakpoints, single-stepping, step over, step out, and so on can be implemented. the debugger will have to consult jsopcode.def on its own to figure out where to plant trap instructions to implement functions like step out, but a future jsdbgapi.h will provide convenience interfaces to do these things. at most one trap per bytecode can be set. when a script (jsscript) is destroyed, all traps set in its bytecode are cleared. ...
...ce interfaces to do these things. at most one trap per bytecode can be set. when a script (jsscript) is destroyed, all traps set in its bytecode are cleared. watchpoints, for intercepting set operations on properties and running a debugger-supplied function that receives the old value and a pointer to the new one, which it can use to modify the new value being set. line number to pc and back mapping functions. the line-to-pc direction "rounds" toward the next bytecode generated from a line greater than or equal to the input line, and may return the pc of a for-loop update part, if given the line number of the loop body's closing brace. any line after the last one in a script or function maps to a pc one byte beyond the last bytecode in the script. an example, from perfect.js: function perfe...
..." + " + divisor; } // at this point everything up to 'divisor' has its sumofdivisors // expression calculated, so we can determine whether it's perfect // already by evaluating. ...

JS_MapGCRoots
obsolete since jsapi 19this 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. perform some action for each object in a jsruntime's gc root set. syntax uint32 js_mapgcroots(jsruntime *rt, jsgcrootmapfun map, void *data); callback syntax #define js_map_gcroot_next 0 /* continue mapping entries */ #define js_map_gcroot_stop 1 /* stop mapping entries */ #define js_map_gcroot_remove 2 /* remove and free the current entry */ typedef int (*jsgcrootmapfun)(void *rp, const char *name, void *data); description call js_mapgcroots to map the gc's roots table using map(rp, name, data). the root is pointed at by rp; if the root is unnamed, name is null; data is supp...
...void *data); description call js_mapgcroots to map the gc's roots table using map(rp, name, data). the root is pointed at by rp; if the root is unnamed, name is null; data is supplied from the third parameter to js_mapgcroots. the map function should return js_map_gcroot_remove to cause the currently enumerated root to be removed. to stop enumeration, return js_map_gcroot_stop. ...
...amed, name is null; data is supplied from the third parameter to js_mapgcroots. the map function should return js_map_gcroot_remove to cause the currently enumerated root to be removed. to stop enumeration, return js_map_gcroot_stop. to continue mapping, return js_map_gcroot_next. these constants are flags; you can or them together. this function acquires and releases rt's gc lock around the mapping of the roots table, so the map function should run to completion in as few cycles as possible. the map function cannot call js_gc, js_maybegc, js_beginrequest, or any js api entry point that acquires locks, without double-tripping or deadlocking on the gc lock. js_mapgcroots returns the count of roots that were successfully mapped. see also bug 803907 ...

WebReplayRoadmap
replay, along with their ui. the low level, yet flexible architecture (described here) provides an extremely powerful platform for implementing debugging and analysis features. we would like to use web replay to radically improve not just the debugging experience but the entire web development experience. to that end, this document will be revised over time as we find new and better ways of helping developers. time travel features more features are planned for the timeline, as described below. retroactive console logging console logging is one of the primary tools most developers use to debug a page. seeing messages in the console provides a simple and intuitive view into the order in which events have happened. without time travel, using the console requires repeatedly updating the s...
...show up on the timeline and can be seeked to later. code path highlighting (not yet implemented) when paused in a frame, the code path taken through the frame (the lines/expressions executed) could be highlighted somehow, which would make it easier to see what happened in the frame. points on the path could be clicked to seek there, which should offer faster and less clunky navigation than stepping buttons. hide unsupported developer tool features (not yet implemented) support for the normal features of the developer tools is pretty limited in recording/replaying tabs. while the supported features will grow over time, the ui needs to be improved so that features which aren't supported are not shown or are shown in a disabled state. currently, only the debugger, console, and inspector de...
...is well will require some experimentation, but in many cases the buggy recording should hit different locations in the source or exhibit different types from the normal recording. using a corpus of several normal recordings (or buggy recordings) would reduce false positives due to incidental differences between the recordings. aggregate call graph and data flow (not yet implemented) when developing a complex web app it is often hard to find where a function is called, the callees at a call site, where some data in an object came from or where it is used, or what type a value has. these questions can be answered by analyzing one or more recordings to study their behavior in detail. if the debugger could perform this analysis then it could show this information to developers and help them u...

Secure Development Guidelines
the following content will likely see significant revision, though can be used as a reference for security best practices to follow when developing code for mozilla. introduction provide developers with information on specific security issues cover common coding mistakes and how they affect a product how to avoid making them how to mitigate them everything is oriented toward c/c++ introduction: gaining control specifics about the underlying architecture, using x86 as an example 6 basic registers (eax, ebx, ecx, edx, edi, esi) 2 stack-related registers (esp, ebp) mark top and bottom of current stack frame status register (eflags) contains various state information instruction pointer (eip) points to register being executed; can’t be modifi...
... to " + document.location); ... ...
...) with a simple request such as: http://www.victim.com?something=<script>alert('oops')</script> xss: prevention escape all dynamic input that will be sent back to the user html encoding &amp; → & &lt; → < &gt; → > &quot; → " &apos; → ' url encoding % encoding java/vbscript escaping depends on the context; in a single-quoted string, escaping ' would suffice sql injection occurs when un-trusted input is mixed with a sql string sql is a language used to interact with databases code injection attack that is similar to xss but targeted at sql rather than html and javascript if input is mixed with sql, it could itself become an sql instruction and be used to: query data from the database (passwords) insert value into...

An Overview of XPCOM
instantiates the component; over the course of the component's life, the reference count goes up and down. when all clients lose interest in the component, the reference count hits zero, and the component deletes itself. when clients use interfaces responsibly, this can be a very straightforward process. xpcom has tools to make it even easier, as we describe later. it can raise some real housekeeping problems when, for example, a client uses an interface and forgets to decrement the reference count. when this happens, interfaces may never be released and will leak memory. the system of reference counting is, like many things in xpcom, a contract between clients and implementations. it works when people agree to it, but when they don't, things can go wrong. it is the responsibility of the func...
...yone uses the same memory allocator, and an event notification system that allows passing of simple messages. the tutorial will show each of these component and services in use, and the xpcom api reference has a complete interface listing of these areas. xpcom types there are many xpcom declared types and simple macros that we will use in the following samples. most of these types are simple mappings. the most common types are described in the following sections. method types the following are a set of types for ensuring correct calling convention and return type of xpcom methods. ns_imethod method declaration return type. xpcom method declarations should use this as their return type. ns_imethodimp method implementation return type. xpcom method implementations sh...
...ull before calling addref. ns_release calls release on an nsisupports object. ns_if_release same as above but check for null before calling release. status codes these macros test status codes. ns_failed return true if the passed status code was a failure. ns_succeeded returns true is the passed status code was a success. variable mappings nsrefcnt default reference count type. maps to a 32-bit integer. nsresult default error type. maps to a 32-bit integer. nsnull default null value. common xpcom error codes ns_error_not_initialized returned when an instance is not initialized. ns_error_already_initialized returned when an instance is already initialized. ...

Component Internals
overridden. starting with mozilla 1.2, this file is named compreg.dat and exists in the components directory, but there are efforts to move it out of this location to a less application-centric (and thus more user-centric) location. any gecko-based application may choose to locate it elsewhere. xpcom reads this file into an in-memory database. ...
...ation-centric (and thus more user-centric) location. any gecko-based application may choose to locate it elsewhere. xpcom reads this file into an in-memory database. component manifests the component manifest is a mapping of files to components and components to classes. it specifies the following information: location on disk of registered components with file size class id to location mapping contract id to class id mapping the component manifest maps component files to unique identifiers for the specific implementations (class ids), which in turn are mapped to more general component identifiers (contract ids). type library manifests another important file that xpcom reads in is the type library manifest file. this file is also located in the components directory and is named xp...
...ths of all type library files on the system. this file also lists all known interfaces and links to the type library files that define these interface structures. these type library files are at the core of xpcom scriptablity and the binary component architecture of xpcom. type library manifests type library manifests contain the following information: location of all type library files mapping of all known interfaces to type libraries where these structures are defined using the data in these two manifests, xpcom knows exactly which component libraries have been installed and what implementations go with which interfaces. additionally, it relates the components to the type libraries in which the binary representations of the interfaces they support are defined. the next section des...

NS_ConvertASCIItoUTF16
true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...arameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...oid(prbool) - source string data is never null, but can be marked void. ...

NS_ConvertUTF16toUTF8
true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...arameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...etisvoid(prbool) - source string data is never null, but can be marked void. ...

NS_ConvertUTF8toUTF16
true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...arameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...oid(prbool) - source string data is never null, but can be marked void. ...

NS_LossyConvertUTF16toASCII
true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...arameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...etisvoid(prbool) - source string data is never null, but can be marked void. ...

nsAdoptingCString
true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...arameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...etisvoid(prbool) - source string data is never null, but can be marked void. ...

nsAdoptingString
true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...arameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...oid(prbool) - source string data is never null, but can be marked void. ...

nsAutoString
true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...arameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...oid(prbool) - source string data is never null, but can be marked void. ...

nsCAutoString
ounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...ool) - source string data is never null, but can be marked void. ...

nsCString
true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...arameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...etisvoid(prbool) - source string data is never null, but can be marked void. ...

nsDependentCString
true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...arameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...etisvoid(prbool) - source string data is never null, but can be marked void. ...

nsDependentString
true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...arameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...oid(prbool) - source string data is never null, but can be marked void. ...

nsFixedCString
true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...arameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...etisvoid(prbool) - source string data is never null, but can be marked void. ...

nsFixedString
true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...arameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...oid(prbool) - source string data is never null, but can be marked void. ...

nsPromiseFlatCString
true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...arameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...etisvoid(prbool) - source string data is never null, but can be marked void. ...

nsPromiseFlatString
true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...arameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...oid(prbool) - source string data is never null, but can be marked void. ...

nsString
true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...arameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...oid(prbool) - source string data is never null, but can be marked void. ...

nsXPIDLCString
true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...arameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...etisvoid(prbool) - source string data is never null, but can be marked void. ...

nsXPIDLString
true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...arameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...oid(prbool) - source string data is never null, but can be marked void. ...

IAccessible2
r is ignored. refer to @ref _arrayconsideration "special consideration when using arrays" for more details. extendedstates this array is allocated by the server. free it with cotaskmemfree. nextendedstates the number of extended states returned; the size of the returned array. return value s_false if there are no states, [out] values are null and 0 respectively. s_ok. groupposition() returns grouping information. used for tree items, list items, tab panel labels, radio buttons, and so on. also used for collections of non-text objects. [propget] hresult groupposition( [out] long grouplevel, [out] long similaritemsingroup, [out] long positioningroup ); parameters grouplevel 1 based, 0 indicates that this value is not applicable. similaritemsingroup 1 based, 0 indicates that this value i...
... a reorder/show/hide event the at knows which part of the internal structure has been invalidated and can refetch just that part. this value can also be used by an at to determine when the current control has changed. if the role is the same for two controls that are adjacent in the tab order, this can be used to detect the new control. another use of this value by an at is to identify when a grouping object has changed, for example when moving from a radio button in one group to a radio button in a different group. one means of implementing this would be to create a factory with a 32 bit number generator and a reuse pool. the number generator would emit numbers starting at 1. each time an object's life cycle ended, its number would be saved into a reuse pool. the number generator would be use...
...e an event isn't fired on this object. a use case is when a screen reader is grabbing an entire web page on a page load. without the availability of windowhandle, the at would have to get the window handle by using windowfromaccessibleobject on each iaccessible, which is slow because it's implemented by oleacc.dll as a loop which crawls up the ancestor chain and looks for a role_window object, mapping that back to a window handle. [propget] hresult windowhandle( [out] hwnd windowhandle ); parameters windowhandle return value s_ok. remarks when you have a reference to an iaccessible and require a reference to an iaccessible2 use queryservice as follows: // pacc is a reference to the accessible object's iaccessible interface. iserviceprovider *pservice = null; hr = pacc->queryinterface(iid...

mozIRegistry
a timely fashion: if and when we remove what is currently a static binding of clsids, there will be the risk that required clsids won't be present. a corollary is that the build/install process will require updates to user "registry" to enable new class implementations to be accessible. our current build/install process doesn't quite step up to these problems as of yet. there are some bootstrapping issues related to using the service manager to access the moziregistry interface. currently, nsiservicemanager requires a clsid to access a service which hardcodes the implementation of that service. this issue needs to be resolved in order to enable alternative moziregistry implementations or to permit other service implementations to be bound at runtime. i think a simple clsid "alias" mechanism...
...-colored boxes) are the services you'll be using. i'll be explaining the rationale for the design and implementation of these components in this document. lastly, there's one component (labelled "mozrdfregistry/nsirdfdatabase") that potentially will emerge as an improved implementation of one of the moziregistry interfaces. i'll be discussing that implementation only briefly (mainly because i'm hoping i can pawn off the chore of implementing it to somebody else). there's another component that turns out to also be real important when you go to hook up your code with other mozilla components. that's the service manager. i'm just starting to understand the role it plays in this and it isn't really under my jurisdiction, so there's nothing about it here right now. in the future, i'll either add...
...rfaces. your code (most likely) falls in this box. these components will, to various degrees, need to use other components to do their thing. those other components presumably implement particular xpcom interfaces. so how do you go about creating an object that can provide the interface your component requires? one way is to create instances by using nsrepository. nsrepository is essentially a mapping from xpcom clsids to class factories, plus code to manage that mapping, including functions that create instances of a given clsid. the nsrepository functions are declared in nsrepository.h. much more information about nsrepository can be found below. the second way you access other components is via the service manager. that thing isn't yet covered in this document. see the note above. in this s...

nsIAccessibleRole
ole_app_root. role_document 15 represents a document window. a document window is always contained within an application window. it is used for role="document". role_pane 16 represents a pane within a frame or document window. users can navigate between panes and within the contents of the current pane, but cannot navigate between items in different panes. thus, panes represent a level of grouping lower than frame windows or documents, but above individual controls. it is used for the first child of a or iframe. role_chart 17 represents a graphical image used to represent data. role_dialog 18 represents a dialog box or message box. it is used for xul:dialog, role="dialog". role_border 19 represents a window border. role_grouping 20 logically groups other objects. there is not alway...
...ove individual controls. it is used for the first child of a or iframe. role_chart 17 represents a graphical image used to represent data. role_dialog 18 represents a dialog box or message box. it is used for xul:dialog, role="dialog". role_border 19 represents a window border. role_grouping 20 logically groups other objects. there is not always a parent-child relationship between the grouping object and the objects it contains. it is used for html:textfield, xul:groupbox, role="group". ...
...it is used for xul:toolbar, role="toolbar". role_statusbar 23 represents a status bar, which is an area at the bottom of a window that displays information about the current operation, state of the application, or selected object. ...

nsIHttpServer
ppedcallback callback); /** * associates the local file represented by the string file with all requests * which match request. * * @param path * the path which is to be mapped to the given file; must begin with "/" and * be a valid uri path (i.e., no query string, hash reference, etc.) * @param file * the file to serve for the given path, or null to remove any mapping that * might exist; this file must exist for the lifetime of the server */ void registerfile(in string path, in nsifile file); /** * registers a custom path handler. * * @param path * the path on the server (beginning with a "/") which is to be handled by * handler; this path must not include a query string or hash component; it * also should usually be canoni...
...path * the absolute path on the server against which requests will be served * from dir (e.g., "/", "/foo/", etc.); must begin and end with a forward * slash * @param dir * the directory to be used to serve all requests for paths underneath path * (except those further overridden by another, deeper path registered with * another directory); if null, any current mapping for the given path is * removed * @throws ns_error_invalid_arg * if dir is non-null and does not exist or is not a directory, or if path * does not begin with and end with a forward slash */ void registerdirectory(in string path, in nsifile dir); /** * associates files with the given extension with the given content-type when * served by this server, in the absence...
...or is not a directory, or if path * does not begin with and end with a forward slash */ void registerdirectory(in string path, in nsifile dir); /** * associates files with the given extension with the given content-type when * served by this server, in the absence of any file-specific information * about the desired content-type. if type is empty, removes any extant * mapping, if one is present. * * @throws ns_error_invalid_arg * if the given type is not a valid header field value, i.e. if it doesn't * match the field-value production in rfc 2616 * @note * no syntax checking is done of the given type, beyond ensuring that it is * a valid header field value. behavior when not given a string matching * the media-type production in rfc ...

nsISelectionPrivate
nt32 endoffset, in prbool allowadjacent, out pruint32 resultcount, [retval, array, size_is(resultcount)] out nsidomrange results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection. allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than merely overlapping it. resultcount returns the number of ranges that overlap (or touch) the input range. results returns the ranges that overlap (or touch) the input range. native code only!getrangesforintervalcomarray obsolete since gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamonkey 2.9)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be rem...
...ginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, in rangearray results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection. allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than merely overlapping it. results returns the ranges that overlap (or touch) the input range. native code only!getrangesforintervalarray void getrangesforintervalarray( in nsinode beginnode, in print32 beginoffset, in nsinode endnode, in print32 endoffset, in boolean allowadjacent, in rangearray results ); parameters beginnode beginoffset endnode endoffset these four parameters repr...
... beginnode, in print32 beginoffset, in nsinode endnode, in print32 endoffset, in boolean allowadjacent, in rangearray results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection. allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than merely overlapping it. results returns the ranges that overlap (or touch) the input range. gettableselectiontype() test if supplied range points to a single table element. long gettableselectiontype( in nsidomrange range ); parameters range return value one of tableselection_* constants. "none" means a table element is not selected. removeselectionlistener() void removeselectionlistener( in...

nsIUTF8ConverterService
astring a string to ensure its utf8ness. acharset the charset to convert from if astring is not in utf-8. askipcheck determines whether or not to skip 'asciiness' and 'utf8ness' check. set this to pr_true only if you suspect that astring can be mistaken for ascii / utf-8 but is actually not in ascii / utf-8 so that astring has to go through the conversion. skipping asciiness/utf8ness check. the most common case is the input is in 7bit non-ascii character sets like iso-2022-jp, hz or utf-7 (in its original form or a modified form used in imap folder names). aallowsubstitution when true, allow the decoder to substitute invalid input sequences by replacement characters. return value the converted string in utf-8. exceptions thrown ns_err...
...er names). aallowsubstitution when true, allow the decoder to substitute invalid input sequences by replacement characters. return value the converted string in utf-8. exceptions thrown ns_error_uconv_noconv when there is no decoder for acharset or error code of nsiunicodedecoder in case of conversion failure. ...
...here is no decoder for acharset or error code of nsiunicodedecoder in case of conversion failure. converturispectoutf8() ensure that aspec (after url-unescaping it) is encoded in utf-8. if not, convert it to utf-8, assuming it's encoded in acharset, and return the result. make sure that all characters outside us-ascii in your input spec are url-escaped if your spec is not in utf-8 (before url-escaping) because the presence of non-ascii characters is blindly regarded as an indication that your input spec is in unescaped utf-8 and it will be returned without further processing. no valid spec going around in mozilla code would break this assumption. autf8string converturispectoutf8( in acstring aspec, in string acharset ); parameters aspec an url-escaped uri spec to ensure its utf8ness. ach...

Address book sync client design
client side sync logic the client synchronization logic defers to the server peforming some intelligence in handling duplicate entries for the sync process. the static information that is held on the client for address book sync operations is stored in a file called absync.dat which is located in the root directory of the users profile information. // // the client keeps a sync mapping table which holds the following: // // serverrecordid - unique id for a record provided by the // uab server. // localrecordid - local unique id, for mobile devices this // is assigned by the mobile device. // crc - crc of the record last time we synced. // flags - operation to apply to this record. add // ...
... - crc of the record last time we synced. // flags - operation to apply to this record. add // if it's new, mod if it's been modified, // ret if it was already sent to the server // but an error occured, etc. // // step 1: // when the user begins a sync, run through the local database and update the // sync mapping table. if the crc has changed, mark the entry modified, if // it's a new record, add an entry and mark it new, if a record was deleted, // mark the entry deleted, etc. // // sync approach - server handles all conflict resolution: // // step 2: // using the sync mapping table and the local records database, generate the change // list to send to the server. mark any modified or new recor...
...ist to send to the server. mark any modified or new record with the ret (retry) // flag. // // step 3: // get the response back from the server. since the communication was successful, // clear the ret (retry) flag on all records. then apply the server changes back // to the local database (updating the crc's in the process). save the changes to // the local database, clear the sync mapping table flags and save the new sync // mapping table. // public interfaces there is a very simple interface to the address book sync component. this interface is defined in mozilla/mailnews/addrbook/public/nsiabsyncdriver.idl #include "nsrootidl.idl" #include "nsiabsynclistener.idl" [scriptable, uuid(91fdfee1-efbc-11d3-8f97-000073757374)] interface nsiabsyncdriver : ns...

Mozilla
tion chrome windows using javascript. it currently allows you to run javascript code in the same scope as the main firefox browser window and report results using the same functions as the mochitest test framework. as all tests, they won't work in a build with tests disabled (--disable-tests). browser security an important aspect of developing code for any browser, including firefox, as well as any web-oriented project, is its security. these articles provide important guides and references to ensuring the code you write is secure, including both design recommendations and testing guidelines. bugzilla bugzilla.mozilla.org (often abbreviated b.m.o) is mozilla.org's bug-tracking ...
...ernal parts from being standalone files or sets of jar files into just one jar file called omni.ja; this reduces the amount of i/o needed to load the application. this article covers the contents of the archive and techniques for inspecting those contents. performance the articles linked to from here will help you improve performance, whether you're developing core mozilla code or an add-on. phishing: a short definition in 2014, the msci estimated an annual global impact of phishing, and various forms of identity theft, to be as high as $5 billion usd. the impact has not improved much since. preferences the preference system makes it possible to store data for mozilla application...
...server the goal of this document is to provide instructions for installing a locally-served firefox update. signing mozilla apps for mac os x mac os x's gatekeeper functionality prevents users from launching applications that haven't been code-signed, in order to help keep their computers secure. firefox and thunderbird releases are both signed before shipping; this article describes the process. supported build targets page moved to the in-tree documentation: https://firefox-source-docs.mozilla.org/build/buildsystem/supported-configurations.html task graph after a change to the gecko source code is pushed to version-control, jobs for that chang...

Drawing and Event Handling - Plugins
indow. //the npwindow structure typedef enum { npwindowtypewindow = 1, npwindowtypedrawable } npwindowtype; typedef struct _npwindow { void* window; /* platform-specific handle */ uint32 x; /* position of top-left corner */ uint32 y; /* relative to a netscape page */ uint32 width; /* maximum window size */ uint32 height; nprect cliprect; /* clipping rectangle in port coordinates */ #ifdef xp_unix void * ws_info; /* platform-dependent additional data */ #endif /* xp_unix */ npwindowtype type; /* whether this is a window or a drawable */ } npwindow; the window parameter is a platform-specific handle to a native window element in the browser window hierarchy on windows and unix. on mac os, window is a pointer to an np_port. the x ...
... a platform-specific handle to a native window element in the browser window hierarchy on windows and unix. on mac os, window is a pointer to an np_port. the x and y fields specify the top-left corner of the plug-in relative to the page. the width and height fields specify the dimensions of the plug-in area. these values should not be modified by the plug-in. the cliprect field defines the clipping rectangle of the plug-in in a coordinate system where the origin is the top-left corner of the drawable or window. the browser calls npp_setwindow whenever the drawable changes. for windowless plugins, a cliprect of 0,0,0,0 signals that the plugin is not visible. the type field indicates the npwindow type of the target area: npwindowtypewindow: windowed plug-in. the window field holds a platf...
...pwindow structure. this structure contains a pointer to the graphics port (cgraphptr) into which the plug-in instance should draw and the x - and y - coordinates of the upper-left corner of this port. the plug-in can use these coordinates to call setorigin(portx, porty) to place the upper-left corner of its rectangle at (0,0). the mac os grafport structure's cliprgn field should be set to the clipping rectangle for the instance in port coordinates. because the plug-in and the browser share the same graphics port, they share the responsibility for managing it correctly. the browser sets up the port for the plug-in before passing the plug-in an update event in two ways: the browser calls setorigin(npport->portx, npport->porty). this method makes the instance's upper-left coordinate equal to ...

Debugger - Firefox Developer Tools
). most functions provided by this debugger api observe activity in only those globals that are reachable by the api’s user, thus imposing capability-based restrictions on a debugger’s reach. however, the onnewglobalobject method allows the api user to monitor all global object creation that occurs anywhere within the javascript system (the “jsruntime”, in spidermonkey terms), thereby escaping the capability-based limits. for this reason, onnewglobalobject is only available to privileged code. function properties of the debugger prototype object the functions described below may only be called with a this value referring to a debugger instance; they may not be used as methods of other kinds of objects. adddebuggee(global) add the global object designated byglobal to the set ...
... functions provided by this debugger api observe activity in only those globals that are reachable by the api’s user, thus imposing capability-based restrictions on a debugger’s reach. however, the addallglobalsasdebuggees method allows the api user to monitor all global object creation that occurs anywhere within the javascript system (the “jsruntime”, in spidermonkey terms), thereby escaping the capability-based limits. for this reason, addallglobalsasdebuggees is only available to privileged code. removedebuggee(global) remove the global object designated byglobal from this debugger instance’s set of debuggees. return undefined. this method interpretsglobal using the same rules that adddebuggee does. removing a global as a debuggee from this debugger clears all breakpoin...
...ileged code (“chrome”, in firefox). most functions provided by this debugger api observe activity in only those globals that are reachable by the api’s user, thus imposing capability-based restrictions on a debugger’s reach. however, findallglobals allows the api user to find all global objects anywhere within the javascript system (the “jsruntime”, in spidermonkey terms), thereby escaping the capability-based limits. for this reason, findallglobals is only available to privileged code. makeglobalobjectreference(global) return the debugger.object whose referent is the global object designated byglobal, without adding the designated global as a debuggee. ifglobal does not designate a global object, throw a typeerror. determine which global is designated byglobal using the same r...

Examine and edit CSS - Firefox Developer Tools
ss you are examining. for example: viewing and changing classes on an element with an element selected in the html pane, you can click the .cls button in the rules pane toolbar, to display the classes defined on that element. you can clear the checkbox for a particular class name, to see how the element would appear without that class applied to it. you can add a class to the element by typing a name in the add new class field below the rules toolbar. autocompletions based on existing classes are suggested as you type. link to css file at the top right of each rule, the source filename and line number is displayed as a link: clicking it opens the file in the style editor. you can copy the location of the source file: right-click the link and select "copy location". the inspector u...
...r space while it is selected) shows the rule that set this value, along with a link to the source filename and line number: by default, this view only shows values that have been explicitly set by the page: to see all values, click the "browser styles" box. you can tab through the filenames/line numbers; pressing enter/return will open up the relevant file at that point in the style editor. typing in the search box performs a live filtering of the list, so, for example, if you just want to see font-related settings, you can type "font" in the search box, and only properties with "font" in the name will be listed. you can also search for the values of properties: to find the rule responsible for setting the font to "lucida grande", type that in the search box. while in the computed view, ...
...esc to remove it again. edit rules if you click on a declaration or a selector in the rules view you can edit it and see the results immediately. you can also tab through the different existing properties and values, and start editing them by pressing enter or space. to add a new declaration to a rule, click on the last line of the rule (the line occupied by the closing brace). as you start typing a property name, you'll see a list of autocomplete suggestions. press tab to accept the current suggestion or up and down to move through the list. the default choice is the most common property that starts with the letters you've typed. for example, here the user has typed "c" and the default choice is "color": if you enter an invalid value for a property when editing it, or an unknown proper...

Using IndexedDB - Web APIs
to disk before delivering the complete event by creating a transaction using the experimental (non-standard) readwriteflush mode (see idbdatabase.transaction. you can speed up data access by using the right scope and mode in the transaction. here are a couple of tips: when defining the scope, specify only the object stores you need. this way, you can run multiple transactions with non-overlapping scopes concurrently. only specify a readwrite transaction mode when necessary. you can concurrently run multiple readonly transactions with overlapping scopes, but you can have only one readwrite transaction for an object store. to learn more, see the definition for transactions in the basic concepts article. adding data to the database if you've just created a database, then you probably wan...
...t actually save the request object to a variable. since the dom event has the request as its target you can use the event to get to the result property. note that you can speed up data access by limiting the scope and mode in the transaction. here are a couple of tips: when defining the scope, specify only the object stores you need. this way, you can run multiple transactions with non-overlapping scopes concurrently. only specify a readwrite transaction mode when necessary. you can concurrently run multiple readonly transactions with overlapping scopes, but you can have only one readwrite transaction for an object store. to learn more, see the definition for transactions in the basic concepts article. updating an entry in the database now we've retrieved some data, updating it and ins...
... //file_input.val(null); var file_url = $('#pub-file-url').val(); if (selected_file) { addpublication(biblioid, title, year, selected_file); } else if (file_url) { addpublicationfromurl(...

PaymentAddress - Web APIs
it may be useful to refer to the universal postal union web site's addressing s42 standard materials, which provide information about international standards for postal addresses. properties paymentaddress.addressline read only an array of domstring objects providing each line of the address not included among the other properties. the exact size and content varies by country or location and can include, for example, a street name, house number, apartment number, rural delivery route, descriptive instructions, or post office box number. ...
...d serializer that returns a json representation of the paymentaddress object's properties. examples in the following example, the paymentrequest() constructor is used to create a new payment request, which takes three objects as parameters — one containing details of the payment methods that can be used for the payment, one containing details of the actual order (such as items bought and shipping options), and an optional object containing further options. the first of these three (supportedinstruments in the example below) contains a data property that has to conform to the structure defined by the basiccardrequest dictionary. const supportedinstruments = [ { supportedmethods: "basic-card", }, ]; const details = { total: { label: "donation", amount: { currency: "usd", value:...
...property that has to conform to the structure defined by the basiccardrequest dictionary. const supportedinstruments = [ { supportedmethods: "basic-card", }, ]; const details = { total: { label: "donation", amount: { currency: "usd", value: "65.00" } }, displayitems: [ { label: "original donation amount", amount: { currency: "usd", value: "65.00" }, }, ], shippingoptions: [ { id: "standard", label: "standard shipping", amount: { currency: "usd", value: "0.00" }, selected: true, }, ], }; const options = { requestshipping: true }; async function dopaymentrequest() { const request = new paymentrequest(supportedinstruments, details, options); // add event listeners here. // call show() to trigger the browser's payment ...

Payment Request API - Web APIs
the payment request api provides a consistent user experience for both merchants and users. it is not a new way for paying for things; rather, it's a way for users to select their preferred way of paying for things, and make that information available to a merchant. payment request concepts and usage many problems related to online shopping-cart abandonment can be traced to checkout forms, which can be difficult and time consuming to fill out and often require multiple steps to complete. the payment request api is meant to reduce the number of steps needed to complete a payment online, potentially doing away with checkout forms. it aims to make the checkout process easier, by remembering a user's details, which are then passed along to a merchant hopefully without requiring a html...
...s the browser controls the input elements of the payment sheet, it can assure consistent keyboard and screen reader accessibility on every website without developers needing to do anything. a browser could also adjust the font size or color contrast of the payment sheet, making it more comfortable for the user to make a payment. credentials management: users can manage their credit cards and shipping addresses directly in the browser. a browser can also sync these "credentials" across devices, making it easy for users to jump from desktop to mobile and back again when buying things. consistent error handling: the browser can check the validity of card numbers, and can tell the user if a card has expired (or is about to expire). the browser can automatically suggest which card to use based on...
...hange information with the user agent while the user provides input to complete the transaction. you can find a complete guide in using the payment request api. note: the api is available inside cross-origin <iframe> elements only if they have had the allowpaymentrequest attribute set on them. interfaces paymentaddress an object that contains address information; used for billing and shipping addresses, for example. paymentrequest an object that provides the api for creating and managing the user agent's payment interface. paymentrequestevent an event delivered to a payment handler when a paymentrequest is made. paymentrequestupdateevent enables the web page to update the details of the payment request in response to a user action. paymentmethodchangeevent represents the user ...

Web Push API Notifications best practices - Web APIs
“if done well, it's nice to have, but if not done well, it's really annoying.” — overheard conversation between two browser developers discussing the ethics of push notifications. overview of web push notifications web push notifications (created using a combination of the notifications, push, and service worker apis) are part of the rising noise that product developers and marketers are using to get attention for their sites. ...
...elieve you should use push to re-engage people who have left your site so they can complete a purchase, or be sent the latest news, or receive links to recommended products. the dark side their novelty provides a new and unexploited opportunity for enterprising sites to reach potential customers. has the customer switched tabs to answer an email? win them back with an expiring offer of free shipping that they can’t ignore! but really, is this the best use of push notifications? or is it a new iteration on the old and tired pop-up ad? “web push doesn’t risk ending up in the spam folder. nor can it be blocked by ad blockers. it shows right up on your desktop even when the website is shut. in mobile, it shows up in the notification tray, just like app push notifications, even when the ...
... a push notification that successfully alerts you, even though your mail web app is not open. in this document, we’ll talk about the ethical use of web push notifications. sometimes they can eliminate frustration and annoyance, and sometimes they can cause them, and it’s up to you as a developer to make wise recommendations (and decisions) about the use of push notifications. what are you hoping to achieve with this push notification? as with everything, with great power comes great responsibility. every push notification should be useful and time-sensitive, and the user should always be asked for permission before sending the first one, and be offered an easy way to opt out of getting more in the future. there are some basic questions you can answer to determine if a push notification...

ReadableStream.pipeThrough() - Web APIs
syntax var transformedstream = readablestream.pipethrough(transformstream[, options]); parameters transformstream a transformstream (or an object with the structure {writable, readable}) consisting of a readable stream and a writable stream working together to transform some data from one form to another. ...
...am working together to transform some data from one form to another. data writen to the writable stream can be read in some transformed state by the readable stream. for example, a textdecoder, has bytes written to it and strings read from it, while a video decoder has encoded bytes written to it and uncompressed video frames read from it. options optional the options that should be used when piping to the writable stream. available options are: preventclose: if this is set to true, the source readablestream closing will no longer cause the destination writablestream to be closed. the method will return a fulfilled promise once this process completes, unless an error is encountered while closing the destination in which case it will be rejected with that error. preventabort: if this is...
...no longer cancel the source readablestream. in this case the method will return a promise rejected with the source’s error, or with any error that occurs during canceling the source. in addition, if the destination writable stream starts out closed or closing, the source readable stream will no longer be canceled. in this case the method will return a promise rejected with an error indicating piping to a closed stream failed, or with any error that occurs during canceling the source. signal: if set to an abortsignal object, ongoing pipe operations can then be aborted via the corresponding abortcontroller. return value the readable side of the transformstream. exceptions typeerror the writable and/or readable property of transformstream are undefined. examples in the followin...

Web Video Text Tracks Format (WebVTT) - Web APIs
.606 this is the first subtitle. 2 00:00:30.739 --> 00:00:34.074 this is the second. 3 00:00:34.159 --> 00:00:35.743 third cue timings a cue timing indicates when the cue is shown. it has a start and end time which are represented by timestamps. the end time must be greater than the start time, and the start time must be greater than or equal to all previous start times. cues may have overlapping timings. if the webvtt file is being used for chapters (<track> kind is chapters) then the file cannot have overlapping timings. each cue timing contains five components: timestamp for start time. at least one space. the string "-->". at least one space. timestamp for end time. which must be greater than the start time. the timestamps must be in one of two formats: mm:ss.
...:00:00.000). mm is minutes. must be between 00 and 59 inclusive. ss is seconds. must be between 00 and 59 inclusive. ttt is miliseconds. must be between 000 and 999 inclusive. ...
... ttt is miliseconds. must be between 000 and 999 inclusive. example 10 - basic cue timing examples 00:00:22.230 --> 00:00:24.606 00:00:30.739 --> 00:00:34.074 00:00:34.159 --> 00:00:35.743 00:00:35.827 --> 00:00:40.122 example 11 - overlapping cue timing examples 00:00:00.000 --> 00:00:10.000 00:00:05.000 --> 00:01:00.000 00:00:30.000 --> 00:00:50.000 example 12 - non-overlapping cue timing examples 00:00:00.000 --> 00:00:10.000 00:00:10.000 --> 00:01:00.581 00:01:00.581 --> 00:02:00.100 00:02:01.000 --> 00:02:01.000 cue settings cue settings are optional components used to position where the cue payload text will be displayed over the video. this includes whether the text is displayed horizontally or vertically. there can be zero or more of them, and they can be used ...

Movement, orientation, and motion: A WebXR example - Web APIs
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. async function onxrbuttonclick(event) { if (!xrsession) { navigator.xr.requestsession(session_type) .then(sessionstarted); } else ...
...ion established, we then multiply that by the inverse of the view's transform matrix to get the final model view matrix—the matrix to apply to the object to both rotate it for its animation purposes, but to also move and reorient it to simulate the viewer's motion through the space. then the view's normal matrix is computed by taking the model view matrix, inverting it, and transposing it (swapping its columns and rows). the last few lines of code added for this example are four calls to displaymatrix(), a function which displays the contents of a matrix for analysis by the user. the remainder of the function is identical or essentially identical to the older webgl sample from which this code is derived. displaying a matrix for instructive purposes, this example displays the contents of ...
...of vertex normals, the texture coordinates for each surface of the cube, and the array of vertex indices (specifying which entry in the vertex list represents each corner of the cube). an object containing references to eard loadtexture() loads the image at a given url and creates a webgl texture from it. if the image's dimensions aren't both powers of two (see the ispowerof2() function), mipmapping is disabled and wrapping is clamped to the edges. this is because optimized rendering of mipmapped textures only works for textures whose dimensions are powers of two in webgl 1. webgl 2 supports arbitratily-sized textures for mipmapping. ispowerof2() returns true if the specified value is a power of two; otherwise returns false. putting it all together when you take all of this code and add...

Using the Web Animations API - Web APIs
t is one of the most performant ways to animate on the web, letting the browser make its own internal optimizations without hacks, coercion, or window.requestanimationframe(). with the web animations api, we can move interactive animations from stylesheets to javascript, separating presentation from behavior. we no longer need to rely on dom-heavy techniques such as writing css properties and scoping classes onto elements to control playback direction. and unlike pure, declarative css, javascript also lets us dynamically set values from properties to durations. for building custom animation libraries and creating interactive animations, the web animations api might be the perfect tool for the job. let's see what it can do! browser support the basic web animations api features discussed in t...
...ecay on her animation’s playbackrate. we use updateplaybackrate() instead of setting the playbackrate directly since that produces a smooth update: setinterval( function() { // make sure the playback rate never falls below .4 if (redqueen_alice.playbackrate > .4) { redqueen_alice.updateplaybackrate(redqueen_alice.playbackrate * .9); } }, 3000); but urging them on by clicking or tapping causes them to speed up by multiplying their playbackrate: var gofaster = function() { redqueen_alice.updateplaybackrate(redqueen_alice.playbackrate * 1.1); } document.addeventlistener("click", gofaster); document.addeventlistener("touchstart", gofaster); the background elements also have playbackrates that are impacted when you click or tap. what happens when you make alice and the red quee...
...ops alice's and other animations stopplayingalice(); // depending on which third it falls into var aliceheight = aliceplayhead / alicetimeline; if (aliceheight <= .333){ // alice got smaller! ... } else if (aliceheight >= .666) { // alice got bigger! ... } else { // alice didn't change significantly ... } } note: getanimations() and effect are not shipping in all browsers as of this writing, but the polyfill does support them today. callbacks and promises css animations and transitions have their own event listeners, and these are also possible with the web animations api: onfinish is the event handler for the finish event and can be triggered manually with finish(). oncancel is the event handler for the cancel event and can be triggers with...

Background audio processing using AudioWorklet - Web APIs
e inputs and how you generate the outputs depends very much on your processor. if your processor is just a generator, it can ignore the inputs and just replace the contents of the outputs with the generated data. or you can process each input independently, applying an algorithm to the incoming data on each channel of each input and writing the results into the corresponding outputs' channels (keeping in mind that the number of inputs and outputs may differ, and the channel counts on those inputs and outputs may also differ). or you can take all the inputs and perform mixing or other computations that result in a single output being filled with data (or all the outputs being filled with the same data). it's entirely up to you. this is a very powerful tool in your audio programming toolkit. p...
...= -1.0; } output[channelnum][i] = sample; } } }; return true; } this is similar code to the previous sample in many ways, but only the first output—outputlist[0]—is altered. each sample is added to the corresponding sample in the output buffer, with a simple code fragment in place to prevent the samples from exceeding the legal range of -1.0 to 1.0 by capping the values; there are other ways to avoid clipping that are perhaps less prone to distortion, but this is a simple example that's better than nothing. lifetime of an audio worklet processor the only means by which you can influence the lifespan of your audio worklet processor is through the value returned by process(), which should be a boolean value indicating whether or not to override the us...
...source for audio data, or is receiving data from one or more inputs. specifying a value of true as the result from your process() function in essence tells the web audio api that your processor needs to keep being called even if the api doesn't think there's anything left for you to do. in other words, true overrides the api's logic and gives you control over your processor's lifetime policy, keeping the processor's owning audioworkletnode running even when it would otherwise decide to shut down the node. returning false from the process() method tells the api that it should follow its normal logic and shut down your processor node if it deems it appropriate to do so. if the api determines that your node is no longer needed, process() will not be called again. note: at this time, unfortuna...

ARIA Test Cases - Accessibility
s to exercise and debug the code. as such, they are used to test a variety of features, such as styling, behavior, mouse, and keyboard interactions, to name few. these test files are not specifically for testing aria. still, dojo's widgets implement aria, and the noted test files could be used as an "aria test file". new tests for internet explorer 8 rc1 on this msdn page the aria state/role mapping in ie8 to msaa roles can be directly checked. also, as a clever feature for at testing, the firing of events (like event_object_statechange) can be invoked from the examples. finally, a list of currently non-mapped aria roles is given. documenting and filing bugs review the information on how to file a bug on an aria implementation. when documenting an issue, please also list it in the relevant...
...ently selected option is changed the new option should be spoken whether the list is open or closed. when the combo box is opened or closed, the new open/closed state should be spoken. markup used: notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 fail. label and current content as well as role are spoken, also when typing in a new value, that gets reflected. but when dropping down the lists of states in either example, after the second or so list item, jaws turns off forms mode, and the user has to turn off v cursor to be able to make selections or tab to anything useful. - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - ...
... aria-live aria-live="off" aria-live="polite" aria-live="assertive" aria-live="rude" aria-live attribute is missing nested live regions: "assertive" inside "off" ms ie8 chat example expected at behavior: jaws - announces updates to live regions. markup used: aria-live notes: results: at firefox ie opera safari jaws 9 ...

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
screen reader will speak out loud important changes to the document or ui, and allow the user to track where they navigate. the screen reader user can navigate the web page using screen reader commands or browser commands, and the two pieces of software must remain in sync. some screen readers can even show information on a refreshable braille display. screen magnifiers will zoom to the focus, keeping it on the screen at all times, or even allow the user to enter a special low vision document reading mode, with a variety of features such as ticker mode where text is streamed on a single line. finally, voice dictation software needs to know what's in the current document or ui in order to implement "say what you see" kinds of features. on microsoft windows, these kinds of assistive technology ...
...rollbar role_grip role_sound role_cursor role_caret role_alert role_window [inserted by system] role_client [important] role_menupopup [important] role_menuitem [important] role_tooltip role_application role_document role_pane [important] role_chart role_dialog [semi-important, not currently used by all at's] role_border role_grouping role_separator [important] role_toolbar role_statusbar [important] role_table [important] role_columnheader role_rowheader role_column role_row role_cell [important] role_link [important] role_helpballoon role_character role_list [important] role_listitem [important] role_outline [important] role_outlineitem [important] role_paget...
... item doesn't have focus. for listboxes that are not focused, use a different highlight color, to give the appearance that the listbox is no longer focused -- a lighter color for unfocused lists will also make the listbox state more visually obvious and thus more usable for everyone. for popup listboxes used for dropdowns in autocomplete text fields, change the color value by 1 when the user is typing in the textfield as opposed to arrowing through the list. the listbox will still visually appear to be active, but the screen reader behavior is improved by not echoing too much spoken information for each keypress. one downside to this solution is that means that you cannot use "client data" for the list items, because windows won't allow owner drawn list items to use client data. event window ...

Accessibility documentation index - Accessibility
4 aria: grid role aria, html the grid role is for a widget that contains one or more rows of cells. the position of each cell is significant and can be focused using keyboard input. 65 aria: gridcell role aria, html the gridcell role is used to make a cell in a grid or treegrid. it is intended to mimic the functionality of the html td element for table-style grouping of information. 66 aria: heading role aria, aria role, aria heading, reference the heading role defines this element as a heading to a page or section. to give the page more structure, a level should also be provided to indicate relationships between sections. 67 aria: img role aria, aria img, aria role, accessibility, reference, rôle, figure the aria im...
...he html4 specification doesn't provide built-in tags that semantically describe these kinds of widgets, developers typically resort to using generic elements such as and . while this results in a widget that looks like its desktop counterpart, there usually isn't enough semantic information in the markup to be usable by an assistive technology. 88 architecture accessibility, developing mozilla the implementation of text and embedded objects in mozilla is clever but confusing. here is a bit of history and an explanation. 89 cognitive accessibility accessibility, best practices, forms, wcag, cognitive accessibility cognitive accessibility covers accessibility considerations for people with cognition and learning disabilities. this document introduces co...
...ccessibility and improving accessibility of the web for people with cognitive and learning differences. 90 community accessibility this document provides links to mailing lists, newsgroups, forums, and other communities related to accessbility. 91 html to msaa accessibility the table below shows how gecko maps html elements to msaa. this table reflects mapping rules for specific elements only, it doesn't reflect any general rules applicable to all elements. for example, if name column has n/a value then it means specific elements doesn't provide own rules to calculate name but name can be computed from aria markup or @title attribute. 92 implementing a microsoft active accessibility (msaa) server accessibility, msaa, microsoft, server ...

font-weight - CSS: Cascading Style Sheets
erty is described using any one of the values listed below. values normal normal font weight. same as 400. bold bold font weight. same as 700. <number> a <number> value between 1 and 1000, inclusive. higher numbers represent weights that are bolder than (or as bold as) lower numbers. certain commonly used values correspond to common weight names, as described in the common weight name mapping section below. in earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts. css fonts level 4 extends the syntax to acc...
..., 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts. css fonts level 4 extends the syntax to accept any number between 1 and 1000, inclusive, and introduces variable fonts, which can make use of this much finer-grained range of font weights. ...
... 100 thin (hairline) 200 extra light (ultra light) 300 light 400 normal 500 medium 600 semi bold (demi bold) 700 bold 800 extra bold (ultra bold) 900 black (heavy) variable fonts most fonts have a particular weight which corresponds to one of the numbers in common weight name mapping. however some fonts, called variable fonts, can support a range of weights with more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight. for truetype or opentype variable fonts, the "wght" variation is used to implement varying weights. accessibility concerns people experiencing low vision conditions may have difficulty reading text ...

Overview of CSS Shapes - CSS: Cascading Style Sheets
s before. if they do have shapes support then the visual display is enhanced. basic shapes the value circle(50%) is an example of a basic shape. the specification defines four <basic-shape> values, which are: inset() circle() ellipse() polygon() using the value inset() wraps text around a rectangular shape however you are able to add offset values, thus pulling the line boxes of any wrapping content closer to the object than would otherwise happen. we have already seen how circle() creates a circular shape. an ellipse() is essentially a squashed circle. if none of these simple shapes do the trick you can create a polygon() and make the shape as complex as you want. in our guide to basic shapes we explore each of the possible basic shapes and how to create them. shapes from the box...
... which to define our shape. in the example below, if you change the threshold the path that the shape takes changes based on the level of opacity you have selected. we take a deeper look at creating shapes from images in the shapes from images guide. the shape-margin property the shape-margin property adds a margin to shape-outside. this will further shorten the line boxes of any content wrapping the shape, pushing it away from the shape itself. in the example below we have added a shape-margin to a basic shape. change the margin to push the text further away from the path the shape would take by default. using generated content as the floated item in the examples above we have used images or a visible element to define the shape, meaning that you can see the shape on the page. inste...
... image, and also clip away part of that image, you can use the same values. the image below is a square image with a blue background. we have defined a shape using shape-outside: ellipse(40% 50%); and also used clip-path: ellipse(40% 50%); to clip away the same area that we have used to define the shape. developer tools for shapes along with css shapes support in the browser, firefox are shipping a shape path editor in the firefox devtools. this tool means that you can inspect any shapes on your page, and even change the values in the live page. if your polygon isn’t quite right you can use the shapes editor to tweak it, then copy the new value back into your css. the shape path editor will be enabled by default in firefox 60 for shapes generated via clip-path. you can also use it to e...

aspect-ratio - CSS: Cascading Style Sheets
the aspect-ratio css property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions. this property is not yet implemented in browsers, however some browsers are implementing this internally in order to provide the aspect ratio mapping described below. syntax aspect-ratio: 1 / 1; /* global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset; values <auto> replaced elements with an intrinsic aspect ratio use that aspect ratio, otherwise the box has no preferred aspect ratio. size calculations involving intrinsic aspect ratio always work with the content box dimensions. <ratio> the box’s preferred aspect ratio is the specified ratio of width / height. size calculations involving pre...
...’s preferred aspect ratio is the specified ratio of width / height. size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing. formal definition initial valueautoapplies toall elements except inline boxes and internal ruby or table boxesinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | <ratio> examples mapping width and height to aspect-ratio firefox has added an internal aspect-ratio property (in version 69 onwards) that applies to replaced elements and other related elements that accept width and height attributes. this appears in the browser's internal ua stylesheet. chrome is also shipping this feature. in firefox, the internal stylesheet rule looks like this: img, input[type="image"], video, e...
...l support 79notes notes chrome 79 adds internal support only for mapped valuesfirefox android no support noopera android no support nosafari ios no support nosamsung internet android no support nointernal mapping of width and height experimentalchrome full support 79edge full support 79firefox full support 71 full support 71 no support 69 — 71disabled disabled from version 69 until version 71 (exclusi...

background-size - CSS: Cascading Style Sheets
g a width value only, in which case the height defaults to auto. using both a width and a height value, in which case the first sets the width and the second sets the height. each value can be a <length>, a <percentage>, or auto. to specify the size of multiple background images, separate the value for each one with a comma. values contain scales the image as large as possible without cropping or stretching the image. cover scales the image as large as possible without stretching the image. if the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains. auto scales the background image in the corresponding direction such that its intrinsic proportions are maintained. <length> stretches the image in the corre...
...he first value; this draft does not include the contain or cover keywords. no support 9.5 — 15prefixed notes prefixed implemented with the vendor prefix: -o-notes opera 9.5's computation of the background positioning area is incorrect for fixed backgrounds. opera 9.5 also interprets the two-value form as a horizontal scaling factor and, from appearances, a vertical clipping dimension. this has been fixed in opera 10.safari full support 5 full support 5 full support 3prefixed notes prefixed implemented with the vendor prefix: -webkit-notes webkit-based browsers originally implemented an older draft of css3 background-size in which an ...
...e first value; this draft does not include the contain or cover keywords. no support 10.1 — 14prefixed notes prefixed implemented with the vendor prefix: -o-notes opera 9.5's computation of the background positioning area is incorrect for fixed backgrounds. opera 9.5 also interprets the two-value form as a horizontal scaling factor and, from appearances, a vertical clipping dimension. this has been fixed in opera 10.safari ios full support 4.2 full support 4.2 full support 1prefixed notes prefixed implemented with the vendor prefix: -webkit-notes webkit-based browsers originally implemented an older draft of css3 background-size in w...

font-weight - CSS: Cascading Style Sheets
e parent element. note that only four font weights are considered for relative weight calculation; see the meaning of relative weights section below. <number> a <number> value between 1 and 1000, inclusive. higher numbers represent weights that are bolder than (or as bold as) lower numbers. certain commonly used values correspond to common weight names, as described in the common weight name mapping section below. in earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts using the fallback weights system. css fonts...
...available, they are ignored for the purposes of relative weight calculation. ...
... extra light (ultra light) 300 light 400 normal (regular) 500 medium 600 semi bold (demi bold) 700 bold 800 extra bold (ultra bold) 900 black (heavy) 950 extra black (ultra black) variable fonts most fonts have a particular weight which corresponds to one of the numbers in common weight name mapping. however some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight. for truetype or opentype variable fonts, the "wght" variation is used to implement varying widths. for the example below to work, you'll need a browser that supports the css fonts level 4 syntax in...

Using HTML sections and outlines - Developer guides
designed to communicate structural meaning to browsers and other technologies interpreting the document on behalf of users, such as screen readers and voice assistants. semantic sectioning elements clarify the larger-scale structures within a document. they are intended to enhance the limited semantics of earlier versions of html, which included only the <div> tag as a generic mechanism for grouping related content. for example, <div class="navigation"> does not suggest any meaning about its content to a browser; only a human reading the html source can divine the meaning of a class like navigation. by contrast, the <nav> sectioning element more clearly describes to browsers and other devices the content contained: links or other navigational structures to help users move through and underst...
...n links that appear often on a site. you can have primary and secondary menus, but you cannot nest a <nav> element inside another <nav> element. html article element (<article>) defines a piece of self-contained content. it does not refer to the main content alone and can be used for comments and widgets. html section element (<section>) defines a section of a document to indicate a related grouping of semantic meaning. it makes sense to use the section element to provide extra context for the parent element. html aside element (<aside>) defines a section that, though related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement. the aside element has its own outline, but doesn't belong to the main one. other semantic html elements used in secti...
...based on the w3c spec, a section should typically contain a heading. the heading does not require the use of the <header> element <section> <h1>amazing mdn contributors</h1> <ul> <li><img src="link" alt="descriptive text"></li> <li><img src="link" alt="descriptive text"></li> <li><img src="link" alt="descriptive text"></li> </ul> </section> aside element ...

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
on most of what you'll need to know when using color, including a list of what you can color and what css properties are involved, how you describe colors, and how to actually use colors both in stylesheets and in scripts. we'll also take a look at how to let the user pick a color. then we'll wrap things up with a brief discussion of how to use color wisely: how to select appropriate colors, keeping in mind the needs of people with differing visual capabilities. things that can have color at the element level, everything in html can have color applied to it. instead, let's look at things in terms of the kinds of things that are drawn in the elements, such as text and borders and so forth. for each, we'll see a list of the css properties that apply color to them. at a fundamental level, th...
...olors. worse still, if using the wrong colors can result in 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 ...
... theory: color science (khan academy in association with pixar) an online course which introduces concepts such as what color is, how it's percieved, and how to use colors to express ideas. presented by pixar artists and designers. color theory on wikipedia wikipedia's entry on color theory, which has a lot of great information from a technical perspective. it's not really a resource for helping you with the color sleection process, but is still full of useful information. color and accessibility there are several ways color can be an accessibility problem. improper or careless use of color can result in a website or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. s...

HTML attribute reference - HTML: Hypertext Markup Language
<input>, <keygen>, <optgroup>, <option>, <select>, <textarea> indicates whether the user can interact with the element. download <a>, <area> indicates that the hyperlink is to be used for downloading a resource. draggable global attribute defines whether the element can be dragged. dropzone global attribute indicates that the element accepts the dropping of content onto it. enctype <form> defines the content type of the form data when the method is post. enterkeyhint <textarea>, contenteditable the enterkeyhint specifies what action label (or icon) to present for the enter key on virtual keyboards. the attribute can be used with form controls (such as the value of textarea elements), or in elements in an editing ho...
...vas>, <embed>, <iframe>, <img>, <input>, <object>, <video> specifies the height of elements listed here. for all other elements, use the css height property. note: in some instances, such as <div>, this is a legacy attribute, in which case the css height property should be used instead. hidden global attribute prevents rendering of given element, while keeping child elements, e.g. script elements, active. high <meter> indicates the lower bound of the upper range. href <a>, <area>, <base>, <link> the url of a linked resource. hreflang <a>, <area>, <link> specifies the language of the linked resource. http-equiv <meta> defines a pragma directive. icon <command> specifies a picture...
...m submits. novalidate <form> this attribute indicates that the form shouldn't be validated when submitted. open <details> indicates whether the details will be shown on page load. optimum <meter> indicates the optimal numeric value. pattern <input> defines a regular expression which the element's value will be validated against. ping <a>, <area> the ping attribute specifies a space-separated list of urls to be notified if a user follows the hyperlink. placeholder <input>, <textarea> provides a hint to the user of what can be entered in the field. poster <video> a url indicating a poster frame to show until the user plays or seeks. preload <audio>, <video> indicates whether th...

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
utton in the same group. the value of that one checked radio button is sent along with the name if the form is submitted, when tabbing into a series of same-named group of radio buttons, if one is checked, that one will receive focus. if they aren't grouped together in source order, if one of the group is checked, tabbing into the group starts when the first one in the group is encountered, skipping all those that aren't checked. in other words, if one is checked, tabbing skips the unchecked radio buttons in the group. if none are checked, the radio button group receives focus when the first button in the same name group is reached. once one of the radio buttons in a group has focus, using the arrow keys will navigate through all the radio buttons of the same name, even if the radio button...
...es, including number, date/time input types, and range, the step attribute is a number that specifies the granularity that the value must adhere to. if not explicitly included, step defaults to 1 for number and range, and 1 unit type (second, week, month, day) for the date/time input types. the value can must be a positive number—integer or float—or the special value any, which means no stepping is implied, and any value is allowed (barring other constraints, such as min and max). if any is not explicity set, valid values for the number, date/time input types, and range input types are equal to the basis for stepping - the min value and increments of the step value, up to the max value, if specified. for example, if you have <input type="number" min="10" step="2">, then any even inte...
...nteger, 10 or greater, is valid. if omitted, <input type="number">, any integer is valid, but floats (like 4.2) are not valid, because step defaults to 1. for 4.2 to be valid, step would have had to be set to any, 0.1, 0.2, or any the min value would have had to be a number ending in .2, such as <input type="number" min="-5.2"> note: when the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in contraint validation and will match the :invalid pseudoclass. the step attribute is expressed in seconds. the step scale factor is 1000 (which converts the seconds to milliseconds, as used in the other algorithms). the default step is 60 seconds. see client-side validation for more information. tabindex global attribute valid for all...

<video>: The Video Embed element - HTML: Hypertext Markup Language
to show the browser's default video controls, etc. the content inside the opening and closing <video></video> tags is shown as a fallback in browsers that don't support the element. attributes like all other html elements, this element supports the global attributes. autoplay a boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data. note: sites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so should be avoided when possible. if you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). however, this can be useful when creating media elements whose source will be set at a later time, unde...
... fired when audioprocess the input buffer of a scriptprocessornode is ready to be processed. canplay the browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. canplaythrough the browser estimates it can play the media up to its end without stopping for content buffering. complete the rendering of an offlineaudiocontext is terminated. durationchange the duration attribute has been updated. emptied the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it. ended playback has stopped because...
...resents the source video. in addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. this includes emotion and tone: 14 00:03:14 --> 00:03:18 [dramatic rock music] 15 00:03:19 --> 00:03:21 [whispering] what's that off in the distance? 16 00:03:22 --> 00:03:24 it's… it's a… 16 00:03:25 --> 00:03:32 [loud thumping] [dishes clattering] captions should not obstruct the main subject of the video. they can be positioned using the align vtt cue setting. mdn adding captions and subtitles to html5 video web video text tracks format (webvtt) webaim: captions, transcripts, and audio descriptions mdn understanding wcag, guideline 1.2 explanations understanding success criterion 1.2.1 | w3c understanding wca...

A typical HTTP session - HTTP
lso be used, like 8000 or 8080. the url of a page to fetch contains both the domain name, and the port number, though the latter can be omitted if it is 80. see identifying resources on the web for more details. note: the client-server model does not allow the server to send data to the client without an explicit request for it. to work around this problem, web developers use several techniques: ping the server periodically via the xmlhttprequest, fetch apis, using the websockets api, or similar protocols. sending a client request once the connection is established, the user-agent can send the request (a user-agent is typically a web browser, but can be anything else, a crawler, for example). a client request consists of text directives, separated by crlf (carriage return, followed by line ...
...location: https://developer.mozilla.org/ (this is the new link to the resource; it is expected that the user-agent will fetch it) keep-alive: timeout=15, max=98 accept-ranges: bytes via: moz-cache-zlb05 connection: keep-alive content-length: 325 (the content contains a default page to display if the user-agent is not able to follow the link) <!doctype html... ...
...ore, must-revalidate, max-age=0 content-language: en-us date: thu, 06 dec 2018 17:35:13 gmt expires: thu, 06 dec 2018 17:35:13 gmt server: meinheld/0.6.1 strict-transport-security: max-age=63072000 x-content-type-options: nosniff x-frame-options: deny x-xss-protection: 1; mode=block vary: accept-encoding,cookie x-cache: error from cloudfront <!doctype html... (contains a site-customized page helping the user to find the missing resource) response status codes http response status codes indicate if a specific http request has been successfully completed. responses are grouped into five classes: informational responses, successful responses, redirects, client errors, and servers errors. 200: ok. the request has succeeded. 301: moved permanently. this response code means that the uri of ...

Closures - JavaScript
a closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). in other words, a closure gives you access to an outer function’s scope from an inner function. in javascript, closures are created every time a function is created, at function creation time. lexical scoping consider the following example code: function init() { var name = 'mozilla'; // name is a local variable created by init function displayname() { // displayname() is the inner function, a closure alert(name); // use variable declared in the parent function } displayname(); } init(); init() creates a local variable called name and a function called displayname(). the displayname() function is an inner function that is defined inside...
...ver, since inner functions have access to the variables of outer functions, displayname() can access the variable name declared in the parent function, init(). run the code using this jsfiddle link and notice that the alert() statement within the displayname() function successfully displays the value of the name variable, which is declared in its parent function. this is an example of lexical scoping, which describes how a parser resolves variable names when functions are nested. the word lexical refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available. nested functions have access to variables declared in their outer scope. closure consider the following code example: function makefunc() { ...
...ns two private items: a variable called privatecounter, and a function called changeby. you can't access either of these private members from outside the anonymous function. instead, you can access them using the three public functions that are returned from the anonymous wrapper. those three public functions are closures that share the same lexical environment. thanks to javascript's lexical scoping, they each have access to the privatecounter variable and the changeby function. notice that i defined an anonymous function that creates a counter, and then i call it immediately and assign the result to the counter variable. you could store this function in a separate variable makecounter, and then use it to create several counters. var makecounter = function() { var privatecounter = 0; ...

JavaScript data types and data structures - JavaScript
programming languages all have built-in data structures, but these often differ from one language to another. this article attempts to list the built-in data structures available in javascript and what properties they have. these can be used to build other data structures. wherever possible, comparisons with other languages are drawn. dynamic typing javascript is a loosely typed and dynamic language. variables in javascript are not directly associated with any particular value type, and any variable can be assigned (and re-assigned) values of all types: let foo = 42; // foo is now a number foo = 'bar'; // foo is now a string foo = true; // foo is now a boolean data and structure types the latest ecmascript standard defines nine types: six data types that are primitives, c...
...mmutable. this means that once a string is created, it is not possible to modify it. however, it is still possible to create another string based on an operation on the original string. for example: a substring of the original by picking individual letters or using string.substr(). a concatenation of two strings using the concatenation operator (+) or string.concat(). beware of "stringly-typing" your code! it can be tempting to use strings to represent complex data. doing this comes with short-term benefits: it is easy to build complex strings with concatenation. strings are easy to debug (what you see printed is always what is in the string). strings are the common denominator of a lot of apis (input fields, local storage values, xmlhttprequest responses when using responsetext, ...
...cuted whenever a specified property is attempted to be changed. see also set. undefined [[enumerable]] boolean if true, the property will be enumerated in for...in loops. false [[configurable]] boolean if false, the property can't be deleted and can't be changed to a data property. false "normal" objects, and functions a javascript object is a mapping between keys and values. keys are strings (or symbols), and values can be anything. this makes objects a natural fit for hashmaps. functions are regular objects with the additional capability of being callable. dates when representing dates, the best choice is to use the built-in date utility in javascript. indexed collections: arrays and typed arrays arrays are regular objects for which the...

Introduction - JavaScript
on a server. this means that in the browser, javascript can change the way the webpage (dom) looks. and, likewise, node.js javascript on the server can respond to custom requests from code written in the browser. javascript and java javascript and java are similar in some ways but fundamentally different in some others. the javascript language resembles java but does not have java's static typing and strong type checking. javascript follows most java expression syntax, naming conventions and basic control-flow constructs which was the reason why it was renamed from livescript to javascript. in contrast to java's compile-time system of classes built by declarations, javascript supports a runtime system based on a small number of data types representing numeric, boolean, and string values.
...pes are not explicitly typed. java is a class-based programming language designed for fast execution and type safety. type safety means, for instance, that you can't cast a java integer into an object reference or access private memory by corrupting java bytecodes. java's class-based model means that programs consist exclusively of classes and their methods. java's class inheritance and strong typing generally require tightly coupled object hierarchies. these requirements make java programming more complex than javascript programming. in contrast, javascript descends in spirit from a line of smaller, dynamically typed languages such as hypertalk and dbase. these scripting languages offer programming tools to a much wider audience because of their easier syntax, specialized built-in functiona...
......

SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead - JavaScript
use //# instead error type a warning that a syntaxerror occurred. javascript execution won't be halted. ...
...map specification changed the syntax due to a conflict with ie whenever it was found in the page after //@cc_on was interpreted to turn on conditional compilation in the ie jscript engine. ...
...as interpreted to turn on conditional compilation in the ie jscript engine. the conditional compilation comment in ie is a little known feature, but it broke source maps with jquery and other libraries. examples deprecated syntax syntax with the "@" sign is deprecated. ...

Array.prototype.reduce() - JavaScript
s provided in the call to reduce(), then accumulator will be equal to initialvalue, and currentvalue will be equal to the first value in the array. if no initialvalue is provided, then accumulator will be equal to the first value in the array, and currentvalue will be equal to the second. note: if initialvalue is not provided, reduce() will execute the callback function starting at index 1, skipping the first index. if initialvalue is provided, it will start at index 0. if the array is empty and no initialvalue is provided, typeerror will be thrown. if the array only has one element (regardless of position) and no initialvalue is provided, or if initialvalue is provided but the array is empty, the solo value will be returned without calling callback. it is almost always safer to provide ...
...lue ) => accumulator.concat(currentvalue), [] ) counting instances of values in an object let names = ['alice', 'bob', 'tiff', 'bruce', 'alice'] let countednames = names.reduce(function (allnames, name) { if (name in allnames) { allnames[name]++ } else { allnames[name] = 1 } return allnames }, {}) // countednames is: // { 'alice': 2, 'bob': 1, 'tiff': 1, 'bruce': 1 } grouping objects by a property let people = [ { name: 'alice', age: 21 }, { name: 'max', age: 20 }, { name: 'jane', age: 20 } ]; function groupby(objectarray, property) { return objectarray.reduce(function (acc, obj) { let key = obj[property] if (!acc[key]) { acc[key] = [] } acc[key].push(obj) return acc }, {}) } let groupedpeople = groupby(people, 'age') // groupedp...
...e((resolve, reject) => { resolve(a * 2) }) } // function 3 - will be wrapped in a resolved promise by .then() function f3(a) { return a * 3 } // promise function 4 function p4(a) { return new promise((resolve, reject) => { resolve(a * 4) }) } const promisearr = [p1, p2, f3, p4] runpromiseinsequence(promisearr, 10) .then(console.log) // 1200 function composition enabling piping // building-blocks to use for composition const double = x => x + x const triple = x => 3 * x const quadruple = x => 4 * x // function composition enabling pipe functionality const pipe = (...functions) => input => functions.reduce( (acc, fn) => fn(acc), input ) // composed functions for multiplication of specific values const multiply6 = pipe(double, triple) const multiply9 = pipe(tri...

Array.prototype.map() - JavaScript
will not be visited by callback. if existing elements of the array are changed, their value as passed to callback will be the value at the time map visits them. elements that are deleted after the call to map begins and before being visited are not visited. due to the algorithm defined in the specification, if the array which map was called upon is sparse, resulting array will also be sparse keeping same indices blank. polyfill map was added to the ecma-262 standard in the 5th edition. therefore, it may not be present in all implementations of the standard. you can work around this by inserting the following code at the beginning of your scripts, allowing use of map in implementations which do not natively support it. this algorithm is exactly the one specified in ecma-262, 5th edition, a...
...rty, use the following: // object.defineproperty(a, k, { // value: mappedvalue, // writable: true, // enumerable: true, // configurable: true // }); // for best browser support, use the following: a[k] = mappedvalue; } // d. increase k by 1. k++; } // 9. return a return a; }; } examples mapping an array of numbers to an array of square roots the following code takes an array of numbers and creates a new array containing the square roots of the numbers in the first array. let numbers = [1, 4, 9] let roots = numbers.map(function(num) { return math.sqrt(num) }) // roots is now [1, 2, 3] // numbers is still [1, 4, 9] using map to reformat objects in an array the following code ...
...ly reformatted objects. let kvarray = [{key: 1, value: 10}, {key: 2, value: 20}, {key: 3, value: 30}] let reformattedarray = kvarray.map(obj => { let robj = {} robj[obj.key] = obj.value return robj }) // reformattedarray is now [{1: 10}, {2: 20}, {3: 30}], // kvarray is still: // [{key: 1, value: 10}, // {key: 2, value: 20}, // {key: 3, value: 30}] mapping an array of numbers using a function containing an argument the following code shows how map works when a function requiring one argument is used with it. the argument will automatically be assigned from each element of the array as map loops through the original array. let numbers = [1, 4, 9] let doubles = numbers.map(function(num) { return num * 2 }) // doubles is now [2, 8, 18] // numbe...

Atomics.notify() - JavaScript
defaults to +infinity. return value returns the number of woken up agents. returns 0, if a non-shared arraybuffer object is used. exceptions throws a typeerror, if typedarray is not a int32array. throws a rangeerror, if index is out of bounds in the typedarray. ...
...defaults to +infinity. return value returns the number of woken up agents. returns 0, if a non-shared arraybuffer object is used. exceptions throws a typeerror, if typedarray is not a int32array. throws a rangeerror, if index is out of bounds in the typedarray. ...
...n value returns the number of woken up agents. returns 0, if a non-shared arraybuffer object is used. exceptions throws a typeerror, if typedarray is not a int32array. throws a rangeerror, if index is out of bounds in the typedarray. examples using notify given a shared int32array: const sab = new sharedarraybuffer(1024); const int32 = new int32array(sab); a reading thread is sleeping and waiting on location 0 which is expected to be 0. as long as that is true, it will not go on. however, once the writing thread has stored a new value, it will be notified by the writing thread and return the new value (123). atomics.wait(int32, 0, 0); console.log(int32[0]); // 123 a writing thread stores a new value and notifies the waiting thread once it has written: console.log(int32[0]);...

String.prototype.toLocaleLowerCase() - JavaScript
the tolocalelowercase() method returns the calling string value converted to lower case, according to any locale-specific case mappings. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax str.tolocalelowercase() str.tolocalelowercase(locale) str.tolocalelowercase([locale, locale, ...]) parameters locale optional the locale parameter indicates the locale to be used to convert to lower case according to any locale-specific case mappings. if multiple locales are given in an array, the best available locale is used. the default locale is the host environment’s current locale. return value a new string re...
...onal the locale parameter indicates the locale to be used to convert to lower case according to any locale-specific case mappings. if multiple locales are given in an array, the best available locale is used. the default locale is the host environment’s current locale. return value a new string representing the calling string converted to lower case, according to any locale-specific case mappings. exceptions a rangeerror ("invalid language tag: xx_yy") is thrown if a locale argument isn't a valid language tag. a typeerror ("invalid element in locales argument") is thrown if an array element isn't of type string. description the tolocalelowercase() method returns the value of the string converted to lower case according to any locale-specific case mappings. tolocalelowercase() doe...
...rgument") is thrown if an array element isn't of type string. description the tolocalelowercase() method returns the value of the string converted to lower case according to any locale-specific case mappings. tolocalelowercase() does not affect the value of the string itself. in most cases, this will produce the same result as tolowercase(), but for some locales, such as turkish, whose case mappings do not follow the default case mappings in unicode, there may be a different result. examples using tolocalelowercase() 'alphabet'.tolocalelowercase(); // 'alphabet' '\u0130'.tolocalelowercase('tr') === 'i'; // true '\u0130'.tolocalelowercase('en-us') === 'i'; // false let locales = ['tr', 'tr', 'tr-tr', 'tr-u-co-search', 'tr-x-turkish']; '\u0130'.tolocalelowercase(locales) === 'i'; // t...

String.prototype.toLocaleUpperCase() - JavaScript
the tolocaleuppercase() method returns the calling string value converted to upper case, according to any locale-specific case mappings. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax str.tolocaleuppercase() str.tolocaleuppercase(locale) str.tolocaleuppercase([locale, locale, ...]) parameters locale optional the locale parameter indicates the locale to be used to convert to upper case according to any locale-specific case mappings. if multiple locales are given in an array, the best available locale is used. the default locale is the host environment’s current locale. return value a new string re...
...onal the locale parameter indicates the locale to be used to convert to upper case according to any locale-specific case mappings. if multiple locales are given in an array, the best available locale is used. the default locale is the host environment’s current locale. return value a new string representing the calling string converted to upper case, according to any locale-specific case mappings. exceptions a rangeerror ("invalid language tag: xx_yy") is thrown if a locale argument isn't a valid language tag. a typeerror ("invalid element in locales argument") is thrown if an array element isn't of type string. description the tolocaleuppercase() method returns the value of the string converted to upper case according to any locale-specific case mappings. tolocaleuppercase() doe...
...rgument") is thrown if an array element isn't of type string. description the tolocaleuppercase() method returns the value of the string converted to upper case according to any locale-specific case mappings. tolocaleuppercase() does not affect the value of the string itself. in most cases, this will produce the same result as touppercase(), but for some locales, such as turkish, whose case mappings do not follow the default case mappings in unicode, there may be a different result. also notice that conversion is not necessarily a 1:1 character mapping, as some characters might result in two (or even more) characters when transformed to upper-case. therefore the length of the result string can differ from the input length. this also implies that the conversion is not stable, so i.e. the fo...

let - JavaScript
ally, or locally to an entire function regardless of block scope. the other difference between var and let is that the latter is initialized to a value only when a parser evaluates it (see below). just like const the let does not create properties of the window object when declared globally (in the top-most scope). an explanation of why the name "let" was chosen can be found here. examples scoping rules variables declared by let have their scope in the block for which they are defined, as well as in any contained sub-blocks. in this way, let works very much like var. the main difference is that the scope of a var variable is the entire enclosing function: function vartest() { var x = 1; { var x = 2; // same variable! console.log(x); // 2 } console.log(x); // 2 } funct...
... in the same line, the if block's foo has already been created in the lexical environment, but has not yet reached (and terminated) its initialization (which is part of the statement itself). the if block's foo is still in the temp...
... in the same line, the if block's foo has already been created in the lexical environment, but has not yet reached (and terminated) its initialization (which is part of the statement itself). the if block's foo is still in the temporal dead zone. functio...

Strict mode - JavaScript
possible to blindly concatenate conflicting scripts. consider concatenating a strict mode script with a non-strict mode script: the entire concatenation looks strict! the inverse is also true: non-strict plus strict looks non-strict. obviously, concatenation of scripts is never ideal, but if you must, consider enabling strict on a function-by-function basis. you can also take the approach of wrapping the entire contents of a script in a function and having that outer function use strict mode. this eliminates the concatenation problem and it means that you have to explicitly export any shared variables out of the function scope. strict mode for functions likewise, to invoke strict mode for a function, put the exact statement "use strict"; (or 'use strict';) in the function's body before any ...
...for novice developers, and sometimes it gives operations which should be errors non-error semantics. sometimes this fixes the immediate problem, but sometimes this creates worse problems in the future. strict mode treats these mistakes as errors so that they're discovered and promptly fixed. first, strict mode makes it impossible to accidentally create global variables. in normal javascript mistyping a variable in an assignment creates a new property on the global object and continues to "work" (although future failure is possible: likely, in modern javascript). assignments, which would accidentally create global variables, instead throw an error in strict mode: 'use strict'; // assuming no global variable mistypedvariable exists mistypevariable = 17; // this line thr...
... (14).sailing = 'home'; // typeerror 'with'.you = 'far away'; // typeerror })(); simplifying variable uses strict mode simplifies how variable names map to particular variable definitions in the code. many compiler optimizations rely on the ability to say that variable x is stored in that location: this is critical to fully optimizing javascript code. javascript sometimes makes this basic mapping of name to variable definition in the code impossible to perform until runtime. strict mode removes most cases where this happens, so the compiler can better optimize strict mode code. first, strict mode prohibits with. the problem with with is that any name inside the block might map either to a property of the object passed to it, or to a variable in surrounding (or even global) scope, at runt...

Web video codec guide - Web media technologies
color depth (bit depth) the higher the color bit depth, the higher the quality of color fidelity is achieved in the video. additionally, in saturated portions of the image (that is, where colors are pure and intense, such as a bright, pure red [rgba(255, 0, 0, 1)]), color depths below 10 bits per component (10-bit color) allow banding, where gradients cannot be represented without visible stepping of the colors. depending on the codec, higher color depths may result in larger compressed file sizes. the determining factor is what internal storage format is used for the compressed data. frame rate primarily affects the perceived smoothness of the motion in the image. to a point, the higher the frame rate, the smoother and more realistic the motion will appear. eventually the p...
...roduce ringing, an effect where areas outside an object are contaminated with colored pixels generated by the compression algorithm. this happens when an algorithm that uses blocks that span across a sharp boundary between an object and its background. this is particularly common at higher compression levels. note the blue and pink fringes around the edges of the star above (as well as the stepping and other significant compression artifacts). those fringes are the ringing effect. ringing is similar in some respects to mosquito noise, except that while the ringing effect is more or less steady and unchanging, mosquito noise shimmers and moves. ringing is another type of artifact that can make it particularly difficult to read text contained in your images. posterizing posterization occur...
...equirements. reduced frame rate similarly, you can remove frames from the video entirely and decrease the frame rate to compensate. this has two benefits: it makes the overall video smaller, and that smaller size allows motion compensation to accomplish even more for you. for exmaple, instead of computing motion differences for two frames that are two pixels apart due to inter-frame motion, skipping every other frame could lead to computing a difference that comes out to four pixels of movement. this lets the overall movement of the camera be represented by fewer residual frames. the absolute minimum frame rate that a video can be before its contents are no longer perceived as motion by the human eye is about 12 frames per second. less than that, and the video becomes a series of still imag...

Add to Home screen - Progressive web apps (PWAs)
it with a single tap. this guide explains how a2hs is used, and what you need to do as a developer to allow your users to take advantage of it. why a2hs? a2hs is thought to be part of the progressive web app philosophy — giving web apps the same user experience advantages as native apps so they can compete in today's ecosystem wars. part of this is the simple gesture of accessing an app by tapping its icon on your home screen, and then having it appear neatly in its own window. a2hs makes this possible. what browsers support a2hs? a2hs is supported in all mobile browsers, except ios webview. it's also supported in some chromium desktop browsers. firefox has had mobile support since v58 and is working on desktop support. see caniuse.com for exact details. how do you use it? we've writ...
...o be used offline. the example displays a series of fox pictures. if you have firefox for android available, use it to navigate to our demo at https://mdn.github.io/pwa-examples/a2hs/. you'll see fox pictures, but more important, you'll see a "home" icon with a plus (+) icon inside it — this is the "add to home screen" icon displayed for any site that has the necessary features in place. tapping this will show a confirmation banner — pressing the big + add to home screen button completes the action, adding the app to the home screen. (note: in android 8 and higher, a system-level "add to home screen" permission dialog will be shown first.) if you have mobile chrome available, the experience is slightly different; upon loading our site, you'll see an install banner pop up asking whet...
...bout chrome install banners from the article web app install banners. if you choose not to add it to your home screen at this point, you can do so later using the add to home screen icon in the main chrome menu. regardless of which browser you are using, when you choose to add the app to your home screen, you'll see it appear along with a short title, in the same way that native apps do. tapping this icon opens it up, but as a fullscreen app, you'll no longer see the browser ui around it. how do you make an app a2hs-ready? to enable your app to be added to a home screen, it needs the following: to be served over https — the web is increasingly being moved in a more secure direction, and many modern web technologies (a2hs included) will work only on secure contexts. to have a mani...

Installing and uninstalling web apps - Progressive web apps (PWAs)
why installation? the option to install a web application is part of the progressive web app philosophy—giving web apps the same user experience advantages as native apps so they can be competitive. installed applications are more conveniently invoked as they have a presence in a device’s home screen or app list or bar. this makes it simple for a user to use a gesture to access an app by tapping or clicking its icon. the application itself may then manifest as in a chromeless view (without the full browser chrome) but it nevertheless is executing effectively as a tab within the browser. for users, the experience of a seemingly-native pwa is more comfortable and convenient than a typical web site. by reducing the user experience differential between the web app and native apps on the use...
... ui for this varies from browser to browser, but the general idea is the same. unfortunately, there isn't a standard for icons and symbols used for operations such as this. firefox for android on an android device using firefox, you'll see a "home" icon with a plus (+) icon inside it—this is the "add to home screen" icon displayed for any site that has the necessary features in place. ...
... google chrome for android if you have google chrome for android available, the experience is slightly different; upon loading our site, you'll see an install banner pop up asking whether you want to add this app to your home screen. ...

clip-path - SVG: Scalable Vector Graphics
the clip-path presentation attribute defines or associates a clipping path with the element it is related to. note: as a presentation attribute clip-path can be used as a css property. ...
...path>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, <use> html,body,svg { height:100% } <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <clippath id="myclip" clippathunits="objectboundingbox"> <circle cx=".5" cy=".5" r=".5" /> </clippath> <!-- top-left: apply a custom defined clipping path --> <rect x="1" y="1" width="8" height="8" stroke="green" clip-path="url(#myclip)" /> <!-- top-right: apply a css basic shape on a fill-box geometry. this is the same as having a custom clipping path with a clippathunits set to objectboundingbox --> <rect x="11" y="1" width="8" height="8" stroke="green" clip-path="circle() fill-box" /> <!-- bottom-left...
... path with a clippathunits set to objectboundingbox --> <rect x="11" y="1" width="8" height="8" stroke="green" clip-path="circle() fill-box" /> <!-- bottom-left --> <rect x="1" y="11" width="8" height="8" stroke="green" clip-path="circle() stroke-box" /> <!-- bottom-right: apply a css basic shape on a view-box geometry. ...

clip - SVG: Scalable Vector Graphics
the clip attribute is a presentation attribute defining the visible region of an element. this attribute has the same parameter values as defined for the css clip property. unitless values, which indicate current user coordinates, are permitted on the coordinate values on the rect(). the value of auto defines a clipping path along the bounds of the viewport created by the given element. ...
...). the value of auto defines a clipping path along the bounds of the viewport created by the given element. as a presentation attribute, it can be applied to any element but it has effect only on the following six elements: <svg>, <symbol>, <image>, <foreignobject>, <pattern>, <marker> html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- auto clipping --> <svg x="0" width="10" height="10" clip="auto"> <circle cx="5" cy="5" r="4" stroke="green" /> </svg> <!-- rect(top, right, bottom, left) clipping --> <svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)"> <circle cx="5" cy="5" r="4" stroke="green" /> </svg> </svg> usage notes warning: this property is deprecated. use clip-path instead. value...
... </svg> <!-- rect(top, right, bottom, left) clipping --> <svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)"> <circle cx="5" cy="5" r="4" stroke="green" /> </svg> </svg> usage notes warning: this property is deprecated. use clip-path instead. value auto | rect() default value auto animatable yes the value auto defines a clipping path along the bounds of the viewport created by the given element.the value rect() defines a clipping rectangle following the following syntax: rect(<top>, <right>, <bottom>, <left>). the <top> and <bottom> values specify offsets from the top border edge of the element viewport, while <right> and <left> specify offsets from the left border edge of the element viewport. specifications ...

Common XSLT Errors - XSLT: Extensible Stylesheet Language Transformations
t which is incompatible with what eventually became the xslt 1.0 specification. firefox only supports the official xslt 1.0 version. missing features there are some features in the xslt 1.0 specification which firefox unfortunately does not yet support. specifically: the namespace:: axis in xpath expressions. support for this will hopefully be available in the future. ...
...or this will hopefully be available in the future. the disable-output-escaping attribute. this feature controls how serializing the constructed output document works. however firefox never serializes the output document and so the attribute isn't really applicable. while we could try to add some heuristics to serialize and reparse just the part of the output document which has disable-output-escaping applied, heuristics often get things wrong and lead to surprising results, hence we've been reluctant to add this so far. ...
...es the output document and so the attribute isn't really applicable. while we could try to add some heuristics to serialize and reparse just the part of the output document which has disable-output-escaping applied, heuristics often get things wrong and lead to surprising results, hence we've been reluctant to add this so far. often times stylesheets contain code like <xsl:text disable-output-escaping="yes">&nbsp;</xsl:text>, this is equivalent to simply putting &#160; in the stylesheet which will work great in all xslt engines. we do realize that the lack of disable-output-escaping is a problem and we'd like to find a solution for it, however so far we haven't found any good solutions. the <xsl:namespace-alias> element. if you'd like to help out with any of the above features, help would b...

SDK and XUL Comparison - Archive of obsolete content
compatibility although we can't promise we'll never break a high-level api, maintaining compatibility across firefox versions is a top priority for us. we've designed the apis to be forward-compatible with the new multiple process architecture (codenamed electrolysis) planned for firefox. ...
...s in them, so most traditional add-ons would have to be substantially rewritten anyway. user experience best practices the ui components available in the sdk are designed to align with the usability guidelines for firefox, giving your users a better, more consistent experience. mobile support starting in sdk 1.5, we've added experimental support for developing add-ons on the new native version of firefox mobile. see the tutorial on mobile development. advantages of xul-based add-ons user interface flexibility xul overlays offer a great deal of options for building a ui and integrating it into the browser. using only the sdk's supported apis you have much more limited options for your ui. xpcom ...

panel - Archive of obsolete content
onkeyup(event) { if (event.keycode == 13) { // remove the newline. text = textarea.value.replace(/(\r\n|\n|\r)/gm,""); self.port.emit("text-entered", text); textarea.value = ''; } }, false); // listen for the "show" event being sent from the // main add-on code. it means that the panel's about // to be shown. // // set the focus to the text area so the user can // just start typing. self.port.on("show", function onshow() { textarea.focus(); }); finally, the "text-entry.html" file defines the <textarea> element: <html> <head> <style type="text/css" media="all"> textarea { margin: 10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> </body> </html> ...
...nkeyup(event) { if (event.keycode == 13) { // remove the newline. text = textarea.value.replace(/(\r\n|\n|\r)/gm,""); addon.port.emit("text-entered", text); textarea.value = ''; } }, false); // listen for the "show" event being sent from the // main add-on code. it means that the panel's about // to be shown. // // set the focus to the text area so the user can // just start typing. addon.port.on("show", function onshow() { textarea.focus(); }); finally, the html file now references "get-text.js" inside a <script> tag: <html> <head> <style type="text/css" media="all"> textarea { margin: 10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> <scri...

widget - Archive of obsolete content
scripting trusted widget content we've already seen that you can package html files in your add-on's data directory and use them to define the widget's content. we can call this "trusted" content, because unlike content loaded from a source outside the add-on, the add-on author knows exactly what it's ...
... data = require("sdk/self").data var clockpanel = require("sdk/panel").panel({ width:215, height:160, contenturl: data.url("clock.html") }); require("sdk/widget").widget({ id: "open-clock-btn", label: "clock", ...

core/promise - Archive of obsolete content
. the composed function may take both normal values and promises as arguments and returns promise. the returned promise will resolve to value that would have been returned by an original function if it were called with fulfillment values of given arguments. this technique is so powerful that it can replace most of the promise utility functions provided by other promise libraries. for example grouping promises to observe single resolution of all of them is as simple as this: var group = promised(array); var abc = group(aasync, basync, casync).then(function(items) { return items[0] + items[1] + items[2]; }); all the all function is provided to consume an array of promises and return a promise that will be accepted upon the acceptance of all the promises in the initial array. this can be us...
...fer({ get: function get(name) { return this.then(function(value) { return value[name]; }); } }); promise.get('foo').get('bar').then(console.log); resolve({ foo: { bar: 'taram !!' } }); // => 'taram !!' also promised function maybe be passed a second optional prototype argument to achieve the same effect. treat all values as promises module provides a simple function for wrapping values into promises: const { resolve } = require('sdk/core/promise'); var a = resolve(5).then(function(value) { return value + 2; }); a.then(console.log); // => 7 also resolve not only takes values, but also promises. if you pass it a promise it will return a new identical one: const { resolve } = require('sdk/core/promise'); resolve(resolve(resolve(3))).then(console.log); // => 3 this ...

cfx - Archive of obsolete content
lag to reverse that behavior: if this flag is set and the add-on includes its own copies of the sdk modules, then the add-on will use the sdk modules in the add-on, not the ones built into firefox. this flag is particularly useful for sdk developers or people working with the development version of the sdk, who may want to run an add-on using newer versions of the modules than than those shipping in firefox. --templatedir=templatedir the cfx run command constructs the add-on using a extension template which you can find under the sdk root, in app-extension. use the --templatedir option to specify a different template. templatedir may be specified as a full path or as a path relative to the current directory. internal options --addons=addons paths of add...
...lag to reverse that behavior: if this flag is set and the add-on includes its own copies of the sdk modules, then the add-on will use the sdk modules in the add-on, not the ones built into firefox. this flag is particularly useful for sdk developers or people working with the development version of the sdk, who may want to run an add-on using newer versions of the modules than than those shipping in firefox. --stop-on-error stop running tests after the first failure. internal options --addons=addons paths of add-ons to install, comma-separated. addons may be specified as full paths or relative to the current directory. --e10s if this option is set then the add-on runs in a separate process. this option is currently not implemented. ...

Boxes - Archive of obsolete content
wrapping contents in html you can use a div as a container and when the div changes size, the contents will wrap or adjust the layout. this does not happen with xul box (or hbox and vbox) by default. however, you can easily add this capability with a style change. ...
... wrapping contents in html you can use a div as a container and when the div changes size, the contents will wrap or adjust the layout. this does not happen with xul box (or hbox and vbox) by default. however, you can easily add this capability with a style change. ...

Drag & Drop - Archive of obsolete content
first, you need to hook up the basic drag event handlers: elem.addeventlistener("dragover", _dragover, true); elem.addeventlistener("dragdrop", _dragdrop, true); here, elem could be a window or an xul element. ...
...the _dragdrop function retrieves the file uri data from the drag session and creates an array of file uris that the xul application can use. ...

Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
her things. a different mechanism is needed to perform these functions. internet explorer handles this using activex; in firefox, we use the cross-platform component object model, or xpcom. due to deprecation of enableprivilege this functionality can not be used in web pages. enableprivilege is disabled in firefox 15 and will be removed in firefox 17. about xpcom xpcom is a framework for developing platform-independent components. components developed in line with that framework are referred to as xpcom components, and sometimes the components are simply referred to as xpcoms. firefox itself includes a great number of xpcom components, and they can be used in extensions as well. sometimes an extension will be packaged with a special xpcom component developed specifically for it. note: if ...
...ependent components. components developed in line with that framework are referred to as xpcom components, and sometimes the components are simply referred to as xpcoms. firefox itself includes a great number of xpcom components, and they can be used in extensions as well. sometimes an extension will be packaged with a special xpcom component developed specifically for it. note: if you're developing components in c++ or other compiled languages, be sure to include binaries for every platform. reference materials to get an idea of what kinds of functions embedded xpcom can handle, take a look at the api reference and the interface definitions from xpidl in the actual source code. note: interface definition language (idl) is a language for giving standard definitions of objects, methods, a...

Appendix D: Loading Scripts - Archive of obsolete content
oad cache (gecko 1.x) or startup cache (gecko 2), which means they don't necessarily need to read as source and compiled with each restart. flexibility: script tags provide a means to specify the character set and javascript version of the scripts to be loaded, which many other methods do not. debuggable: development tools support debugging javascript loaded by script tags disadvantages scoping: scripts loaded via script tags share the global scope with all other scripts loaded into the same window. these tags provide no means to load scripts into a private or otherwise specific scope. speed: even if these scripts are loaded from a cache, only read and compile time are reduced. the scripts still need to execute all of their initialization code and allocate and initialize all of their d...
... safely perform synchronous xmlhttprequests or other intensive computation which would normally need to be broken up into multiple callbacks. safety: as workers have no access to objects which might cause a crash or deadlock when executed re-entrantly or by spinning the event loop, there are significant safety advantages over other methods of asynchronous execution. disadvantages limited scoping: as data from the main thread may only be accessed via json message passing, there are significant difficulties in performing many operations in worker scopes. dom access: as there is no dom access in worker scopes, xmlhttprequests may not easily be used with xml or html sources, and should instead only be used with json or other text-based sources. debugging: jsd knows nothing about workers an...

Getting Started with Firefox Extensions - Archive of obsolete content
taken from the extensions page. ...
...n interaction (delicious bookmarks, ebay companion) and web development (dom inspector, firebug). these are very advanced and complex extensions, and you'll learn most of what it takes to create extensions like these. extensions now exist in 3 different forms: add-ons sdk extensions (also known as jetpacks), bootstrapped extensions and traditional extensions. if you're only getting started developing add-ons, the add-ons sdk provides a great way to quickly create simple ones and build on them. this tutorial focuses on traditional extensions, which are created differently. bootstrapped extensions are a step above traditional ones in complexity, so you should go through this tutorial before giving them a try. we'll begin the tutorial by analyzing a very simple extension. the hello world exten...

Introduction - Archive of obsolete content
we have poured years of xul experience into it, providing many solutions for problems extension developers commonly run into. xul school was created by appcoast (formerly glaxstar), one of the few companies dedicated to building high-quality firefox extensions. a team of over a dozen xul developers conformed glaxstar at the time this tutorial was created, and the combined experiences of years creating firefox extensions are reflected here. ...
...xulrunner applications in the xulrunner hall of fame. gecko the gecko engine is the part of firefox used to render web pages and its own user interface. you can identify the level of compatibility of web standards in gecko-based browsers looking at their user agent string, which should include the gecko version. gecko versions are somewhat independent from firefox versions, and you can see a mapping of firefox versions and gecko versions at the gecko page. the user agent string for firefox at the time of this writing (in us english, mac os x) is: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:25.0.1) gecko/20100101 firefox/25.0.1 the highlighted section is the gecko version: 25.0.1. you can read and copy the user agent string of any firefox window, choosing "help > troubleshooting informa...

JavaScript Object Management - Archive of obsolete content
ated as string-indexed arrays: // equivalent. 〈namespace〉.hello = {}; 〈namespace〉["hello"] = {}; // equivalent. 〈namespace〉.hello.init(); 〈namespace〉.hello["init"](); this is very useful in cases where you have to set attributes or functions with dynamically generated names. it's one of the funky properties of javascript: all objects are nothing more than name / value mappings. you can add or replace functions and attributes to any javascript object, at any moment you want. this is an odd, but powerful feature that comes in handy at times when things get complicated. for instance, you could replace a method in any object in the firefox chrome, so that it behaves differently than how it normally does. this should be a last resort option, but it is very useful at times.
...a in a way that it is consistent for all open firefox windows. there are several ways in which you can do this. preferences is one of them, and they are covered in another section of this tutorial. two other ways are javascript code modules (firefox 3 and above), and xpcom. javascript code modules javascript code modules (also known as jsm) are new to firefox 3, and they're the best tool for keeping everything in sync between windows. they're very simple to set up. the first thing you need to do is add an entry in the chrome.manifest file: resource xulschoolhello modules/ javascript code modules are accessed with the resource protocol, which is very similar to the chrome protocol. just like with the chrome, we define the package name and then a path. to keep things simple, just l...

XPCOM Objects - Archive of obsolete content
ear which one to call, but in case of doubt, look for documentation on it. those two methods always receive the interface identifier as an argument. similarly to cc, ci (components.interfaces) is an index of available interfaces. a modified version of the last code snippet produces an even longer list of available interfaces. just like in component identifiers, the nsi prefix is just a way of keeping things in order. the ns stands for netscape, mozilla's predecessor. the "i" stands for interface. our interfaces should begin with something like xsihello. an interface is just a definition of a set of attributes and methods that an object implementing it should have. xpcom components can implement multiple interfaces, and they often do. let's look at the preference service as an example of this...
...net was discontinued. their xpcom documentation is better in terms of seeing the relationships between components and interfaces, so we'll use that. another useful resource is this xpcom reference. this is generated from source, and it's kept relatively up to date. it shows the relationships between components and interfaces, but it's more of a source browser than a documentation reference. stepping into the time machine, we see the preferences service component page. right at the top you can see a list of the interfaces it implements, with a link to a documentation page for each one of them. then you'll see a list of all members of this object, with some documentation about it. it is particularly important to note that, for every member in the component, you'll see in what interface this me...

Overlay extensions - Archive of obsolete content
prior to firefox 4, and the gecko 2 engine that powers it, this was the only way to develop extensions. this methodology has largely been superseded by restartless extensions, and the add-on sdk, which is built on top of them. the privileged javascript apis described here can still be used in these newer types of add-ons. ...
... environment setting up the application for extension development. xul tutorials and reference for the user interface language used by xul extensions. code snippets sample code for many of the things you'll want to do. installing extensions how to install an extension by copying the extension files into the application's install directory. firefox add-ons developer guide a guide to developing overlay extensions. javascript code modules javascript modules available to extension developers. extension preferences how to specify the preferences for your extension that will appear in the add-ons manager. extension packaging how extensions are packaged and installed. binary firefox extensions creating binary extensions for firefox. ...

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
ustrate a possible implementation. an implementation can also use other transport technologies such as soap-based remote procedure calls, xmlhttprequest interfaces, or dom 3 load. the second example shows a tabbed menu that dynamically loads news headlines into the current web page. this implementation uses xmlhttprequest. extending traditional hypertext navigation the hypertext approach to developing web pages, in which developers format text layouts into pages and link those pages to related content, is analogous to a book or a magazine: readers view pages, go to other pages for more information, and view resources listed as references on that page. html and web standards have evolved and now offer flexible and fine-grained control to layout as well supporting dhtml, powerful programming lan...
...publishing system allows your users to modify content for the portal, but in order to have their text spell checked they must click somewhere and wait for the response page. the inner-browsing model is able to provide users with automatic spell check without leaving the page being edited, a similar experience to a word processor application. the incorrect words are highlighted while the user is typing. forms with nested selects in today's web pages it is common to see selects where content is dependent on the selection made on another select. for example, imagine a web form where users have to choose their city, by first selecting country then state. for example, imagine a web form where users have to choose their city, by first selecting country then state. updating the selects without refres...

Notes on HTML Reflow - Archive of obsolete content
at which text is being typed. the purpose of the dirty reflow is to allow these individual reflows to be coalesced intelligently. a frame that decides it needs a dirty reflow sets the ns_frame_is_dirty state bit on itself, and then calls the reflowdirtychild method on its parent frame. in reflowdirtychild, the parent frame sets the ns_frame_has_dirty_child state bit on itself, and does any bookkeeping necessary to remember which child is dirty (for example, the block frame marks the linebox dirty that contains the child frame). the parent frame can then either decide to schedule a reflowdirty incremental reflow targeted at itself, or to delegate that responsibility to its parent. if it decides to delegate, then it sets the ns_frame_is_dirty state bit on itself and recursively calls re...
... to schedule a reflowdirty incremental reflow targeted at itself, or to delegate that responsibility to its parent. if it decides to delegate, then it sets the ns_frame_is_dirty state bit on itself and recursively calls reflowdirtychild. eventually, the reflowdirty incremental reflow is dispatched, and arrives at the container frame that scheduled it. the target frame recovers its bookkeeping information (e.g., the block frame iterates through the dirty lineboxes), and reflows the dirty child frames. isn't information lost if a reflowdirty incremental reflow coalesces different kinds of incremental reflows (e.g., a contentchanged with a stylechanged)? no, because these kinds of reflows aren't coalesced; instead, they're directly enqueued to the presentation shell's reflow que...

Creating a hybrid CD - Archive of obsolete content
racters. the utility mkhybrid lets you create hybrid cds that work with all three filesystems. mkhybrid was written by james pearson and is is a component of the latest versions of cdrecord. i used version 1.8.1a03 although you'll probably want to get a newer one. here's what i did to create the cd for the second anniversary party. mkhybrid -o ~/party.iso -r -j -hfs -v mozilla.party -map ~/hfsmapping ~/party/ cdrecord -v speed=2 dev=0,6,0 ~/party.iso its also handy to be able to mount an image file to test it. mount ~/party.iso /mnt/cdrom -t iso9660 -o loop=/dev/loop3,blocksize=1024 umount /mnt/cdrom here is the hfs mapping that i used. the creator "moss" is for netscape 4.x and "mozz" is used for mozilla. it is used as the creator type for readme and other text files because it can handle...
...ble to mount an image file to test it. mount ~/party.iso /mnt/cdrom -t iso9660 -o loop=/dev/loop3,blocksize=1024 umount /mnt/cdrom here is the hfs mapping that i used. the creator "moss" is for netscape 4.x and "mozz" is used for mozilla. it is used as the creator type for readme and other text files because it can handle unix and windows linebreaks, but teachtext cannot. ...

Documentation for BiDi Mozilla - Archive of obsolete content
rdinates. the order of the frames in the content model is not affected, so frames that are adjacent in the content model can be far apart visually. a new frame iterator, nsvisualiterator (in nsframetraversal.cpp) provides visual frame navigation capability. details of rendering are dependent on user preferences and system capabilities. where the system is capable of tasks such as reversing and shaping text, symmetric swapping, numeric translation, etc., no special text rendering is needed, though there may be a call to a native api to set the base text direction (for example settextalign on windows). for systems without bidi capabilities, the methods in nsiubidiutils are used. note that we are not affected by buggy bidi implementations on specific platforms, since the platform never sees a tex...
...ype summary of new classes class name xpcom interface (if applicable) implementation comments nsibidi intl\unicharutil\public\nsibidi.h intl\unicharutil\src\nsbidiimp.cpp implementation of the unicode bidi algorithm nsiubidiutils intl\unicharutil\public\nsiubidiutils.h intl\unicharutil\src\nsbidiutilsimp.cpp utilities for bidi processing, including: character classification symmetric swapping reordering shaping numeric translation conversion to/from presentation forms nsbidipresutils layout/base/nsbidipresutils.cpp utilities for the layout engine including: resolve frames by bidi level split framesreorder frames format bidi text support for deletion and insertion of frames by editor nsbiditextframe layout/generic/nsbidiframes.cpp subclass of nsframe with additional method seto...

jspage - Archive of obsolete content
ntdefault(); },stoppropagation:function(){if(this.event.stoppropagation){this.event.stoppropagation();}else{this.event.cancelbubble=true;}return this;},preventdefault:function(){if(this.event.preventdefault){this.event.preventdefault(); }else{this.event.returnvalue=false;}return this;}});function class(b){if(b instanceof function){b={initialize:b};}var a=function(){object.reset(this);if(a._prototyping){return this; }this._current=$empty;var c=(this.initialize)?this.initialize.apply(this,arguments):this;delete this._current;delete this.caller;return c;}.extend(this); a.implement(b);a.constructor=class;a.prototype.constructor=a;return a;}function.prototype.protect=function(){this._protected=true;return this;};object.reset=function(a,c){if(c==null){for(var e in a){object.reset(a,e); }return a;}de...
...type.protect=function(){this._protected=true;return this;};object.reset=function(a,c){if(c==null){for(var e in a){object.reset(a,e); }return a;}delete a[c];switch($type(a[c])){case"object":var d=function(){};d.prototype=a[c];var b=new d;a[c]=object.reset(b);break;case"array":a[c]=$unlink(a[c]); break;}return a;};new native({name:"class",initialize:class}).extend({instantiate:function(b){b._prototyping=true;var a=new b;delete b._prototyping;return a; },wrap:function(a,b,c){if(c._origin){c=c._origin;}return function(){if(c._protected&&this._current==null){throw new error('the method "'+b+'" cannot be called.'); }var e=this.caller,f=this._current;this.caller=f;this._current=arguments.callee;var d=c.apply(this,arguments);this._current=f;this.caller=e;return d;}.extend({_owner:a,_origin:c,_name:b})...

Modularization techniques - Archive of obsolete content
s and reducing compile time dependencies. it can even be used to eliminate all link time dependencies on the class and its factory entirely. the component manager one of the major goals of our modularization is to remove link time dependencies. so how do you find a module if you've never linked with it? we've created something called the nscomponentmanager. the nscomponentmanager is simply a mapping of class ids to factories and their containing libraries. class nscomponentmanager { public: // finds a factory for a specific class id static nsresult findfactory(const nscid &aclass, nsifactory **afactory); // creates a class instance for a specific class id static nsresult createinstance(const nscid &aclass, const nsiid &a...
... \ {0x57ecad90, 0xae1a, 0x11d1, \ {0xb6, 0x6c, 0x00, 0x80, 0x5f, 0x8a, 0x26, 0x76}} /* * nsisample interface declaration */ class nsisample: public nsisupports { public: ns_imethod hello() = 0; }; file nssample.h nssample.h defines the class id (cid) for our sample class. note that one interface can have a number of classes that implement it, so there is not necessarily a one-to-one mapping from iids to cids. it also defines the function for retrieving our class factory. notice it does not contain a class declaration. #include "nsifactory.h" // {d3944dd0-ae1a-11d1-b66c-00805f8a2676} #define ns_sample_cid \ {0xd3944dd0, 0xae1a, 0x11d1, \ {0xb6, 0x6c, 0x00, 0x80, 0x5f, 0x8a, 0x26, 0x76}} extern nsresult getsamplefactory(nsifactory **aresult); file nssample.cpp nssample.cpp c...

Running Tamarin acceptance tests - Archive of obsolete content
reason: inconsistencies in different debug output, need to implement regex matching of diffs 2527 running abcasm/branchtocommon.abs 2530 running abcasm/arithmetic.abs 2529 running abcasm/bkpt.abs 2528 running abcasm/bkptline.abs 2526 running abcasm/bug_476556.abs 2524 running abcasm/bug_491056.abs ... test run passed! tests complete at 2...
...$ 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 abcasm/branchtocommon.abs 2530 running abcasm/arithmetic.abs 2529 running abcasm/bkpt.abs 2528 running abcasm/bkptline.abs 2526 running abcasm/bug_476556.abs 2524 running abcasm/bug_491056.abs ... test run passed! tests complete at 2010-09-28 10:39:26.751797 start date: 2010-09-28 10:...

Video presentations - Archive of obsolete content
architecture these presentations provide an architectural overview of the codebase. how pages are built using the dom this presentation describes how documents are loaded and the dom tree is constructed. ...
...provide insight into the mozilla community and how the project works. the mozilla community (part 1, part 2) this presentation talks about the mozilla community and how you can get involved smoothly. (as quicktime; 170 mb and 80 mb) mozilla-seneca projects q&a with mike shaver (part 1, part 2) mike shaver answers questions about the mozilla project. (as quicktime; 138 mb and 132 mb) developing mozilla these presentations cover various aspects of the process of working on the mozilla project, including building, testing, and debugging. how the build works (part 1, part 2, part 2; second camera, slides) this presentation covers how the mozilla build system works, how to configure the build system, and how to build mozilla projects. (as quicktime; 127 mb, 50 mb, and 68 mb) the life ...

Unix stub installer - Archive of obsolete content
where does the unix stub installer code reside? the unix stub installer project resides at: <http://lxr.mozilla.org/seamonkey/sou...ard/unix/src2/> how do we get setup to debug the unix stub installer? build the unix installer (debug or non-debug target) by typing "make" in the src2 directory grab a nightly build, say from <http://ftp.mozilla.org/pub/mozilla/n...staller.tar.gz> gunzip and untar the build to some temporary location like /tmp. copy the installer.ini and config.ini files over into the src2 directory. if you don't want the installer to download then grab a nightly "full" installer, say from <ftp://ftp.mozilla.org/pub/mozilla/ni...gnu-sea.tar.gz>. then untar and gunzip this to /tmp. copy the xpi directory into the src2 directory you are debugging from. run the ...
...nstaller, say from <ftp://ftp.mozilla.org/pub/mozilla/ni...gnu-sea.tar.gz>. then untar and gunzip this to /tmp. copy the xpi directory into the src2 directory you are debugging from. run the installer from the src2 directory by either using the mozilla-installer shell script or the mozilla-installer-bin binary with the appropriate flags. if you need to use gdb to debug the installer run it by typing "gdb mozilla-installer-bin" on the shell prompt. how we get setup to debug the xpinstall engine from the unix stub installer? build your entire mozilla tree (which should build the installer in the src2 directory as well). go to mozilla/xpinstall/packager/unix. on the shell prompt type "perl deliver.pl". now you will find an installer *and* the xpcom.xpi and other debug xpis delivered to m...

XPJS Components Proposal - Archive of obsolete content
es. just as with native component modules each of these .js files will be expected to have the functions: nsregisterself nsgetfactory nsunregisterself (optional) nscanunload (optional) each .js file 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...
...espec of the .js file). at this point the module will use the (new) methods on the components object to register itself with the component manager as a factory module for one or more classid or progid. this registration function that the js code calls (e.g. components.registercomponentspec) will be provided by the xpjsmanager. the xpjsmanager will receive this call from the js code, store the mapping of clsid to .js filespec in the registry for its own use later, and then call the real component manager to do the registration. however, the xpjsmanager will pass the component manager its *own* filespec. so, at some future point some chunk of code will ask the component manager to create an object instance for some clsid (or progid). the component manager will load up the xpjsmanager's module ...

panel.flip - Archive of obsolete content
« xul reference home flip type: string normally, when a popup opens near the edge of the screen, it flips over to open on the opposite side of the anchor, so that it doesn't extend off the screen. for example, if the menu doesn't have room to open downward, it flips to open upward instead; this is a vertical flip. ...
...ppen, since this would cause menus to open in strange places. for arrow popups, however, being able to flip horizontally makes sense. this attribute, set to both, permits that behavior. you will not normally have to use this attribute, since it's automatically applied to arrow panels. an arrow panel can also specify a value of slide, which causes the arrow to "slide" instead of flipping when the panel doesn't have room. a sliding panel will have the start (or end) position extended such that the panel can be the requested size, meaning the arrow will no longer be at the start (or end) of the panel - i.e., the arrow will appear to have been slid along the panel to ensure the arrow is still pointing at the anchor. in this image, the panel has flip="slide" and has a...

statustext - Archive of obsolete content
utomatically however. this attribute serves only as a place to keep the text. in firefox, this text is automatically placed in the statusbar for menuitems on the menu bar. ...
...er. this attribute serves only as a place to keep the text. in firefox, this text is automatically placed in the statusbar for menuitems on the menu bar. ...

userAction - Archive of obsolete content
scrolling the user is scrolling through the textbox. ...
... scrolling the user is scrolling through the textbox. ...

wrap - Archive of obsolete content
...
... ...

Index - Archive of obsolete content
958 code samples add-ons, extensions this page contains sample code that you can use with the custom toolbar button tutorial. 959 complete this page is for readers who have followed the custom toolbar button tutorial for firefox, thunderbird and sunbird, or the custom toolbar button:seamonkey tutorial for seamonkey, and who want to learn more about developing extensions. 960 seamonkey - making custom toolbar (sm ver. 1.x) add-ons, extensions, seamonkey this page tells you step-by-step how to make a custom toolbar button in seamonkey 1.x. (for seamonkey 2, firefox, thunderbird and sunbird, see the page: custom toolbar button) 961 toolbar customization events toolbars, xul when toolbars are customized, events ar...
...l no summary! 1060 splitters tutorials, xul, xul_tutorial we'll now look at how to add splitters to a window. 1061 stack positioning tutorials, xul, xul_tutorial this section will describe how to position items in a stack. 1062 stacks and decks tutorials, xul, xul_tutorial there may be need to display elements as a set of overlapping cards. the stack and deck elements can be used for this purpose. 1063 styling a tree tutorials, xul, xul_tutorial the following describes how to style a tree. 1064 tabboxes tutorials, xul, xul_tutorial it is common in preference dialogs for tabbed pages to appear. we'll find out how to create them here. 1065 templates tutorials, xul, xul_tu...

MenuItems - Archive of obsolete content
enuitem both the label and the access key may be changed dynamically in script by setting the label and accesskey properties. note the mixed case of the accesskey property versus the lowercase usage of the accesskey attribute in xul. ...
...cess key may be changed dynamically in script by setting the label and accesskey properties. note the mixed case of the accesskey property versus the lowercase usage of the accesskey attribute in xul. ...

The Joy of XUL - Archive of obsolete content
ill be explored followed by an examination of supporting mozilla technologies. finally, a mini case study of a calendar application written in xul will reinforce the benefits of building applications with mozilla. key features and benefits powerful widget-based markup language the goal of xul is to build cross platform applications, in contrast with dhtml which is intended for developing web pages. for this reason, xul is oriented toward application artifacts such as windows, labels, and buttons instead of pages, heading levels, and hypertext links. in fact, many developers invest a significant amount of effort to achieve these results in their dhtml web applications but at the cost of complexity and performance and without any supporting standards. based on exis...
...le mozilla can set an optional environment variable and build the calendar themselves. but many mozilla users who want to try out the calendar can't afford this luxury. using xpinstall it was easy for the developers to package a version of calendar that could be installed directly over the internet by clicking a link. conclusion mozilla, featuring xul, delivers a compelling technology for developing cross-platform applications with the same rich user interface and end user experience as native desktop applications. designers who are experienced in building web applications using w3c standard technologies can leverage this experience from the browser directly to the desktop. before the web became the standard for delivering applications to users across disparate desktops, this problem was so...

Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
s file with your toolbar styles needs to be included in the overlay file, as you would expect, but also in the chrome.manifest file. this is very important because the toolbar customization dialog won't work correctly without this. to include the style on your chrome.manifest file: style chrome://global/content/customizetoolbar.xul chrome://myextension/skin/toolbar-button.css if you are developing for firefox 1.0, attach it to the customize toolbar window (chrome://global/content/customizetoolbar.xul) using skin/contents.rdf. the code looks like this: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <seq about="urn:mozilla:skin:root"> <li resource="urn:mozilla:skin:classic/1.0"/> </seq> <description about="ur...
...extensions for firefox/thunderbird 1.5 and above should instead use something like this in their chrome.manifest: skin myextension classic/1.0 chrome/skin/ style chrome://global/content/customizetoolbar.xul chrome://myextension/skin/toolbar-button.css ia take note of the packaging section in this article; you may need to include .jar references if you are deliveri...

Complete - Archive of obsolete content
introduction you can use the custom toolbar button tutorial as a very simple introduction to extensions. ...
... see these techniques in action, then you can download and install the complete allcustom extension: allcustom.xpi (the link is external only because this wiki does not support xpi files.) the extension does not contain any useful functions. it is just an extended code sample. to see the code, use a jar tool or zip tool to unpack the xpi file that you downloaded. for more information about developing extensions, see the main extensions page here. features of this extension this extension is a more complex version of the original custom toolbar button extension. it provides a user interface in two languages (english and french). it supports firefox, thunderbird, sunbird and flock—these are referred to as "firefox etc." in the rest of this page. it also supports seamonkey. in seamonkey it sup...

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
set your text editor to use any encoding except unicode. if your language uses accents or other non-latin characters, set your text editor to save files using the utf-8 encoding. to check your text editor, create a plain text file named test.txt. in the file, type some of the special characters that your language uses. save the file. open the file in seamonkey (for example, by dragging it and dropping it in the navigator window, or by choosing file – open file... from seamonkey's menu bar). from seamonkey's menu bar, choose view – character encoding – unicode (utf-8). check that the text you typed looks ok with this setting. if your text editor does not support utf-8, search the internet for a better one that you can download. optional tools you can optionally use any image editor to cus...
...utton will be an extension. 2. delete these two files: chrome.rdf overlays.rdf explanation: seamonkey automatically rebuilds these files the next time it starts. when it rebuilds them, it will include your new extension. 3. edit the file: installed-chrome.txt at the end of the file, add the following line. copy and paste the line from here, to avoid typing errors: content,install,url,resource:/chrome/custombutton/ explanation: this line registers your custom toolbar button extension, linking it into seamonkey. 4. create a new directory named: custombutton perform the following steps in this new directory, creating five files there. explanation: the name is a unique identifier for your extension, an...

Element Positioning - Archive of obsolete content
that minimum size. examples of setting widths and heights <button label="1" style="width: 100px;"/> <button label="2" style="width: 100em; height: 10px;"/> <button label="3" flex="1" style="min-width: 50px;"/> <button label="4" flex="1" style="min-height: 2ex; max-width: 100px"/> <textbox flex="1" style="max-width: 10em;"/> <description style="max-width: 50px">this is some boring but simple wrapping text.</description> example 1 the first button will be displayed with a width of 100 pixels (px means pixels). you need to add the unit or the width will be ignored. example 2 the second button will be displayed with a height of ten pixels and a width of 100 ems (an em is the size of a character in the current font). example 3 the third button is flexible so it will grow based on the ...
...r/there.is.only.xul"> <hbox> <button label="yes"/> <button label="no"/> </hbox> <hbox align="center"> <button label="maybe"/> <button label="perhaps"/> </hbox> </window> you can also use the style properties -moz-box-pack and -moz-box-align instead of specifying attributes. you may find the box alignment example useful for trying out the various box properties. cropping text and buttons you could potentially create a button element that contains a label that is larger than the maximum width of the button. of course, a solution would be to increase the size of the button. however, buttons (and other elements with a label) have a special attribute called crop that allows you to specify how the text may be cropped if it is too big. if the text is cropped, an elli...

List Controls - Archive of obsolete content
enulist> this menulist will contain four choices, one for each menuitem element. to show the choices, click the arrow button on the menulist. when one is selected, it appears as the choice in the menulist. the selected attribute is used to indicate the value that is selected by default. editable menulist by default, you can only select choices from the list. you cannot enter your own text by typing it in. a variant of the menulist allows editing the text in the field. for example, the url field in the browser has a drop-down for selecting previously typed urls, but you can also type them in yourself. to create an editable menulist, add the editable attribute as follows: example 6 : source view <menulist editable="true"> <menupopup> <menuitem label="www.mozilla.org" /> <menuitem la...
...the text the user enters is not added as a new choice. because the label attribute was not used in this example, the default value will be blank. in the next section, we'll learn about creating progress meters. « previousnext » ...

More Event Handlers - Archive of obsolete content
element, either the button or checkbox, that was activated. example 1 : source view <vbox oncommand="alert(event.currenttarget.tagname);"> <button label="ok"/> <checkbox label="show images"/> </vbox> stop event propagation once you handle an event, regardless of where in the propagation the event is, you will likely want to stop the event from being sent to further elements, essentially stopping the capturing or bubbling phases from continuing. depending on how you attach the event listener to an element, there are different ways of doing this. recall that the capturing phase occurs before the bubbling phase, so any capturing listeners will trigger before any bubbling listeners. if a capturing event stops the event propagation, none of the later capturing listeners, nor any of the bubbli...
...preventdefault method, as in the example below. example 3 : source view <button label="types" type="menu"> <menupopup onpopupshowing="event.preventdefault();"> <menuitem label="glass"/> <menuitem label="plastic"/> </menupopup> </button> alternatively, for attribute event listeners, you can just return false from the code. note that preventing the default action is not the same as stopping event propagation with the stoppropagation method. even if the default action has been prevented, the event will still continue to propagate. similarly, calling the stoppropagation method won't prevent the default action. you must call both methods to stop both from occuring. note that once propagation or the default action has been prevented, neither may be re-enabled again for that event. the f...

Skinning XUL Files by Hand - Archive of obsolete content
> child { attribute: value; } button:hover { border: 1px; } menu#file > menuitem { font-weight: bold; } pseudo-classes reflect states of the element: when the mouse moves over a button, for example, the appropriate pseudo-class stylesheet rules are applied. the parent-child relationship is more economical than the aforementioned contextual subgrouping, which searches the entire subtree of an element for the subelement. finally, mozilla provides some special extensions to the cascading style sheets specification that allow even more control over the way that xul is skinned within the browser. on to the actual global.css file: after some comments, the css file contains basic style information for the <window> and <dialog> elements. after...
...) cascading stylesheet that might be referenced and used by a xul file: toolbar.nav-bar { background-image: url("chrome://navigator/skin/navbar-bg.gif"); padding: 0px; padding-bottom: 2px; } box#navbar { background-color: lightblue; } a:link { color: #fa8072; } this stylesheet exhibits three of the different types of style definitions described above. each type uses a different grouping of elements. in the first definition, the selector "toolbar.nav-bar" is used to define style information for all xul toolbars of the class "nav-bar." unlike an id -- which is also often used as a selector but must be unique -- a class attribute can be used on multiple xul elements you want to pick up the specified style information. a toolbar elements defined as: <toolbar class="nav-bar" id="nav...

XUL Structure - Archive of obsolete content
o map a chrome url to a file or directory path on the disk where the xul files are located. details of how to create this file will be discussed in a later section. the only way to create content that can be accessed through a chrome url is by creating a package as described in the next few sections. this directory is called 'chrome' probably because it seemed like a convenient name to use in keeping with the chrome packages that are included with mozilla. to further the confusion, there are two other places where the word "chrome" might appear. these are the -chrome command line argument and the chrome modifier to the window.open() function. neither of these features grant extra privileges; instead they are used to open a new top-level window without the browser ui such as the menu and tool...
... and scripts, and store a pre-compiled version in memory for the remainder of the application session. this improves performance. however, because of this, the xul will be not be reloaded even when the source files are changed. to disable this mechanism, it is necessary to change the preference nglayout.debug.disable_xul_cache. in firefox, this preference may be added to the user preferences by typing "about:config" in the address field, and setting this value to true. or, just manually edit your user.js preferences file and add the following line: pref("nglayout.debug.disable_xul_cache", true); there are usually three different parts to a chrome package, although they are all optional. each part is stored in a different directory. these three sets are the content, the skin, and the locale,...

browser - Archive of obsolete content
to disable autoscroll for this browser. if this attribute is set to true or omitted, autoscroll will be enabled or depending on the user preference general.autoscroll. disablehistory type: boolean disables both session and global history for the docshell attached to the browser. disableglobalhistory type: boolean disables global history for the docshell attached to the browser while keeping session history active. disablesecurity type: boolean set this attribute to true to disable the security ui for this browser. omit this attribute off to enable it. droppedlinkhandler type: function this function is called when links are dropped to the browser element, with the following arguments. droppedlinkhandler(event, uri, name) -- firefox 51 or older droppedlinkhandler...
...y of the dropped items with nsidroppedlinkitem interface homepage type: url this attribute allows you to set a homepage for the browser element. it does not have any correlation with the user's browser homepage; instead it is a convenient property to hold a home page. you can switch to this home page using the gohome method. showcaret type: boolean whether or not to cause a typing caret to be visible in the content area. default is false. src type: uri the uri of the content to appear in the element. type type: one of the values below. the type of browser, which can be used to set access of the document loaded inside the browser. if this is not set, the loaded document has the same access as the window containing the browser. more prec...

label - Archive of obsolete content
which the label is associated. when the user clicks on the label, the associated element is given focus. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its le...
...ctly inherit from nsidomxulcontrolelement. the caption is in the "value" attribute remember that the label element has a "value" attribute, unlike value in html whereas buttons, checkboxes use label="foo" as the attribute <label label="a caption"/> <!-- wrong --> <label value="a caption"/> <label value="click the button"/> <button label="a button"/> <checkbox label="a decision" value="1"/> wrapping by default, label text does not wrap. to enable wrapping, use a text node instead of the value attribute. <label control="email">email address</label> <textbox id="email"/> if the text node contains no tags, it can easily be accessed and manipulated from javascript using node.textcontent. ...

menuitem - Archive of obsolete content
he item is contained within is closed, but the parent menus remain open. none no menus are closed. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its le...
... value for their name attributes are part of the same radio group. only one menuitem in the same radio group can be checked at once. more information on adding checkmarks to menus in the xul tutorial validate type: one of the values below this attribute indicates whether to load the image from the cache or not. this would be useful if the images are stored remotely or you plan on swapping the image frequently. the following values are accepted, or leave out the attribute entirely for default handling: always the image is always checked to see whether it should be reloaded. never the image will be loaded from the cache if possible. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific pu...

menulist - Archive of obsolete content
tcut key. this should be one of the characters that appears in the label attribute for the element. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its le...
...no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. editable type: boolean indicates that the value of the menulist can be modified by typing directly into the value field. this is rendered as a textbox with a drop-down arrow beside it. the user may enter text into the textbox or select one of the choices by clicking from the drop-down. focused type: boolean this attribute is true if the element is focused. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image ...

panel - Archive of obsolete content
rt time.fastthe panels quickly fades away after a short time. flip type: string normally, when a popup opens near the edge of the screen, it flips over to open on the opposite side of the anchor, so that it doesn't extend off the screen. for example, if the menu doesn't have room to open downward, it flips to open upward instead; this is a vertical flip. horizontal flipping doesn't normally happen, since this would cause menus to open in strange places. for arrow popups, however, being able to flip horizontally makes sense. this attribute, set to both, permits that behavior. you will not normally have to use this attribute, since it's automatically applied to arrow panels. an arrow panel can also specify a value of slide, which causes the arrow to "sl...
...ppen, since this would cause menus to open in strange places. for arrow popups, however, being able to flip horizontally makes sense. this attribute, set to both, permits that behavior. you will not normally have to use this attribute, since it's automatically applied to arrow panels. an arrow panel can also specify a value of slide, which causes the arrow to "slide" instead of flipping when the panel doesn't have room. a sliding panel will have the start (or end) position extended such that the panel can be the requested size, meaning the arrow will no longer be at the start (or end) of the panel - i.e., the arrow will appear to have been slid along the panel to ensure the arrow is still pointing at the anchor. in this image, the panel has flip="slide" and has a...

tab - Archive of obsolete content
s primarily useful for themes so that they can adjust the appearance of the area around the selected tab. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its le...
...f the tab is unread; that is, either it has not yet been selected during the current session, or has changed since the last time it was selected. this attribute is not present if the tab is not unread. validate type: one of the values below this attribute indicates whether to load the image from the cache or not. this would be useful if the images are stored remotely or you plan on swapping the image frequently. the following values are accepted, or leave out the attribute entirely for default handling: always the image is always checked to see whether it should be reloaded. never the image will be loaded from the cache if possible. properties accesskey type: character gets and sets the value of the accesskey attribute. accessibl...

textbox - Archive of obsolete content
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. ...
... value type: string the default value entered in a textbox. the attribute only holds the default value and is never modified when the user enters text. to get the updated value, use the value property. for number boxes, the default is 0 or the minimum value returned by the min property, whichever is higher. wrap type: string set this attribute to the value off to disable word wrapping in the textbox. if this attribute is not specified, word wrapping is enabled. wraparound type: boolean if true, the value of the number box will wrap around when the maximum or minimum value is exceeded. the minimum and maximum values must both not be infinity. properties accessibletype type: integer a value indicating the type of accessibility object for the e...

toolbarbutton - Archive of obsolete content
fect. command type: id set to the id of a command element that is being observed by the element. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its le...
... using this type and the attribute group. examples: type value <toolbarbutton > menu menu-button checkbox radio validate type: one of the values below this attribute indicates whether to load the image from the cache or not. this would be useful if the images are stored remotely or you plan on swapping the image frequently. the following values are accepted, or leave out the attribute entirely for default handling: always the image is always checked to see whether it should be reloaded. never the image will be loaded from the cache if possible. properties accesskey type: character gets and sets the value of the accesskey attribute. accessibletyp...

treecol - Archive of obsolete content
e. reload the page to see the checkbox. if you want, you can also style the tree using css. attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its le...
...ears in which the user can edit the contents of the cell. the tree must also be marked as editable in order for this to work. individual treecell elements in the column may be marked editable="false" in order to disable editing. fixed type: boolean if true, the size of the column in the tree cannot be adjusted by the user. any splitter to either side will resize those columns while keeping the fixed column at a constant size. if false or not specified, the user can adjust the size of the column, typically by dragging the column header with the mouse. hidden type: boolean if set to true, the element is not displayed. this is similar to setting the css display property to 'none'. hideheader type: boolean set this to true to indicate that the tree column header shoul...

XULRunner Hall of Fame - Archive of obsolete content
collect payment and set up a login for a members only section. a newsletter can be sent to members who sign up on a regular bases. instantbird multi-protocol im client. build instructions komodo edit a multi-language code development tool. build instructions pencil the pencil project's unique mission is to build a free and opensource tool for making diagrams and gui prototyping that everyone can use. source qiqqa research manager, reference manager, and pdf manager. xulrunner is embedded to provide automatic search against journal archives, automatic acquisition of bibtex information, and automatic downloading of pdfs. slimerjs slimerjs is a xulrunner application that can be launched with firefox, allowing to execute an external javascript script which ...
...ttp://finance.yahoo.com/currency. you can use the firefox extension or the stand-alone xul application. opendocument viewer cross-platform viewer for opendocument files. taskpool taskpool is a little application to help keep track of time. you can add tasks to a pool, turn them on and off, and it will tick off seconds. svgclock an svg-based clock. crowbar a web scraping environment based on the use of a server-side headless mozilla-based browser. 30b a xulrunner-based wrapper for 30boxes.com xul explorer "a lightweight xul ide... an easy way to experiment with xul" xulexplorer a patched version of xul explorer to re-enable application and extension skeleton generation. foxkeh clock (for japanese page) a clock application based cha...

MacFAQ - Archive of obsolete content
(note this document has not been reviewed for accuracy or completeness.) special build notes enable libxul. in your .mozconfig for custom builds of xulrunner, add --enable-libxul. if you've completed a xulrunner build, you should copy or symlink the dist/xul.framework directory to /library/frameworks. note that in order to copy the framework while keeping the relative soft-links in the framework, do something like: % ( cd dist ; gnutar cf - xul.framework | ( cd /library/frameworks ; gnutar xf - )) installing your application your application must be installed as a xulrunner app before you can open it. to do this, type: xulrunner-bin --install-app /path/to/appdir note the path to your application must end with the directory containing application.ini; you should not reference applicatio...
...ns/preferences menu item toolbars mac windows have a small "jelly bean" button in the top right corner. this button is used to show/hide the toolbar. the toolkit will automatically enable this behavior if you add class="chromeclass-toolbar" to your <toolbar> element. commandline support commandline handlers work great on the mac if it's a cold start. here's how to implement command-line trapping when the app is already running, without getting into appleevents or c++ code. this is implemented in a pseudo "hidden window" technique and parsing the window arguments instead of command-line handlers and some of the toolkit singleton window code. taking advantage of the core code "openurl" from "nscommandlineservicemac.cpp", you'll see that it looks for "browser.chromeurl" before defaulting t...

application/http-index-format specification - Archive of obsolete content
should be presented to the user when they are viewing data drawn from the file. this data should be parsed as html. 200 defines the field names for the 201 file index code. a valid 200 line consists of one or more white space separated tokens that describe the name or purpose of the associated column of data. tokens may not contain spaces. any illegal characters must be escaped via the url escaping syntax defined by rfc 1738. note that multiple 200 lines override previous 200 lines. 201 data whose definition stems from a prior 200 line. a valid 201 line consists of one or more white space separated tokens that represent data described by a previous 200 line. tokens may be quoted or unquoted. unquoted tokens may not contain white space. quoted tokens are terminated by the next quote but m...
...hose definition stems from a prior 200 line. a valid 201 line consists of one or more white space separated tokens that represent data described by a previous 200 line. tokens may be quoted or unquoted. unquoted tokens may not contain white space. quoted tokens are terminated by the next quote but may not contain carrage returns or new lines. any illegal characters must be escaped via the url escaping syntax defined by rfc 1738. note that a 201 line encountered before a 200 line should be ignored. 300 a url pointing to the directory represented by the index if there is one. a valid path token must be url escaped. valid 200 tokens note that all tokens are case insensitive. filename the name of file that can be used to retrieve the file when combined with the full path provided by the 3...

nsIContentPolicy - Archive of obsolete content
he loading of various types of out-of-line content, or the processing of certain types of inline content. 63 introduced gecko 1.0 inherits from: nsicontentpolicybase last changed in gecko 42 (firefox 42 / thunderbird 42 / seamonkey 2.39) you can observe content that is being loaded into your browser by implementing nsicontentpolicy. this interface can be very useful if you are developing a content-aware plugin (blocking ads or altering the look of content, for example), or if you want to stop or allow user-browsed urls. warning: do not block the caller in your implementations of shouldload() or shouldprocess() (for example, by launching a dialog to prompt the user for something).") note: in reality, much of this interface is defined in the nsicontentpolicybase interface, but...
...this, because it does not represent content to be loaded (the actual load triggered by the refresh will go through shouldload() as expected). shouldprocess() will get this for, for example <meta> refresh elements and http refresh headers. type_xbl 9 indicates an xbl binding request, triggered either by -moz-binding css property or the document.addbinding() method. type_ping 10 indicates a ping triggered by a click on an <a> element using the ping attribute. type_xmlhttprequest 11 indicates an xmlhttprequest. also used for document.load() type_object_subrequest 12 indicates a request by a plugin. type_dtd 13 indicates a dtd loaded by an xml document. type_font 14 indicates a font loaded via @font-face ...

Gecko Compatibility Handbook - Archive of obsolete content
h depended upon these bugs in order to work properly. this can cause problems in gecko browsers since it implements the standards strictly. the old "code to the bugs" approach will not work for netscape 6.x, netscape 7.x and other mozilla based browsers. example - putting forms in tables invalid html to eliminate line break in <form>. in older browsers, this results in the td cell tightly wrapping around the input element. <table border="1"> <tr> <form name="form2"> <td> <input type="text"> </td> </form> </tr> <table> this approach is commonly used to get around the fact that <form> is a block level element in html and will naturally begin on a new line in the page. unfortunately, this is invalid html and can cause problems both when parsing the page and when applying the...
... of ssl to use and fail to connect to gecko browsers. for more detail on this issue, please read notes on tls - ssl 3.0 intolerant servers. useful resources beginning to intermediate web authors can look to the devedge web tune up wizard for pointers on areas where content needs to be updated to support gecko and other browsers that support the w3c standards. aol webmaster.info site - developing for netscape gecko covers common issues facing webmasters, and how to update your code. the toolbox aggregates several invaluable w3c tools for diagnosing web page problems as well as validators, code samples, and more. report mozilla browser bugs or web site compatibility problems mozilla web developer community references using web standards in your web pages browser detection and cros...

NPN_SetValue - Archive of obsolete content
returns if successful, the function should return nperr_no_error. if unsuccessful, the function should return ...
...ndowed. nppvplugintransparentbool (windows and unix) specifies that a plugin is either opaque or transparent. to specify an opaque mode, the plugin calls npn_setvalue with nppvplugintransparentbool for the variable parameter and false for the value parameter. to specify a transparent mode, the value parameter should be set to true. nppvjavascriptpushcallerbool sets whether you are pushing or popping the appropriate jscontext off the stack (see the two-way scriptability article on the mozilla plugins project page for more details). nppvpluginkeeplibraryinmemory specifies that the plugin does not want to be unloaded from memory after the page which initiated it has gone. normally, when the browser navigates away from the page containing the plugin, all plugin instances get an npp_destroy call...

NPVariant - Archive of obsolete content
ject *objectvalue; } value; } npvariant; fields the data structure has the following fields: type a member of the npvarianttype enumeration specifying the data type contained in the npvariant. value the value contained in the npvariant structure. it may be a boolean, integer, double, string, or object, depending on the variant type. ...
...ds: type a member of the npvarianttype enumeration specifying the data type contained in the npvariant. value the value contained in the npvariant structure. it may be a boolean, integer, double, string, or object, depending on the variant type. ...

NPWindow - Archive of obsolete content
ontains information about the target into which the plug-in instance can draw. syntax typedef struct _npwindow { void* window; /* platform specific handle */ uint32_t x; /* coordinates of top left corner */ uint32_t y; /* relative to a netscape page */ uint32_t width; /* maximum window size */ uint32_t height; nprect cliprect; /* clipping rectangle coordinates */ #ifdef xp_unix void * ws_info; /* platform-dependent additional data */ #endif /* xp_unix */ npwindowtype type; /* window or drawable target */ } npwindow; fields the data structure has the following fields: window platform-specific handle to a native window element in the netscape window hierarchy on windows (hwnd) and unix (x window id). mac os: wind...
...ow hierarchy on windows (hwnd) and unix (x window id). mac os: window is a pointer to an np_port. x, y the x and y coordinates for the top left corner of the plug-in relative to the page (and thus relative to the origin of the drawable). should not be modified by the plug-in. height, width the height and width of the plug-in area. should not be modified by the plug-in. cliprect clipping rectangle of the plug-in; the origin is the top left corner of the drawable or window. clipping to the cliprect prevents the plug-in from overwriting the status bar, scroll bars, and other page elements when partially scrolled off the screen. mac os: cliprect is the rectangle in port coordinates to which the plug-in should clip its drawing. ws_info unix: contains information about the plug-i...

Introduction to Public-Key Cryptography - Archive of obsolete content
this document introduces the basic concepts of public-key cryptography. for an overview of ssl, see "introduction to ssl." for an overview of encryption and decryption, see "encryption and decryption." information on digital signatures is available from "digital signatures." public-key cryptography is a set of well-established techniques and standards for protecting communications from eavesdropping, tampering, and impersonation attacks. encryption and decryption allow two communicating parties to disguise information they send to each other. the sender encrypts, or scrambles, information before sending it. the receiver decrypts, or unscrambles, the information after receiving it. while in transit, the encrypted information is unintelligible to an intruder. tamper detection allows the re...
...twork users are frequently required to remember multiple passwords for the various services they use. for example, a user might have to type a different password to log into the network, collect email, use directory services, use the corporate calendar program, and access various servers. multiple passwords are an ongoing headache for both users and system administrators. users have difficulty keeping track of different passwords, tend to choose poor ones, and tend to write them down in obvious places. administrators must keep track of a separate password database on each server and deal with potential security problems related to the fact that passwords are sent over the network routinely and frequently. solving this problem requires some way for a user to log in once, using a single passwor...

Vulnerabilities - Archive of obsolete content
weakness and determining that a separate security control would compensate for it. however, trust assumptions are often implicit, such as creating a feature without first evaluating the risks it would introduce. threats may also change over the lifetime of software or a protocol used in software. for example, the address resolution protocol (arp) trusts that an arp reply contains the correct mapping between media access control (mac) and internet protocol (ip) addresses. the arp cache uses that information to provide a useful service—to enable sending data between devices within a local network. however, an attacker could generate false arp messages to poison a system’s arp table and thereby launch a denial-of-service or a man-in-the-middle attack. the arp protocol was standardized over...
...ake the software useless or unusable. second, many security settings have both positive and negative consequences for security. an example is the number of consecutive failed authentication attempts to permit before locking out a user account. setting this to 1 would be the most secure setting against password guessing attacks, but it would also cause legitimate users to be locked out after mistyping a password once, and it would also permit attackers to perform denial-of-service attacks against users more easily by generating a single failed login attempt for each user account. because of the number of vulnerabilities inherent in security configuration settings and software feature misuse possibilities, plus the number of software flaw vulnerabilities on a system at any given time, there ma...

Scratchpad - Archive of obsolete content
r is at the top of the screen): the file menu offers options to save and load javascript code snippets, so you can reuse code later if you like. code completion scratchpad integrates the tern code analysis engine, and uses that to provide autocomplete suggestions and popups containing information on the current symbol. to list autocomplete suggestions, press ctrl + space. for example, try typing d, then pressing ctrl + space. you'll see the autocomplete box, as shown below: the icon next to each suggestion indicates the type, and the currently highlighted suggestion gets a popup with more information. ↑ and ↓ cycle through the suggestions and enter or tab select the highlighted choice. inline documentation to show the inline documentation popup, press ctrl + shift + space when the...
...un option is only available in the execute menu. it first reloads the page, then executes the code when the page's "load" event fires. this is useful for running the code in a pristine environment. running scratchpad in the browser context you can run scratchpad in the context of the browser as a whole rather than a specific web page. this is useful if you are working on firefox itself or developing add-ons. to do this check "enable chrome and add-on debugging" in the developer tool settings. once you've done this, the environment menu has a browser option; once that's selected, your scope is the entire browser rather than just the page content, as you will see from examining some globals: window /* [object chromewindow] */ gbrowser /* [object xulelement] */ the scratchpad execution conte...

-ms-wrap-through - Archive of obsolete content
the -ms-wrap-through css property is a microsoft extension that specifies how content should wrap around an exclusion element. initial valuewrapapplies toblock-level elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values wrap the exclusion element inherits its parent node's wrapping context. its descendant inline content wraps around exclusions defined outside the element. none the exclusion element does not inherit its parent node's wrapping context. its descendants are only subject to exclusion shapes defined inside the element. formal syntax wrap | none specifications not part of any specification. remarks you can use the -ms-wrap-through property to control the effect of exclusions; for instance, to cause one content block to w...
...g context. its descendants are only subject to exclusion shapes defined inside the element. formal syntax wrap | none specifications not part of any specification. remarks you can use the -ms-wrap-through property to control the effect of exclusions; for instance, to cause one content block to wrap around an exclusion element and another to intersect the same exclusion element. the wrapping context of a box is a collection of exclusion areas contributed by its associated exclusion boxes. the inline flow content of a box is placed in the area that corresponds to the subtraction of its wrapping context from its own content area. for more information about exclusion elements' impact on content flow, see the terminology section of the css exclusions module level 1 specification. ...

Processing XML with E4X - Archive of obsolete content
ll be an e4x xml object, which provides convenient syntax for both accessing and updating the encapsulated data. while the xml object looks and behaves in a similar way to a regular javascript object, the two are not the same thing. e4x introduces new syntax that only works with e4x xml objects. the syntax is designed to be familiar to javascript programmers, but e4x does not provide a direct mapping from xml to native javascript objects; just the illusion of one. it is possible to interpolate variables into an xml literal to create an element name (or to create content). var h = 'html'; var text = "here's some text"; var doc = <{h}><body>{text}</body></{h}>; alert(doc.toxmlstring()); // gives <html> <body>here's some text</body> </html> working with attributes xml literal syntax has a...
...ar doc = <{h}><body>{text}</body></{h}>; alert(doc.toxmlstring()); // gives <html> <body>here's some text</body> </html> working with attributes xml literal syntax has a significant advantage over the xml constructor when you need to create markup dynamically. with e4x it is easy to embed dynamic values in markup. variables and expressions can be used to create attribute values by simply wrapping them with braces ({}) and omitting quotation marks that would normally go around an attribute value, as the following example illustrates: var a = 2; var b = <foo bar={a}>"hi"</foo>; upon execution the variable is evaluated and quotes are automatically added where appropriate. the preceding example would result in an xml object which looks like this: <foo bar="2">"hi"</foo>. in attribute su...

Writing JavaScript for XHTML - Archive of obsolete content
you can work around this with cdata sections: <script type="text/javascript"> <![cdata[ // is the variable a non-negative integer less than 10? if (variable < 10 && variable >= 0) action(); ]]> </script> note that the cdata section is only necessary because of the < in the code; otherwise you could have ignored it. a third solution is to use only external scripts, neatly sidestepping the special-character problem. alternatively, the cdata section can be couched within comments so as to be able to work in either application/xhtml+xml or text/html: <script type="text/javascript"> //<![cdata[ ... //]]> </script> <!-- (for styles, it is different) --> <style type="text/css"> /*<![cdata[*/ ... /*]]>*/ </style> and if you really need compatibility with very old...
...ect any given combination of mime type and browser. problem: i can't use document.write() this problem has the same cause as the one above. this method does not exist in xmldocuments anymore. there are reasons why this decision was made, one being that a string of invalid markup will instantly break the whole document. solution: use dom methods many people avoided dom methods because of the typing to create one simple element, when document.write() worked. now you can't do this as easily as before. use dom methods to create all of your elements, attributes and other nodes. this is xml proof, as long as you keep the namespace problem in focus (e.g., there is a document.createelementns method). of course, you can still use strings like in document.write(), but it takes a little more effort.

Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
l accounting standards board). all businesses are expected and required to follow the guidelines set forth by the fasb. when auditors evaluate an organizations financial health, they do so by following the fasb rules. focusing on the software development portion of an organization, there are numerous standards bodies that can affect development decisions. ...
...lve with the times because it was proprietary. xerox was bound to a unique hardware platform and to a closed development operating system. and xerox chose to bypass multiple opportunities to port the code to other platforms, and to provide open-source code. consequently, xerox eventually had to shut down the production of their workstation development because of escalating manufacturing and developing costs and slowed sales. xerox’s biggest asset in the beginning became its weapon of destruction. they settled on a proprietary environment, and missed the opportunity to make their environment the benchmark – and set the standard. following open standards has an added benefit. when it is necessary for an organization to interact with other applications through alliances, merger, or acquisit...

Game promotion - Game development
you have to let the world know that you have something interesting available that people will enjoy playing. there are many ways to promote your game — most of them being free, so even if you're struggling to make a living as an indie dev with zero budget you can still do a lot to let people know about your great new game. promoting the game helps a lot when monetizing it later on too, so it's important to do it correctly. competitions taking 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. ...
...ill show others that you're passionate about what you do and that they can rely on you. then when you need any help they will be there for you. summary any way of promoting your game is good. you have a whole lot of options to chose from with most of them being free, so it's only about your enthusiasm and available time. sometimes you have to spend more time promoting a game than actually developing it. remember that it's no use to have the best game in the world if no one knows it exists. now lets get on with that monetization part, and earn something for a living. ...

Building up a basic demo with Babylon.js - Game development
necessary html, and writing the javascript code. we will try to create a simple demo first — a cube rendered on the screen. if you have already worked through our building up a basic demo series with three.js, playcanvas or a-frame (or you are familiar with other 3d libraries) you'll notice that babylon.js works on similar concepts: camera, light and objects. environment setup to start developing with babylon.js, you don't need much. you should start off by: making sure you are using a modern browser with good webgl support, such as the latest firefox or chrome. creating a directory to store your experiments in. saving a copy of the latest babylon.js engine inside your directory. opening the babylon.js documentation in a separate tab — it is useful to refer to. html structure h...
... example code in the second one. there is one helper variable already included, which will store a reference to the <canvas> element. before reading on, copy this code to a new text file and save it in your working directory as index.html. initialising the babylon.js engine we have to create a babylon.js engine instance first (passing it the <canvas> element to render on) before we start developing our game. add the following code to the bottom of your second <script> element: var engine = new babylon.engine(canvas); the babylon global object contains all the babylon.js functions available in the engine. creating a scene a scene is the place where all the game content is displayed. while creating new objects in the demo, we will be adding them all to the scene to make them visible on t...

Building up a basic demo with Three.js - Game development
essary 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 your experiments in. save a copy of the latest minimized three.js library inside your directory. open the three.js documentation in a separate tab — it is useful to refer to. html structure here's the html st...
...e render() function: var t = 0; now let's increase the value by a given constant value, on each frame of the animation. add the following lines, just below the requestanimationframe() invocation: t += 0.01; torus.scale.y = math.abs(math.sin(t)); we use math.sin, ending up with quite an interesting result. this scales the torus, repeating the process, as sin is a periodic function. we're wrapping the scale value in math.abs, to pass the absolute values, greater or equal to 0. as sin is between -1 and 1, negative values might render out torus in unexpected way. in this case it looks black half the time. now, onto movement. moving aside from rotation, and scaling, we can additionally move objects around the scene. add the following, again just below our requestanimationframe() invocatio...

Build the brick field - Game development
the newly created brick is enabled for the arcade physics engine, it's body is set to be immovable (so it won't move when hit by the ball), and we're also setting the anchor to be in the middle and adding the brick to the group. the problem currently is that we're painting all the bricks in one place, at coordina...
... « previousnext » ...

Texel - MDN Web Docs Glossary: Definitions of Web-related terms
image that gets used (in whole or in part) as the image presented on a polygon's surface within a 3d rendered image. it is not to be confused with pixel which is the unit of screen space. this is one of the main differences between texel’s and pixels, pixels are image data. texel components are made up of subjective data, therefore they can be an image as well as a depth map. the process of mapping the appropriate texel’s to their corresponding points on a polygon is called texture mapping, which is a stage of the process of rendering a 3d image for display. texture mapping is typically done prior to lighting the scene; however, in webgl, lighting is performed as part of the texture mapping process. textures are characterised by collections of texel’s, as how images are characterised b...
...sponding points on a polygon is called texture mapping, which is a stage of the process of rendering a 3d image for display. texture mapping is typically done prior to lighting the scene; however, in webgl, lighting is performed as part of the texture mapping process. textures are characterised by collections of texel’s, as how images are characterised by collections of pixels. when texture mapping occurs the renderer maps texel’s to the appropriate pixels. learn more general knowledge texel (graphics) on wikipedia learn about it using textures in webgl lighting in webgl animating textures in webgl ...

MDN Web Docs Glossary: Definitions of Web-related terms
e dmz dns doctype document directive document environment dom (document object model) domain domain name domain sharding dominator dos attack dtls (datagram transport layer security) dtmf (dual-tone multi-frequency signaling) dynamic programming language dynamic typing e ecma ecmascript effective connection type element empty element encapsulation encryption endianness engine entity entity header event exception expando f fallback alignment falsy favicon fetch directive ...
...moke test smpte (society of motion picture and television engineers) smtp snap positions soap spa (single-page application) specification speculative parsing speed index sql sql injection sri stacking context state machine statement static method static typing strict mode string stun style origin stylesheet svg svn symbol symmetric-key cryptography synchronous syntax syntax error synthetic monitoring t tag tcp tcp handshake tcp slow start telnet texel thread ...

CSS and JavaScript accessibility best practices - Learn web development
y on these clues to help them know what is going on. tables tables for presenting tabular data. you can see a good, simple example of table html and css in our table-css.html example (see it live also). table css generally serves to make the table fit better into your design and look less ugly. it is a good idea to make sure the table headers stand out (normally using bold), and use zebra striping to make different rows easier to parse. color and color contrast when choosing a color scheme for your website, make sure that the text (foreground) color contrasts well with the background color. your design might look cool, but it is no good if people with visual impairments like color blindness can't read your content. there is an easy way to check whether your contrast is large enough to n...
...ob, you should also make sure you are using the right technology for the right job! think carefully about whether you need that shiny javascript-powered 3d information box, or whether plain old text would do. think carefully about whether you need a complex non-standard form widget, or whether a text input would do. and don't generate all your html content using javascript if at all possible. keeping it unobtrusive you should keep unobtrusive javascript in mind when creating your content. the idea of unobtrusive javascript is that it should be used wherever possible to enhance functionality, not build it in entirely — basic functions should ideally work without javascript, although it is appreciated that this is not always an option. but again, a large part of it is using built-in browser ...

WAI-ARIA basics - Learn web development
intervalid = window.setinterval(showquote, 10000); this works ok, but it is not good for accessibility — the content update is not detected by screenreaders, so their users would not know what is going on. this is a fairly trivial example, but just imagine if you were creating a complex ui with lots of constantly updating content, like a chat room, or a strategy game ui, or a live updating shopping cart display — it would be impossible to use the app in any effective way without some kind of way of alerting the user to the updates. wai-aria fortunately provides a useful mechanism to provide these alerts — the aria-live property. applying this to an element causes screenreaders to read out the content that is updated. how urgently the content is read out depends on the attribute value: ...
...script, not only can keyboard accessibility suffer, but screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. in such situations, aria can help to provide those missing semantics. form validation and error alerts first of all, let's revisit the form example we first looked at in our css and javascript accessibility article (read keeping it unobtrusive for a full recap). at the end of this section we showed that we have included some aria attributes on the error message box that displays any validation errors when you try to submit the form: <div class="errors" role="alert" aria-relevant="all"> <ul> </ul> </div> role="alert" automatically turns the element it is applied to into a live region, so changes to it are read out...

Advanced styling effects - Learn web development
color, and that of the pixel in the layer underneath it. blend modes are again very familiar to users of graphics applications like photoshop. there are two properties that use blend modes in css: background-blend-mode, which blends together multiple background images and colors set on a single element. mix-blend-mode, which blends together the element it is set on with elements it is overlapping — both background and content. you can find a lot more examples than are available here in our blend-modes.html example page (see source code), and on the <blend-mode> reference page. note: blend modes are also very new, and slightly less well supported than filters. there is no support as yet in edge, and safari only supports some of the blend mode options. background-blend-mode again, ...
...tand some of the layout properties above, like position, top, bottom, z-index, etc. we will cover these in detail in our css layout module. css shapes while it is true that everything in css is a rectangular box, and images are a physical rectangular box, we can make it look as if our content flows around non-rectangular things by using css shapes. the css shapes specification enables the wrapping of text around a non-rectangular shape. it's especially useful when working with an image which has some white-space you might want to float text around. in the image below we have a pleasingly round balloon. the actual file is rectangular, but by floating the image (shapes only apply to floated elements) and using the shape-outside property with a value of circle(50%), we can give the effect of...

Debugging CSS - Learn web development
adding a new property you can add properties using the devtools. perhaps you have realised that you don't want your box to inherit the <body> element's font size, and want to set its own specific size? you can try this out in devtools before adding it to your css file. you can click the closing curly brace in the rule to start entering a new declaration into it, at which point you can start typing the new property and devtools will show you an autocomplete list of matching properties. after selecting font-size, enter the value you want to try. you can also click the + button to add an additional rule with the same selector, and add your new rules there. note: there are other useful features in the rules view too, for example declarations with invalid values are crossed out. you can fin...
...y to get down to the smallest amount of code that still shows the issue. remove any css that doesn't impact the issue. in the process of doing this, you may discover what is causing the problem, or at least be able to turn it on and off by removing something specific. it is worth adding some comments to your code as you discover things. if you need to ask for help, they will show the person helping you what you have already tried. this may well give you enough information to be able to search for likely sounding problems and workarounds. if you are still struggling to fix the problem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. you are much more likely to get help if you can show that you have done the work of r...

Handling different text directions - Learn web development
this works in the example below where we have replaced width with inline-size. logical margin, border, and padding properties in the last two lessons we have learned about the css box model, and css borders. in the margin, border, and padding properties you will find many instances of physical properties, for example margin-top, padding-left, and border-bottom. in the same way that we have mappings for width and height there are mappings for these properties. the margin-top property is mapped to margin-block-start — this will always refer to the margin at the start of the block dimension. the padding-left property maps to padding-inline-start, the padding that is applied to the start of the inline direction. this will be where sentences start in that writing mode. the border-bottom pro...
...in both writing modes? there are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the mdn page for logical properties and values. logical values we have so far looked at logical property names. there are also some properties that take physical values of top, right, bottom, and left. these values also have mappings, to logical values — block-start, inline-end, block-end, and inline-start. for example, you can float an image left to cause text to wrap round the image. you could replace left with inline-start as shown in the example below. change the writing mode on this example to vertical-rl to see what happens to the image. change inline-start to inline-end to change the float. here we are also usi...

The box model - Learn web development
ontent is displayed, which can be sized using properties like width and height. padding box: the padding sits around the content as white space; its size can be controlled using padding and related properties. border box: the border box wraps the content and any padding. its size and style can be controlled using border and related properties. margin box: the margin is the outermost layer, wrapping the content, padding and border as whitespace between this box and other elements. its size can be controlled using margin and related properties. the below diagram shows these layers: the standard css box model in the standard box model, if you give a box a width and a height attribute, this defines the width and height of the content box. any padding and border is then added to that width...
... paragraph. horizontal padding, margins, and borders are respected and will cause other content to move away from the box. using display: inline-block there is a special value of display, which provides a middle ground between inline and block. this is useful for situations where you do not want an item to break onto a new line, but do want it to respect width and height and avoid the overlapping seen above. an element with display: inline-block does a subset of the block things we already know about: the width and height properties are respected. padding, margin, and border will cause other elements to be pushed away from the box. it does not, however, break onto a new line, and will only become larger than its content if you explicitly add width and height properties. in this ne...

Flexbox - Learn web development
ng the following declaration to your <section> rule: flex-direction: column; you'll see that this puts the items back in a column layout, much like they were before we added any css. before you move on, delete this declaration from your example. note: you can also lay out flex items in a reverse direction using the row-reverse and column-reverse values. experiment with these values too! wrapping one issue that arises when you have a fixed amount of width or height in your layout is that eventually your flexbox children will overflow their container, breaking the layout. have a look at our flexbox-wrap0.html example, and try viewing it live (take a local copy of this file now if you want to follow along with this example): here we see that the children are indeed breaking out of their...
...s too, but this time we are laying them out like a column. article { flex: 1 200px; } article:nth-of-type(3) { flex: 3 200px; display: flex; flex-flow: column; } next, we select the first <div>. we first use flex:1 100px; to effectively give it a minimum height of 100px, then we set its children (the <button> elements) to also be laid out like flex items. here we lay them out in a wrapping row, and align them in the center of the available space like we did in the individual button example we saw earlier. article:nth-of-type(3) div:first-child { flex:1 100px; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; } finally, we set some sizing on the button, but more interestingly we give it a flex value of 1 auto. this has a very interes...

What is CSS? - Learn web development
t as independent voices; they are not linked to a member organization. new css features are developed, or specified, by the css working group. sometimes because a particular browser is interested in having some capability, other times because web designers and developers are asking for a feature, and sometimes because the working group itself has identified a requirement. css is constantly developing, with new features coming available. however, a key thing about css is that everyone works very hard to never change things in a way that would break old websites. a website built in 2000, using the limited css available then, should still be usable in a browser today! as a newcomer to css, it is likely that you will find the css specs overwhelming — they are intended for engineers to use to i...
...ures in user agents, not for web developers to read to understand css. many experienced developers would much rather refer to mdn documentation or other tutorials. it is however worth knowing that they exist, understanding the relationship between the css you are using, browser support (see below), and the specs. browser support once css has been specified then it is only useful for us in developing web pages if one or more browsers have implemented it. this means that the code has been written to turn the instruction in our css file into something that can be output to the screen. we'll look at this process more in the lesson how css works. it is unusual for all browsers to implement a feature at the same time, and so there is usually a gap where you can use some part of css in some browser...

Styling lists - Learn web development
sts. a simple list example to begin with, let's look at a simple list example. throughout this article, we'll look at unordered, ordered, and description lists — all have styling features that are similar, and some that are particular to their type of list. ...
...5; } dt { font-weight: bold; } the first rule sets a sitewide font and a baseline font size of 10px. these are inherited by everything on the page. rules 2 and 3 set relative font sizes for the headings, different list types (the children of the list elements inherit these), and paragraphs. this means that each paragraph and list will have the same font size and top and bottom spacing, helping to keep the vertical rhythm consistent. rule 4 sets the same line-height on the paragraphs and list items — so the paragraphs and each individual list item will have the same spacing between lines. this will also help to keep the vertical rhythm consistent. rules 5 and 6 apply to the description list — we set the same line-height on the description list terms and descriptions as we did with...

How do I start to design my website? - Learn web development
er dive a project never starts with the technical side. musicians will never make any music unless they first have an idea of what they want to play—and the same is true for painters, writers, and web developers. technique comes second. technique is obviously critical. musicians must master their instrument. but good musicians can never produce good music without an idea. therefore, before jumping into the technical side—for example, code and tools—you must first step back and decide in detail what you want to do. an hour's discussion with friends is a good start, but inadequate. you must sit down and structure your ideas to get a clear view of what path you must take to make your ideas a reality. to do this, you need only pen and paper and some time to answer at least the following q...
...first, some of these items ar...

How do I use GitHub Pages? - Learn web development
o do things like create files and run programs, rather than clicking inside a user interface. it will look something like this: note: you could also consider using a git graphical user interface to do the same work, if you feel uncomfortable with the command line. every operating system comes with a command line tool: windows: command prompt can be accessed by pressing the windows key, typing command prompt, and choosing it from the list that appears. note that windows has its own command conventions differing from linux and os x, so the commands below may vary on your machine. os x: terminal can be found in applications > utilities. linux: usually you can pull up a terminal with ctrl + alt + t. if that doesn't work, look for terminal in an app bar or menu. this may seem a bit sca...
...and os x, so the commands below may vary on your machine. os x: terminal can be found in applications > utilities. linux: usually you can pull up a terminal with ctrl + alt + t. if that doesn't work, look for terminal in an app bar or menu. this may seem a bit scary at first, but don't worry — you'll soon get the hang of the basics. you tell the computer to do something in the terminal by typing in a command and hitting enter, as seen above. creating a repo for your code next, you need to create a new repo for your files to go in. click plus (+) in the top right of the github homepage, then choose new repository. on this page, in the repository name box, enter a name for your code repository, for example my-repository. also fill in a description to say what your repository is going...

How to build custom form controls - Learn web development
; } we don't need an extra element to design the down arrow; instead, we're using the :after pseudo-element. it could also be implemented using a simple background image on the select class. ...
...ition : absolute; left : -5000em; height : 0; overflow : hidden; } this css visually hides one of the elements, but it is still available to screen readers. now we need a javascript switch to determine if the script is running or not. this switch is a couple of lines: if at page load time our script is running, it will remove the no-widget class and add the widget class, thereby swapping the visibility of the <select> element and the custom control. window.addeventlistener("load", function () { document.body.classlist.remove("no-widget"); document.body.classlist.add("widget"); }); without js with js check out the source code note: if you really want to make your code generic and reusable, instead of doing a class switch it's fa...

Front-end web developer - Learn web development
g 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 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...
...g time to complete: 55–90 hours prerequisites it is a good idea to know html, css, and javascript before working through this section, as the tools discussed work alongside many of these technologies. how will i know i'm ready to move on? there are no specific assessment articles in this set of modules. the case study tutorials at the end of the second and third modules prepare you for grasping the essentials of modern tooling. modules git and github (5 hour read) understanding client-side web development tools (20–25 hour read) understanding client-side javascript frameworks (30-60 hour read/exercises) ...

HTML basics - Learn web development
3>my subheading</h3> <h4>my sub-subheading</h4> now try adding a suitable title to your html page just above your <img> element. note: you'll see that your heading level 1 has an implicit style. don't use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as seo. try to create a meaningful sequence of headings on your pages, without skipping levels. paragraphs as explained above, <p> elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content: <p>this is a single paragraph</p> add your sample text (you should have it from what should your website look like?) into one or a few paragraphs, placed directly below your <img> element. lists a lot of the web's content is lists and ...
...at should your website look like?) into one or a few paragraphs, placed directly below your <img> element. lists a lot of the web's content is lists and html has special elements for these. marking up lists always consist of at least 2 elements. the most common list types are ordered and unordered lists: unordered lists are for lists where the order of the items doesn't matter, such as a shopping list. these are wrapped in a <ul> element. ordered lists are for lists where the order of the items does matter, such as a recipe. these are wrapped in an <ol> element. each item inside the lists is put inside an <li> (list item) element. for example, if we wanted to turn the part of the following paragraph fragment into a list <p>at mozilla, we’re a global community of technologists, thin...

Tips for authoring fast-loading HTML pages - Learn web development
ven though these attributes do help a lot the first time a page is loaded, you should use them but not assume they will work in all browsers. if you already follow all javascript best practices, there is no need to change your code. example page structure · <html> · <head> · <link> ... css files required for page appearance. minimize the number of files for performance while keeping unrelated css in separate files for maintenance. · <script> ... javascript files for functions required during the loading of the page, but not any interaction related javascript that can only run after page loads. minimize the number of files for performance while keeping unrelated javascript in separate files for maintenance. · <body> · user visible page content in ...
...oad. · <script> ... any scripts which will be used to perform interactivity. interaction scripts typically can only run after the page has completely loaded and all necessary objects have been initialized. there is no need to load these scripts before the page content. that only slows down the initial appearance of the page load. minimize the number of files for performance while keeping unrelated javascript in separate files for maintenance. if any images are used for rollover effects, you should preload them here after the page content has downloaded. ...

Advanced text formatting - Learn web development
for example: <time datetime="2016-01-20">20 january 2016</time> why is this useful?
...for example: <time datetime="2016-01-20">20 january 2016</time> why is this useful? well, there are many differe...

Creating hyperlinks - Learn web development
he file is passed to a suitable native app on the device) or download the file (in which case you can try to deal with it later on). for example, the bbc homepage contains a many links that point not only to multiple news stories, but also different areas of the site (navigation functionality), login/registration pages (user tools), and more. anatomy of a link a basic link is created by wrapping the text or other content, see block level links, inside an <a> element and using the href attribute, also known as a hypertext reference, or target, that contains the web address. <p>i'm creating a link to <a href="https://www.mozilla.org/">the mozilla homepage</a>. </p> this gives us the following result: i'm creating a link to the mozilla homepage. adding supporting information with the ti...
...ork if clicked on. you need to be careful! link best practices there are some best practices to follow when writing links. let's look at these now. use clear link wording it's easy to throw links up on your page. that's not enough. we need to make our links accessible to all readers, regardless of their current context and which tools they prefer. for example: screenreader users like jumping around from link to link on the page, and reading links out of context. search engines use link text to index target files, so it is a good idea to include keywords in your link text to effectively describe what is being linked to. visual readers skim over the page rather than reading every word, and their eyes will be drawn to page features that stand out, like links. they will find descriptiv...

Making asynchronous programming easier with async and await - Learn web development
ises and how to use them. the basics of async/await there are two parts to using async/await in your code. the async keyword first of all we have the async keyword, which you put in front of a function declaration to turn it into an async function. an async function is a function that knows how to expect the possibility of the await keyword being used to invoke asynchronous code. try typing the following lines into your browser's js console: function hello() { return "hello" }; hello(); the function returns "hello" — nothing special, right? but what if we turn this into an async function? try the following: async function hello() { return "hello" }; hello(); ah. invoking the function now returns a promise. this is one of the traits of async functions — their return values a...
... but how does it work? you'll note that we've wrapped the code inside a function, and we've included the async keyword before the function keyword. this is necessary — you have to create an async function to define a block of code in which you'll run your async code; as we said earlier, await only works inside of ...

Test your skills: Loops - Learn web development
note: you can try out solutions for the tasks below by downloading the code, putting it in an online tool such as codepen, jsfiddle, or glitch, then working on the tasks. we didn't provide live editable versions of these tasks because of the risk of creating infinite loops and crashing the assessment page! if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...ific string values, and nesting them inside existing elements on the page — all via javascript. we haven't explicitly taught this yet in the course, but you'll have seen some examples that make use of it, and we'd like you to do some research into what dom apis you need to successfully answer the questions. a good starting place is our manipulating documents tutorial. loops 1 in our first looping task we want you start by creating a simple loop that goes through all the items in the provided myarray and prints them out on the screen inside list items (i.e., <li> elements), which are appended to the provided list. download the starting point for this task to work in your own editor or in an online editor. loops 2 in this next task, we want you to write a simple program that, given a n...

Fetching data from the server - Learn web development
le, to display a new set of products or load a new page, you've got to load the entire page again. this is extremely wasteful and results in a poor user experience, especially as pages get larger and more complex. enter ajax this led to the creation of technologies that allow web pages to request small chunks of data (such as html, xml, json, or plain text) and display them only when needed, helping to solve the problem described above. this is achieved by using apis like xmlhttprequest or — more recently — the fetch api. these technologies allow web pages to directly handle making http requests for specific resources available on a server and formatting the resulting data as needed before it is displayed. note: in the early days, this general technique was known as asynchronous javas...
...will stay the same. this is a really good thing because: page updates are a lot quicker and you don't have to wait for the page to refresh, meaning that the site feels faster and more responsive. less data is downloaded on each update, meaning less wasted bandwidth. this may not be such a big issue on a desktop on a broadband connection, but it's a major issue on mobile devices and in developing countries that don't have ubiquitous fast internet service. to speed things up even further, some sites also store assets and data on the user's computer when they are first requested, meaning that on subsequent visits they use the local versions instead of downloading fresh copies when the page is first loaded. the content is only reloaded from the server when it has been updated. a basic a...

JavaScript object basics - Learn web development
rson.greeting() you have now got some data and functionality inside your object, and are now able to access them with some nice simple syntax! note: if you are having trouble getting this to work, try comparing your code against our version — see oojs-finished.html (also see it running live). the live version will give you a blank screen, but that's ok — again, open your devtools and try typing in the above commands to see the object structure. so what is going on here? well, an object is made up of multiple members, each of which has a name (e.g. name and age above), and a value (e.g. ['bob', 'smith'] and 32). each name/value pair must be separated by a comma, and the name and value in each case are separated by a colon. the syntax always follows this pattern: const objectname = { ...
...se in the js console: person['eyes'] = 'hazel'; person.farewell = function() { alert("bye everybody!"); } you can now test out your new members: person['eyes'] person.farewell() one useful aspect of bracket notation is that it can be used to set not only member values dynamically, but member names too. let's say we wanted users to be able to store custom value types in their people data, by typing the member name and value into two text inputs. we could get those values like this: let mydataname = nameinput.value; let mydatavalue = namevalue.value; we could then add this new member name and value to the person object like this: person[mydataname] = mydatavalue; to test this, try adding the following lines into your code, just below the closing curly brace of the person object: let myd...

Multimedia: video - Learn web development
video still looks good. there are some compression algorithms that can make video look (bad) like an animated gif. while a 128 kb video may seem like it could provide a better user experience than a 10 mb download, a grainy gif-like video may reflect poorly on the brand or project. see caniuse.com for current browser support of video and other media types. video autoplay to ensure that a looping background video autoplays, you must add several attributes to the video tag: autoplay, muted, and playsinline. <video autoplay="" loop="" muted="true" playsinline="" src="backgroundvideo.mp4"> while the loop and autoplay make sense for a looping and autoplaying video, the muted attribute is required for autoplay in mobile browsers. playsinline is required for mobile safari, allowing videos to...
...her video without audio, removing audio is smart. <video autoplay="" loop="" muted="true" playsinline="" id="hero-video"> <source src="banner_video.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="web_banner.mp4" type="video/mp4"> </video> this hero-video code (above) is common to conference websites and corporate home pages. it includes a video that is auto-playing, looping, and muted. there are no controls, so there is no way to hear audio. the audio is often empty, but still present, and still using bandwidth. there is no reason to serve audio with video that is always muted. removing audio can save 20% of the bandwidth. depending on your choice of software, you might be able to remove audio during export and compression. if not, a free utility called ffmpeg can ...

Getting started with Ember - Learn web development
single page applications, including native-like web apps, and progressive web apps (pwas) ember works best when it is the entire front end of your application. increasing cohesion among many team's technology stacks community-backed "best practices" allow for faster long-term development speed. ember has clear conventions that are useful for enforcing consistency and helping team members get up to speed quickly. ember with add-ons emberjs has a plugin architecture, which means that add-ons can be installed and provide additional functionality without much, if any, configuration. examples include: prember: static website rendering for blogs or marketing content. fastboot: server-side rendering, including improving search-engine optimization (seo), or impr...
... deliberately disable the outline */ outline: #d86f95 solid !important; } this css overrides some of the styles provided by the todomvc-app-css npm package, therefore allowing keyboard focus to be visible. this goes some way towards fixing one of the major accessibility disadvantages of the default todomvc app. ...

Getting started with React - Learn web development
to build user interfaces more quickly and intuitively, and allow others to better understand your codebase at a glance. to read more about jsx, check out the react team's jsx in depth article. setting up your first react app there are many ways to use react, but we're going to use the command-line interface (cli) tool create-react-app, as mentioned earlier, which expedites the process of developing a react application by installing some packages and creating some files for you, handling the tooling described above. it's possible to add react to a website without create-react-app by copying some <script> elements into an html file, but the create-react-app cli is a common starting point for react applications. using it will allow you spend more time building your app, and less time fussing ...
...ifest.json └── src ├── app.css ├── app.js ├── app.test.js ├── index.css ├── index.js ├── logo.svg └── serviceworker.js the src directory is where we'll spend most of our time, as it's where the source code for our application lives. the public directory contains files that will be read by your browser while you're developing the app; the most important of these is index.html. react injects your code into this file so that your browser can run it. there's some other markup that helps create-react-app function, so take care not to edit it unless you know what you're doing. you very much should change the text inside the <title> element in this file to reflect the title of your application. accurate page titles are impo...

Deployment and next steps - Learn web development
our existing files. follow the steps listed under the push an existing folder heading: cd your_root_directory # go into your project's root directory git init git remote add origin https://gitlab.com/[your-user]/mdn-svelte-todo.git git add . git commit -m "initial commit" git push -u origin master note: you could use the git protocol instead of https, which is faster and saves you from typing your username and password every time you access your origin repo. to use it you'll have to create an ssh key pair. your origin url will be like this: git@gitlab.com:[your-user]/mdn-svelte-todo.git. with these instructions we initialize a local git repository, then set our remote origin (where we will push our code to) as our repo on gitlab. next we commit all the files to the local git re...
...port. in this article we've learned about a couple of zero-fuss options to deploy our app in production and seen how to setup a basic pipeline to deploy our app to gitlab on every commit. then we provided you with 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. previous overview: client-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 ...

Dynamic behavior in Svelte: working with variables and props - Learn web development
in this article we'll be using variables and props to make our app dynamic, allowing us to add and delete todos, mark them as complete, and filter them by status. 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. ...
...to log the contents of newtodoname. add this snippet at the end of the <script> section: $: console.log('newtodoname: ', newtodoname) note: as you may have noticed, reactive statements aren't limited to variable declarations. you can put any javascript expression after the $: sign. now try going back to localhost:5000, pressing ctrl + shift + k to open your browser console and typing something into the input field. you should see your entries logged. at this point, you can delete the reactive console.log() if you wish. next up we'll create a function to add the new todo — addtodo() — which will push a new todo object onto the todos array. add this to the bottom of your <script> block inside src/components/todo.svelte: function addtodo() { todos.push({ id: 999, ...

Handling common accessibility problems - Learn web development
the tab focus start to move through the different focusable elements; the focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused. you can then press enter/return to follow a focused link or press a button (we've included some javascript to make the buttons alert a message), or start typing to enter text in a text input (other form elements have different controls, for example the <select> element can have its options displayed and cycled between using the up and down arrow keys). note that different browsers may have different keyboard control options available. most modern browsers follow the tab pattern described above (you can also do shift + tab to move backwards through the f...
... not completely logical (which to be fair it should be). note: for more information about link text and form labels, read meaningful text labels. finally, a quick word about data tables. a basic data table can be written with very simple markup (see bad-table.html live, and source), but this has problems — there is no way for a screen reader user to associate rows or columns together as groupings of data — to do this you need to know what the header rows are, and if they are heading up rows, columns, etc. this can only be done visually for such a table. if you instead look at our punk-bands-complete.html example (live, source), you can see a few accessibility aids at work here, such as table headers (<th> and scope attributes), <caption> element, etc. note: for more information abou...

Deploying our app - Learn web development
ss, and even how a page looks. however, for this project we’re going to create a small test that will check the third-party nasa data feed and ensure it's in the correct format. if not, the test will fail and will prevent the project from going live. to do anything else would be beyond the scope of this module — testing is a huge subject that really requires its own separate module. we are hoping that this section will at least make you aware of the need for testing, and will plant the seed that inspires you to go and learn more. although the test for this project does not include a test framework, as with all things in the front-end development world, there are a slew of framework options. the test itself isn't what is important. what is important is how the failure or success is handl...
...ividual aspects whilst you're working on your own projects. now, finally, a minute or so after pushing, netlify will deploy the project update. but only if it passes the test that was introduced. summary that's it for our sample case study, and for the module! we hope you found it useful. while there is a long way to go before you can consider yourself a client-side tooling wizard, we are hoping that this module has given you that first important step towards understanding client-side tooling, and the confidence to learn more and try out new things. let's summarise all the parts of the toolchain: code quality and maintenance are performed by eslint and prettier. these tools are added as devdependancies to the project via npm install --dev eslint prettier eslint-plugin-react (the esli...

Package management basics - Learn web development
this is not too painful for a couple of dependencies, but in larger projects with many dependencies this kind of thing can become really challenging to keep track of. it makes more sense to use a package manager such as npm, as this will guarantee that the code is added and removed cleanly, as well as a host of other advantages. what exactly is a package manager? we've met npm already, but stepping back from npm itself, a package manager is a system that will manage your project dependencies. the package manager will provide a method to install new dependencies (also referred to as "packages"), manage where packages are stored on your file system, and offer capabilities for you to publish your own packages. in theory you may not need a package manager and you could manually download and s...
... kb 64ms dist/my-project.fb76efcf.js 195.74 kb 8.43s dist/index.html 288 b 806ms again, the destination for our production files is the dist directory. reducing your app's file size however, as with all tools that "help" developers there's often a trade off. in this particular case it's the file size. the javascript bundle my-project.fb76efcf.js is a whopping 195k — very large, given that all it does is print a line of text. sure there's some calculation, but we definitely don’t need 195k worth of javascript to do this!. when you use development tooling it's worth questioning whether they're doing the right thing for you. in this case, the bundle is nearly 200k because it has in fact included the entire date-fns library, not just the function we'...

Learn web development
tail 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. we have 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 ...
...ng the following command: git pull contact us if you want to get in touch with us about anything, the best way is to drop us a message on our discourse forum. we'd like to hear from you about anything you think is wrong or missing on the site, requests for new learning topics, requests for help with items you don't understand, or any other questions or concerns. if you're interested in helping develop/improve the content, take a look at how you can help and get in touch! we are more than happy to talk to you, whether you are a learner, teacher, experienced web developer, or someone else interested in helping to improve the learning experience. ...

Multiprocess on Windows
using the mta in the first place! enter the interceptor to achieve the best of both worlds, we wrote our own code to facilitate the safe handing off of an inbound rpc from the content process's mta to the content main thread's sta. this uses a com technology called the interceptor. interceptors are, essentially, wrapper objects which implement the same interfaces as the object that they are wrapping. when an incoming rpc invokes a method on an interceptor, the interceptor dispatches a callback that allows us to do whatever we want with that request. our callback implementation forwards the method call to the main thread in order to invoke the method on the wrapped object. the interceptor is also aware that any outparams, which contain interfaces, must also be wrapped with interceptors of the...
...arameter that contains the array (excluding the this pointer). marrayparamtype is the expected variant type of the outparam. this should usually be set to vt_unknown | vt_byref, which is telling the interceptor that the outparam is an iunknown**. marrayparamiid is the uuid of the interface that the outparam array uses. this should be the iid that we want the interceptor to actually use when wrapping the array element. mlengthparamindex is the index of the out parameter that contains the length of the array (excluding the this pointer). the interceptor needs to be able to read this parameter to know how many interface pointers exist in the array. mflag may currently be set to one of two values: arraydata::flag::enone or arraydata::flag::eallocatedbyserver. setting eallocatedbyserver signals...

Mozilla’s UAAG evaluation report
(p2) c when focus and/or selection changes they are in the viewport 5.5 confirm form submiss...
...nel. mozilla exposes the focus via wm_focus system messages mozilla does not use the system focus drawing routines, because they aren't flexible enough (don't support css) 7.2 respect input configuration conventions. (p1) vg mozilla implements standard keyboard bindings there are a few missing pieces, such as support in xul comboboxes (menulist) for selecting items by typing alphanumeric keystrokes 7.3 operating environment conventions. (p2) g mozilla uses non-native controls. it does, however, support the look and feel of widgets on various operating systems, when the classic theme is selected (on by default). 7.4 input configuration indications. (p2) g menus indicate accesskey and accelerator configurations accelerators not show in...

Add-ons
modify the functionality of firefox. they are written using standard web technologies - javascript, html, and css - plus some dedicated javascript apis. among other things, an add-on could: change the appearance or content of particular websites modify the firefox user interface add new features to firefox there are several types of add-ons, but the most common type are extensions. developing extensions in the past, there were several toolsets for developing firefox extensions, but as of november 2017, extensions must be built using webextensions apis. other toolsets, such as overlay add-ons, bootstrapped add-ons, and the add-on sdk, are no longer supported. extensions written using webextensions apis for firefox are designed to be cross-browser compatible. in most cases, it will ru...
... are also fully compatible with multiprocess firefox. you can see the apis currently supported in firefox and other browsers. extension workshop the firefox extension workshop can help you develop extensions for firefox and give your users simple, yet powerful ways to customize their browsing experience. you’ll find: overview of the firefox extension features tools and processes for developing and testing how to publish your extension on addons.mozilla.org or distribute it yourself how to manage your published extension an enterprise guide for developing and using extensions how to develop themes for firefox firefox developer communities extensions for firefox for android in 2020, mozilla will release a new firefox for android experience. this new, high-performance browser for ...

Android-specific test suites
ks. they should always be preferred to on-device robocop tests. see https://developer.android.com/training/testing/unit-testing/local-unit-tests.html for more details. running android-test to run android-test, first build firefox for android with your changes; then run ./mach android test this will run the tests and report the results to stdout, as well as produce an html report. while developing, you can launch these tests from within android studio, which is the fastest way to iterate on code and tests. disabling one failing test there is no manifest listing the android local unit tests. to disable a single test, edit the source code and insert junit's @ignore annotation before the existing @test annotation. for example, to disable org.mozilla.gecko.permissions.testsuccessrunnableisex...
... simple test that can assure you have a quality code. see https://developer.android.com/studio/write/lint.html and http://tools.android.com/tips/lint for more details. running android-lint to run android-lint, first build firefox for android with your changes; then run ./mach android lint this will lint the code and report the results to stdout, as well as produce an html report. while developing, lint warnings should appear within android studio, although this is not infallible. disabling one failing test in general, it's not sensible to allow new java code to land that lint detects issues with. however, the existing configuration can be tweaked and some options can be modified. contact information android-lint is currently owned by :sebastian and :nalexander. file tickets in the fir...

Chrome registration
rties files. skin a skin provider is responsible for providing a complete set of files that describe the visual appearance of the chrome. typically a skin provider will provide css files and images. note: scripts (including those found in xbl) loaded from skin packages will not execute. the chrome registry the gecko runtime maintains a service known as the chrome registry that provides mappings from chrome package names to the physical location of chrome packages on disk. this chrome registry is configurable and persistent, and thus a user can install different chrome providers, and select a preferred skin and locale. this is accomplished through xpinstall and the extension manager. in order to inform the chrome registry of the available chrome, a text manifest is used: this manifest...
...(this can be annoying and/or useful in css files, for example). note: there was a bug in gecko 1.8.1.5 (firefox 2.0.0.5) and earlier where you could not use a relative url for the new-resolved-uri parameter. you needed to provide an absolute url. see bug 323455. resource aliases can be created using the resource instruction: resource aliasname uri/to/files/ [flags] this will create a mapping for resource://<aliasname>/ uris to the path given. note: there are no security restrictions preventing web content from including content at resource: uris, so take care what you make visible there. manifest flags manifest lines can have multiple, space-delimited flags added at the end of the registration line. these flags mark special attributes of chrome in that package, or limit the cond...

Debugging on Windows
u>, length=<mlength,u> nsacstring_internal=<mdata,s>, length=<mlength,u> ; xpcom strings nsastring=<nsstringcontainer.v,su>, length=<nsstringcontainer.d1,u> nsacstring=<nscstringcontainer.v,s>, length=<nscstringcontainer.d1,u> nsstringcontainer=<v,su>, length=<d1,u> nscstringcontainer=<v,s>, length=<d1,u> there is a more extensive version of this file in progress in autoexpforvc8. avoiding stepping into certain functions you can avoid stepping into certain functions, such as nscomptr methods, using an undocumented feature of vc. see the blog post how to not step into functions using the visual c++ debugger for details. here are some wildcards you can use (tested with vc 8): nscomptr.*\:\:.*=nostepinto (nsg|g)etter_*addrefs.*=nostepinto ns_convertutf.* ; might be too broad: (ns|promise)[^...
...lication can automatically select a response to the "do you want to debug" dialog instead of prompting if you configure it, for more info, see windbgdlg.exe. debugging optimized builds to effectively debug optimized builds, you should enable debugging information which effectively leaves the debug symbols in optimized code so you can still set breakpoints etc. because the code is optimized, stepping through the code may occasionally provide small surpises when the debugger jumps over something. you need to make sure this configure parameter is set: --enable-debugger-info-modules=yes you can also choose to include or exclude specific modules. this is particularly useful to avoid linking layout with debugging information. console debugging when printing to stdout from a content process, ...

Configuring Build Options
nt without consulting benjamin smedberg <benjamin@smedbergs.us> or one of the build-config peersthis document details how to configure firefox builds. most of the time a mozconfig file is not required. the default options are the most well-supported, so it is preferable to add as few options as possible. please read the following directions carefully before building, and follow them in order. skipping any step may cause the build to fail, or the built software to be unusable. build options, including options not usable from the command-line, may appear in "confvars.sh" files in the source tree. using a mozconfig configuration file the choice of which mozilla application to build and other configuration options can be configured in a mozconfig file. (it is possible to manually call configure ...
...desired results, unless you know the mozilla codebase very well; note, however, that if you are building with the microsoft compilers, you probably do want this as -o1 will optimize for size, unlike gcc. ac_add_options --enable-debug enables assertions in c++ and javascript, plus other debug-only code. this can significantly slow a build, but it is invaluable when writing patches. people developing patches (especially in c++) should generally use this option. ac_add_options --disable-optimize disables compiler optimization. this makes it much easier to step through code in a debugger. ac_add_options --enable-debug-js-modules enable only javascript assertions. this is useful when working locally on javascript-powered components like the devtools. this will help catch any errors introduce...

How Mozilla's build system works
this document explains how the build system works. note: this document is not intended for developers who just want to build mozilla. ...
... tried-and-true backend used to build the tree. it's what's been used since the dawn of mozilla. essentially, there are makefiles in each directory. make starts processing the makefile in the root directory and then recursively descends into child directories until it's done. but there's more to the process than that. the recursive make backend divides the source tree into tiers. a tier is a grouping of related directories containing makefiles of their own. for example, there is a tier for the netscape portable runtime (nspr), one for the javascript engine, one for the core gecko platform, one for the xul app being built, and so on. the main moz.build file defines the tiers and directories in the tiers. in reality, the main moz.build files include other moz.build files, such as /toolkit/tool...

pymake
you must take special care to be able to switch back and forth between gmake and pymake on the same object dir. see gmake vs. pymake for more information. anywhere you would normally type make, instead type python /path/to/srcdir/build/pymake/make.py. for example: instead of make -f client.mk to start a build, you would type python build/pymake/make.py -f client.mk. to run tests instead of typing make mochitest-plain in the object directory, you would type python ../build/pymake/make.py mochitest-plain. alternately, if you would like to simply type in pymake -f client.mk from within the mingw32 shell. while in the shell type cd ~ (without quotes). type touch .profile using any appropriate text editor open .profile and add the following line in the file (assuming your mozilla-central ...
...ingw32 shell. while in the shell type cd ~ (without quotes). type touch .profile using any appropriate text editor open .profile and add the following line in the file (assuming your mozilla-central is at c:/mozilla-central, if not, adjust your path accordingly.) alias pymake=c:/mozilla-central/build/pymake/make.py save your .profile edit and close the shell, then restart the shell. try typing just pymake into the shell and press enter. this should come back with "no makefile found." if it does, your pymake alias is connected and you are ready to type in pymake -f client.mk to start the build. unlike gmake on windows, pymake is capable of doing parallel builds, so you can set a moz_make_flags=-jn in your .mozconfig without risk of deadlocks. note: on windows, if using an absolute p...

Interface development guide
documentation xpidl the xpcom interface description language is used to specify xpcom interface classes. idl interface rules design guidelines and rules when creating and changing xpcom interfaces. ...
... these first! ...

SVG Guidelines
000000) → translate(0, -1) (as seen here) as for descriptive ids: for gradients: svg_id1 → gradient1 (as seen here) use of class names avoid using a class if that class is only used once in the file if that class only sets a fill or a stroke, it's better to set the fill/stroke directly on the actual shape, instead of introducing a class just for that shape. you can also use svg grouping to avoid duplicating those attributes avoid introducing variants of the same file (color/style variants), and use sprites instead (with class names) default style values there's usually no need to set the default style value unless you're overriding a style. here are some commonly seen examples: style="display: none;" on <defs> elements (a <defs> element is hidden by default) type="text/c...
...of the same file (color/style variants), and use sprites instead (with class names) default style values there's usually no need to set the default style value unless you're overriding a style. here are some commonly seen examples: style="display: none;" on <defs> elements (a <defs> element is hidden by default) type="text/css" on <style> elements stroke: none or stroke-width: 0 svg grouping style grouping group similarly styled shapes under one <g> tag; this avoids having to set the same class/styles on many shapes. avoid excessive grouping editors can sometimes do excessive grouping while exporting svgs. this is due to the way editors work. nested groups avoid multiple-level nesting of groups, these make the svg less readable. nested transforms some editors use <g> tags to ...

Experimental features in Firefox
developer edition 31 no beta 31 no release 31 no preference name layout.css.convertfromnode.enable payment request api primary payment handling the payment request api provides support for handling web-based payments within web content or apps. due to a bug that came up during testing of the user interface, we have decided to postpone shipping this api while discussions over potential changes to the api are held. work is ongoing. see bug 1318984 for more details on the state of this api. release channel version added enabled by default? nightly 55 no developer edition 55 no beta 55 no release 55 no preference name dom.payments.request.enabled an...
...g 1605153 for more details. release channel version added enabled by default? nightly 75 no developer edition 75 no beta 75 no release 75 no preference name devtools.webconsole.input.context mobile gesture support in responsive design mode mouse gestures are used to simulate mobile gestures like swiping/scrolling, double-tap and pinch-zooming and long-press to select/open the context menu. see bug 1621781, bug 1245183, and bug 1401304 for more details. release channel version added enabled by default? nightly 76[1] yes developer edition 76[1] yes beta 76[1] yes release 76[1] no preference name n/a ...

Index
files beginner, firefox, guide, intro, profiles, qa a profile in firefox is the collection of settings, customizations, add-ons, and other personalizations that a user has made or installed into their copy of firefox. you can find details about profiles on mozilla's end-user support site. 168 performance best practices for firefox front-end engineers best practices, developing firefox, developing mozilla, firefox, front-end, mozilla, performance this guide will help firefox developers working on front-end code produce code which is as performant as possible—not just on its own, but in terms of its impact on other parts of firefox. always keep in mind the side effects your changes may have, from blocking other tasks to interfering with other user interface eleme...
...ection privacy, private browsing, blocking, tracking starting in version 42, firefox desktop and firefox for android include built-in tracking protection. in private browsing windows (tabs, in firefox for android), firefox will block content loaded from domains that track users across sites. 172 security best practices for firefox front-end engineers best practices, developing firefox, developing mozilla, firefox, front-end, mozilla, performance this article will help firefox developers understand the security controls in place and avoid common pitfalls when developing front-end code for firefox. ...

overflow-clip-box
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. the overflow-clip-box css property specifies relative to which box the clipping happens when there is an overflow. it is short hand for the overflow-clip-box-inline and overflow-clip-box-block properties. /* keyword values */ overflow-clip-box: padding-box; overflow-clip-box: content-box; /* two values */ overflow-clip-box: padding-box content-box; overflow-clip-box: content-box content-box; /* global values */ overflow-clip-box: inherit; overflow-clip-box: initial; overflow-clip-box: unset; not...
... uses this property that can be used elsewhere too. note that this property is activated by default only in the ua stylesheet and chrome contexts. initial valuepadding-boxapplies toall elementsinheritednomediavisualcomputed valueas specifiedanimation typediscretecanonical orderthe unique non-ambiguous order defined by the formal grammar syntax values padding-box this keyword makes the clipping be related to the padding box. content-box this keyword makes the clipping be related to the content box. formal syntax padding-box | content-box examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflo...

Chrome-only CSS reference
d by the properties attribute.css -moz-bool-pref() @supports functionthe -moz-bool-pref() @supports condition is available to gecko chrome and ua stylesheets to check if a boolean preference is enabled.css <display-xul> component</display-xul>firefox supports the following -moz- prefixed xul display values:overflow-clip-boxthe overflow-clip-box css property specifies relative to which box the clipping happens when there is an overflow. it is short hand for the overflow-clip-box-inline and overflow-clip-box-block properties.overflow-clip-box-blockthe overflow-clip-box-block css property specifies relative to which box the clipping happens when there is an overflow — in the block direction.overflow-clip-box-inlinethe overflow-clip-box-inline css property specifies relative to which box the cli...
...happens when there is an overflow. it is short hand for the overflow-clip-box-inline and overflow-clip-box-block properties.overflow-clip-box-blockthe overflow-clip-box-block css property specifies relative to which box the clipping happens when there is an overflow — in the block direction.overflow-clip-box-inlinethe overflow-clip-box-inline css property specifies relative to which box the clipping happens when there is an overflow — in the inline direction. ...

Embedding the editor
forward commands to the individual editors depending on focus, and mediate undo/redo between them. alternative solution: rather than having multiple editors in this scenario, we could have a single editor, which is capable of saving and restoring state such that it can be transferred between the various subdocuments being edited. that state would have to include the document, undo stack, and typing state. the implementation of the editing session would be responsible for swapping out the editor's state on focus changes etc. more than one editor per window current composer clients in the mozilla codebase all assume that there is only one <editor> tag per window. they all need to be able to deal with multiple editors. fixing this would require js changes of the following kind: standardize...
...ld need to implement this to get native toolbars and menus to work. in composer, we'd have an implementation in js that talks to the existing commands, and updates the xul nodes. fix existing js and c++ code which explicitly addresses elements in the xul document to go through nsieditoruserinterface. steps to embedding this section attempts to lay out an implementation plan, with the aim of keeping everything working as the various steps are taken. some of these tasks can be done concurrently. decide on how to implement editing session multiple-editor support eliminate specific interdependencies between composer and the xul document, via nsieditoruserinterface create bottleneck for getting to the focussed editor; ensure that focus changes update state move editor ownership to docsh...

Getting Started with Chat
of the specified channel. if a #channel is not specified, the command is executed for the current channel. /mode #channel +s sets the channel as a secret channel. this takes the channel off the public list of active channels and topics. ...
...ts the channel as a secret channel. this takes the channel off the public list of active channels and topics. /msg nick message sends a private message to the specified user /nick nickname change your current nickname nickname: ping get a user's attention (nickname is the name of the user you want the attention of) nickname: pong respond to a user's ping (nickname is the name of the user who wants your attention) /query nickname opens a private chat with the specified user /quit message disconnects you from the current server displaying the message in all connected channels prior to quitting /reload styles some irc clients, colloquy on mac in particular, stop displaying your messages in the channel window. if t...

How Mozilla determines MIME Types
for some common html tags. the uri is handed to the externalhelperappservice for mime type guessing if all else fails, the buffer (i.e. the first few bytes of the file) is searched for embedded nulls; if none are found, text/plain will be used, otherwise application/octet-stream. ...
... and the specified mime type will be used. (i.e. the list in edit/preferences/helper applications) if that failed, a list of "extra" mime types is searched for an extension match. see line 507 for the complete list. if that also failed, the list of loaded plugins is checked for a plugin that can handle this extension, and is asked for the mime type if no plugin is registered, the ext-to-type-mapping xpcom category is searched for the extension. this allows extensions to register additional mappings. the key of the category entry is the extension without leading dot, the value is the mime type. the extension must be lowercase. if no ext-to-type-mapping category is found, the externalhelperappservice returns application/x-extension-ext, where ext is the extension of the file. helper applica...

Introduction to Layout in Mozilla
structures content node elements, attributes, leaves dom frame rectangular formatting primitive geometric information [0..n] per content node 2nd thru nth are “continuations” style context non-geometric information may be shared by adjacent frames reference counted, owned by frame view clipping, z-order, transparency [0..1] per frame, owned by frame widget native window [0..1] per view, owned by view key data structures the document owns the content model, and one or more presentations exposed programmatically via dom apis the presentation owns the frame hierarchy frames own the style contexts, views, widgets pre...
...document observer receives contentappended, etc. notifications passes these to the style set object, who in turn passes to the frame constructor frame constructor creates frames constructframeinternal recursively walks content tree, resolves style and creates frames either created by tag (<select>) or by display type (<p>) frame manager maintains mapping from content to frame style resolution compute stylistic information based on the style rules that apply for the frame’s content node style data broken into different structures display, visibility, font, color, background, … inherit vs. reset style context object is a placeholder for partially computed stylistic data style data is computed lazily, as...

Following the Android Toasts Tutorial from a JNI Perspective
str(1, sig.toast.length - 2), { // declares of constructors, static_methods, methods, fields, and static_fields go here }); the variable name of toast was used, but it does not matter, you can use whatever you want. the first argument to loadclass is the java environment variable, my_jenv. the second argument is the class sig without the surrounding l and ;. because we don't want to keep typing string signatures everywhere, we can end up with typos and hard to trace back errors, we use the sig object. we see sig.toast.substr(1, sig.toast.length - 2) was written, this can be replaced with 'android/widget/toast'. the third argument is an object of our declares. declare constructors in our toast example, we do not have any constructors. determine static-ness of methods declare them th...
...ents and return type for each of the methods. the documentation says maketext takes three arguments, the types are context, int, and int and returns a toast. for example, let's declare this with strings: { name: 'maketext', sig: '(landroid/content/context;ii)landroid/widget/toast;' } we see there are no separating characters between the arguments. because we want to avoid typos, we will avoid typing the signatures and user our sig object. { name: 'maketext', sig: '(' + sig.context + // context sig.int + // resid sig.int + // duration ')' + sig.toast // return } let's do the same for show and here are our methods placed into our third argument of loadclass: static_methods: [ { name: 'maketext', sig: '(' + ...

Application Translation with Mercurial
test changes in the future. thunderbird, lightning or seamonkey: download the comm-<branch>.hg file (e.g. comm-aurora.hg) from https://ftp.mozilla.org/pub/mozilla.org/thunderbird/bundles/ in the next step, we will unpack the source code: open an input shell, e.g. by pressing the windows key and r on the keyboard or by calling the "run..." command from the windows "start" button, and then typing cmd and pressing the enter key. launch the installed mozillabuild toolset by launching it with its path, e.g. c:\mozilla\coding\buildtools\mozillabuild\start-shell-msvc2010.bat you can autocomplete the file path after typing a few characters and then pressing the tabulator key. if you launch the start-shell-l10n.bat, compiling features will be disabled. you can create translation patches, but ...
...ent environment which emulates a linux environment. now go to the directory where you want to put the source code. it's highly recommended to put it onto the fastest hard drive in the device. file paths here work starting with a slash (/) followed by the drive letter, and then the directory structure like on windows, but using slashes (/) instead of backslashes (\). so let's go to c:\mozilla by typing cd /c/mozilla/ create a new directory for the source code: mkdir mozilla-aurora initialize the new directory as new repository: hg init mozilla-aurora go into the new directory: cd mozilla-aurora unpack the source code: hg unbundle /path/to/the/downloaded/mozilla-aurora.hg this can take some time, mostly depending on the performance of the hard drive. extract the files: hg upda...

Localization and Plurals
you're likely here because you're localizing a .properties file and it had a link to this page. this page is to help explain how to localize these strings so that the correct plural form is shown to the user. for example, "1 page" vs "2 pages". if you're here to make your code (e.g., extensions) localizable for plural forms, you can jump straight to developing with pluralform. you may also need to localize the initial strings for your code, so it would be good to read through at least the usage section as well. usage here are a couple terms used in this page to help keep things clear: plural rule: for a given language, there is a grammatical rule on how to change words, depending on the number qualifying the word. different languages can have different rules. plural form: for a ...
...this module provides a couple methods for localizing to the browser's current locale as well as getting methods to localize to a desired plural rule. the latter ability of specifying a plural rule is useful for extensions because the extension doesn't necessarily have to be ...

Mozilla Style System
applies to a given element or pseudo-element, in the form of style rules. nsistylerule an nsistylerule is animmutable set of css property-value pairs. for css style sheets, they correspond to css's concept of rules. however, they also exist for the other types of rule processors. when script dynamically changes the data represented by a css style rule, we create a new nsistylerule object; keeping the old one around briefly helps to determine what changed and how we need to handle that change. computed style (front end) the interface that the front end exposes to the rest of mozilla consists of a single nsstyleset object and many nsstylecontext objects, each of which holds the computed style for an element, pseudo-element, or text node. the style set provides the api managing the rule ...
...omputed style data by allowing retrieval of a set of style structs, each of which contains the computed values of a set of css properties. style structs the style structs are a set of structs, each of which holds computed values a group of properties. they all have names beginning with nsstyle*, and they should not be confused with the css structs (nscss*), which hold specified values. ...

DMD
elow. if you are using a dmd-enabled try build, or build from other source, adjust the app identifier as necessary. adb shell su # you need root access for the setprop command to take effect setprop wrap.org.mozilla.fennec_$username "/data/local/tmp/dmd_fennec" once this is set up, starting the org.mozilla.fennec_$username app will use the wrapper script. ...
...md_fennec" once this is set up, starting the org.mozilla.fennec_$username app will use the wrapper script. launch launch fennec either by tapping on the icon as usual, or from the command line (as before, be sure to replace org.mozilla.fennec_$username with the app identifier as appropriate). adb shell am start -n org.mozilla.fennec_$username/.app trigger use the existing memory-report dumping hook: adb shell am broadcast -a org.mozilla.gecko.memory_dump in logcat, you should see output similar to this: i/dmd (20731): opened /storage/emulated/0/download/memory-reports/dmd-default-20731.json.gz for writing ... i/geckoconsole(20731): nsimemoryinfodumper dumped reports to /storage/emulated/0/download/memory-reports/unified-memory-report-default-20731.json.gz the path is where th...

Profiling with the Firefox Profiler
refox when it’s hung! profiling threads the firefox profiler has rudimentary support for profiling multiple threads. to enable it, check the 'multi-thread' box then enter one or more thread names into the textbox beside it. thread names are the strings passed to the base::thread class at initialization. at present there is no central list of these thread names, but you can find them by grepping the source. examples: 1 2 if the filter you entered is invalid, no threads will be profiled. you can identify this by hitting analyze (cleopatra will show you an error message). if the filter is left empty, only the main thread is captured (as if you had not enabled multi-thread.) profiler features the profiler supports several features. these are options to gather additional data in your pro...
...tion bar in b2g. viewing textures sometimes, it's useful to see not only the structure of the layer tree for each composite, but also the rendered textures for each layer. this can be achieved by additionally setting the layers.dump-texture pref to true, or by adding -f layersdump to the profiler command line (the latter implies both the layers.dump and layers.dump-texture prefs). warning: dumping texture data slows performance considerably, and requires a lot of storage for the profile files. expect rendering to happen at a significantly reduced frame rate when profiling this way, and keep the duration of the capture short, to ensure the samples of interest aren't overwritten. here's how the layer tree view looks in cleopatra with texture data: this time, the visualization in right p...

Scroll-linked effects
ser's main thread, it will be asynchronous relative to the user-visible scrolling. therefore, with asynchronous scrolling, the event handler will be delayed relative to the user-visible scroll, and so the div will not stay visually fixed as intended. instead, it will move with the user's scrolling, and then "snap" back into position when the scroll event handler runs. this constant moving and snapping will result in a jittery visual effect. one way to implement this without the scroll event listener is to use the css property designed for this purpose: <body style="height: 5000px"> <div id="toolbar" style="position: sticky; top: 0px; margin-top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this version works well with asynchronous scrolling because position of ...
...ent listener is to use the css property designed for this purpose: <body style="height: 5000px"> <div id="toolbar" style="position: sticky; top: 0px; margin-top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this version works well with asynchronous scrolling because position of the "toolbar" div is updated by the browser as the user scrolls. example 2: scroll snapping below is an implementation of scroll snapping, where the scroll position snaps to a particular destination when the user's scrolling stops near that destination. <body style="height: 5000px"> <script> function snap(destination) { if (math.abs(destination - window.scrolly) < 3) { scrollto(window.scrollx, destination); } else if (math.abs(destination - window.scro...

about:memory
single memory report files can also be loaded automatically when about:memory is loaded by appending a file query string, for example: about:memory?file=/home/username/reports.json.gz this is most useful when loading memory reports files obtained from a firefox os device. memory reports are saved to file as gzipped json. these files can be loaded as is, but they can also be loaded after unzipping. interpreting memory reports almost everything you see in about:memory has an explanatory tool-tip. hover over any button to see a description of what it does. hover over any measurement to see a description of what it means. measurement basics most measurements use bytes as their unit, but some are counts or percentages. most measurements are presented within trees. for example: 585 (100.
... ├──92 (15.73%) ── alive └───0 (00.00%) ── dead leaf nodes represent actual measurements; the value of each internal node is the sum of all its children. the use of trees allows measurements to be broken down into further categories, sub-categories, sub-sub-categories, etc., to arbitrary depth, as needed. all the measurements within a single tree are non-overlapping. tree paths can be written using '/' as a separator. for example, preference/referent/weak/dead represents the path to the final leaf node in the example tree above. sub-trees can be collapsed or expanded by clicking on them. if you find any particular tree overwhelming, it can be helpful to collapse all the sub-trees immediately below the root, and then gradually expand the sub-trees of intere...

Performance
documentation reporting a performance problem a user friendly guide to reporting a performance problem. a development environment is not required. benchmarking tips on generating valid performance metrics. performance best practices in extensions a performance "best practices" guide for extension developers. measuring add-on startup performance a guide for add-on developers on how to set up a performance testing environment. ...
...turbostat (linux-only) turbostat is a command-line utility that gathers and displays various power-related measurements, with a focus on per-cpu measurements such as frequencies and c-states. powertop (linux-only) powertop is an interactive command-line utility that gathers and displays various power-related measurements. related topics javascript, xpcom, developing mozilla, extensions, addons ...

Crash reporting
ol which allows users to limit searches on more precise information. finally, a set of mozilla employees have access to directly query the underlying data in either sql summary or using mapreduce on the storage cluster. ...
...e cluster. if you are interested in obtaining this advanced access, contact gabriele svelto. ...

PR_MemMap
maps a section of a file to memory. syntax #include <prio.h> void* pr_memmap( prfilemap *fmap, print64 offset, pruint32 len); parameters the function has the following parameters: fmap a pointer to the file-mapping object representing the file to be memory-mapped. offset the starting offset of the section of file to be mapped. the offset must be aligned to whole pages. len length of the section of the file to be mapped. returns the starting address of the memory region to which the section of file is mapped. returns null on error. ...
...representing the file to be memory-mapped. offset the starting offset of the section of file to be mapped. the offset must be aligned to whole pages. len length of the section of the file to be mapped. returns the starting address of the memory region to which the section of file is mapped. returns null on error. description pr_memmap maps a section of the file represented by the file mapping fmap to memory. the section of the file starts at offset and has the length len. when the file-mapping memory region is no longer needed, it should be unmapped with a call to pr_memunmap. ...

NSS 3.12.4 release notes
ression expression matching rules: * matches anything ? matches one character \ will escape a special character $ matches the end of the string bracketed expressions: [abc] matches one occurence of a, b, or c. [^abc] matches any character except a, b, or c. to be matched between [ and ], these characters must be escaped: \ ] no other characters need be escaped between brackets. unnecessary escaping is permitted. [a-z] matches any character between a and z, inclusive. the two range-definition characters must be alphanumeric ascii. if one is upper case and the other is lower case, then the ascii non-alphanumeric characters between z and a will also be in range. [^a-z] matches any character except those between a and z, inclusive. these forms cannot be combined, e.g [a-gp-z] does not work. exc...
...ns: (foo|bar) will match either the expression foo, or the expression bar. at least one '|' separator is required. more are permitted. expressions inside unions may not include unions or exclusions. inside a union, to be matched and not treated as a special character, these characters must be escaped: \ ( | ) [ ~ except when they occur inside a bracketed expression, where only \ and ] require escaping. new functions in the nss shared library: pk11_isinternalkeyslot (see pk11pub.h) secmod_opennewslot (see pk11pub.h) new error codes (see secerr.h): sec_error_bad_info_access_method sec_error_crl_import_failed new oids (see secoidt.h) sec_oid_x509_any_policy the nssckbi pkcs #11 module's version changed to 1.75. obsolete code for win16 has been removed. support for openvms has been...

NSS API Guidelines
not change in future release it is necessary for the callers of the api to know the size of these structures, as they may allocate new ones and pass them down. memory allocation with arenas this section discusses memory allocation using arenas. nss code uses arenas, and this section explains some of the improvements we are making. nss makes use of traditional memory allocation functions, wrapping nspr's pr_alloc in a util function called port_alloc. though nss makes further use of an nspr memory-allocation facility which uses 'arenas' and 'arenapools'. this was added via javascript; a fast, lightweight, non-thread-safe (though 'free-threaded') implementation. experience shows that users of the security library expect arenas to be threadsafe, so we added locking, and other useful changes.
...ines to make them more manageable: all callback operating search functions should be in the low level of the api, if exposed at all. developers dealing with ssl and pkcs #7 layers should not have to see any of these functions. these functions should have the form layer_traversestorageobjectorlist(). list and array returning functions should be available at the higher layers of the api, most wrapping layer_traverse() functions. they should have the form layer_lookupdatatype{list|array}[bydatatype](). accesssor functions accessor functions should take the following formats: layer_datatypegetelement() -- get a specific element of a data structure. layer_datatypesetelement() -- set a specific element of a data structure. layer_datatypeextractdatatype() -- get a pointer to the second ...

Enc Dec MAC Output Public Key as CSR
(-0x2000) #define port_errortostring(err) pr_errortostring((err), pr_language_i_default) #endif #endif /* * print usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -c -d [-z ] " "[-p | -f ] -s -r -i -o \n\n", progname); fprintf(stderr, "%-20s specify 'g' for generating rsa keypair for wrapping\n\n", "g"); fprintf(stderr, "%-20s specify 'e' for encrypt operation\n\n", "e"); fprintf(stderr, "%-20s specify 'd' for decrypt operation\n\n", "d"); fprintf(stderr, "%-20s specify db directory path\n\n", "-d "); fprintf(stderr, "%-20s specify db password [optional]\n\n", "-p "); fprintf(stderr, "%-20s speci...
.../ mackey = generatesymkey(slot, ckm_generic_secret_key_gen, 160/8, &mackeyid, pwdata); if (mackey == null) { pr_fprintf(pr_stderr, "generatesymkey for macing returned null.\n"); rv = secfailure; goto cleanup; } /* wrap encrypt key */ rv = wrapkey(enckey, pubkey, &wrappedenckey); if (rv != secsuccess) { pr_fprintf(pr_stderr, "error while wrapping encrypt key\n"); goto cleanup; } /* wrap mac key */ rv = wrapkey(mackey, pubkey, &wrappedmackey); if (rv != secsuccess) { pr_fprintf(pr_stderr, "error while wrapping mac key\n"); goto cleanup; } if (noisefilename) { rv = seedfromnoisefile(noisefilename); if (rv != secsuccess) { port_seterror(pr_end_of_file_error); ...

FC_WrapKey
hkey [in] number of attributes in the public key template. pwrappedkey [out] pointer to the location to receive the wrapped key or null. puswrappedkeylen [in, out] pointer to length of wrapped key buffer. description fc_wrapkey wraps (encrypts) a key. ...
...hkey [in] number of attributes in the public key template. pwrappedkey [out] pointer to the location to receive the wrapped key or null. puswrappedkeylen [in, out] pointer to length of wrapped key buffer. description fc_wrapkey wraps (encrypts) a key. ...

FIPS mode of operation
parallel function management functions fc_getfunctionstatus fc_cancelfunction ...
...c_verifyfinal fc_verifyrecoverinit fc_verifyrecover dual-function cryptographic functions fc_digestencryptupdate fc_decryptdigestupdate fc_signencryptupdate fc_decryptverifyupdate key management functions fc_generatekey: dsa domain parameters (pqg) fc_generatekeypair: dsa, rsa, and ecdsa. performs pair-wise consistency test. fc_wrapkey: rsa key wrapping fc_unwrapkey: rsa key wrapping fc_derivekey: diffie-hellman, ec diffie-hellman random number generation functions fc_seedrandom fc_generaterandom: performs continuous random number generator test. parallel function management functions fc_getfunctionstatus fc_cancelfunction ...

NSS tools : certutil
d in rfc 5280. --extsia add the subject information access extension to the certificate. x.509 certificate extensions are described in rfc 5280. --extcp add the certificate policies extension to the certificate. x.509 certificate extensions are described in rfc 5280. --extpm add the policy mappings extension to the certificate. x.509 certificate extensions are described in rfc 5280. --extpc add the policy constraints extension to the certificate. x.509 certificate extensions are described in rfc 5280. --extia add the inhibit any policy access extension to the certificate. x.509 certificate extensions are described ...
...ons of these legacy databases are: * cert8.db for certificates * key3.db for keys * secmod.db for pkcs #11 module information berkeleydb has performance limitations, though, which prevent it from being easily used by multiple applications simultaneously. nss has some flexibility that allows applications to use their own, independent database engine while keeping a shared database and working around the access issues. still, nss requires more flexibility to provide a truly shared security database. in 2009, nss introduced a new set of databases that are sqlite databases rather than berkleydb. these new databases provide more accessibility and performance: * cert9.db for certificates * key4.db for keys * pkcs11.txt, ...

sslerr.html
cause the pkcs#11 token is not logged in." sec_error_ocsp_responder_cert_invalid -8036 "the configured ocsp responder's certificate is invalid." sec_error_ocsp_bad_signature -8035 "ocsp response has an invalid signature." sec_error_out_of_search_limits -8034 "certification validation search is out of search limits." sec_error_invalid_policy_mapping -8033 "policy mapping contains any-policy." sec_error_policy_validation_failed -8032 "certificate chain fails policy validation." sec_error_unknown_aia_location_type -8031 "unknown location type in certificate aia extension." sec_error_bad_http_response -8030 "server returned a bad http response." sec_error_bad_ldap_response -8029 ...
...odule returned ckr_device_error, indicating that a problem has occurred with the token or slot." sec_error_bad_info_access_method -8022 "unknown information access method in certificate extension." sec_error_crl_import_failed -8021 "error attempting to import a crl." sec_error_unknown_pkcs11_error -8018 "unknown pkcs #11 error." (unknown error value mapping) ...

certutil
certificate extensions are described in rfc 5280. --extsia add the subject information access extension to the certificate. x.509 certificate extensions are described in rfc 5280. --extcp add the certificate policies extension to the certificate. x.509 certificate extensions are described in rfc 5280. --extpm add the policy mappings extension to the certificate. x.509 certificate extensions are described in rfc 5280. --extpc add the policy constraints extension to the certificate. x.509 certificate extensions are described in rfc 5280. --extia add the inhibit any policy access extension to the certificate. x.509 certificate extensions are described in rfc 5280...
...ast versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o secmod.db for pkcs #11 module information berkeleydb has performance limitations, though, which prevent it from being easily used by multiple applications simultaneously. nss has some flexibility that allows applications to use their own, independent database engine while keeping a shared database and working around the access issues. still, nss requires more flexibility to provide a truly shared security database. in 2009, nss introduced a new set of databases that are sqlite databases rather than berkleydb. these new databases provide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which ...

Network Security Services
introduction to network security services provides an overview of the nss libraries and what you need to know to use them. nss ssl public functions summarizes the ssl apis exported by the nss shared libraries. nss ssl reference api used to invoke ssl operations. nss api guidelines explains how the libraries and code are organized, and guidelines for developing code (naming conventions, error handling, thread safety, etc.) nss technical notes links to nss technical notes, which provide latest information about new nss features and supplementary documentation for advanced topics in programming with nss. tools, testing, and other technical details build instructions for nss describe how to check out and build nss releas...
...ss features and supplementary documentation for advanced topics in programming with nss. tools, testing, and other technical details build instructions for nss describe how to check out and build nss releases. nss developer tutorial how to make changes in nss. coding style, maintaining abi compatibility. nss tools tools for developing, debugging, and managing applications that use nss. sample code demonstrates how nss can be used for cryptographic operations, certificate handling, ssl, etc. third-party code a list of third-party code included in the nss library. nss 3.2 test suite archived version. describes how to run the standard nss tests. nss performance reports archived version. lin...

Statistics API
overview each time a garbage collection occurs, spidermonkey keeps track of how long each phase of the collection took, along with some related data. there are several ways to get access to this data: the environment variable moz_gctimer controls text dumping of gc stats. moz_gctimer may be none, stderr, stdout, or a filename. if a filename is given, data is appended to that file. when logging to a file is used in combination with multi-process firefox (e10s) it is necessary to set security.sandbox.content.level = 0, otherwise the content process will crash. the browser preference javascript.options.mem.log controls dumping of human-readable gc stats messages to the developer console. the browser preference javascript.options.mem.notify controls emission of json encoded gc stat...
...cated: integer (mb) - size of the javascript heap in mib at the start of the gc. slices: array of objects - a list of objects describing each slice in detail. times: object - a map from phase names to the total time taken by each phase: the sum of each field of the map from the slices. the last two fields require a bit of elaboration. gc work can be divided into phases, such as marking or sweeping. the division into phases is hierarchical, so a phase can be split into subphases. for example, the sweep phase includes the time for the sweep_atoms, sweep_tables, sweep_compartments phases and so on. the times object gives how much time was spent in each phase of the gc, in milliseconds. additionally, an incremental gc is divided into a series of slices (the division into slices is completely ...

Garbage collection
field is overwritten, the jsobject pointers could be 'lost', so a write barrier must be invoked to mark them. js::nativeobject::privatewritebarrierpre takes care of this by invoking the jsobject's class trace hook before the private field is set. another detail is that write barriers can be skipped when initializing fields of newly allocated objects, because no pointer is being overwritten. sweeping todo generational gc todo gc statistics api you can access the light statistics the gc keeps at runtime through the gc statistics api. source files gc/gc.{h,cpp} defines gc internal api functions, including entry points to trigger gc. gc/barrier[-inl].h implements incremental and generational write barriers. gc/cell.h defines cell and tenuredcell. gc/heap.h defines chunk, chunkinfo, ...
...l].h implements incremental and generational write barriers. gc/cell.h defines cell and tenuredcell. gc/heap.h defines chunk, chunkinfo, chunkbitmap, arena, arenaheader, cell, and freespan structures that define the heart of the gc heap's structures. gc/marking.{h,cpp} defines all marking functions for the various garbage-collected things. gc/memory.{h,cpp} contains a few functions for mapping and unmapping pages, along with platform-specific implementations. the map/unmap functions are used by gc.cpp to allocate and release chunks. there are also functions to commit or decommit memory, i.e., tell the os that certain pages are not being used and can be thrown away instead of paged to disk. gc/root.h defines classes for noting variables as gc roots. gc/statistics.{h,cpp} defines str...

JSAPI User Guide
, and isundefined(). if a js::value contains a jsobject, double, or jsstring, you can cast it to its underlying data type using the toobject(), todouble(), and tostring() member functions, respectively. this is useful in some cases where your application or a jsapi function requires a variable or argument of a specific data type, rather than a js::value. similarly, you can create a js::value wrapping a jsobject, double, or jsstring pointer to a js::value using js::objectvalue(jsobject&), js::doublevalue(double), or js::stringvalue(jsstring*). garbage collection as it runs, javascript code implicitly allocates memory for objects, strings, variables, and so on. garbage collection is the process by which the javascript engine detects when those pieces of memory are no longer reachable—that ...
...portant consequences for jsapi applications. first, the application must be very careful to ensure that any values it needs are gc-reachable. the garbage collector is rather eager about its job. any object you leave lying around will be destroyed if you don't tell the jsapi you're still using it. second, the application should take steps to reduce the performance impact of garbage collection. keeping objects alive if your jsapi application crashes, it is likely due to a gc-related error. the application must ensure that the garbage collector can reach all the objects, numbers, and strings that are still being used. otherwise, the gc will free the memory occupied by those values, leading to a probable crash the next time your program tries to use them. there are many ways to ensure that a va...

JS_FileEscapedString
if quote is not 0, it must be a single or double quote character that will quote the output. ...
...if quote is not 0, it must be a single or double quote character that will quote the output. if successful, js_fileescapedstring returns true, otherwise false. ...

JS_PutEscapedString
syntax size_t js_putescapedstring(jscontext *cx, char *buffer, size_t size, jsstring *str, char quote); size_t js_putescapedflatstring(char *buffer, size_t size, jsflatstring *str, char quote); name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. buffer char * a pointer to char buffer to write into. size size_t the size of buffer in bytes. ...
... be in a request on this jscontext. buffer char * a pointer to char buffer to write into. size size_t the size of buffer in bytes. str jsstring * or jsflatstring * a string to write into the file. quote char one of 0, single quote, and double quote. description js_putescapedstring and js_putescapedstring write str into buffer escaping any non-printable or non-ascii character using \escapes for js string literals. guarantees that a nul is at the end of the buffer unless size is 0. returns the length of the written output, not including the nul. thus, a return value of size or more means that the output was truncated. if buffer is null, just returns the length of the output. if quote is not 0, it must be a single or double quote...

Browser security
these articles provide important guides and references to ensuring the code you write is secure, including both design recommendations and testing guidelines. a web pki x509 certificate primerx.509 (in this document referred as x509) is an itu standard to describe certificates. ...
... ...

Animated PNG graphics
cillary chunk as defined in the png specification. it must appear before the first 'idat' chunk within a valid png stream. the 'actl' chunk contains: byte offset field name field type description 0 num_frames unsigned int the number of frames in the apng. 4 num_plays unsigned int the number of times to loop this apng. 0 indicates infinite looping. num_frames indicates the total number of frames in the animation. this must equal the number of 'fctl' chunks. 0 is not a valid value. 1 is a valid value for a single-frame apng. if this value does not equal the actual number of frames it should be treated as an error. num_plays indicates the number of times that this animation should play; if it is 0, the animation should play indefinit...
...frame data for this frame. each frame inherits every property specified by any critical or ancillary chunks before the first 'idat' in the file, except the width and height, which come from the 'fctl' chunk. if the png 'phys' chunk is present, the apng images and their x_offset and y_offset values must be scaled in the same way as the main image. conceptually, such scaling occurs while mapping the output buffer onto the canvas. revisions to this specification from 0.1 renamed chunks to 'anim' and 'fram' to comply with chunk naming conventions in the png spec. added a more detailed explanation of apng structure in section 2. added information for png interaction with other chunks in section 3.2. changed 'fram' chunk offsets and delay into signed integers. from 0.2 ...

Gecko Roles
sents a main window for an application. role_document represents a document window. a document window is always contained within an application window. role_pane represents a pane within a frame or document window. users can navigate between panes and within the contents of the current pane, but cannot navigate between items in different panes. thus, panes represent a level of grouping lower than frame windows or documents, but above individual controls. role_chart represents a graphical image used to represent data. role_dialog represents a dialog box or message box. role_border represents a window border. role_grouping logically groups other objects. role_separator used to visually divide a space into two regions, such as a separator me...
...e used to represent data. role_dialog represents a dialog box or message box. role_border represents a window border. role_grouping logically groups other objects. role_separator used to visually divide a space into two regions, such as a separator menu item or a bar that divides split panes within a window. role_toolbar represents a toolbar, which is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features. role_statusbar represents a status bar, which is an area at the bottom of a window that displays information about the current operation, state of the application, or selected object. the status bar has multiple fields, which display different kinds of information. role_table repres...

XUL Accessibility
lectcontrolitemelement interface then it is used label property if the element doesn't implement nsidomxulselectcontrolelement then label attribute is used if neighbour of the element has label element pointing to this element by the control attribute, if the label element is found then use value attribute or its content. ...
...bedby attribute <description id="descr1">label1</description> <description id="descr2">label2</description> <textbox aria-describedby="descr1 descr2" /> if neighbour of the element has description element pointing to this element by the control attribute, if the description element is found then use its content. ...

Mozilla internal string guide
another common incorrect pattern is to use nsautostring/nsautocstring for member variables. as described in local variables, these classes have a built in buffer that make them very large. this means that if you include them in a class, they bloat the class by 64 bytes (nsautocstring) or 128 bytes (nsautostring). an example: class foo { ... // bloats 'foo' by 128 bytes! ...
... nsautocstring class member variables nsstring nscstring method parameter types nsastring nsacstring use abstract classes for parameters. use const nsastring& for "in" parameters and nsastring& for "out" parameters. retrieving "out" string/wstrings nsstring nscstring use getter_copies(). similar to nsstring / nscstring. wrapping character buffers nsdependentstring nsdependentcstring wrap const char* / const char16_t* buffers. literal strings nsliteralstring nsliteralcstring similar to nsdependent[c]string, but pre-calculates length at build time. appendix b - nsastring reference read-only methods. length() isempty() isvoid() - xpconnect will convert void nsastrings to javascript ...

XPCOM Stream Guide
aces.nsiinputstreampump); pump.init(stream, -1, -1, 0, 0, true); pump.asyncread(listener, context); nsipipe code examples file input and output for file input, see code snippets: reading from a file. for file output, see code snippets: writing to a file. ...
...illa.org/libjar/zip-reader;1"] .createinstance(components.interfaces.nsizipreader); zipreader.open(file); var stream = zipreader.getinputstream("/path/to/zipped/file"); // process the stream // when we don't need the zipreader anymore zipreader.close(); for writing from an input stream to a zip archive, see the nsizipwriter interface: // file is an nsifile object mapping to a zip archive var zipwriter = components.classes["@mozilla.org/zipwriter;1"] .createinstance(components.interfaces.nsizipwriter); zipwriter.open(file, ioflags); // stream is the output stream zipwriter.addentrystream("/path/to/zipped/file", modtime, compression, stream, queueforlater); // if queued for later operations, and all operations are queued zipwriter.proce...

XPConnect wrappers
ped, you won't be able to peek down inside them from the console. basic xpconnect objects xpcwrappednative these objects are created when any natively implemented xpcom object (that is, any object implemented in c++) needs to be reflected into javascript. this includes all dom objects (including window) and chrome elements that are reflected into javascript. this wrapper is responsible for mapping calls from javascript into c++. this means that when you say window.focus(), you're calling into xpcwrappednative code. if you call 'tostring()' and get "[xpconnect wrapped nsifoo]" then the reference is to a xpcwrappednative object with interface nsifoo. they are implicitly created by xpconnect and you should not have to worry about how that happens. there are several types of wrapped natives,...
...mplemented some component with an interface nsifoo and you pass your javascript object into a c++ function taking an nsifoo, an xpcwrappedjs is created around your object. c++ calls are routed through xpcwrappedjs code into your javascript implementation. these wrappers are created by xpconnect, so you should not have to worry about how to construct them or whether to construct them. double wrapping. there is one case where an xpcwrappednative wraps another wrapper object. this case is where a js object was passed in via some idl-declared interface, creating an xpcwrappedjs, and is now being returned to javascript via some other interface. in order to preserve api compatibility, an xpcwrappednative is created around the xpcwrappedjs. security wrappers exposed to chrome to learn about secur...

imgIContainer
nates in a decoder (that is, from a decoder observer event). flag_decode_no_premultiply_alpha: do not premultiply alpha if it is not already premultiplied in the image data. flag_decode_no_colorspace_conversion: do not do any colorspace conversion; ignore any embedded profiles, and do not convert to any particular destination space. flag_clamp: extend the image to the fill area by clamping image sample coordinates instead of by tiling. this only affects 'draw()'. flag_sync_decode 0x1 flag_decode_no_premultiply_alpha 0x2 flag_decode_no_colorspace_conversion 0x4 flag_clamp 0x8 frame_first 0 constants for specifying various "special" frames. frame_first: the first frame frame_current: the current ...
... pruint32 aflags ); parameters acontext the thebes context to draw the image to. afilter the filter to be used if we're scaling the image. auserspacetoimagespace the transformation from user space (for example, appunits) to image space. afill the area in the context to draw pixels to. when aflags includes flag_clamp, the image will be extended to this area by clamping image sample coordinates. otherwise, the image will be automatically tiled as necessary. asubimage the area of the image, in pixels, that we are allowed to sample from. aviewportsize the size (in css pixels) of the viewport that would be available for the full image to occupy, if we were drawing the full image. (note that we might not actually be drawing the full image -- we might...

nsIClassInfo
se flags. no implementor of this interface should ever return flags with this bit set. eager_classinfo 1 << 5 this flag is designed for use with nsgenericfactory and can be set in nsmodulecomponentinfo::mflags. it has no meaning when returned from the flags attribute of a nsiclassinfo implementation. obsolete since gecko 2.0 methods gethelperforlanguage() get a language mapping specific helper object that may assist in using objects of this class in a specific lanaguage. for example, if asked for the helper for nsiprogramminglanguage::javascript this might return an object that can be nsisupports.queryinterface()'d into the nsixpcscriptable interface to assist xpconnect in supplying javascript specific behavior to callers of the instance object. nsisupports gethelperf...
...ample, if asked for the helper for nsiprogramminglanguage::javascript this might return an object that can be nsisupports.queryinterface()'d into the nsixpcscriptable interface to assist xpconnect in supplying javascript specific behavior to callers of the instance object. nsisupports gethelperforlanguage( in pruint32 language ); parameters language this parameter selects the language mapping specific helper object to be returned. nsiprogramminglanguage defines language identifiers that may be passed for this parameter. return value should return null if no helper available for given language. getinterfaces() this method returns an ordered list of interfaces iids that instances of the class promise to implement. note that nsisupports is an implicit member of the implemented set ...

nsIMsgHeaderParser
inserts missing commas, parses and reformats it, and wraps long lines with newline-tab. string reformatheaderaddresses( in string line ); parameters line the header line to parse. return value the reformatted header line. exceptions thrown missing exception missing description reformatunquotedaddresses() given a string, will make it safe to use by adding missing quote and escaping needed quote wstring reformatunquotedaddresses( in wstring line ); parameters line the header line to parse. return value safe addresses (?) exceptions thrown missing exception missing description native code only!removeduplicateaddresses returns a copy of addrs which may have had some addresses removed. addresses are removed if they are already in either addrs or other_addrs.
...ded. that argument is for passing in addresses that were already mentioned in other header fields.) addresses are considered to be the same if they contain the same mailbox part (case-insensitive.) real names and other comments are not compared. removealiasestome allows the address parser to use the preference which contains regular expressions which also mean 'me' for the purpose of stripping the user's email address(es) out of addrs string removeduplicateaddresses( in string addrs, in string other_addrs, in prbool removealiasestome ); parameters addrs the addresses to remove duplicates from. other_addrs other addresses that the duplicate removal process also checks for duplicates against. addresses in this list will not be added to the result. return value a strin...

nsINavHistoryContainerResultNode
toolkit/components/places/public/nsinavhistoryservice.idlscriptable a foundation for the interfaces that provide a description of a query result on the places service that describes a container (which is any kind of grouping, including bookmark folders). 1.0 66 introduced gecko 1.9 inherits from: nsinavhistoryresultnode last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsinavhistoryresultnode findnodebydetails(in autf8string auristring, in prtime atime, in long long aitemid, in boolean arecursive); nsinavhistoryresultnode getchild(in unsigned long aindex); unsigned long getchildindex(in nsinavhistoryresultnode anode); attributes attribute type description childcount unsigned long the number of child n...
...t's true for non-folder nodes. if this container is a remote container, this flag may be redefined by the remote container provider. read-only. containeropen boolean set this to true to allow descent into this container. when closed, attempting to call getchild() or access childcount results in an error. when you're done reading the container's children, set this to false. for host and day groupings, doing this has no performance cost since the children have already been computed. for queries and bookmark folders, however, being open means they must keep themselves up-to-date by listening for updates and re-querying as needed. dynamiccontainertype autf8string a string representing the dynamic container api service responsible for this container. accessing this throws an exception if the ...

nsISelection2
nt32 endoffset, in prbool allowadjacent, out pruint32 resultcount, [retval, array, size_is(resultcount)] out nsidomrange results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection. allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than merely overlapping it. resultcount returns the number of ranges that overlap (or touch) the input range. results returns the ranges that overlap (or touch) the input range. native code only!getrangesforintervalcomarray void getrangesforintervalcomarray( in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, in rangearray results ); ...
...ginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, in rangearray results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection. allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than merely overlapping it. results returns the ranges that overlap (or touch) the input range. scrollintoview() scrolls a region of the selection, so that it is visible in the scrolled view. void scrollintoview( in short aregion, in boolean aissynchronous, in short avpercent, in short ahpercent ); parameters aregion the region inside the selection to scroll into view (see selection region constants ...

nsITextInputProcessor
is causes throwing an excepction since it doesn't make sense. key_dont_dispatch_modifier_key_event 0x00000020 one of akeyflags. textinputprocessor manages modifier state with every modifier key events. in other words, when you need to specify modifier key state of dispatching keyboard events, you need to dispatch modifier key events before and after that. however, especially for keeping compatibility with legacy api, you may want to modify only the modifier state of a textinputprocessor instance. in this case, you can suppress textinputprocessor dispatches modifier key events with this flag. if this is specified for non-modifier key, it causes throwing an exception since it doesn't make sense. methods appendclausetopendingcomposition() appends a clause to the pending co...
...code value for a printable key from ascii character which is inputted with a far simpler modifier state. see "printable keys in standard position" section of keyboardevent.keycode for the strict rules of gecko. when you dispatch non-printable key events, preferred keycode value is computed from key value automatically if you don't initialize this value. but the computation doesn't emulate the mapping of native key event handling completely because it has some special cases depending on platform or selected keyboard layout. therefore, if you need to emulate pc keyboard on specific platform, you may need to specify this explicitly. location optional. it's not recommended to specify this explicitly since this value should be linked with code attribute value. the automatic computation can compu...

nsIWebBrowserPersist
gs_selection_only 1 output only the current selection as opposed to the whole document. encode_flags_formatted 2 for plain text output. convert html to plain text that looks like the html. implies wrap (except inside <pre>), since html wraps. html output: always do prettyprinting, ignoring existing formatting. encode_flags_raw 4 output without formatting or wrapping the content. this flag may be used to preserve the original formatting as much as possible. encode_flags_body_only 8 output only the body section, no html tags. encode_flags_preformatted 16 wrap even if when not doing formatted output (for example for text fields). encode_flags_wrap 32 wrap documents at the specified column. encode_flags_forma...
...if no linked uris should be saved. this may be a nsilocalfile object or an nsiuri object with a file scheme. aoutputcontenttype the desired mime type format to save the document and all sub-documents into or nsnull to use the default behavior. aencodingflags flags to pass to the encoder. awrapcolumn for text documents, indicates the desired width to wrap text at. parameter is ignored if wrapping is not specified by the encoding flags. exceptions thrown ns_error_invalid_arg one or more arguments was invalid. saveuri() as of firefox 26, this method should no longer be used from add-on code. please use downloads.createdownload() instead. as of firefox 36, a new parameter areferrerpolicy was added as the fourth argument, changing the number of parameters from 7 to 8 and shifting t...

nsIWinTaskbar
n astring aidentifier); attributes attribute type description available boolean returns true if the operating system supports windows 7 or later taskbar features; you can use this instead of in-place operating system version checking. read only. defaultgroupid astring the default application user model id the application registers with the system. this id is used by the taskbar for grouping windows and when associating pinned shortcuts with running instances and jump lists. read only. for xulrunner applications, the defaultgroupid attribute is configured using application.ini settings, and is of the format "vendor.application.version". for example, if the vendor is configured to "foobar systems", the application's name is "squashweb", and the application's version is 1.0, the de...
... an nsitaskbarprogress. gettaskbarwindowpreview() returns the taskbar preview for the window whose top level is identified by nsidocshell. nsitaskbarwindowpreview gettaskbarwindowpreview( in nsidocshell shell ); parameters shell an nsidocshell object to use to find the top-level window. return value an nsitaskbarwindowpreview object for the window's preview. setgroupidforwindow() set the grouping id for a window. ids should be unique to the application and window to insure conflicts with other pinned applications do no arise. void setgroupidforwindow( in nsidomwindow aparent, in astring aidentifier ); parameters aparent the parent nsidomwindow. aidentifier the new identifier for the window. see also nsitaskbarpreview nsitaskbarpreviewcontroller nsitaskbarprogress nsitaskbartabprev...

XPCOM reference
(i'm fully aware that this will be a great point of discussion and probably will end in tear...
...asier to use xpcom from c++ code.xpcom interface referencethis is a reference to the xpcom interfaces provided by the mozilla platform.xpcom interface reference by groupingthis page lists the current (as of dec. 01, 2010) list of mozilla interfaces as listed on the xpcom interface reference page where that page lists items by alphabetical sorting, this page attempts to group them by function. grouping and category names were made by somewhat arbitrary decision by the author. (i'm fully aware that this will be a great point of discussion and probably will end in tears, but since i'm the first person to apparently take a swing at this, i get first dibs.)xpcom primitivean xpcom primitive is an xpcom object that "boxes" a value of a primitive type. all xpcom primitives are scriptable, and they all...

Getting Started Guide
ctice it's very easy to forget to release at the appropriate moment. or to addref too many or too few times. how does nscomptr help? nscomptr manages addref, release, and other red-tape for you. an nscomptr looks and acts as much like a raw xpcom interface pointer as c allows, but it knows it owns the object it points to. this takes a little getting used to on your part, but ends up with less typing, clearer, safer code, and less leaks. for instance, here is a typical snippet of code (at its most compact) where you assign a xpcom interface pointer into a member variable, i.e., the body of a `setter' function, side-by-side using raw xpcom interface pointers and nscomptrs. comparison 1. setting a member variable. // raw xpcom interface pointers... // given: |nsifoo* mfooptr;|...
...ddref the new. this is appropriate when the thing you're assigning in hasn't yet been addrefed to account for the new reference. this is typically the case when you are assigning in a pointer that you didn't call a function to get, e.g., one that was passed in as a parameter, or that you pulled out of a structure. you can tell nscomptr it doesn't need to addref the new value on assignment by wrapping the new value in dont_addref. do this, for example, when you got the new value from a function which, like all good xpcom getters, already called addref on your behalf. you may not assign in a pointer to a different interface type; you must first query it to the right type (see, e.g., comparison 6 and the surrounding discussion). nscomptr never calls queryinterface implicitly, i.e., you must cal...

wrappedJSObject
m/my-component;1 contract. // constructor function helloworld() { }; helloworld.prototype = { hello: function() { return "hello world!"; }, queryinterface: function(aiid) { if (!aiid.equals(components.interfaces.nsisupports) && !aiid.equals(components.interfaces.nsihelloworld)) throw components.results.ns_error_no_interface; return this; } }; xpconnect wrapping now let's get a reference to our component. in this example we use getservice, but as long as we get the reference from xpcom, our component gets wrapped by xpconnect in the same way: var comp = components.classes["@myself.com/my-component;1"].getservice(); if we try to call the hello() method we defined in our component implementation, we get: > comp.hello(); typeerror on line 1: comp.hello...
...t. for example: function helloworld() { this.wrappedjsobject = this; }; now we can get the component directly: var comp = components.classes["@myself.com/my-component;1"] .getservice().wrappedjsobject; this is a real js object: > comp [object object] so we can access any property on it: > comp.hello(); hello world! this functionality can be used for quick prototyping, as well as to painlessly pass arbitrary js values to the component (which can be used for sharing complex js data in particular). ...

XUL Overlays
<menupopup id="menu_filepopup"> <menu id="file_menu"> <menuitem name="super stream player"/> </menu> </menupopup> </overlay> the result will be: ... <menu id="file-menu"> <menupopup id="menu_filepopup"> <menuitem name="new"/> <menuitem name="open"/> <menuitem name="save"/> <menuitem name="close"/> <menuitem name="super stream player"/> </menupopup> </menu> ... if you are developing a mozilla extension, note that the id namespace is shared by all the extensions. so, in order to avoid unpredicted behaviors you will probably benefit from using a unique prefix for the ids of the xul elements of your extension. for instance, you can use the name of your extension, or an abbreviation of it. loading overlays overlays can be loaded explicitly or dynamically. when you load an overla...
...erlay.xul). the layout engine loads any overlay files and then flows the resulting xul document, so problems associated with incremental insertion in menus, boxes, tables, and forms are avoided. any number of overlays can be loaded into a master document, and an overlay can also load other overlays. because an overlay is superimposed on the master document, there are no ambiguities relating to scoping of style sheets or scripts. style sheets and scripts loaded by the overlay simply apply to the entire master document. loading overlays dynamically the chrome registry makes it possible to load xul overlays dynamically -- or only when necessary. the chrome registry, which is a special rdf datasource into which user-specific information is persisted, or stored, contains information about the compo...

LDAP Support
mozilla thunderbird. it is not intended as an introduction to ldap and mozilla products. it assumes you are already familiar with configuring preferences for deployed builds in addition to setting up thunderbird to use an ldap directory. it should be noted that all of this information applies to both thunderbird and the seamonkey application suite. mail compose typedown in mail compose, when typing a partial mail address, a typedown window appears listing possible matches against address books and ldap directories. for large companies, there may be a large number of users in the directory with the same name. in such a scenario, it may be hard to tell which person you really want to send the message to. in thunderbird, the type down window can be customized to show arbitrary ldap fields. thi...
...the the address book. some notes about the relationship: there is a many to one relationship between ldap attributes and its address book counterpart. there is a one to one relationship between a address book attribute and its ldap counterpart. if there are multiple entries for a address book attribute, the first takes precedence. these relationships ensure: generality is maintained when mapping from ldap attributes to address book. consistent round tripping when editing address book attributes which are stored on an ldap server. address book attribute ldap attribute firstname givenname lastname sn lastname surname displayname cn displayname commonname displayname displayname nickname xmozill...

Thunderbird extensions
ormation on the codebase. ...
...ommunity / communications thunderbird specific : add-ons section on developer.thunderbird.net thunderbird communication channels add-on developers forum/mailing list #maildev irc channel more general : mozillazine extension development forum general developer channels related topics xul, javascript, xpcom, themes, developing mozilla categori ...

WebIDL bindings
errorresult& rv); }; c++ reflections of webidl types the exact c++ representation for webidl types can depend on the precise way that they're being used (e.g., return values, arguments, and sequence or dictionary members might all have different representations). unless stated otherwise, a type only has one representation. also, unless stated otherwise, nullable types are represented by wrapping nullable<> around the base type. in all cases, optional arguments which do not have a default value are represented by wrapping const optional<>& around the representation of the argument type. if the argument type is a c++ reference, it will also become a nonnull<> around the actual type of the object in the process. optional arguments which do have a default value are just represented by the a...
...ethrowexceptions); if (rv.failed()) { // the exception is now stored on rv. this code must report // it usefully; otherwise it will assert. } } external interfaces external interfaces are represented in c++ as objects that xpconnect knows how to unwrap to. this can mean xpcom interfaces (whether declared in xpidl or not) or it can mean some type that there's a castable native unwrapping function for. the c++ type to be used should be the nativetype listed for the external interface in the bindings.conf file. the exact representation depends on how the type is being used. arguments become nsifoo*. return values can be already_addrefed<nsifoo> or nsifoo* as desired. the pointer form is preferred because it results in faster code, but it should only be used if the return value ...

Debugging service workers - Firefox Developer Tools
r .register('sw.js') .then(function() { console.log('service worker registered'); }); } if you get the path wrong, for example, you'll get an error in the web console giving you a hint as to what's wrong, which depends on what exactly is wrong with the code. if this is not enough to help you figure out the problem, you could also try going to the javascript debugger and stepping through your code to pinpoint exactly where it is going wrong. debugging your service worker in any case, when the service worker is successfully registered, you'll see information about it displayed in the application > service workers view (along with any other service workers registered on the same domain): this gives you a variety of information about your service worker: the url that...
... debug important: the debug button is currently enabled only in firefox nightly. when your service worker is running, a debug button is available next to the source information (it is disabled when the service worker is stopped). when pressed, this takes you straight to the javascript debugger view of your service worker code, and you can use the full power of the debugger to debug it — stepping through code, etc. testing a service worker cache if you are using your service worker to store your site assets in cache storage (using the cache api), which is essential for creating offline apps, it can be annoying to test the cache. when you fill up the cache with assets, but then want to alter the behavior slightly, you previously had to manually write code to empty the cache, and then f...

Set a breakpoint - Firefox Developer Tools
g up the context menu over a line number. there are a few options available here: add breakpoint: add a standard unconditional breakpoint at this line number (see below). add condition: add a condition and create a conditional breakpoint (see below). add log: add a log point, which logs a value to your console rather than pausing execution as a breakpoint does. continue to here: when stepping through code, this option tells the debugging to continue execution through to this point. unconditional breakpoints an unconditional breakpoint is one where the code will always pause execution when it is reached. you can set an unconditional breakpoint using the context menu (see above), or by: clicking on the line number for the line you want to break at in the source pane. highlighting...
...hich allows you to turn it into a conditional breakpoint. if the breakpoint is a conditional breakpoint, you'll get an option edit condition, which allows you to change the previously set condition. inline variable preview new in firefox 71, the source pane now gives you an inline preview of the variables on each line of code you've stepped through: this is a very useful timesaver when stepping through your code. previously you’d have to scroll through the scopes panel to find variable values, or hover over a variable in the source pane. now when execution pauses, you can view relevant variables immediately. note: there is also a new option in the context menu for the actual code in the source pane — hide inline preview/show inline preview — which allows you to turn the inline v...

Use a source map - Firefox Developer Tools
ap is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger. to enable the debugger to work with a source map, you must: generate the source map include a comment in the transformed file, that points to the source map. ...
...yntax is like this: //# sourcemappingurl=http://example.com/path/to/your/sourcemap.map in the video above we load https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html. this page loads a source called "main.js" that was originally written in coffeescript and compiled to javascript. the compiled source contains a comment like this, that points to a source map: //# sourcemappingurl=main.js.map in the debugger's source list pane, the original coffeescript source now appears as "main.coffee", and we can debug it just like any other source. ...

UI Tour - Firefox Developer Tools
d in the source list pane using the extension's name. there are several context menu options available for individual files and folders or groups; typically viewed by right-clicking on the item. for files, the following context menu options are available: copy source uri copies the full identifier of the file to the clipboard. ignore source causes the debugger to skip the file when "stepping into" functions; this can be helpful for avoiding stepping into libraries used by your code. when a file is ignored, it has a small eye icon next to it in place of its regular icon. download file opens a file dialog so you can save the file locally. for folders and groups, the following context menu options are available: collapse all collapses all subfolders of the item. expand all expa...
...k step over (f10) after changing the selected line in the source pane, the debugger executes until reaching the line following the newly-selected line (disregarding whatever line the debugger originally stopped at). right-clicking in the call stack pane opens a context menu with the following items: restart frame restarts execution at the beginning of the current frame. enable framework grouping collects items belonging to a framework into a collapsible group (for example, jquery in the screenshot above). when grouping is enabled, the menu option changes to disable framework grouping. copy source uri copies the full identifier of the source file to the clipboard. ignore source causes the debugger to skip the file when "stepping into" functions. any stack frames from the ignored source ...

Edit Shape Paths in CSS - Firefox Developer Tools
fferent editor. note that the shape path editor does not persist between page reloads — if you reload your page you will need to select the element again. understanding the lines drawn by the editor once you have selected a shape on your page, the shape path editor will draw lines to help you understand the path that is being created. a solid line shows the outline of the shape that is wrapping the text. this is your shape. if the shape is clipped by the margin box then the margin box will make up part of this line. a dashed line demonstrates the outline of the shape which extends past the margin box reference; this is the area that will be clipped by the margin box. to understand the margin box, and other boxes used by css shapes see our guide to shapes from box values. editing ba...
...ou will get a new point to adjust. double click on an existing point and it will be removed. remember that a polygon needs at least three points. moving and scaling shapes there is extra functionality available on the shape highlight — if you ctrl/cmd + click on the shapes icon for your shape the highlight will change, instead providing the ability to scale and/or move it. once again, clipping will occur if you exceed the bounds of the margin box. if your shape is a polygon, you also get the ability to rotate it around an axis. browser support the shape path editor currently works for shapes generated via clip-path; it will also work for shapes generated via shape-outside as of firefox 62. ...

Firefox Developer Tools
nd debugging modern web apps (also known as progressive web apps). this includes inspection of service workers and web app manifests. note: the collective term for the ui inside which the devtools all live is the toolbox. more tools these developer tools are also built into firefox. unlike the "core tools" above, you might not use them every day. memory figure out which objects are keeping memory in use. storage inspector inspect cookies, local storage, indexeddb, and session storage present in a page. dom property viewer inspect the page's dom properties, functions, etc. eyedropper select a color from the page. style editor view and edit css styles for the current page. taking screenshots take a screenshot of the entire page or of a single element. measure a portion of ...
... ...

Animation.playbackRate - Web APIs
alue takes a number that can be 0, negative, or positive. negative values reverse the animation. the value is a scaling factor, so for example a value of 2 would double the playback rate. setting an animation’s playbackrate to 0 effectively pauses the animation (however, its playstate does not necessarily become paused). examples in the growing/shrinking alice game example, clicking or tapping the bottle causes alice's growing animation (alicechange) to reverse, causing her to shrink: var shrinkalice = function() { alicechange.playbackrate = -1; alicechange.play(); } // on tap or click, alice will shrink. bottle.addeventlistener("mousedown", shrinkalice, false); bottle.addeventlistener("touchstart", shrinkalice, false); contrariwise, clicking on the cake causes her to "grow," p...
... working dra...

CSSMediaRule - Web APIs
the cssmediarule interface represents a single css @media rule. it implements the cssconditionrule interface, and therefore the cssgroupingrule and the cssrule interface with a type value of 4 (cssrule.media_rule). syntax the syntax is described using the webidl format. interface cssmediarule : cssconditionrule { readonly attribute medialist media; } properties as a cssconditionrule, and therefore both a cssgroupingrule and a cssrule, cssmediarule also implements the properties of these interfaces. ...
...it has no specific methods. specifications specification status comment css conditional rules module level 3the definition of 'cssmediarule' in that specification. ...

CanvasRenderingContext2D - Web APIs
rent fill style. canvasrenderingcontext2d.stroke() strokes the current sub-paths with the current stroke style. canvasrenderingcontext2d.drawfocusifneeded() if a given element is focused, this method draws a focus ring around the current path. canvasrenderingcontext2d.scrollpathintoview() scrolls the current path or a given path into the view. canvasrenderingcontext2d.clip() creates a clipping path from the current sub-paths. everything drawn after clip() is called appears inside the clipping path only. for an example, see clipping paths in the canvas tutorial. canvasrenderingcontext2d.ispointinpath() reports whether or not the specified point is contained in the current path. canvasrenderingcontext2d.ispointinstroke() reports whether or not the specified point is inside the area c...
...was introduced in gecko 1.9 and is removed starting with gecko 7.0. canvasrenderingcontext2d.moztextalongpath() this method was introduced in gecko 1.9 and is removed starting with gecko 7.0. internal apis (chrome-context only) canvasrenderingcontext2d.drawwindow() renders a region of a window into the canvas. the contents of the window's viewport are rendered, ignoring viewport clipping and scrolling. canvasrenderingcontext2d.demote() this causes a context that is currently using a hardware-accelerated backend to fallback to a software one. all state should be preserved. internet explorer canvasrenderingcontext2d.msfillrule the fill rule to use. this must be one of evenodd or nonzero (default). specifications specification status comment ht...

Document.querySelector() - Web APIs
selectors a domstring containing one or more selectors to match. this string must be a valid css selector string; if it isn't, a syntax_err exception is thrown. see locating dom elements using selectors for more about selectors and how to manage them. note: characters that are not part of standard css syntax must be escaped using a backslash character. since javascript also uses backslash escaping, be especially careful when writing string literals using these characters. see escaping special characters for more information. return value an htmlelement object representing the first element in the document that matches the specified set of css selectors, or null is returned if there are no matches. if you need a list of all elements matching the specified selectors, you should use query...
...ching the specified selectors, you should use queryselectorall() instead. exceptions syntax_err the syntax of the specified selectors is invalid. usage notes if the specified selector matches an id that is incorrectly used more than once in the document, the first element with that id is returned. css pseudo-elements will never return any elements, as specified in the selectors api. escaping special characters to match against an id or selectors that do not follow standard css syntax (by using a colon or space inappropriately, for example), you must escape the character with a backslash ("\"). as the backslash is also an escape character in javascript, if you are entering a literal string, you must escape it twice (once for the javascript string, and another time for queryselector()...

Document.querySelectorAll() - Web APIs
valid css selector string; if it's not, a syntaxerror exception is thrown. see locating dom elements using selectors for more information about using selectors to identify elements. multiple selectors may be specified by separating them using commas. note: characters which are not part of standard css syntax must be escaped using a backslash character. since javascript also uses backslash escaping, special care must be taken when writing string literals using these characters. see escaping special characters for more information. return value a non-live nodelist containing one element object for each element that matches at least one of the specified selectors or an empty nodelist in case of no matches. note: if the specified selectors include a css pseudo-element, the returned list i...
...("#userlist"); var matches = container.queryselectorall("li[data-active='1']"); accessing the matches once the nodelist of matching elements is returned, you can examine it just like any array. if the array is empty (that is, its length property is 0), then no matches were found. otherwise, you can simply use standard array notation to access the contents of the list. you can use any common looping statement, such as: var highlighteditems = userlist.queryselectorall(".highlighted"); highlighteditems.foreach(function(useritem) { deleteuser(useritem); }); user notes queryselectorall() behaves differently than most common javascript dom libraries, which might lead to unexpected results. html consider this html, with its three nested <div> blocks. <div class="outer"> <div class="sele...

Element.querySelectorAll() - Web APIs
valid css selector string; if it's not, a syntaxerror exception is thrown. see locating dom elements using selectors for more information about using selectors to identify elements. multiple selectors may be specified by separating them using commas. note: characters which are not part of standard css syntax must be escaped using a backslash character. since javascript also uses backspace escaping, special care must be taken when writing string literals using these characters. see escaping special characters for more information. return value a non-live nodelist containing one element object for each descendant node that matches at least one of the specified selectors. note: if the specified selectors include a css pseudo-element, the returned list is always empty. exceptions syn...
...("#userlist"); var matches = container.queryselectorall("li[data-active='1']"); accessing the matches once the nodelist of matching elements is returned, you can examine it just like any array. if the array is empty (that is, its length property is 0), then no matches were found. otherwise, you can simply use standard array notation to access the contents of the list. you can use any common looping statement, such as: var highlighteditems = userlist.queryselectorall(".highlighted"); highlighteditems.foreach(function(useritem) { deleteuser(useritem); }); note: nodelist is not a genuine array, that is to say it doesn't have the array methods like slice, some, map etc. to convert it into an array, try array.from(nodelist). user notes queryselectorall() behaves differently than most co...

Using the Gamepad API - Web APIs
as follows: id: a string containing some information about the controller. this is not strictly specified, but in firefox it will contain three pieces of information separated by dashes (-): two 4-digit hexadecimal strings containing the usb vendor and product id of the controller, and the name of the controller as provided by the driver. ...
...vided by the driver. this information is intended to allow you to find a mapping for the controls on the device as well as display useful feedback to the user. index: an integer that is unique for each gamepad currently connected to the system. this can be used to distinguish multiple controllers. note that disconnecting a device and then connecting a new device may reuse the previous index. mapping: a string indicating whether the browser has remapped the controls on the device to a known layout. currently there is only one supported known layout — the standard gamepad. if the browser is able to map controls on the device to that layout the mapping property will be set to the string standard. connected: a boolean indicating whether the gamepad is still connected to the system. if this is...

GlobalEventHandlers.onkeypress - Web APIs
ion. html <label>enter numbers only: <input> </label> javascript function numbersonly(event) { return event.charcode === 0 || /\d/.test(string.fromcharcode(event.charcode)); } const input = document.queryselector('input'); input.onkeypress = numbersonly; // prevent pasting (since pasted content might include non-number characters) input.onpaste = event => false; result capture the typing of a hidden word the following javascript function will do something after the user types the word "exit" in any point of a page. /* type the word "exit" in any point of your page... */ (function () { const ssecret = /* choose your hidden word...: */ "exit"; let noffset = 0; document.onkeypress = function(opevt) { let oevent = opevt || window.event, nchr = oevent.charcode, ...
... specifications specification status comment html living standardthe definition of 'onkeypress' in that specification. living standard ...

GlobalEventHandlers.onpointerdown - Web APIs
own. you could also use addeventlistener(), of course. javascript first, let's look at the javascript code that handles the pointerdown event. var targetbox = document.getelementbyid("target"); targetbox.onpointerdown = handledown; function handledown(evt) { var action; switch(evt.pointertype) { case "mouse": action = "clicking"; break; case "pen": action = "tapping"; break; case "touch": action = "touching"; break; default: action = "interacting with"; break; } targetbox.innerhtml = "<strong>thanks for " + action + " me!</strong>"; evt.preventdefault(); } this simply uses onpointerdown to establish the function handledown() as the event handler for pointer down events. the handledown() function, in turn, looks ...
...'t affect its functionality at all. #target { width: 400px; height: 30px; text-align: center; font: 16px "open sans", "helvetica", sans-serif; color: white; background-color: blue; border: 2px solid darkblue; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } result the resulting output is shown below. try tapping, clicking, or touching the box and see what happens. for full effect, try it with a variety of pointer types. specifications specification status comment pointer events – level 2the definition of 'onpointerdown' in that specification. recommendation non-stable version pointer eventsthe definition of 'onpointerdown' in that specification. obsolet...

The HTML DOM API - Web APIs
interfaces they rely upon. the functional areas included in the html dom api include: access to and control of html elements via the dom. access to and manipulation of form data. interacting with the contents of 2d images and the context of an html <canvas>, for example to draw on top of them. management of media connected to the html media elements (<audio> and <video>). dragging and dropping of content on webpages. access to the browser navigation history supporting and connective interfaces for other apis such as web components, web storage, web workers, websocket, and server-sent events. html dom concepts and usage in this article, we'll focus on the parts of the html dom that involve engaging with html elements. discussion of other areas, such as drag and drop, websockets, we...
...t model (dom) is an architecture that describes the structure of a document; each document is represented by an instance of the interface document. a document, in turn, consists of a hierarchical tree of nodes, in which a node is a fundamental record representing a single object within the document (such as an element or text node). nodes may be strictly organizational, providing a means for grouping other nodes together or for providing a point at which a hierarchy can be constructed; other nodes may represent visible components of a document. each node is based on the node interface, which provides properties for getting information about the node as well as methods for creating, deleting, and organizing nodes within the dom. nodes don't have any concept of including the content that is ac...

Recommended Drag Types - Web APIs
() method. event.datatransfer.mozsetdataat("application/x-moz-file", file, 0); if possible, include the file url of the file using both the text/uri-list and text/plain types. these types should be added afterward so that the more specific application/x-moz-file type has higher priority. multiple files will be received during a drop as multiple items in the data transfer. see dragging and dropping multiple items for more details about this. the following example shows how to create an area for receiving dropped files: <listbox ondragenter="return checkdrag(event)" ondragover="return checkdrag(event)" ondrop="dodrop(event)"/> <script> function checkdrag(event) { return event.datatransfer.types.contains("application/x-moz-file"); } function dodrop(event) { var file ...
...dir.path); var file = cc['@mozilla.org/file/local;1'].createinstance(components.interfaces.nsilocalfile); file.initwithpath(dir.path); file.appendrelativepath(name); console.log("output final path is =" + file.path); // now you can write or copy the file yourself… } } } see also html drag and drop api (overview) drag operations dragging and dropping multiple items html5 living standard: drag and drop ...

Basic concepts - Web APIs
same time. transaction an atomic set of data-access and data-modification operations on a particular database. it is how you interact with the data in a database. in fact, any reading or changing of data in the database must happen in a transaction. a database connection can have several active transactions associated with it at a time, so long as the writing transactions do not have overlapping scopes. the scope of transactions, which is defined at creation, determines which object stores the transaction can interact with and remains constant for the lifetime of the transaction. so, for example, if a database connection already has a writing transaction with a scope that just covers the flyingmonkey object store, you can start a second transaction with a scope of the unicorncentaur and ...
...nsaction can interact with and remains constant for the lifetime of the transaction. so, for example, if a database connection already has a writing transaction with a scope that just covers the flyingmonkey object store, you can start a second transaction with a scope of the unicorncentaur and unicornpegasus object stores. as for reading transactions, you can have several of them — even overlapping ones. transactions are expected to be short-lived, so the browser can terminate a transaction that takes too long, in order to free up storage resources that the long-running transaction has locked. you can abort the transaction, which rolls back the changes made to the database in the transaction. and you don't even have to wait for the transaction to start or be active to abort it. the thre...

Browser storage limits and eviction criteria - Web APIs
them that this data will persist, and asks if they are happy with that. temporary data storage does not elicit any user prompts. storage is temporary by default; developers can choose to use persistent storage for their sites using the storagemanager.persist() method available in the storage api. where is the data stored? each storage type represents a separate repository. ...
... data based on an lru policy — the least recently used origin will be deleted first, then the next one, until the browser is no longer over the limit. we track the "last access time" for each origin using temporary storage. once the global limit for temporary storage is reached (more on the limit later), we try to find all currently unused origins (i.e., ones with no tabs/apps open that are keeping open datastores). these are then sorted according to "last access time." the least recently used origins are then deleted until there's enough space to fulfill the request that triggered this origin eviction. ...

Checking when a deadline is due - Web APIs
ation in the same format javascript understands. human-readable dates are quite different, with a number of different representations. recording the date information to provide a reasonable user experience on mobile devices, and to cut down on ambiguities, i decided to create an html form with: a text input for entering a title for your to-do list. this is the least avoidable bit of user typing. number inputs for the hour and minute parts of the deadline. on browsers that support type="number", you get a nice little up and down arrow number picker. on mobile platforms you tend to get a numeric keypad for entering data, which is helpful. on others you just get a standard text input, which is okay. <select> elements for inputting the day, month and year of the deadline. because these va...
...meric keypad for entering data, which is helpful. on others you just get a standard text input, which is okay. <select> elements for inputting the day, month and year of the deadline. because these values are the most ambiguous for users to enter (7, sunday, sun? 04, 4, april, apr? 2013, '13, 13?), i decided the best solution was to give them a choice to pick from, which also saves on annoying typing for mobile users. the days are recorded as numerical days of the month, the months are recorded as full month names, and the years are recorded as full four digit year numbers. when the form's submit button is pressed, we run the adddata() function, which starts like this: function adddata(e) { e.preventdefault(); if(title.value == '' || hours.value == null || minutes.value == null || day...

Timing element visibility with the Intersection Observer API - Web APIs
then we set up an event listener for the visibilitychange event. this event is sent when the document becomes hidden or visible, such as when the user switches tabs in their browser. the intersection observer api doesn't take this into account when detecting intersection, since intersection isn't affected by page visibility. theref...
...e in milliseconds, relative to the time at which the document was created, at which the ad's visibility count was last updated, or the ad last became visible. 0 if the ad was not visible as of the last time it was checked. totalviewtime the total number of milliseconds the ad has been visible. these are accessed through each ad's htmlelement.dataset attribute, which provides a domstringmap mapping each custom attribute's name to its value. the values are strings, but we can convert those to numbers easily enough—in fact, javascript generally does it automatically, although we'll have one instance where we have to do it ourselves. we start by fetching the time at which the ad's previous visibility status check time (adbox.dataset.lastviewstarted) into a local variable named laststarted. ...

Intersection Observer API - Web APIs
the target element's bounding rectangle (that is, the smallest rectangle that fully encloses the bounding boxes of every component that makes up the element) is...
... (that is, the smallest rectangle that fully encloses the bounding boxes of every component that makes up the element) is obtained by calling getboundingclientrect() on the target. this is the largest the intersection rectangle may be. the remaining steps will remove any portions that don't intersect. starting at the target's immediate parent block and moving outward, each containing block's clipping (if any) is applied to the intersection rectangle. a block's clipping is determined based on the intersection of the two blocks and the clipping mode (if any) specified by the overflow property. setting overflow to anything but visible causes clipping to occur. if one of the containing elements is the root of a nested browsing context (such as the document contained in an <iframe>, the intersect...

Keyboard API - Web APIs
the keyboard api provides methods for working with a physical keyboard that is attached to a device running a browser. it provides several capabilities. keyboard mapping provides an interface for retrieving the string generated by particular physical key on a keyboard to correctly identify that key to a user. keyboard locking enables a web page to capture keys that are normally reserved by the user agent or the underlying operating system. the intended use of the keyboard api is by web applications such as games or remote access apps that provide a full-screen immersive experience. ...
...cular physical key on a keyboard to correctly identify that key to a user. keyboard locking enables a web page to capture keys that are normally reserved by the user agent or the underlying operating system. the intended use of the keyboard api is by web applications such as games or remote access apps that provide a full-screen immersive experience. keyboard api concepts and usage keyboard mapping on physical keyboards, the code attribute contains the physical location of the key that was pressed, and the key attribute contains the string generated by pressing the key at that physical location on the keyboard. the key value takes into account the keyboard's locale (for example, 'en-us'), layout (for example, 'qwerty'), and modifier-key state (shift, control, etc.). historically there has ...

LocalMediaStream - Web APIs
being generated locally (such as by getusermedia(). however, getusermedia() now returns a mediastream instead, and this interface has been removed from the specification. warning: this interface is no longer available in any mainstream browser. do not use localmediastream; you need to update any code that does use it as soon as possible or your content or application will stop working. see stopping a video stream in mediastreamtrack to learn how. all other functionality is found in mediastream. the primary reason for this interface to exist was to add a stop() method to its mediastream parent interface. however, control over playback of media has been moved to the individual mediastreamtrack objects, so this is no longer necessary. instead, media is stopped by calling mediastreamtrack.sto...
...mediastreamtrack.stop() demonstrates how to stop a multi-track stream, which is what localmediastream.stop() used to be used for. methods localmediastream.stop() stops the stream. when the source of the stream is a connected device (such as a camera or microphone), capture of media from the device is halted. this method is no longer available with the deprecation of localmediastream. see stopping a video stream in mediastreamtrack to learn how to stop an entire stream. specifications not part of any specification. this interface was previously part of media capture and streams but was removed in 2013. ...

PaymentCurrencyAmount - Web APIs
properties all properties are required. ...
... properties all properties are required. ...

PaymentDetailsUpdate.error - Web APIs
the paymentdetailsupdate dictionary's error property is a human-readable domstring which provides an error message to be displayed if the specified information doesn't offer any valid shipping options. syntax errorstring = paymentdetailsupdate.error; paymentdetailsupdate.error = errorstring; value a domstring specifying the string to display to the user if the information specified in the paymentdetailsupdate doesn't provide any valid shipping options. this happens if both of the following are true: the paymentrequest specifies using its requestshipping property that shipping information is required. the paymentdetailsupdate object specifies no valid shipping options in its shippingoptions list. this message can be used to explain to the user why they cannot submit their payment...
... specifications specification status comment payment request apithe definition of 'paymentdetailsupdate.error' in that specification. candidate recommendation initial definition. ...

PaymentDetailsUpdate - Web APIs
n array of paymentitem objects, each describing one line item for the payment request. these represent the line items on a receipt or invoice. error optional a domstring specifying an error message to present to the user. when calling updatewith(), including error in the updated data causes the user agent to display the text as a general error message. ...
...ata causes the user agent to display the text as a general error message. for address field specific errors, use shippingaddresserrors. modifiers optional an array of paymentdetailsmodifier objects, each describing a modifier for particular payment method identifiers. for example, you can use one to adjust the total payment amount based on the selected payment method ("5% cash discount!"). shippingaddresserrors optional an addresserrors object which includes an error message for each property of the shipping address that could not be validated. shippingoptions optional an array of paymentshippingoption objects, each describing one available shipping option from which the user may choose. total optional a paymentitem providing an updated total for the payment. make sure this equals the ...

PaymentRequest: merchantvalidation event - Web APIs
candidate recommendation ...
... candidate recommendation ...

PaymentRequestUpdateEvent.updateWith() - Web APIs
n array of paymentitem objects, each describing one line item for the payment request. these represent the line items on a receipt or invoice. error optional a domstring specifying an error message to present to the user. when calling updatewith(), including error in the updated data causes the user agent to display the text as a general error message. ...
...ata causes the user agent to display the text as a general error message. for address field specific errors, use shippingaddresserrors. modifiers optional an array of paymentdetailsmodifier objects, each describing a modifier for particular payment method identifiers. for example, you can use one to adjust the total payment amount based on the selected payment method ("5% cash discount!"). shippingaddresserrors optional an addresserrors object which includes an error message for each property of the shipping address that could not be validated. shippingoptions optional an array of paymentshippingoption objects, each describing one available shipping option from which the user may choose. total optional a paymentitem providing an updated total for the payment. make sure this equals the ...

PaymentResponse.onpayerdetailchange - Web APIs
handle the payerdetailchange event when the user makes changes to their personal information while editing a payment request form. ...
...ayment request form. examples in the example below, onpayerdetailchange is used to set up a listener for the payerdetailchange event in order to validate the information entered by the user, requesting that any mistakes be corrected // options for paymentrequest(), indicating that shipping address, // payer email address, name, and phone number all be collected. ...

PaymentResponse - Web APIs
supplied by the user. this option is only present when the requestpayerphone option is set to true in the options parameter of the paymentrequest() constructor. paymentresponse.requestid read only secure context returns the identifier of the paymentrequest that produced the current response. this is the same value supplied in the paymentrequest() constructor by details.id. paymentresponse.shippingaddress read only secure context returns the shipping address supplied by the user. this option is only present when the requestshipping option is set to true in the options parameter of the paymentrequest() constructor. paymentresponse.shippingoption read only secure context returns the id attribute of the shipping option selected by the user. this option is only present when the requestship...
... methods paymentresponse.retry() secure context if something is wrong with the payment response's data (and there is a recoverable error), this method allows a merchant to request that the user retry the payment. ...

RTCRtpTransceiver.stop() - Web APIs
note: until recently, the stopped property was provided to return true if the connection is stopped. that property has been deprecated and will be removed at some point. instead, check the value of currentdirection. if it's stopped, the transceiver has been stopped. this method does nothing if the transceiver is already stopped. syntax rtcrtptransceiver.stop() paramters none. return value undefined exceptions invalidstateerror the rtcpeerconnection of which the transceiver is a member is closed. ...
...ing the rtcp "bye" message. the receiver then stops receiving media; the receiver's track is stopped, and the transceiver's direction is changed to stopped, and renegotiation is triggered by sending a negotiationneeded event to the rtcpeerconnection. the negotiation process causes currentnegotiation to be set to stopped, finally indicating that the transceiver has been fully stopped. note: stopping the transceiver causes a negotiationneeded event to be sent to the transceiver's rtcpeerconnection, so the connection can adapt to the change. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtptransceiver.stop()' in that specification. candidate recommendation ...

ReadableStream.pipeTo() - Web APIs
the pipeto() method of the readablestream interface pipes the current readablestream to a given writablestream and returns a promise that fulfills when the piping process completes successfully, or rejects if any errors were encountered. piping a stream will generally lock it for the duration of the pipe, preventing other readers from locking it. syntax var promise = readablestream.pipeto(destination[, options]); parameters destination a writablestream that acts as the final destination for the readablestream. options optional the options that should be used when piping to the writable stream. available options are: preventclose: if this is set to true, the source readablestream closing will no longer cause the destination writablestream to be closed. the method will r...
...no longer cancel the source readablestream. in this case the method will return a promise rejected with the source’s error, or with any error that occurs during canceling the source. in addition, if the destination writable stream starts out closed or closing, the source readable stream will no longer be canceled. in this case the method will return a promise rejected with an error indicating piping to a closed stream failed, or with any error that occurs during canceling the source. signal: if set to an abortsignal object, ongoing pipe operations can then be aborted via the corresponding abortcontroller. return value a promise that resolves when the piping process has completed. exceptions typeerror the writablestream and/or readablestream objects are not a writable stream/rea...

RequestDestination - Web APIs
"audio" the target is audio data. ...
... "audio" the target is audio data. ...

Using the Screen Capture API - Web APIs
reen, window, or other region selected by the user. the stream is connected to the <video> element by storing the returned mediastream into the element's srcobject. the dumpoptionsinfo() function—which we will look at in a moment—dumps information about the stream to the log box for educational purposes. if any of that fails, the catch() clause outputs an error message to the log box. stopping display capture the stopcapture() method is called when the "stop capture" button is clicked. it stops the stream by getting its track list using mediastream.gettracks(), then calling each track's {domxref("mediastreamtrack.stop, "stop()")}} method. once that's done, srcobject is set to null to make sure it's understood by anyone interested that there's no stream connected. function stopcapture...
...ck list using mediastream.gettracks(), then calling each track's {domxref("mediastreamtrack.stop, "stop()")}} method. once that's done, srcobject is set to null to make sure it's understood by anyone interested that there's no stream connected. function stopcapture(evt) { let tracks = videoelem.srcobject.gettracks(); tracks.foreach(track => track.stop()); videoelem.srcobject = null; } dumping configuration information for informational purposes, the startcapture() method shown above calls a method named dumpoptions(), which outputs the current track settings as well as the constraints that were placed upon the stream when it was created. function dumpoptionsinfo() { const videotrack = videoelem.srcobject.getvideotracks()[0]; console.info("track settings:"); console.info(json.

SubtleCrypto - Web APIs
w key data, usages, and extractability given as parameters. subtlecrypto.exportkey() returns a promise that fulfills with a buffer containing the key in the requested format. subtlecrypto.wrapkey() returns a promise that fulfills with a wrapped symmetric key for usage (transfer and storage) in insecure environments. the wrapped key matches the format specified in the given parameters, and wrapping is done by the given wrapping key, using the specified algorithm. subtlecrypto.unwrapkey() returns a promise that fulfills with a cryptokey corresponding to the wrapped key given in the parameter. using subtlecrypto we can split the functions implemented by this api into two groups: cryptography functions and key management functions. cryptography functions these are the functions you can ...
... a number of export formats. the inverse of exportkey() is importkey(). you can import keys from other systems, and support for standard formats like pkcs #8 and json web key helps you do this. the exportkey() function exports the key in an unencrypted format. if the key is sensitive you should use wrapkey(), which exports the key and then encrypts it using another key; the api calls a "key-wrapping key". the inverse of wrapkey() is unwrapkey(), which decrypts then imports the key. storing keys cryptokey objects can be stored using the structured clone algorithm, meaning that you can store and retrieve them using standard web storage apis. the specification expects that most developers will use the indexeddb api to store cryptokey objects. supported algorithms the cryptographic function...

WebGLRenderingContext.getTexParameter() - Web APIs
ntext gl.texture_mag_filter glenum texture magnification filter gl.linear (default value), gl.nearest. gl.texture_min_filter glenum texture minification filter gl.linear, gl.nearest, gl.nearest_mipmap_nearest, gl.linear_mipmap_nearest, gl.nearest_mipmap_linear (default value), gl.linear_mipmap_linear. gl.texture_wrap_s glenum wrapping function for texture coordinate s gl.repeat (default value), gl.clamp_to_edge, gl.mirrored_repeat. gl.texture_wrap_t glenum wrapping function for texture coordinate t gl.repeat (default value), gl.clamp_to_edge, gl.mirrored_repeat. additionally available when using the ext_texture_filter_anisotropic extension ext.texture_max_anisotropy_ext g...
... gluint ? any uint values. gl.texture_max_level glint maximum texture mipmap array level any int values. gl.texture_max_lod glfloat texture maximum level-of-detail value any float values. gl.texture_min_lod glfloat texture minimum level-of-detail value any float values. gl.texture_wrap_r glenum wrapping function for texture coordinate r gl.repeat (default value), gl.clamp_to_edge, gl.mirrored_repeat. return value returns the requested texture information (as specified with pname). if an error occurs, null is returned. examples gl.gettexparameter(gl.texture_2d, gl.texture_mag_filter); specifications specification status comment webgl 1.0the definitio...

WebGLRenderingContext.texParameter[fi]() - Web APIs
scription param available in webgl 1 gl.texture_mag_filter texture magnification filter gl.linear (default value), gl.nearest. gl.texture_min_filter texture minification filter gl.linear, gl.nearest, gl.nearest_mipmap_nearest, gl.linear_mipmap_nearest, gl.nearest_mipmap_linear (default value), gl.linear_mipmap_linear. gl.texture_wrap_s wrapping function for texture coordinate s gl.repeat (default value),gl.clamp_to_edge, gl.mirrored_repeat. gl.texture_wrap_t wrapping function for texture coordinate t gl.repeat (default value),gl.clamp_to_edge, gl.mirrored_repeat. additionally available when using the ext_texture_filter_anisotropic extension ext.texture_max_anisotropy_ext maximum anisotropy for a te...
...ure_compare_mode texture comparison mode gl.none (default value), gl.compare_ref_to_texture. gl.texture_max_level maximum texture mipmap array level any int values. gl.texture_max_lod texture maximum level-of-detail value any float values. gl.texture_min_lod texture minimum level-of-detail value any float values. gl.texture_wrap_r wrapping function for texture coordinate r gl.repeat (default value), gl.clamp_to_edge, gl.mirrored_repeat. return value none. examples gl.texparameterf(gl.texture_2d, gl.texture_mag_filter, gl.linear); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear_mipmap_nearest); specifications specification status comment webgl 1.0the definition of 'texparamete...

WebGLRenderingContext - Web APIs
ext.iscontextlost() returns true if the context is lost, otherwise returns false. webglrenderingcontext.makexrcompatible() ensures the context is compatible with the user's xr hardware, re-creating the context if necessary with a new configuration to do so. this can be used to start an application using standard 2d presentation, then transition to using a vr or ar mode later. viewing and clipping webglrenderingcontext.scissor() defines the scissor box. webglrenderingcontext.viewport() sets the viewport. state information webglrenderingcontext.activetexture() selects the active texture unit. webglrenderingcontext.blendcolor() sets the source and destination blending factors. webglrenderingcontext.blendequation() sets both the rgb blend equation and alpha blend equation to a...
...renderingcontext.cullface() specifies whether or not front- and/or back-facing polygons can be culled. webglrenderingcontext.depthfunc() specifies a function that compares incoming pixel depth to the current depth buffer value. webglrenderingcontext.depthmask() sets whether writing into the depth buffer is enabled or disabled. webglrenderingcontext.depthrange() specifies the depth range mapping from normalized device coordinates to window or viewport coordinates. webglrenderingcontext.disable() disables specific webgl capabilities for this context. webglrenderingcontext.enable() enables specific webgl capabilities for this context. webglrenderingcontext.frontface() specifies whether polygons are front- or back-facing by setting a winding orientation. webglrenderingcontext.getpara...

Raining rectangles - Web APIs
e. this example combines clearing the drawing buffer with solid colors and scissoring operations. it is a preview of a full graphical application that manipulates various phases of the webgl graphics pipeline and state machine. in addition, the example demonstrates how to integrate the webgl function calls within a game loop. the game loop is responsible for drawing the animation frames, and keeping the animation responsive to user input. here, the game loop is implemented using timeouts. <p>you caught <strong>0</strong>. you missed <strong>0</strong>.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background...
.../ increment score and create a new rectangle. var diffpos = [ position[0] - rainingrect.position[0], position[1] - rainingrect.position[1] ]; if ( diffpos[0] >= 0 && diffpos[0] < rainingrect.size[0] && diffpos[1] >= 0 && diffpos[1] < rainingrect.size[1] ) { score += 1; scoredisplay.innerhtml = score; rainingrect = new rectangle(); } } function rectangle () { // keeping a reference to the new rectangle object, rather // than using the confusing this keyword. var rect = this; // we get three random numbers and use them for new rectangle // size and position. for each we use a different number, // because we want horizontal size, vertical size and // position to be determined independently. var randnums = getrandomvector(); rect.size = [ 5 + 12...

WebGL best practices - Web APIs
al caching in the application (webglbuffers, webgltextures, etc.) to obey a maximum size, computed by this constant multiplied by the number of pixels covered by the current browser window. this requires estimating the number of bytes consumed by each texture, for example. the cap also must typically be updated as the browser window resizes, and older resources above the limit must be purged. keeping the application's vram usage under this cap will help to avoid out-of-memory errors and associated instability. consider rendering to a smaller backbuffer size a common (and easy) way to trade off quality for speed is rendering into a smaller backbuffer, and upscaling the result. consider reducing canvas.width and height and keeping canvas.style.width and height at a constant size. batch draw ...
...(the spec calls this "color-renderable formats") for example, if a system supports float-textures but not render-to-float, generatemipmaps will fail for float formats. support for float textures doesn't mean you...

Taking still photos with WebRTC - Web APIs
lass="output"> <img id="photo" alt="the screen capture will appear in this box."> </div> that's all of the relevant html. the rest is just some page layout fluff and a bit of text offering a link back to this page. the javascript code now let's take a look at the javascript code. we'll break it up into a few bite-sized pieces to make it easier to explain. initialization we start by wrapping the whole script in an anonymous function to avoid global variables, then setting up various variables we'll be using. (function() { var width = 320; // we will scale the photo width to this var height = 0; // this will be computed based on the input stream var streaming = false; var video = null; var canvas = null; var photo = null; var startbutton = null; those variable...
...he click event is issued: startbutton.addeventlistener('click', function(ev){ takepicture(); ev.preventdefault(); }, false); this method is simple enough: it just calls our takepicture() function, defined below in the section capturing a frame from the stream, then calls event.preventdefault() on the received event to prevent the click from being handled more than once. wrapping up the startup() method there are only two more lines of code in the startup() method: clearphoto(); } this is where we call the clearphoto() method we'll describe below in the section clearing the photo box. clearing the photo box clearing the photo box involves creating an image, then converting it into a format usable by the <img> element that displays the most recently captured fra...

Using WebRTC data channels - Web APIs
support buffering of outbound data. this is handled automatically. while there's no way to control the size of the buffer, you can learn how much data is currently buffered, and you can choose to be notified by an event when the buffer starts to run low on queued data. this makes it easy to write efficient routines that make sure there's always data ready to send without over-using memory or swamping the channel completely. <<<write more about using bufferedamount, bufferedamountlowthreshold, onbufferedamountlow, and bufferedamountlow here>>> ... understanding message size limits for any data being transmitted over a network, there are size restrictions. at a fundamental level, the individual network packets can't be larger than a certain value (the exact number depends on the network and...
...upporting larger messages—the end-of-record (eor) flag that indicates when a message is the last one in a series that should be treated as a single payload. this is implemented in firefox 57, but is not yet implemented in chrome (see chromium bug 7774). with eor support in place, rtcdatachannel payloads can be much larger (officially up to 256kib, but firefox's implementation caps them at a whopping 1gib). even at 256kib, that's large enough to cause noticeable delays in handling urgent traffic. if you go even larger, the delays can become untenable unless you are certain of your operational conditions. in order to resolve this issue, a new system of stream schedulers (usually referred to as the "sctp ndata specification") has been designed to make it possible to interleave messages sent on...

Fundamentals of WebXR - Web APIs
a lot. that overlap is what gives us depth perception; within the overlap area — which is around 115° across — we have depth perception. outside that overlap area, our vision is monocular and lacks good depth perception. the drawing shown here demonstrates the concept of fov. the blue wedge represents the field of view of the leflt eye; the red wedge is the fov of the right eye. the overlapping area, which is sort of a shade of purple, is the area in which the viewer has binocular vision and, as a result, depth perception. if you look carefully, you'll see that each eye sees the die slightly differently, and the combined view blends the two into a 3d shape. generally, only the horizontal fov is specifically defined and managed by applications. for more details about this, see the optic...
...w and the right half or the right eye's view, the framebuffer is used like this: the simplest headsets have no integrated sensors, and simply focus each half of the screen into the corresponding eye. a common example of this is google cardboard, a type of headset first created by google which can be cheaply created using cardboard or other inexpensive materials. these devices often work by snapping your phone into the headset so that its screen and onboard graphics processor can be used to render and display the xr scene. more advanced headsets have integrated displays and are strapped to the head using an elastic or strap or a strap with velcro closure. these headsets may include integrated speakers and microphone, and/or connectors to attach external ones. additionally, these headsets m...

Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
e space than the one you've been using, you can use a combination of getviewerpose() and some matrix computations to transition everything in your scene to be based at the new reference frame's origin. because getviewerpose() is only available in an xrframe, you will need to begin this process in your rendering callback, possibly using a worker to do the computations in order to reduce frame dropping. let previousviewerpose = null; function mydrawframe(currentframetime, frame) { let session = frame.session; let viewerpose = frame.getviewerpose(viewerrefspace); animationframerequestid = session.requestanimationframe(mydrawframe); if (viewerpose) { if (!previousviewerpose) { previousviewerpose = viewerpose; } let offsetmatrix = mat4.create(); mat4.sub(offsetma...
...ly moving in the real world (a so-called teleportation mechanic), you can simply accept the new position and continue, allowing the jump from your previously-assumed position to be immediately corrected with the new position. on the other hand, if your app involves the user physically moving in real space to move around through your virtual world, simply adopting the new tracking position and jumping there can be unsettling to the user, and should be avoided if possible. instead, use the difference between the current position and the new tracking position to compute the new teleportation offset; that is, a transform applied to everything to adapt the position and orientation data from webxr to your needs. you can do this by creating a new reference space that incorporates into its effective...

Starting up and shutting down a WebXR session - Web APIs
asic testing before taking your code to a real device. be aware, however, that the emulator does not yet completely emulate all of the webxr api, so you may run into problems you're not expecting. again, carefully read the readme file and make sure you're aware of the limitations before you begin. important: you should always test your code on actual ar and/or vr hardware before releasing or shipping a product! emulated, simulated, or polyfilled environments are not an adequate substitute for actual testing on physical devices. getting the extension download the webxr api emulator for your supported browser below: google chrome mozilla firefox the source code for the extension is also available on github. emulator issues and notes while this isn't the place for a full article about ...
...nate system so that (0, 0, 0) is located at the position of the viewer, with the orientation likewise shifted to face in the desired direction. the input value into getoffsetreferencespace() is an xrrigidtransform encapsulating the player's position and orientation as specified in the default world coordinates. with the new reference space in hand and stored into the worlddata object for safe-keeping, we call the session's requestanimationframe() method to schedule a callback to be executed when it's time to render the next frame of animation for the webxr session. the returned value is an id we can use later to cancel the request if need be, so we save that into worlddata as well. in the end, the worlddata object is returned to the caller to allow the main code to reference the data it need...

Controlling multiple parameters with ConstantSourceNode - Web APIs
y(event) { if (playing) { playbutton.innerhtml = "▶️"; stoposcillators(); } else { playbutton.innerhtml = "⏸"; startoscillators(); } } if the playing variable indicates we're already playing the oscillators, we change the playbutton's content to be the unicode character "right-pointing triangle" (▶️) and call stoposcillators() to shut down the oscillators. see stopping the oscillators below for that code. if playing is false, indicating that we're currently paused, we change the play button's content to be the unicode character "pause symbol" (⏸) and call startoscillators() to start the oscillators playing their tones. that code is covered under starting the oscillators below. controlling the linked oscillators the changevolume() function—the event handl...
...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 stopped by calling its constantsourcenode.stop() method, then playing is set to false. result ...

Migrating from webkitAudioContext - Web APIs
text.creategainnode(); var delay = context.createdelaynode(); var js = context.createjavascriptnode(1024); you can simply rename the methods to look like this: // new method names var gain = context.creategain(); var delay = context.createdelay(); var js = context.createscriptprocessor(1024); the semantics of these methods remain the same in the renamed versions. changes to starting and stopping nodes in webkitaudiocontext, there are two ways to start and stop audiobuffersourcenode and oscillatornode: the noteon() and noteoff() methods, and the start() and stop() methods. (audiobuffersourcenode has yet another way of starting output: the notegrainon() method.) the noteon()/notegrainon()/noteoff() methods were the original way to start/stop output in these nodes, and in the newer versi...
...var src = context.createbuffersource(); src.buffer = somebuffer; src.buffer.gain = 0.5; src.connect(context.destination); src.noteon(0); // new standard audiocontext code: var src = context.createbuffersource(); src.buffer = somebuffer; var gain = context.creategain(); src.connect(gain); gain.gain.value = 0.5; gain.connect(context.destination); src.start(0); removal of audiobuffersourcenode.looping the looping attribute of audiobuffersourcenode has been removed. this attribute was an alias of the loop attribute, so you can just use the loop attribute instead. instead of having code like this: var source = context.createbuffersource(); source.looping = true; you can change it to respect the last version of the specification: var source = context.createbuffersource(); source.loop = true...

Example and tutorial: Simple synth keyboard - Web APIs
rm to use when generating notes. the volume control first we create the <div> to contain the settings bar, so it can be styled as needed. then we establish a box that will be presented on the left side of the bar and place a label and an <input> element of type "range". the range element will typically be presented as a slider control; we configure it to allow any value between 0.0 and 1.0, stepping by 0.01 each position. <div class="settingsbar"> <div class="left"> <span>volume: </span> <input type="range" min="0.0" max="1.0" step="0.01" value="0.5" list="volumes" name="volume"> <datalist id="volumes"> <option value="0.0" label="mute"> <option value="1.0" label="100%"> </datalist> </div> we specify a default value of 0.5, and we provide a <datalist...
...a-pressed attribute; if there isn't one (which indicates that the note isn't already playing), we call playtone() to start playing the note, passing in the value of the element's data-frequency attribute. the returned oscillator is stored into osclist for future reference, and data-pressed is set to yes to indicate that the note is playing so we don't start it again next time this is called. stopping a tone the notereleased() function is the event handler called when the user releases the mouse button or moves the mouse out of the key that's currently playing. function notereleased(event) { let dataset = event.target.dataset; if (dataset && dataset["pressed"]) { osclist[dataset["octave"][dataset["note"]]].stop(); osclist[dataset["octave"][dataset["note"]]] = null; delete da...

Web Audio API - Web APIs
to achieve a reverb effect. delaynode the delaynode interface represents a delay-line; an audionode audio-processing module that causes a delay between the arrival of an input data and its propagation to the output. dynamicscompressornode the dynamicscompressornode interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once. gainnode the gainnode interface represents a change in volume. it is an audionode audio-processing module that causes a given gain to be applied to the input data before its propagation to the output. waveshapernode the waveshapernode interface represents a non-linear distorter. it is an audionode ...
... multiple sounds are played and multiplexed together at once. gainnode the gainnode interface represents a change in volume. it is an audionode audio-processing module that causes a given gain to be applied to the input data before its propagation to the output. waveshapernode the waveshapernode interface represents a non-linear distorter. it is an audionode that use a curve to apply a waveshaping distortion to the signal. beside obvious distortion effects, it is often used to add a warm feeling to the signal. periodicwave describes a periodic waveform that can be used to shape the output of an oscillatornode. iirfilternode implements a general infinite impulse response (iir) filter; this type of filter can be used to implement tone control devices and graphic equalizers as well. de...

Using the Web Speech API - Web APIs
r this term (color), and the list of items that follow the equals sign are the alternative values that will be recognised and accepted as appropriate values for the term. note how each is separated by a pipe character. you can have as many terms defined as you want on separate lines following the above structure, and include fairly complex grammar definitions. for this basic demo, we are just keeping things simple. plugging the grammar into our speech recognition the next thing to do is define a speech recogntion instance to control the recognition for our application. this is done using the speechrecognition() constructor. we also create a new speech grammar list to contain our grammar, using the speechgrammarlist() constructor. var recognition = new speechrecognition(); var speechrecog...
... a supporting desktop browser, or navigate to the live demo url in a supporting mobile browser like chrome, or firefox os. browser support support for web speech api speech synthesis is still getting there across mainstream browsers, and is currently limited to the following: firefox desktop and mobile support it in gecko 42+ (windows)/44+, without prefixes, and it can be turned on by flipping the media.webspeech.synth.enabled flag to true in about:config. firefox os 2.5+ supports it, by default, and without the need for any permissions. chrome for desktop and android have supported it since around version 33, without prefixes. html and css the html and css are again pretty trivial, simply containing a title, some instructions for use, and a form with some simple contr...

XRInputSource - Web APIs
the gamepad interface from the gamepad api, this input device is strictly associated with the webxr hardware and is not a general-purpose gaming device. gripspaceread only an xrspace whose origin tracks the pose which is used to render objects which should appear as if they're held in the hand indicated by handedness. the orientation of this space indicates the angle at which the hand is gripping the object. read on in the main article on gripspace for more details on how to use this space. handednessread only a domstring that indicates which hand the device represented by this xrinputsource is being used in, if any. the value will be left, right, or none. profilesread only an array of domstring objects, each specifying the name of an input profile describing the preferred visual re...
...ray. this is a ray extending from the position of the device outward in the direction in which it is pointed. a target ray emitted by a hand controller. if the device includes a trigger or other squeezable input, such as a hand gesture device that recognizes when the user squeezes their fist, that action is called a primary squeeze action. a primary squeeze action should correspond to a gripping act in reality, such as taking hold of an object or pressing a trigger on a tool or weapon. when a squeeze action begins, such as by the user pressing the trigger or tightening their grip, a squeezestart event is sent to the xrsession. once the action is completed and the user has released the trigger or the grip, a squeeze event is sent. this is followed by a squeezeend, which is also sent if th...

XRSession - Web APIs
ode() is part of the webxr augmented reality module, which has not been completed. inputsources read only returns a list of this session's xrinputsources, each representing an input device used to control the camera and/or scene. renderstate read only an xrrenderstate object which contains options affecting how the imagery is rendered. this includes things such as the near and far clipping planes (distances defining how close and how far away objects can be and still get rendered), as well as field of view information. visibilitystate read only a domstring whose value is one of those found in the xrvisibilitystate enumerated type, indicating whether or not the session's imagery is visible to the user, and if so, if it's being visible but not currently the target for user events...
...engaged by the user in such a way as to cause the primary action to begin. this is the first of the session* event to be sent. also available through the onselectstart event handler property. squeeze an xrinputsourceevent sent to indicate that a primary squeeze action has successfully completed. this indicates that the device being squeezed has been released, and may represent dropping a grabbed object, for example. it is sent immediately before the squeezeend event is sent to indicate that the squeeze action is over. also available through the onsqueeze event handler property. squeezeend an xrinputsourceevent sent to the xrsession when the primary squeeze action ends, whether or not the action was successful. also available using the onsqueezeend event hand...

Web APIs
web apis are typically used with javascript, although this doesn't always have to be the case. specifications this is a list of all the apis that are available. ...
... blobevent bluetooth bluetoothadvertisingdata bluetoothcharacteristicproperties bluetoothdevice bluetoothremotegattcharacteristic bluetoothremotegattdescriptor bluetoothremotegattserver bluetoothremotegattservice body broadcastchannel budgetservice budgetstate buffersource bytelengthqueuingstrategy bytestring c cdatasection css cssconditionrule csscounterstylerule cssgroupingrule cssimagevalue csskeyframerule csskeyframesrule csskeywordvalue cssmathproduct cssmathsum cssmathvalue cssmediarule cssnamespacerule cssnumericvalue cssomstring csspagerule csspositionvalue cssprimitivevalue csspseudoelement cssrule cssrulelist cssstyledeclaration cssstylerule cssstylesheet cssstylevalue csssupportsrule cssunitvalue cssunparsedvalue cssvalue cssva...

Cognitive accessibility - Accessibility
tant. an example of a poor experience is a page full of links whose text reads, "click here." without indicating where "here" will take you, the link's purpose is unclear. for screen readers, it is vital that linked text describes the purpose of each link. if you have added content to links for screen readers, and that content is verbose and potentially confusing to sighted readers, consider clipping the added text to visually hide it from those not using assistive technologies. current location is available users should be able to orient themselves within a site or application. this is especially important and helpful for people with short attention spans who may become confused when following a long series of navigation steps. all users benefit from information about where they ar...
...beling identical functions should have similar labels every time they are utilized. consistent button labels, alternative text for icons, and iconography for similar interactions and so on, even on different sections of your site, help all your users. be consistent and predictable, and use norms while unlabeled iconography is not the most effective method of conveying information, keeping the use of the icons (and if labeled, their label text) consistent helps people to understand what the icon represents. similarly, don't change defaults like the browser's back button. if you need to redirect a user, let the user know about it beforehand. input assistance guideline 3.3 helps to ensure accurate data entry, stating "help users avoid and correct mistakes." while we all make mistak...

HTML To MSAA - Accessibility
for example, if name column has n/a value then it means specific elements doesn't provide own rules to calculate name but name can be computed from aria markup or @title attribute. ...
...le_system_ whitespace '\n' (new line char) state_system_ readonly n/a n/a n/a button role_system_ pushbutton from child nodes n/a state_system_ focusable state_system_ default if @type attribute has value "submit" n/a "press" n/a caption bstr role n/a n/a n/a description_for (0x100f), points to table element div bstr role n/a n/a n/a n/a n/a n/a fieldset role_system_ grouping text equivalent from child legend element n/a n/a labelled_by (1003), points to legend element n/a n/a hr role_system_ separator n/a n/a n/a n/a n/a n/a img, input @type=image role_system_ graphic from @alt attribute, empty @alt attribute means name can't be calculated at all n/a state_system_ animated if image has more than one frame n/a "showlongdesc" if @longdesc attribute is presented...

Text labels and names - Accessibility
in the image). <figure> <img src="milkweed.jgp" alt="black and white close-up photo of milkweed flowers"> <figcaption>asclepias verticillata</figcaption> </figure> fieldset elements must be labeled fieldset elements must have a text description, similar to other form elements. use the <legend> element to describe the purpose of a fieldset. use a legend to label a fieldset when grouping a set of form elements together with a <fieldset> element, you should include a nested <legend> element inside it, containing a clear description of the group. users of assistive technology find this description helpful when trying to work out the overall purpose of the group. without the legend, they would have to navigate around the individual form controls in the group to infer an idea of the...
...id="emailoptin"> <label for="emailoptin">yes, please send me news about this product.</label> form elements should have a visible text label in addition to having a <label> for every form element, those labels should be visible, not hidden. visible labels help all users understand the purpose of a form element. do not rely on placeholder text, because it disappears as soon as the user starts typing. frame elements must be labeled frame elements, both <iframe> and the older, obsolete <frame>, must have a title to describe the contents of the frame. use the title attribute to label a frame element. without a title, users of assistive technologies have to navigate into the frame in order to understand what it contains, which can be difficult and confusing. the <frame> element is no longer ...

font-stretch - CSS: Cascading Style Sheets
this enables variable fonts to offer something more like a continuum of character widths. for truetype or opentype variable fonts, the "wdth" variation is used to implement varying widths. if the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face. ...
...r something more like a continuum of character widths. for truetype or opentype variable fonts, the "wdth" variation is used to implement varying widths. if the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face. ...

Basic concepts of flexbox - CSS: Cascading Style Sheets
olumn and column-reverse — to see what happens to the content. multi-line flex containers with flex-wrap while flexbox is a one dimensional model, it is possible to cause our flex items to wrap onto multiple lines. in doing so, you should consider each line as a new flex container. any space distribution will happen across that line, without reference to the lines either side. to cause wrapping behaviour add the property flex-wrap with a value of wrap. now, should your items be too large to all display in one line, they will wrap onto another line. the live sample below contains items that have been given a width, the total width of the items being too wide for the flex container. as flex-wrap is set to wrap, the items wrap. set it to nowrap, which is also the initial value, and they wi...
...ng too wide for the flex container. as flex-wrap is set to wrap, the items wrap. set it to nowrap, which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. using nowrap would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit. find out more about wrapping flex items in the guide mastering wrapping of flex items. the flex-flow shorthand you can combine the two properties flex-direction and flex-wrap into the flex-flow shorthand. the first value specified is flex-direction and the second value is flex-wrap. in the live example below try changing the first value to one of the allowable values for flex-direction - row, row-reverse, column or column...

Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
x-content — these keywords are defined in the css intrinsic and extrinsic sizing specification, and can be used in place of a length unit. in the live example below for instance i have two paragraph elements that contain a string of text. the first paragraph has a width of min-content. in a browser that supports this keyword you should be able to see that the text has taken all of the soft wrapping opportunities available to it, becoming as small as it can be without overflowing. this then, is the min-content size of that string. essentially, the longest word in the string is dictating the size. the second paragraph has a value of max-content and so it does the opposite. it gets as big as it possibly can be, taking no soft-wrapping opportunities. it would overflow the box it is in if that ...
...portion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.” the second reason is that flexbox prevents small items from shrinking to zero size during this removal of negative free space. the items will be floored at their min-content size — the size that they become if they take advantage of any soft wrapping opportunities available to them. you can see this min-content flooring happen in the below example, where the flex-basis is resolving to the size of the content. if you change the width on the flex container — increasing it to 700px for example — and then reduce the flex item width, you can see that the first two items will wrap, however they will never become smaller than that min-content s...

In Flow and Out of Flow - CSS: Cascading Style Sheets
the paragraphs, and then floated the div left. the div is now out of flow. as a float it is first laid out according to where it would be in normal flow, then taken out of flow and moved to the left as far as possible. you can see the background colour of the following paragraph running underneath, it is only the line boxes of that paragraph that have been shortened to cause the effect of wrapping content around the float. the box of our paragraph is still displaying according to the rules of normal flow. this is why, to make space around a floated item, you must add a margin to the item, in order to push the line boxes away from it. you cannot apply anything to the following in-flow content to achieve that. absolute positioning giving an item position: absolute or position: fixed remove...
...e paragraph elements, the second element has position absolute, with offset values of top: 30px and right: 30px. it has been removed from document flow. using position: fixed also removes the item from flow, however the offsets are based on the viewport rather than the containing block. when taking an item out of flow with positioning, you will need to manage the possibility of content overlapping. out of flow essentially means that the other elements on your page no longer know that element exists so will not respond to it. relative positioning and flow if you give an item relative positioning with position: relative it remains in flow, however you are then able to use the offset values to push it around. the space that it would have been placed in normal flow is reserved however, as yo...

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
this is generally what you want, if you are laying out a form for example you wouldn’t want the labels and fields to become jumbled up in order to fill in some gap. however sometimes, we are laying things out that don’t have a logical order and we would like to create a layout that doesn’t have gaps in it. to do this, add the property grid-auto-flow with a value of dens...
...com/samples/72/ab41das78e.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> </ul> auto-placement can also help you lay out interface items which do have logical order. an example is the definition list in this next example. definition lists are an interesting challenge to style as they are flat, there is nothing wrapping the groups of dt and dd items. in my example i am allowing auto-placement to place the items, however i have classes that start a dt in column 1, and dd in column 2, this ensure that terms go on one side and definitions on the other - no matter how many of each we have. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6;...

Basic Concepts of grid layout - CSS: Cascading Style Sheets
an explicit grid with grid layout. the grid layout specification is flexible enough to add additional rows and columns when needed. features such as adding “as many columns that will fit into a container” are included. alignment control grid contains alignment features so we can control how the items align once placed into a grid area, and how the entire grid is aligned. control of overlapping content more than one item can be placed into a grid cell or area and, they can partially overlap each other. this layering may then be controlled with the z-index property. grid is a powerful specification that, when combined with other parts of css such as flexbox, can help you create layouts that were previously impossible to build in css. it all starts by creating a grid in your grid contai...
... controlling the order we can control the order in which items stack up by using the z-index property - just like positioned items. if we give box2 a lower z-index than box1 it will display below box1 in the stack. .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column...

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
. if we have a lot of space all five items can fit on one row. if we have a very narrow container we may only have space for one. in comparison, the grid version always has three column tracks. the tracks themselves will grow and shrink, but there are always three since we asked for three when defining our grid. auto-filling grid tracks we can create a similar effect to flexbox, while still keeping the content arranged in strict rows and columns, by creating our track listing using repeat notation and the auto-fill and auto-fit properties. in this next example, i have used the auto-fill keyword in place of an integer in the repeat notation and set the track listing to 200 pixels. this means that grid will create as many 200 pixels column tracks as will fit in the container. * {box-sizing...
...radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> </div> .wrapper { display: grid; grid-template-columns: repeat(auto-fill, 200px); } a flexible number of tracks this isn’t quite the same as flexbox. in the flexbox example, the items are larger than the 200 pixel basis before wrapping. we can achieve the same in grid by combining auto-fit and the minmax() function. in this next example, i create auto filled tracks with minmax. i want my tracks to be a minimum of 200 pixels, so i set the maximum to be 1fr. once the browser has worked out how many times 200 pixels will fit into the container–also taking account of grid gaps–it will treat the 1fr maximum as an instruction to ...

Basic concepts of CSS Scroll Snap - CSS: Cascading Style Sheets
cations. basics of scroll snap the key properties of the scroll snap specification are scroll-snap-type and scroll-snap-align. the scroll-snap-type property is used on the scroll container to state the type and direction of scrolling. the scroll-snap-align property must be used on child elements in order to set the position that scrolling will snap to. the below example demonstrates scroll snapping along the y axis, with scroll-snap-align used on the section element to dictate the point the scrolling should stop. using scroll-snap-type the scroll-snap-type property needs to know the direction in which scroll snapping happens. this could be x or y, or the logical mappings block or inline. you can also use the keyword both to have scroll snapping work along both axes. you can also pass i...
...to set some padding. in the below example i have set scroll-padding to 40 pixels. when we snap to the start of the second and third sections, the scrolling stops 40 pixels away from the start of the section. try changing the scroll-padding value to see how this changes the distance. this is potentially useful if you have a fixed element, for example a navigation bar, which could end up overlapping scrolled content. by using scroll-padding you can reserve a space for it as in the example below where my <h1> remains on screen as the content scrolls beneath it. without padding, the heading would overlap some of the content when snapping happens. margins on scroll children the scroll-margin property can be set set on child elements, essentially defining an outset from the defined box. this...

Shapes from box values - CSS: Cascading Style Sheets
with a height, width, and background colour. the border-radius property has been used to create a circle by setting border-radius: 50%. as the element has a margin, you can see that the content is flowing around the circular shape and the margin applied to it. border-box the border-box value is the shape defined by the outside border edge. this shape follows all of the normal border radius shaping rules for the outside of the border. you still have a border, even if you have not used the css border property. in this case it will be the same as padding-box, the shape defined by the outside padding edge. in the example below you can see how the text now follows the line created by the border. change the border size and the content follows it. padding-box the padding-box value defines th...
...der property. in this case it will be the same as padding-box, the shape defined by the outside padding edge. in the example below you can see how the text now follows the line created by the border. change the border size and the content follows it. padding-box the padding-box value defines the shape enclosed by the outside padding edge. this shape follows all of the normal border radius shaping rules for the inside of the border. if you have no padding then padding-box is the same as content-box. content-box the content-box value defines the shape enclosed by the outside content edge. each corner radius of this box is the larger of 0 or border-radius − border-width − padding. this means that it is impossible to have a negative value here. when to use the box values using box...

Selector list - CSS: Cascading Style Sheets
the css selector list (,) selects all the matching nodes. /* selects all matching elements */ span, div { border: red 2px solid; } to reduce the size of style sheets, one can group selectors in comma-separated lists. syntax element, element, element { style properties } examples single line grouping grouping selectors in a single line using a comma-separated lists. h1, h2, h3, h4, h5, h6 { font-family: helvetica; } multi line grouping grouping selectors in a multiple lines using a comma-separated lists. #main, .content, article { font-size: 1.1em; } selector list invalidation a downside to using selector lists is that the following aren't equivalent: h1 { font-family: sans-serif } h2:maybe-unsupported { font-family: sans-serif } h3 { font-family: sans-serif } h1, h2:maybe...
... recommendation initial definition ...

<blend-mode> - CSS: Cascading Style Sheets
end-mode> css data type describes how colors should appear when elements overlap. it is used in the background-blend-mode and mix-blend-mode properties. syntax the <blend-mode> data type is defined using a keyword value chosen from the list below. values normal the final color is the top color, regardless of what the bottom color is. the effect is like two opaque pieces of paper overlapping. <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: normal; } multiply the final color is the result of multiplying the top and bottom colors. a black layer leads to a black final layer, and a white laye...
...'https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: normal; } multiply the final color is the result of multiplying the top and bottom colors. a black layer leads to a black final layer, and a white layer leads to no change. the effect is like two images printed on transparent film overlapping. <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: multiply; } screen the final color is the result of inverting the colors, multiplying them, and inverting that value. a black layer leads to no change,...

Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
t, as well as the single values we are used to. this means that instead of setting display: flex to create a block-level box with flex children, we will use display: block flex. instead of display: inline-flex to create an inline-level box with flex children, we will use display: inline flex. the example below, which will work in firefox 70 and upwards, demonstrates these values. there are mappings for all of the existing values of display; the most common ones are listed in the table below. to see a full list take a look at the table found in the display property specification. single value new value block block flow flow-root block flow-root inline inline flow inline-block inline flow-root flex block flex ...
...ntax accurately describes what is happening with this value. in the example above, you can change display: inline-block to display: inline flow-root in firefox and get the same result. what about the old values of display? the single values of display are described in the specification as legacy values, and currently you gain no benefit from using the two-value versions, as there is a direct mapping for each two-value version to a legacy version, as demonstrated in the table above. to deal with single values of display the specification explains what to do if only the outer value of block or inline is used: "if a <display-outside> value is specified but <display-inside> is omitted, the element’s inner display type defaults to flow." this means that the behavior is exactly as it is in ...

display - CSS: Cascading Style Sheets
keywords for block-level and inline-level variants of the same layout mode. valid <display-legacy> values: inline-block the element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would). it is equivalent to inline flow-root. inline-table the inline-table value does not have a direct mapping in html. it behaves like an html <table> element, but as an inline box, rather than a block-level box. inside the table box is a block-level context. it is equivalent to inline table. inline-flex the element behaves like an inline element and lays out its content according to the flexbox model. it is equivalent to inline flex. inline-grid the element behaves like an inline element and l...
...x of display css flow layout (display: block, display: inline) block and inline layout in normal flow flow layout and overflow flow layout and writing modes formatting contexts explained in flow and out of flow display: flex basic concepts of flexbox aligning items in a flex container controlling ratios of flex items along the main axis cross-browser flexbox mixins mastering wrapping of flex items ordering flex items relationship of flexbox to other layout methods backwards compatibility of flexbox typical use cases of flexbox display: grid basic concepts of grid layout relationship to other layout methods line-based placement grid template areas layout using named grid lines auto-placement in grid layout box alignment in grid layout grids, logical values and ...

font-stretch - CSS: Cascading Style Sheets
nds the syntax to accept a <percentage> value as well. this enables variable fonts to offer something more like a continuum of character widths. for truetype or opentype variable fonts, the "wdth" variation is used to implement varying widths. however, note that the <percentage> syntax is not yet supported by all browsers: check the browser compatibility table for details. ...
...age> value as well. this enables variable fonts to offer something more like a continuum of character widths. for truetype or opentype variable fonts, the "wdth" variation is used to implement varying widths. however, note that the <percentage> syntax is not yet supported by all browsers: check the browser compatibility table for details. ...

mask - CSS: Cascading Style Sheets
as well as the properties listed below, the mask shorthand also resets mask-border to its initial value. it is therefore recommended to use the mask shorthand rather than other shorthands or the individual properties to override any mask settings earlier in the cascade. this will ensure that mask-border has also been reset to allow the new styles to take effect. ...
...h and height of 50px */ mask: url(masks.svg#star) repeat-x; /* element within svg graphic used as horizontally repeated mask */ mask: url(masks.svg#star) stroke-box; /* element within svg graphic used as mask extending to the box enclosed by the stroke */ mask: url(masks.svg#star) exclude; /* element within svg graphic used as mask and combined with background using non-overlapping parts */ /* global values */ mask: inherit; mask: initial; mask: unset; /* multiple masks */ mask: url(masks.svg#star) left / 16px repeat-y, /* element within svg graphic is used as a mask on the left-hand side with a width of 16px */ url(masks.svg#circle) right / 16px repeat-y; /* element within svg graphic is used as a mask on the right-hand side with a width of 16px */ values <...

Guide to scroll anchoring - CSS: Cascading Style Sheets
roblem that scroll anchoring solves. you browse to a long page on a slow connection and begin to scroll to read the content; while you are busy reading, the part of the page you are looking at suddenly jumps. this has happened because large images or some other elements have just loaded further up in the content. scroll anchoring is a browser feature that aims to solve this problem of content jumping, which happens if content loads in after the user has already scrolled to a new part of the document. how does it work? scroll anchoring adjusts the scroll position to compensate for the changes outside of the viewport. this means that the point in the document the user is looking at remains in the viewport, which may mean their scroll position actually changes in terms of how far they have mov...
...e of the viewport. this means that the point in the document the user is looking at remains in the viewport, which may mean their scroll position actually changes in terms of how far they have moved through the document. how do i turn on scroll anchoring? you don't! the feature is enabled by default in supporting browsers. in most cases anchored scrolling is exactly what you want — content jumping is a poor experience for anyone. what if i need to debug it? if your page is not behaving well with scroll anchoring enabled, it is probably because some scroll event listener is not handling well the extra scrolling to compensate for the anchor node movement. you can check whether disabling scroll anchoring fixes the issue in firefox by changing layout.css.scroll-anchoring.enabled to false in...

scroll-margin-inline-end - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...<div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; fo...

scroll-margin-inline-start - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...<div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; fo...

scroll-margin-inline - CSS: Cascading Style Sheets
syntax /* <length> values */ scroll-margin-inline: 10px; scroll-margin-inline: 1em .5em ; /* global values */ scroll-margin-inline: inherit; scroll-margin-inline: initial; scroll-margin-inline: unset; values <length> an outset from the corresponding edge of the scroll container. description the scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length>{1,2} exampl...
...<div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; fo...

scroll-margin - CSS: Cascading Style Sheets
ge of the scroll container. description you can see the effect of scroll-margin by scrolling to a point partway between two of the "pages" of the example's content. the value specified for scroll-margin determines how much of the page that's primarily outside the snapport should remain visible. thus, the scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length>{1,4} exampl...
...<div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; fo...

shape-outside - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ned by the corresponding border-radius and margin values. if the border-radius / margin ratio is 1 or more, then the margin box corner radius is border-radius + margin. if the ratio is less than 1, then the margin box corner radius is border-radius + (margin * (1 + (ratio-1)^3)). border-box defines the shape enclosed by the outside border edge. the shape follows the normal border radius shaping rules for the outside of the border. padding-box defines the shape enclosed by the outside padding edge. the shape follows the normal border radius shaping rules for the inside of the border. content-box defines the shape enclosed by the outside content edge. each corner radius of this box is the larger of 0 or border-radius - border-width - padding. <basic-shape> the...

text-transform - CSS: Cascading Style Sheets
ase or all-lowercase, or with each word capitalized. it also can help improve legibility for ruby. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the text-transform property takes into account language-specific case mapping rules such as the following: in turkic languages, like turkish (tr), azerbaijani (az), crimean tatar (crh), volga tatar (tt), and bashkir (ba), there are two kinds of i, with and without the dot, and two case pairings: i/İ and ı/i. in german (de), the ß becomes ss in uppercase. in dutch (nl), the ij digraph becomes ij, even with text-transform: capitalize, which only puts the...
...to uppercase. other characters remain unchanged (they retain their original case as written in the element's text). a letter is defined as a character that is part of unicode's letter or number general categories ; thus, any punctuation marks or symbols at the beginning of a word are ignored. authors should not expect capitalize to follow language-specific title casing conventions (such as skipping articles in english). the capitalize keyword was under-specified in css 1 and css 2.1. this resulted in differences between browsers in the way the first letter was calculated (firefox considered - and _ as letters, 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 definitio...

white-space - CSS: Cascading Style Sheets
ace: initial; white-space: unset; the white-space property is specified as a single keyword chosen from the list of values below. values normal sequences of white space are collapsed. newline characters in the source are handled the same as other white space. lines are broken as necessary to fill line boxes. nowrap collapses white space as for normal, but suppresses line breaks (text wrapping) within the source. pre sequences of white space are preserved. lines are only broken at newline characters in the source and at <br> elements. pre-wrap sequences of white space are preserved. lines are broken at newline characters, at <br>, and as necessary to fill line boxes. pre-line sequences of white space are collapsed. lines are broken at newline characters, at <br>, and as necessary...
...line breaking opportunity exists after every preserved white space character, including between white space characters. such preserved spaces take up space and do not hang, and thus affect the box’s intrinsic sizes (min-content size and max-content size). ...

Introduction to Web development - Developer guides
note: the recommended resources on this page are subject to change. ...
...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 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 j...

User input and controls - Developer guides
nting device such as a mouse are represented by the mouseevent dom interface. common mouse events include click, dblclick, mouseup, and mousedown. the list of all events using the mouse event interface is provided in the events reference. when the input device is a mouse, you can also control user input through the pointer lock api and implement drag & drop (see below). finger touch when developing web applications meant to be installed on touchscreen devices, it’s a good practice to take into consideration the different capabilities in terms of screen resolution and user input. touch events can help you implement interactive elements and common interaction gestures on touchscreen devices. if you want to use touch events, you need to add event listeners and specify handler functions, whi...
...s, pointer lock is then used to remove the mouse pointer and allow you to move the ball directly using the mouse. ...

HTML attribute: rel - HTML: Hypertext Markup Language
rer no referer header will be included. additionally, has the same effect as noopener. not allowed annotation annotation opener creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not anauxiliary browsing context (i.e., has "_blank" as target attribute value). not allowed annotation annotation pingback gives the address of the pingback server that handles pingbacks to the current document. external resource not allowed not allowed preconnect specifies that the user agent should preemptively connect to the target resource's origin. external resource not allowed not allowed prefetch specifies that the user agent should preemptively fetch and cache ...
...s value makes the referrer unknown (no referer header will be included), and opens the creates a top-level browsing context, as if noopener were also set. opener creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not anauxiliary browsing context (i.e., has "_blank" as target attribute value). effectively, the opposite of noopener. pingback gives the address of the pingback server that handles pingbacks to the current document. preconnect specifies that the user agent should preemptively connect to the target resource's origin. prefetch specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation. preload specifies that the user agent must p...

<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
ibutes. the align attribute is obsolete; don't use it. usage notes heading information may be used by user agents, for example, to construct a table of contents for a document automatically. avoid using heading tags to resize text. instead, use the css font-size property. headings use size to indicate their relative importance, but css is preferred for general-purpose resizing. avoid skipping heading levels: always start from <h1>, next use <h2> and so on. you should only use one <h1> per page. using more than one will not result in an error, but using only one is seen as a best practice. it makes logical sense — <h1> is the most important heading, and tells you what the purpose of the overall page is. you wouldn't have a book with more than one title, or a movie with more than one...
...s with some content under them. <h1>heading elements</h1> <h2>summary</h2> <p>some text here...</p> <h2>examples</h2> <h3>example 1</h3> <p>some text here...</p> <h3>example 2</h3> <p>some text here...</p> <h2>see also</h2> <p>some text here...</p> here is the result of this code: accessibility concerns navigation a common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page. because of this, it is important to not skip one or more heading levels. doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is. don't <h1>heading level 1</h1> <h3>heading level 3</h3> <h4>heading level 4</h4> do <h1>heading level 1</h1> <h2>heading level 2</h2> ...

<button>: The Button element - HTML: Hypertext Markup Language
n to the element's events, which are triggered when the events occur. value defines the value associated with the button’s name when it’s submitted with the form data. this value is passed to the server in params when the form is submitted. notes a submit button with the attribute formaction set, but without an associated form does nothing. you have to set a form owner, either by wrapping it in a <form> or set the attribute form to the id of the form. <button> elements are much easier to style than <input> elements. you can add inner html content (think <i>, <br>, or even <img>), and use ::after and ::before pseudo-elements for complex rendering. if your buttons are not for submitting form data to a server, be sure to set their type attribute to button. otherwise they will try t...
... living standard html5the defin...

<dl>: The Description List element - HTML: Hypertext Markup Language
tions, by combining the examples above. metadata description lists are useful for displaying metadata as a list of key-value pairs. <dl> <dt>name</dt> <dd>godzilla</dd> <dt>born</dt> <dd>1952</dd> <dt>birthplace</dt> <dd>japan</dd> <dt>color</dt> <dd>green</dd> </dl> tip: it can be handy to define a key-value separator in the css, such as: dt::after { content: ": "; } wrapping name-value groups in <div> elements whatwg html allows wrapping each name-value group in a <dl> element in a <div> element. this can be useful when using microdata, or when global attributes apply to a whole group, or for styling purposes. <dl> <div> <dt>name</dt> <dd>godzilla</dd> </div> <div> <dt>born</dt> <dd>1952</dd> </div> <div> <dt>birthplace</dt> <dd>ja...
...ge the indentation of a description term, use the css margin property. accessibility concerns each screen reader announces <dl> content differently. some screen readers, such as voiceover on ios, will not announce that <dl> content is a list. because of this, make sure each list item's content is written in such a way that it communicates its relationship to the other list items in the list grouping. codepen - html buddies: dt & dd specifications specification status comment html living standardthe definition of '<dl>' in that specification. living standard html5the definition of '<dl>' in that specification. recommendation html 4.01 specificationthe definition of '<dl>' in that specification. recommendation initial defi...

<table>: The Table element - HTML: Hypertext Markup Language
pose, it helps the people decide if they need to read the rest of the table content or skip over it. this helps people navigating with the aid of assistive technology such as a screen reader, people experiencing low vision conditions, and people with cognitive concerns. mdn adding a caption to your table with <caption> caption & summary • tables • w3c wai web accessibility tutorials scoping rows and columns the scope attribute on header elements is redundant in simple contexts, because scope is inferred. however, some assistive technologies may fail to draw correct inferences, so specifying header scope may improve user experiences. in complex tables, scope can be specified so as to provide necessary information about the cells related to a header. example <table> <caption>colo...
... complex that header cells can’t be associated in a strictly horizontal or vertical way. this is typically indicated by the presence of the colspan and rowspan attributes. ideally, consider alternate ways to present the table's content, including breaking it apart into a collection of smaller, related tables that don't have to rely on using the colspan and rowspan attributes. in addition to helping people who use assistive technology understand the table's content, this may also benefit people with cognitive concerns who may have difficulty understanding the associations the table layout is describing. if the table cannot be broken apart, use a combination of the id and headers attributes to programmatically associate each table cell with the header(s) the cell is associated with. mdn t...

HTML elements reference - HTML: Hypertext Markup Language
<label> the html <label> element represents a caption for an item in a user interface. <legend> the html <legend> element represents a caption for the content of its parent <fieldset>. <meter> the html <meter> element represents either a scalar value within a known range or a fractional value. <optgroup> the html <optgroup> element creates a grouping of options within a <select> element. <option> the html <option> element is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element. as such, <option> can represent menu items in popups and other lists of items in an html document. <output> the html output element (<output>) is a container element into which a site or app can inject the r...
... layout element (<multicol>) was an experimental element designed to allow multi-column layouts and must not be used. <nextid> <nextid> is an obsolete html element that served to enable the next web designing tool to generate automatic name labels for its anchors. <nobr> the non-standard, obsolete html <nobr> element prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text. <noembed> the <noembed> element is an obsolete, non-standard way to provide alternative, or "fallback", content for browsers that do not support the <embed> element or do not support the type of embedded content an author wishes to use. <noframes> ...

HTTP conditional requests - HTTP
source (and caches it). besides the setting of the validators on the server side, this mechanism is transparent: all browsers manage a cache and send such conditional requests without any special work to be done by web developers. integrity of a partial download partial downloading of files is a functionality of http that allows to resume previous operations, saving bandwidth and time, by keeping the already obtained information: a server supporting partial downloads broadcasts this by sending the accept-ranges header. once this happens, the client can resume a download by sending a ranges header with the missing ranges: the principle is simple, but there is one potential problem: if the downloaded resource has been modified between both downloads, the obtained ranges will correspon...
...he if-match or if-unmodified-since headers. if the etag doesn't match the original file, or if the file has been modified since it has been obtained, the change is simply rejected with a 412 precondition failed error. it is then up to the client to deal with the error: either by notifying the user to start again (this time on the newest version), or by showing the user a diff of both versions, helping them decide which changes they wish to keep. dealing with the first upload of a resource the first upload of a resource is an edge case of the previous. like any update of a resource, it is subject to a race condition if two clients try to perform at the similar times. to prevent this, conditional requests can be used: by adding if-none-match with the special value of '*', representing any etag...

CSP: connect-src - HTTP
note: connect-src 'self' does not resolve to websocket schemas in all browsers, more info: https://github.com/w3c/webappsec-csp/issues/7 csp version 1 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. ...
...lization and whitespace matter, including leading or trailing whitespace. see unsafe inline script for an example. in csp 2.0, this applied only to inline scripts. csp 3.0 allows it in the case of script-src for external scripts. examples violation cases given this csp header: content-security-policy: connect-src https://example.com/ the following connections are blocked and won't load: <a ping="https://not-example.com"> <script> var xhr = new xmlhttprequest(); xhr.open('get', 'https://not-example.com/'); xhr.send(); var ws = new websocket("https://not-example.com/"); var es = new eventsource("https://not-example.com/"); navigator.sendbeacon("https://not-example.com/", { ... }); </script> specifications specification status comment content s...

HTTP headers - HTTP
is a structured header whose value is a token with possible values audio, audioworklet, document, embed, empty, font, image, manifest, object, paintworklet, report, script, serviceworker, sharedworker, style, track, video, worker, xslt, and nested-document. server-sent events last-event-id ... nel defines a mechanism that enables developers to declare a network error reporting policy. ping-from ... ping-to ... report-to used to specify a server endpoint for the browser to send warning and error reports to. transfer coding transfer-encoding specifies the form of encoding used to safely transfer the entity to the user. te specifies the transfer encodings the user agent is willing to accept. trailer allows the sender to include additional fields at the end of chunked me...
...ied. for details on the connection header field please see section 6.1 of the aforementioned rfc. x-dns-prefetch-control controls dns prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as urls for items referenced by the document, including images, css, javascript, and so forth. x-firefox-spdy ... x-pingback ... x-requested-with ... x-robots-tag the x-robots-tag http header is used to indicate how a web page is to be indexed within public search engine results. the header is effectively equivalent to <meta name="robots" content="...">. x-ua-compatible used by internet explorer to signal which document mode to use. ...

A re-introduction to JavaScript (JS tutorial) - JavaScript
of control structures to other languages in the c family. conditional statements are supported by if and else; you can chain them together if you like: var name = 'kittens'; if (name == 'puppies') { name += ' woof'; } else if (name == 'kittens') { name += ' meow'; } else { name += '!'; } name == 'kittens meow'; javascript has while loops and do-while loops. the first is good for basic looping; the second for loops where you wish to ensure that the body of the loop is executed at least once: while (true) { // an infinite loop! } var input; do { input = get_input(); } while (inputisnotvalid(input)); javascript's for loop is the same as that in c and java: it lets you provide the control information for your loop on a single line. for (var i = 0; i < 5; i++) { // will execute ...
...or (var i = 0, j = arguments.length; i < j; i++) { sum += arguments[i]; } return sum / arguments.length; } avg(2, 3, 4, 5); // 3.5 this is pretty useful, but it does seem a little verbose. to reduce this code a bit more we can look at substituting the use of the arguments array through rest parameter syntax. in this way, we can pass in any number of arguments into the function while keeping our code minimal. the rest parameter operator is used in function parameter lists with the format: ...variable and it will include within that variable the entire list of uncaptured arguments that the function was called with. we will also replace the for loop with a for...of loop to return the values within our variable. function avg(...args) { var sum = 0; for (let value of args) { sum...

Expressions and operators - JavaScript
for example, you can override multiplication and division first, then addition and subtraction to evaluate addition first. var a = 1; var b = 2; var c = 3; // default precedence a + b * c // 7 // evaluated by default like this a + (b * c) // 7 // now overriding precedence // addition before multipli...
...for example, you can override multiplication and division first, then addition and subtraction to evaluate addition first. var a = 1; var b = 2; var c = 3; // default precedence a + b * c // 7 // evaluated by default like this a + (b * c) // 7 // now overriding precedence // addition before multiplication (a + b) * c //...

Intl.NumberFormat.prototype.resolvedOptions() - JavaScript
ided for this property in the options argument, if present, or "standard filled in as a default. compactdisplay the value provided for this property in the options argument, or "short" filled in as a default. this property is only present if the notation is set to "compact". signdisplay the value provided for this property in the options argument, or "auto" filled in as a default. usegrouping the values provided for these properties in the options argument or filled in as defaults. currency currencydisplay the values provided for these properties in the options argument or filled in as defaults. these properties are only present if style is "currency". only one of the following two groups of properties is included: minimumintegerdigits minimumfractiondigits maximumfractiond...
... ...

TypedArray.prototype.map() - JavaScript
do so). the range of elements processed by map() is set before the first invocation of mapfn. elements which are appended to the array after the call to map() begins will not be visited by mapfn. if existing elements of the typed array are changed, or deleted, their value as passed to mapfn will be the value at the time map() visits them; elements that are deleted are not visited. ...
...the argument will automatically be assigned to each element of the typed array as map loops through the original typed array. ...

eval() - JavaScript
propname(); // returns "a" or "b" var result = obj[ propname ]; // obj[ "a" ] is the same as obj.a you can even use this method to access descendant properties. using eval() this would look like: var obj = {a: {b: {c: 0}}}; var proppath = getproppath(); // returns e.g. "a.b.c" eval( 'var result = obj.' + proppath ); avoiding eval() here could be done by splitting the property path and looping through the different properties: function getdescendantprop(obj, desc) { var arr = desc.split('.'); while (arr.length) { obj = obj[arr.shift()]; } return obj; } var obj = {a: {b: {c: 0}}}; var proppath = getproppath(); // returns e.g. "a.b.c" var result = getdescendantprop(obj, proppath); setting a property that way works similarly: function setdescendantprop(obj, desc, value) {...
...ascript syntax, many valid javascript literals will not parse as json. for example, trailing commas are not allowed in json, and property names (keys) in object literals must be enclosed in quotes. be sure to use a json serializer to generate strings that will be later parsed as json. pass data instead of code for example, an extension designed to scrape contents of web-pages could have the scraping rules defined in xpath instead of javascript code. run code with limited privileges if you must run the code, consider running it with reduced privileges. this advice applies mainly to extensions and xul applications, which can use components.utils.evalinsandbox for this. examples using eval in the following code, both of the statements containing eval() return 42. the first evaluates the st...

Operator precedence - JavaScript
ive, so 2 ** 3 ** 2 is the same as 2 ** (3 ** 2). thus, doing (2 ** 3) ** 2 changes the order and results in the 64 seen in the table above. remember that precedence comes before associativity. so, mixing division and exponentiation, the exponentiation comes before the division. for example, 2 ** 3 / 3 ** 2 results in 0.8888888888888888 because it is the same as (2 ** 3) / (3 ** 2). note on grouping and short-circuiting in the table below, grouping is listed as having the highest precedence. however, that does not always mean the expression within the grouping symbols ( … ) is evaluated first, especially when it comes to short-circuiting. short-circuiting is jargon for conditional evaluation. for example, in the expression a && (b + c), if a is falsy, then the sub-expression (b + c) will...
...true 3 > 2 > 1 // returns false because 3 > 2 is true, then true is converted to 1 // in inequality operators, therefore true > 1 becomes 1 > 1, which // is false. adding parentheses makes things clear: (3 > 2) > 1. table the following table is ordered from highest (21) to lowest (1) precedence. precedence operator type associativity individual operators 21 grouping n/a ( … ) 20 member access left-to-right … . … computed member access left-to-right … [ … ] new (with argument list) n/a new … ( … ) function call left-to-right … ( … ) optional chaining left-to-right ?. 19 new (without argument list) right-to-left new … 18 postfix...

block - JavaScript
statement in other languages. it allows you to use multiple statements where javascript expects only one statement. combining statements into blocks is a common practice in javascript. the opposite behavior is possible using an empty statement, where you provide no statement, although one is required. blocks are commonly used in association with if...else and for statements. examples block scoping rules with var or function declaration in non-strict mode variables declared with var or created by function declarations in non-strict mode do not have block scope. variables introduced within a block are scoped to the containing function or script, and the effects of setting them persist beyond the block itself. in other words, block statements do not introduce a scope. for example: var x = 1...
... of setting them persist beyond the block itself. in other words, block statements do not introduce a scope. for example: var x = 1; { var x = 2; } console.log(x); // logs 2 this logs 2 because the var x statement within the block is in the same scope as the var x statement before the block. in non-strict code, function declarations inside blocks behave strangely. do not use them. block scoping rules with let, const or function declaration in strict mode by contrast, identifiers declared with let and const do have block scope: let x = 1; { let x = 2; } console.log(x); // logs 1 the x = 2 is limited in scope to the block in which it was defined. the same is true of const: const c = 1; { const c = 2; } console.log(c); // logs 1 and does not throw syntaxerror... note that the blo...

Autoplay guide for media and Web Audio APIs - Web media technologies
n be jarring, inconvenient, or off-putting. because of that, browsers generally only allow autoplay to occur successfully under specific circumstances. autoplay availability as a general rule, you can assume that media will be allowed to autoplay only if at least one of the following is true: the audio is muted or its volume is set to 0 the user has interacted with the site (by clicking, tapping, pressing keys, etc.) if the site has been whitelisted; this may happen either automatically if the browser determines that the user engages with media frequently, or manually through preferences or other user interface features if the autoplay feature policy is used to grant autoplay support to an <iframe> and its document. otherwise, the playback will likely be blocked. the exact situations...
...ally initiated in a tab which has not yet had any user interaction. browsers may additionally choose to block under other circumstances. autoplay of media elements now that we've covered what autoplay is and what can prevent autoplay from being allowed, we'll look at how your web site or app can automatically play media upon page load, how to detect when autoplay fails to occur, and tips for coping when autoplay is denied by the browser. the autoplay attribute the simplest way to automatically play content is to add the autoplay attribute to your <audio> or <video> element. this sets the autoplay property on the element to true, and when autoplay is true, the media will automatically begin to play as soon as possible after the following have occurred: the page is allowed to use autopla...

Web audio codec guide - Web media technologies
t human speech rather than a broad range of sounds. human speech generally resides within the audio frequency range of 300 hz to 18 khz. however, the vast majority of human vocalizations exist in the range 300 hz to 8 khz, and you can capture enough of human vocalizations in the frequency range 500 hz to 3 khz to still be understandable. for that reason, speech-specific codecs often begin by dropping sound that falls outside a set range. that range is the audio frequency bandwidth. g.722, for example, strips away sounds outside the audio frequency bandwidth of 50 hz to 7 khz. this reduces the amount of data that needs to be encoded from the outset. codec details below we take a brief look at each of these codecs, looking at their basic capabilities and their primary use cases. aac (advance...
...in ogg and mpeg-4 (mp4) files. firefox only supports apple lossless through its platform-specific quicktime support. firefox doesn't support mp4 als. in this case, it appears that flac is most likely the best codec to go with; alac has little to no direct browser support. audio encoding software there are many tools available for encoding audio. the simplest are those which are meant for ripping cds or pulling in audio files and quickly and automatically converting them to mp3 or aac format to store in a library, such as itunes. but when developing web apps that use audio as a component of the app, such as games, you will need more control over the encoding process and more options surrounding the format used while encoding the audio. a few popular options: ffmpeg arguably the best-...

Image file type and format guide - Web media technologies
a n/a jpeg does not support an alpha channel. true color with alpha n/a jpeg does not support an alpha channel. compression lossy; based on the discrete cosine transform licensing as of october 27, 2006, all united states patents have expired. png (portable network graphics) the png (pronounced "ping") image format uses lossless or lossy compression to provide more efficient compression, and supports higher color depths than gif, as well as full alpha transparency support. png is widely supported, with all major browsers offering full support for its features. internet explorer, which introduced png support in versions 4–5, did not fully support it until ie 9, and had many infamous bugs fo...
... visually similar compression levels. lossless webp images are typically 26% smaller than the same images in png format. webp also supports animation: in a lossy webp file, the image data is represented by a vp8 bitstream, which may contain multiple frames. lossless webp holds the anim chunk, which describes the animation, and the anmf chunk, which represents a frame of an animation sequence. looping is supported. webp now has broad support in the latest versions of major web browsers, although it does not have deep historical support. provide a fallback in either jpeg or png format, such as with the <picture> element. mime type image/webp file extension(s) .webp specification riff container specification rfc 6386: vp8 data format and decoding g...

Optimizing startup performance - Web Performance
tablish a function to be executed before the main thread is allowed to continue. by establishing a queue of functions to be called in sequence, you can more easily manage running bits of code without blocking the main thread. that leaves, though, the problem of having to refactor your existing code to actually work that way. that can take some time. how asynchronous should i get? it's worth keeping in mind that most browsers typically start complaining that your script is blocking the main thread for too long at around 10 seconds or so. ideally, you won't block anywhere near that long, but as long as you keep it below that, you should be okay. keep in mind, though, that if someone has an older, slower computer than yours, they may experience longer delays than you do! other suggestions th...
...ions there are other things beyond going asynchronous, which can help you improve your app's startup time. here are a few of them: download time keep in mind how long it will take the user to download your game's data. if your game is really big, really popular, or has to re-download content frequently, you should try to have as fast a hosting server as possible. you should also consider gzipping your data to make it as small as you can. gpu factors compiling shaders and uploading textures to the gpu can take time, especially for really intricate games. while this happens with native (non-web) games too, it can still be pretty annoying. avoid doing this without keeping the user apprised that the game is in fact still starting up. data size do your best to optimize the size of your gam...

Web Performance
ce of your web content on these platforms. this article looks at mobile-specific performance considerations. using performance apis performance api this guide describes how to use the performance interfaces that are defined in the high-resolution time standard. resource timing api resource loading and timing the loading of those resources, including managing the resource buffer and coping with cors the performance timeline the performance timeline standard defines extensions to the performance interface to support client-side latency measurements within applications. together, these interfaces can be used to help identify an application's performance bottlenecks. user timing api create application specific timestamps using the user timing api's "mark" and "measure" entry types...
...erience, often ad bloat, third-party scripts, and other features that can slow down web performance. to help set priorities, it is helpful to set a performance budget: a set of restrictions to not exceed during the development phase. in this article, we'll discuss creating and sticking to a performance budget. web performance checklist a performance checklist of features to consider when developing applications with links to tutorials on how to implement each feature, include service workers, diagnosing performance problems, font loading best practices, client hints, creating performant animations, etc. mobile performance checklist a concise checklist of performance considerations impacting mobile network users on hand-held, battery operated devices. ...

Privacy, permissions, and information security
web site queries a user's browser for the elapsed time, a comparison of that time to the time as reported by the server might be useful as a factor in fingerprinting. because of this, browsers typically introduce a small amount of variability to timers in order to make them less useful for identifying the user's system. privacy and security controls there are multiple layers of controls for helping to protect users against security and privacy breaches. these start at the web server, include the very communication layer used over the network, and then extend through the web browser's security offerings before reaching your web app code and the efforts it takes to secure itself and the data the user entrusts to it. there are several web technologies and features at play to manage privacy a...
...curity and privacy by encrypting data during transport over the network. this is the technology behind the https (hypertext transport protocol secured) protocol not all of these are generally directly used within code; notably, the permissions api, feature policy, and the allow attribute on <iframe> elements are primary tools directly used by code to help secure a site and its content. ...

How to make PWAs installable - Progressive web apps (PWAs)
obile and desktop browers that support doing so. the installed web app can then be launched by users just as if it were any native app. this article explains how to achieve this using the web app's manifest. these technologies allow the app to be launched directly from the device's home screen, rather than the user having to open the browser and then navigate to the site by using a bookmark or typing the url. your web app can sit next to native applications as first class citizens. this makes the web app easier to access; additionally, you can specify that the app be launched in fullscreen or standalone mode, thus removing the default browser user interface that would otherwise be present, creating an even more seamless and native-like feel. requirements to make the web site installable, it...
... a web manifest, with the correct fields filled in the web site to be served from a secure (https) domain an icon to represent the app on the device a service worker registered, to allow the app to work offline (this is required only by chrome for android currently) currently, only the chromium-based browsers such as chrome, edge, and samsung internet require the service worker. if developing your app using firefox, be aware that you will need a service worker to be compatible with chromium-based browsers. the manifest file the key element is a web manifest file, which lists all the information about the website in a json format. it usually resides in the root folder of a web app. it contains useful information, such as the app’s title, paths to different-sized icons that can be...

Introduction to progressive web apps - Progressive web apps (PWAs)
b apps are more discoverable than native apps; it's a lot easier and faster to visit a website than to install an application, and you can also share web apps by simply sending a link. on the other hand, native apps are better integrated with the operating system and therefore offer a more seamless experience for the users. you can install a native app so that it works offline, and users love tapping their icons to easily access their favorite apps, rather than navigating to it using a browser. pwas give us the ability to create web apps that can enjoy these same advantages. it's not a brand new concept—such ideas have been revisited many times on the web platform with various approaches in the past. progressive enhancement and responsive design already allow us to build mobile friendly w...
...notifications api for generating system notifications to help engage users when they're not actively using their web browser. responsiveness responsive web apps use technologies like media queries and viewport to make sure that their uis will fit any form factor: desktop, mobile, tablet, or whatever comes next. safety the web platform provides a secure delivery mechanism that prevents snooping while simultaneously ensuring that content hasn’t been tampered with, as long as you take advantage of https and develop your apps with security in mind. it's also easy for users to ensure that they're installing the right app, because its url will match your site's domain. this is very different from apps in app stores, which may have a number of similarly-named apps, some of which may even b...

Graphic design for responsive sites - Progressive web apps (PWAs)
in 1996, many people involved in building the web would have laughed at you if you had told them that less than 20 years in the future we would be developing web sites that worked well on mobile phones, tablets, tvs, even cars and home lighting. but today it is very much a reality. this article provides a high level discussion aimed at helping you to choose the best option for your graphical needs. textual content is not a problem, as text boxes are innately responsive, but the picture starts to get ugly when you start including graphics and complex layouts on your pages — especially when those graphics and layouts need to adapt to different displays! this is why we have included an entire docs section covering each of these topics (the one you are currently in, and app layout.) ...
...obile device, the mobile will only download the mobile assets, and not the desktop resource assets. making html <img>s responsive is not as easy, as there is currently no native mechanism to serve different html images depending on context. there are a number of workarounds, but none of them are perfect right now. for an overview of what's available, read choosing a responsive image solution. coping with different resolutions in this section we'll review different strategies for dealing with getting images to work across devices with different resolutions. the issue here is that raster images, when rendered on high res devices, are in danger of appearing tiny because the same number of pixels is being shown in a much smaller screen space. most hi res devices apply a default zoom factor to t...

Mobile first - Progressive web apps (PWAs)
as an option, especially if you are experiencing slow or laggy performance when your application is running on mobile. control mechanisms control mechanisms are another large constraint on mobile devices. anyone who has ever tried to enter data into a form on a mobile device, or even just navigated around a complex site, knows this well. therefore we should try to simplify things on mobile, keeping each view cut down to a single, simple purpose where possible, and reducing the amount of typing users are expected to do. the latter will please desktop users as well as mobile users! usage context on top of everything else, you must consider the kinds of situations mobile devices will be used in, and the kinds of tasks users most commonly want to perform on mobiles. a phrase you'll read in a ...
...w much of the user's attention you are likely to have. of course, your users will be concentrating on what they're doing, but they are likely to be in a car with bad lighting, or in a noisy bar with the sport on tv in the background! you need to consider this, and again make sure your content/functionality is simple, legible and distraction-free as much as possible. mobile navigation when developing mobile app layouts, you often run into problems with navigation menus. the concept is the same regardless of the target device — you want to provide a mechanism for users to search for things and get to different views/pages of the application — but because mobile screens are so much smaller, a reasonable desktop navigation can spoil the experience by filling up most of the initial view of th...

display - SVG: Scalable Vector Graphics
. this means that any child of an element with display="none" will never be rendered even if the child has a value for display other than none. when the display attribute is set to none, then the given element does not become part of the rendering tree. it has implications for the <tspan>, <tref>, and <altglyph> elements, event processing, for bounding box calculations and for calculation of clipping paths: if display is set to none on a <tspan>, <tref>, or <altglyph> element, then the text string is ignored for the purposes of text layout. regarding events, if display is set to none, the element receives no events. the geometry of a graphics element with display set to none is not included in bounding box and clipping paths calculations. the display attribute only affects the direct r...
...display value of none. this attribute also affects direct rendering into offscreen canvases, such as occurs with masks or clip paths. thus, setting display="none" on a child of a <mask> will prevent the given child element from being rendered as part of the mask. similarly, setting display="none" on a child of a <clippath> element will prevent the given child element from contributing to the clipping path. note: as a presentation attribute, display can be used as a css property. see css display for further information. as a presentation attribute, it can be applied to any element. html, body, svg { height: 100%; } <svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <!-- here the yellow rectangle is displayed --> <rect x="0" y="0" width="100" height="100" fill="skyblue"...

<clipPath> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 100 100"> <clippath id="myclip"> <!-- everything outside the circle will be clipped and therefore invisible. --> <circle cx="40" cy="35" r="35" /> </clippath> <!-- the original black heart, for reference --> <path id="heart" d="m10,30 a20,20,0,0,1,50,30 a20,20,0,0,1,90,30 q90,60,50,90 q10,60,10,30 z" /> <!-- only the portion of the red heart inside the clip circle is visible. ...
...50,90 q10,60,10,30 z" /> <!-- only the portion of the red heart inside the clip circle is visible. --> <use clip-path="url(#myclip)" xlink:href="#heart" fill="red" /> </svg> /* with a touch of css for browsers who * * implemented the r geometry property. */ @keyframes openyourheart {from {r: 0} to {r: 60px}} #myclip circle { animation: openyourheart 15s infinite; } a clipping path is conceptually equivalent to a custom viewport for the referencing element. thus, it affects the rendering of an element, but not the element's inherent geometry. the bounding box of a clipped element (meaning, an element which references a <clippath> element via a clip-path property, or a child of the referencing element) must remain the same as if it were not clipped. by default, pointer...

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
aving systemlanguage attribute according to allowreorder smil attribute implementation status unknown made <tspan> and <textpath> graphics elements implementation status unknown allow x, y, width, and height on <symbol> implementation status unknown made <use> element shadow trees consistent with shadow dom spec implementation status unknown role mapping of <a> element depending on whether it is a valid link implementation status unknown aria state and property attributes animatable implementation status unknown styling change notes contentstyletype attribute removed implementation status unknown linkstyle on svgstyleelement implemented (bug 1239128 (firefox 46.0 / thunderbird 46.0 / ...
...mplemented (bug 1238882) <meshrow> (renamed meshrow) not implemented (bug 1238882) <meshpatch> (renamed meshpatch) not implemented (bug 1238882) <hatch> not implemented (bug 1239147) <hatchpath> (renamed hatchpath) not implemented (bug 1239147) display behavior of paint server elements defined by ua style sheet not implemented clipping, masking, and compositing change notes overflow respected on outermost <svg> elements inline in html implementation status unknown interactivity change notes tabindex attribute implemented (bug 778654) bounding-box on pointer-events not implemented (bug 945187) load, abort, error, and unload instead of svgload, ...

SVG Tutorial - SVG: Scalable Vector Graphics
ternet explorer and other browsers. this tutorial aims to explain the internals of svg and is packed with technical details. if you just 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. ...
...ood 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 creating fonts in svg tbd ...

2015 MDN Fellowship Program - Archive of obsolete content
avascript, css, html. knowledge of server-side development, caching and network layers preferred. mentor information harald kirschner, web craftsman. github: digitarald twitter: @digitarald curriculum development brief project description mdn serves as a trusted resource for literally millions of developers on a regular basis. in 2015, mdn will expand the impact of this content by developing kits of key learning materials, including such elements as code samples, videos and other elements being finalized. activities and deliverables act as lead curator for technical curriculum addressing a key web technology, developing code samples, videos, interactive exercises and other components to be determined. you may propose your own subject area (examples: virtual reality on the web, netw...

Modules - Archive of obsolete content
compartment is a separate memory space. each compartment has a set of privileges that determines what scripts running in that compartment can and cannot do. we will show how sandboxes and compartments can be used to improve security in our module system. the module system used by the sdk is based on the commonjs specification: it is implemented using a loader object, which handles all the bookkeeping related to module loading, such as resolving and caching urls. we show how to create your own custom loaders, using the loader constructor provided by the sdk. the sdk uses its own internal loader, known as cuddlefish. all modules within the sdk are loaded using cuddlefish by default. like any other custom loader, cuddlefish is created using the loader constructor. in the final section, we will t...

Private Properties - Archive of obsolete content
x = function () { return internal(this).x; }; point.prototype.setx = function (x) { internal(this).x = x; }; point.prototype.gety = function () { return internal(this).y; }; point.prototype.sety = function (y) { internal(this).y = y; }; the only way for a function to access the properties x and y, is if it has a reference to an instance of point and its internal namespace. keeping the namespace hidden from all functions, except members of point, effectively implements private properties. moreover, because members of point have a reference to the internal namespace, they can access private properties on other instances of point. namespaces in the add-on sdk the add-on sdk is built on top of xpcom, the interface between javascript and c++ code. since xpcom allows the user ...

Module structure of the SDK - Archive of obsolete content
e thus made available to dependent code. commonjs defines: an object called exports which contains all the objects which a commonjs module wants to make available to other modules a function called require which a module can use to import the exports object of another module. except for scripts that interact directly with web content, all the javascript code you'll write or use when developing add-ons using the sdk is part of a commonjs module, including: sdk modules: the javascript modules which the sdk provides, such as panel and page-mod. local modules: each of the javascript files under your add-on's "lib" directory. external modules: reusable modules developed and maintained outside the sdk, but usable by sdk-based add-ons. sdk modules the modules supplied by the sdk are d...

page-mod - Archive of obsolete content
ent is loaded into its own execution context with its own copy of the content scripts. in this case the listener assigned to onattach is called once for each loaded document, and the add-on code will have a separate worker for each document. to learn much more about communicating with content scripts, see the guide to content scripts and in particular the chapter on communicating using port. mapping workers to tabs the worker has a tab property which returns the tab associated with this worker. you can use this to access the tabs api for the tab associated with a specific document: var pagemod = require("sdk/page-mod"); var tabs = require("sdk/tabs"); pagemod.pagemod({ include: ["*"], onattach: function onattach(worker) { console.log(worker.tab.title); } }); destroying workers ...

simple-prefs - Archive of obsolete content
", "type": "bool", "name": "hastentacles", "value": true, "title": "tentacles" } boolint displayed as a checkbox and stores an integer. a boolint is presented to the user as a checkbox, but instead of storing true or false, the "on" or "off" checkbox states are mapped to integers using "on" or "off" properties in the specification. to provide this mapping the boolint requires two mandatory attributes called "on" and "off", both of which are supplied as strings. note that even so, the "value" property is supplied as an integer. { "type": "boolint", "name": "myboolint", "on": "1", "off": "2", "value": 1, "title": "my boolint" } integer displayed as a textbox and stores an integer. { ...

io/file - Archive of obsolete content
path which you could then use with join. for now, you need to require("chrome") and use the xpcom directory service as described in this article about file i/o. note that if you do decide to hardcode windows-style paths, be sure to escape backslashes in strings. for example, to specify the file at c:\users\myk, you need to use the string "c:\\users\\myk", not "c:\users\myk". read more about escaping characters in strings. globals functions basename(path) the path parameter must be an absolute path, relative paths will cause an error. use the fs/path module for relative path support. returns the last component of the given path. for example, basename("/foo/bar/baz") returns "baz". if the path has no components, the empty string is returned. parameters path : string the path of a fi...

lang/functional - Archive of obsolete content
version of the function which, when invoked, will not be executed until it has not been invoked for wait milliseconds. this means that if the function's called many times in quick succession the function will only execute once, after the blizzard of calls has finished. this could be useful, for example, if we are checking the user's keyboard input, and want to wait until they've paused in their typing before we do so. parameters fn : function the function to debounce. wait : integer the number of milliseconds to wait before the function is executed. returns function : the debounced version of fn. throttle(fn, wait, options) this function is new in firefox 30. from underscore's throttle() function: this takes a function and returns a new version of the function which, when invoked r...

system/xul-app - Archive of obsolete content
st application. for example, for firefox this value is "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}". name the host application name. the possible values here are: "firefox" "fennec" "mozilla" "seamonkey" "sunbird" "thunderbird" "firefox"and"fennec"` are the most commonly used values. version the host application version. platformversion the gecko/xulrunner platform version. ids a mapping of application names to their ids. for example, ids["firefox"] == "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}". ...

cfx to jpm - Archive of obsolete content
load. instead of using --force-mobile, explicitly add fennec to engines section of your package.json. package.json fields many package.json fields are implicit commands to cfx. in jpm, we've removed support for some of these fields, and are still working on supporting some others. permanently removed fields data fullname - use title instead lib packages tests icon64 package.json escaping where with cfx you might have had to escape with 2 upto 3 backslashes ( \ ), jpm only needs one now. ...

console - Archive of obsolete content
enables your add-on to log error, warning or informational messages. if you have started firefox for your add-on from the command line with jpm run or jpm test then these messages appear in the command shell you used. 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. console methods all console methods except exception() and trace() accept one or more javascript objects as arguments and log them to the console. depending on the console's...

Display a Popup - Archive of obsolete content
onkeyup(event) { if (event.keycode == 13) { // remove the newline. text = textarea.value.replace(/(\r\n|\n|\r)/gm,""); self.port.emit("text-entered", text); textarea.value = ''; } }, false); // listen for the "show" event being sent from the // main add-on code. it means that the panel's about // to be shown. // // set the focus to the text area so the user can // just start typing. self.port.on("show", function onshow() { textarea.focus(); }); finally, the "text-entry.html" file defines the <textarea> element: <html> <head> <style type="text/css" media="all"> textarea { margin: 10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> </body> <...

Getting Started (jpm) - Archive of obsolete content
u wish to distribute the add-on on your own server. summary in this tutorial we've built and packaged an add-on using three commands: jpm init to initialize an empty add-on template jpm run to run a new instance of firefox with the add-on installed, so we can try it out jpm xpi to package the add-on into an xpi file for distribution these are the three main commands you'll use when developing sdk add-ons. there's comprehensive reference documentation covering all the commands you can use and all the options they take. the add-on code itself uses two sdk modules, action button and tabs. there's reference documentation for all the high-level and low-level apis in the sdk. what's next? to get a feel for some of the things you can do with the sdk apis, try working through some of the t...

Listening for Load and Unload - Archive of obsolete content
string describing the reason it was loaded as well as any arguments passed to it. if your add-on exports a function called onunload(), then that function will be called when the add-on is unloaded, and it will be passed a string describing the reason it was unloaded. you don't have to use exports.main() or exports.onunload(). you can just place your add-on's code at the top level instead of wrapping it in a function assigned to exports.main(). it will be loaded in the same circumstances, but you won't get access to the load/unload reason or arguments. exports.main() your add-on's main.js code is executed as soon as it is loaded. it is loaded when it is installed, when it is enabled, or when firefox starts. if your add-on exports a function called main(), that function will be called immed...

Modifying Web Pages Based on URL - Archive of obsolete content
uleset</h1>";' }); do as follows: create a new directory and navigate to it. run jpm init, accepting all the defaults open the file index.js and add the code above run jpm run open ietf.org in the browser window that opens. below is what you should see. specifying the match pattern match pattern uses match-pattern syntax. you can pass a single match-pattern string, or an array. keeping the content script in a separate file in the example above, we've supplied content script as a string. unless the script is extremely simple, maintain the script as a separate file though. this makes the code easier to maintain, debug, and review. to do this, you need to: save the script in add-on's data directory. use contentscriptfile option instead of contentscript and pass it script url...

Modifying the Page Hosted by a Tab - Archive of obsolete content
reates a button with mozilla favicon as an icon. it has a click handler which fetches the active tab and loads a script into the page hosted by the active tab. the script is specified using the contentscript option, and just draws a red border around the page. then open any web page in the browser window, and click the button . you should see a red border appear around the page, like this: keeping content scripts in a separate file in the example above, we've passed in content script as a string. unless script is extremely simple, maintain the script as a separate file in add-on's data directory. this makes the code easier to maintain, debug, and review. to do this, provide option contentscriptfile not contentscript, whose value is a url pointing to one or more content script files. for...

Localization - Archive of obsolete content
e different plural forms used by different languages. unicode cldr plural forms the unicode cldr project defines a scheme for describing a particular language's plural rules. in this scheme a language maps each distinct range of numbers on to one of up to six forms, identified by the following categories: zero, one, two, few, many, and other. ...

Tutorials - Archive of obsolete content
troubleshooting some pointers for fixing common problems and getting more help. getting started walkthrough of creating a simple add-on with the sdk, using jpm. 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. ...

Forms related code snippets - Archive of obsolete content
>&nbsp;</td> </tr> </tbody> </table> editable <select> fields the content of the <select> element is actually static and not editable. if you want to emulate an editable select through a <fieldset> of radioboxes and textboxes (written in pure css, without javascript), please see this example. autogrowing <textarea> this example shows how to make a textarea really autogrowing during a typing. insert some custom text in a <textarea> this example shows how to insert some html tags or smiles or any custom text in a textarea. image preview before upload the filereader.prototype.readasdataurl() method can be useful, for example, to get a preview of an image before uploading it.[article] this example shows how to use it in this way. note: the filereader() constructor was not supported...

Examples and demos from articles - Archive of obsolete content
iter with unicode support. xml to json conversion snippets (jxon) jxon (lossless javascript xml object notation) is a generic name by which is defined the representation of javascript objects using xml. there are no real standards for this conversion, but some conventions begin to appear on the web. autogrowing <textarea> this example shows how to make a textarea really autogrowing during a typing. insert some custom text in a <textarea> this example shows how to insert some html tags or smiles or any custom text in a textarea. 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 a...

HTML in XUL for rich tooltips - Archive of obsolete content
he mouse is over (which will soon launch the tooltip) var txt = event.target.getattribute("tooltiphtml"); // get the html div element that is inside the custom xul tooltip var div = document.getelementbyid("myhtmltipdiv"); //clear the html div element of any prior shown custom html while(div.firstchild) div.removechild(div.firstchild); //safely convert html string to a simple dom object, stripping it of javascript and more complex tags var injecthtml = components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscriptableunescapehtml) .parsefragment(txt, false, null, div); //attach the dom object to the html div element div.appendchild(injecthtml); } } window.addeventlistener('load', htmltip.onload, false); in the xul overlay, xmlns:html is used to ena...

Preferences - Archive of obsolete content
var prefservice = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice); this._branch = prefservice.getbranch(branch_name); this._branch.queryinterface(components.interfaces.nsiprefbranch2); this._callback = callback; } preflistener.prototype.obser...

Progress Listeners - Archive of obsolete content
ovide a callback. remember to change mylistener to a unique identifier. example: notification when the value in address bar changes a commonly asked question is how to get notified whenever the url in the address bar (also known as location bar) changes. using the following code, you will get notified when user navigates to another page (by clicking a link, using the back/forward button, by typing an address in the location bar, etc.) and also when user switches tabs. var myextension = { oldurl: null, init: function() { gbrowser.addprogresslistener(this); }, uninit: function() { gbrowser.removeprogresslistener(this); }, processnewurl: function(auri) { if (auri.spec == this.oldurl) return; // now we know the url is new... ...

getAttributeNS - Archive of obsolete content
return thisitem.getattribute('xml:'+nsatt); // prefix must be 'xml' per the specs } var attrs2, result; var attrs = thisitem.attributes; var prefixatt = new regexp('^(.*):'+nsatt.replace(/\./g, '\\.')+'$'); // e.g., xlink:href // find any prefixes with the local-name being searched (escape period since only character (besides colon) allowed in an xml name which needs escaping) for (var j = 0; j < attrs.length; j++) { // thisitem's atts // e.g., abc:href, xlink:href while (((result = prefixatt.exec(attrs[j].nodename)) !== null) && thisitem.nodename !== '#document' && thisitem.nodename !== '#document-fragment') { var xmlnsprefix = new regexp('^xmlns:'+result[1]+'$'); // e.g., xmnls:xl, xmlns:xlink // check higher ...

Communication between HTML and your extension - Archive of obsolete content
i wanted to do was have an extension "look" for something on an html page and if it found that something perform some operation on the found thing and then update the status bar with the results of the operation. with a lot of help from irc://irc.mozilla.org#js and irc://irc.mozilla.org#extdev i was able to get it running pretty well, 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 a...

Default Preferences - Archive of obsolete content
remember that preferences are held in two separate trees. one with user supplied prefs, another with default prefs. user supplied prefs are set using the gui and also by modifying a profile's prefs.js file (which uses the user_pref() function). default preferences are set similarly but inside an extension and use the pref() function. ...

Enhanced Extension Installation - Archive of obsolete content
e" items. ("active" items are items that are enabled.) a whole new world install locations we have several targets for where items can be installed. these include: the application profile directory <profile>/extensions/ the application install directory <application>/extensions/ any location specified in a text file with a {guid} name placed in one of the above locations, useful for developing extensions at another location, e.g. a nfs home directory and simply placing a text "link" file in the applicable directory above that links to the location of the extension in its installed state at the other location. any location specified in a guid-to-path registry key mapping, e.g. [hklm|hkcu]\software\mozilla\firefox\extensions given these goals, and the likelihood of future goals, such ...

Installing Extensions and Themes From Web Pages - Archive of obsolete content
isn't whitelisted, and since it was updateenabled that discovered this, not a call to install, there will be no notification to the user. ...

Jetpack Processes - Archive of obsolete content
hich point it is garbage collected. handles have the following native methods and properties: invalidate() invalidates the handle. either process may invalidate a handle when it is no longer useful. createhandle() creates a child handle which becomes invalid when its parent does. this is useful for associating handles to the lifetime of a particular window, context menu, or other element, and helping ensure that they do not leak. parent the parent handle of the object, if any. read-only. isvalid whether the handle is still valid or not. read-only. isrooted whether the handle is gc rooted or not. read-write. oninvalidate a callback to call when the handle is garbage collected, either through an explicit call to invalidate() or being unrooted and then unreachable. the callback is only called fr...

Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
"nscrt.h" + #include "nsmemory.h" + #include "nscrtglue.h" prunichar* anotherstr = (prunichar*) ns_alloc(100 * sizeof(prunichar)); - prunichar *str = nscrt::strdup(anotherstr); - nscrt::free(str); + prunichar *str = ns_strdup(anotherstr); + ns_free(str); linking for information about the correct libraries to link to when using frozen linkage, see xpcom glue. the nsmsgutils.h header for developing core mail/news code, the nsmsgutils.h header is being enhanced to fill in some of the gaps caused by the differences between the internal and external apis. these enhancements make it easier to write code that will transparently compile using either api. the list of enhancements fall in to three categories. changes to internal apis to make them compatible with the external api. #define caseinsen...

Chapter 1: Introduction to Extensions - Archive of obsolete content
asn't adequate documentation available, and extension developers were largely left to fend for themselves1; however, now there's a considerable store of knowledge. because firefox and its extensions are designed to support multiple languages, excellent extensions come from all over the world, and can be quickly localized by anyone interested. this lowers the threshold both to using and to developing extensions; that fact, combined with firefox's rapidly growing popularity, has created a positive feedback loop, with the number of extension users and extension developers growing explosively—there are now more than 7000 extensions and themes published at the firefox add-ons site (https://addons.mozilla.org). what you can do with extensions let's look at what features extensions can add, and...

Firefox addons developer guide - Archive of obsolete content
the firefox add-ons developer guide was contributed by the mozilla japan community; it covers how to go about building firefox extensions using xpcom and xul. ...

Adding Events and Commands - Archive of obsolete content
ion very well. this should give you a solid foundation to handle interaction between web content and xul. additional information on custom events and how they can be used to effect communication between web content and xul can be found in the interaction between privileged and non-privileged pages code snippets, which describe and provide examples of this sort of communication. broadcasters keeping a consistent ui is another important aspect of extension behavior. maybe your extension needs to disable or enable a series of controls when the user logs in or out of a service, or when firefox detects it's online or offline. it's common that you need to change several elements at the same time, and this can be difficult to manage through javascript. the broadcaster element can help you out in t...

Adding menus and submenus - Archive of obsolete content
xulschoolchrome.greetingdialog.greetingcustom(event);" /> </menupopup> </menu> </menubar> </toolbox> this code displays a simple menu with options for 3 different types of greetings, a menuseparator, and finally an option to show a custom greeting. the separator is usually displayed as a horizontal line that creates a logical division between different types of menuitem elements, keeping everything more organized. a menubar can hold one or more menu elements. menus require a menupopup element as a container for its children, which are usually menuitem elements, but can also be menuseparator, or menu in order to have multiple nesting levels: <toolbox> <menubar id="xulschoolhello-menubar"> <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;"> ...

Appendix B: Install and Uninstall Scripts - Archive of obsolete content
bably best to keep it simple. uninstall scripts there are two common cases for needing these: cleaning up local data and presenting an uninstall feedback form. regarding local data, it is debatable if it is good practice to remove it or not. if an add-on is uninstalled and later installed again, it might be desirable for preferences and other settings to be kept. another argument in favor of keeping that data is that firefox doesn't delete its profile folders after it is uninstalled, so it would be consistent to keep it. on the other hand, local data that is no longer needed takes unnecessary disk space and can contain private information that users forget is there. it's up to the developer's discretion. uninstalling an add-on happens in 2 stages: first the add-on is flagged to be uninstall...

Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
d by a short-hand/arrow function: function addtab(auri) tabbrowser.addtab(auri); var addtab = (auri) => tabbrowser.addtab(auri); same as with "passing functions/code as strings" above, patching a function to with fragments of externally retrieved data will create security vulnerabilities. alternative: replace + function.apply() you may replace the original function with a new function, keeping a reference to the original function which you then call from the new one. // wrap in an anonymous function (which is called immediately). // this will encapsulate local variables such as _original and // not pollute the global namespace. (function() { // keep a reference to the original function. var _original = gbrowser.addtab; // override a function. gbrowser.addtab = function() { ...

Appendix F: Monitoring DOM changes - Archive of obsolete content
n read more about event delegation here. it is important to note, however, that this method can have severe performance implications for certain events, namely mouseover, mouseout, and friends, which are fired very often while the mouse is moving. monkey patching in many instances, especially when dealing with chrome code, the best way to modify actions which result in dom mutations is by wrapping the functions that trigger those changes. for instance, when you want to modify the result of dom mutations that you know are the result of the doawesomedomstuff() function, you can wrap it as follows: { let originaldoawesomedomstuff = doawesomedomstuff; doawesomedomstuff = function _doawesomedomstuff() { let res = originaldoawesomedomstuff.apply(this, arguments); ...

Connecting to Remote Content - Archive of obsolete content
l situations were you may want to use xslt: convert a large xml document directly into xul. filter a complex xml file and generate a simpler xml document with only the data you need, so then you can use regular dom functions to read it. convert xml into sql statements. you could use this to generate a script to run on your local database. you would of course need to be very careful about escaping characters and protecting yourself against sql injection attacks. convert xml into rdf. this was more useful when rdf was the default storage format. you can still use rdf as an intermediate format, though, and then use templates to generate xul and display the data. http debugging when you start debugging http requests, you may find it hard to know exactly what data was sent, especially with...

Custom XUL Elements with XBL - Archive of obsolete content
is to use the extends attribute of the binding element: <binding id="manager" extends="chrome://xulschoolhello/content/person.xml#person"> this gives you an exact copy of the "person" binding that you can override as you please. you could, for instance, just add a content tag with significantly different xul content, and leave the implementation alone. you do need to be careful about keeping all anonid attributes consistent, and even some dom structure if the code does node traversal. sadly, you can't override only some part of the content. if you want to override it, you have to override all of it. a more common inheritance use case is when you want to change the behavior of some methods and properties. you can leave the content alone by not including the content tag, and then just...

Handling Preferences - Archive of obsolete content
g into the preferences list and see if you can find the preference you need. mdc articles and other guides are usually good at specifying the preferences you'll need to use. adding preferences to an extension extensions can read and write firefox preferences and, most importantly, create and manage their own. the preferences system provides a simple, unified storage facility for name / value mappings. when your storage needs are more complicated than this, you'll need more advanced apis that will be discussed in a section further ahead. to add preferences to your extension you should first create a js preferences file that describes the preferences and their default values, although setting defaults is not required. as mentioned earlier, a preference with no default value can be set later o...

Setting Up a Development Environment - Archive of obsolete content
file makefile specifies which profile folder the add-on will be reinstalled to. this is set in the profile_dir variable (set to "xulschool-dev" in this case). when creating a development profile for your add-on, make sure you choose an easy name for the profile folder, and set it in your makefile in order to take advantage of the install command. building idl files some extensions require developing xpcom components to add certain advanced functions. there's a section dedicated to xpcom in this tutorial, but we'll briefly discuss the impact it has on building the extension. you can skip this section and keep it present as a reference in case you do need to use xpcom in your project. xpcom interfaces are defined using idl files. these are text files that define the attributes and methods in ...

The Essentials of an Extension - Archive of obsolete content
le in the hello world extension, the chrome path is chrome://xulschoolhello/locale/browseroverlay.dtd. firefox knows what locale to look for. here's an interesting experiment. open a new firefox tab, type chrome://mozapps/content/downloads/downloads.xul on your location bar and press enter. surprised? you just opened the downloads window in a firefox tab! you can access any chrome file by just typing its uri in the location bar. this can come in handy if you want to inspect script files that are part of firefox, other extensions, or your own. most of these files are opened as text files, with the exception of xul files, which are executed and displayed like you would normally see them on a window. content there are 2 files in the content directory. let's look at the xul file first. xul fil...

Useful Mozilla Community Sites - Archive of obsolete content
amo amo (mozilla add-ons) is the official mozilla repository for add-ons. it allows you to upload, search and download all types of add-ons for mozilla applications. this is the best way to get your extension to users from all around the world. adding your extension to amo is easy. all you need is your xpi, a few screenshots (good ones will make your extension much more appealing), and a few minutes to fill a couple of forms. ...

Supporting search suggestions in search plugins - Archive of obsolete content
query urls, you might return the following json: ["fir", ["firefox", "first choice", "mozilla firefox"]] note that in this example, only the query string and completion array are specified, leaving out the optional elements. your completion list can include as many suggestions as you like, although it should be kept manageable, given that the display will be updating live while the user is typing their search string. in addition, the method you use to select suggestions is entirely up to you. note: firefox requires that suggest requests complete within 500ms for suggestions to be displayed. if the request for the suggest url does not return data before 500ms have elapsed, no search suggestions will be shown. ...

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
f all, since wired news is a heavily ad-supported site, our advertising units were the cause of several important decisions. our ad-serving partner basically requires that we use iframes to dynamically pull in ads from available inventory. because of the iframe, we backed off of the idea that we'd be able to adhere to xhtml strict rules, and settled for using the xhtml transitional dtd. we were hoping to go all the way with the xhtml conversion, but our ad units and some other third-party content prevent us from doing so. our engineers also faced a huge archive of content that wasn't entered into our cms with xhtml in mind. it's true that our stories exist in a database, separated from page templates and peripheral formatting. but writers, editors, and producers have been inserting stories in...

Creating reusable content with CSS and XBL - Archive of obsolete content
not contain any buttons. it only contains the text of the button's label. the button is added by the binding. the document stylesheet links the binding. the binding links its own stylesheet, and it supplies its own content and javascript code. so the binding is self-contained. challenges change the xbl file so that the square doubles in width when it changes color, instead of jumping to the right. use the dom inspector tool to inspect the document, revealing the added content. what next? if you had difficulty understanding this page, or if you have other comments about it, please contribute to its discussion page. in this demonstration, the square and the button make a self-contained widget that functions within an html document. mozilla has a specialized markup...

List of Former Mozilla-Based Applications - Archive of obsolete content
uses mozilla rhino --eol'ed in 2009 (jin'sync) office app launcher download page last updated on 12/21/06 kylix compiler and integrated development environment borland discontinued this product. ...

Localizing an extension - Archive of obsolete content
reference dialog, whose xul file is options.xul, has a corresponding options.dtd file that looks like this: <!entity options_window_title "stockwatcher 2 preferences"> <!entity options_symbol.label "stock to watch: "> the "options_window_title" entity maps to the string "stockwatcher 2 preferences", which is used as the title of the preference window. the stockwatcher2.dtd file contains the mappings for the stockwatcher2.xul file: <!entity panel_loading "loading..."> <!entity menu_refresh_now.label "refresh now"> <!entity menu_apple.label "apple (aapl)"> <!entity menu_google.label "google (goog)"> <!entity menu_microsoft.label "microsoft (msft)"> <!entity menu_yahoo.label "yahoo (yhoo)"> update the xul files each xul file needs to reference its corresponding locale file. we also need...

Images, Tables, and Mysterious Gaps - Archive of obsolete content
g with that example. there isn't supposed to be, since it's an example of how browsers have traditionally behaved. now let's see what that same simple table looks like in a modern browser when the page has a strict doctype. notice the added space beneath the image in figure 2. the markup of both table and cell remains unchanged-- it's the rendering mode that's different. instead of "shrinkwrapping" the image itself, the browser is now wrapping around the line in which the image sits. the image is sitting in a line because images are, by default, inline content. that's all it takes. how inline content is constructed in order to understand what just happened, let's take a look at the construction of a line box, the placement of images within a line box, and the placement of a line box with...

Source Navigator - Archive of obsolete content
mozilla code in a faster speed. using source navigator (more later) opening a project open a terminal. type <tt>snavigator</tt> followed by striking enter. this shows the "source-navigator projects" dialog. choose the project file that you've just created and then click "open...". source navigator then loads the database and then display the following symbols window: searching a method by typing in the method name viewing the definition/declaration by highlighting the method in the code ... displaying a inheritance hierarchy ... searching a string ... ...

ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
rect plug-in installed. you may also supply any custom plug-in parameters as additional <param> elements. still to do only hosts windowed plug-ins. an official pluginhostctrl.cab file. doesn't work for the adobe acrobat plug-in yet. plug-ins cannot create writeable streams or seek in readable streams. liveconnect scripting is not supported. if you need scripting functionality, consider shipping a modified pluginhostctrl.dll that exposes methods you wish to call on your plugin. ...