Index
the public keys that are exchanged between parties are transported using a container; the container is called a certificate, following standard x.509 version 3.
... 8 deprecated ssl functions nss the following ssl functions have been replaced with newer versions.
... 19 4.3 release notes jss, nss network security services for java (jss) 4.3 is a minor release with the following new features: 20 4.3.1 release notes jss, nspr, nss network security services for java (jss) 4.3.1 is a minor release with the following new features: 21 build instructions for jss 4.3.x jss newsgroup: mozilla.dev.tech.crypto 22 build instructions for jss 4.4.x jss newsgroup: mozilla.dev.tech.crypto 23 jss faq jss ...
...And 19 more matches

Expressions and operators - JavaScript
operators javascript has the following types of operators.
... there are also compound assignment operators that are shorthand for the operations listed in the following table: compound assignment operators name shorthand operator meaning assignment x = y x = y addition assignment x += y x = x + y subtraction assignment x -= y x = x - y multiplication assignment x *= y x = x * y division assignment x /= y x = x / y remainder assignment x %= y x = x % y ...
...the following table describes the comparison operators in terms of this sample code: var var1 = 3; var var2 = 4; comparison operators operator description examples returning true equal (==) returns true if the operands are equal.
...And 19 more matches

Grammar and types - JavaScript
in the following code, the variable input is not assigned a value, and the if statement evaluates to true.
...for example, the following code executes the function myfunction because the myarray element is undefined: var myarray = []; if (!myarray[0]) myfunction(); the undefined value converts to nan when used in numeric context.
... for example, the following code will log 5, because the scope of x is the global context (or the function context if the code is part of a function).
...And 18 more matches

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
in the following sections we will show you how they can be used.
...it takes the following parameters: a function to run, or a reference to a function defined elsewhere.
... in the following example, the browser will wait two seconds before executing the anonymous function, then will display the alert message (see it running live, and see the source code): let mygreeting = settimeout(function() { alert('hello, mr.
...And 16 more matches

NSS Tools modutil
syntax to run the security module database tool, type the command modutil option [arguments] where option and arguments are combinations of the options and arguments listed in the following section.
...the following cipher is currently available: fortezza.
...the following mechanisms are currently available: rsa, dsa, rc2, rc4, rc5, des, dh, fortezza, sha1, md5, md2, random (for random number generation), and friendly (meaning certificates are publicly readable).
...And 16 more matches

Legacy layout methods - Learn web development
replace whatever is inside the body currently with the following: <h1>2 column layout example</h1> <div> <h2>first column</h2> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.
...first, of all, apply the following to your html to provide some basic setup: body { width: 90%; max-width: 900px; margin: 0 auto; } the body will be 90% of the viewport wide until it gets to 900px wide, in which case it will stay fixed at this width and center itself in the viewport.
...add the following to the bottom of your css: div:nth-of-type(1) { width: 48%; } div:nth-of-type(2) { width: 48%; } here we've set both to be 48% of their parent's width — this totals 96%, leaving us 4% free to act as a gutter between the two columns, giving the content some space to breathe.
...And 14 more matches

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
the following new components will be developed throughout the course of this article: moreactions: displays the check all and remove completed buttons, and emits the corresponding events required to handle their functionality.
...put the following content into your moreactions.svelte file: <script> import { createeventdispatcher } from 'svelte' const dispatch = createeventdispatcher() let completed = true const checkall = () => { dispatch('checkall', completed) completed = !completed } const removecompleted = () => dispatch('removecompleted') </script> <div class="btn-group"> <button type="button" class="btn b...
... add the following import statement below the existing ones: import moreactions from './moreactions.svelte' then add the described functions at the end of the <script> section: const checkalltodos = (completed) => todos.foreach(t => t.completed = completed) const removecompletedtodos = () => todos = todos.filter(t => !t.completed) now go to the bottom of the todos.svelte markup section and replac...
...And 14 more matches

Introducing a complete toolchain - Learn web development
tools used in our toolchain in this article we're going to use the following tools and features: jsx, a react-related set of syntax extensions that allow you to do things like defining component structures inside javascript.
... as mentioned previously, github is a source code repository service that adds community features such as issue tracking, following project releases and much more.
... once you've signed up for github (click the sign up link on the homepage if you don't already have an account, and follow the instructions), you can use your github account for authentication on netlify (click sign up, then choose github from the "sign up with one of the following" list), so technically you only need to create one new account.
...And 14 more matches

Introduction to automated testing - Learn web development
once the install completes, test that node is installed by typing the following into the terminal, which returns the installed versions of node and npm: node -v npm -v if you've got node/npm already installed, you should update them to their latest versions.
...to update npm, use the following command in your terminal: npm install npm@latest -g note: if the above command fails with permissions errors, fixing npm permissions should sort you out.
... create a new directory somewhere sensible using your file manager ui, or, on a command line, by navigating to the location you want and running the following command: mkdir node-test to make this directory an npm project, you just need to go inside your test directory and initialize it, with the following: cd node-test npm init this second command will ask you many questions to find out the information required to set up the project; you can just select the defaults for now.
...And 13 more matches

Floats - Learn web development
first, we'll start off with some simple html — add the following to your html body, removing anything that was inside there before: <h1>simple float example</h1> <div class="box">float</div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> now apply the following css to your html (using a <style> element or a <link> to a separate .css file — your choice): body { width: 90%; max-width: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { width: 150px; height: 100px; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } if you save and refresh now, you'll see something much like what you'd expe...
...to float the text around it add the float and margin-right properties to the .box rule: .box { float: left; margin-right: 15px; width: 150px; height: 100px; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } now if you save and refresh you'll see something like the following: float example 1 <h1>simple float example</h1> <div class="box">float</div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...And 12 more matches

Functions - JavaScript
for example, the following code defines a simple function named square: function square(number) { return number * number; } the function square takes one parameter, called number.
...a non-primitive value, such as array or a user-defined object) as a parameter and the function changes the object's properties, that change is visible outside the function, as shown in the following example: function myfunc(theobject) { theobject.make = 'toyota'; } var mycar = {make: 'honda', model: 'accord', year: 1998}; var x, y; x = mycar.make; // x gets the value "honda" myfunc(mycar); y = mycar.make; // y gets the value "toyota" // (the make property was changed by the function) function expressions while the function declaration above is syntactically a stateme...
...the following example shows a map function that should receive a function as first argument and an array as second argument.
...And 12 more matches

Loops and iteration - JavaScript
a for statement looks as follows: for ([initialexpression]; [conditionexpression]; [incrementexpression]) statement when a for loop executes, the following occurs: the initializing expression initialexpression, if any, is executed.
...when the condition is false, execution stops, and control passes to the statement following do...while.
... example in the following example, the do loop iterates at least once and reiterates until i is no longer less than 5.
...And 12 more matches

Theme changes in Firefox 2 - Archive of obsolete content
changes in browser bookmarks/addbookmark.css the addbookmarks.css file should have the following lines added to the top: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml"); some microsummary-related css also needs to be added, to provide formatting for the microsummary picker.
... browser.css the following styles used in firefox 1.5 themes are no longer used in firefox 2 and should be removed from your theme: #bookmarks-button:active #copy-button:active #cut-button:active #downloads-button:active #forward-button[buttondown="true"] #history-button:active #home-button:active #mail-button #mail-button:active #mail-button[disabled="true"] #mail-button[open="true"] #new-tab-button:active ...
...aste-button:active toolbar[iconsize="small"] #print-button:active toolbar[iconsize="small"] #reload-button:active toolbar[iconsize="small"] #stop-button:active toolbar[mode="icons"] .toolbarbutton-text toolbar[mode="text"] .toolbarbutton-1 > .toolbarbutton-text toolbar[mode="text"] .toolbarbutton-1 > stack > toolbarbutton > .toolbarbutton-text toolbar[mode="text"] .toolbarbutton-icon the following styles need to be added to your theme to be compatible with firefox 2: #back-button .toolbarbutton-menubutton-dropmarker #back-button:hover #back-button:hover .toolbarbutton-menubutton-dropmarker #back-button:hover:active #back-button:hover:active .toolbarbutton-menubutton-dropmarker #back-button[buttondown="true"] > .toolbarbutton-menubutton-dropmarker #back-button[buttonover="true"] #...
...And 11 more matches

Practical positioning examples - Learn web development
general setup to begin with, add the following between your opening and closing <style> tags: html { font-family: sans-serif; } * { box-sizing: border-box; } body { margin: 0; } this is just some general setup to set a sans-serif font on our page, use the border-box box-sizing model, and get rid of the default <body> margin.
... next, add the following just below your previous css: .info-box { width: 450px; height: 400px; margin: 0 auto; } this sets a specific width and height on the content, and centers it on the screen using the old margin: 0 auto trick.
...first, add the following rule at the bottom of your css to remove the default padding-left and margin-top from the unordered list: .info-box ul { padding-left: 0; margin-top: 0; } note: we are using descendant selectors with .info-box at the start of the chain throughout this example — this is so that we can insert this feature into a page with other content already on it, without fear of interfering with the st...
...And 11 more matches

source-editor.jsm
this object has the following properties: property type description str string the last string that was searched for.
...it may have the following properties: property type description backwards boolean if true, the search begins at start (or the end of the text, if start is not specified) and progresses toward the beginning of the text.
...each breakpoint is an object with the following properties: property type description line number the 0-based line number on which the breakpoint is set.
...And 11 more matches

Index
its value is the logical or of zero or more of the following constants: 93 jsconstdoublespec jsapi reference, spidermonkey jsconstdoublespecs is used to define a set of double values that are assigned as properties to an object using js_defineconstdoubles.
... 106 jsfastnative jsapi reference, obsolete, spidermonkey the callback should use the following macros to access the fields of vp: 107 jsfinalizeop jsapi reference, reference, référence(2), spidermonkey the jsfinalizeop is analogous to java finalizers or c++ destructors.
... 128 jsobject jsapi reference, spidermonkey objects are made up of the following parts: 129 jsobjectop jsapi reference, obsolete, spidermonkey the callbacks of this type are: 130 jsobjectops.defaultvalue jsapi reference, obsolete, spidermonkey the jsobjectops.defaultvalue callback corresponds to the [[defaultvalue]] method defined in ecma 262-3 §8.6.2.6.
...And 11 more matches

Using Objective-C from js-ctypes
speech synthesis example let's start with the following objective-c code, which invokes the speech synthesis api to say "hello, firefox!".
... while ([synth isspeaking]) {} [synth release]; return 0; } save this file as test.m, and run with the following command, inside the same directory as the saved file (needs xcode).
...let's look at the following codelet: [nsspeechsynthesizer alloc] it passes an alloc message to the nsspeechsynthesizer class, in objective-c syntax.
...And 11 more matches

Element - Web APIs
nondocumenttypechildnode.nextelementsibling read only is an element, the element immediately following the given one in the tree, or null if there's no sibling node.
... properties included from slotable the element interface includes the following property, defined on the slotable mixin.
... recommendation added the following event handlers: ongotpointercapture and onlostpointercapture.
...And 11 more matches

JXON - Archive of obsolete content
the algorithms proposed here (see: #1, #2, #3, #4) will consider only the following types of nodes and their attributes: document (only as function argument), documentfragment (only as function argument), element, text (never as function argument), cdatasection (never as function argument), attr (never as function argument).
... the following algorithms are somewhat based on the parker convention, version 0.4, which prescribes the transformation of tags names into object properties names and the recognition of the typeof of all the collected text content of each tag (plain text parsing); but with some differences (so, one can say that we follow a our convention).
... algorithm #4: a very minimalist way the following is another possible way to do the conversion.
...And 10 more matches

Common Firefox theme issues and solutions - Archive of obsolete content
please see the following threads on mozillazine for solutions to this issue: http://forums.mozillazine.org/viewtopic.php?f=18&t=2131121 http://forums.mozillazine.org/viewtopic.php?f=18&t=1953371&start=60 windows 7 aero not going into full screen mode properly on win7 with aero glass support firefox doesn't always go to full screen mode from a normal window properly.
... the resolution to this issue is to add the following code to your browser.css file somewhere below where the main-window is made transparent to support aero glass.
...in order to work around this issue, you need to either rename any of the following files that are in your chrome://browser/skin/ folder and fix any references to those files, or copy them to the folder chrome://browser/skin/lion/: keyhole-circle.png toolbar.png toolbarbutton-dropmarker.png tabbrowser/alltabs-box-bkgnd-icon.png tabview/tabview.png places/toolbar.png linux linux select box fields are showing both drop arrow and spinner arrows on linux: the styling of ...
...And 10 more matches

Client-side form validation - Learn web development
when an element is valid, the following things are true: the element matches the :valid css pseudo-class, which lets you apply a specific style to valid elements.
... when an element is invalid, the following things are true: the element matches the :invalid css pseudo-class, and sometimes other ui pseudo-classes (e.g., :out-of-range) depending on the error, which lets you apply a specific style to invalid elements.
...update your html to add a pattern attribute like this: <form> <label for="choose">would you prefer a banana or a cherry?</label> <input id="choose" name="i_like" required pattern="[bb]anana|[cc]herry"> <button>submit</button> </form> input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; } this gives us the following update — try it out: note: you can find this example live on github as fruit-pattern.html (see also the source code.) in this example, the <input> element accepts one of four possible values: the strings "banana", "banana", "cherry", or "cherry".
...And 10 more matches

A first splash into JavaScript - Learn web development
let's imagine your boss has given you the following brief for creating this game: i want you to create a simple guess the number type game.
...first of all, add the following lines inside your <script> element: let randomnumber = math.floor(math.random() * 100) + 1; const guesses = document.queryselector('.guesses'); const lastresult = document.queryselector('.lastresult'); const loworhi = document.queryselector('.loworhi'); const guesssubmit = document.queryselector('.guesssubmit'); const guessfield = document.queryselector('.guessfield'); let guesscount = 1; let...
... functions next, add the following below your previous javascript: function checkguess() { alert('i am a placeholder'); } functions are reusable blocks of code that you can write once and run again and again, saving the need to keep repeating code all the time.
...And 10 more matches

Componentizing our Svelte app - Learn web development
eventually, we will split up our app into the following components: alert.svelte: a general notification box for communicating actions that have occurred.
...add the following content into the file: <script> export let filter = 'all' </script> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === 'all'} aria-pressed={filter === 'all'} on:click={()=> filter = 'all'} > <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class...
...first of all, we need to import it — add the following line at the top of the todos.svelte <script> section: import filterbutton from './filterbutton.svelte' now, replace the filters <div> with a call to the filterbutton component, which takes the current filter as a prop — the below line is all you need: <filterbutton {filter} /> note: remember that when the html attribute name and variable matches, they can be replaced with {vari...
...And 10 more matches

IME handling guide
for example, if a user types "watasinonamaehanakanodesu", it's converted to hiragana characters, "わたしのなまえはなかのです", automatically (in the following screenshots, the composition string has a wavy underline and the only one clause is called "raw input clause").
...then, converts each clause with chinese characters: "私の", "名前は" and "中野です" (in the following screenshot each clause is underlined and not connected adjacently.
... if one or more clauses were not converted as expected, the user can choose one of the clauses with arrow keys and look for the expected result form the list in the drop down menu (in the following screenshot, the clause with the thicker underline is called "selected clause").
...And 10 more matches

NSS PKCS11 Functions
syntax #include "secmod.h" extern secmodmodule *secmod_loadusermodule(char *modulespec, secmodmodule *parent, prbool recurse); parameters this function has the following parameters: modulespec is a pkcs #11 modulespec.
...syntax #include "secmod.h" extern secstatus secmod_unloadusermodule(secmodmodule *module); parameters this function has the following parameters: module is the module to be unloaded.
...syntax #include <pk11pub.h> secstatus secmod_closeuserdb(pk11slotinfo *slot) parameters this function has the following parameter: slot a pointer to a slot info structure.
...And 10 more matches

JIT Optimization Strategies
optimization information is currently collected for the following operations: getproperty (obj.prop) setproperty (obj.prop = val) getelement (obj[elemname]) setelement (obj[elemname] = val) call (func(...)) at each operation site, ionmonkey tries a battery of strategies, from the most optimized but most restrictive to the least optimized but least restrictive.
...the function containing the arguments.length is allowed to use the arguments object in the following ways without disabling this optimization: access arguments.length access arguments.callee access individual args using arguments[i] save arguments into variables, as long as those variables cannot be accessed by any nested function, and as long as there exists no eval anywhere within the function or nested function definitions.
...the function containing the arguments.callee is allowed to use the arguments object in the following ways without disabling this optimization: access arguments.length access arguments.callee access individual args using arguments[i] save arguments into variables, as long as those variables cannot be accessed by any nested function, and as long as there exists no eval anywhere within the function or nested function definitions.
...And 10 more matches

Appendix: What you should know about open-source software licenses - Archive of obsolete content
what is important to us now is the following three rights: open source rights: a user can create and distribute copies of the source code; a user can obtain a program’s source code; a user can modify the source code.
...the user is free to use (duplicate, distribute, and modify) the source code, following certain conditions.
... these conditions will vary from one license to the next, but the open source definition stipulates the following minimum conditions: the integrity of the author’s source code must be preserved; no discrimination may be made against individuals or organizations; no discrimination may be made based on field of endeavor; no additional licensing can be required when redistributing; license must not be specific to a product; license must not interfere with other software.
...And 9 more matches

Index - Archive of obsolete content
439 list of commands xul the following lists commands which might be usable by <command> or command dispatchers/controllers.
...a floating panel can be created using the panel element with at least two additional attributes as in the following example: 601 menubuttons xul, xul popup guide menus may be attached to buttons in several ways.
...the following table lists the keys that are checked, and what the menu keyboard listener does in response: 610 positioning xul, xul popup guide there are several ways in which the location of a popup on screen may be controlled.
...And 9 more matches

Client-side storage - Learn web development
type the following lines into your javascript console: localstorage.removeitem('name'); let myname = localstorage.getitem('name'); myname the third line should now return null — the name item no longer exists in the web storage.
... enter the following lines again: let myname = localstorage.getitem('name'); myname you should see that the value is still available, even though the browser has been closed and then opened again.
...add the following lines to your javascript file: // create needed constants const rememberdiv = document.queryselector('.remember'); const forgetdiv = document.queryselector('.forget'); const form = document.queryselector('form'); const nameinput = document.queryselector('#entername'); const submitbtn = document.queryselector('#submitname'); const forgetbtn = document.queryselector('#forgetname'); const h1 = d...
...And 9 more matches

Video and Audio APIs - Learn web development
our finished example will look (and function) something like the following: getting started to get started with this example, download our media-player-start.zip and unzip it into a new directory on your hard drive.
... at the top of this file, insert the following code: const media = document.queryselector('video'); const controls = document.queryselector('.controls'); const play = document.queryselector('.play'); const stop = document.queryselector('.stop'); const rwd = document.queryselector('.rwd'); const fwd = document.queryselector('.fwd'); const timerwrapper = document.queryselector('.timer'); const timer = document.queryselector('.timer span');...
... next, insert the following at the bottom of your code: media.removeattribute('controls'); controls.style.visibility = 'visible'; these two lines remove the default browser controls from the video, and make the custom controls visible.
...And 9 more matches

Working with Svelte stores - Learn web development
give it the following content: import { writable } from 'svelte/store' export const alert = writable('welcome to the to-do list app!') note: stores can be defined and used outside of svelte components, so you can organize them in any way you please.
... give it the following content: <script> import { alert } from '../stores.js' import { ondestroy } from 'svelte' let alertcontent = '' const unsubscribe = alert.subscribe(value => alertcontent = value) ondestroy(unsubscribe) </script> {#if alertcontent} <div on:click={() => alertcontent = ''}> <p>{ alertcontent }</p> </div> {/if} <style> div { position: fixed; cursor: pointer; margin-right: 1.
... in app.svelte we'll import the component; add the following import statement below the existing one: import alert from './components/alert.svelte' then call the alert component just above the todos call, like this: <alert /> <todos {todos} /> load your test app now, and you should now see the alert message on screen.
...And 9 more matches

A guide to searching crash reports
this brings up a search form like the one in the following screenshot.
... the default search: signature facet if you click on the "search" button, you will get results like the ones in the following screenshot.
...the links within the results do the following things.
...And 9 more matches

sslcrt.html
syntax #include <cert.h> secstatus cert_verifycertnow( certcertdbhandle *handle, certcertificate *cert, prbool checksig, seccertusage certusage, void *wincx); parameters this function has the following parameters: handle a pointer to the certificate database handle.
... syntax #include <cert.h> secstatus cert_verifycertname( certcertificate *cert, char *hostname); parameters this function has the following parameters: cert a pointer to the certificate against which to check the hostname referenced by hostname.
...instead, it takes account of the following rules governing the construction of common names in ssl server certificates: * matches anything ?
...And 9 more matches

jpm - Archive of obsolete content
jpm usage is: jpm [command] [options] jpm supports the following global options: -h, --help - show a help message and exit -v, --version - print the jpm version number --addon-dir - directory for your source code, defaulting to the current directory installation jpm is distributed with the node package manager npm.
...add the following line to the end of the file $home/.profile to add it to your path permanently (as the file .profile is executed every time a new terminal is opened): export path="$home/node_modules/.bin/:$path" installing jpm from git alternatively, you can also get the latest version of jpm using git: git clone https://github.com/mozilla-jetpack/jpm.git cd jpm npm install npm link after installing jpm af...
... command reference jpm supports the following commands: jpm init create a skeleton add-on as a starting point for your add-on.
...And 8 more matches

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
note: for information about how to find the directory where you installed seamonkey, see: installation directory if you cannot easily find the directory, you can use the following method to find it.
...copy the following code.
... edit the file: installed-chrome.txt at the end of the file, add the following line.
...And 8 more matches

Building up a basic demo with the PlayCanvas engine - Game development
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.
...again, add the following lines at the bottom of your script.
...let's start by defining the geometry for a cube shape — add the following new code below your previous additions: var box = new pc.entity(); box.addcomponent("model", { type: "box" }); app.root.addchild(box); box.rotate(10, 15, 0); it will create an entity with the box model component and add it to the root of the application, our scene.
...And 8 more matches

Working with JSON - Learn web development
json is a text-based data format following javascript object syntax, which was popularized by douglas crockford.
...add the following at the bottom of your javascript code: let requesturl = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; to create a request, we need to create a new request object instance from the xmlhttprequest constructor, using the new keyword.
... add the following below your last line: let request = new xmlhttprequest(); now we need to open the request using the open() method.
...And 8 more matches

Object building practice - Learn web development
these contain the following, respectively: a very simple html document featuring an <h1> element, a <canvas> element to draw our balls on, and elements to apply our css and javascript to our html.
...let's start by adding the following constructor to the bottom of our code.
... drawing the ball first add the following draw() method to the ball()'s prototype: ball.prototype.draw = function() { ctx.beginpath(); ctx.fillstyle = this.color; ctx.arc(this.x, this.y, this.size, 0, 2 * math.pi); ctx.fill(); } using this function, we can tell the ball to draw itself onto the screen, by calling a series of members of the 2d canvas context we defined earlier (ctx).
...And 8 more matches

WindowOrWorkerGlobalScope.setInterval() - Web APIs
examples example 1: basic syntax the following example demonstrates setinterval()'s basic syntax.
... console.log(a); console.log(b); } example 2: alternating two colors the following example calls the flashtext() function once a second until the stop button is pressed.
... } function stoptextcolor() { clearinterval(nintervid); } </script> </head> <body onload="changecolor();"> <div id="my_box"> <p>hello world</p> </div> <button onclick="stoptextcolor();">stop</button> </body> </html> example 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.
...And 8 more matches

Value definition syntax - CSS: Cascading Style Sheets
bold [ thin && <length> ] this example matches the following values: bold thin 2vh bold 0 thin bold thin 3.5em but not: thin bold 3em, as bold is juxtaposed with the component defined by the brackets, it must appear before it.
... bold <length> , thin this example matches the following values: bold 1em, thin bold 0, thin bold 2.5cm, thin bold 3vh, thin but not: thin 1em, bold, as the entities must be in the expressed order bold 1em thin, as the entities are mandatory; the comma, a literal, must be present bold 0.5ms, thin, as the ms values are not <length> double ampersand separating two or more components, by a double ampersand, &&, means that all these entities are mandatory but may appear in any order.
... bold && <length> this example matches the following values: bold 1em bold 0 2.5cm bold 3vh bold but not: bold, as both components must appear in the value.
...And 8 more matches

Control flow and error handling - JavaScript
for example, do not write code like this: // prone to being misread as "x == y" if (x = y) { /* statements here */ } if you need to use an assignment in a conditional expression, a common practice is to put additional parentheses around the assignment, like this: if ((x = y)) { /* statements here */ } falsy values the following values evaluate to false (also known as falsy values): false undefined null 0 nan the empty string ("") all other values—including all objects—evaluate to true when passed to a conditional statement.
... for example: var b = new boolean(false); if (b) // this condition evaluates to true if (b == true) // this condition evaluates to false example in the following example, the function checkdata returns true if the number of characters in a text object is three.
... if no default clause is found, the program resumes execution at the statement following the end of switch.
...And 8 more matches

Manipulating documents - Learn web development
there are a few really obvious bits you'll reference regularly in your code — consider the following diagram, which represents the main parts of a browser directly involved in viewing web pages: the window is the browser tab that a web page is loaded into; this is represented in javascript by the window object.
...inside your script element, add the following line: const link = document.queryselector('a'); now we have the element reference stored in a variable, we can start to manipulate it using properties and methods available to it (these are defined on interfaces like htmlanchorelement in the case of <a> element, its more general parent interface htmlelement, and node — which represents all nodes in a dom).
...add the following line below the previous one: link.textcontent = 'mozilla developer network'; we should also change the url the link is pointing to, so that it doesn't go to the wrong place when it is clicked on.
...And 7 more matches

Getting started with Svelte - Learn web development
nevertheless, svelte is particularly appropriate to tackle the following situations: web applications intended for low power devices: applications built with svelte have smaller bundle sizes, which is ideal for devices with slow network connections and limited processing power.
...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.
... also see the following for more information: "what is npm" on nodejs.org "introducing npx" on the npm blog "the easiest way to get started with svelte" on the svelte blog creating your first svelte app the easiest way to create a starter app template is to just download the starter template application.
...And 7 more matches

Package management basics - Learn web development
type the following command, making sure you are inside the parcel-experiment directory: npm init you will now be asked some questions; npm will then create a default package.json file based on the answers: name: a name to identify the app.
... installing parcel run the following command to install parcel locally: npm install parcel-bundler once that's done all the things, we're now ready for some "modern client-side development" (which really means using build tools to make the developer experience a little easier).
...create index.html in your test directory, and give it the following contents: <!doctype html> <html lang="en-us"> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <script src="./index.js"></script> </body> </html> next, we need to add an index.js file in the same directory as index.html.
...And 7 more matches

TimerFirings logging
set the following environment variable to enable it.
... the following sample shows the basics of this output.
...tivitytracker -991946880[7f46c365ba00]: [6775] fn timer (one_shot 250 ms): presshell::spaintsuppressioncallback -991946880[7f46c365ba00]: [6775] fn timer (one_shot 160 ms): nsbrowserstatusfilter::timeouthandler -991946880[7f46c365ba00]: [6775] iface timer (one_shot 200 ms): 7f46964d7f80 -1340643584[7f46c365ec00]: [6775] obs timer (slack 1000 ms): 7f46a95a0200 each line has the following information.
...And 7 more matches

Index
72 observer notifications xpcom, xpcom:add-ons the following are topics that you can observe during the course of an application.
...the following sections describe the steps you can take to organize the weblock component for distribution and installation.
...the following four sections tell the developer how to download and organize the gecko sdk and create a new project in which components like weblock can be created.
...And 7 more matches

FileSystemEntrySync - Web APIs
[ todo: specify what kind of metadata ] metadata getmetada () raises (fileexception); parameter none returns metadata exceptions this method can raise a fileexception with the following codes: exception description not_found_err the entry does not exist.
... you cannot do the following: move a directory inside itself or to any child at any depth move an entry into its parent if a name different from its current one isn't provided move a file to a path occupied by a directory or move a directory to a path occupied by a file move any element to a path occupied by a directory that is not empty.
... exceptions this method can raise a fileexception with the following codes: exception description encoding_err the name supplied is invalid, because at least one of the characters is reserved or illegal.
...And 7 more matches

Node - Web APIs
*/ removeallchildren(document.body) recurse through child nodes the following function recursively calls a callback function for each node contained by a root node (including the root itself): function eachnode(rootnode, callback) { if (!callback) { const nodes = [] eachnode(rootnode, function(node) { nodes.push(node) }) return nodes } if (false === callback(rootnode)) { return false } if (rootnode.haschildnodes()) { const nodes = rootnode.childno...
... sample usage the following example prints the textcontent properties of each <span> tag in a <div> element named "box": <div id="box"> <span>foo</span> <span>bar</span> <span>baz</span> </div> const box = document.getelementbyid("box") eachnode(box, function(node) { if (null != node.textcontent) { console.log(node.textcontent) } }) the above will result in the following strings printing to the user's conso...
... realistic usage the following demonstrates a real-world use of the eachnode() function: searching for text on a web-page.
...And 7 more matches

Pointer events - Web APIs
some sensing devices can detect the close proximity of the input device, and the state is expressed as a hover following the mouse.
... the following sub-sections contain short descriptions of each interface and property.
... pointerevent interface the pointerevent interface extends the mouseevent interface and has the following properties.
...And 7 more matches

Numbers and dates - JavaScript
if the digits after the 0b are not 0 or 1, the following syntaxerror is thrown: "missing binary digits after 0b".
...if the digits after 0x are outside the range (0123456789abcdef), the following syntaxerror is thrown: "identifier starts immediately after numeric literal".
... the following table summarizes the number object's properties.
...And 7 more matches

Lexical grammar - JavaScript
only the following unicode code points are treated as line terminators in ecmascript, other line breaking characters are treated as white space (for example, next line, nel, u+0085 is considered as white space).
... the first way is the // comment; this makes all text following it on the same line into a comment.
... keywords reserved keywords as of ecmascript 2015 break case catch class const continue debugger default delete do else export extends finally for function if import in instanceof new return super switch this throw try typeof var void while with yield future reserved keywords the following are reserved as future keywords by the ecmascript specification.
...And 7 more matches

Appendix D: Loading Scripts - Archive of obsolete content
(a standalone xul window can use an onload attribute.) example the following overlay will load the script “overlay.js” from the same directory as the overlay file into the window which it overlays.
... examples the following code will execute a simple script in a sandbox with the privilege level of the current content page.
...uate the script: components.utils.evalinsandbox(script, sandbox, // the javascript version "1.8", // the apparent script filename: "zz-9://plural/zed/alpha", // the apparent script starting line number: 42); the following code will execute a simple script loaded from a local file in the same directory as the current script.
...And 6 more matches

Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
following standards is certainly not a new organizational phenomenon; organizations require their employees to follow common rules, or a common set of standards all the time.
...when auditors evaluate an organizations financial health, they do so by following the fasb rules.
...by following the guidelines that have been put into place, organizations like aol can enhance user experience, interoperability, code reuse, shared resources, and goodwill while reducing costs.
...And 6 more matches

Building up a basic demo with Three.js - Game development
let's create it, by adding the following line below our previous lines: var scene = new three.scene(); later, we will be using the .add() method, to add objects to this scene.
...the following lines put the camera in place in the 3d coordinate system, and point it in the direction of our scene, so we can finally see something: var camera = new three.perspectivecamera(70, width/height); camera.position.z = 50; scene.add(camera); add the above lines to your code, below those previously added.
...let's start, by defining the geometry for a cube shape, adding the following just above the render() function: var boxgeometry = new three.boxgeometry(10, 10, 10); in this case, we define a simple cube that is 10 x 10 x 10 units.
...And 6 more matches

Flexbox - Learn web development
the following simple layout requirements are either difficult or impossible to achieve with such tools, in any kind of convenient, flexible way: vertically centering a block of content inside its parent.
... try adding the following declaration to your <section> rule: flex-direction: column; you'll see that this puts the items back in a column layout, much like they were before we added any css.
...one way in which you can fix this is to add the following declaration to your <section> rule: flex-wrap: wrap; also, add the following declaration to your <article> rule: flex: 200px; try this now; you'll see that the layout looks much better with this included: we now have multiple rows — as many flexbox children are fitted onto each row as makes sense, and any overflow is moved down to the next line.
...And 6 more matches

Graceful asynchronous programming with Promises - Learn web development
note: the following example will not work if you just run it directly from the file (i.e.
... inside your <script> element, add the following line: let promise = fetch('coffee.jpg'); this calls the fetch() method, passing it the url of the image to fetch from the network as a parameter.
...this can be done like so — add the following lines below your first line of javascript.
...And 6 more matches

Build your own function - Learn web development
type the following in your browser's javascript console, on any page you like: alert('this is a message'); the alert function takes a single argument — the string that is displayed in the alert box.
... next, add the following inside the <script> element: function displaymessage() { } we start off with the keyword function, which means we are defining a function.
... finally, add the following code inside the curly braces: const html = document.queryselector('html'); const panel = document.createelement('div'); panel.setattribute('class', 'msgbox'); html.appendchild(panel); const msg = document.createelement('p'); msg.textcontent = 'this is a message box'; panel.appendchild(msg); const closebtn = document.createelement('button'); closebtn.textcontent = 'x'; panel.appendchild(closebtn); closebtn.onclick = function() { panel.parentnode.removechild(panel); } this is quite a lot of code to go...
...And 6 more matches

Third-party APIs - Learn web development
you'll find a line similar to the following in the mapquest api example: l.mapquest.key = 'your-api-key-here'; this line specifies an api or developer key to use in your application — the developer of the application must apply to get a key, and then include it in their code to be allowed access to the api's functionality.
...to do this, find the following line: layers: l.mapquest.tilelayer('map') try changing 'map' to 'hybrid' to show a hybrid-style map.
...add the following code to your example, again inside window.onload: l.marker([53.480759, -2.242631], { icon: l.mapquest.icons.marker({ primarycolor: '#22407f', secondarycolor: '#3b5998', shadow: true, size: 'md', symbol: 'a' }) }) .bindpopup('this is manchester!') .addto(map); as you can see, this at its simplest takes two parameters, an array containing the coordinates at which to displa...
...And 6 more matches

Ember Interactivity: Footer functionality, conditional rendering - Learn web development
connecting the behavior in the footer to get the footer working, we need to implement the following thre areas of functionality: a pending todo counter.
...enter the following terminal command to do so: ember generate component-class footer next, go and find the newly-created todomvc/app/components/footer.js file and update it to the following: import component from '@glimmer/component'; import { inject as service } from '@ember/service'; export default class footercomponent extends component { @service('todo-data') todos; } now we need to go back to our todo-data.js file and add some functionality that will allow us to return the number of incomplete todos (useful for showing how many are left), and clear the completed todos ou...
... in todo-data.js, add the following getter underneath the existing all() getter to define what the incomplete todos actually are: get incomplete() { return this.todos.filter(todo => { return todo.iscompleted === false; }); } using array.filter(), we declare that "incomplete" todos are ones that have iscompleted equal to false.
...And 6 more matches

Ember interactivity: Events, classes and state - Learn web development
to create a header class to go with your header component, type this in to your terminal: ember generate component-class header this will create the following empty class file — todomvc/app/components/header.js: import component from '@glimmer/component'; export default class headercomponent extends component { } inside this file we will implement the event handler code.
... update the content to the following: import component from '@glimmer/component'; import { action } from '@ember/object'; export default class headercomponent extends component { @action onkeydown({ target, key }) { let text = target.value.trim(); let hasvalue = boolean(text); if (key === 'enter' && hasvalue) { alert(text); target.value = '' } } } the @action decorator is the only ember-specific code here (aside from extending from the component superclass, and the ember-specific items we are importing using javascript module syntax) — the rest of the file is vanilla javascript, and would work in any application.
... add the following import statement below the existing one: import { tracked } from '@glimmer/tracking'; now add the following class below the previous line you added: class todo { @tracked text = ''; @tracked iscompleted = false; constructor(text) { this.text = text; } } this class represents a todo — it contains a @tracked text property containing the text of the todo, and a @tracked iscomplete...
...And 6 more matches

Deploying our app - Learn web development
add the following line to your project now: "scripts": { ...
... you should now be able to run the following command in the root of your project directory to run the production build step (first quit the running process with ctrl + c if you need to): npm run build this should give you an output like the following, showing you the production files that were created, how big they are, and how long they took to build: dist/src.99d8a31a.js.map 446.15 kb 63ms dist/src.99d8a31a.js 172.51 kb 5.55s dist/stars.7f1dd035.svg 6.31 kb 145ms dist/asteriod2.3ead4904.svg 3.51 kb 155ms dist/asteriod1.698d75e9.svg 2.9 kb 153ms dist/src.84f2edd1.css.m...
...a quick way to verify this is to run the following command: git status you should get a status report of what files are being tracked, what files are staged, and so on — all terms that are part of the git grammar.
...And 6 more matches

How to implement a custom autocomplete search component
to do so you need the following: create an xpcom component that implements the nsiautocompletesearch interface.
... make sure the contract id of your xpcom component follows the following form: "@mozilla.org/autocomplete/search;1?name=xxx", where "xxx" is the name of your autocomplete source.
...basic example for gecko 2.0 and up (firefox 4 / thunderbird 3.3 / seamonkey 2.1) this example is your first best try because: it has no specific logic (it just returns a dummy array of choices) it doesn't care about compatibility with older gecko versions first copy the following javascript code into a file named basic_autocomplete.js into the components directory (or whatever components folder is appropriate in your case): warning: the uuid used below in chrome.manifest and assigned to class_id must be changed before use.
...And 6 more matches

Localizing without a specialized tool
with that document, users can see immediately two localized files in their user interface by following closely and carefully the steps to create a language pack or a binary file that is ready for installation.
... folder structure throughout this document, we will be using the following folder structure in all examples: your working directory (root) mozilla-1.9.2 (en-us source, pulled from http://hg.mozilla.org/releases/mozilla-1.9.2) l10n-mozilla-1.9.2 (a directory containing localization directories, one dir per localization; often referred to as "l10n base") x-testing (a directory with your localization files) please either follow this structure closely or adjust all ...
...get the source change your current directory to your working directory with the following command: $ cd /path/to/your/working/directory first, you will need to check out the sources of mozilla-1.9.2 together with the en-us strings.
...And 6 more matches

Creating localizable web applications
you can use one or more of the following techniques: http accept-language headers, the ua string, ip geolocation.
...consider the following example: a filmreel-like slideshow showcasing highlighted features of the product or featured designs.
...consider the following example: snippet 1.
...And 6 more matches

pkfnc.html
syntax #include <pk11func.h> #include <certt.h> certcertificate *pk11_findcertfromnickname( char *nickname, void *wincx); parameters this function has the following parameters: nickname a pointer to the nickname in the certificate database or to the nickname in the token.
... syntax #include <pk11func.h> #include <certt.h> #include <keyt.h> seckeyprivatekey *pk11_findkeybyanycert( certcertificate *cert, void *wincx); parameters this function has the following parameters: cert a pointer to a certificate structure in the certificate database.
... syntax #include <pk11func.h> char *pk11_getslotname(pk11slotinfo *slot); parameters this function has the following parameter: slot a pointer to a slot info structure.
...And 6 more matches

SpiderMonkey Build Documentation
refer the release notes under command line tools -> new features the release notes also states that this compatibility package will no longer be provided in the near future, so the build system on macos will have to be adapted to look for headers in the sdk until then, the following should help, open /library/developer/commandlinetools/packages/macos_sdk_headers_for_macos_10.14.pk this builds an executable named js in the directory build-release/dist/bin.
...thus, in addition to following the steps above, you should also create a debug build using these steps: cd js/src # this name should end with "_dbg.obj" to make the version control system ignore it.
...hence, the following instructions should only be relevant if you're on windows or compiling an older version of spidermonkey.
...And 6 more matches

Introduction to XPCOM for the DOM
pure virtual methods are declared with the following syntax: virtual nsresult functionfoo() = 0; an interface is thus simply a c++ class where all the member functions are declared as pure virtual functions.
...the c++ code is the following: class nsfoo : public nsifoo for those unfamiliar with object-oriented c++, this means that nsfoo is declared as "derived from" nsifoo, and that nsifoo is a "base class" of nsfoo.
...the goal is the following: find out whether an object (an instance of a class) implements a given interface.
...And 6 more matches

WebIDL bindings
adding webidl bindings to a class to add a webidl binding for interface myinterface to a class mozilla::dom::myinterface that's supposed to implement that interface, you need to do the following: if your interface doesn't inherit from any other interfaces, inherit from nswrappercache and hook up the class to the cycle collector so it will trace the wrapper cache properly.
... for example, this idl: [constructor, constructor(unsigned long somenumber)] interface myinterface { }; will require the following declarations in myclass: class myclass { // various nsisupports stuff or whatnot static already_addrefed<myclass> constructor(const globalobject& aglobal, errorresult& rv); static already_addrefed<myclass> constructor(const globalobject& aglobal, uint32_t asomenumber, ...
...for example, objectorlong would have the following methods: bool isobject() const; jsobject* getasobject() const; void settoobject(jscontext*, jsobject*); bool islong() const; int32_t getaslong() const; int32_t& setaslong() owning unions used on the stack should be declared as a rootedunion<uniontype>, for example, rootedunion<owningobjectorlong>.
...And 6 more matches

Using the application cache - HTML: Hypertext Markup Language
an application cache gives the following benefits: offline browsing users can navigate a site even when they are offline.
...in addition, the browser also sends a checking event to the window.applicationcache object, and fetches the manifest file, following the appropriate http caching rules.
... if the manifest file has changed, all the files listed in the manifest—as well as those added to the cache by calling applicationcache.add()—are fetched into a temporary cache, following the appropriate http caching rules.
...And 6 more matches

Working with objects - JavaScript
to illustrate how this works, the following function displays the properties of the object when you pass the object and the object's name as arguments to the function: function showprops(obj, objname) { var result = ``; for (var i in obj) { // obj.hasownproperty() is used to filter out properties from the object's prototype chain if (obj.hasownproperty(i)) { result += `${objname}.${i} = ${obj[i]}\n`; } } return r...
...esult; } so, the function call showprops(mycar, "mycar") would return the following: mycar.make = ford mycar.model = mustang mycar.year = 1969 enumerate the properties of an object starting with ecmascript 5, there are three native ways to list/traverse object properties: for...in loops this method traverses all enumerable properties of an object and its prototype chain.
...however, this can be achieved with the following function: function listallproperties(o) { var objecttoinspect; var result = []; for(objecttoinspect = o; objecttoinspect !== null; objecttoinspect = object.getprototypeof(objecttoinspect)) { result = result.concat( object.getownpropertynames(objecttoinspect) ); } return result; } this can be useful to reveal "hidden" properties (properties in ...
...And 6 more matches

cfx - Archive of obsolete content
cfx supports the following global options: -h, --help - show a help message and exit -v, --verbose - enable lots of output "command-specific options" are documented alongside the commands.
... this command will create an skeleton add-on, as a starting point for your own add-on development, with the following file structure: my-addon data docs main.md lib main.js package.json readme.md tests test-main.js cfx run this command is used to run the add-on.
... for example, to pass the -jsconsole argument to firefox, which will launch the javascript error console, try the following: cfx run --binary-args -jsconsole to pass multiple arguments, or arguments containing spaces, quote them: cfx run --binary-args '-url "www.mozilla.org" -jsconsole' --extra-packages=extra_packages extra packages to include, specified as a comma-separated list of package names.
...And 5 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
the following code shows blocks designated for internet explorer: .
... nextsibling returns the node immediately following the current one.
...for example, the following code assumes that the div node already exists in the dom by the time the script block executes: ...
...And 5 more matches

Tamarin build documentation - Archive of obsolete content
tamarin source versions the following instructions are for obtaining and building the tamarin central source code.
... supported platforms tamarin currently supports the following operating systems and/or architectures.
... use the following command to create a copy of the tamarin repository: $ hg clone http://hg.mozilla.org/tamarin-central tamarin-central tips for working with mercurial can be found here.
...And 5 more matches

Custom toolbar button - Archive of obsolete content
in the extensions directory, create a new directory with the following name.
... copy the name from here and paste it, to avoid typing errors: custom-toolbar-button@example.com perform the following steps in this new directory, creating two files and a directory there.
... copy the following content, making sure that you scroll to get all of it.
...And 5 more matches

XUL Questions and Answers - Archive of obsolete content
the following bugs were reported on this issue: bug 22942, bug 133698.
...the following is the code they wrote: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="test-window" title="check list test" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <listbox rows="4"> <listhead> <listheader label="multi-column"/> </listhead> <listcols> <listcol flex="1"/> </list...
... using the following code sample, // get browsers object var browsers=document.getelementbyid('content').browsers; var numbrowsers=browsers.length; for (var i=0; numbrowsers>i; i++) { var thisuri=browsers[i].currenturi.spec; // do something with it.
...And 5 more matches

HTML: A good basis for accessibility - Learn web development
an excellent semantic example might look something like the following: <h1>my heading</h1> <p>this is the first section of my document.</p> <p>i'll add another paragraph here too.</p> <ol> <li>here is</li> <li>a list for</li> <li>you to read</li> </ol> <h2>my subheading</h2> <p>this is the first subsection of my document.
...using presentational html and line breaks, something like the following: <font size="7">my heading</font> <br><br> this is the first section of my document.
...to do that, we had to add the following bit of javascript trickery: document.onkeydown = function(e) { if(e.keycode === 13) { // the enter/return key document.activeelement.click(); } }; here we add a listener to the document object to detect when a button has been pressed on the keyboard.
...And 5 more matches

HTML: A good basis for accessibility - Learn web development
an excellent semantic example might look something like the following: <h1>my heading</h1> <p>this is the first section of my document.</p> <p>i'll add another paragraph here too.</p> <ol> <li>here is</li> <li>a list for</li> <li>you to read</li> </ol> <h2>my subheading</h2> <p>this is the first subsection of my document.
...using presentational html and line breaks, something like the following: <font size="7">my heading</font> <br><br> this is the first section of my document.
...to do that, we had to add the following bit of javascript trickery: document.onkeydown = function(e) { if(e.keycode === 13) { // the enter/return key document.activeelement.click(); } }; here we add a listener to the document object to detect when a button has been pressed on the keyboard.
...And 5 more matches

Advanced form styling - Learn web development
for example, let's take the following controls: <form> <p> <label for="search">search: </label> <input id="search" name="search" type="search"> </p> <p> <label for="text">text: </label> <input id="text" name="text" type="text"> </p> <p> <label for="date">date: </label> <input id="date" name="date" type="datetime-local"> </p> <p> <label for="radio">radio: </label> <input id="radio" name="...
...radio" type="radio"> </p> <p> <label for="checkbox">checkbox: </label> <input id="checkbox" name="checkbox" type="checkbox"> </p> <p><input type="submit" value="submit"></p> <p><input type="button" value="button"></p> </form> applying the following css to them removes system-level styling.
... the following live example shows you what they look like in your system — default on the left, and with the above css applied on the right (find it here also if you want to test it on other systems).
...And 5 more matches

Fetching data from the server - Learn web development
just inside the <script> element, add the following code.
...first of all, put the following beneath your previous code block — this is the empty shell of the function.
...add the following lines inside your updatedisplay() function: verse = verse.replace(" ", ""); verse = verse.tolowercase(); let url = verse + '.txt'; to begin creating an xhr request, you need to create a new request object using the xmlhttprequest() constructor.
...And 5 more matches

Handling text — strings in JavaScript - Learn web development
creating a string to start with, enter the following lines: let string = 'the revolution will not be televised.'; string; just like we did with numbers, we are declaring a variable, initializing it with a string value, and then returning the value.
...try entering the following lines: let badstring = this is a test; let badstring = 'this is a test; let badstring = this is a test'; these lines don't work because any text without quotes around it is assumed to be a variable name, property name, a reserved word, or similar.
... the following will work if you previously defined the variable string — try it now: let badstring = string; badstring; badstring is now set to have the same value as string.
...And 5 more matches

Getting started with Ember - Learn web development
use cases generally, emberjs works well for building apps that desire either or both of the following traits: 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.
... now type the following into your terminal to install ember-cli: npm install -g ember-cli this tool provides the ember program in your terminal, which is used to create, build, develop, test, and scaffold your application (run ember --help for a full list of commands and their options).
... to create a brand new application, type the following in your terminal.
...And 5 more matches

React interactivity: Editing, filtering, conditional rendering - Learn web development
add the following line just inside the top of your todo(props) { … } component definition: const [isediting, setediting] = usestate(false); next, we're going to rethink the <todo /> component — from now on, we want it to display one of two possible “templates", rather than the single template it's used so far: the "view" template, when we are just viewing a todo; this is what we’ve used in rest of the...
...still in todo.js, put the following underneath the existing hook: const [newname, setnewname] = usestate(''); next, create a handlechange() function that will set the new name; put this underneath the hooks but before the templates: function handlechange(e) { setnewname(e.target.value); } now we'll update our editingtemplate's <input /> field, setting a value attribute of newname, and binding our handlechange() function to it...
...update it as follows: <input id={props.id} classname="todo-text" type="text" value={newname} onchange={handlechange} /> finally, we need to create a function to handle the edit form’s onsubmit event; add the following just below the previous function you added: function handlesubmit(e) { e.preventdefault(); props.edittask(props.id, newname); setnewname(""); setediting(false); } remember that our edittask() callback prop needs the id of the task we're editing as well as its new name.
...And 5 more matches

Strategies for carrying out testing - Learn web development
throughout the following sections, we'll build up a support chart in this format.
... this gives us the following support chart so far: a grade: chrome and firefox for windows/mac, safari for mac, edge and ie for windows (last two versions of each), ios safari for iphone/ipad, android stock browser (last two versions) on phone/tablet, chrome and firefox for android (last two versions) on phone tablet b grade: ie 9 for windows c grade: n/a if you live somewhere else, or are working on a site that will ...
... consider the following example (see the source code, and also the example running live): test criteria for this feature could be written like so: a and b grade: button should be activatable by the user's primary control mechanism, whatever it is — this should include mouse, keyboard, and touch.
...And 5 more matches

Displaying Places information using views
places provides the following built-in views: tree menu toolbar instantiating the three built-in views are simply standard xul elements with a special type attribute whose value is "places".
... the following example uses the built-in tree view to display bookmarks whose titles or urls contain "mozilla".
... if you would like your tree view to be styled in the same manner that firefox styles its uses of the view, you should include the following stylesheet.
...And 5 more matches

QA phase
preliminary instructions we will be using the following file directories for this example: your working directory (root)/ mozilla-aurora (en-us source, pulled from http://hg.mozilla.org/releases/mozilla-aurora )/ l10n-central (directory for l10n directories, one per l10n; often referred to as "l10n base")/ your-locale-code (a directory with your l10n files, in this example we'll use x-testing) example: root/mozilla-aurora & root/l10n...
... to copy this file to the appropriate directory, do the following: navigate to your working directory from your command-line terminal (i.e., where you created the folder structure described above).
... enter the following commands: mkdir -p l10n-central/x-testing/toolkit/ cp mozilla-aurora/toolkit/locales/defines.inc l10n-central/x-testing/toolkit/defines.inc tah-dah!
...And 5 more matches

sslerr.html
id not found in server's session cache." ssl_error_server_cache_not_configured -12185 "ssl server cache not configured and not disabled for this socket." ssl_error_renegotiation_not_allowed -12176 "renegotiation is not allowed on this ssl socket." received a malformed (too long or short or invalid content) ssl handshake: all the error codes in the following block indicate that the local socket received an improperly formatted ssl3 handshake message from the remote peer.
...l received a malformed client key exchange handshake message." ssl_error_rx_malformed_finished -12252 "ssl received a malformed finished handshake message." ssl_error_rx_malformed_new_session_ticket -12178 "ssl received a malformed new session ticket handshake message." received a malformed (too long or short) ssl record: all the error codes in the following block indicate that the local socket received an improperly formatted ssl3 record from the remote peer.
...formed_alert -12250 "ssl received a malformed alert record." ssl_error_rx_malformed_handshake -12249 "ssl received a malformed handshake record." ssl_error_rx_malformed_application_data -12248 "ssl received a malformed application data record." received an ssl handshake that was inappropriate for the current state: all the error codes in the following block indicate that the local socket received an ssl3 handshake message from the remote peer at a time when it was inappropriate for the peer to have sent this message.
...And 5 more matches

Web Replay
in practice, non-deterministic replay is allowed in the following areas: heap allocations can be performed by the ipc and debugger components and so can differ between recording and replay.
... this non-determinism is prevented from spreading too far with the following techniques: different pointer values can affect the internal layout of hash tables.
... recording a recording content process differs from a normal content process in the following ways: calls to certain functions are intercepted by hooking them (rewriting the machine code at their entry points to call a different function with the same signature), including the function used to dispatch mach messages.
...And 5 more matches

Mozilla internal string guide
all string classes support the following three ownership models dynamically: reference counted, copy-on-write, buffers (the default) adopted buffers (a buffer that the string class owns, but is not reference counted, because it came from somewhere else) dependent buffers, that is, an underlying buffer that the string class does not own, but that the caller that constructed the string guarantees will outlive the string instance in...
... the following is a list of the most common concrete classes.
... if you wish to make a copy of a string into a new character buffer (char16_t*/char*), the preferred way is to allocate it with one of the following methods: char16_t* tonewunicode(nsastring&) - allocates a char16_t*buffer from an nsastring.
...And 5 more matches

Plug-in Basics - Plugins
when the user opens a page that contains embedded data of a media type that invokes a plug-in, the browser responds with the following sequence of actions: check for a plug-in with a matching mime type load the plug-in code into memory initialize the plug-in create a new instance of the plug-in gecko can load multiple instances of the same plug-in on a single page, or in several open windows at the same time.
... the following stages outline the life of a plug-in from loading to deletion: when gecko encounters data of a mime type registered for a plug-in (either embedded in an html page or in a separate file), it dynamically loads the plug-in code into memory, if it hasn't been loaded already, and it creates a new instance of the plug-in.
...the next section, how gecko finds plug-ins, describes these rules, and the following section, checking plug-ins by mime type, describes how you can use javascript to locate plug-ins yourself and establish which ones are to be registered for which mime types.
...And 5 more matches

@supports - CSS: Cascading Style Sheets
the following example returns true if the browser's transform-origin property considers 5% 5% valid: @supports (transform-origin: 5% 5%) {} function syntax the second basic supports condition is a supports function, the syntax for these is supported by all browsers, but the functions themselves are still being standardized.
...the following example returns true if the browser supports the child combinator: @supports selector(a > b) {} the not operator the not operator can precede any expression to create a new expression, resulting in the negation of the original one.
... the following example returns true if the browser's transform-origin property doesn't consider 10em 10em 10em valid: @supports not (transform-origin: 10em 10em 10em) {} as with any operator, the not operator can be applied to a declaration of any complexity.
...And 5 more matches

Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
a first look our three properties control the following aspects of a flex item's flexibility: flex-grow: how much of the positive free space does this item get?
...the following code would set the flex-grow property to 2, flex-shrink to 1 and flex-basis to auto.
... in the following examples i am working with flex-direction set to row, therefore the size of items will always come from their width.
...And 5 more matches

Specificity - CSS: Cascading Style Sheets
selector types the following list of selector types increases by specificity: type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
...when used with the following html ...
...when used with the following html ...
...And 5 more matches

Challenge solutions - Developer guides
solution add the following style declaration to the strong rule: font: 200% serif; if you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden.
... solution the following values are reasonable approximations of the named colors: strong { color: #f00; /* red */ background-color: #ddf; /* pale blue */ font: 200% serif; } .carrot { color: #fa0; /* orange */ } .spinach { color: #080; /* dark green */ } p { color: #00f; /* blue */ } content add an image challenge add a one rule to your stylesheet so that it displays the image at the start of each line.
... solution the following rule achieves this effect: ul { border: 10px solid lightblue; width: 100px; } layout default image position fixed image position challenge change your sample document, doc2.html, adding this tag to it near the end, just before </body>: <img id="fixed-pin" src="yellow-pin.png" alt="yellow map pin"> predict where the image will appear in your document.
...And 5 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
width image same as width attribute for <img> a few additional non-standard attributes are listed following the descriptions of the standard attributes.
...if you have an input whose name is set to guest and another whose name is hat-size, the following code can be used: let form = document.queryselector("form"); let guestname = form.elements.guest; let hatsize = form.elements["hat-size"]; when this code has run, guestname will be the htmlinputelement for the guest field, and hatsize the object for the hat-size field.
... non-standard attributes the following non-standard attributes are also available on some browsers.
...And 5 more matches

Global attributes - HTML: Hypertext Markup Language
in addition to the basic html global attributes, the following global attributes also exist: xml:lang and xml:base — these are inherited from the xhtml specifications and deprecated, but kept for compatibility purposes.
...it can have the following values: off or none, no autocapitalization is applied (all letters default to lowercase) on or sentences, the first letter of each sentence defaults to a capital letter; all other letters default to lowercase words, the first letter of each word defaults to a capital letter; all other letters default to lowercase characters, all letters should default to uppercase class a space-se...
...the attribute must take one of the following values: true or the empty string, which indicates that the element must be editable; false, which indicates that the element must not be editable.
...And 5 more matches

Cross-Origin Resource Sharing (CORS) - HTTP
a “simple request” is one that meets all the following conditions: one of the allowed methods: get head post apart from the headers automatically set by the user agent (for example, connection, user-agent, or the other headers defined in the fetch spec as a “forbidden header name”), the only headers which are allowed to be manually set are those which the fetch spec defines as a “cors-safelisted request-header”, which are: ...
...what values webkit/safari consider “nonstandard” is not documented, except in the following webkit bugs: require preflight for non-standard cors-safelisted request headers accept, accept-language, and content-language allow commas in accept, accept-language, and content-language request headers for simple cors switch to a blacklist model for restricted accept headers in simple cors requests no other browsers implement these extra restrictions, because they’re not part of the sp...
... 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 r...
...And 5 more matches

Closures - JavaScript
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().
... closure consider the following code example: function makefunc() { var name = 'mozilla'; function displayname() { alert(name); } return displayname; } var myfunc = makefunc(); myfunc(); running this code has exactly the same effect as the previous example of the init() function above.
...you can attach them to buttons (in this case hyperlinks) as demonstrated in the following code example.
...And 5 more matches

Indexed collections - JavaScript
creating an array the following statements create equivalent arrays: let arr = new array(element0, element1, ..., elementn) let arr = array(element0, element1, ..., elementn) let arr = [element0, element1, ..., elementn] element0, element1, ..., elementn is a list of values for the array's elements.
... to create an array with non-zero length, but without any items, either of the following can be used: // this...
...the following example illustrates this behavior.
...And 5 more matches

JavaScript modules - JavaScript
the following is found in main.js, below the import lines: let mycanvas = create('mycanvas', document.body, 480, 320); let reportlist = createreportlist(mycanvas.id); let square1 = draw(mycanvas.ctx, 50, 50, 100, 'blue'); reportarea(square1.length, reportlist); reportperimeter(square1.length, reportlist); note: although imported features are available in the file, they are read only views of the feature t...
...we'll look at these in the following sections.
... so for example, both of the following would do the same job, albeit in a slightly different way: // inside module.js export { function1 as newfunctionname, function2 as anothernewfunctionname }; // inside main.js import { newfunctionname, anothernewfunctionname } from './modules/module.js'; // inside module.js export { function1, function2 }; // inside main.js import { function1 as newfunctionname, function2 as anothernewfunctionname } from './modules/module.js'; let's look at a real example.
...And 5 more matches

Tabbed browser - Archive of obsolete content
browser windows, then in a new window instead) "tab" new tab (if there aren't any browser windows, then in a new window instead) "tabshifted" same as "tab" but in background if default is to select new tabs, and vice versa "window" new window "save" save to disk (with no filename hint!) openuilink( url, e, ignorebutton, ignorealt, allowkeywordfixup, postdata, referrerurl ) the following code will open a url in a new tab, an existing tab, or an existing window based on which mouse button was pressed and which hotkeys (ex: ctrl) are being held.
...following this practice minimizes the proliferation of tabs and browsers created by your extension.
...the following code demonstrates how to re-use an existing tab that already displays the desired url/uri.
...And 4 more matches

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
the following picture shows the model that is the essence of this technote.
...we've separated this sample in two main components following the model.
...so the following piece of html defines an iframe element which is not visible to the user: <div style="visibility:hidden; position:absolute; top:-1000px; left:-1000px"> <iframe id="bridgeframe" src=""></iframe> </div> the javascript code located in the data loader component will be interacting with this iframe element, requesting data from the server.
...And 4 more matches

Creating a Help Content Pack - Archive of obsolete content
insert into it the following text: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#"> </rdf:rdf> if you're familiar with html or xml, you might recognize this as the container element for the whole document.
...(we're still not actually to the point where we're describing the actual data in each of these, so we'll just use some filler data for now.) add the following code inside the rdf:description element you just created: <nc:panellist> <rdf:seq> </rdf:seq> </nc:panellist> you'll create the relevant information descriptions within the rdf:seq element.
...each panel is specified by one rdf:description element with the following attributes: nc:panelid specifies the name of the panel, which may be any one of glossary, search, toc, or index.
...And 4 more matches

Binding Attachment and Detachment - Archive of obsolete content
in the following example, a binding is referenced that will be attached to all html checkbox elements.
... for example, given a binding d1, with an explicit inheritance chain of d1 -> d2 -> d3 if this element is attached to an element using element.style.mozbinding that already has a binding chain of s1 -> s2 -> s3 the resulting binding chain following the addition of the binding is d1 -> d2 -> d3 -> s1 -> s2 -> s3 the inheritance between d3 and s1 is implicit, meaning that there is no connection in the xbl documents between the two bindings.
... when a binding is attached, the following events occur: if required, anonymous content is cloned from the binding's content template and inserted around the bound element.
...And 4 more matches

Document Object Model - Archive of obsolete content
for example, the following two lines which open a new window are functionally equivalent: window.open("test.xul","_new"); open("test.xul","_new"); when you declare a function or a variable at the top level of a script, that is outside another function, you are actually declaring a property of the global object.
...for example, the following code will display the text 'message' in an alert twice.
...to do this, we can do the following: alert(window.opener.gettext()); each window has an opener property which holds the window object that opened this one.
...And 4 more matches

Skinning XUL Files by Hand - Archive of obsolete content
following the instructions here, you are going to create a skin for a xul file and apply it by specifying classes for all of the interested elements.
...for example, when a button is defined as follows: <button class="plain" label="push me" /> then the following very simple style definition applies to that button.
... button.plain { border: 0px !important; } the global skin, in which styles for these several button classes and dozens of other elements are defined, is described in the following section.
...And 4 more matches

Introduction to Public-Key Cryptography - Archive of obsolete content
figure 4 assumes the following: the user has already decided to trust the server, either without authentication or on the basis of server authentication via ssl.
... types of certificates common types of certificates include the following: client ssl certificates.
...any of the binary formats can be imported in text form, which begins with the line: -----begin certificate----- following this line is the certificate data, which can be in any of the binary formats described.
...And 4 more matches

Mozilla XForms User Interface - Archive of obsolete content
these attributes are combined into following logical groups.
...it can have the following representations: text field - default representation.
...it can have the following presentations: text - default representation for data of most types, especially static text.
...And 4 more matches

RDF in Mozilla FAQ - Archive of obsolete content
var ds = rdf.getdatasource("http://www.mozilla.org/some-rdf-file.rdf"); // note that ds will load asynchronously, so assertions will not // be immediately available alternatively, you can create one directly using the xpcom component manager, as the following code fragment illustrates: // create an rdf/xml datasource using the xpcom component manager var ds = components .classes["@mozilla.org/rdf/datasource;1?name=xml-datasource"] .createinstance(components.interfaces.nsirdfdatasource); // the nsirdfremotedatasource interface has the interfaces // that we need to setup the datasource.
...the following code illustrates its usage: // this is the object that will observe the rdf/xml load's progress var observer = { onbeginload: function(asink) {}, oninterrupt: function(asink) {}, onresume: function(asink) {}, onendload: function(asink) { asink.removexmlsinkobserver(this); alert("done!"); }, onerror: function(asink, astatus, aerrormsg) { alert("er...
...for example, the following xul fragment illustrates how to add the bookmarks service as a datasource into a xul template.
...And 4 more matches

Move the ball - Game development
delete all the javascript you currently have inside your html file except for the first two lines, and add the following below them.
...now, let's draw the ball — add the following inside your draw() function: ctx.beginpath(); ctx.arc(50, 50, 10, 0, math.pi*2); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); try your updated code now — the ball should be repainted on every frame.
... first, add the following two lines above your draw() function, to define x and y: var x = canvas.width/2; var y = canvas.height-30; next update the draw() function to use the x and y variables in the arc() method, as shown in the following highlighted line: function draw() { ctx.beginpath(); ctx.arc(x, y, 10, 0, math.pi*2); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); } now comes the important part: we want to add a small value t...
...And 4 more matches

Player paddle and controls - Game development
loading the paddle first, add the paddle variable we will be using in our game, right after the ball variable: var paddle; then, in the preload function, load the paddle image by adding the following new load.image() call: function preload() { // ...
... rendering the paddle, with physics next up, we will init our paddle by adding the following add.sprite() call inside the create() function — add it right at the bottom: paddle = game.add.sprite(game.world.width*0.5, game.world.height-5, 'paddle'); we can use the world.width and world.height values to position the paddle exactly where we want it: game.world.width*0.5 will be right in the middle of the screen.
...add the following line below the previous new one: paddle.anchor.set(0.5,1); the paddle is now positioned right where we want it to be.
...And 4 more matches

Plug-in Development Overview - Gecko Plugin API Reference
a basic overview of the plug-in development process is given in the following steps.
...the following sections describe platform-specific discovery and registration: ms windows unix mac os x ms windows on windows, plug-ins are found according to the section how gecko finds plug-ins.
... for this the version stamp of the embedded resource of the plug-in dll should contain the following set of string/value pairs: mimetype: for mime types fileextents: for file extensions fileopenname: for file open template productname: for plug-in name filedescription: for description language: for language in use in the mime types and file extensions strings, multiple values are separated by the "|" character, for example: video/quicktime|audio/aiff|image/jpeg the version stamp ...
...And 4 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
underneath the preceding element in a horizontal writing mode, and above the following element (commonly known as a block-level element).
... 49 cors-safelisted request header cors, fetch a cors-safelisted request header is one of the following http headers: 50 cors-safelisted response header cors, fetch, glossary, http a cors-safelisted response header is an http header which has been safelisted so that it will not be filtered when responses are processed by cors, since they're considered safe (as the headers listed in access-control-expose-headers).
...not all http responses can be cached, these are the following constraints for an http response to be cached: 61 caldav caldav, glossary, infrastructure caldav (calendaring extensions to webdav) is a protocol standardized by the ietf and used to remotely access calendar data from a server.
...And 4 more matches

Styling tables - Learn web development
link the css to the html by placing the following line of html inside your <head>: <link href="style.css" rel="stylesheet" type="text/css"> spacing and layout the first thing we need to do is sort out the spacing/layout — default table styling is so cramped!
... to do this, add the following css to your style.css file: /* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child(1) { width: 30%; } thead th:nth-child(2) { width: 20%; } thead th:nth-child(3) { width: 15%; } thead th:nth-child(4) { width: 35%; } th, td { padding: 20px; } the most important parts to note are as follows: a table-layout value of fixed is generally a good idea to set on your table, as it makes the table behave a bit more predictably by default.
... first, add the following <link> element into your html head, just above your existing <link> element: <link href='https://fonts.googleapis.com/css?family=rock+salt' rel='stylesheet' type='text/css'> now add the following css into your style.css file, below the previous addition: /* typography */ html { font-family: 'helvetica neue', helvetica, arial, sans-serif; } thead th, tfoot th { font-family: 'rock salt', c...
...And 4 more matches

Styling lists - Learn web development
in our example, we've set the ordered list to use uppercase roman numerals, with: ol { list-style-type: upper-roman; } this gives us the following look: you can find a lot more options by checking out the list-style-type reference page.
... in our finished example, we have styled the unordered list like so (on top of what you've already seen above): ul { padding-left: 2rem; list-style-type: none; } ul li { padding-left: 2rem; background-image: url(star.svg); background-position: 0 0; background-size: 1.6rem 1.6rem; background-repeat: no-repeat; } here we've done the following: set the padding-left of the <ul> down from the default 40px to 20px, then set the same amount on the list items.
... this gives us the following result: list-style shorthand the three properties mentioned above can all be set using a single shorthand property, list-style.
...And 4 more matches

UI pseudo-classes - Learn web development
for example, if we apply the following css to the above html: input:required { border: 1px solid black; } input:optional { border: 1px solid silver; } the required controls would have a black border, and the optional control will have a silver border, like so: you can also try submitting the form without filling it in, to see the client-side validation error messages browsers give you by default.
... as in the previous example, we've got extra <span>s to generate content on, which we'll use to provide indicators of valid/invalid data: <div> <label for="fname">first name *: </label> <input id="fname" name="fname" type="text" required> <span></span> </div> to provide these indicators, we use the following css: input + span { position: relative; } input + span::before { position: absolute; right: -20px; top: 5px; } input:invalid { border: 2px solid red; } input:invalid + span::before { content: '✖'; color: red; } input:valid + span::before { content: '✓'; color: green; } as before, we set the <span>s to position: relative so that we can position the generated content rel...
...both of these have the following html structure for the inputs: <p> <input type="radio" name="fruit" value="cherry" id="cherry"> <label for="cherry">cherry</label> <span></span> </p> for the :default example, we've added the checked attribute to the middle radio button input, so it will be selected by default when loaded.
...And 4 more matches

HTML basics - Learn web development
for example, take the following line of content: my cat is very grumpy if we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags: <p>my cat is very grumpy</p> anatomy of an html element let's explore this paragraph element a bit further.
... elements can also have attributes that look like the following: attributes contain extra information about the element that you don't want to appear in the actual content.
... an attribute should always have the following: a space between it and the element name (or the previous attribute, if the element already has one or more attributes).
...And 4 more matches

Making decisions in your code — conditionals - Learn web development
else syntax basic if...else syntax looks like the following in pseudocode: if (condition) { code to run if condition is true } else { run some other code instead } here we've got: the keyword if followed by some parentheses.
... this code is pretty human-readable — it is saying "if the condition returns true, run code a, else run code b" you should note that you don't have to include the else and the second curly brace block — the following is also perfectly legal code: if (condition) { code to run if condition is true } run some other code however, you need to be careful here — in this case, the second block of code is not controlled by the conditional statement, so it always runs, regardless of whether the condition returns true or false.
... as a final point, you may sometimes see if...else statements written without the curly braces, in the following shorthand style: if (condition) code to run if condition is true else run some other code instead this is perfectly valid code, but using it is not recommended — it 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.
...And 4 more matches

Useful string methods - Learn web development
try entering the following lines: let browsertype = 'mozilla'; browsertype.length; this should return the number 7, because "mozilla" is 7 characters long.
... to retrieve the last character of any string, we could use the following line, combining this technique with the length property we looked at above: browsertype[browsertype.length-1]; the length of "mozilla" is 7, but because the count starts at 0, the character position is 6; using length-1 gets us the last character.
...try the following: browsertype.indexof('vanilla'); this should give you a result of -1 — this is returned when the substring, in this case 'vanilla', is not found in the main string.
...And 4 more matches

Ember app structure and componentization - Learn web development
this already exists, and its contents currently look like so: {{!-- the following component displays ember's default welcome message.
...to start with, delete the contents of application.hbs and replace them with the following: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" autofocus > </section> note: aria-label provides a label for assistive technology to make use of — for example, for a screenreader to read out.
... looking at the code next to the rendered todo app, there are a number of ways we could decide how to break up the ui, but let's plan on splitting the html out into the following components: the component groupings are as follows: the main input / "new-todo" (red in the image) the containing body of the todo list + the mark-all-complete button (purple in the image) the mark-all-complete button, explicitly highlighted for reasons given below (yellow in the image) each todo is an individual component (green in the image) the footer (blue in the image) ...
...And 4 more matches

React interactivity: Events and state - Learn web development
write the following above your handlesubmit() function, inside form(): const [name, setname] = usestate('use hooks!'); what's going on in this line of code?
... tasks as state import usestate 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.
...And 4 more matches

Dynamic behavior in Svelte: working with variables and props - Learn web development
replace the existing <ul> element with the following simplified version to get an idea of how it works: <ul> {#each todos as todo, index (todo.id)} <li> <input type="checkbox" checked={todo.completed}/> {index}.
...replace your existing <ul> block with the following: <!-- todos --> <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> {#each todos as todo (todo.id)} <li class="todo"> <div class="stack-small"> <div class="c-cb"> <input type="checkbox" id="todo-{todo.id}" checked={todo.completed}/> <label for="todo-{todo.id}" class="todo-label"> {todo.name} </label> </div> ...
...in the following code they are assigned a value when the component is instantiated and the script is executed, but after that, their values are not modified: let totaltodos = todos.length let completedtodos = todos.filter(todo => todo.completed).length we could recalculate them after toggling and removing todos, but there's an easier way to do it.
...And 4 more matches

Configuring Build Options
please read the following directions carefully before building, and follow them in order.
... adding the following line to your mozconfig allows you to change the objdir: mk_add_options moz_objdir=@topsrcdir@/obj-@config_guess@ it is a good idea to have your objdir name start with obj so that mercurial ignores it.
... choose one of the following options to add to your mozconfig file: browser (firefox) ac_add_options --enable-application=browser note: this is the default mail (thunderbird) ac_add_options --enable-application=comm/mail mozilla suite (seamonkey) ac_add_options --enable-application=suite calendar (lightning extension, uses thunderbird) ac_add_options --enable-application=comm/mail ac_add_o...
...And 4 more matches

Application Translation with Mercurial
install it into your default firefox profile (you will have more than one profile when following this guide).
... getting the current texts in english and your locale obtaining the english texts with the source code get the source code by downloading the following file: firefox desktop or firefox for android: download the mozilla-<branch>.hg file (e.g.
... copy the repository to your computer by running the following command: hg clone http://hg.mozilla.org/releases/l10n/mozilla-aurora/de/ de-mozilla-aurora this should proceed pretty fast.
...And 4 more matches

Bootstrapping a new locale
(you should "cd" to the directory before beginning.) in the terminal, type the following command: $ hg clone http://hg.mozilla.org/releases/mozilla-x.x.x/ where "x.x.x" is the existing release branch version.
... navigate to that level making sure you are *not* inside mozilla-1.9.x/ and then run the following commands.
...we'll first navigate to the directory called "browser" by running the following commands one after the other from your command line: $ cd [ab-cd]/browser/chrome/browser to see what is contained in "browser" type $ ls and, you should see the following output from your terminal: aboutcerterror.dtd pageinfo.dtd aboutdialog.dtd pageinfo.properties aboutprivatebrowsing.dtd pagereportfirsttime.dtd aboutrobots.dtd places aboutsessionrest...
...And 4 more matches

AsyncTestUtils extended framework
boilerplate add the following code to the top of your test file to import everything you need: load("../../mailnews/resources/loghelper.js"); load("../../mailnews/resources/asynctestutils.js"); load("../../mailnews/resources/messagegenerator.js"); load("../../mailnews/resources/messagemodifier.js"); load("../../mailnews/resources/messageinjection.js"); if the directory where you are adding the tests does not have a head_*.js file that has the two following lines, add them at the top of your test file (before the lines shown above): load("../../mailnews/resources/maildirservice.js"); load("../../m...
...ailnews/resources/mailtestutils.js"); at the bottom of the test file, add the following: var tests =[ // list your tests here ]; function run_test() { configure_message_injection({mode: "local"}); async_run_tests(tests); } asynchronous testing basics why do we need it?
...your test functions need to agree to the following contract: the asynchronous function contract a function should yield false or return false when something asynchronous is going on.
...And 4 more matches

JSS Provider Notes
apply for your own jce code-signing certificate following the procedure at how to implement a provider for the javatm cryptography extension.
... the following example shows how you can specify which token is used for various jca operations: // lookup pkcs #11 tokens cryptomanager manager = cryptomanager.getinstance(); cryptotoken tokena = manager.gettokenbyname("tokena"); cryptotoken tokenb = manager.gettokenbyname("tokenb"); // create an rsa keypairgenerator using tokena manager.setthreadtoken(tokena); keypairgenerator rsakpg = keypairgenerator.g...
...dsakpg.initialize(1024); keypair dsapair = dsakpg.generatekeypair(); supported classes cipher dsaprivatekey dsapublickey keyfactory keygenerator keypairgenerator mac messagedigest rsaprivatekey rsapublickey secretkeyfactory secretkey securerandom signature what's not supported the following classes don't work very well: keystore: there are many serious problems mapping the jca keystore interface onto nss's model of pkcs #11 modules.
...And 4 more matches

Mozilla-JSS JCA Provider notes
apply for your own jce code-signing certificate following the procedure at how to implement a provider for the javatm cryptography extension.
...the following example shows how you can specify which token is used for various jca operations: // lookup pkcs #11 tokens cryptomanager manager = cryptomanager.getinstance(); cryptotoken tokena = manager.gettokenbyname("tokena"); cryptotoken tokenb = manager.gettokenbyname("tokenb"); // create an rsa keypairgenerator using tokena manager.setthreadtoken(tokena); keypairgenerator rsakpg = keypairgenerator.getin...
...dsakpg.initialize(1024); keypair dsapair = dsakpg.generatekeypair(); supported classes cipher dsaprivatekey dsapublickey keyfactory keygenerator keypairgenerator mac messagedigest rsaprivatekey rsapublickey secretkeyfactory secretkey securerandom signature cipher supported algorithms notes aes des desede (des3) rc2 rc4 rsa the following modes and padding schemes are supported: algorithm mode padding des ecb nopadding cbc nopadding pkcs5 padding desede des3 ecb nopadding cbc nopadding pkcs5 padding ...
...And 4 more matches

Rhino Debugger
controlling execution the debugger provides the following facilities for you to control the execution of scripts you are debugging: step into to single step entering any function calls, you may do any of the following: select the debug->step into menu item on the menu bar press the step into button on the toolbar press the f11 key on the keyboard execution will resume.
... step over to single step to the next line in the current function, you may do any of the following: select the debug->step over menu item on the menu bar press the step over button on the toolbar press the f7 key on the keyboard execution will resume but control will return to the debugger at the next line in the current function or top-level script.
... step out to continue execution until the current function returns you may do any of the following: select the debug->step out menu item on the menu bar press the step out button on the toolbar press the f8 key on the keyboard execution will resume until the current function returns or a breakpoint is hit.
...And 4 more matches

JSAPI reference
reporterrorflagsandnumber js_reporterrorflagsandnumberuc js_reporterrornumberucarray added in spidermonkey 24 js_reportoutofmemory js_reportallocationoverflow added in spidermonkey 1.8 js_geterrorreporter js_seterrorreporterobsolete since jsapi 52 js_errorfromexception js_geterrorprototype jsreport_is_exception jsreport_is_strict jsreport_is_warning jsreport_is_strict_mode_error the following functions allow c/c++ functions to throw and catch javascript exceptions: js::createerror added in spidermonkey 38 js_isexceptionpending js_getpendingexception js_setpendingexception js_clearpendingexception js_throwstopiteration added in spidermonkey 1.8 js_isstopiteration added in spidermonkey 31 typedef jsexceptionstate js_saveexceptionstate js_restoreexceptionstate js_dropexce...
...spidermonkey 38 js::falsehandlevalue added in spidermonkey 38 jsval constants: jsval_null obsolete since jsapi 42 jsval_void obsolete since jsapi 42 jsval_true obsolete since jsapi 42 jsval_false obsolete since jsapi 42 jsval_zero obsolete since jsapi 42 jsval_one obsolete since jsapi 42 function and macros for checking the type of a jsval: enum jstype js_typeofvalue all of the following are deprecated.
... js_convertarguments obsolete since jsapi 38 js_convertargumentsva obsolete since jsapi 38 js_pusharguments obsolete since javascript 1.8.5 js_pushargumentsva obsolete since javascript 1.8.5 js_poparguments obsolete since javascript 1.8.5 js_addargumentformatter obsolete since jsapi 18 js_removeargumentformatter obsolete since jsapi 18 the following functions convert js values to various types.
...And 4 more matches

Starting WebLock
xxx what is example 2?following example 2, you change the class definition to support the nsiobserver interface and change ns_impl_isupports1 so that the queryinterface implementation knows that the component also supports nsiobserver.
... in short, to register the weblock component as an xpcom-startup observer, do the following: char* previous = nsnull; rv = catman->addcategoryentry("xpcom-startup", "weblock", weblock_contractid, pr_true, // persist category pr_true, // replace existing &previous); if (previous) nsmemory::free(previous); // free the memory the replace...
... in general, the weblock service interface needs to include the following functionality: lock - enable web locking so that any browser in the gecko application is restricted to the white list of website domains.
...And 4 more matches

Using XPCOM Utilities to Make Things Easier
though they overlap somewhat (e.g., high-level macros expand to other macros), they fall into the following general categories.
...the four required parts[other-parts] of the structure contain the following information: a human readable class name the class id (cid) the contract id (an optional but recommended argument) a constructor for the given object static const nsmodulecomponentinfo components[] = { { "pretty class name", cid, contract_id, constructor }, // ...
...many cids take the following form: #define ns_ioservice_cid \ { /* 9ac9e770-18bc-11d3-9337-00104ba0fd40 */ \ 0x9ac9e770, \ 0x18bc, \ 0x11d3, \ {0x93, 0x37, 0x00, 0x10, 0x4b, 0xa0, 0xfd, 0x40} \ } the next entry is the contract id string, which is also us...
...And 4 more matches

Plug-in Development Overview - Plugins
a basic overview of the plug-in development process is given in the following steps.
...the following sections describe platform-specific discovery and registration: ms windows unix mac os x ms windows on windows, plug-ins are found according to the section how gecko finds plug-ins.
... for this the version stamp of the embedded resource of the plug-in dll should contain the following set of string/value pairs: mimetype: for mime types fileextents: for file extensions fileopenname: for file open template productname: for plug-in name filedescription: for description language: for language in use in the mime types and file extensions strings, multiple values are separated by the "|" character, for example: video/quicktime|audio/aiff|image/jpeg the version stamp ...
...And 4 more matches

Network request details - Firefox Developer Tools
the tabs at the top of this pane enable you to switch between the following pages: headers messages (only for websocket items) cookies params response cache timings security (only for secure pages) stack trace (only when the request has a stack trace, e.g.
... request information the following information is shown only when the section is expanded: scheme: the scheme used in the url host: the server involved in the request filename: the full path to the file requested address: the ip address of the host the following information is shown in both the collapsed and the expanded states: status: the http response code for the request.
...the full list of cookie attributes is shown—see the following screenshot showing response cookies with further attributes shown.
...And 4 more matches

Web Console remoting - Firefox Developer Tools
when page navigation starts the following packet is sent from the tab actor: { "from": tabactor, "type": "tabnavigated", "state": "start", "url": newurl, "nativeconsoleapi": true } the nativeconsoleapi property tells if the window.console object is native or not for the top level window object for the given tab - this is always true when navigation starts.
... when navigation stops the following packet is sent: { "from": tabactor, "type": "tabnavigated", "state": "stop", "url": newurl, "title": newtitle, "nativeconsoleapi": true|false } getcachedmessages(types, onresponse) the webconsoleclient.getcachedmessages(types, onresponse) method sends the following packet to the server: { "to": "conn0.console9", "type": "getcachedmessages", "messagetypes": [ "pageerror", "consoleapi" ] } the getcachedmessages packet allows one to retrieve the cached messages from before the web console was open.
...these will be explained in the following sections of this document.
...And 4 more matches

DirectoryEntrySync - Web APIs
the following creates an empty file called seekrits.txt in the root directory.
...the following creates a new directory called superseekrit in the root directory.
... parameter none exceptions this method can raise a fileexception with the following codes: exception description not_found_err the directory does not exist.
...And 4 more matches

Introduction to the DOM - Web APIs
your dom programming may be something as simple as the following, which displays an alert message by using the alert() function from the window object, or it may use more sophisticated dom methods to actually create new content, as in the longer example below.
... this following javascript will display an alert when the document is loaded (and when the whole dom is available for use): <body onload="window.alert('welcome to my home page!');"> another example.
... the following table briefly describes these data types.
...And 4 more matches

IDBObjectStoreSync - Web APIs
any add( in any value, in optional any key ) raises (idbdatabaseexception); parameters returns exceptions this method can raise a idbdatabaseexception with the following codes: value the value to store into the index.
... exceptions this method can raise a idbdatabaseexception with the following codes: serial_err if the data being stored could not be deserialized by the internal structured cloning algorithm.
... exceptions this method can raise a databaseexception with the following code: not_found_err if no records exist in this index for the requested key range.
...And 4 more matches

Basic concepts - Web APIs
you'll find the following useful: for an overview of the design and structure of indexeddb, see big concepts.
...so keep the following important concepts in mind: indexeddb databases store key-value pairs.
...each database must have the following: name.
...And 4 more matches

Using IndexedDB - Web APIs
basic pattern the basic pattern that indexeddb encourages is the following: open a database.
... creating and structuring the store using an experimental version of indexeddb in case you want to test your code in browsers that still use a prefix, you can use the following code: // in the following line, you should include the prefixes of implementations you want to test.
...idbtransaction || {read_write: "readwrite"}; // this line should only be needed if it is needed to support the object's constants for older browsers window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need window.mozidb*) beware that implementations that use a prefix may be buggy, or incomplete, or following an old version of the specification.
...And 4 more matches

Variable fonts guide - CSS: Cascading Style Sheets
this can generally be resolved fairly easily, but does require an extra step in writing your css: font-weight: 375; font-variation-settings: 'wght' 375; the following live example's css can be edited to allow you to play with font weight values.
... font-stretch: 115%; font-variation-settings: 'wdth' 115; the following live example's css can be edited to allow you to play with font width values.
... font-style: italic; font-variation-settings: 'ital' 1; font-synthesis: none; the following live example's css can be edited to allow you to play with font italics.
...And 4 more matches

CSS values and units - CSS: Cascading Style Sheets
when viewing css property value syntax in a css specification or the mdn property page, allowable keywords will be listed in the following form.
... the following values are the pre-defined keyword values allowed for float.
...for example, if you wanted to include a background image, you might use either of the following.
...And 4 more matches

Using media queries - CSS: Cascading Style Sheets
media queries are used for the following: to conditionally apply styles with the css @media and @import at-rules.
...for example, the styles nested inside the following query will never be used, because no speech-only device has a screen aspect ratio: @media speech and (aspect-ratio: 11/5) { ...
...for instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait mode: @media (min-height: 680px), screen and (orientation: portrait) { ...
...And 4 more matches

<input type="search"> - HTML: Hypertext Markup Language
additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, search field inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum number of characters the input should accept minlength the minimum number of characters long the input can be and still be considered valid pattern a regular expression the input's...
... spellcheck non-standard attributes the following non-standard attributes are available to search input fields.
...the following screenshot comes from chrome: in addition, modern browsers also tend to automatically store search terms previously entered across domains, which then come up as autocomplete options when subsequent searches are performed in search inputs on that domain.
...And 4 more matches

HTTP Public Key Pinning (HPKP) - HTTP
the following commands will help you extract the base64 encoded information from a key file, a certificate signing request, or a certificate.
...4 openssl ec -in my-ecc-key-file.key -outform der -pubout | openssl dgst -sha256 -binary | openssl enc -base64 openssl req -in my-signing-request.csr -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64 openssl x509 -in my-certificate.crt -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64 the following command will extract the base64 encoded information for a website.
... apache adding a line similar to the following to your webserver's config will enable hpkp on your apache.
...And 4 more matches

Array.prototype.forEach() - JavaScript
the following example illustrates an alternative approach, using foreach().
... the following code logs a line for each element in an array: function logarrayelements(element, index, array) { console.log('a[' + index + '] = ' + element) } // notice that index 2 is skipped, since there is no item at // that position in the array...
... [2, 5, , 9].foreach(logarrayelements) // logs: // a[0] = 2 // a[1] = 5 // a[3] = 9 using thisarg the following (contrived) example updates an object's properties from each entry in the array: function counter() { this.sum = 0 this.count = 0 } counter.prototype.add = function(array) { array.foreach((entry) => { this.sum += entry ++this.count }, this) // ^---- note } const obj = new counter() obj.add([2, 5, 9]) obj.count // 3 obj.sum // 16 since the thisarg parameter (this) is provided to foreach(), it is passed to callback each time it's invoked.
...And 4 more matches

stroke-linejoin - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nine elements: <altglyph>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"> <!-- upper left path: effect of the "miter" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="miter" /> <!-- center path: effect of the "round" value --> <path d="m7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" ...
... --> <path d="m9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="arcs" /> <!-- the following pink lines highlight the position of the path for each stroke --> <g id="highlight"> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5" cy="5.5" r="0.05" fill="pink" /> </g> <use xlink:href="#highlight" x=...
... example html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "arcs" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none" stroke-linejoin="arcs" /> <!-- the following pink lines highlight the position of the path for each stroke --> <g id="p"> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5" cy="5" r="0.05" fill="pink" /> </g> </svg> bevel the bevel value indicates that a...
...And 4 more matches

Understanding WebAssembly text format - WebAssembly
all code in a webassembly module is grouped into functions, which have the following pseudo-code structure: ( func <signature> <locals> <body> ) the signature declares what the function takes (parameters) and returns (return values).
... so given the following function: (func (param i32) (param f32) (local f64) local.get 0 local.get 1 local.get 2) the instruction local.get 0 would get the i32 parameter, local.get 1 would get the f32 parameter, and local.get 2 would get the f64 local.
...so for example, after executing the following function: (func (param $p i32) (result i32) local.get $p local.get $p i32.add) the stack contains exactly one i32 value — the result of the expression ($p + $p), which is handled by i32.add.
...And 4 more matches

Using the WebAssembly JavaScript API - WebAssembly
create a <script></script> element in your html file, and add the following code to it: var importobject = { imports: { imported_func: arg => console.log(arg) } }; streaming the webassembly module new in firefox 58 is the ability to compile and instantiate webassembly modules directly from underlying sources.
... add the following to your script, below the first block: webassembly.instantiatestreaming(fetch('simple.wasm'), importobject) .then(obj => obj.instance.exports.exported_func()); the net result of this is that we call our exported webassembly function exported_func, which in turn calls our imported javascript function imported_func, which logs the value provided inside the webassembly instance (42) to the console...
... now add the following line to the top of your script, to create a memory instance: var memory = new webassembly.memory({initial:10, maximum:100}); the unit of initial and maximum is webassembly pages — these are fixed to 64kb in size.
...And 4 more matches

page-mod - Archive of obsolete content
for example, the following add-on displays an alert whenever the user visits any page hosted at "mozilla.org": var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscript: 'window.alert("page matches ruleset");' }); you can modify the document in your script: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscript: 'document.body.innerhtml = ' + ' "<h1>page matches ruleset</h1>";' }); you can supply t...
... for example, the following add-on retrieves the html content of specific tags from documents that match the pattern.
... the following add-on creates a button which, when clicked, highlights all the div elements in the document loaded into the active tab: require("sdk/ui/button/action").actionbutton({ id: "highlight-divs", label: "highlight divs", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: 'var divs = document.getelementsbytagname("div");' + ...
...And 3 more matches

Canvas code snippets - Archive of obsolete content
code usable from web content getting the number of pixels of a certain color in a canvas the following function will return the number of pixels in a canvas that have the rgb color of r, g and b.
...as, r, g, b) { var cx = canvas.getcontext('2d'); var pixels = cx.getimagedata(0, 0, canvas.width, canvas.height); var all = pixels.data.length; var amount = 0; for (i = 0; i < all; i += 4) { if (pixels.data[i] === r && pixels.data[i + 1] === g && pixels.data[i + 2] === b) { amount++; } } return amount; }; getting the color of a pixel in a canvas this following snippet returns an object with the rgba values of the pixel at position x and y of the canvas.
...'clearrect', 'clip', 'closepath', 'drawimage', 'fill', 'fillrect', 'filltext', 'lineto', 'moveto', 'quadraticcurveto', 'rect', 'restore', 'rotate', 'save', 'scale', 'settransform', 'stroke', 'strokerect', 'stroketext', 'transform', 'translate']; var gettermethods = ['createpattern', 'drawfocusring', 'ispointinpath', 'measuretext', // drawfocusring not currently supported // the following might instead be wrapped to be able to chain their child objects 'createimagedata', 'createlineargradient', 'createradialgradient', 'getimagedata', 'putimagedata' ]; var props = ['canvas', 'fillstyle', 'font', 'globalalpha', 'globalcompositeoperation', 'linecap', 'linejoin', 'linewidth', 'miterlimit', 'shadowoffsetx', 'shadowoffsety', 'shadowblur', 'shadowcolor', 'strokestyle...
...And 3 more matches

Preferences - Archive of obsolete content
here are the idl definitions: void getcomplexvalue(in string aprefname, in nsiidref atype, [iid_is(atype), retval] out nsqiresult avalue); void setcomplexvalue(in string aprefname, in nsiidref atype, in nsisupports avalue); as you can see, both of them take a parameter, atype, which can have one of the following values (to be precise, you should pass components.interfaces.nsiwhatever instead of just nsiwhatever, which is undefined).
...you should do the following: add this line to some .properties file (for all of your locales), say to chrome://myext/locale/defaults.properties: extensions.myext.welcomemessage=localized default value add the default value for extensions.myext.welcomemessage, pointing to that properties file, by adding the following line to your file with default preferences (see below).
... the effect of default preferences on get methods when one of the get methods of nsiprefbranch (assuming it's a branch of the tree with current values) is called, it does the following: checks whether the current tree has a value for the preference and whether or not the preference is locked.
...And 3 more matches

StringView - Archive of obsolete content
47 : 65; }; /* base64 string to array encoding */ stringview.bytestobase64 = function (abytes) { var eqlen = (3 - (abytes.length % 3)) % 3, sb64enc = ""; for (var nmod3, nlen = abytes.length, nuint24 = 0, nidx = 0; nidx < nlen; nidx++) { nmod3 = nidx % 3; /* uncomment the following line in order to split the output in lines 76-character long: */ /* if (nidx > 0 && (nidx * 4 / 3) % 76 === 0) { sb64enc += "\r\n"; } */ nuint24 |= abytes[nidx] << (16 >>> nmod3 & 24); if (nmod3 === 2 || abytes.length - nidx === 1) { sb64enc += string.fromcharcode(stringview.uint6tob64(nuint24 >>> 18 & 63), stringview.uint6tob64(nuint24 >>> 12 & 63), stringview.uint6tob6...
...the following table shows the behavior of the stringview constructor.
...if you want to build a custom cycle through a variable-length-encoded stringview (utf-8, utf-16), you can use a code like the following, which does not make use of stringview.foreachchar().
...And 3 more matches

Promises - Archive of obsolete content
the following page contains examples of many promise-based replacement apis for common operations.
... the following examples make use of the task api, which harnesses generator functions to remove some of the syntactic clutter of raw promises, such that asynchronous promise code more closely resembles synchronous, procedural code.
... a task example like the following: components.utils.import("resource://gre/modules/task.jsm"); task.spawn(function* () { var response = yield request("login", { username: user, password: password }); if (response.messages) { try { yield publish({ username: user, messages: response.messages }); } catch (e) { self.reporterror("publication failed", e); } } }); can be converted to a pure promise-based equivalent as such: request("login", { username: user, password: password }) .then(response => { if (response.messages) return publish({ username: user, messages: response.messages }); }) .then(null, (e) => { self.reporterror("publication failed", e); }); file io file io in add-ons should...
...And 3 more matches

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
_ldap_xpcom= +moz_ldap_xpcom=1 moz_mail_news= moz_mork=1 moz_morkreader= and set --enable-extensions=pref in mozconfig file, in fedora source rpm it is: [root@b008-02 sources]# grep enable-extensions /root/rpmbuild/sources/thunderbird-mozconfig ac_add_options --enable-extensions=pref it seems worse this time , as even after applying those compilation options mentioned above, i now get the following error message while stating thunderbird with autoconfig (autoconf.js having pref('general.config.filename','thunderbird.cfg'); ) and thunderbird.cfg calling getldap* functions to retrieve cn and mail address of the current user.
... the displayerror() function does not work properly in thunderbird 3.1: see https://bugzilla.mozilla.org/show_bu...?id=502597#c34 a usable workaround is placing the following code at the top of your autoconfig script: // enable logging.
... 2 10:45 thunderbird -> /usr/local/thunderbirddebuglibs/thunderbird-3.0b3pre/thunderbird [root@b008-02 thunderbirddebuglibs]# find /usr/local/thunderbirddebuglibs/ -name prefcalls.js /usr/local/thunderbirddebuglibs/thunderbird-3.0b3pre/defaults/autoconfig/prefcalls.js old mozilla 1.x, possibly netscape 6/7 the following is for the record...
...And 3 more matches

JavaScript crypto - Archive of obsolete content
web sites which use ssl clientauth login could use the following code to refresh the page on token insertions and removals: <!doctype html> <p>...
...e the ca's enrollment page could look something like this: <!doctype html> <h2>request a cert</h2> <form name="reqform" method="post" action="http://your.ra.site.org"> <p><input type=hidden name=cert_request value=""> <p>name: <input type=text name=name value=""> <p>password: <input type=password name="password" value=""> <p><input type=submit name="send" value="submit"> </form> <script> /* the following values could be filled in by the server cgi */ var authenticator = "server_magic"; var keytransportcert = null; var crmfobject = null; var form = document.forms[0]; function validate() { // generate keys for nsm.
...st() { form.cert_request.value = crmfobject.request; form.submit(); } form.onsubmit = validate; </script> on completion of the request, the ca may submit a page that looks something like this: <!doctype html> <h2>certificate request successful</h2> <p>hit 'load' to load your certificate</p> <form name="reqform"> <p><input type=submit name="load" value="submit"></p> </form> <script> /* the following values could be filled in by the server cgi */ var nickname= "mycertnickname"; var cert = "mkjflakdjfiwjflaksufklasf ..."; var forcebackup = false; function loadcertificate() { window.crypto.importusercertificates(nickname, cert, forcebackup); return false; } document.forms[0].onsubmit = loadcertificate; </script> signing text domstring signtext(domstring stringtosign, ...
...And 3 more matches

Learn XPI Installer Scripting by Example - Archive of obsolete content
first, a quick scan of the contents of the xpi file (which you can open using with any unzip utility) reveals the following high-level directory structure: install.js bin\ chrome\ components defaults\ icons\ plugins\ res\ note that this high-level structure parallels the directory structure of the installed browser very closely: as you will see in the installation script, the contents of the archive are installed onto the file system in much the same way that they are stored in the archive itself, th...
... most installation scripts, including the one discussed here, take the following basic form (in pseudo-code and with links to the sections in which these installation steps are documented): initinstall(); if (verify_space()) { err = add_dirs_and_files; register_files; if (err==success) { performinstall() }; else { cancelinstall() }; } as you can see in the code listing, the verification process at the top is on lines 1 to 18; the file addition process, here part of the main installation blo...
... the initinstall method takes the following parameters: the display name of the package, the name of the package as it appears in the client registry, and the version, which can be expressed as a number or as an installversion object.
...And 3 more matches

Result Generation - Archive of obsolete content
to navigate around, you could start at node a and navigate around the graph following the arrows to b, c or d.
...you could navigate to b, c and d and generate three blocks of output by following the arrows forward.
... or, you could start at d and follow two arrows back (and only following arrows backwards).
...And 3 more matches

Advanced Rules - Archive of obsolete content
the syntax of the content element is as follows: <content uri="?var"/> the question mark indicates that the text following it is a variable.
...let's say you have a list of cities described in the following rdf/xml fragment: <rdf:seq about="http://www.xulplanet.com/rdf/weather/cities"> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/paris"/> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/manchester"/> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/melbourne"/> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/kiev"/> </rdf:seq> <rdf:description about="http://www.xulplanet.com/rdf/w...
...to do this, use the member element as in the following: <tree id="citiestree" datasources="weather.rdf" ref="http://www.xulplanet.com/rdf/weather/cities"> <template> <rule> <conditions> <content uri="?list"/> <member container="?list" child="?city"/> </conditions> <rule> <template> </tree> the template builder starts by grabbing the value of the ref attribute, which in this case is http://www.xulplanet.com/rdf/weather/cities.
...And 3 more matches

XULRunner tips - Archive of obsolete content
the following prefs must also be set to make the xpinstall dialog, extension manager, and theme manager work: pref("xpinstall.dialog.confirm", "chrome://mozapps/content/xpinstall/xpinstallconfirm.xul"); pref("xpinstall.dialog.progress.skin", "chrome://mozapps/content/extensions/extensions.xul?type=themes"); pref("xpinstall.dialog.progress.chrome", "chrome://mozapps/content/extensions/extensions.xul?type=exten...
... save the dom_inspector-*.xpi package to a temporary directory unzip the package copy the following files: chrome/inspector.jar to the chrome directory of your xulrunner application components/inspector-cmdline.js to your components directory defaults/preferences/inspector.js to your preferences directory open your chrome.manifest file and add these lines: content inspector jar:inspector.jar!/content/inspector/ xpcnativewrappers=no locale inspector en...
...p the package." create a file in the extensions directory of your application with the same name as the dom inspector id (inspector@mozilla.org) containing one line of text -- the exact path to the root directory of dom inspector (where the install.rdf is) like this one: /home/username/.mozilla/firefox/numbersandletters/extensions/inspector@mozilla.org/ now create a javascript file with the following code and include it in the main window of your application: function startdomi() { // load the window datasource so that browser windows opened subsequent to dom // inspector show up in the dom inspector's window list.
...And 3 more matches

Mozilla's DOCTYPE sniffing - Archive of obsolete content
the goals that led to choosing this behavior were the following: almost all existing text/html pages on the web that need to be in quirks mode to be displayed correctly should be displayed using quirks mode.
... (almost all, rather than all, to allow for the following points as well.) authors writing web pages to current standards should be able to trigger strict mode.
... full standards mode the following trigger full standards mode: any document sent with an xml mime type such as text/xml, application/xml, or application/xhtml+xml (since sniffing only occurs for documents sent as text/html).
...And 3 more matches

Building up a basic demo with Babylon.js - Game development
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.
...let's create a scene by adding the following lines just below our previous code: var scene = new babylon.scene(engine); scene.clearcolor = new babylon.color3(0.8, 0.8, 0.8); thus, the scene is created and the second line sets the background color to light gray.
...add the following line below your camera definition: var light = new babylon.pointlight("light", new babylon.vector3(10, 10, 0), scene); the parameters are very similar to the previously defined camera: the name of the light, a position in 3d space and the scene to which the light is added.
...And 3 more matches

Grids - Learn web development
the following video provides a nice visual explanation of using css grid: defining a grid as a starting point, download and open the starting point file in your text editor and browser (you can also see it live here).
... change your track listing to the following definition, creating three 1fr tracks.
...change your track listing to the following: .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; } you will now get 3 1fr tracks just as before.
...And 3 more matches

Introduction to CSS layout - Learn web development
our examples will all feature the same html, which is as follows: <h1>positioning</h1> <p>i am a basic block level element.</p> <p class="positioned">i am a basic block level element.</p> <p>i am a basic block level element.</p> this html will be styled by default using the following css: body { width: 500px; margin: 0 auto; } p { background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); padding: 10px; margin: 10px; border-radius: 5px; } the rendered output is as follows: relative positioning relative positioning allows you to offset an item from the position in normal flow it would have by default.
...to do this, we could add the following rule to add relative positioning: .positioned { position: relative; top: 30px; left: 30px; } here we give our middle paragraph a position value of relative — this doesn't do anything on its own, so we also add top and left properties.
... adding this code will give the following result: relative positioning example <h1>relative positioning</h1> <p>i am a basic block level element.</p> <p class="positioned">this is my relatively positioned element.</p> <p>i am a basic block level element.</p> body { width: 500px; margin: 0 auto; } p { background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); padding: 10px; margin: 10px; border-radius: 5px; } .positioned { position: relative; background: rgba(255,84,104,.3); border: 2px solid rgb(2...
...And 3 more matches

Positioning - Learn web development
</p> now add the following rule to the bottom of your css: .positioned { position: static; background: yellow; } if you now save and refresh, you'll see no difference at all, except for the updated background color of the 2nd paragraph.
...to try this out, add the following declarations to the .positioned rule in your css: top: 30px; left: 30px; note: the values of these properties can take any units you'd logically expect — pixels, mm, rems, %, etc.
...to demonstrate this, add the following declaration to your body rule: position: relative; this should give the following result: <h1>positioning context</h1> <p>i am a basic block level element.
...And 3 more matches

Getting started with HTML - Learn web development
for example, consider the following line of text: my cat is very grumpy if we wanted the text to stand by itself, we could specify that it is a paragraph by enclosing it in a paragraph (<p>) element: <p>my cat is very grumpy</p> note: tags in html are case-insensitive.
... the following is an example of the wrong way to do nesting: <p>my cat is <strong>very grumpy.</p></strong> the tags have to open and close in a way that they are inside or outside one another.
...a block-level element appears on a new line following the content that precedes it.
...And 3 more matches

HTML table basics - Learn web development
add the following inside your table tags: <td>hi, i'm your first cell.</td> if we want a row of four cells, we need to copy these tags three times.
... this should result in a table that looks something like the following: hi, i'm your first cell.
...to illustrate why they are useful, have a look at the following table example.
...And 3 more matches

Index - Learn web development
accessibility, beginner, html, learn, needscontent the following content describes specific features of html that can be used to make a web page more accessible to people with different disabilities.
... for example, take the following line of content: 40 how the web works beginner, client, dns, http, ip, infrastructure, learn, server, tcp, l10n:priority this theory is not essential to writing web code in the short term, but before long you'll really start to benefit from understanding what's happening in the background.
... 101 solve common problems in your javascript code beginner, javascript, learn the following links point to solutions to common problems you may encounter when writing javascript.
...And 3 more matches

Inheritance in JavaScript - Learn web development
defining a teacher() constructor function the first thing we need to do is create a teacher() constructor — add the following below the existing code: function teacher(first, last, age, gender, interests, subject) { person.call(this, first, last, age, gender, interests); this.subject = subject; } this looks similar to the person constructor in many ways, but there is something strange here that we've not seen before — the call() function.
... add the following line below your previous addition: teacher.prototype = object.create(person.prototype); here our friend create() comes to the rescue again.
...you can do so by going back to your source code and adding the following line at the bottom: object.defineproperty(teacher.prototype, 'constructor', { value: teacher, enumerable: false, // so that it does not appear in 'for in' loop writable: true }); now if you save and refresh, entering teacher.prototype.constructor should return teacher(), as desired, plus we are now inheriting from person()!
...And 3 more matches

Object prototypes - Learn web development
you can check out existing prototype properties for yourself — go back to our previous example and try entering the following into the javascript console: person.prototype the output won't show you very much because we haven't defined anything on our custom constructor's prototype!
...now try the following: object.prototype you'll see a large number of methods defined on object's prototype property, which are then available on objects that inherit from object, as shown earlier.
...you can check this by entering the following in the console: person2.__proto__ this will return the person1 object.
...And 3 more matches

Implementing feature detection - Learn web development
therefore, you can detect whether the browser supports geolocation or not by using something like the following: if ("geolocation" in navigator) { navigator.geolocation.getcurrentposition(function(position) { // show the location on a map, perhaps using the google maps api }); } else { // give the user a choice of static maps instead perhaps } it is probably better to use an established feature detection library however, rather than writing your own all the time.
...download the latest version (see manual installation), unzip the zip file, copy the html5shiv-printshiv.min.js and html5shiv.min.js files into your example directory, and link to one of the files by putting the following under your <title> element: <script src="html5shiv.min.js"></script> have a look at your example css files — you'll see that basic-styling.css handles all the styling that we want to give to every browser, whereas the other two css files contain the css we want to selectively apply to browser depending on their support levels.
... give it the following contents: const conditional = document.queryselector('.conditional'); const testelem = document.createelement('div'); if (testelem.style.flex !== undefined && testelem.style.flexflow !== undefined) { conditional.setattribute('href', 'flex-layout.css'); } else { conditional.setattribute('href', 'float-layout.css'); } here we are grabbing a reference to the second <link> element, and crea...
...And 3 more matches

Handling common JavaScript problems - Learn web development
for example, the following command installs jshint: npm install -g jshint you can then point these tools at javascript files you want to lint, for example: you can also use these tools with a task runner/build tool such as gulp or webpack to automatically lint your javascript during development.
...this is supposed to be fetched from an external .json file using the following xmlhttprequest call: let requesturl = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; let request = new xmlhttprequest(); request.open('get', requesturl); request.send(); let superheroes = request.response; populateheader(superheroes); showheroes(superheroes); but this fails.
... try inserting the following line just below line 31 (bolded above): console.log('response value: ' + superheroes); refresh the page in the browser, and you will get an output in the console of "response value:", plus the same error message we saw before the console.log() output shows that the superheroes object doesn't appear to contain anything.
...And 3 more matches

How Mozilla's build system works
when config.status runs, you'll see the following output: reticulating splines...
... to view information about the tiers, you can execute the following special make targets: command effect make echo-tiers show the final list of tiers.
...moz.build files are limited to performing the following actions: calling functions that are explicitly made available to the moz.build environment.
...And 3 more matches

Eclipse CDT
set an initial heap space of 1 gb and max heap space of 5 gb, say, by modifying the values of the following two lines in eclipse.ini: -xms1g -xmx5g if you fail to increase these limits, then you will likely find that eclipse either hangs when it tries to index the mozilla source or else that the code intelligence is very broken after the indexing "completes".
...it also used to be necessary to add the following two lines to your mozconfig to make the compiler output errors all on a single line, but that may not be needed anymore: export cflags="-fmessage-length=0" export cppflags="-fmessage-length=0" debugging to create a debug configuration, open the project properties window, and select "run/debug settings" on the left.
...this define is in nsdomclassinfoid.h, which is included via the following include chain: content/svg/content/src/nssvgellipseelement.cpp content/svg/content/src/nssvgpathgeometryelement.h content/svg/content/src/nssvggraphicelement.h content/svg/content/src/nssvgstylableelement.h content/svg/content/src/nssvgelement.h content/base/src/nsgenericelement.h obj-debug/dist/include/nsdomclassinfoid.h in nsdomclassinfoid.h the ns_dom_interface_map_entr...
...And 3 more matches

Getting Started with Chat
you will need to use the following information to configure the server connection: server: irc.mozilla.org port: 6667 (default) or 6697 (ssl) desktop clients desktop clients tens to allow the most detailed configuration.
...the following are some other options available to you: windows mac linux colloquy ● irssi ● ● ●* xchat ● ○ ● key: ● — binary or executable program available ○ — only available by downloading and compiling source code ●* — binary or executable may be available.
... commands the following is a list of commands you should be familiar with.
...And 3 more matches

Extending a Protocol
creating the protocol pecho.ipdl let's start by saving the following file to ./dom/ipc/pecho.ipdl.
... we need to add the following things: at the top of the file: include protocol pecho; after "manager pbrowser or pinprocess;", add: manages pecho; finally, under parent: add async pecho(); - this is the "constructor" part we talked about before, which will allow us to eventually send messages.
... defining windowglobalparent's alloc/deallocpechoparent() open up dom/ipc/windowglobalparent.h and we are going to add two things: at the top, add #include "mozilla/dom/echoparent.h" and then, as part of the windowglobalparent class definition, add the following two public methods: already_addrefed<echoparent> allocpechoparent(); bool deallocpechoparent(pechoparent* aactor); natrually, we will have to do the alloc/dealloc dance for the children too.
...And 3 more matches

IPDL Tutorial
the following ipdl code defines a very basic interaction of browser and plugin actors: async protocol pplugin { child: async init(nscstring pluginpath); async shutdown(); parent: async ready(); }; this code declares the pplugin protocol.
...the following artificial example shows how these specifiers are used and how these specifiers change the generated abstract actor classes.
... using struct mozilla::void_t from "ipc/ipcmessageutils.h"; union variant { void_t; bool; int; double; nscstring; ppluginscriptableobject; }; this union generates a c++ interface which includes the following: struct variant { enum type { tvoid_t, tbool, tint, tdouble, tnscstring, tpplugionscriptableobject }; type type(); void_t& get_void_t(); bool& get_bool(); int& get_int(); double& get_double(); nscstring& get_nscstring(); ppluginscriptableobject* get_ppluginscriptableobject(); }; aunion.type() can be used to determine the type of a union received in an ipdl message handler...
...And 3 more matches

gettext
consider the following code snippet: <?php $num = 1; printf(ngettext("%d user likes this.", "%d users like this.", $num), $num); ?> depending on the value of the $num variable, this code will either use the singular ("user likes) or the plural ("users like") form of the string.
...for english, the above code will produce the following output: 1 user likes this.
...for example, for english, the plural rule is of the following form: plural-forms: nplurals=2; plural=n != 1; the first part defines the number of different plural forms (2).
...And 3 more matches

Mozilla DOM Hacking Guide
as an example, on the window object, we can call all the methods defined on the following interfaces: nsidomwindow, nsidomjswindow, nsidomeventreciever, nsidomeventtarget, nsidomviewcss, and nsidomabstractview.
...for example, the html "area" element has the following interfaces in its flattened set: nsidomhtmlareaelement and nsidomnshtmlareaelement.
...the problem is the following: we have to add a new htmldomimplementation interface to the domimplementation dom object.
...And 3 more matches

DMD
for example, from javascript code you can do the following.
...with the following command.
...which processes get logged is controlled by the moz_dmd_log_process environment variable, which can take the following values.
...And 3 more matches

L20n Javascript API
ctx.registerlocalenegotiator(function(available, requested, deflocale) { return intl.prioritizelocales(available, requested, deflocale); }); negotiator is a function which takes the following arguments: available - all locales available to the context instance, requested - locales preferred by the user, deflocale - the default locale to be used as the ultimate fallback, callback - the function to call when the negotiation completes (useful for asynchronous negotiators).
... ctx.requestlocales('pl'); if registerlocales hasn't been called, the special i-default locale is used, which means that the following minimal code is valid and will result in a fully operational context instance.
...the error object is passed as the first argument to callback and can be one of the following: context.error, when there are problems with setting up resources (e.g.
...And 3 more matches

NSS Certificate Download Specification
the content field is the following asn.1 structure: certificatesequence ::= sequence of certificate see the section below on certificate chains for more information about how multiple certificates are handled.
...the text form begins with the following line: -----begin certificate----- following this line should be the certificate data, which can be in any of the binary formats described above.
...following the data should be the following line: -----end certificate----- in a text format download, nss ignores any text before the first begin certificate line, and ignores any text after the first end certificate line.
...And 3 more matches

Introduction to Network Security Services
so the nss library has the following forms: libnss3.so - unix shared library libnss3.sl - hp-ux shared library libnss.a - unix static library nss3.dll - windows shared library nss3.lib - windows import library binding to nss3.dll nss.lib - windows static library nss, ssl, and s/mime have all of the above forms.
... the following static libaries aren't included in any shared libraries libcrmf.a/crmf.lib provides an api for crmf operations.
... the following static libaries are included only in external loadable pkcs #11 modules: libnssckfw.a/nssckfw.lib provides an api for writing pkcs #11 modules.
...And 3 more matches

NSS API Guidelines
function typedefs should have the following format: layerbody(), with the same definitions for layer as public functions, and body is camel case english words.
... the arena_threadmark preprocessor definition (default in debug builds), and code it encloses, will add some checking for the following situation: thread a marks the arena, and allocates some memory from it.
...(frees are allowed.) the arena_destructor_list preprocessor definition, and the code it encloses, are an effort to make the following work together: arenas, letting you allocate stuff and then removing them all at once lazy creation of pure-memory objects from asn.1 blobs, for example use of nsspkixcertificate doesn't drag all the code in for all constituent objects, unless they're actually being used our agressive pointer-tracking facility all these are useful, but they don't combine well.
...And 3 more matches

NSS Tools certutil
syntax to run the certificate database tool, type the command certutil option [arguments ] where options and arguments are combinations of the options and arguments listed in the following section.
...in each category position use zero or more of the following attribute codes: p prohibited (explicitly distrusted) p trusted peer c valid ca t trusted ca to issue client certificates (implies c) c trusted ca to issue server certificates (ssl only) (implies c) u certificate can be used for authentication or signing w send warning (use with other attributes to include a warning when the certi...
...the contexts are the following: c (as an ssl client) v (as an ssl server) s (as an email signer) r (as an email recipient) -v valid-months set the number of months a new certificate will be valid.
...And 3 more matches

How to embed the JavaScript engine
a bare bones tutorial hello world sample embedding application the following code is a very simple application that shows how to embed spidermonkey and run a simple javascript script.
... spidermonkey 24 // following code might be needed in some case // #define __stdc_limit_macros // #include <stdint.h> #include "jsapi.h" /* the class of the global object.
...ename = "noname"; int lineno = 1; bool ok = js_evaluatescript(cx, global, script, strlen(script), filename, lineno, rval.address()); if (!ok) return 1; } jsstring *str = rval.tostring(); printf("%s\n", js_encodestring(cx, str)); } js_destroycontext(cx); js_destroyruntime(rt); js_shutdown(); return 0; } spidermonkey 31 // following code might be needed in some case // #define __stdc_limit_macros // #include <stdint.h> #include "jsapi.h" /* the class of the global object.
...And 3 more matches

Bytecode Descriptions
the instruction immediately following any jsop::*eval instruction must be jsop::lineno.
...the following inequalities must hold: low <= high and firstresumeindex + high - low < resumeoffsets().size().
...┬──┬◡ﾉ(° -°ﾉ) this must be used only in the fixed sequence of instructions following a jstry_catch span (see "bytecode invariants" above), as that's the only way instructions would run with an exception pending.
...And 3 more matches

A Web PKI x509 certificate primer
generate the key using the following command: openssl genpkey -algorithm rsa -out key.pem -pkeyopt rsa_keygen_bits:2048 2048 is considered secure for the next 4 years.
...write extensions file by creating a new file with name openssl.ss.cnf with the following contents: basicconstraints = ca:false subjectaltname =dns:www.example.com extendedkeyusage =serverauth 4.
... cas apply to have their root certificates included by default in mozilla products by following the mozilla ca certificate policy and applying for inclusion as per ca:how_to_apply.
...And 3 more matches

Component Internals
component manifests and type library manifests are described in the following section, xpcom registry manifests.
...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 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.
...And 3 more matches

Creating the Component Code
basic structure of the weblock component source weblock1.cpp that defines these classes and the code you need to create a basic component has the following structure: * required includes and constants * weblock: public iweblock * weblockfactory: public nsifactory * weblockmodule: public nsimodule in xpcom, all of these classes also derive from the nsisupports base interface.
...for example, including nsicomponentmanager.idl without mozilla_strict_api defined will include the following headers, which are not supported across versions (unfrozen): nscomponentmanagerutils.h nscomponentmanagerobsolete.h these variables are picked up by files that do not specify themselves as mozilla_strict_api.
...they define the module and factory interfaces, and they contain a couple of important macros as well (see the following chapter for information about using these macros).
...And 3 more matches

XUL Overlays
thus, given the following base: ...
...and given the following overlay: <?xml version="1.0"?> <overlay id="singleitemex" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="menu_filepopup"> <menu id="file_menu"> <menuitem name="super stream player"/> </menu> </menupopup> </overlay> the result will be: ...
...inserting the following processing instruction before the doctype declaration in a base file tells the layout engine to load the named overlay file: <?xul-overlay href="chrome://component/content/componentoverlay.xul"?> where component is the name of the package being overlayed (e.g., chrome://navigator/content/navigatoroverlay.xul).
...And 3 more matches

Working with ArrayBuffers
this feature is based on the following work: //github.com/realityripple/uxp/blob/master/js/src/ctypes/ctypes.cpp#3080 //github.com/realityripple/uxp/blob/master/js/src/vm/arraybufferobject.cpp#1301 example 1 - image data the following example illustrates how to transfer a byte array pointed by ctypes.uint8_t.ptr to imagedata of canvas.
... the following codeblock provides a basic example of getting and setting uint8clampedarray and arraybuffer of imagedata: // context is a canvasrenderingcontext2d of some canvas var imagedata = context.getimagedata(x, y, w, h); var array = imagedata.data; // array is a uint8clampedarray var buffer = imagedata.data.buffer; // buffer is a arraybuffer // incomingbuffer is a typedarray var imagedata2 = context.createimagedata(w, h); imagedata2.data.set(incomingbuffer); further, if you have a byte array pixelbuffer, and you need to create imagedata from it.
... we start with the following: // pixelbuffer is a pointer to a rgba pixel buffer of 400x400 image.
...And 3 more matches

Debugger.Script - Firefox Developer Tools
each of the following is represented by a single jsscript object: the body of a function—that is, all the code in the function that is not contained within some nested function.
... accessor properties of the debugger.script prototype object a debugger.script instance inherits the following accessor properties from its prototype: isgeneratorfunction true if this instance refers to a jsscript for a function defined with a function* expression or statement.
... for example, suppose we have a script for the following source code: a=[] for (i=1; i < 10; i++) // it's hip to be square.
...And 3 more matches

Debugger - Firefox Developer Tools
accessor properties of the debugger prototype object a debugger instance inherits the following accessor properties from its prototype: enabled a boolean value indicating whether this debugger instance’s handlers, breakpoints, and the like are currently enabled.
... onerror(frame,report) spidermonkey is about to report an error inframe.report is an object describing the error, with the following properties: message the fully formatted error message.
... the valueglobal may be any of the following: a global object.
...And 3 more matches

DevTools API - Firefox Developer Tools
to use the gdevtools api from an add-on, it can be imported with following snippet const { gdevtools } = require("resource:///modules/devtools/gdevtools.jsm"); methods registertool(tooldefinition) registers a new tool and adds a tab to each existing toolbox.
... events following events are emitted by the gdevtools object via the eventemitter interface.
... constants the toolbox constructor contains following constant properties.
...And 3 more matches

Index - Firefox Developer Tools
the following list aims to help firebug users to find their way into the developer tools.
... 70 use the inspector api inspector, reference, référence(2), tools firefox add-ons may access the following objects from the chrome://browser/content/devtools/inspector/inspector.xul context: 71 use the inspector from the web console guide, inspector, tools the element that's currently selected in the page inspector can be referenced in the web console using the variable $0.
...currently it can be used to inspect the following storage types: 106 cache storage cache storage, devtools, firefox, guide, storage, storage inspector, tools, l10n:priority under the cache storage type within the storage inspector you can see the contents of any dom caches created using the cache api.
...And 3 more matches

Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
the following figure shows the recently created text node object inside the document tree.
...the following code removes text node mytextnode (containing the word "world") from the second <p> element, myp.
...the following code attaches mytextnode to the recently created <p> element, mynewptagnode.
...And 3 more matches

Introduction to the File and Directory Entries API - Web APIs
usefulness of the api the file and directory entries api is an important api for the following reasons: it lets apps have offline and storage features that involve large binary blobs.
...the api is a better choice for apps that deal with blobs for the following reasons: the file and directory entries api offers client-side storage for use cases that are not addressed by databases.
... sample use cases the following are just a few examples of how you can use the file and directory entries api: apps with persistent uploader when a file or directory is selected for upload, you can copy the file into a local sandbox and upload a chunk at a time.
...And 3 more matches

HTML Drag and Drop API - Web APIs
identify what is draggable making an element draggable requires adding the draggable attribute and the ondragstart global event handler, as shown in the following code sample: <script> function dragstart_handler(ev) { // add the target element's id to the data transfer object ev.datatransfer.setdata("text/plain", ev.target.id); } window.addeventlistener('domcontentloaded', () => { // get the element by id const element = document.getelementbyid("p1"); // add the ondragstart event listener element.addeventlistener("dragstart"...
...the setdata() method is used to add an item to the drag data, as shown in the following example.
...however, an application may define a custom image with the setdragimage() method, as shown in the following example.
...And 3 more matches

IDBIndexSync - Web APIs
any add( in any value, in optional any key ) raises (idbdatabaseexception); parameters returns exceptions this method can raise a idbdatabaseexception with the following code: value the value to store into the index.
... exceptions this method can raise an idbdatabaseexception with the following code: not_found_err if no record exists in this index for the given key.
... exceptions this method can raise a idbdatabaseexception with the following code: not_found_err if no record exists in this index for the given key.
...And 3 more matches

Using Web Workers - Web APIs
worker feature detection for slightly more controlled error handling and backwards compatibility, it is a good idea to wrap your worker accessing code in the following (main.js): if (window.worker) { ...
... the error event has the following three fields that are of interest: message a human-readable error message.
...it accepts zero or more uris as parameters to resources to import; all of the following examples are valid: importscripts(); /* imports nothing */ importscripts('foo.js'); /* imports just "foo.js" */ importscripts('foo.js', 'bar.js'); /* imports two scripts */ importscripts('//example.com/hello.js'); /* you can import scripts from other origins */ the browser loads each listed script and executes it.
...And 3 more matches

Shorthand properties - CSS: Cascading Style Sheets
background properties a background with the following properties ...
... font properties the following declarations ...
...can be shortened to the following: font: italic bold .8em/1.2 arial, sans-serif; this shorthand declaration is actually equivalent to the longhand declarations above plus font-variant: normal and font-size-adjust: none (css2.0 / css3), font-stretch: normal (css3).
...And 3 more matches

Media buffering, seeking, and time ranges - Developer guides
a timeranges object consists of the following properties: length: the number of time ranges in the object.
... ------------------------------------------------------ |=============| |===========| | ------------------------------------------------------ 0 5 15 19 21 for this audio instance, the associated timeranges object would have the following available properties: myaudio.buffered.length; // returns 2 myaudio.buffered.start(0); // returns 0 myaudio.buffered.end(0); // returns 5 myaudio.buffered.start(1); // returns 15 myaudio.buffered.end(1); // returns 19 to try out and visualize buffered time ranges we can write a little bit of html: <p> <audio id="my-audio" controls> <source src="music.mp3" type="audio/mpeg"> </aud...
...we can find this point in the media using the following line of code: var seekableend = myaudio.seekable.end(myaudio.seekable.length - 1); note: myaudio.seekable.end(myaudio.seekable.length - 1) actually tells us the end point of the last time range that is seekable (not all seekable media).
...And 3 more matches

<input type="file"> - HTML: Hypertext Markup Language
additional attributes in addition to the common attributes shared by all <input> elements, inputs of type file also support the following attributes: attribute description accept one or more unique file type specifiers describing file types to allow capture what source to use for capturing image or video data files a filelist listing the chosen files multiple a boolean which, if present, indicates that the user may choose more than one file accept the accept a...
... non-standard attributes in addition to the attributes listed above, the following non-standard attributes are available on some browsers.
...each unique file type specifier may take one of the following forms: a valid case-insensitive filename extension, starting with a period (".") character.
...And 3 more matches

itemscope - HTML: Hypertext Markup Language
in each of the following examples, the vocabulary is from schema.org.
... note: find more about itemtype attributes at http://schema.org/thing simple example html the following example specifies the itemscope attribute.
... <div itemscope itemtype="http://schema.org/movie"> <h1 itemprop="name">avatar</h1> <span>director: <span itemprop="director">james cameron</span> (born august 16, 1954)</span> <span itemprop="genre">science fiction</span> <a href="https://youtu.be/0ay1xikx7by" itemprop="trailer">trailer</a> </div> structured data the following table shows the structured data from the preceding example.
...And 3 more matches

Text formatting - JavaScript
'\xa9' // "©" unicode escape sequences the unicode escape sequences require at least four hexadecimal digits following \u.
...for example, the following code assigns hellolength the value 13, because "hello, world!" has 13 characters, each represented by one utf-16 code unit.
... the following table summarizes the methods of string objects.
...And 3 more matches

Functions - JavaScript
however, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example: /* declare the function 'myfunc' */ function myfunc(theobject) { theobject.brand = "toyota"; } /* * declare variable 'mycar'; * create and initialize a new object; * assign reference to it to 'mycar' */ var mycar = { brand: "honda", model: "accord", year: 1998 }; /* logs 'honda' */ console.log(mycar.brand); /* pass object reference to the function */ myfunc(mycar); /* *...
...expression compare the following: a function defined with the function constructor assigned to the variable multiply: var multiply = new function('x', 'y', 'return x * y'); a function declaration of a function named multiply: function multiply(x, y) { return x * y; } // there is no semicolon here a function expression of an anonymous function assigned to the variable multiply: var multiply = function(x, y) { return ...
...for example, the following would result in an error: var foo = new function("alert(anonymous);"); foo(); unlike functions defined by function expressions or by the function constructor, a function defined by a function declaration can be used before the function declaration itself.
...And 3 more matches

Array.prototype.map() - JavaScript
the callback function accepts the following arguments: currentvalue the current element being processed in the array.
... 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.
... // in browsers that support object.defineproperty, 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.
...And 3 more matches

String.prototype.charAt() - JavaScript
examples displaying characters at different locations in a string the following example displays characters at different locations in the string "brave new world": var anystring = 'brave new world'; console.log("the character at index 0 is '" + anystring.charat() + "'"); // no index was provided, used 0 as default console.log("the character at index 0 is '" + anystring.charat(0) + "'"); console.log("the character at index 1 is '" + anystring.charat(1) + "'"); c...
...onsole.log("the character at index 2 is '" + anystring.charat(2) + "'"); console.log("the character at index 3 is '" + anystring.charat(3) + "'"); console.log("the character at index 4 is '" + anystring.charat(4) + "'"); console.log("the character at index 999 is '" + anystring.charat(999) + "'"); these lines display the following: the character at index 0 is 'b' the character at index 0 is 'b' the character at index 1 is 'r' the character at index 2 is 'a' the character at index 3 is 'v' the character at index 4 is 'e' the character at index 999 is '' getting whole characters the following provides a means of ensuring that going through a string loop always provides a whole character, even if the string contains characters that are not in the basic multi-lingual plan...
... { var code = str.charcodeat(i); if (number.isnan(code)) { return ''; // position not found } if (code < 0xd800 || code > 0xdfff) { return str.charat(i); } // high surrogate (could change last hex to 0xdb7f to treat high private // surrogates as single characters) if (0xd800 <= code && code <= 0xdbff) { if (str.length <= (i + 1)) { throw 'high surrogate without following low surrogate'; } var next = str.charcodeat(i + 1); if (0xdc00 > next || next > 0xdfff) { throw 'high surrogate without following low surrogate'; } return str.charat(i) + str.charat(i + 1); } // low surrogate (0xdc00 <= code && code <= 0xdfff) if (i === 0) { throw 'low surrogate without preceding high surrogate'; } var prev = str.charcodeat(i - 1); ...
...And 3 more matches

String.prototype.split() - JavaScript
const mystring = '' const splits = mystring.split() console.log(splits) // ↪ [""] the following example defines a function that splits a string into an array of strings using separator.
... console.log('the array has ', arrayofstrings.length, ' elements: ', arrayofstrings.join(' / ')) } const tempeststring = 'oh brave new world that has such people in it.' const monthstring = 'jan,feb,mar,apr,may,jun,jul,aug,sep,oct,nov,dec' const space = ' ' const comma = ',' splitstring(tempeststring, space) splitstring(tempeststring) splitstring(monthstring, comma) this example produces the following output: the original string is: "oh brave new world that has such people in it." the separator is: " " the array has 10 elements: oh / brave / new / world / that / has / such / people / in / it.
... the original string is: "jan,feb,mar,apr,may,jun,jul,aug,sep,oct,nov,dec" the separator is: "," the array has 12 elements: jan / feb / mar / apr / may / jun / jul / aug / sep / oct / nov / dec removing spaces from a string in the following example, split() looks for zero or more spaces, followed by a semicolon, followed by zero or more spaces—and, when found, removes the spaces and the semicolon from the string.
...And 3 more matches

parseInt() - JavaScript
if no signs are found, the algorithm moves to the following step; otherwise, it removes the sign and runs the number-parsing on the rest of the string.
... if radix is undefined, 0, or unspecified, javascript assumes the following: if the input string begins with "0x" or "0x" (a zero, followed by lowercase or uppercase x), radix is assumed to be 16 and the rest of the string is parsed as a hexidecimal number.
...the following may have an octal result, or it may have a decimal result.
...And 3 more matches

Logical AND (&&) - JavaScript
short-circuit evaluation the logical and expression is evaluated left to right, it is tested for possible "short-circuit" evaluation using the following rule: (some falsy expression) && expr is short-circuit evaluated to the falsy expression; short circuit means that the expr part above is not evaluated, hence any side effects of doing so do not take effect (e.g., if expr is a function call, the calling never takes place).
...see example: function a(){ console.log('called a'); return false; } function b(){ console.log('called b'); return true; } console.log( a() && b() ); // logs "called a" due to the function call, // then logs false (which is the resulting value of the operator) operator precedence the following expressions might seem equivalent, but they are not, because the && operator is executed before the || operator (see operator precedence).
... true || false && false // returns true, because && is executed first (true || false) && false // returns false, because operator precedence cannot apply examples using and the following code shows examples of the && (logical and) operator.
...And 3 more matches

Logical OR (||) - JavaScript
short-circuit evaluation the logical or expression is evaluated left to right, it is tested for possible "short-circuit" evaluation using the following rule: (some truthy expression) || expr is short-circuit evaluated to the truthy expression.
...see example: function a(){ console.log('called a'); return false; } function b(){ console.log('called b'); return true; } console.log( b() || a() ); // logs "called b" due to the function call, // then logs true (which is the resulting value of the operator) operator precedence the following expressions might seem equivalent, but they are not, because the && operator is executed before the || operator (see operator precedence).
... true || false && false // returns true, because && is executed first (true || false) && false // returns false, because operator precedence cannot apply examples using or the following code shows examples of the || (logical or) operator.
...And 3 more matches

delete operator - JavaScript
however, it is important to consider the following scenarios: if the property which you are trying to delete does not exist, delete will not have any effect and will return true.
... the following snippet gives a simple example: var employee = { age: 28, name: 'abc', designation: 'developer' } console.log(delete employee.name); // returns true console.log(delete employee.age); // returns true // when trying to delete a property that does // not exist, true is returned console.log(delete employee.salary); // returns true non-configurable properties when a property is marked...
...delete employeedetails; // returns true function f() { var z = 44; // delete doesn't affect local variable names delete z; // returns false } delete and the prototype chain in the following example, we delete an own property of an object while a property with the same name is available on the prototype chain: function foo() { this.bar = 10; } foo.prototype.bar = 42; var foo = new foo(); // foo.bar is associated with the // own property.
...And 3 more matches

new operator - JavaScript
description the new keyword does the following things: creates a blank, plain javascript object; links (sets the constructor of) this object to another object; passes the newly created object from step 1 as the this context; returns this if the function doesn't return an object.
... when the code new foo(...) is executed, the following things happen: a new object is created, inheriting from foo.prototype.
...the following code adds a color property with value "original color" to all objects of type car, and then overwrites that value with the string "black" only in the instance object car1.
...And 3 more matches

break - JavaScript
the break statement terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement.
... a break statement, with or without a following label, cannot be used within the body of a function that is itself nested within the current loop, switch, or label statement that the break statement is intended to break out of.
... examples break in while loop the following function has a break statement that terminates the while loop when i is 3, and then returns the value 3 * x.
...And 3 more matches

Web video codec guide - Web media technologies
common codecs the following video codecs are those which are most commonly used on the web.
... motion compression of video typically works by comparing frames, finding where they differ, and constructing records containing enough information to update the previous frame to approximate the appearance of the following frame.
... here, only the differences between the first frame and the following frame are seen.
...And 3 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
to get these sitting side-by-side we have used the following rules: x-card { width: 100%; } x-card:nth-child(1), x-card:nth-child(2) { width: 30%; float: left; padding: 2rem; } x-card:nth-child(3) { width: 40%; float: left; height: 100%; overflow: auto; padding: 2rem; } so we're giving the first two columns a width of 30%, and the third a width of 40%, floating the columns all left.
...we opened up the brick.js file and wrapped the whole lot in the following: if (window.matchmedia("(max-width: 480px)").matches) { // the whole of brick.js goes here!
...you could use a min-width media query to fix the <body> width at a certain point: @media all and (min-width: 1400px) { body { width: 1400px; margin: 0 auto; } } but it's actually easier to just set the following rule instead, and get rid of the media query altogether: body { max-width: 1400px; margin: 0 auto; } orientation fail we also came across some problems with orientation: the mobile-app layout of our example app is designed for portrait orientation, and looks terrible when viewed on a device in landscape orientation.
...And 3 more matches

Content type - SVG: Scalable Vector Graphics
the following are examples of legal clock values: full clock values: 02:30:03 = 2 hours, 30 minutes and 3 seconds 50:00:10.25 = 50 hours, 10 seconds and 250 milliseconds partial clock value: 02:33 = 2 minutes and 33 seconds 00:10.5 = 10.5 seconds = 10 seconds and 500 milliseconds timecount values: 3.2h = 3.2 hours = 3 hours and 12 minutes 45min = 45 minutes 30s = 30 seconds 5ms =...
...for example, an svg file called somedrawing.svg located at http://example.com might have the following iri: http://example.com/somedrawing.svg an iri can also address a particular element within an xml document by including an iri fragment identifier as part of the iri.
...for example, the following iri can be used to specify the element whose id is "lamppost" within file somedrawing.svg: http://example.com/somedrawing.svg#lamppost iris are used in the xlink:href attribute.
...And 3 more matches

Compiling a New C/C++ Module to WebAssembly - WebAssembly
take a copy of the following simple c example, and save it in a file called hello.c in a new directory on your local drive: #include <stdio.h> int main(int argc, char ** argv) { printf("hello world\n"); } now, using the terminal window you used to enter the emscripten compiler environment, navigate to the same directory as your hello.c file, and run the following command: emcc hello.c -s wasm=1 -o hello.html ...
... first of all, save the following c code in a file called hello2.c, in a new directory: #include <stdio.h> int main(int argc, char ** argv) { printf("hello world\n"); } search for the file shell_minimal.html in your emsdk repo.
... now navigate into your new directory (again, in your emscripten compiler environment terminal window), and run the following command: emcc -o hello2.html hello2.c -o3 -s wasm=1 --shell-file html_template/shell_minimal.html the options we've passed are slightly different this time: we've specified -o hello2.html, meaning that the compiler will still output the javascript glue code and .html.
...And 3 more matches

ui/frame - Archive of obsolete content
frame supports the following events: attach, detach, load, ready, and message.
...frame supports the following events: attach, detach, load, ready, and message.
...frame supports the following events: attach, detach, load, ready, and message.
...And 2 more matches

ui/toolbar - Archive of obsolete content
toolbar supports the following events: attach, detach, show, and hide.
...toolbar supports the following events: attach, detach, show, and hide.
...toolbar supports the following events: attach, detach, show, and hide.
...And 2 more matches

jpm-mobile - Archive of obsolete content
jpm usage is: jpm-mobile [command] [options] jpm supports the following global options: -h, --help - show a help message and exit -v, --version - print the jpm version number installation jpm-mobile is distributed using the node package manager npm, so to get jpm-mobile you need to have npm installed, if you haven't already.
... jpm-mobile run this command runs a new instance of firefox with the add-on installed: jpm-mobile run jpm-mobile run accepts the following options: --adb /path/to/adb provides the path to adb.
... jpm-mobile run -b fennec you can get the package name by following command.
...And 2 more matches

Localization - Archive of obsolete content
hello_id= <blink>hello!</blink> localizing element attributes this feature is new in firefox 39 you can localize certain attributes of elements with an l10n-id by setting its value with l10n-id.attributename in the properties file like: hello_id.accesskey= h the following attributes are supported: accesskey alt label title placeholder further the localization of the aria attributes aria-label, aria-valuetext and aria-moz-hint are supported with the same aliases as on firefox os: arialabel ariavaluetext ariamozhint using localized strings in javascript to reference localized strings from your main add-on code, you do this: var _ = require("sdk/l10...
...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.
...the following "en-us" and "fr" ".properties" files include placeholders: # en-us translations hello_id= hello %s!
...And 2 more matches

Extension Versioning, Update and Compatibility - Archive of obsolete content
formatting prior to firefox 4 prior to firefox 4 you could only use the following tags, any other tags have themselves and their contents completely stripped: h1, h2 and h3 for general headings p for paragraphs ul and ol for lists.
...the following tags are interpreted normally: h1, h2 and h3 for general headings p, div, pre and blockquote for block formatting ul, ol, li, dl, dt and dd for lists b, i, em, strong, u, q, sub, sup and code for text formatting br and hr for line breaking the head, style and script tags and any of their contents are completely stripped.
... other tags aren't included in the result but do have their contents displayed, so the following snippet: <span><q>text</q></span> would be rendered exactly the same as: <q>text</q> sample file <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html lang="en-us" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <h2>my extension</h2> <ul> <li>this update fixes some stability related issues.</li> </ul> </html> what end-user sees the content of updateinfourl will be displayed to user in the add-ons page, in a list of all available updates.
...And 2 more matches

Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
install quicknote from the following url and relaunch firefox.
...install mozlab from the following url and relaunch firefox.
...if you want to use terapad2, for example, insert the following: c:\app\tpad090\terapad.exe /jl=%l %f table 1: parameters used in mozunit parameter description %f filename %l line number %c column number the author uses meadow, which is opened using gnuserv.
...And 2 more matches

The Essentials of an Extension - Archive of obsolete content
a localized description and name can be added with the following code: <em:localized> <description> <em:locale>es-es</em:locale> <em:name>xul school hola mundo</em:name> <em:description>bienvenido a xul school!</em:description> </description> </em:localized> the es-es locale string indicates that this is the spanish (es) localization for spain (es).
...the dtd file was included in the xul file with the following code: <!doctype overlay system "chrome://xulschoolhello/locale/browseroverlay.dtd" > and in the dtd file you can see the association between keys and localized strings: <!entity xulschoolhello.hello.label "hello world!"> <!entity xulschoolhello.hellomenu.accesskey "l"> <!entity xulschoolhello.helloitem.accesskey "h"> notice that on the xul file you enclose the string ...
...you can easily recognize the access keys on windows because the letter that corresponds to the access key is underlined, as in the following image: most user interface controls have the accesskey attribute, and you should use it.
...And 2 more matches

Source Navigator - Archive of obsolete content
let me know if this is wrong..) it can generate a class hierarchy quite easily (unfortunately, not for classnames which are defined by macro.) installing source navigator in ubuntu execute the following line in a terminal window: sudo apt-get install sourcenav this should install source-navigator.
... one can check whether the installation is complete by executing: $ which snavigator /usr/bin/snavigator importing the source execute the following: snavigator.
... this triggers a splash screen, followed by a "source-navigator projects" dialog as the following: i've already created a new project bin.proj before documenting this.
...And 2 more matches

Creating regular expressions for a microsummary generator - Archive of obsolete content
for example, the following regular expression matches--and looks exactly like--the beginning of the url: http:// but some characters are special in regular expressions.
...so we remove the item number, leaving us with the following regular expression: ^http://cgi\.ebay\.com/ws/ebayisapi\.dll\?viewitem&item= accommodating variations in query parameters we now have a regular expression that matches all four example urls.
... for example, the following is an equally valid url for the same auction item: http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&foo=bar&item=170019463424 to accommodate these variations in query parameters, we can insert a period followed by an asterisk (.*) between "viewitem&" and "item=" to match any characters that might appear between those two strings: ^http://cgi\.ebay\.com/ws/ebayisapi\.dll\?viewitem&.*item= the...
...And 2 more matches

Dehydra Object Reference - Archive of obsolete content
each member of the array has the following properties: { name: string, value: string or number, if applicable } see an example on enforcing final classes.
...the following properties are usually available: property type description .name string the function or variable name.
...the following additional properties are available on functions: property type description .isvirtual true or "pure" true for virtual methods, or "pure" for pure virtuals (e.g.
...And 2 more matches

Java in Firefox Extensions - Archive of obsolete content
the following technique only works in javascript code linked from or contained in xul files.
...the following approach is taken from the extension xquseme (note you must use the latest version, currently still in the sandbox, as prior versions only worked with liveconnect before java 6 update 11) which borrows some of the code of the java firefox extension in order to grant full privileges to java within a firefox extension, but it is easier to understand and doesn't require creation of a xpcom componen...
...// guid of extension getitemlocation("test@yoursite"); //the path logic would work if we include em:unpack for ff 4.x, for ff 3.x since things are unpacked by default things work // get path to the jar files (the following assumes your jars are within a // directory called "java" at the root of your extension's folder hierarchy) // you must add this utilities (classloader) jar to give your extension full privileges var extensionurl = "file:///" + extensionpath.path.replace(/\\/g,"/"); var classloaderjarpath = extensionurl + "/java/javafirefoxextensionutils.jar"; // add the paths for all the other jar files that you...
...And 2 more matches

Additional Navigation - Archive of obsolete content
the resulting data will look like the following: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg) here is the example.
...another thing that you cannot have is a triple where both variables would be unknown as in the following: <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?category" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> </query> in this case when the template builder gets to the triple, neither the ?category nor the ?title variables can be filled in so the builder doesn't know what to generate.
... source navigation triples may also be used to navigate up the graph as well as downwards, following the graph arrows in the reverse direction.
...And 2 more matches

Styling a Tree - Archive of obsolete content
« previousnext » the following describes how to style a tree.
... set the property on a row or cell, as in the following example: <treerow properties="makeitblue"> css selectors for the tree the style sheet can take this property and use it to change the appearance of the row for unread messages or labels.
...the following is the syntax that needs to be used: treechildren::-moz-tree-row(makeitblue) { background-color: blue; } this style which has a complex selector is used to style the background color of rows that have the 'makeitblue' property.
...And 2 more matches

Trees and Templates - Archive of obsolete content
« previousnext » the following describes how to use a template with a tree.
...the following example uses the history datasource: <tree datasources="rdf:history" ref="nc:historybydate" flags="dont-build-content"> as described in the previous section, the tree may use a tree builder for template generation instead of the normal content builder.
...template-built tree example the following example demonstrates a template-built tree, in this case for the file system.
...And 2 more matches

XUL accessibility guidelines - Archive of obsolete content
by following these principles and practices, you will be able to write your xul applications in such a way that all users, including those with physical, sensory, or communicative disabilities, with be able to use and enjoy them.
...refer to the following resources when setting keyboard shortcuts.
... the following example shows a javascript function that can be called before destroying an element to check for focus and move it if necessary.
...And 2 more matches

XULRunner 2.0 Release Notes - Archive of obsolete content
the following directory is recommended: c:\program files\mozilla xulrunner\2.0 .
...the following directory is recommended: /opt/xulrunner/2.0 .
...the following directory is recommended: /opt/xulrunner/2.0 .
...And 2 more matches

Debugging a XULRunner Application - Archive of obsolete content
see also debugging javascript prefs setting the following prefs will make your debugging life much easier!
...add the following code to your xul app: components.utils.import('resource://gre/modules/devtools/dbg-server.jsm'); if (!debuggerserver.initialized) { debuggerserver.init(); // don't specify a window type parameter below if "navigator:browser" // is suitable for your app.
... for xulrunner version 37+ the code to enable the debugger has changed: components.utils.import('resource://gre/modules/devtools/dbg-server.jsm'); if (!debuggerserver.initialized) { debuggerserver.init(); debuggerserver.addbrowseractors(); debuggerserver.allowchromeprocess = true; } let dbglistener=debuggerserver.createlistener(); dbglistener.portorpath=6000; dbglistener.open(); add the following to your prefs.js: (in recent ffox, edit about:config instead) pref("devtools.debugger.remote-enabled", true); in firefox, go to tools > web developer > connect...
...And 2 more matches

2006-10-20 - Archive of obsolete content
he stated that he was able to pre-package the extensions that he wanted by following this walkthrough and a little bit of help from this post.
...he can be contacted via: email: preed@mozilla.com irc: preed on irc.mozilla.org phone: 650.903.0800 x256 uploading language packs to amo on october 17th benjamin smedberg brought the following to the attention of the localizers and the build team: that he is planning to upload the firefox 2 language packages currently located at http://releases.mozilla.org/pub/mozi...rc3/win32/xpi/ to addons.mozilla.org in the next few days.
...you can do this by replying to the following post.
...And 2 more matches

-ms-filter - Archive of obsolete content
syntax the -ms-filter property is specified as a string that contains a list of one or more items, separated by spaces, of the following types: filters transitions procedural surfaces formal syntax filter: <-ms-filter-function>+ -ms-filter: [ "'" <-ms-filter-function># "'" ] | [ '"' <-ms-filter-function># '"' ] where <-ms-filter-function> = <-ms-filter-function-progid> | <-ms-filter-function-legacy> where <-ms-filter-function-progid> = 'progid:' [ <ident-token> '.' ]* [ <ident-token> | <function-token> <any-value> ')' ] ...
... examples the following example shows how to use the -ms-filter attribute in internet explorer 8.
... code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_8.htm -ms-filter: 'progid:dximagetransform.microsoft.motionblur(strength=50), progid:dximagetransform.microsoft.basicimage(mirror=1)'; the following example shows how to use an inline style sheet to set the filter on an image.
...And 2 more matches

XForms Custom Controls - Archive of obsolete content
it is possible to re-enable this by following the steps on using remote xul.
...to really grasp the following information, a good understanding of xforms, xbl, javascript and css is needed.
...why do you need this you will probably find that your need for customization will fall into one of the following categories: custom presentation - xforms controls as rendered by the mozilla xforms processor do not provide the right look and feel for you.
...And 2 more matches

Common causes of memory leaks in extensions - Extensions
consider the following example code that could be part of your browser.xul overlay: gbrowser.addeventlistener("domcontentloaded", function(evt) { var contentdoc = evt.originaltarget; var i = 0; // refresh the title once each second setinterval(function() { contentdoc.title = ++i; }, 1000); }, false); one would normally expect that the interval (or timer) would be destroyed as soon as the document unlo...
...for example, the following code snippets — part of a bootstrap.js — will leak: function leakref() {} function modifydocument(document) { var a = document.createelement("a"); document.body.appendchild(a); // the new dom node holding a reference to leakref will prevent // that function object from being garbage collected and hence // will leak the whole bootstrap compartment.
... window.addeventlistener("leaky", leakref, true); // the following line still fails to avoid the leak, as usecapture differs // and removeeventlistener will not remove anything.
...And 2 more matches

Paddle and keyboard controls - Game development
add the following variables near the top of your code, beside your other variables: var paddleheight = 10; var paddlewidth = 75; var paddlex = (canvas.width-paddlewidth) / 2; here we're defining the height and width of the paddle and its starting point on the x axis for use in calculations further on down the code.
...add the following just below your drawball() function: function drawpaddle() { ctx.beginpath(); ctx.rect(paddlex, canvas.height-paddleheight, paddlewidth, paddleheight); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); } allowing the user to control the paddle we can draw the paddle wherever we want, but it should respond to the user's actions.
...we will need the following: two variables for storing information on whether the left or right control button is pressed.
...And 2 more matches

Track the score and win - Game development
add the following into your javascript, after the rest of your variables: var score = 0; you also need a drawscore() function, to create and update the score display.
... add the following after the collisiondetection() function: function drawscore() { ctx.font = "16px arial"; ctx.fillstyle = "#0095dd"; ctx.filltext("score: "+score, 8, 20); } drawing text on a canvas is similar to drawing a shape.
...add the following highlighted line to your code: function collisiondetection() { for(var c=0; c<brickcolumncount; c++) { for(var r=0; r<brickrowcount; r++) { var b = bricks[c][r]; if(b.status == 1) { if(x > b.x && x < b.x+brickwidth && y > b.y && y < b.y+brickheight) { dy = -dy; b.status = 0; score++; ...
...And 2 more matches

2D maze game with device orientation - Game development
let’s set it up: our starting point is the index.html file with the following content.
...e'); this.gametitle.anchor.set(0.5,0); this.startbutton = this.add.button(ball._width*0.5, 200, 'button-start', this.startgame, this, 2, 0, 1); this.startbutton.anchor.set(0.5,0); this.startbutton.input.usehandcursor = true; }, startgame: function() { this.game.state.start('howto'); } }; to create a new button there's add.button method with the following list of optional arguments: top absolute position on canvas in pixels.
...let’s focus on the keyboard first by adding the following to the create() function : this.keys = this.game.input.keyboard.createcursorkeys(); as you can see there’s a special phaser function called createcursorkeys(), which will give us an object with event handlers for the four arrow keys to play with: up, down, left and right.
...And 2 more matches

Accessible multimedia - Learn web development
we will first need to store references to each of the controls — add the following to the top of your javascript file: const playpausebtn = document.queryselector('.playpause'); const stopbtn = document.queryselector('.stop'); const rwdbtn = document.queryselector('.rwd'); const fwdbtn = document.queryselector('.fwd'); const timelabel = document.queryselector('.time'); next, we need to grab a reference to the video/audio player itself — add this line below the previous line...
...add the following, again at the bottom of your javascript: player.removeattribute('controls'); doing it this way round rather than just not including the controls attribute in the first place has the advantage that if our javascript fails for any reason, the user still has some controls available.
...we can get this to toggle between play and pause with a simple conditional function, like the following.
...And 2 more matches

Advanced styling effects - Learn web development
e class="simple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> now the css: p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); } this gives us the following result: you'll see that we've got four items in the box-shadow property value: the first length value is the horizontal offset — the distance to the right the shadow is offset from the original box (or left, if the value is negative).
...1px black, inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); } button:focus, button:hover { background-image: linear-gradient(to bottom right, #888, #eee); } button:active { box-shadow: inset 2px 2px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); } this gives us the following result: here we've set up some button styling along with focus/hover/active states.
...10px; } article div:first-child { position: absolute; top: 10px; left: 0; background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; background-color: green; } article div:last-child { background-color: purple; position: absolute; bottom: -10px; right: 0; z-index: -1; } .multiply-mix { mix-blend-mode: multiply; } this gives us the following results: you can see here that the multiply mix blend has blended together not only the two background images, but also the color from the <div> below it too.
...And 2 more matches

Test your skills: Selectors - Learn web development
selectors one without changing the html, use css to do the following things: make h1 headings blue.
... selectors two without changing the html, make the following changes to the look of the content in this example: give the element with an id of special a yellow background.
... selectors three in this example, try making the following changes without adding to the html.
...And 2 more matches

CSS values and units - Learn web development
in the following example we have set the color of our heading using a keyword, and the background using the rgb() function: h1 { color: black; background-color: rgb(197,93,161); } a value in css is a way to define a collection of allowable sub-values.
...the following are all classed as numeric: data type description <integer> an <integer> is a whole number such as 1024 or -55.
... absolute length units the following are all absolute length units — they are not relative to anything else and are generally considered to always be the same size.
...And 2 more matches

Beginner's guide to media queries - Learn web development
media types the possible types of media you can specify are: all print screen speech the following media query will only set the body to 12pt if the page is printed.
...for example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query.
...to change the body text color if the device is in landscape orientation, use the following media query.
...And 2 more matches

Getting started with CSS - Learn web development
to link styles.css to index.html add the following line somewhere inside the <head> of the html document: <link rel="stylesheet" href="styles.css"> this <link> element tells the browser that we have a stylesheet, using the rel attribute, and the location of that stylesheet as the value of the href attribute.
...using your code editor add the following to your css file: h1 { color: red; } save your html and css files and reload the page in a web browser.
...add the following to your css file: .special { color: orange; font-weight: bold; } save and refresh to see what the result is.
...And 2 more matches

Your first form - Learn web development
it's beyond the scope of this article to cover the user experience of forms, but if you want to dig into that topic you should read the following articles: smashing magazine has some good articles about forms ux, including an older but still relevant extensive guide to web form usability article.
...we will use the following html elements: <form>, <label>, <input>, <textarea>, and <button>.
... in terms of html code we need something like the following to implement these form widgets: <form action="/my-handling-form-page" method="post"> <ul> <li> <label for="name">name:</label> <input type="text" id="name" name="user_name"> </li> <li> <label for="mail">e-mail:</label> <input type="email" id="mail" name="user_email"> </li> <li> <label for="msg">message:</label> <textarea id="msg" name="user_message"></textarea...
...And 2 more matches

JavaScript basics - Learn web development
is the standard for introductory programming examples.) important: if you haven't been following along with the rest of our course, download this example code and use it as a starting point.
... following that, the code set the value of the myheading variable's textcontent property (which represents the content of the heading) to hello world!.
...in the following table you can see some of the simplest operators, along with some examples to try in the javascript console.
...And 2 more matches

Creating hyperlinks - Learn web development
</p> this gives us the following result: i'm creating a link to the mozilla homepage.
...</p> this gives us the following result and hovering over the link displays the title as a tooltip.
...it normally makes sense to link to a specific heading, so this would look something like the following: <h2 id="mailing_address">mailing address</h2> then to link to that specific id, you'd include it at the end of the url, preceded by a hash/pound symbol (#), for example: <p>want to write us a letter?
...And 2 more matches

Introduction to events - Learn web development
in the following example, we have a single <button>, which when pressed, makes the background change to a random color: <button>change color</button> button { margin: 10px }; the javascript looks like so: const btn = document.queryselector('button'); function random(number) { return math.floor(math.random() * (number+1)); } btn.onclick = function() { const rndcol = 'rgb(' + random(255) + ',' + random(...
...the following works just the same: const btn = document.queryselector('button'); function bgchange() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundcolor = rndcol; } btn.onclick = bgchange; there are many different event handler properties available.
...now try changing btn.onclick to the following different values in turn, and observing the results in the example: btn.onfocus and btn.onblur — the color changes when the button is focused and unfocused; try pressing the tab to focus on the button and press the tab again to focus away from the button.
...And 2 more matches

Looping code - Learn web development
he might use the following loop to achieve this: a loop usually has one or more of the following features: a counter, which is initialized with a certain value — this is the starting point of the loop ("start: i have no food", above).
... in pseudocode, this would look something like the following: loop(food = 0; foodneeded = 10) { if (food >= foodneeded) { exit loop; // we have enough food; let's go home } else { food += 2; // spend an hour collecting 2 more food // loop will then run again } } so the amount of food needed is set at 10, and the amount the farmer currently has is set at 0.
... if we weren't using a loop here, we'd have to repeat the following code for every circle we wanted to draw: ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); this would get very boring and difficult to maintain very quickly.
...And 2 more matches

Arrays - Learn web development
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.
... 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 the following: shopping.length; // should return 5 this has other uses, but it is most commonly used to tell a loop to keep going until it has looped through all the items in an array.
...And 2 more matches

Basic math in JavaScript — numbers and operators - Learn web development
type the following lines into your browser's console: let lotsofdecimal = 1.766584958675746364; lotsofdecimal; let twodecimalplaces = lotsofdecimal.tofixed(2); twodecimalplaces; converting to number data 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.
...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.
...the following will return an error: 3++; so, you can only increment an existing variable.
...And 2 more matches

Storing the information you need — Variables - Learn web development
the following would work: var myname = 'chris'; var myname = 'bob'; but the following would throw an error on the second line: let myname = 'chris'; let myname = 'bob'; you'd have to do this instead: let myname = 'chris'; myname = 'bob'; again, this is a sensible language decision.
...try entering the following lines into your console: myname = 'bob'; myage = 40; an aside on variable naming rules you can call a variable pretty much anything you like, but there are limitations.
...try entering the following lines into your console: let mynamearray = ['chris', 'bob', 'jim']; let mynumberarray = [10, 15, 40]; once these arrays are defined, you can access each value by their location within the array.
...And 2 more matches

What went wrong? Troubleshooting JavaScript - Learn web development
you should see an error message along the following lines: this is a pretty easy error to track down, and the browser gives you several useful bits of information to help you out (the screenshot above is from firefox, but other browsers provide similar information).
... have a look at line 78, and you'll see the following code: loworhi.textcontent = 'last guess was too high!'; this line is trying to set the textcontent property of the loworhi constant to a text string, but it's not working because loworhi does not contain what it's supposed to.
...add the following code on line 49: console.log(loworhi); note: console.log() is a really useful debugging function that prints a value to the console.
...And 2 more matches

Adding features to our bouncing balls demo - Learn web development
the following screenshot gives you an idea of what the finished program should look like: 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.
...you should then make the following changes: we want the evil circle to not be filled in, but rather just have an outer line (stroke).
...the following code block should be put inside the method definition: let _this = this; window.onkeydown = function(e) { if (e.key === 'a') { _this.x -= _this.velx; } else if (e.key === 'd') { _this.x += _this.velx; } else if (e.key === 'w') { _this.y -= _this.vely; } else if (e.key === 's') { _this.y += _this.vely; } } so when a key is pressed, the event object's...
...And 2 more matches

Object-oriented JavaScript for beginners - Learn web development
i\'m ' + obj.name + '.'); }; return obj; } you can now create a new person by calling this function — try the following lines in your browser's javascript console: const salva = createnewperson('salva'); salva.name; salva.greeting(); this works well enough, but it is a bit long-winded; if we know we want to create an object, why do we need to explicitly create a new empty object and return it?
... replace your previous function with the following: function person(name) { this.name = name; this.greeting = function() { alert('hi!
... add the following lines below your previous code addition: let person1 = new person('bob'); let person2 = new person('sarah'); save your code and reload it in the browser, and try entering the following lines into your js console: person1.name person1.greeting() person2.name person2.greeting() cool!
...And 2 more matches

Starting our Svelte Todo list app - Learn web development
create a file named src/components/todos.svelte with the following content: <h1>svelte to-do list</h1> change the title element in public/index.html to contain the text svelte to-do list: <title>svelte to-do list</title> open src/app.svelte and replace its contents with the following: <script> import todos from './components/todos.svelte' </script> <todos /> in development mode, svelte will issue a warning in the browser console whe...
...copy and paste the following into our todos.svelte component file, replacing the existing content: <!-- todos.svelte --> <div class="todoapp stack-large"> <!-- newtodo --> <form> <h2 class="label-wrapper"> <label for="todo-0" class="label__lg"> what needs to be done?
... further down, you can find the following <ul> element: <ul role="list" classname="todo-list stack-large" aria-labelledby="list-heading"> the role attribute helps assistive technology explain what kind of semantic value an element has — or what its purpose is.
...And 2 more matches

Creating our first Vue component - Learn web development
at the top of your <script> tag, add the following to import your todoitem component: import todoitem from './components/todoitem.vue'; inside your component object, add the components property, and inside it add your todoitem component to register it.
...the data property is where you can manage local state in a component, it lives inside the component object alongside the props property and has the following structure: data() { return { key: value } } you'll note that the data property is a function.
...both of the following are equivalent: <input type="checkbox" id="todo-item" v-bind:checked="isdone" /> <input type="checkbox" id="todo-item" :checked="isdone" /> you're free to use whichever pattern you would like.
...And 2 more matches

Handling common accessibility problems - Learn web development
to do that, we had to add the following bit of javascript trickery: document.onkeydown = function(e) { if(e.keycode === 13) { // the enter/return key document.activeelement.onclick(e); } }; here we add a listener to the document object to detect when a button has been pressed on the keyboard.
...we got the following results: axe is also installable using npm, and can be integrated with task runners like grunt and gulp, automation frameworks like selenium and cucumber, unit testing frameworks like jasmin, and more besides (again, see the main axe page for details).
...the basic ones you'll need for web page testing are in the following table.
...And 2 more matches

Theme concepts
package your theme and submit it to amo, following these instructions.
... updating static themes if your static theme is hosted on amo, you can upload a new version using the developer hub with the following steps: visit the product page for your theme through the developer hub select "upload new version" on the left upload your packaged file for validation or modify it using the theme generator for self-hosted static themes, a new version can be updated through amo by following the above steps or be handled by you through an updateurl or external application updates.
... for example, the following code, from the dynamic theme example defines the content for the day and night elements of the dynamic theme: const themes = { 'day': { images: { theme_frame: 'sun.jpg', }, colors: { frame: '#cf723f', tab_background_text: '#111', } }, 'night': { images: { theme_frame: 'moon.jpg', }, colors: { frame: '#000', tab_background_text: '#ff...
...And 2 more matches

Creating a Language Pack
while in that directory, issue the following command: $ make merge-x-testing locale_mergedir=$(pwd)/mergedir x-testing: browser chrome browser aboutcerterror.dtd // add and localize this file ...
... $ make wget-en-us en_us_binary_url=http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora if you're building on mac 64 bit, you'll need to change the command slightly: $ make wget-en-us en_us_binary_url=http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora moz_pkg_platform=mac at some point, you should see the following success message: downloaded http://ftp.mozilla.org/pub/mozilla.o....en-us.mac.dmg to /users/your_id/mozilla/vc/firefox/browser/locales/../../dist/firefox-3.6b5pre.en-us.mac.dmg the en-us binary has been downloaded.
... at the end of the process, you should see the following success message.
...And 2 more matches

Debugging on Mac OS X
the .lldbinit file in the source tree imports many useful mozilla specific lldb settings, commands and formatters into lldb, but you may need to take one of the following steps to make sure this file is used.
... if you are using lldb on the command line (independently of xcode) and you will always run it from either the top source directory, the object directory or else the dist/bin subdirectory of the object directory, then adding the following setting to your $home/.lldbinit is sufficient: settings set target.load-cwd-lldbinit true however, if you will run lldb from a different directory, or if you will be running it indirectly by debugging in xcode (xcode always runs lldb from "/"), then this setting will not help you.
... instead, add the following to your $home/.lldbinit: # this automatically sources the mozilla project's .lldbinit as soon as lldb # starts or attaches to a mozilla app (that's in an object directory).
...And 2 more matches

Error codes returned by Mozilla APIs
the following tables list errors that can occur when calling various mozilla apis.
...for example, by using components.results.ns_error_not_initialized general errors the following errors are general and can occur when using any component.
... file errors the following table lists the errors that could occur when using files.
...And 2 more matches

Storage access policy: Block cookies from trackers
consider the following examples: hostname on the list hostname of resource matched example.com example.com yes example.com a.b.example.com yes blah.example.com example.com no a.b.example.com c.d.example.com no blah.example.com foo.blah.example.com yes what does the storage access policy block?
...specifically, firefox does this by imposing the following restrictions: cookies: block cookie request headers and ignore set-cookie response headers.
...if a user interacts with the pop-up window following a redirect, the origin of the content loaded in the pop-up window is given storage access on the opener document.
...And 2 more matches

HTTP Cache
//github.com/realityripple/uxp/blob/master/netwerk/base/public/nsiloadcontextinfo.idl it is a helper interface wrapping following four arguments into a single one: private-browsing boolean flag anonymous load boolean flag app id number (0 for no app) is-in-browser boolean flag helper functions to create nsiloadcontextinfo objects: c++ consumers: functions at loadcontextinfo.h exported header js consumers: resource://gre/modules/loadconte...
... other parallel openers of the same cache entry are blocked (wait) for invocation of their oncacheentryavailable until one of the following occurs: the writer simply throws the entry away: other waiting opener in line gets the entry again as "new", the cycle repeats.
... 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.
...And 2 more matches

PromiseWorker.jsm
the following sections tell you which content to use in your worker and main thread files, in order to use promiseworker objects.
... by convention, the last argument may be an object options with some of the following fields: outexecutionduration {number|null} a parameter to be filled with the duration of the off main thread execution for this call.
... supported built-in javascript error are following: evalerror internalerror rangeerror referenceerror syntaxerror typeerror urierror in addition to them, stopiteration is also supported (note that stopiteration is deprecated).
...And 2 more matches

SourceMap.jsm
according to the spec, source maps have the following attributes: version: which version of the source map spec this map is following.
...the only argument is an object with the following properties: line: the line number in the generated source.
... and an object is returned with the following properties: source: the original source file, or null if this information is not available.
...And 2 more matches

Localization and Plurals
if you don't know how many plural forms you need, check the pluralrule number in chrome/global/intl.properties, and look up the corresponding entry in the following list of plural rules.
... examples the following are some examples for various languages and a brief thought processes.
...just put the following line somewhere that will be evaluated before you want to use pluralform.
...And 2 more matches

Localizing with Mercurial
mercurial on linux you can easily install mercurial from the command line by issuing one of the following commands.
... your config file should have the following settings: [ui] username = your real name <user@example.com> merge = internal:merge [defaults] commit = -v [diff] git = 1 showfunc = 1 unified = 8 to configure hg, follow these steps: create a new file in your favorite text editor.
... here's how to get (or clone) your en-us source files for the first time: run the following command in the command line to get the source en-us files for firefox: hg clone https://hg.mozilla.org/mozilla-central/ this will create a clone of the mozilla-central repository in the directory mozilla-central.
...And 2 more matches

BloatView
you can set these environment variables to any of the following values.
... combining and sorting bloat logs you can view one or more bloat logs in your browser by running the following program.
...logn > htmlfile this will produce an html file that contains a table similar to the following (but with added javascript so you can sort the data by column).
...And 2 more matches

NSS_3.12_release_notes.html
nss 3.12 release notes 17 june 2008 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12 is a minor release with the following new features: sqlite-based shareable certificate and key databases libpkix: an rfc 3280 compliant certificate path validation library camellia cipher support tls session ticket extension (rfc 5077) nss 3.12 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1.
...nss 3.12 libraries have the following versions: sqlite3: 3.3.17 nssckbi: 1.70 softokn3 and freebl3: 3.12.0.3 other nss libraries: 3.12.0.3 new in nss 3.12 3 new shared library are shipped with nss 3.12: nssutil 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_encodeinfoaccessex...
...ert ssl_error_bad_cert_hash_value_alert ssl_error_rx_unexpected_new_session_ticket ssl_error_rx_malformed_new_session_ticket new tls cipher suites (see sslproto.h): tls_rsa_with_camellia_128_cbc_sha tls_dhe_dss_with_camellia_128_cbc_sha tls_dhe_rsa_with_camellia_128_cbc_sha tls_rsa_with_camellia_256_cbc_sha tls_dhe_dss_with_camellia_256_cbc_sha tls_dhe_rsa_with_camellia_256_cbc_sha note: the following tls cipher suites are declared but are not yet implemented: tls_dh_dss_with_camellia_128_cbc_sha tls_dh_rsa_with_camellia_128_cbc_sha tls_dh_anon_with_camellia_128_cbc_sha tls_dh_dss_with_camellia_256_cbc_sha tls_dh_rsa_with_camellia_256_cbc_sha tls_dh_anon_with_camellia_256_cbc_sha tls_ecdh_anon_with_null_sha tls_ecdh_anon_with_rc4_128_sha tls_ecdh_anon_with_3des_ede_cbc_sha tls_ecdh_anon_with_...
...And 2 more matches

NSS Tools ssltap
the options for the command are the following: -v print a version string for the tool.
...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 intercept any connection information.
...the simplest way to use the debugging tool is to execute the following command from a command shell: ssltap www.netscape.com:80 the program waits for an incoming connection on the default port 1924.
...And 2 more matches

Getting SpiderMonkey source code
downloading gzipped spidermonkey source code you can download gzipped spidermonkey source code from the following urls: http://ftp.mozilla.org/pub/spidermonkey/releases/ http://ftp.mozilla.org/pub/spidermonkey/prereleases/ here is a command-line example of downloading and unzipping spidermonkey source code version 59.0: mkdir mozilla cd mozilla wget http://ftp.mozilla.org/pub/spidermonkey/prereleases/59/pre1/mozjs-59.0a1.0.tar.bz2 tar xvf mozjs-59.0a1.0.tar.bz2 these commands should work on most platforms including windows, as long as on windows you are using the mozillabuild bash shell.
... the following command line downloads the entire mozilla repository, including the full change history and a lot of gecko and firefox source code that isn't part of spidermonkey.
... getting the latest spidermonkey source code from git the following command line downloads the entire mozilla repository, including the full change history and a lot of gecko and firefox source code that isn't part of spidermonkey.
...And 2 more matches

Hacking Tips
the backtrace contains in the following order, the stack depth, the interpreter frame pointer (see js/src/vm/stack.h, stackframe class) or (nil) if compiled with ionmonkey, the file and line number of the call location and under parentheses, the jsscript pointer and the jsbytecode pointer (pc) executed.
...7 0x7fffefbbc250 typein:2 (0x7fffef1231c0 @ 24) #25158 0x7fffefbbc1c8 typein:3 (0x7fffef1231c0 @ 47) #25159 0x7fffefbbc140 typein:2 (0x7fffef1231c0 @ 24) #25160 0x7fffefbbc0b8 typein:3 (0x7fffef1231c0 @ 47) #25161 0x7fffefbbc030 typein:5 (0x7fffef123280 @ 9) note, you can do the exact same exercise above using lldb (necessary on osx after apple removed gdb) by running lldb -f js then following the remaining steps.
...to work-around this issue you can use the recording feature of gdb, to step one instruction, and settle back to where you came from with the following set of gdb commands: (gdb) record full (gdb) si (gdb) record goto 0 (gdb) record stop if you have a core file, you can use the gdb unwinder the same way, or do everything from the command line as follow: $ gdb -ex 'enable unwinder .* spidermonkey' -ex 'bt 0' -ex 'thread apply all backtrace' -ex 'quit' out/dist/bin/js corefile the gdb unwinder is supposed to be loaded by dist/bin/js-gdb.py a...
...And 2 more matches

Shell global objects
console an object that has following property: log evaluate and print expressions to stdout.
...if options is given, it may have any of the following properties: samezoneas the compartment will be in the same zone as the given object (defaults to a new zone) invisibletodebugger the global will be invisible to the debugger (default false) principal if present, its value converted to a number must be an integer that fits in 32 bits; use that as the new compartment's principal.
...the following keys' string values will be used to determine whether the corresponding types may be serialized (value allow, the default) or not (value deny).
...And 2 more matches

XForms Accessibility
build it yourself if you would like to build firefox/seamonkey yourself then please ensure your .mozconfig file has the following option: ac_add_options --enable-extensions=default,xforms,schema-validation how to test there are two approaches to test xforms accessibility.
... you can try the following link to test xforms accessibility: visual xforms elements in xhtml document at bugzilla.mozilla.org visual xforms elements in xul document at bugzilla.mozilla.org you can see xforms sample tests at mozilla xforms project there are set of tests at beaufour.dk w3c's xforms test at w3.org keyboard navigation issues navigation sequence though xforms spec declares navindex attribute to define the navigation sequence (see 1.0 specs or 1.1 specs) but rich schwerdtfeger (distinguished engineer, swg accessibility arc...
...it can have the following presentations: text - see the docs.
...And 2 more matches

Places utilities for JavaScript
utils.js is accessible at the following url: http://mxr.mozilla.org/mozilla-centr...ntent/utils.js this file includes utility functions used by a lot of the bookmarking, tagging, and annotation services that are built into firefox.
... return array of objects, each containing the following properties: name, flags, expires, mimetype, type, value getannotationsforitem() fetch all annotations for an item, including all properties of each annotation which would be required to recreate it.
... return type return array of objects, each containing the following properties: name, flags, expires, mimetype, type, value setannotationsforuri() annotate a uri with a batch of annotations.
...And 2 more matches

Setting up the Gecko SDK
the following four sections tell the developer how to download and organize the gecko sdk and create a new project in which components like weblock can be created.
...the sdk is available for windows, linux, and mac operating systems, and versions for other operating systems are being developed, and can be retrieved from as a single archive from the following platform-specific locations (need correction for last version (now 1.9.2.8).
... most of the changes you make in the following steps apply to all configurations of the project (both debug and optimized), so select "all configurations" from the settings for dropdown menu: on the c/c++ tab, select the preprocessor category.
...And 2 more matches

nsIFile
void appendrelativenativepath(in acstring relativefilepath); void appendrelativepath(in astring relativefilepath); nsifile clone(); boolean contains(in nsifile infile); void copyto(in nsifile newparentdir, in astring newname); void copytofollowinglinks(in nsifile newparentdir, in astring newname); void copytofollowinglinksnative(in nsifile newparentdir, in acstring newname); native code only!
... copytofollowinglinks() this method copies a source file to a new location if it does not already exist.
... void copytofollowinglinks( in nsifile newparentdir, in astring newname ); parameters newparentdir this parameter specifies the parent directory to copy the file into.
...And 2 more matches

MailNews fakeserver
a handler will contain the following methods: <caption> handler methods </caption> name arguments returns notes [command] rest of sent line server's response the name is normalized to be uppercase.
...the server presents the following api to the handler: <caption> server api </caption> name arguments returns description closesocket none nothing closes the socket and stops the test.
...the server provides the following api to xpcshell tests: <caption> nsmailserver xpcshell api </caption> name arguments returns description performtest none nothing runs until the test is forcibly aborted or stopped normally isstopped none if the server is stopped helper for performtest istestfinished none if the test is finished helper for performtest playtransaction none the transaction the transaction is an object wi...
...And 2 more matches

Mozilla
android-specific test suites there are several android-specific test suites that run on the firefox for android codebase: api change rules until further notice, the following rules govern api changes: application cache implementation overview this happens in nshttpchannel::opencacheentry().
... error codes returned by mozilla apis the following tables list errors that can occur when calling various mozilla apis.
... mozilla quirks mode behavior the following is a rough list of the differences that exist between mozilla's standards mode and quirks mode behavior.
...And 2 more matches

UI Tour - Firefox Developer Tools
the ui is split vertically into three panels source list pane source pane the contents of the third pane depend on the current state of the debugger and may include the following sections: toolbar watch expressions breakpoints call stack scopes xhr breakpoints event listener breakpoints dom mutation breakpoints source list pane the source list pane lists all the javascript source files loaded into the page, and enables you to select one to debug.
... for files, the following context menu options are available: copy source uri copies the full identifier of the file to the clipboard.
... for folders and groups, the following context menu options are available: collapse all collapses all subfolders of the item.
...And 2 more matches

Debugger.Memory - Firefox Developer Tools
accessor properties of the debugger.memory.prototype object ifdbg is a debugger instance, then <i>dbg</i>.memory is a debugger.memory instance, which inherits the following accessor properties from its prototype: trackingallocationsites a boolean value indicating whether this debugger.memory instance is capturing the javascript execution stack when each object is allocated.
...it has the following properties: collections the collections property’s value is an array.
...for each collection slice that occurred, there is an entry in the collections array with the following form: { "starttimestamp":timestamp, "endtimestamp":timestamp, } here the timestamp values are timestamps of the gc slice’s start and end events.
...And 2 more matches

about:debugging - Firefox Developer Tools
note: if the version of firefox on your remote device is more than one major version older than the version running on your computer, you may see a message like the following: in firefox 76 and above, the message can look like the following: see connection for firefox for android 68 for more information.
...when you do, it is added to the network locations list along with the devices, as shown below: this firefox the this firefox tab combines the features of extensions, tabs, and workers into a single tab with the following sections: temporary extensions displays a list of the extensions that you have loaded using the load temporary add-on button.
... you can use the following buttons: inspect loads the extension in the debugger.
...And 2 more matches

CanvasRenderingContext2D - Web APIs
drawing text the following methods draw text.
... line styles the following methods and properties control how lines are drawn.
... text styles the following properties control how text is laid out.
...And 2 more matches

HTMLElement - Web APIs
in addition, the following handlers are specific to htmlelement.
... working draft added the following properties: offsetparent, offsettop, offsetleft, offsetwidth, and offsetheight.
... living standard added the following properties: translate, itemscope, itemtype, itemid, itemref, itemprop, properties, and itemvalue.
...And 2 more matches

HTMLFormElement - Web APIs
you can then use any of the following syntaxes to get an individual form: document.forms[index] returns the form at the specified index into the array of forms.
... elements that are considered form controls the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.
... living standard the following method has been added: requestautocomplete().
...And 2 more matches

HTMLImageElement - Web APIs
living standard the following properties have been added: srcset, currentsrc and sizes.
... the following properties are now obsolete: name, border, align, hspace, vspace, and longdesc.
... the following properties are now unsigned long, instead of long: height, and width.
...And 2 more matches

HTMLInputElement - Web APIs
when there's no selection, this returns the offset of the character immediately following the current text input cursor position.
... valueasnumber double: returns the value of the element, interpreted as one of the following, in order: a time value a number nan if conversion is impossible autocapitalize string: defines the capitalization behavior for user input.
... the following properties are now obsolete: align and usemap.
...And 2 more matches

HTMLSelectElement.add() - Web APIs
examples creating elements from scratch var sel = document.createelement("select"); var opt1 = document.createelement("option"); var opt2 = document.createelement("option"); opt1.value = "1"; opt1.text = "option: value 1"; opt2.value = "2"; opt2.text = "option: value 2"; sel.add(opt1, null); sel.add(opt2, null); /* produces the following, conceptually: <select> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> */ the before parameter is optional.
... so the following is accepted.
... append to an existing collection var sel = document.getelementbyid("existinglist"); var opt = document.createelement("option"); opt.value = "3"; opt.text = "option: value 3"; sel.add(opt, null); /* takes the existing following select object: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> and changes it to: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> <option value="3">option: value 3</option> </select> */ the before parameter is optional.
...And 2 more matches

KeyboardEvent - Web APIs
constants the keyboardevent interface defines the following constants.
... keyboard locations the following constants identify which part of the keyboard the key event originates from.
... events the following events are based on the keyboardevent type.
...And 2 more matches

MediaDevices.getUserMedia() - Web APIs
the following requests both audio and video without any specific requirements: { audio: true, video: true } if true is specified for a media type, the resulting stream is required to have that type of track in it.
...the following expresses a preference for 1280x720 camera resolution: { audio: true, video: { width: 1280, height: 720 } } the browser will try to honour this, but may return other resolutions if an exact match is not available, or the user overrides it.
...the following demands a minimum resolution of 1280x720: { audio: true, video: { width: { min: 1280 }, height: { min: 720 } } } if no camera exists with this resolution or higher, then the returned promise will be rejected with overconstrainederror, and the user will not be prompted.
...And 2 more matches

Using the Notifications API - Web APIs
in its simplest form, we just include the following: notification.requestpermission().then(function(result) { console.log(result); }); this uses the promise-based version of the method.
...we did this using the following: function checknotificationpromise() { try { notification.requestpermission().then(); } catch(e) { return false; } return true; } we basically try to see if the .then() method is available on requestpermission().
... for example, in the to-do-list example we use the following snippet to create a notification when required (found inside the createnotification() function): var img = '/to-do-notifications/img/icon-128.png'; var text = 'hey!
...And 2 more matches

PaymentRequest.PaymentRequest() - Web APIs
each item in the array contains the following fields: supportedmethods for early implementations of the spec, this was a sequence of identifiers for payment methods that the merchant website accepts.
...this parameter contains the following fields: total the total amount of the payment request.
...this parameter contains the following fields: additionaldisplayitems an array of items to be appended to the details.displayitems property.
...And 2 more matches

Using the User Timing API - Web APIs
the method takes one argument, the name of the mark, as shown in the following example.
...the following examples shows how to use each of these methods (performance.getentries(), performance.getentriesbytype(entrytype), and performance.getentriesbyname(name, entrytype) ) to retrieve one or more marks.
...the following example demostrates both uses of this method.
...And 2 more matches

WebGL best practices - Web APIs
in practice, effectively all systems support at least the following: max_cube_map_texture_size: 4096 max_renderbuffer_size: 4096 max_texture_size: 4096 max_viewport_dims: [4096,4096] max_vertex_texture_image_units: 4 max_texture_image_units: 8 max_combined_texture_image_units: 8 max_vertex_attribs: 16 max_varying_vectors: 8 max_vertex_uniform_vectors: 128 max_fragment_uniform_vectors: 64 aliased_point_size_range: [...
... for example, it is possible for the following to never complete without context loss: sync = glfencesync(gl_sync_gpu_commands_complete, 0); glclientwaitsync(sync, 0, gl_timeout_ignored); webgl doesn't have a swapbuffers call by default, so a flush can help fill the gap, as well.
...the essl3 spec says this under "error handling": the implementation should report errors as early a possible but in any case must satisfy the following: all lexical, grammatical and semantic errors must have been detected following a call to gllinkprogram errors due to mismatch between the vertex and fragment shader (link errors) must have been detected following a call to gllinkprogram errors due to exceeding resource limits must have been detected following any draw call or a call to glvalidateprogram a call to glvalidateprogram must rep...
...And 2 more matches

Web Video Text Tracks Format (WebVTT) - Web APIs
webvtt body the structure of a webvtt consists of the following components, some of them optional, in this order: an optional byte order mark (bom).
... example 12 - karaoke style text 1 00:16.500 --> 00:18.500 when the moon <00:17.500>hits your eye 1 00:00:18.500 --> 00:00:20.500 like a <00:19.000>big-a <00:19.500>pizza <00:20.000>pie 1 00:00:20.500 --> 00:00:21.500 that's <00:00:21.000>amore the following tags are the html tags allowed in a cue and require opening and closing tags (e.g., <b>text</b>).
...following interface can be used to expose webvtt cues in dom api: enum autokeyword { "auto" }; enum directionsetting { "" /* horizontal */, "rl", "lr" }; enum linealignsetting { "start", "center", "end" }; enum positionalignsetting { "line-left", "center", "line-right", "auto" }; enum alignsetting { "start", "center", "end", "left", "right" }; [constructor(double starttime, double endtime, domstring text)...
...And 2 more matches

Inputs and input sources - Web APIs
gaze tracking (following the movements of the eye to choose targets).
... for example, the generic-trigger-squeeze-touchpad profile name can be used to locate the following json profile data by locating the profileid field that has the value generic-trigger-squeeze-touchpad.
... when the user points a device along a target ray in your 3d space and then triggers a select action, the following events are sent to the active xrsession: a selectstart event, indicating that the user has performed the activity that begins the primary action.
...And 2 more matches

Using XMLHttpRequest - Web APIs
some cases where dealing with non-text response types may involve some manipulation and analysis are outlined in the following sections.
...if you are using the post method the server will receive a string similar to one of the following three examples, depending on the encoding type you are using: method: post; encoding type: application/x-www-form-urlencoded (default): content-type: application/x-www-form-urlencoded foo=bar&baz=the+first+line.%0d%0athe+second+line.%0d%0a method: post; encoding type: text/plain: content-type: text/plain foo=bar baz=the first line.
... -----------------------------314911788813839-- however, if you are using the get method, a string like the following will be simply added to the url: ?foo=bar&baz=the%20first%20line.%0athe%20second%20line.
...And 2 more matches

Cognitive accessibility - Accessibility
all of the following guidelines help more than just people with cognitive disabilities.
... for example, being able to extend the expiration time on an application requiring an authentication code sent to a mobile device via text message helps with the following scenarios: people with attention or anxiety disorders.
...this is especially important and helpful for people with short attention spans who may become confused when following a long series of navigation steps.
...And 2 more matches

Getting Started - Developer guides
the two major features of ajax allow you to do the following: make requests to the server without reloading the page receive and work with data from the server step 1 – how to make an http request in order to make an http request to the server with javascript, you need an instance of an object with the necessary functionality.
...for example, use the following before calling send() for form data sent as a query string: httprequest.setrequestheader('content-type', 'application/x-www-form-urlencoded'); step 2 – handling the server response when you sent the request, you provided the name of a javascript function to handle the response: httprequest.onreadystatechange = nameofthefunction; what should this function do?
...in the following example, we differentiate between a successful and unsuccessful ajax call by checking for a 200 ok response code.
...And 2 more matches

Standard metadata names - HTML: Hypertext Markup Language
standard metadata names defined in the html specification the html specification defines the following set of standard metadata names: application-name: the name of the application running in the web page.
... standard metadata names defined in other specifications the css color adjustment specification defines the following metadata name: color-scheme: specifies one or more color schemes with which the document is compatible.
... the value of the content property for color-scheme may be one of the following: normal the document is unaware of color schemes and should simply be rendered using the default color palette.
...And 2 more matches

A re-introduction to JavaScript (JS tutorial) - JavaScript
javascript has a boolean type, with possible values true and false (both of which are keywords.) any value can be converted to a boolean according to the following rules: false, 0, empty strings (""), nan, null, and undefined all become false.
... let a; let name = 'simon'; the following is an example of scope with a variable declared with let: // myletvariable is *not* visible out here for (let myletvariable = 0; myletvariable < 5; myletvariable++) { // myletvariable is only visible in here } // myletvariable is *not* visible out here const allows you to declare variables whose values are never intended to change.
... details: { color: 'orange', size: 12 } }; attribute access can be chained together: obj.details.color; // orange obj['details']['size']; // 12 the following example creates an object prototype(person) and an instance of that prototype(you).
...And 2 more matches

Regular expressions - JavaScript
the following pages provide lists of the different special characters that fit into each category, along with descriptions and examples.
... if you want to look at all the special characters that can be used in regular expressions in a single table, see the following: special characters in regular expressions.
... in the following example, the script uses the exec() method to find a match in a string.
...And 2 more matches

Array.prototype.filter() - JavaScript
you can work around this by inserting the following code at the beginning of your scripts, allowing use of filter() in ecma-262 implementations which do not natively support it.
... } } } } else{ while (++i !== len){ // checks to see if the key was set if (i in this){ kvalue = t[i]; if (func.call(thisarg, t[i], i, t)){ res[c++] = kvalue; } } } } res.length = c; // shrink down array to proper size return res; }; } examples filtering out all small values the following example uses filter() to create a filtered array that has all elements with values less than 10 removed.
... function isbigenough(value) { return value >= 10 } let filtered = [12, 5, 8, 130, 44].filter(isbigenough) // filtered is [12, 130, 44] find all prime numbers in an array the following example returns all prime numbers in the array: const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]; function isprime(num) { for (let i = 2; num > i; i++) { if (num % i == 0) { return false; } } return num > 1; } console.log(array.filter(isprime)); // [2, 3, 5, 7, 11, 13] filtering invalid entries from json the following example uses filter() to create a filtered json of all elements with non-zero, numeric id.
...And 2 more matches

Intl.DateTimeFormat() constructor - JavaScript
the following unicode extension keys are allowed: nu numbering system.
... options optional an object with some or all of the following properties: datestyle the date formatting style to use when calling format().
...see the following paragraphs for information about the use of this property.
...And 2 more matches

handler.construct() - JavaScript
syntax const p = new proxy(target, { construct: function(target, argumentslist, newtarget) { } }); parameters the following parameters are passed to the construct() method.
... interceptions this trap can intercept these operations: new proxy(...args) reflect.construct() invariants if the following invariants are violated, the proxy will throw a typeerror: the result must be an object.
... examples trapping the new operator the following code traps the new operator.
...And 2 more matches

String.prototype.replace() - JavaScript
specifying a string as a parameter the replacement string can include the following special replacement patterns: pattern inserts $$ inserts a "$".
... (the exact number of arguments depends on whether the first argument is a regexp object—and, if so, how many parenthesized submatches it specifies.) the following example will set newstring to 'abc - 12345 - #$*%': function replacer(match, p1, p2, p3, offset, string) { // p1 is nondigits, p2 digits, and p3 non-alphanumerics return [p1, p2, p3].join(' - '); } let newstring = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer); console.log(newstring); // abc - 12345 - #$*% examples defining the regular expression in replace() in the following...
...in the following example, the regular expression includes the global and ignore case flags which permits replace() to replace each occurrence of 'apples' in the string with 'oranges'.
...And 2 more matches

eval() - JavaScript
in the following example, the string constructor is specified and eval() returns a string object rather than evaluating the string.
...but, in the code using eval(), the browser cannot assume this since what if your code looked like the following: function date(n){ return ["monday","tuesday","wednesday","thursday","friday","saturday","sunday"][n%7 || 0]; } function loosejsonparse(obj){ return eval("(" + obj + ")"); } console.log(loosejsonparse( "{a:(4-1), b:function(){}, c:new date()}" )) thus, in the eval() version of the code, the browser is forced to make the expensive lookup call to check to see if there are any local va...
...consider the following example where the property of the object to be accessed is not known until the code is executed.
...And 2 more matches

this - JavaScript
since the following code is not in strict mode, and because the value of this is not set by the call, this will default to the global object, which is window in a browser.
... function f1() { return this; } // in a browser: f1() === window; // true // in node: f1() === globalthis; // true in strict mode, however, if the value of this is not set when entering an execution context, it remains as undefined, as shown in the following example: function f2() { 'use strict'; // see strict mode return this; } f2() === undefined; // true in the second example, this should be undefined, because f2 was called directly and not as a method or property of an object (e.g.
...calling super() creates a this binding within the constructor and essentially has the effect of evaluating the following line of code, where base is the inherited class: this = new base(); warning: referring to this before calling super() will throw an error.
...And 2 more matches

async function - JavaScript
for example, the following: async function foo() { return 1 } ...is equivalent to: function foo() { return promise.resolve(1) } the body of an async function can be thought of as being split by zero or more await expressions.
... in the following example, we successively await two promises.
... for example, in the following code an unhandled promise rejection error will be thrown, even if a .catch handler has been configured further along the promise chain.
...And 2 more matches

The "codecs" parameter in common media types - Web media technologies
both video and audio tracks can be described using the codecs parameter with the following mime types: base mime types supporting the iso bmff codecs parameter mime type description audio/3gpp 3gp audio (rfc 3839: mime type registrations for 3rd generation partnership project (3gp) multimedia files) video/3gpp 3gp video (rfc 3839: mime type registrations for 3rd generation partnership project (3gp) multimedia files) audio/3gp2 3gp2 ...
... avc profiles the following are the avc profiles and their profile numbers for use in the codecs parameter, as well as the value to specify for the constraints component, cc.
...each of these components is described in the following table.
...And 2 more matches

Mobile first - Progressive web apps (PWAs)
i installed the volo automation tool by running the following on the command line sudo npm install -g volo (you'll also need to get node.js too if you don't already have it) i then created my sample project using volo create myapp mozilla/mortar-app-stub this creates a sample project inside a directory called myapp.
...i had to make sure both of these were not direct children of the <article>, otherwise the following would not work: #bottom, #top { font-size: 0.8em; position:absolute; right: 1em; text-decoration: none; } #top { color: white; top: 0.5em; } #bottom { bottom: 0.5em; } i also set their parents to be positioned relatively, so they would become the positioning contexts of the absolutely positioned elements (you don't want them to be positioned relative to the <body> element.) add...
...to create something more suitable for desktop, i put in the following media queries: @media (min-width: 480px) { #bottom, #top { display: none; } article, nav { display: block; } nav ul { text-align: center; } nav li { display: inline; } nav li a { border-right: 1px solid #ad66d5; border-bottom: none; display: inline-block; padding: 0 5px; font-size: 1.6em; } nav li:last-child a { border-right: none; } } @media (min-width: 600px) { html { background: #eee; height: 100%; } body { width: 600px; height: inherit; margin: 0 auto; background: url(../img/firefo...
...And 2 more matches

stroke-linecap - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polyline>, <line>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the (default) "butt" value --> <line x1="1" y1="1" x2="5" y2="1" stroke="black" stroke-linecap="butt" /> <!-- effect of the "round" value --> <line x1="1" y1="3" x2="5" y2="3" stroke="black" stroke-linecap="round" /> <!-- effect of the "square" value...
... --> <line x1="1" y1="5" x2="5" y2="5" stroke="black" stroke-linecap="square" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4 m1,3 h4 m1,5 h4" stroke="pink" stroke-width="0.025" /> </svg> usage notes value butt | round | square default value butt animatable yes butt the butt value indicates that the stroke for each subpath does not extend beyond its two endpoints.
... example html,body,svg { height:100% } <svg viewbox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "butt" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="butt" /> <!-- effect of the "butt" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="butt" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> </svg> round the round value indicates that at the end of each subpath the stroke will be extended by a half circle with a...
...And 2 more matches

XPath snippets - XPath
node-specific evaluator function the following custom utility function can be used to evaluate xpath expressions on given xml nodes.
...scripts in a web document which might be accessed by edge or internet explorer users should replace the call to new xpathevaluator() with the following fragment: // xpathevaluator is implemented on objects that implement document var xpe = anode.ownerdocument || anode; in that case the creation of the xpathnsresolver can be simplified as: var nsresolver = xpe.creatensresolver(xpe.documentelement); note however that creatensresolver should only be used if you are sure the namespace prefixes in the xpath expression match those in the d...
... sample usage assume we have the following xml document (see also how to create a dom tree and parsing and serializing xml): example: an xml document to use with the custom evaluatexpath() utility function <?xml version="1.0"?> <people> <person first-name="eric" middle-initial="h" last-name="jung"> <address street="321 south st" city="denver" state="co" country="usa"/> <address street="123 main st" city="arlington" state="ma"...
...And 2 more matches

Private Properties - Archive of obsolete content
consider the following example: function point(x, y) { this._x = x; this._y = y; } the properties _x and _y are intended to be private, and should only be accessed by member functions.
...before explaining how weakmaps work, the following looks at how ordinary objects can be used as hash maps, by creating a simple image cache: let images = {}; function getimage(name) { let image = images[name]; if (!image) { image = loadimage(name); images[name] = image; } return image; } now suppose there's a need to associate a thumbnail with each image.
...a weakmap is very similar to an ordinary hash map, but differs from it in two crucial ways: it can use ordinary objects as keys it does not maintain a strong reference to its values to understand how weakmaps are used in practice, the following rewrites the thumbnail cache using a weakmap: let thumbnails = new weakmap(); function getthumbnail(image) { let thumbnail = thumbnails.get(image); if (!thumbnail) { thumbnail = createthumbnail(image); thumbnails.set(image, thumbnail); } return thumbnail; } this version suffers from none of the problems we mentioned earlier.
...to illustrate this, the following reimplements the class point using namespaces: const { ns } = require("sdk/core/namespace"); var internal = ns(); function point(x, y) { internal(this).x = x; internal(this).y = y; } point.prototype.getx = function () { return internal(this).x; }; point.prototype.setx = function (x) { internal(this).x = x; }; point.prototype.gety = function () { return internal(this).y; ...

panel - Archive of obsolete content
the following add-on adds a button which displays a panel when clicked.
... the position object has one or more of the following properties: top, right, bottom and left.
...this may take one of the following values: "start": load content scripts immediately after the document element for the panel is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the panel has been loaded, ...
...this may have one of the following values: "start": load content scripts immediately after the document element for the panel is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the panel has been loaded, at the time the ...

passwords - Archive of obsolete content
they contain the following properties: username the username.
... it contains the following properties: username the username.
... so: given a form at http://www.example.com/login with the following html: <form action="http://login.example.com/foo/authenticate.cgi"> <div>please log in.</div> <label>username:</label> <input type="text" name="uname"> <label>password:</label> <input type="password" name="pword"> </form> the corresponding values for the credential (excluding username and password) should be: url: "http://www.example.com" formsubmiturl: "http://logi...
...they contain the following properties: username the username.

ui/sidebar - Archive of obsolete content
events attach this event is emitted when a worker is attached to a sidebar, as a result of any of the following: calling the sidebar's show() method, when the sidebar is not shown in the currently active window changing the sidebar's url property the user switching the sidebar on using the "sidebar" submenu in firefox, when the sidebar is not shown in the currently active window the user opening a new window from a window that has the sidebar showing it is passed a worker as an argument, which defi...
... detach this event is emitted when a worker is detached from a sidebar, as a result of either of the following: calling the sidebar's hide() method, when the sidebar is being shown in the currently active window the user switching the sidebar off using the "sidebar" submenu in firefox, when the sidebar is being shown in the currently active window the detach listener receives a worker object as a parameter.
...er(worker) { var index = workerarray.indexof(worker); if(index != -1) { workerarray.splice(index, 1); } } var sidebar = require("sdk/ui/sidebar").sidebar({ id: 'my-sidebar', title: 'my sidebar', url: require("sdk/self").data.url("sidebar.html"), onattach: attachworker, ondetach: detachworker }); show this event is emitted when the sidebar is shown, as a result of any of the following: calling the sidebar's show() method, when the sidebar is not shown in the currently active window changing the sidebar's url property the user switching the sidebar on using the "sidebar" submenu in firefox, when the sidebar is not shown in the currently active window the user opening a new window from a window that has the sidebar showing hide this event is emitted when the sidebar is ...
...hidden, as a result of either of the following: calling the sidebar's hide() method, when the sidebar is being shown in the currently active window the user switching the sidebar off using the "sidebar" submenu in firefox, when the sidebar is being shown in the currently active window ...

Enhanced Extension Installation - Archive of obsolete content
c:\program files\mozilla firefox\extensions extension metadata the extension system stores metadata in both of the two locations, in the following files: <location>/extensions/extensions.rdf - an xml/rdf datasource listing all the extensions installed at that location.
... extension metadata the following files are now used to hold metadata: <profile>/extensions.ini -active items this file contains a list of active extension directories (i.e.
...the following information is stored for each entry: the persistent descriptor of the path where the item lives.
...the startup process discovered the .autoreg file, before pending operations are finalized the extension system reads the extensions-startup.manifest and scans all of the install locations looking for items that match the following criteria: item in install location is not listed in startup manifest (new item being installed by just appearing in the install location).

Install Manifests - Archive of obsolete content
id the id of the extension, which must be one of the following: guid (firefox 1.0) a string formatted like so: extensionname@example.org the latter format is significantly easier to generate and manipulate.
... <em:localized> <description> <em:locale>de-de</em:locale> <em:name>tab sidebar</em:name> <em:description>zeigt in einer sidebar vorschaubilder der inhalte aller offenen tabs an.</em:description> </description> </em:localized> the following properties which are described elsewhere in this page can be included in the localized property: name description creator homepageurl developer translator contributor more documentation can be found at localizing extension descriptions.
...if an extension includes the following then it must request unpacking: binary xpcom components plugins search plugins dlls loaded with ctypes dictionaries window icons examples <description about="urn:mozilla:install-manifest"> <em:id>extension@mysite.com</em:id> <em:unpack>true</em:unpack> ...
... the add-on manager will substitute the following values into this url in case you wish to generate the response rdf dynamically, such as using php or cgi: %req_version% the version of the request.

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
in the following you will find a brief description how to do so; a more detailed one can be found under setting up an extension development environment.
...if you keep in mind the following three points at the very least, the next section, developing a simple extension, should help flesh out your understanding.
...in the interest of space, i’m not including all the code here, but you can download it from the following url: fixme: include code from xuldev: translate it and attach it to the chapter document init method the init method is as shown in listing 17.
...the following all assumes that you’ve disabled the xul cache as discussed in the section “setting up your development environment”.

Setting Up a Development Environment - Archive of obsolete content
run the following command: make that's it.
... you can clean up the bin directory by just running the following command (again, from the src directory): make clean you can also run these commands from komodo.
...long story short, if you want to run it from a command line, you need to run: export ostype; make install and in the command in komodo, you should enter the following: bash -c "export ostype; make install" the export command won't work correctly unless you use "bash -c".
...follow the instructions, and add something like the following to your makefile: # the directory where the signature sources are located.

Session store API - Archive of obsolete content
after that, the following steps are taken for each tab being restored: either an existing tab is reused or a new tab is created.
... saving a value with a tab the following code will attach a key/value pair to a tab, so that when the tab is restored, that pair is still associated with it.
... fetching a saved value you can fetch a value associated with a tab at any time (whether the tab is in the process of being restored or not), using code similar to the following: var ss = components.classes["@mozilla.org/browser/sessionstore;1"] .getservice(components.interfaces.nsisessionstore); var currenttab = gbrowser.selectedtab; var retrieveddata = ss.gettabvalue(currenttab, "key-name-here"); after this code executes, the variable retrieveddata contains the value saved for the key "key-name-here".
... deleting a value associated with a tab to delete a value from a tab, you can use code similar to the following: var ss = components.classes["@mozilla.org/browser/sessionstore;1"] .getservice(components.interfaces.nsisessionstore); var currenttab = gbrowser.selectedtab; ss.deletetabvalue(currenttab, "key-name-here"); remarks the window value save and restore functions work exactly like the tab-based functions by similar names.

Case Sensitivity in class and id Names - Archive of obsolete content
(for a detailed explanation of what html 4.01 says, see the following section, "why so case-sensitive?") the only way to avoid this particular problem is to make sure that your class and id names have consistent case throughout the entire document, and with respect to your css and javascript.
...in section 7.5.2, which defines class and ids, we find the following text: id = name [cs] this attribute assigns a name to an element.
...thus, the mozilla team, committed to following open standards as closely as possible, implemented both class and id names as case-sensitive values.
...an "illegal" example is given in the specification, preceded by the text: "the following example is illegal with respect to uniqueness since the two names are the same except for case." <p><a name="xxx">...</a> <p><a name="xxx">...</a> we could freely substitute id for name and the point would be the same, since name and id share the same name space (see section 12.2.3).

MMgc - Archive of obsolete content
finalizers may not perform any of the following actions: fire any write barriers dereference a pointer to any gc object, including member variables (except see below about rcobject references) allocate any gc memory (gc::alloc), explicitly free gc memory (gc::free) change the set of gc roots (create a gcroot object or derivative) cause itself to become reachable if a finalized object holds a reference to an rcobject, it may safely call decre...
...the following flash animation illustrates the working of a mark/sweep collector: (temporarily not working) <gflash>600 300 gc.swf</gflash> one pass the mark sweep algorithm described above decomposes into clearmarks/mark/finalize/sweep.
...illustration of write barriers the following flash animation demonstrates how a write barrier works.
...this approach was not chosen for the following reasons: coordinating the marking thread and the main thread will require locking and may suffer due to lock overhead/contention supporting mac classic's cooperative threads makes this approach harder flash's frame based architecture gives us a very natural place to do this work we have better control over how much time is spent marking without threads when smp systems become more prevalent it ...

Images, Tables, and Mysterious Gaps - Archive of obsolete content
in the simplest case, we might add a style like this: td img {display: block;} consider this rule when applied to the following markup: <table cellspacing="0" cellpadding="0" border="0" width="500"> <tr><td><img src="nav1.gif"><img src="nav2.gif"><img src="nav3.gif"><img src="nav4.gif"><img src="nav5.gif"></td></tr> <tr><td style="background: red;"> <img src="smallred.gif" height="1" width="1"></td></tr> <tr><td> <p style="margin: 0.5em;">this is text in another cell of the table.
...thus you might have: tr.decoration img {display: block;} ...along with the following change in the markup: <tr class="decoration"><td style="background: red;"> <img src="smallred.gif" height="1" width="1"> </td></tr> the result is that of only making the spacer gif block-level, thus leaving the other images alone.
...for example, you could try the following: td img {vertical-align: bottom;} this will cause the bottom edges of the images to be aligned with the bottom of the line box, instead of the baseline.
...should this property be adopted, then any browser supporting it could emulate traditional "shrinkwrap" behavior without risking other layout upset with the following rule: td {line-box-contain: font replaced;} /* proposed for css3 */ there are other possible fixes contained within the current css3 working drafts, such as line-height-policy.

Using Dehydra - Archive of obsolete content
example: printing the location of type declarations save the following c++ code dumptypes.cc: typedef int myint; struct foo { int i; char *c; }; save the following analysis script dumptypes.js: function process_type(t) { print("type found: " + t.name + " location: " + t.loc); } function input_end() { print("hello, world!"); } compile using the following command: $ g++ -fplugin=~/dehydra/gcc_dehydra.so -fplugin-arg=~/dumptypes.js -o/dev/null -c dumptypes.cc note:for g++4.5 and up use -fplugin-arg-gcc_dehydra-script= rather than -fplugin-arg it should print the following results: type found: ...
... see documentation for: process_type, input_end, print, .loc property example: using attributes to mark a class as "final" save the following code as final.cc: // this class should not be subclassed!
... class __attribute__((user("final"))) myclass { }; // this subclass should be an error class subclass : public myclass { }; save the following analysis script final.js: /** * helper function: returns true if a class is marked with the "final" attribute.
... */ function isfinal(c) { if (!c.attributes) return false; for each (let a in c.attributes) if (a.name == 'user' && a.value == 'final') return true; return false; } function process_type(t) { if (t.bases) for each (let base in t.bases) if (isfinal(base.type)) error("class " + t.name + " extends final class " + base.type.name, t.loc); } compile using the following command: $ g++ -fplugin=~/dehydra/gcc_dehydra.so -fplugin-arg=~/final.js -o/dev/null -c final.cc it should print the following results and return with an error code: final.cc:8: error: class subclass extends final class myclass see documentation for: process_type, error, .bases property, .attributes property ...

Mozilla Application Framework in Detail - Archive of obsolete content
the following architectural diagram depicts necko and its interaction with subsystems: necko is powerful, stable and robust, with current development focused on performance and standards-compliance.
...it is a development environment that provides the following features for the cross-platform software developer: component management file abstraction object message passing memory management this component object model makes virtually all of the functionality of gecko available as a series of components, or reusable cross-platform libraries, that can be accessed from the browser or scripted from any mozilla application.
...the xpinstall api makes the following functionality available as high-level javascript objects: an install trigger that initiates installations windows registry access mozilla registration interfaces for registering new mozilla software facilities for detecting and maintaining application versions high-level objects for manipulating local directories and files complete reference documentation, including useful example installa...
...tions the following snippet from an xpinstall installation gives you some idea about how easy it is to write cross-platform installations that use the mozilla browser: // register chrome registerchrome(package | delayed_chrome, getfolder("chrome","xmlterm.jar"), "content/xmlterm/"); registerchrome(skin | delayed_chrome, getfolder("chrome","xmlterm.jar"), "skin/modern/xmlterm/"); registerchrome(locale | delayed_chrome, getfolder("chrome","xmlterm.jar"), "locale/xmlterm/"); if (getlasterror() == success) performinstall(); else { alert("error detected: "+getlasterror()); cancelinstall(); } other features a resource description framework (rdf) parser with support for creating rdf graphs programmatically or by parsing files, compositing multiple sources into a single rdf graph, querying a...

Table Layout Strategy - Archive of obsolete content
in the following the basic table layout strategy is discussed.
... the words the table layout is width oriented and knows the following widths: minimum content width - min the minimum width that is required to layout the content, all linebreak possibilities will be used percent width - pct the cell width specified in percent, fixed width - fix the cell width specified as px, mm etc., proportional width - prop the cell width specified via 1*, 2* etc.
... min_con des_con fix min_adj des_adj fix_adj pct pct_adj min_pro final the width parameter have the following meaning: #define width_not_set -1 #define num_widths 10 #define num_major_widths 3 // min, des, fix #define min_con 0 // minimum width required of the content + padding #define des_con 1 // desired width of the content + padding #define fix 2 // fixed width either from the content or cell, col, etc.
... special cases note: the following examples are not shown correctly due to technical constraints on wiki content.

Tamarin-central rev 703:2cee46be9ce0 - Archive of obsolete content
testing summary acceptance tests have passed on the following supported platforms: * windows, 32 & 64 bit * mac ox x ppc & intel, 32 bit * linux, 32 bit * windows mobile arm version asc-4200 of the actionscript compiler was used for all tests.
... performance testsuite time metric the following is a comparison of the current tamarin-central (tc-703) versus the prior build (tc-700) as well as current against the vm in flash player 10.
...% fastertc-703 vs flash10: 148.7% fastertc-703 vs tc-700: 0.1% slowertc-703 vs flash10: 5.2% faster linux (ubuntu linux, 2.13 ghz dual core)tc-703 vs tc-700: 6.0% fastertc-703 vs flash10: 1.7% fastertc-703 vs tc-700: 89.5% fastertc-703 vs flash10: 182.0% fastertc-703 vs tc-700: 6.1% fastertc-703 vs flash10: 1.4% faster performance testuite memory metric the following is a comparison of the current tamarin-central (tc-703) versus the prior build (tc-700).
...14.6% largertc-703 vs tc-700: 16.4% largertc-703 vs tc-663: 2.1% larger windows (xp pro, 2.13ghz dual core)tc-703 vs tc-700: 3.2% largertc-703 vs tc-663: 7.6% largertc-703 vs tc-700: 3.9% largertc-703 vs tc-663: 12.4% largertc-703 vs tc-700: 3.3% largertc-703 vs tc-663: 21.4% larger linux (ubuntu linux, 2.13 ghz dual core)n/an/an/a vm code size the following is a comparison of the current tamarin-central compiled size (tc-703) versus the prior build (tc-700) as well as the current build against the vm in flash player 10.

execute - Archive of obsolete content
method of install object syntax int execute ( string xpisourcepath [, boolean blocking]); int execute ( string xpisourcepath, string args [, boolean blocking]); parameters the execute method has the following parameters: xpisourcepath the pathname of the file to extract and execute.
...the following line, for example, passes the "-c" command-line parameter to the executable: err = file.execute(myfile, "-c", true); when you want to pass more than one parameter to the executable itself, however, you must format the args string in a particular way so that the parameters can be broken up and passed separately as required.
...the following parsing rules apply: double quotes are treated as quotes; single quotes are ignored by the executable but legal in the execute() method.
... this means that in order to pass three command-line arguments (-c, -d, and -s) to the executable, you should format the args string as follows: err = file.execute(myfile, '"-c""-d""-s"', true); //technically, given the rules above, you could also pass the same //arguments with the following line, but the result is much less //readable: err = file.execute(myfile, "\"-c\"\"-d\"\"-s\"", true); also see the note about binaries on the macintosh platform in addfile.

A XUL Bestiary - Archive of obsolete content
the chrome url, which appears in place of the http url in pointers like the following global skin processing instruction: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> specifies a chrome to be loaded by the gecko rendering engine.
...so the following structure obtains: navigator/ content/ default/ navigator.xul ...
... locale/ us-en/ navigator.dtd to load chrome information stored in a new package directory like this, you can use the following chrome url, chrome://navigator/skin/mynewskin/newskin.css which in turn loads the graphics in that subdirectory as needed.
...for a widget like the menu that appears in the following example, menu is the element and both value and the id are attributes.

Extensions - Archive of obsolete content
for example, to add an item to the end of the tools menu, use the following: <menupopup id="menu_toolspopup"> <menuitem label="thesaurus"/> </menupopup> note that other extensions may be adding their own items into the same menus.
...for example, the following may be used to insert a command just after the 'select all' command: <popup id="contentareacontextmenu"> <menuitem label="select links" oncommand="thumbnails.selectalllinks();" insertafter="context-selectall"/> </popup> see firefox context menu for a list of the ids of the items found on the firefox context menu.
...the following are the most common properties that you can check.
... in the following example, the menuitem is hidden unless the target is an image or a link.

Panels - Archive of obsolete content
for example, the following panel displays a textbox for entering a name.
...for other types of elements, you need to use a different technique as in the following example.
...for instance, to attach the popup defined above to a label, use the following code: <label value="search" popup="search-panel"/> the result is a search button which opens a panel for entering the search term.
...for example, the following would open a panel underneath a button: panel.openpopup(button, "after_start", 0, 0, false, false); likewise, the openpopupatscreen method will open a panel at a specific screen position.

Positioning - Archive of obsolete content
the following assumes a left to right user interface.
... the following table shows the valid values, corresponding explicit (ie, 2 word) alignment values and an example of the alignment.
...for example, the following might be used with the above example to open the popup: menupopup.openpopup(label, "end_before", 0, 0, false, false); note that the position has been set to 'end_before', as above.
...in the following example, the menupopup has a 2ex margin above it, so when opened, the popup will be placed a distance of 2ex below the bottom of the button.

Adding Methods to XBL-defined Elements - Archive of obsolete content
for example, the following javascript function would be written as an xbl method like so: function getmaximum(num1,num2) { if (num1 <= num2) return num2; else return num1; } xbl: <method name="getmaximum"> <parameter name="num1"/> <parameter name="num2"/> <body> if (num1 &lt;= num2) return num2; else return num1; </body> </method> this function, getmaximum, returns the largest of the values, each pa...
...for example, the following code will probably fail: var element = document.createelement("my_element"); element.getmaximum() // this will fail by the way, it is safe to call methods from the constructor, other methods on the object and event handlers.
... the following example creates a row of buttons: <binding id="buttonrow"> <content> <button label="yes"/> <button label="no"/> <button label="sort of"/> </content> </binding> to refer to each button, you can use the getanonymousnodes() function, passing it a reference to the element the binding is bound to as the parameter.
...for example, we could move the show and hide buttons into the xbl file and do the following: example 1: source <binding id="labeledbutton"> <content> <xul:label xbl:inherits="value=title"/> <xul:label xbl:inherits="value"/> <xul:button label="show" oncommand="document.getbindingparent(this).showtitle(true);"/> <xul:button label="hide" oncommand="document.getbindingparent(this).showtitle(false);"/> </content> <implementation> <method name="showtitle"> <p...

Adding Properties to XBL-defined Elements - Archive of obsolete content
for example, the following field is given a default value equal to the current time: <field name="currenttime"> new date().gettime(); </field> properties sometimes you will want to validate the data that is assigned to a property.
...the following decribes what happens in a typical case: there are two elements, one called 'banana' and the other 'orange'.
...when the following line of script is executed: banana.size = orange.size; the onget script is called for the size property of the orange.
...the following example maps a property to an attribute on an element.

Creating a Skin - Archive of obsolete content
creating a custom skin package to create a skin, do the following: (if you are using firefox 1.5 or later, see manifest files instead of below) create a directory somewhere where you want to place the skin files.
... add a line to the file 'chrome/installed-chrome.txt of the following form: skin,install,url,file:///stuff/blueswayedshoes/ where the last part points to the directory you created.
... the following style rules added to findfile.css will cause the changes shown in the accompanying image.
...if following the example in this section, just copy the files to your new skin and change the urls accordingly.

Element Positioning - Archive of obsolete content
the following css properties can be used.
...the following example demonstrates this: example 2 : source view <window orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox> <button label="yes" flex="1"/> <button label="no"/> <button label="i really don't know one way or the other"/> </hbox> </window> the window will initially appear like in the image earlier.
...you can use the following values: start this positions elements at the left edge for horizontal boxes and at the top edge for vertical boxes.
...the following shows this attribute in use: example 6: source view <button label="push me please!" crop="right" flex="1"/> notice how the text on the button has had the right side of it cropped after the window is made smaller.

tree - Archive of obsolete content
(default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column.
... interfaces nsiaccessibleprovider, nsidomxultreeelement, nsidomxulmultiselectcontrolelement script examples to have alternating colors for each row, use the style rules like the following: treechildren::-moz-tree-row(selected) { background-color: #ffffaa; } treechildren::-moz-tree-row(odd) { background-color: #eeeeee; } treechildren::-moz-tree-row(odd, selected) { background-color: #ffffaa; } treechildren::-moz-tree-cell-text(selected) { color: #000000; } treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; } if using a content tree view, use the following to get ...
...the value of the id attribute for each of the selected rows of a tree: var idlist = []; var rangecount = tree.view.selection.getrangecount(); for (var i = 0; i < rangecount; i++) { var start = {}; var end = {}; tree.view.selection.getrangeat(i, start, end); for (var c = start.value; c <= end.value; c++) { idlist.push(tree.view.getitematindex(c).firstchild.id); } } the following returns a array of the indicies of the rows where the value is checked in a checkbox type column: function getcellchecked(tree, columnid) { var arr = []; var column = tree.columns.getnamedcolumn(columnid); for (var i = 0; i < tree.view.rowcount; i++) { if (tree.view.getcellvalue(i, column) == 'true') arr.push(i); } return arr; } to get the text value for a specific column (for example ...
...column 'age') from the currently focused row in the tree: var t = document.getelementbyid('mytree'); document.title = t.view.getcelltext(t.currentindex,t.columns.getnamedcolumn('age')); to select the checkbox and display the cell's text value, you can use code like the following.

window - Archive of obsolete content
it can have one of the following values: maximized the window is maximized, and occupies the full size of the screen.
...a filename following the system keyword in a doctype declaration may silently fail to load and the only error message will be an undefined entity error on the next xul element.
... to add a favicon to the address bar and browser tab (ie dialog is not a popup) then use the following code snippet to use the html namespace and link.
...xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <!-- icon from chrome --> <html:link rel="icon" href="chrome://myextension/content/path/to/favicon.png"/> <!-- from a remote site --> <html:link rel="icon" href="http://www.mozilla.org/favicon.ico"/> since firefox 3.6 the above listed code does not work correctly - it produces the following message: "warning: xul box for box element contained an inline link child, forcing all its children to be wrapped in a block".

XULRunner 1.8.0.1 Release Notes - Archive of obsolete content
the following directory is recommended: c:\program files\mozilla xulrunner\1.8.0.1 .
...the following directory is recommended: /opt/xulrunner/1.8.0.1 .
... windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.8.0.1\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --install-...
...app ~/desktop/myapplication.xpi the application will be installed to /applications/vendor/appicationname linux run the following command in a command prompt: /opt/xulrunner/1.8.0.1/xulrunner/xulrunner --install-app ~/desktop/myapplication.xpi the application will be installed to /usr/lib/vendor/applicationname known issues firewall software may identify all xul applications as the same application.

XULRunner 1.8.0.4 Release Notes - Archive of obsolete content
the following directory is recommended: c:\program files\mozilla xulrunner\1.8.0.4 .
...the following directory is recommended: /opt/xulrunner/1.8.0.4 .
... windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.8.0.4\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --ins...
...tall-app ~/desktop/myapplication.xpi the application will be installed to /applications/vendor/applicationname linux run the following command in a command prompt: /opt/xulrunner/1.8.0.4/xulrunner/xulrunner --install-app ~/desktop/myapplication.xpi the application will be installed to /usr/lib/vendor/applicationname known issues firewall software may identify all xul applications as the same application.

XULRunner 1.9.1 Release Notes - Archive of obsolete content
the following directory is recommended: c:\program files\mozilla xulrunner\1.9.1 .
...the following directory is recommended: /opt/xulrunner/1.9.1 .
... windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.9.1\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --install-ap...
...p ~/desktop/myapplication.xpi the application will be installed to /applications/vendor/applicationname linux run the following command in a command prompt: /opt/xulrunner/1.9.1/xulrunner/xulrunner --install-app ~/desktop/myapplication.xpi the application will be installed to /usr/lib/vendor/applicationname known issues firewall software may identify all xul applications as the same application.

XULRunner 1.9.2 Release Notes - Archive of obsolete content
the following directory is recommended: c:\program files\mozilla xulrunner\1.9.2 .
...the following directory is recommended: /opt/xulrunner/1.9.2 .
... windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.9.2\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --install-ap...
...p ~/desktop/myapplication.xpi the application will be installed to /applications/vendor/applicationname linux run the following command in a command prompt: /opt/xulrunner/1.9.2/xulrunner/xulrunner --install-app ~/desktop/myapplication.xpi the application will be installed to /usr/lib/vendor/applicationname known issues firewall software may identify all xul applications as the same application.

XULRunner 1.9 Release Notes - Archive of obsolete content
the following directory is recommended: c:\program files\mozilla xulrunner\1.9 .
...the following directory is recommended: /opt/xulrunner/1.9 .
... windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.9\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --install...
...-app ~/desktop/myapplication.xpi the application will be installed to /applications/vendor/applicationname linux run the following command in a command prompt: /opt/xulrunner/1.9/xulrunner/xulrunner --install-app ~/desktop/myapplication.xpi the application will be installed to /usr/lib/vendor/applicationname known issues firewall software may identify all xul applications as the same application.

Mozilla release FAQ - Archive of obsolete content
regarding shells, i would like to recommend the following: if you are using unix, use bash-family shells for the build because of the better control over redirection (in case you want to log errors and messages) if you are using win32, using the default shell cmd.exe (as opposed to 4dos or 4nt) will probably yield better results.
...this list will be updated with time, but (according to netscape.public.mozilla.general) the following platforms have been built successfully: solaris 2.4, 2.5, 2.6 freebsd 2.2, 3.0 linux/intel and alpha 2.0, 2.1 macos winnt 4.0 irix 5.3, 6.2, 6.3, 6.4 win95, win98 digital unix 4.0 netbsd openbsd bsdi hp/ux 9.05, 10.20, 11.0 (see 2.7) hurd .03 dg/ux mac os x i'm *still* having problems getting mozilla to build on my platform!
...please send stats to me in the following format: cpu/mhz, architecture, ram, disk type, os version, compiler version, build type, tree date -- build time example: 21164/533, alpha, 512m edo, ultra2 scsi, linux kernel 2.2.11, gcc 2.95, non-debug, 19 august 1999 cvs -- 25 minutes how do i run the binary on unix?
...mozilla has (at least) the following new features: xml support a highly configurable appearance (courtesy of xul) publicly available source code :) http compression exists on more platforms mathml support (somewhat limited at the moment) a significantly faster rendering engine better html support (css 1 and partial css 2, dom 1 and partial dom 2) plug-in jvm support tabbed browsing message filtering an irc c...

2006-11-03 - Archive of obsolete content
summary: mozilla.dev.builds - october 28th to november 3rd 2006 no such file or directory (build problem on winxp) november 2nd: kenoa complained that when he is compiling using cygwin on win32 he gets the following error no such file or directory1: /cygdrive/c/mozilla/mail/config/mozconfig client.mk:339: /cygdrive/c/mozilla/.mozconfig.mk: no such file or directory he claims that the file ".mozconfig" exists in /cygdrive/c/mozilla/mail/config/mozconfig the disable-crypto cause problem originally posted on november 2nd: gxk is building minimo using the code base from sept.
... when he builds using the disable.crypto option he encounters the following problem: no rule to make target `../../dist/lib/components/libpipboot.a', needed by `minimo'.
...he has created the following bug entry https://bugzilla.mozilla.org/show_bug.cgi?id=331404.
...paul reed responds to boris with the following explanation on why he is taking down one of two the linux build servers.

The First Install Problem - Archive of obsolete content
the following write-up describes how a plugin installer can write keys to the win32 system registry to enable gecko-based browsers to discover the plugin at runtime.
... add the following values to the newly created key -- some are string values (reg_sz), and some are actually subkeys.
... the mimetypes subkeys contain the following string (reg_sz) value: "description" -- this is the actual description of the mimetype, very much as it appears in the dll (e.g.
...for example, in our case, a prospective invocation might look like: <object classid="@mycompany.com/myapplication,version=5.01" data="myfile.typ" codebase="http://myurl.com/myplugin/myplugin.xpi" type="application/x-myapp"></object> the use of both "type" and "classid" attributes here offers the following user benefit: if there is another mimetype handler for application/x-myapp, only myapplication gets invoked.

Using the W3C DOM - Archive of obsolete content
unsupported dom-related properties the following ie proprietary document object properties are not supported in the w3c document object model: document.layers[] id_attribute_value document.all document.all.id_attribute_value document.all[id_attribute_value] the following form related properties (originally from internet explorer) are not supported in the w3c document object model: formname.inputname.value inputname.value formctrln...
...for example, the following short sample dynamically sets the left margin of a <div> element with an id of "inset" to half an inch: // in the html: <div id="inset">sample text</div> document.getelementbyid("inset").style.marginleft = ".5in"; note: internet explorer 5 through 7 have a flawed implementation of getelementbyid(), which returns the first element with a matching name or id (id versus name when using getelement...
... manipulating document style and content changing an element's style using the dom the following table describes standards-based methods for accessing and updating style rules defined for various html elements in a web page.
... the following examples show how to modify the text of a span element that already exists in the html file.

Browser Detection and Cross Browser Support - Archive of obsolete content
consider the following example: // wrong approach - do not use!
...a similar error can be seen in the following example: // wrong approach - do not use!
...in the following example, the branch tag is a.b.c.
...as we saw earlier, the vendor/version appear in the user agent string following the gecko version.

handler.enumerate() - Archive of obsolete content
syntax var p = new proxy(target, { enumerate(target) { } }); parameters the following parameter is passed to the enumerate method.
... interceptions this trap can intercept these operations: property enumeration / for...in: for (var name in proxy) {...} reflect.enumerate() invariants if the following invariants are violated, the proxy will throw a typeerror: the enumerate method must return an object.
... examples the following code traps for...in statements.
... var p = new proxy({}, { enumerate(target) { console.log('called'); return ['a', 'b', 'c'][symbol.iterator](); } }); for (var x in p) { // "called" console.log(x); // "a" } // "b" // "c" the following code violates the invariant.

Reference - Archive of obsolete content
i checked this by doing alert(math.constructor) //shows that object is its constructor alert(object.constructor) //shows that function is its constructor alert(function.constructor) //shows that function is its constructor note : the function.constructor seems to keep on refering to itself, if you do the following you get same results which suggests that this is indeed the top level object.
... alert(function.constructor.constructor) alert(function.constructor.constructor.constructor.constructor) function == object however the following statement suggests that function is object.
...which still suggests that function is object object.prototype.myfunction = function() {}; o = new function(); alert(o.myfunction); //available in function o = new object(); alert(o.myfunction); //available in object but the following statement is again quite shocking to all the above if we create a prototype method for function , and create instances of function and object it shows that the method is only available in function.
...while also holding in account the previous example where it was avalable in both instances when prototyping object it should be : function->object->instance or (function=object)->instance and ofcourse function == object return false ;) and the following statements also tells me that function == object although math is only an instance of object...

Windows Media in Netscape - Archive of obsolete content
the following javascript illustrates one approach using object detection of activexobject and geckoactivexobject to determine if the windows media activex control is supported and available for use.
...for the sake of brevity, we've made the following code snippet shorter to illustrate the relevant points about the api: var player; try { if(window.activexobject) { player = new activexobject("wmplayer.ocx.7"); } else if (window.geckoactivexobject) { player = new geckoactivexobject("wmplayer.ocx.7"); } } catch(e) { // handle error -- no wmp 7 or 9 control // can use wmp 6 also if necessary, but this is legacy software nowaday...
...for example if (window.activexobject) { // internet explorer only script } server-side detection using user-agent strings netscape 7.1's user agent string on windows has the general pattern: mozilla/5.0 (windows; u; <em>operating system version</em>; <em>language</em>; rv:1.4) gecko/20030624 netscape/7.1 (ax<em>[;optional comments]</em>) the "vendor comment" (ax) following the "vendor version" netscape/7.1 is an indicator that the browser supports the windows media player activex control.
...for example, the following uses dhtml behaviors to associate a set of behaviors with a span element, which is then interrogated for its version number (the script attempts to verify that the windows media player control is at version 9): <span style="behavior:url(#default#clientcaps)" id="cc"></span> <script language=javascript> var cv = cc.getcomponentversion( "{6bf52a52-394a-11d3-b153-00c04f79faa6}", "componentid" )...

Archive of obsolete content
list of former mozilla-based applications the following is a list of all known applications that at one point used mozilla technologies or that are no longer being actively maintained.
... list of mozilla-based applications the following is a list of all known active applications that are built using mozilla technologies.
... table reflow internals key: tamarin tracing build documentation the following instructions are for obtaining and building the tamarin tracing source code.
...due to a limitation of the present implementation of nspr io on nt, programs must follow the following guideline: using ssh to connect to cvs using web standards in your web pages using workers in extensions this article shows you how to use worker threads in extensions to perform tasks in the background without blocking the user interface.

Building up a basic demo with A-Frame - Game development
add the following html before the <a-cube> element: <a-sky color="#dddddd"></a-sky> at this point, if you save the code and refresh your browser you can already see the cube on the screen with our custom background: here's the code we have created so far: you can also check it out on github.
...edit the <a-entity> defining the torus to look like the following: <a-entity geometry=" primitive: torus; radius: 1; radiustubular: 0.1; segmentstubular: 12;" material=" color: #eaeff2; roughness: 0.1; metalness: 0.5;" rotation="10 0 0" position="-3 1 0"> </a-entity> in the new material attribute, we set up the color of the material, then its roughness (a rougher material will scatter reflected light in more directions tha...
...add a new <script> element at the end of the <body> element, just after the <a-scene> element, then add the following javascript code inside it: var scene = document.queryselector('a-scene'); var cylinder = document.createelement('a-cylinder'); cylinder.setattribute('color', '#ff9500'); cylinder.setattribute('height', '2'); cylinder.setattribute('radius', '0.75'); cylinder.setattribute('position', '3 1 0'); scene.appendchild(cylinder); we're getting a reference to the scene handler first, then we create the cylinder element as an a-frame entity.
...add the following <a-animation> element to your torus: <a-entity geometry=" primitive: torus; radius: 1; radiustubular: 0.1; segmentstubular: 12;" material=" color: #eaeff2; roughness: 0.1; metalness: 0.5;" rotation="10 0 0" position="-3 1 0"> <a-animation attribute="scale" to="1 0.5 1" direction="alternate" dur="2000" repeat="indefinite" easing="linea...

Animations and tweens - Game development
next, we will load the spritesheet — put the following line at the bottom of your preload() function: game.load.spritesheet('ball', 'img/wobble.png', 20, 20); instead of loading a single image of the ball we can load the whole spritesheet — a collection of different images.
... loading the animation next up, go into your create() function, find the line that loads the ball sprite, and below it put the call to animations.add() seen below: ball = game.add.sprite(50, 250, 'ball'); ball.animations.add('wobble', [0,1,0,2,0,1,0,2,0], 24); to add an animation to the object we use the animations.add() method, which contains the following parameters the name we chose for the animation an array defining the order in which to display the frames during the animation.
...add the following function just before your closing </script> tag: function ballhitpaddle(ball, paddle) { ball.animations.play('wobble'); } the animation is played every time the ball hits the paddle.
...go to your ballhitbrick() function, find your brick.kill(); line, and replace it with the following: var killtween = game.add.tween(brick.scale); killtween.to({x:0,y:0}, 200, phaser.easing.linear.none); killtween.oncomplete.addonce(function(){ brick.kill(); }, this); killtween.start(); let's walk through this so you can see what's happening here: when defining a new tween you have to specify which property will be tweened — in our case, instead of hiding the bricks instantly when hi...

Visual JS GE - Game development
installing modules navigate to server_instance/, then in the node.js command prompt or console enter the following installation commands: npm install mysql npm install delivery npm install express npm install mkdirp npm install socket.io npm install nodemailer@0.7.0 setting up config.js you will find config.js in the server_instance folder: all node.js applications use the same folder — server_instance.
...w: module.exports = { version : "0.5", path_of_node_app : "d:/path_to_server_instance_folder/server/" , // edit here path_of_www : "d:/xamp/htdocs/project_instance/", // path_to_www edit here editor_port : "1013", reg_path : "users/", account_port : 3666 , destroy_session_after_x_mseconds : 20000, }; local node.js application tools (uses in developer mode only) the following section provides information about the tools involved in visual-js game engine.
... after this has finished processing, restart the web page by entering the following in the console: resource.test_res.
...contains the following tools.

Images, media, and form elements - Learn web development
sizing images as you already know from following these lessons, everything in css generates a box.
... if you are following these lessons in order then you may not have looked at layout yet.
... to force the image to stretch to fill the grid cell it is in, you'd have to do something like following: img { width: 100%; height: 100%; } this would however stretch the image, so probably isn't what you'd want to do.
...t, textarea { box-sizing: border-box; padding: 0; margin: 0; } other useful settings in addition to the rules mentioned above, you should also set overflow: auto on <textarea>s to stop ie showing a scrollbar when there is no need for one: textarea { overflow: auto; } putting it all together into a "reset" as a final step, we can wrap up the various properties discussed above into the following "form reset" to provide a consistent base to work from.

Responsive design - Learn web development
for example, the following media query tests to see if the current web page is being displayed as screen media (therefore not a printed document) and the viewport is at least 800 pixels wide.
... the following example demonstrates a simple responsive design using media queries and a flexible grid.
...this is still an approach used today, and in most stylesheets, you will find the following css somewhere: img { max-width: 100%; } there are obvious downsides to this approach.
... the viewport meta tag if you look at the html source of a responsive page, you will usually see the following <meta> tag in the <head> of the document.

Fundamental text and font styling - Learn web development
the list of actual web safe fonts will change as operating systems evolve, but it's reasonable to consider the following fonts web safe, at least for now (many of them have been popularized thanks to the microsoft core fonts for the web initiative in the late 90s and early 2000s): name generic type notes arial sans-serif it's often considered best practice to also add helvetica as a preferred alternative to arial as, although their font faces are almost identical, helvetica is con...
... a font-family example let's add to our previous example, giving the paragraphs a sans-serif font: p { color: red; font-family: helvetica, arial, sans-serif; } this gives us the following result: <h1>tommy the cat</h1> <p>well i remember it as though it were a meal ago...</p> <p>said tommy the cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat.
...once you've become used to using the above, you should also explore the following: font styles: font-variant: switch between small caps and normal font alternatives.
...these are written in the following order: font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family.

How do I use GitHub Pages? - Learn web development
here's what you'd type if you've put your website in a directory called test-site on your desktop: cd desktop/test-site when the command line is pointing inside your website directory, type the following command, which tells the git tool to turn the directory into a git repository: git init an aside on command line interfaces the best way to upload your code to github is via the command line — this is a window where you type in commands to do things like create files and run programs, rather than clicking inside a user interface.
...your screen should look like this: click create repository; this should bring you to the following page: uploading your files to github on the current page, you are interested in the section …or push an existing repository from the command line.
...the command should look something like this: git remote add origin https://github.com/chrisdavidmills/my-repository.git next, type the following two commands, pressing enter after each one.
...then, you need to enter the following commands (pressing enter after each one) to push those changes to github: git add --all git commit -m 'another commit' git push you can replace another commit with a more suitable message to describe what change you just made.

What are browser developer tools? - Learn web development
(an added bonus: this method straight-away highlights the code of the element you right-clicked.) the inspector: dom explorer and css editor the developer tools usually open by default to the inspector, which looks something like the following screenshot.
...in the following image, the highlight on the number 18 shows that the line has a breakpoint set.
... this will give you a window like the following: to see what happens, try entering the following snippets of code into the console one by one (and then pressing enter): alert('hello!'); document.queryselector('html').style.backgroundcolor = 'purple'; const mywordmark = document.createelement('img'); mywordmark.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png'); docume...
...nt.queryselector('h1').appendchild(mywordmark); now try entering the following incorrect versions of the code and see what you get.

Basic native form controls - Learn web development
the following screenshot shows default, focused and disabled text input types in firefox 71 and safari on macos and in chrome 79 and edge 18 on windows 10.
... the following screenshots show default, focused and disabled checkboxes in firefox 71 and safari 13 on macos and chrome 79 and edge 18 on windows 10: note: any checkboxes and radio buttons with the checked attribute on load match the :default pseudo class, even if they are no longer checked.
...<ul> <li> <label for="soup">soup</label> <input type="radio" id="soup" name="meal" value="soup" checked> </li> <li> <label for="curry">curry</label> <input type="radio" id="curry" name="meal" value="curry"> </li> <li> <label for="pizza">pizza</label> <input type="radio" id="pizza" name="meal" value="pizza"> </li> </ul> </fieldset> the following screenshots show unchecked and checked radio buttons, radio buttons that have focus, and disabled unchecked and checked radio buttons — on firefox 71 and safari 13 on macos and chrome 79 and edge 18 on windows 10.
... the following examples show default, focused, and disabled button input types — in firefox 71 and safari 13 on macos and chrome 79 and edge 18 on windows 10.

The HTML5 input types - Learn web development
the following firefox for android keyboard screenshot provides an example: due to the wide variety of phone number formats around the world, this type of field does not enforce any constraints on the value entered by a user (this means it may include letters, etc.).
... the following screenshot (from firefox for android) provides an example: with the number input type, you can constrain the minimum and maximum values allowed by setting the min and max attributes.
...the last minute of the previous millenium can be expressed in the following different ways, for example: 1999/12/31, 23:59 or 12/31/99t11:59pm.
...the following screenshot taken on firefox for macos provides an example: and here is a live example for you to try out: the value returned is always a lowercase 6-value hexidecimal color.

How to build custom form controls - Learn web development
if you want to learn more about this topic, you should check out the following helpful resources: uxmatters.com uxdesign.com the ux design section of smashingmagazine note: also, in most systems there is a way to open the <select> element with the keyboard to look at all the available choices (this is the same as clicking the <select> element with a mouse).
...the following is just an example of what is possible, and will match the screenshot at the beginning of this article.
... warning: the following is educational code, not production code, and should not be used as-is.
...the features we plan to use are the following: classlist addeventlistener() foreach queryselector() and queryselectorall() beyond the availability of those specific features, there is still one issue remaining before starting.

CSS basics - Learn web development
(if you haven't been following our project, pause here to read dealing with files and html basics.) open your index.html file.
... paste the following line in the head (between the <head> and </head> tags): <link href="styles/style.css" rel="stylesheet"> save index.html and load it in your browser.
... add the following lines (shown below), replacing the font-family assignment with your font-family selection from what will your website look like?.
... following that, we set the heading text to be the same color as the html background color.

Choosing the right approach - Learn web development
single delayed operation repeating operation multiple sequential operations multiple simultaneous operations no yes no (unless it is the same one) no code example the following function creates a new date() object, extracts a time string out of it using tolocaletimestring(), and then displays it in the ui.
... single delayed operation repeating operation multiple sequential operations multiple simultaneous operations no no yes see promise.all(), below code example the following code fetches an image from the server and displays it inside an <img> element; see it live also, and see also the source code: fetch('coffee.jpg') .then(response => response.blob()) .then(myblob => { let objecturl = url.createobjecturl(myblob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); }) .catch(e => { console.log('there has bee...
... single delayed operation repeating operation multiple sequential operations multiple simultaneous operations no no no yes code example the following example fetches several resources from the server, and uses promise.all() to wait for all of them to be available before then displaying all of them — see it live, and see the source code: function fetchanddecode(url, type) { // returning the top level promise, so the result of the entire chain is returned out of the function return fetch(url).then(response => { // depending on what ty...
... single delayed operation repeating operation multiple sequential operations multiple simultaneous operations no no yes yes (in combination with promise.all()) code example the following example is a refactor of the simple promise example we saw earlier that fetches and displays an image, written using async/await (see it live, and see the source code): async function myfetch() { let response = await fetch('coffee.jpg'); let myblob = await response.blob(); let objecturl = url.createobjecturl(myblob); let image = document.createelement('img'); image.src = objecturl; ...

Introducing asynchronous JavaScript - Learn web development
that means that the following (pseudocode) wouldn't work: let response = fetch('myimage.png'); let blob = response.blob(); // display your image blob in the ui somehow that's because you don't know how long the image will take to download, so when you come to run the second line it will throw an error (possibly intermittently, possibly every time) because the response is not yet available.
...the following example is fairly similar to what we've seen before (see it live, and the source).
... it worked :) if this confuses you, then consider the following smaller example: console.log("registering click handler"); button.addeventlistener('click', () => { console.log("get click"); }); console.log("all done"); this is very similar in behavior — the first and third console.log() messages will be shown immediately, but the second one is blocked from running until someone clicks the mouse button.
... to see this in action, try taking a local copy of our example, and changing the fourth console.log() call to the following: console.log ('all done!

Functions — reusable blocks of code - Learn web development
the above function for example calls the random() function three times, which is defined by the following code: function random(number) { return math.floor(math.random()*number); } we needed this function because the browser's built-in math.random() function only generates a random decimal number between 0 and 1.
...you generally use an anonymous function along with an event handler, for example the following would run the code inside the function whenever the associated button is clicked: const mybutton = document.queryselector('button'); mybutton.onclick = function() { alert('hello'); } the above example would require there to be a <button> element available on the page to select and click.
...in the javascript console, enter the following command: output(x); you should see the value of variable x output to the screen.
... now try entering the following in your console output(y); output(z); both of these should return an error along the lines of "referenceerror: y is not defined".

JavaScript object basics - Learn web development
try entering the following line below the javascript code that's already in your file, then saving and refreshing: const person = {}; now open your browser's javascript console, enter person into it, and press enter/return.
...i\'m ' + this.name[0] + '.'); } }; after saving and refreshing, try entering some of the following into the javascript console on your browser devtools: person.name person.name[0] person.age person.interests[1] person.bio() person.greeting() you have now got some data and functionality inside your object, and are now able to access them with some nice simple syntax!
...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 mydataname = 'height'; let mydatavalue = '1.75m'; person[mydataname] = mydatavalue; now try saving and refreshing, and entering the following into your text input: person.height adding a property to an object using the method above isn't possible with dot notation, which can only accept a literal member name, n...
...try entering the following into your javascript console: const mynotification = new notification('hello!'); again, we'll look at constructors in a later article.

Client-Server Overview - Learn web development
both static and dynamic websites (discussed in the following sections) use exactly the same communication protocol/patterns.
...the header contains information like the following: the first line includes the response code 200 ok, which tells us that the request succeeded.
... for example, consider the following django (python) code that maps two url patterns to two view functions.
... in a following module we'll help you choose the best web framework for your first site.

Routing in Ember - Learn web development
to do this you’ll need to enter the following commands into your terminal, inside the root directory of your app: ember generate route index ember generate route completed ember generate route active the second and third commands should have not only generated new files, but also updated an existing file, app/router.js.
... it contains the following contents: import emberrouter from '@ember/routing/router'; import config from './config/environment'; export default class router extends emberrouter { location = config.locationtype; rooturl = config.rooturl; } router.map(function() { this.route('completed'); this.route('active'); }); the highlighted lines were added when the 2nd and 3rd commands above were run.
...add the following below the existing getters: get completed() { return this.todos.filter(todo => todo.iscompleted); } models now we need to add models to our route javascript files to allow us to easily return specific data sets to display in those models.
... go back to todomvc/app/components/footer.hbs, and find the following bit of markup: <a href="#">all</a> <a href="#">active</a> <a href="#">completed</a> update it to <linkto @route='index'>all</linkto> <linkto @route='active'>active</linkto> <linkto @route='completed'>completed</linkto> <linkto> is a built-in ember component that handles all the state changes when navigating routes, as well as setting an "active" class on any link that matches the url, in case...

Accessibility in React - Learn web development
let's see this in action; put the following useeffect() call just above the return statement in the body of todo(), and pass into it a function that logs the words "side effect" to your console: useeffect(() => { console.log("side effect"); }); to illustrate the difference between the main render process and code run inside useeffect(), add another log – put this one below the previous addition: console.log("main render"); now, ope...
... paste the following code near the top of todo.js, above your todo() function.
...add it to the top of your app.js file, just below the imports: function useprevious(value) { const ref = useref(); useeffect(() => { ref.current = value; }); return ref.current; } now add the following, above the return statement inside the app() function: const prevtasklength = useprevious(tasks.length); here we are invoking useprevious() to track the length of the tasks state, like so: note: since we're now utilizing useprevious() in two files, a good efficiency refactor would be to move the useprevious() function into its own file, export it from that file, and import it where you need i...
... add the following into the body of your app() function, just below your previous additions: useeffect(() => { if (tasks.length - prevtasklength === -1) { listheadingref.current.focus(); } }, [tasks.length, prevtasklength]); we only try to focus on our list heading if we have fewer tasks now than we did before.

Componentizing our React app - Learn web development
the following commands make a components directory and then, within that, a file called todo.js.
...in app.js, add the following line near the top of the file to import todo: import todo from "./components/todo"; with this component imported, you can replace all of the <li> elements in app.js with <todo /> component calls.
...let's try the following instead of what we have already: const tasklist = props.tasks.map(task => <todo />); look again at your app; now our tasks look more like they used to, but they’re missing the names of the tasks themselves.
...run this command in your terminal, taking care that you're in the root directory of your app: touch src/components/form.js src/components/filterbutton.js the <form /> open components/form.js and do the following: import react at the top of the file, like we did in todo.js.

Beginning our React todo list - Learn web development
our app should fulfill the following stories: as a user, i can read a list of tasks.
... then, copy and paste the following commands into your terminal to delete some unneeded files.
... the jsx copy the following snippet to your clipboard, then paste it into app.js so that it replaces the existing app() function: function app(props) { return ( <div classname="todoapp stack-large"> <h1>todomatic</h1> <form> <h2 classname="label-wrapper"> <label htmlfor="new-todo-input" classname="label__lg"> what needs to be done?
... implementing our styles paste the following css code into src/index.css so that it replaces what's currently there: /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; outline-offset: 0; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: vis...

Deployment and next steps - Learn web development
note: the following section could be applied to any client-side static web site requiring a build step, not just svelte apps.
...in our case we will tell git to exclude files in the node_modules directory by creating a .gitignore file in the root folder of your local project, with the following content: node_modules/ now let's go back to gitlab.
... create a .gitlab-ci.yml file inside your project's root and give it the following content: image: node:latest pages: stage: deploy script: - npm install - npm run build artifacts: paths: - public only: - master here we are telling gitlab to use an image with the latest version of node to build our app.
...do this by running the following commands: > git add public/index.html > git add .gitlab-ci.yml > git commit -m "added .gitlab-ci.yml file and fixed index.html absolute paths" > git push counting objects: 5, done.

Vue conditional rendering: editing existing todos - Learn web development
copy the following code into that file: <template> <form class="stack-small" @submit.prevent="onsubmit"> <div> <label class="edit-label">edit name for &quot;{{label}}&quot;</label> <input :id="id" type="text" autocomplete="off" v-model.lazy.trim="newlabel" /> </div> <div class="btn-group"> <button type="button" class="btn" @click="oncancel"> cancel <span class="visua...
... first of all add v-if="!isediting" to the root <div> in your todoitem component, <div class="stack-small" v-if="!isediting"> next, below that <div>'s closing tag add the following line: <to-do-item-edit-form v-else :id="id" :label="label"></to-do-item-edit-form> we also need to import and register the todoitemeditform component, so we can use it inside this template.
... add the following new methods to your app.vue's component object, below the existing methods inside the methods property: deletetodo(todoid) { const itemindex = this.todoitems.findindex(item => item.id === todoid); this.todoitems.splice(itemindex, 1); }, edittodo(todoid, newlabel) { const todotoedit = this.todoitems.find(item => item.id === todoid); todotoedit.label = newlabel; } next, we'll add the even...
... so, let's implement the fix: remove the following line from inside our data() property: isdone: this.done, add the following block below the data() { } block: computed: { isdone() { return this.done; } }, now when you save and reload, you'll find that the problem is solved — the checkbox state is now preserved when you switch between todo item templates.

Handling common HTML and CSS problems - Learn web development
the following example shows date and time inputs: <form> <div> <label for="date">enter a date:</label> <input id="date" type="date"> </div> <div> <label for="time">enter a time:</label> <input id="time" type="time"> </div> </form> the output of this code is as follows: hidden example label { float: left; width: 30%; text-align: right; } input { ...
... put the following code into the head of your html document, just before the opening <style> tag: <script type="text/javascript" src="mootools-core-1.6.0.js"></script> <!--[if (gte ie 6)&(lte ie 8)]> <script type="text/javascript" src="selectivizr-min.js"></script> <![endif]--> if you try running this in an old version of ie, it should work fine.
...as an example, the following query will select the last 2 versions of all major browsers and versions of ie above 9.
... as an example, we entered the following code: body { display: flex; } we highlighted it and ran the autoprefixer command, and it replaced it with this: body { display: -webkit-box; display: -ms-flexbox; display: flex; } layout issues another problem that might come up is differences in layouts between browsers.

Learn web development
random glossary entry semantics in programming, semantics refers to the meaning of a piece of code — for example "what effect does running that line of javascript have?", or "what purpose or role does that html element have" (rather than "what does it look like?".) topics covered the following is a list of all the topics we cover in the mdn learning area.
... to copy the learning area repo to a folder called learning-area in the current location your command prompt/terminal is pointing to, use the following command: git clone https://github.com/mdn/learning-area you can now enter the directory and find the files you are after (either using your finder/file explorer or the cd command).
... you can update the learning-area repository with any changes made to the master version on github with the following steps: in your command prompt/terminal, go inside the learning-area directory using cd.
... for example, if you were in the parent directory: cd learning-area update the repository using 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.

Gecko info for Windows accessibility vendors
in total, gecko supports the following window classes: mozillauiwindowclass - root ui window, at the root of the window hierarchy mozillacontentwindowclass -- root document window mozillacontentframewindowclass - root of a subdocument created by a <frame> or <iframe> element mozillahiddenwindowclass - ignore these windows, they are used to help manage other windows mozillawindowclass - general filler window, a c...
... 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: get_acchelp get_acchelptopic put_accname put_accvalue we do not currently support the visual basic (idispatch) bindings for iaccessible.
...the following html tags are exposed as bstr's: abbr, acronym, blockquote, dd, dl, dt, form, frame, h1, h2, h3, h4, h5, h6, iframe, q, tbody, tfoot, thead in addition, an html list uses the bullet bstr role to expose bullets and numbers that are automatically inserted into the formatting by gecko.
... positional descriptions are supported the accdescription field is overriden for the following roles: role_listitem, role_menuitem, role_radiobutton, role_pagetab and role_outlineitem for everything other than outline item, the positional description is in the form "n of m" where n is an integer indicating the position within other similar objects in a group, and m represents the number of objects in that group.

Command line options
in general, the syntax is as follows: application -option -option "argument" -option argument examples the following examples show the use of the "-profilemanager" command, which will open the profile manager prior to starting firefox or thunderbird: windows select run from windows start menu.
... enter the following command: firefox -profilemanager mac os x go to applications > utilities.
... open terminal and enter the following command: cd /applications/firefox.app/contents/macos ./firefox -profilemanager if you use firefox nightly, you can enter: cd /applications/firefoxnightly.app/contents/macos ./firefox -profilemanager linux open terminal and enter the following command: cd thunderbird installation directory ./thunderbird -profilemanager the example above invokes the "-profilemanager" command line option with mozilla's thunderbird mail client.
...this can be used to suppress the migration wizard at startup by loading the following override.ini.

Debugging Frame Reflow
it provides the following information for each frame at the start of its reflow reflow reason available width, available height computed width, computed height the previous and the next frame in flow and a count number.
... when the frame's reflow is finished the following information is displayed : reflow metric (desired) width, height max.
... log file analysis the log file for a simple table like <!doctype html public "-//w3c//dtd html 4.01 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body> <table width="100"> <tbody> <tr> <td>foo</td> </tr> </tbody> </table> </body> </html> will create the following log: vp 00b97c30 r=0 a=9180,4470 c=9180,4470 cnt=856 scroll 00b97ee0 r=0 a=9180,4470 c=9180,4470 cnt=857 scroll 00b97ee0 r=0 a=9180,4470 c=9180,4470 cnt=858 canvas 00b97c6c r=0 a=9180,uc c=9180,4470 cnt=859 area 02d7afe4 r=0 a=9180,uc c=9180,uc cnt=860 text 02d7b150 r=0 a=9180,uc c=uc,uc cnt=861 text 02d7b150 d=0,0 block 02d7b210 r=0 a=9180,uc c=8940,uc cnt=862 block 02d7b2...
...the display of the following frames can be turned on by adding a line with the frame name and 1 or turned off by adding a line with the frame name and 0: short name layout tag area area block block br br bullet bullet button gfxbuttoncontrol hr hr framei ...

HTTP logging
copy and paste the following lines one at a time into the command prompt window.
... copy and paste the following commands into the shell one at a time.
... copy and paste the following commands into the terminal window, hitting the return key after each line.
... copy and paste the following line into the "run" command window and then press enter: for 32-bit windows: "c:\program files (x86)\mozilla firefox\firefox.exe" -moz_log=timestamp,rotate:200,nshttp:5,cache2:5,nssockettransport:5,nshostresolver:5,cookie:5 -moz_log_file=%temp%\log.txt for 64-bit windows: "c:\program files\mozilla firefox\firefox.exe" -moz_log=timestamp,rotate:200,nshttp:5,cache2:5,nssockettransport:5,n...

The Firefox codebase: CSS Guidelines
using css variables adding new variables before adding new css variables, please consider the following questions: is the variable value changed at runtime?
...theme css the following directories also contain css: browser/base/content/ toolkit/content/ these directories contain content css, that applies on all platforms, which is styling deemed to be essential for the browser to behave correctly.
...in general, the following colors are used: -moz-field: textbox or field background colors, also used as the background color of listboxes or trees.
...in the following example, -moz-mac-yosemite-theme targets macos 10.10 and higher, so it should be privileged over the styling for macos 10.9.

Creating Custom Events That Can Pass Data
(see bug 427537) requirements in order to do this you must be able to do all of the following: download mozilla source code build mozilla creating custom firefox extensions with the mozilla build system.
... you need to make the following two modifications: around line 1000: ns_define_classinfo_data({truncated name}, nsdomgenericsh, dom_default_scriptable_flags) around line 2900: dom_classinfo_map_begin({truncated name}, nsidom{truncatedname}) dom_classinfo_map_entry(nsidom{truncated name}) dom_classinfo_event_map_entries dom_classinfo_map_end remember, {truncated name} is the same as above.
...your event in order for your event to work you must do the following: create a scriptable interface called nsidom{youreventname} inheriting from nsidomevent.
...var event = document.createevent("nsdommyevent"); event.initevent("nsdommyevent", true, true); window.dispatchevent(event); dispatching your event in c++ the following shows how to dispatch your event in c++: nscomptr<nsiwindowwatcher> wwatcher (do_getservice("@mozilla.org/embedcomp/window-watcher;1")); // the window watcher will be able to give me a handle to the window nscomptr<nsidomwindow> awindow; // a handle to the window nscomptr<nsidomdocument> adoc; // a handle to the document nscomptr<nsidomeventtarget> twindow; // the ...

Commenting IDL for better documentation
happily, following these recommendations will also help ensure your comments are extremely human-readable, too.
...but by following the guidelines here, you can help make sure that our tools can generate a "good start" version of the documentation for your interfaces, and that the writers will be able to easily figure out what the tools are not able to do automatically.
... comment format doxygen supports several comment formats; for style and consistency reasons, we use the following: /** * */ note the two asterisks ("**") on the first line of the comment.
...following the rules below will ensure that our tools are able to produce the best possible results, and will have the added bonus of making your comments easier to read!

Obsolete Build Caveats and Tips
to get this code, do the following: # pull the mozilla source to the folder 20src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-2.0/ 20src cd 20src mozilla-1.9.2 (firefox 3.6) code for the firefox 3.6 (gecko 1.9.2) release lives in releases/mozilla-1.9.2.
... to get this code, do the following: # pull the mozilla source to the folder 192src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-1.9.2/ 192src cd 192src mozilla-1.9.1 (firefox 3.5) code for the firefox 3.5 (gecko 1.9.1) release lives in releases/mozilla-1.9.1.
... to get this code, do the following: # pull the mozilla source to the folder 191src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-1.9.1/ 191src cd 191src note: starting with gecko 5.0, you can actually build firefox without a .mozconfig file.
... unsupported sdks the windows sdk for windows server 2008 is not supported, and has been found to cause the following problems: breaks the vcvars32.bat file from visual studio 2008 no longer sets the correct path for the .net framework causes an invalid path which breaks the mozilla build if you have the windows server 2008 sdk installed, uninstall it.

Browser API
navigation methods the following navigation methods allow navigation through the browsing history of the <iframe>.
... audio-related methods the following methods allow direct control of sound in the browser element.
...the following methods are used to deal with those events: the <iframe> gains support for the methods of the eventtarget interface addeventlistener(), removeeventlistener(), and dispatchevent().
...the following new events can be listened for: mozbrowseractivitydone sent when something inside the browser <iframe> triggers a web activity, and that web activity's message is consumed by the receiving app.

Downloads.jsm
alternatively, may be an nsiuri, a downloadsource object, or an object with the following properties: url: string containing the uri for the download source.
...alternatively, may be an nsifile, a downloadtarget object, or an object with the following properties: path: string containing the path of the target file.
...you may pass an object with a subset of the following fields: isprivate: optional indicates whether the download originated from a private window.
...in general, you should be aware of the following highlights: there is no difference between active downloads and finished downloads.

Sqlite.jsm
the following sections detail the api of an opened connection instance.
... these functions receive the following arguments: readonly (optional) if true the clone will be read-only, default is false.
... these functions receive the following arguments: sql (required) string sql statement to execute.
... this function receives the following arguments: func the function defining the transaction body.

Index
17 localization sign-off reviews guide, localization, mozilla this article presents an overview of why we do sign-off reviews of localizations, the details on the criteria used for the sign-off reviews, and the process for requesting a review and for following its progress.
... 18 localization technical reviews guide, localization, mozilla this guide provides details on what a localization technical review is, what criteria are used for the technical reviews, and the process for requesting one and following its progress.
...with that document, users can see immediately two localized files in their user interface by following closely and carefully the steps to create a language pack or a binary file that is ready for installation.
...the following list contains links to pages that highlight steps that can be taken to make web content localizable.

Localization content best practices
for example, in english all the following begin with the same clause: the url of this feed is invalid; the url of this feed cannot be reached; the url of this feed cannot be parsed.
...for example, if you're adding a new menu item in settings on android, don't use the same string for the menu item and the following screen header.
...instead, you should use the following strings # localization note(privacy-text): {{link}} will be replaced at run-time # by an active link.
... feedback from l10n-drivers is not necessary for each landing involving strings, as long as you're following the basic rules described in this document.

Localizing extension descriptions
the following example demonstrates this (most normal manifest properties have been removed for brevity): <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>tabsidebar@blueprintit.co.uk</em:id> <em:localized> <description> <em:locale>de-de</em:local...
... add the following line to each of your localization properties files (where extension_id matches your extension id (<em:id> from install.rdf) and localized_description is the description of your extension that you want to appear in the given language): extensions.extension_id.description=localized_description if you do not currently have one, create a default preferences file.
... add the following line to it (where extension_id matches your application id from install.rdf and path_to_localization_file is the chrome path to the localization file you added to earlier): pref("extensions.extension_id.description", "path_to_localization_file"); localizable strings the following add-on metadata can be localized using this process: name description creator homepageurl localizable lists in cases where multiple values can exist, a numeric index is appended to the end of the preference name: extensions.extension_id.contributor.1=first_localized_contributor_name extensions.extension_id.contributor.2=second_localized_contributor_name extensions.extension_id.contributor.3=thrid_localized_contributor_name pref("extensions.extension_id.contributor.1", "path_to_localiza...
...tion_file"); pref("extensions.extension_id.contributor.2", "path_to_localization_file"); pref("extensions.extension_id.contributor.3", "path_to_localization_file"); the following add-on metadata can be localized using this process: developer translator contributor ...

Basics
this demo has been made to illustrate the following aspects.
...you can also make displayed equations, such as the following ones: x → maps to y = f n ⁡ ( x ) = ( 1 + 1 x n ) n ∫ a b f ( x ) d x = b - a 6 [ f ( a ) + 4 f ( a + b 2 ) + f ( b ) ] - ( b - a ) 5 4 !
...the following example shows the i-th step of the multiplication of a matrix a by a vector x (notice how ai1 , ...
...incrementinput('input21',-1);" title="decrease input">-</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; right size: <a class="control" href="javascript:incrementinput('input12', 1);" title="increase input">+</a> <a class="control" href="javascript:incrementinput('input12',-1);" title="decrease input">-</a> <br/> (click these control buttons to see their effects.) </div> <p> each entry of the following matrix represents <math> <msup><mrow><mo>(</mo><mi>x</mi><mo>+</mo><mi>y</mi><mo>)</mo></mrow><mi>n</mi></msup> </math> for some <i>n</i>.

Fonts for Mozilla 2.0's MathML engine
the fonts may be installed by extracting the font files (which have the .otf extension) from the zip archive, then following instructions for microsoft windows, or copying the files to a ~/library/fonts folder on mac os x, or to a ~/.fonts/ directory (which may need to be created) on unix/linux systems.
...the following fonts are not necessary when the above fonts are installed, but are worth noting because of their unicode support for many mathematical characters.
...mathml font selection with css you can get these fonts from the mathml-fonts add-on ; the xpi is just a zip archive that you can fetch and extract for example with the following command: wget https://addons.mozilla.org/firefox/downloads/latest/367848/addon-367848-latest.xpi -o mathml-fonts.zip; \ unzip mathml-fonts.zip -d mathml-fonts then copy the mathml-fonts/resource/ directory somewhere on your web site and ensure that the woff files are served with the correct mime type.
... finally, include the mathml-fonts/resource/mathml.css style sheet in your web pages, for example by adding the following rule to the default style sheet of your web site: @import url('/path/to/resource/mathml.css'); browsers have default font-families in their user agent stylesheets.

MathML Demo: <mo> - operator, fence, separator, or accent
binary operators and relations the following table contains instances of all operators found on the swp binary operations and binary relations panels.
... ≂ c a ⊎ b ⋖ c a ⌆ b ⋗ c a ⨿ b ∣ c a ⊴ b ∥ c a ⊵ b ∼ c a ▽ b ≈ c a △ b ≊ c a ⋄ b ⪸ c a † b ⪷ c a ‡ b ∋ c a ⊞ b \vartriangle c arrows the following table contains instances of all arrows found on the swp arrows panel.
... a - b ↫ c a + b ↬ c a - b ⊸ c a + b ⇛ c a - b ⇚ c a + b ↶ c a - b ↷ c a + b ⤏ c a - b ⤎ c a + b ⇒ c a - b ⇐ c a + b ⇔ c negated relations the following table contains instances of all negated relations found on the swp panel.
...fixed sized fences are useful with nested fences as in the following example [ [ a b ] + [ b a ] ] + [ a b ] latex fences that are built into fractions (\binom, etc.) are not stretchy, but they are taller in displays.

Activity Monitor, Battery Status Menu and top
the following screenshot shows a customized "energy" tab.
...careful investigation indicates that on mac os 10.10 and 10.11 it is computed with a formula that is machine model-specific, and includes the following factors: cpu usage, wakeup frequency, quality of service class usage, and disk, gpu, and network activity.
... the weightings of each factor can be found in one of the the files in /usr/share/pmenergy/mac-<id>.plist, where <id> can be determined with the following command.
... it will show periodically-updating data like the following.

Memory reporting
two ways to measure memory reporters can be divided into the two following kinds.
... traversal-based reporters are preferable, for the following reasons.
... a simple example imagine a simple string class with the following data fields: class mystring { private: char *mbuffer; // heap-allocated size_t mlen; // ...
... all this is probably not what you'd expect, but the above functions have the following crucial features.

Power profiling overview
intel processor basics processor layout the following diagram (from the intel power governor documentation) shows how machines using recent intel processors are constructed.
...the following sections list them from best to worst.
... pp1: an uncore device, usually the gpu (not available on all processor models.) dram: main memory (not available on all processor models.) the following relationship holds: pp0 + pp1 <= pkg.
... tools that can take rapl readings include the following.

TraceMalloc
the built mozilla application will support the following additional command-line options: --trace-malloc filename the application will log allocation and deallocation events with stack traces in a binary format to the given file.
... also, your javascript can call the following dom window methods: tracemallocdisable() - turn off tracing, first flushing any buffered log events for all log files.
...it will produce a report like the following.
...you can use the following web page to do so.

about:memory
within each process's measurements, there are the following subsections.
... some add-on memory usage is identified, as the following example shows.
...for example, in the "explicit" tree all dom and layout measurements are broken down by window by window, but in "other measurements" those measurements are aggregated into totals for the whole browser, as the following example shows.
... finally, at the end of this section are individual measurements, as the following example shows.

powermetrics
the following command encompasses the most useful ones: sudo powermetrics --samplers tasks --show-process-coalition --show-process-gpu -n 1 -i 5000 --samplers tasks tells it to just do per-process measurements.
... the following is example output from such an invocation: *** sampled system activity (fri sep 4 17:15:14 2015 +1000) (5009.63ms elapsed) *** *** running tasks *** name id cpu ms/s user% deadlines (<2 ms, 2-5 ms) wakeups (intr, pkg idle) gpu ms/s com.apple.terminal 293 447.66 274.83 120.35 221.74 firefox ...
... 0.00 com.apple.safari.searchhelper 84690 0.15 49.49 0.00 0.00 0.20 0.20 0.00 org.mozilla.firefox 482 76.56 124.34 63.47 0.00 firefox 84496 76.70 89.18 10.58 5.59 124.55 63.48 0.00 this sample was taken while the following programs were running: firefox beta (single process, invoked from the mac os dock, shown in the org.mozilla.firefox coalition.) firefox nightly (multi-process, invoked from the command line, shown in the com.apple.terminal coalition.) google chrome.
...the following is sample output.

PR_Poll
syntax #include <prio.h> print32 pr_poll( prpolldesc *pds, printn npds, printervaltime timeout); parameters the function has the following parameters: pds a pointer to the first element of an array of prpolldesc structures.
... the prpolldesc structure is defined as follows: struct prpolldesc { prfiledesc* fd; print16 in_flags; print16 out_flags; }; typedef struct prpolldesc prpolldesc; the structure has the following fields: fd a pointer to a prfiledesc object representing a socket or a pollable event.
... in_flags a bitwise or of the following bit flags: pr_poll_read: fd is readable.
... out_flags a bitwise or of the following bit flags: pr_poll_read pr_poll_write pr_poll_except pr_poll_err: fd has an error.

NSS 3.12.5 release_notes
this default setting can also be changed within the application by using the following existing api functions: secstatus ssl_optionset(prfiledesc *fd, print32 option, prbool on) secstatus ssl_optionsetdefault(print32 option, prbool on) there is now a new value for "option", which is: ssl_enable_renegotiation the corresponding new values for ssl_enable_renegotiation are: ssl_renegotiate_never: never renegotiate at all (default).
... see the following struct in nss.h for details: nssinitparametersstr other new functions in secmod.h: secmod_getskipfirstflag secmod_getdefaultmoddbflag in prlink.h nss_securememcmp port_loadlibraryfromorigin modified functions sgn_update (see cryptohi.h) the parameter "input" of this function is changed from unsigned char * to const unsigned char *.
... bugs fixed the following bugs have been fixed in nss 3.12.5.
...new and revised documents available since the release of nss 3.11 include the following: build instructions nss shared db compatibility nss 3.12.5 shared libraries are backward compatible with all older nss 3.x shared libraries.

NSS 3.12.6 release notes
the behavior of nss for renegotiation can be changed through api function calls, or with the following environment variables: nss_ssl_enable_renegotiation values: [0|n|n]: ssl_renegotiate_never never allow renegotiation - that was the default for 3.12.5 release.
... these options can also be set with the following ssl options: ssloptions.enablerenegotiation ssloptions.requiresafenegotiation new pseudo cipher suite value: tls_empty_renegotiation_info_scsv (cannot be negotiated) tls server name indication for servers tls server name indication (sni) for servers is almost fully impl...
... bugs fixed the following bugs have been fixed in nss 3.12.6.
...new and revised documents available since the release of nss 3.11 include the following: build instructions nss shared db compatibility nss 3.12.6 shared libraries are backward compatible with all older nss 3.x shared libraries.

NSS 3.14 release notes
introduction the nss team has released network security services (nss) 3.14, which is a minor release with the following new features: support for tls 1.1 (rfc 4346) experimental support for dtls 1.0 (rfc 4347) and dtls-srtp (rfc 5764) support for aes-ctr, aes-cts, and aes-gcm support for keying material exporters for tls (rfc 5705) in addition to the above new features, the following major changes have been introduced: support for certificate signatures using the md5 hash algorithm is now disabled by default.
...the following functions have been added to the libssl library included in nss 3.14 ssl_versionrangeget (in ssl.h) ssl_versionrangegetdefault (in ssl.h) ssl_versionrangegetsupported (in ssl.h) ssl_versionrangeset (in ssl.h) ssl_versionrangesetdefault (in ssl.h) to better ensure interoperability with peers that support tls 1.1, nss has altered how i...
... the following functions have been added to the libssl library included in nss 3.14: dtls_importfd (in ssl.h) dtls_gethandshaketimeout (in ssl.h) ssl_getsrtpcipher (in ssl.h) ssl_setrtpciphers (in ssl.h) support for aes-gcm support for aes-gcm has been added to the nss pkcs #11 module (softoken), based upon the draft 7 of pkcs #11 v2.30.
... the following types have been added in nss 3.14 certchainverifycallback (in certt.h) certchainverifycallbackfunc (in certt.h) cert_pi_chainverifycallback, a new option for certvalparamintype (in certt.h) a new error code: sec_error_application_callback_error (in secerr.h) new for pkcs #11 pkcs #11 mechanisms: ckm_aes_cts ...

PKCS #11 Module Specs
pkcs #11 module specs the following is a proposal to the pkcs #11 working group made in august 2001 for configuring pkcs #11 modules.
... recognized names all applications/libraries must be able recognize the following name values: library this specifies the path to the pkcs #11 library.
...only one of the following can be specified.
...if tokens is not specified, then softoken would default to the following specs: in non-fips mode: tokens=<0x01=[configdir=configdir tokendescription=cryptotokendescription slotdescription=cryptoslotdescription flags=nocertdb,nokeydb,optimizespace] 0x02=[configdir=configdir tokendescription=dbtokendescription slotdescription=dbslotdescription certprefix=certprefix keyprefix=keyprefix flags=flags minpwlen=minpwlen]> in fips mode: tokens=<0x03=[configdir=configdir ...

NSS tools : ssltab
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 any connection information.
...the simplest way to use the debugging tool is to execute the following command from a command shell: $ ssltap www.netscape.com the program waits for an incoming connection on the default port 1924.
...data sent from the client to the server is surrounded by the following symbols: --> [ data ] data sent from the server to the client is surrounded by the following symbols: "left arrow"-- [ data ] the raw data stream is sent to standard output and is not interpreted in any way.
...the following examples show the output from commonly used combinations of options.

NSS tools : ssltap
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 any connection information.
...the simplest way to use the debugging tool is to execute the following command from a command shell: $ ssltap www.netscape.com the program waits for an incoming connection on the default port 1924.
...data sent from the client to the server is surrounded by the following symbols: --> [ data ] data sent from the server to the client is surrounded by the following symbols: "left arrow"-- [ data ] the raw data stream is sent to standard output and is not interpreted in any way.
...the following examples show the output from commonly used combinations of options.

NSS Tools crlutil
syntax to run the certificate revocation list management tool, type the command crlutil option [arguments] where options and arguments are combinations of the options and arguments listed in the following section.
... crl generation script syntax: crl generation script file has the following syntax: line with comments should have <bold>#</bold> as a first symbol of a line set "this update" or "next update" crl fields: update=yyyymmddhhmmssz nextupdate=yyyymmddhhmmssz field "next update" is optional.
... reasoncode non-critical code where: reasoncode: identifies the name of an extension non-critical: should be set to 0 since this is non-critical extension code: the following codes are available: unspecified (0), keycompromise (1), cacompromise (2), affiliationchanged (3), superseded (4), cessationofoperation (5), certificatehold (6), removefromcrl (8), privilegewithdrawn (9), aacompromise (10) add invalidity date extension: the invalidity date is a non-critica...
... listing crls in a database this example lists all the crls in the nss database in the specified directory: crlutil -l -d certdir the crl management tool displays output similar to the following: crl name crl type cn=nss test ca,o=bogus nss,l=mountain view,st=california,c=us crl cn=john smith,o=netscape,l=mountain view,st=california,c=us crl to view a particular crl user should specify -n nickname parameter.

NSS tools : ssltap
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 any connection information.
...the simplest way to use the debugging tool is to execute the following command from a command shell: $ ssltap www.netscape.com the program waits for an incoming connection on the default port 1924.
...data sent from the client to the server is surrounded by the following symbols: --> [ data ] data sent from the server to the client is surrounded by the following symbols: "left arrow"-- [ data ] the raw data stream is sent to standard output and is not interpreted in any way.
...the following examples show the output from commonly used combinations of options.

Scripting Java
for example, the following code actually calls the file object's getname and isdirectory methods.
... as an example, consider the following java class that defines a number of overloaded methods and calls them.
...to create an array of five java strings you would make the following call: js> a = java.lang.reflect.array.newinstance(java.lang.string, 5); [ljava.lang.string;@7ffe01 to create an array of primitive types, we must use the special type field defined in the associated object class in the java.lang package.
...rhino wraps java exceptions into error objects with the following properties: javaexception: the original exception thrown by the java method rhinoexception: the exception wrapped by the rhino runtime the instanceof operator can be used to query the type of an exception: try { java.lang.class.forname("nonexistingclass"); } catch (e) { if (e.javaexception instanceof java.lang.classnotfoundexception) { print("class not found"); } } rhi...

Rebranding SpiderMonkey (1.8.5)
after installing the build pre-requisites and downloading the spidermonkey source tarball issue the following commands at the terminal: cd js/src autoconf-2.13 for the remainder of this document wherever you see the text $brand you will substitute that text with the name of your brand.
...in the unix world we would issue the following command: find ./ -type f -exec sed -i "s/mozjs185/$brand/" {} \; windows users: notepad++ can be used to perform the recursive find and replace text operation.
...you may now perform the build and installation of your custom branded spidermonkey library: make note: depending on your system you may need administrative rights to perform the installation: make install the following information isn't technically needed for using your library but it will help other applications use your library.
...if this is not desirable, you can issue the following command on unix systems: sed -i "s/mozjs185/$brand/" /usr/bin/js-config which performs a simple text replacement of mozjs185 with your branding on the js-config script.

64-bit Compatibility
the following types or typedefs are always 64-bit on 64-bit platforms, and 32-bit on 32-bit platforms: pointers uintptr_t, intptr_t, ptrdiff_t, (probably) size_t jsval jsuword, jsword length of a string, though the actual length cannot exceed 30 bits jsuintptr, jsintptr, jsptrdiff, jsuptrdiff, jssize, jsuword, jsword (let's not use these, kthx) the following types are 32-bit on 32-bit platforms.
...mucking with native integers in lir the following opcodes can be used to safely load, modify, and compare native integers.
...the following table contains the most relevant opcodes: platform alias 32-bit op 64-bit op ldp ld ldq ldcp ldc ldcq piadd add qiadd piand and qiand pilsh lsh qilsh pirsh rsh qirsh pursh ush qursh pcmov cmov qcmov pior or qior pxor xor qxor addp iaddp qaddp peq - puge eq - uge qeq - quge pcall icall qcall the 32-bit versions have the following inputs ...
...i32 i32 add i32, i32 i32 and i32, i32 i32 lsh i32, i32 i32 rsh i32, i32 i32 ush i32 cmov i32, i32, i32 i32 or i32, i32 i32 xor i32, i32 i32 iaddp i32, i32 i32 eg - uge i32, i32 i32 icall n/a i32 the 64-bit versions have the following inputs and outputs.

JS::CompileOptions
source belongs to a dom element in the following cases: source belongs to a <script> element if it is the element's text content (that is, it is written out as the body of the <script> element in the markup text), or is the source document referenced by its src attribute.
... introductiontype const char a statically allocated c string: one of following in general: "eval" - code passed to eval "function" - code passed to the function constructor.
... in addition to above, the following are used in browser: "worker" - code loaded by calling the web worker constructor—the worker's main script.
... the following are used in js shell: "js shell file" "js shell interactive" "js shell load" "js shell evaluate" "js shell run" "js shell disfile" "js shell compfile" "js shell parse" "js shell syntaxparse" "js shell offthreadcompilescript" and the following are used in self-hosted code and debugger: "self-hosted" "debugger eval" ...

Animated PNG graphics
4 width unsigned int width of the following frame.
... 8 height unsigned int height of the following frame.
... 12 x_offset unsigned int x position at which to render the following frame.
... 16 y_offset unsigned int y position at which to render the following frame.

An Overview of XPCOM
when a class inherits from another class, the inheriting class may override the default behaviors of the base class without having to copy all of that class's code, in effect creating a more specific class, as in the following example: simple class inheritance class shape { private: int m_x; int m_y; public: virtual void draw() = 0; shape(); virtual ~shape(); }; class circle : public shape { private: int m_radius; public: virtual draw(); circle(int x, int y, int radius); virtual ~circle(); }; circle is a derived class of shape.
... xpcom types there are many xpcom declared types and simple macros that we will use in the following samples.
...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.

Address Book examples
in the following examples: selectedab is the uri of an address book to default the dialog to saving the card in.
...the following options are available.
...for example, in order to register a load listener for a contact, the following should take place within the scope of the contact editor dialog: /* an example load listener for a contact * acard the nsiabcard being loaded * adocument a reference to the contact editor document */ function foo(acard, adocument) { // do something useful, like disabling // input fields that cards for this // address book type do not support.
...each photo handler must implement the following interface: /* * onload: function(acard, adocument): * called when the editor wants to populate the contact editor * input fields with information about acard's photo.

Index
the following preferences are supported to control how this gets logged: 30 gloda examples thunderbird 3, thunderbird this page provides some examples for using gloda.
...as an example, i received the following inquiry, and i decided to follow my usual path and document what i do: 88 styling the folder pane the folder pane in thunderbird is predominantly controlled by code in folderpane.js.
...by example, to modify the mail subject : 104 get thunderbird version thunderbird on thunderbird version 3.0b3pre and later, you can use the following snippet to get the thunderbird version.
... 110 tips and tricks from the newsgroups thunderbird the following discussions on mozilla.dev.apps.thunderbird and mozilla.dev.extensions include useful tips for thunderbird add-on developers.

Mail composition back end
(for detailed information on the listener interfaces, see the listener interfaces section of this document) nsimsgsend the following describes the methods of the nsimsgsend interface.
... nsimsgsendlistener the following describes the methods of the nsimsgsendlistener interface: onstartsending the onstartsending interface is called when the sending operation has begun.
...the following details the specific copy operations that can occur in a message send call.
... the following describes the methods of the nsimsgsendlater interface.

Type conversion
var buffer = ctypes.char.array(10)(); var somecfunction = library.declare("somecfunction", ctypes.default_abi, ctypes.void_t, ctypes.char.ptr); somecfunction(buffer); // here ctypes.char.array(10)() is converted to ctypes.char.ptr type implicit conversion can be tested in the following way: var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.bool } ])(); mystruct.v = 1; console.log(mystruct.v.tostring()); // 'true' boolean type target type source converted value ctypes.bool js boolean src js number (0 or 1) if src == 0: false if src == 1: true var mystruct = ctypes.structtype("mystructtype", [ { "v": ...
... note that the following table does not contain environment dependent types (ctypes.long, etc.).
...ucttype("mystructtype", [ { "v": ctypes.int16_t.ptr } ])(); mystruct.v = ctypes.int16_t.array(10)(); console.log(mystruct.v.tostring()); // 'ctypes.int16_t.ptr(ctypes.uint64("0x11d6ff400"))' mystruct.v = null; console.log(mystruct.v.tostring()); // 'ctypes.int16_t.ptr(ctypes.uint64("0x0"))' mystruct.v = ctypes.int32_t.array(10)(); // throws error only in functiontype argument, the following rules are also applied: target type source converted value ctypes.char.ptr js string pointer to temporary allocated null-terminated utf8 string ctypes.signed_char.ptr ctypes.unsigned_char.ptr ctypes.char16.ptr js string pointer to temporary allocated null-terminated utf16 string any pointer types any arraybuffer object ...
...ct (only if the object has properties for all fields and no other properties) implicitly convert each enumerable property to corresponding field explicit convert in js-ctypes, data could be converted explicitly, when passing to cdata constructor: ctypes.int32_t("123"); // string "123" is parsed as 10-base string explicit convert tries implicit convert first, and if it fails, the following rules are applied: boolean type target type source converted value ctype.bool js value toboolean(src) console.log(ctypes.bool("123").tostring()); // 'ctypes.bool(true)' console.log(ctypes.bool("").tostring()); // 'ctypes.bool(false)' integer types target type source converted value any integer types js number except -infinity...

Debugger.Frame - Firefox Developer Tools
a frame is a visible frame if any of the following are true: it is running debuggee code; its immediate caller is a frame running debuggee code; or it is a "debugger" frame, representing the continuation of debuggee code invoked by the debugger.
... accessor properties of the debugger.frame prototype object a debugger.frame instance inherits the following accessor properties from its prototype: type a string describing what sort of frame this is: "call": a frame running a function call.
... debugger.frame instances inherit the following handler method properties: onstep this property must be either undefined or a function.
...the eval method recognizes the following properties: url the filename or url to which we should attributecode.

Debugger.Source - Firefox Developer Tools
accessor properties of the debugger.source prototype object a debugger.source instance inherits the following accessor properties from its prototype: text if the instance refers to javascript source, the javascript source code, as a string.
...source may be loaded from a url in the following ways: the url may appear as the src attribute of a <script> element in markup text.
...source belongs to a dom element in the following cases: source belongs to a <script> element if it is the element’s text content (that is, it is written out as the body of the <script> element in the markup text), or is the source document referenced by its src attribute.
...this accessor returns one of the following values: "eval", for code passed to eval.

Network request list - Firefox Developer Tools
to close the search panel, do one of the following: click the x icon next to the search field.
... context menu context-clicking on a row in the list displays a context menu with the following options: menuitem description copy > copy url copies the url.
... copy as curl the command may include the following options: -x [method] if the method is not get or post --data for url encoded request parameters --data-binary for multipart request parameters --http/version if the http version is not 1.1 -i if the method is head -h one for each request header.
... network monitor features the following articles cover different aspects of using the network monitor: toolbar network request details network traffic recording performance analysis throttling ...

Examine and edit CSS - Firefox Developer Tools
in the following example, a spelling error, "background-colour" instead of "background-color" has made the rule invalid: rule display it displays each rule as in a stylesheet, with a list of selectors followed by a list of property:value; declarations.
... displaying pseudo-elements the rule view displays the following pseudo-elements, if they are applied to the selected element: ::after ::backdrop ::before ::first-letter ::first-line ::selection :-moz-color-swatch :-moz-number-spin-box :-moz-number-spin-down :-moz-number-spin-up :-moz-number-text :-moz-number-wrapper :-moz-placeholder :-moz-progress-bar :-moz-range-progress :-moz-range-thumb :-moz-range-track :-moz-selection if the selected ...
...for example, copying the changes in the preceding image, you get the following: .text-content p { box-sizing:border-box; max-width:24rem; text-decoration: underline; color: cadetblue; font-weight: bold; } add rules you can add new rules in the rules view.
... there's also a button that enables you to do the same thing: copy rules to copy rules, and pieces of rules, use one of the following context menu items in the rules view: copy rule copy selector copy property declaration copy property name copy property value ...

Console messages - Firefox Developer Tools
the following icons may be used: informational message warning error blocked; for network messages in addition, a disclosure triangle indicates that further information is available; clicking it displays or collapses that information.
... the web console supports the following console api messages: assert() clear() count() dir() dirxml() error() exception() group() groupend() info() log() table() time() timeend() trace() warn() the console prints a stack trace for all error messages, like this: function foo() { console.error("it explodes"); } function bar() { foo(); } function dostuff() { bar(); } dostuff(); server server-side log mess...
... for responses that contain objects or variables, the following context menu options are available: reveal in inspector shows the selected dom node in the inspector pane.
...for example, the following video shows the results when filtering on two simple regular expressions: /(cool|rad)/ and /(cool)/.

Applying styles and colors - Web APIs
each of the following examples describe the same color.
... because the strokestyle and fillstyle properties accept css rgba color values, we can use the following notation to assign a transparent color to them.
...we create a canvasgradient object by using one of the following methods.
... the type specifies how to use the image in order to create the pattern, and must be one of the following string values: repeat tiles the image in both vertical and horizontal directions.

Drawing shapes with canvas - Web APIs
the starting point is dependent on previously drawn paths, where the end point of the previous path is the starting point for the following, etc.
...to convert degrees to radians you can use the following javascript expression: radians = (math.pi/180)*degrees.
... the following example is a little more complex than the ones we've seen above.
...in the following example, we'll be drawing some simple organic shapes, but if you have the time and, most of all, the patience, much more complex shapes can be created.

Document.cookie - Web APIs
consider also that: any of the following cookie attribute values can optionally follow the key-value pair, specifying the cookie to set/update, and preceded by a semi-colon separator: ;path=path (e.g., '/', '/mydir') if not specified, defaults to the current path of the current document location.
... the strict value will prevent the cookie from being sent by the browser to the target site in all cross-site browsing contexts, even when following a regular link.
... some user agent implementations support the following cookie prefixes: __secure- signals to the browser that it should only include the cookie in requests transmitted over a secure channel.
...xample #2: get a sample cookie named test2 document.cookie = "test1=hello"; document.cookie = "test2=world"; const cookievalue = document.cookie .split('; ') .find(row => row.startswith('test2')) .split('=')[1]; function alertcookievalue() { alert(cookievalue); } <button onclick="alertcookievalue()">show cookie value</button> example #3: do something only once in order to use the following code, please replace all occurrences of the word dosomethingonlyonce (the name of the cookie) with a custom name.

Examples of web and XML development using the DOM - Web APIs
example 1: height and width the following example shows the use of the height and width properties alongside images of varying dimensions: <!doctype html> <html lang="en"> <head> <title>width/height example</title> <script> function init() { var arrimages = new array(3); arrimages[0] = document.getelementbyid("image1"); arrimages[1] = document.getelementbyid("image2"); arrimages[2] = document.getelementbyid("image3"); var objoutput = document.getelementbyid("output"); var strhtml = "<ul>"; for (var i = 0; i < arrimages.length; i++) { strhtml += "<li>image" + (i+1)...
... var ss = document.stylesheets; for(var i = 0; i < ss.length; i++) { for(var j = 0; j < ss[i].cssrules.length; j++) { dump( ss[i].cssrules[j].selectortext + "\n" ); } } for a document with a single stylesheet in which the following three rules are defined: body { background-color: darkblue; } p { font-face: arial; font-size: 10pt; margin-left: .125in; } #lumpy { display: none; } this script outputs the following: body p #lumpy example 5: event propagation this example demonstrates how events fire and are handled in the dom in a very simple way.
... getcomputedstyle() returns a computedcssstyledeclaration object, whose individual style properties can be referenced with this object's getpropertyvalue() method, as the following example document shows.
... put the following code into a blank text file and load it into a variety of browsers, you'll be surprised at the different number and names of properties.

How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
take the following minimal example: <!doctype html> <h1> hello world!
... take the following document, for example: <!doctype html> <html> <head> <title>my document</title> </head> <body> <h1>header</h1> <p> paragraph </p> </body> </html> the dom tree for this looks like so: conserving whitespace characters in the dom is useful in many ways, but there are certain places where this makes certain layouts more difficult to implement, and causes problems for developers who ...
...re and apply this first rule, we get: <h1>◦◦◦hello⏎ <span>◦world!</span>⇥◦◦</h1> next, all tab characters are handled as space characters, so the example becomes: <h1>◦◦◦hello⏎ <span>◦world!</span>◦◦◦</h1> next, line breaks are converted to spaces: <h1>◦◦◦hello◦<span>◦world!</span>◦◦◦</h1> after that, any space immediately following another space (even across two separate inline elements) is ignored, so we end up with: <h1>◦hello◦<span>world!</span>◦</h1> and finally, sequences of spaces at the beginning and end of a line are removed, so we finally get this: <h1>hello◦<span>world!</span></h1> this is why people visiting the web page will simply see the phrase "hello world!" nicely written at the top o...
... */ function data_of( txt ) { var data = txt.textcontent; // use ecma-262 edition 3 string and regexp features data = data.replace(/[\t\n\r ]+/g, " "); if (data.charat(0) == " ") data = data.substring(1, data.length); if (data.charat(data.length - 1) == " ") data = data.substring(0, data.length - 1); return data; } example the following code demonstrates the use of the functions above.

Using the Frame Timing API - Web APIs
in the following example, two observers for the "frame" performance entry type are created and the first observer constructor uses inline function syntax.
...in the following example, the observer only registers for "frame" performance entry notifications.
... }); // only observe 'frame' events observe_frame.observe({entrytypes: ['frame']}); in the following example, the observer registers to be notified when several different performance entry types are added to the performance timeline.
... in the following example, the observer only processes "frame" entries.

HTMLButtonElement - Web APIs
this is an enumerated attribute with the following possible values: submit: the button submits the form.
... recommendation the following attribute has been added: menu.
... the following attributes have been added: autofocus, formaction, formenctype, formmethod, formnovalidate, formtarget, labels, validity, validationmessage, and willvalidate.
... the following methods have been added: checkvalidity(), setcustomvalidity().

HTMLTableCellElement - Web APIs
permitted values for scope are: col the header cell applies to the following cells in the same column (or columns, if colspan is used as well), until either the end of the column or another <th> in the column establishes a new scope.
... row the header cell applies to the following cells in the same row (or rows, if rowspan is used as well), until either the end of the row or another <th> in the same row establishes a new scope.
...it reflects the valign attribute and can have one of the following values: "top", "middle", "bottom", or "baseline".
... recommendation the following properties have been obsoleted: align, axis, bgcolor, height, width, ch, choff, nowrap, and valign.

Drag Operations - Web APIs
the following describes the steps that occur during a drag and drop operation.
...this technique is useful when drawing custom drag images using the canvas element, as in the following example: function dragwithcustomimage(event) { const canvas = document.createelement("canvas"); canvas.width = canvas.height = 50; const ctx = canvas.getcontext("2d"); ctx.linewidth = 4; ctx.moveto(0, 0); ctx.lineto(50, 50); ctx.moveto(0, 50); ctx.lineto(50, 0); ctx.stroke(); const dt = event.datatransfer; dt.setdata('text/plain', 'data to drag'); dt.setdragimage(canvas...
...in the following example, three formats are supported by a drop target.
... the following example returns the data associated with the best-supported format: function dodrop(event) { const supportedtypes = ["application/x-moz-file", "text/uri-list", "text/plain"]; const types = event.datatransfer.types.filter(type => supportedtypes.includes(type)); if (types.length) { const data = event.datatransfer.getdata(types[0]); } event.preventdefault(); } finishing a drag once the drag is complete, a dragend event is fired at the source of the drag (the same element that received the dragstart event).

File drag and drop - Web APIs
the following code snippet shows how this is done with a <div> element: <div id="drop_zone" ondrop="drophandler(event);"> <p>drag one or more files to this drop zone ...</p> </div> typically, an application will include a dragover event handler on the drop target element and that handler will turn off the browser's default drag behavior.
...in this example, the drop target element uses the following styling: #drop_zone { border: 5px solid blue; width: 200px; height: 100px; } note that dragstart and dragend events are not fired when dragging a file into the browser from the os.
...in the following drop handler, if the browser supports datatransferitemlist interface, the getasfile() method is used to access each file; otherwise the datatransfer interface's files property is used to access each file.
...file[' + i + '].name = ' + ev.datatransfer.files[i].name); } } } prevent the browser's default drag behavior the following dragover event handler calls preventdefault() to turn off the browser's default drag and drop handler.

IDBDatabaseSync - Web APIs
exceptions this method can raise an idbdatabaseexception with the following code: constraint_err if an object store with the same name (based on case-sensitive comparison) already exists in the connected database.
... exceptions this method can raise an idbdatabaseexception with the following code: not_found_err if an object store with the given name (based on case-sensitive comparison) already exists in the connected database.
... returns void exceptions this method can raise an idbdatabaseexception with the following code: not_found_err if the object store with the given name (based on case-sensitive comparison) does not exist in the connected database.
... exceptions this method can raise an idbdatabaseexception with the following code: timeout_err if reserving all the database objects identified in storenames takes longer than the timeout interval.

IDBKeyRange - Web APIs
to retrieve all keys within a certain range, you can use the following code constructs: range code all keys ≥ x idbkeyrange.lowerbound(x) all keys > x idbkeyrange.lowerbound(x, true) all keys ≤ y idbkeyrange.upperbound(y) all keys < y idbkeyrange.upperbound(y, true) all keys ≥ x && ≤ y idbkeyrange.bound(x, y) all keys > x &&< y idbkeyrange.bound(x, y, true, true) a...
...ll keys > x && ≤ y idbkeyrange.bound(x, y, true, false) all keys ≥ x &&< y idbkeyrange.bound(x, y, false, true) the key = z idbkeyrange.only(z) a key is in a key range if the following conditions are true: the lower value of the key range is one of the following: undefined less than key value equal to key value if loweropen is false.
... the upper value of the key range is one of the following: undefined greater than key value equal to key value if upperopen is false.
... examples the following example illustrates how you'd use a key range.

LocalFileSystem - Web APIs
so to request storage, you need to do something like the following: var requestedbytes = 1024*1024*10; // 10mb navigator.webkitpersistentstorage.requestquota ( requestedbytes, function(grantedbytes) { window.requestfilesystem(persistent, grantedbytes, oninitfs, errorhandler); }, function(e) { console.log('error', e); } ); your user must grant your app permission to store data locally before your app can use persistent storage.
... example the following is a code snippet that shows how you can request a file system storage.
... returns void exceptions this method can raise an fileerror with the following code: exception description security_error the application does not have permission to access the file system interface.
... returns void exceptions this method can raise an fileerror with the following code: exception description encoding_err the syntax of the url was invalid.

Using Performance Timeline - Web APIs
the following example show the usage of these methods getentries(), getentriesbyname() and getentriesbytype().
...the following example shows the use of these properties.
...the following examples show the use of this method.
... the following example shows how to register two observers: the first one registers for several event types and the second observer only registers for one event type.

Request - Web APIs
request implements body, so it also inherits the following properties: body read only a simple getter used to expose a readablestream of the body contents.
... request implements body, so it also has the following methods available to it: body.arraybuffer() returns a promise that resolves with an arraybuffer representation of the request body.
... examples in the following snippet, we create a new request using the request() constructor (for an image file in the same directory as the script), then return some property values of the request: const request = new request('https://www.mozilla.org/favicon.ico'); const url = request.url; const method = request.method; const credentials = request.credentials; you could then fetch this request by passing the request ob...
...ject in as a parameter to a windoworworkerglobalscope.fetch() call, for example: fetch(request) .then(response => response.blob()) .then(blob => { image.src = url.createobjecturl(blob); }); in the following snippet, we create a new request using the request() constructor with some initial data and body content for an api request which need a body payload: const request = new request('https://example.com', {method: 'post', body: '{"foo": "bar"}'}); const url = request.url; const method = request.method; const credentials = request.credentials; const bodyused = request.bodyused; note: the body type can only be a blob, buffersource, formdata, urlsearchparams, usvstring or readablestream type, so for adding a json object to the payload you need to stringify that object.

Using the Resource Timing API - Web APIs
timing resource loading phases the following example illustrates using the resource timing properties to calculate the amount of time the following phases take: redirection (redirectstart and redirectend ), dns lookup (domainlookupstart and domainlookupend), tcp handshake (connectstart and connectend), and response (responsestart and responseend).
... the following example demonstrates using these three properties.
... the following example demonstrates the usage of these two methods.
...the following code example sets a onresourcetimingbufferfull event callback in the init() function.

Screen Wake Lock API - Web APIs
there are plenty of use cases for keeping a screen on, including reading an ebook, map navigation, following a recipe, presenting to an audience, scanning a qr/barcode or applications that use voice or gesture control, rather than tactile input (the default way to keep a screen awake).
... if ('wakelock' in navigator) { issupported = true; statuselem.textcontent = 'screen wake lock api supported!'; } else { wakebutton.disabled = true; statuselem.textcontent = 'wake lock is not supported by this browser.'; } requesting a wake lock the following example demonstrates how to request a wakelocksentinel object.
...equestwakelock = async () => { try { wakelock = await navigator.wakelock.request('screen'); // change up our interface to reflect wake lock active statuselem.textcontent = 'wake lock is active!'; } catch (err) { // if wake lock request fails - usually system related, such as battery statuselem.textcontent = `${err.name}, ${err.message}`; } } releasing wake lock the following example shows how to release the previously acquired wake lock.
... wakelock.addeventlistener('release', () => { // the wake lock has been released statuselem.textcontent = 'wake lock has been released'; }); reacquiring a wake lock the following code reacquires the wake lock should the visibility of the document change and the wake lock is released.

Using Service Workers - Web APIs
basic architecture with service workers, the following steps are generally observed for basic set up: the service worker url is fetched and registered via serviceworkercontainer.register().
...it is different in the following ways: in the original, we only passed in a url to an image we wanted to load.
... this could be for the following reasons: you are not running your application through https.
...the following would do the trick: self.addeventlistener('fetch', (event) => { event.respondwith( caches.match(event.request).then((resp) => { return resp || fetch(event.request).then((response) => { return caches.open('v1').then((cache) => { cache.put(event.request, response.clone()); return response; }); }); }) ); }); here we return the default net...

Migrating from webkitAudioContext - Web APIs
see the following example: // old webkitaudiocontext code: var src = context.createbuffersource(); src.buffer = somebuffer; src.gain.value = 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(...
... see the following example: // old webkitaudiocontext code: 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.
... depending on why you used this attribute, you can use the following techniques to get the same information: if you need to compare this attribute to unscheduled_state, you can basically remember whether you've called start() on the node or not.
...ext api: // old webkitaudiocontext code: var osc = context.createoscillator(); var table = context.createwavetable(realarray, imaginaryarray); osc.setwavetable(table); // new standard audiocontext code: var osc = context.createoscillator(); var table = context.createperiodicwave(realarray, imaginaryarray); osc.setperiodicwave(table); removal of some of the audioparam read-only attributes the following read-only attributes have been removed from audioparam: name, units, minvalue, and maxvalue.

Background audio processing using AudioWorklet - Web APIs
structure of an audio worklet processor an audio worklet processor is a javascript module which consists of the following: a javascript class which defines the audio processor.
...this is demonstrated in the following example.
... to use an audio worklet processor, you can use code similar to the following: let audiocontext = null; async function createmyaudioprocessor() { if (!audiocontext) { try { audiocontext = new audiocontext(); await audiocontext.resume(); await audiocontext.audioworklet.addmodule("module-url/module.js"); } catch(e) { return null; } } return new audioworkletnode(audiocontext, "processor-name"); } this createmyaudioprocessor() fun...
... in the following implementation of parameterdescriptors(), the returned array has two audioparam objects.

Web Audio API - Web APIs
it can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern.
... offline/background audio processing it is possible to process/render an audio graph very quickly in the background — rendering it to an audiobuffer rather than to the device's speakers — with the following.
... obsolete interfaces the following interfaces were defined in old versions of the web audio api spec, but are now obsolete and have been replaced by other interfaces.
...this example makes use of the following web api interfaces: audiocontext, oscillatornode, periodicwave, and gainnode.migrating from webkitaudiocontextin this article, we cover the differences in web audio api since it was first implemented in webkit and how to update your code to use the modern web audio api.

Using the Web Speech API - Web APIs
the following variable is defined to hold our grammar: var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral' ...
... you can have as many terms defined as you want on separate lines following the above structure, and include fairly complex grammar definitions.
... 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.
... { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } when we come to run the function, we do the following.

Using feature queries - CSS: Cascading Style Sheets
you may not test for a bare property name such as display; the rule requires a property name and a value: @supports (property: value) { css rules to apply } if you want to check if a browser supports the row-gap property, for example, you would write the following feature query.
... testing for lack of support in addition to asking the browser if it supports a feature, you can test for the opposite by adding in the not keyword: @supports not (property: value) { css rules to apply } the css inside the following example feature query will run if the browser does not support row-gap.
...the following rule will only return true if both shape-outside: circle() and display: grid are supported by the browser.
...we can start by creating that floated layout with the following code, which gives us three columns.

Ordering Flex Items - CSS: Cascading Style Sheets
the specification says the following on this matter: “note: the reordering capabilities of flex layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order.
...you should always take the source order as the logical order of the document as all up-to-date user agents will be following the specification and doing so.
... as an example, i have 5 flex items, and assign order values as follows: source item 1: order: 2 source item 2: order: 3 source item 3: order: 1 source item 4: order: 3 source item 5: order: 1 these items would be displayed on the page in the following order: source item 3: order: 1 source item 5: order: 1 source item 1: order: 2 source item 2: order: 3 source item 4: order: 3 you can play around with the values in this live example below and see how that changes the order.
...to read more about this disconnect of visual order and logical order and some of the potential problems it raises for accessibility, see the following resources.

Basic Concepts of grid layout - CSS: Cascading Style Sheets
css grid layout has the following features: fixed and flexible track sizes you can create a grid with fixed track sizes – using pixels for example.
...the following example demonstrates doing this in a simple way.
... in the following example i am placing the first two items on our three column track grid, using the grid-column-start, grid-column-end, grid-row-start and grid-row-end properties.
...in the following example, i have the three-column grid that i created earlier, with our two positioned items.

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
textfield div { color: black; -moz-appearance: textfield; -webkit-appearance: textfield; } <div>lorem</div> firefox chrome safari edge the following values are treated as equivalent to auto: button div { color: black; -moz-appearance: button; -webkit-appearance: button; } <div>lorem</div> firefox chrome safari edge the element is drawn like a button.
... chrome safari edge square-button div{ color: black; -moz-appearance: square-button; -webkit-appearance: square-button; } <div>lorem</div> chrome safari edge textarea div{ color: black; -webkit-appearance: textarea; } <div>lorem</div> firefox chrome safari edge non-standard keywords the following values are implemented only for one or both of the prefixed properties, but not on the standard appearance property.
...available on the web starting in ios 10.1 and macos 10.12.1 obsolete values the following values were at some point implemented for a prefixed property, but are no longer supported.
... formal definition initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | auto | button | textfield | menulist-button | <compat-auto>where <compat-auto> = searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar examples the following would make an element look like a menulist button: .exampleone { appearance: menulist-button; } see also this jsfiddle for an example showing how you might use appearance: none to apply custom styling to radio buttons and checkboxes.

<color> - CSS: Cascading Style Sheets
a <color> can be defined in any of the following ways: using a keyword (such as blue or transparent) using the rgb cubic-coordinate system (via the #-hexadecimal or the rgb() and rgba() functional notations) using the hsl cylindrical-coordinate system (via the hsl() and hsla() functional notations) note: this article describes the <color> data type in detail.
...these system colors are exposed by the following keywords, which can be used to ensure that the rest of the page integrates well with the restricted palette.
... the keywords in the following list are defined by the css color module level 4 specification.
...ontent or documents field background of input fields fieldtext text in input fields graytext text that is disabled highlight background of items that are selected in a control highlighttext text of items that are selected in a control linktext text of non-active, non-visited links visitedtext text of visited links deprecated system color keywords the following keywords were defined in earlier versions of the css color module.

conic-gradient() - CSS: Cascading Style Sheets
the following two gradients are equivalent conic-gradient(red, orange, yellow, green, blue); conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg); by default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition.
...the following is solid red from the start to the 10% mark, transitions from red to blue over 80% of the turn, with the final 10% being solid blue.
...the following two declarations are equivalent: conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn); conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn); color stops should be listed in ascending order.
...the following changes from red to yellow at the 30% mark, and then transitions from yellow to blue over 35% of the gradient conic-gradient(red .8rad, yellow .6rad, blue 1.3rad); there are other effects you can create with conic gradients.

linear-gradient() - CSS: Cascading Style Sheets
the following two gradients are equivalent.
...the following example is solid red from the start to the 10% mark and solid blue from 90% to the end.
...the following changes from red to yellow at the 30% mark, and then transitions from yellow to blue over 35% of the gradient linear-gradient(red 40%, yellow 30%, blue 65%); multi-position color stop are allowed.
...the following three gradients are equivalent: linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%); linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%); linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%); by default, if there is no color with a 0% stop, the first color declared will be at that point.

Constraint validation - Developer guides
validation-related attributes in addition to the type attribute described above, the following attributes are used to describe basic constraints: attribute input types supporting the attribute possible values constraint description associated violation pattern text, search, url, tel, email, password a javascript regular expression (compiled with the ecmascript 5 global, ignorecase, and multiline flags disabled) the value must match the pattern.
...the constraint validation is done in the following ways: by a call to the checkvalidity() or reportvalidity() method of a form-associated dom interface, (htmlinputelement, htmlselectelement, htmlbuttonelement, htmloutputelement or htmltextareaelement), which evaluates the constraints only on this element, allowing a script to get this information.
... <label for="zip">zip : </label> <input type="text" id="zip"> <label for="country">country : </label> <select id="country"> <option value="ch">switzerland</option> <option value="fr">france</option> <option value="de">germany</option> <option value="nl">the netherlands</option> </select> <input type="submit" value="validate"> </form> this displays the following form: first, we write a function checking the constraint itself: function checkzip() { // for each country, defines the pattern that the zip has to follow var constraints = { ch : [ '^(ch-)?\\d{4}$', "switzerland zips must have exactly 4 digits: e.g.
... controlling the text of constraint violation the following items can help with controlling the text of a constraint violation: element.setcustomvalidity(message) method on the following elements: <fieldset>.

Date and time formats used in HTML - HTML: Hypertext Markup Language
this is detailed in the following table.
...that means it's possible for the first few days of january to be considered part of the previous week-year, and for the last few days of december to be considered part of the following week-year.
...a valid global date and time string is the same format as a local date and time string, except it has a time zone string appended to the end, following the time.
... the time zone string is appended immediately following the time in the date and time string.

<input type="checkbox"> - HTML: Hypertext Markup Language
take the following example: <form> <div> <input type="checkbox" id="subscribenews" name="subscribe" value="newsletter"> <label for="subscribenews">subscribe to newsletter?</label> </div> <div> <button type="submit">subscribe</button> </div> </form> in this example, we've got a name of subscribe, and a value of newsletter.
... additional attributes in addition to the common attributes shared by all <input> elements, "checkbox" inputs support the following attributes: attribute description checked boolean; if present, the checkbox is toggled on by default indeterminate a boolean which, if present, indicates that the value of the checkbox is indeterminate rather than true or false value the string to use as the value of the checkbox when submitting the form, if the checkbox is currently toggled on...
... for example, in the following demo we include multiple checkboxes to allow the user to select their interests (see the full version in the examples section).
... examples the following example is an extended version of the "multiple checkboxes" example we saw above — it has more standard options, plus an "other" checkbox that when checked causes a text field to appear to enter a value for the "other" option.

<input type="image"> - HTML: Hypertext Markup Language
additional attributes in addition to the attributes shared by all <input> elements, image button inputs support the following attributes: attribute description alt alternate string to display when the image can't be shown formaction the url to which to submit the data formenctype the encoding method to use when submitting the form data formmethod the http method to use when submitting the form formnovalidate a boolean which, if present, indicat...
... obsolete attributes the following attribute was defined by html 4 for image inputs, but was not implemented by all browsers and has since been deprecated: attribute description usemap the name of an image map (<map>) element to use with the image; this is obsolete.
...the following keywords have special meanings: _self: load the response into the same browsing context as the current one.
... examples a login form the following example shows the same button as before, but included in the context of a typical login form.

<input type="text"> - HTML: Hypertext Markup Language
additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, text inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum number of characters the input should accept minlength the minimum number of characters long the input can be and still be considered valid pattern a regular expression the input's...
... non-standard attributes the following non-standard attributes are also available on some browsers.
...look at the following example: <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" placeholder="lower case, all one word"> </div> <div> <button>submit</button> </div> </form> you can see how the placeholder is rendered below: the placeholder is typically rendered in a lighter color than the element's foreground color, and automatical...
...in this section, we'll use the following css, which will place a check (tick) mark next to inputs containing valid values, and a cross (x) next to inputs containing invalid values.

itemprop - HTML: Hypertext Markup Language
same structured data marked up in two different ways there is no semantic difference between the following two examples <figure> <img src="castle.jpeg"> <figcaption><span itemscope><span itemprop="name">the castle</span></span> (1986)</figcaption> </figure> <span itemscope><meta itemprop="name" content="the castle"></span> <figure> <img src="castle.jpeg"> <figcaption>the castle (1986)</figcaption> </figure> both have a figure with a caption, and both, completely unrelated to th...
... values the property value of a name-value pair is as given for the first matching case in the following list: if the element has an itemscope attribute the value is the item created by the element.
... in the following example, the "a" property has the values "1" and "2", in that order, but whether the "a" property comes before the "b" property or not is not important <div itemscope> <p itemprop="a">1</p> <p itemprop="a">2</p> <p itemprop="b">test</p> </div> the following is equivalent <div itemscope> <p itemprop="b">test</p> <p itemprop="a">1</p> <p itemprop="a">2</p> </div> as is the following <div...
... itemscope> <p itemprop="a">1</p> <p itemprop="b">test</p> <p itemprop="a">2</p> </div> and the following <div id="x"> <p itemprop="a">1</p> </div> <div itemscope itemref="x"> <p itemprop="b">test</p> <p itemprop="a">2</p> </div> other examples html <dl itemscope itemtype="http://vocab.example.net/book" itemid="urn:isbn:0-330-34032-8"> <dt>title <dd itemprop="title">the reality dysfunction <dt>author <dd itemprop="author">peter f.

Inline elements - HTML: Hypertext Markup Language
first, some simple css that we'll be using: .highlight { background-color:#ee3; } inline let's look at the following example which demonstrates an inline element: <div>the following span is an <span class="highlight">inline element</span>; its background has been colored to display both the beginning and end of the inline element's influence.</div> in this example, the <div> block-level element contains some text.
...because the <span> element is inline, the paragraph correctly renders as a single, unbroken text flow, like this: for looks, this css (not displayed in standard reading mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight { background-color:#ee3; } block-level now let's change that <span> into a block-level element, such as <p>: <div>the following paragraph is a <p class="highlight">block-level element;</p> its background has been colored to display both the beginning and end of the block-level element's influence.</div> the css (not displayed in standard reading mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight { background-color:#ee3; } rendered using the same css as before, we get: ...
...the <p> element totally changes the layout of the text, splitting it into three segments: the text before the <p>, then the <p>'s text, and finally the text following the <p>.
... list of "inline" elements the following elements are inline by default (although block and inline elements are no longer defined in html 5, use content categories instead): <a> <abbr> <acronym> <audio> (if it has visible controls) <b> <bdi> <bdo> <big> <br> <button> <canvas> <cite> <code> <data> <datalist> <del> <dfn> <em> <embed> <i> <iframe> <img> <input> <ins> <kbd> <label> <map> <mark> <meter> <nosc...

Content Security Policy (CSP) - HTTP
content-security-policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com here, by default, content is only permitted from the document's origin, with the following exceptions: images may load from anywhere (note the "*" wildcard).
... violation report syntax the report json object contains the following data: blocked-uri the uri of the resource that was blocked from loading by the content security policy.
...it uses the following policy, disallowing everything but stylesheets from cdn.example.com.
...a browser capable of enforcing csp would send the following violation report as a post request to http://example.com/_/csp-reports, when the document is visited: { "csp-report": { "document-uri": "http://example.com/signup.html", "referrer": "", "blocked-uri": "http://example.com/css/style.css", "violated-directive": "style-src cdn.example.com", "original-policy": "default-src 'none'; style-src cdn.example.com; report-uri /_/csp-rep...

Using Feature Policy - HTTP
allowlist an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...it has the following structure.
... for example, the following are equivalent: feature-policy: unsized-media 'none'; geolocation 'self' https://example.com; camera *; feature-policy: unsized-media 'none' feature-policy: geolocation 'self' https://example.com feature-policy: camera *; the iframe allow attribute the second way to use feature policy is for controlling content within an iframe.
... send the following the http header: feature-policy: layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none'; using the <iframe> allow attribute: <iframe src="https://example.com..." allow="layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none';"></iframe...

Set-Cookie - HTTP
it also must not contain a separator character like the following: ( ) < > @ , ; : \ " / [ ] ?
... lax: the cookie is withheld on cross-site subrequests, such as calls to load images or frames, but is sent when a user navigates to the url from an external site, such as by following a link.
... the following cookie will be rejected if set by a server hosted on originalcompany.com: set-cookie: qwerty=219ffwef9w0f; domain=somecompany.co.uk a cookie for a sub domain of the serving domain will be rejected.
... the following cookie will be rejected if set by a server hosted on example.com: set-cookie: sessionid=e8bb43229de9; domain=foo.example.com cookie prefixes cookies names prefixed with __secure- or __host- can be used only if they are set with the secure attribute from a secure (https) origin.

Firefox user agent string reference - HTTP
windows windows user agents have the following variations, where x.y is the windows nt version (for instance, windows nt 6.1).
... form factor gecko user agent string phone mozilla/5.0 (android 4.4; mobile; rv:41.0) gecko/41.0 firefox/41.0 tablet mozilla/5.0 (android 4.4; tablet; rv:41.0) gecko/41.0 firefox/41.0 focus for android from version 1, focus is powered by android webview and uses the following user agent string format: mozilla/5.0 (linux; <android version> <build tag etc.>) applewebkit/<webkit rev> (khtml, like gecko) version/4.0 focus/<focusversion> chrome/<chrome rev> mobile safari/<webkit rev> tablet versions on webview mirror mobile, but do not contain a mobile token.
...sion/4.0 klar/1.0 chrome/58.0.3029.83 mobile safari/537.36 4.1+ (webview) mozilla/5.0 (linux; android 7.0) applewebkit/537.36 (khtml, like gecko) version/4.0 focus/4.1 chrome/62.0.3029.83 mobile safari/537.36 6.0+ (geckoview) mozilla/5.0 (android 7.0; mobile; rv:62.0) gecko/62.0 firefox/62.0 focus for ios version 7 of focus for ios uses a user agent string with the following format: mozilla/5.0 (iphone; cpu iphone os 12_1 like mac os x) applewebkit/605.1.15 (khtml, like gecko) fxios/7.0.4 mobile/16b91 safari/605.1.15 note: this user agent was retrieved from an iphone xr simulator and may be different on device.
... firefox for fire tv version 3 (and probably earlier) of firefox for fire tv use a user agent string with the following format: mozilla/5.0 (linux; <android version>) applewebkit/537.36 (khtml, like gecko) version/4.0 focus/<firefoxversion> chrome/<chrome rev> safari/<webkit rev> firefox tv version user agent string v3.0 mozilla/5.0 (linux; android 7.1.2) applewebkit/537.36 (khtml, like gecko) version/4.0 focus/3.0 chrome/59.0.3017.125 safari/537.36 firefox for echo show from version 1.1, firefox for echo show uses a user agent string with the following format: mozilla/5.0 (linux; <android version>) applewebkit/537.36 (khtml, like gecko) version/4.0 focus/<firefoxversion> chrome/<chrome rev> safari/<webkit rev> firefox for echo show version user ag...

Introduction - JavaScript
what you should already know this guide assumes you have the following basic background: a general understanding of the internet and the world wide web (www).
... where to find javascript information the javascript documentation on mdn includes the following: learn web development provides information for beginners and introduces basic concepts of programming and the internet.
... in the following pages, this guide introduces you to the javascript syntax and language features, so that you will be able to write more complex applications.
...you will learn what these mean, but for now they can be thought of as doing the following: massively improve performance.

Deprecated and obsolete features - JavaScript
regexp properties the following properties are deprecated.
... rightcontext the substring following the most recent match.
... the following are now properties of regexp instances, no longer of the regexp object: property description global whether or not to test the regular expression against all possible matches in a string, or only against the first.
... the following traps are obsolete: hasown (bug 980565, firefox 33).

Array.prototype.sort() - JavaScript
so, the compare function has the following form: function compare(a, b) { if (a is less than b by some ordering criterion) { return -1; } if (a is greater than b by the ordering criterion) { return 1; } // a must be equal to b return 0; } to compare numbers instead of strings, the compare function can simply subtract b from a.
... the following function will sort the array in ascending order (if it doesn't contain infinity and nan): function comparenumbers(a, b) { return a - b; } the sort method can be conveniently used with function expressions: var numbers = [4, 2, 5, 1, 3]; numbers.sort(function(a, b) { return a - b; }); console.log(numbers); // [1, 2, 3, 4, 5] es2015 provides arrow function expressions with even shorter syntax.
..., b) { return a.value - b.value; }); // sort by name items.sort(function(a, b) { var namea = a.name.touppercase(); // ignore upper and lowercase var nameb = b.name.touppercase(); // ignore upper and lowercase if (namea < nameb) { return -1; } if (namea > nameb) { return 1; } // names must be equal return 0; }); examples creating, displaying, and sorting an array the following example creates four arrays and displays the original array, then the sorted arrays.
...orted without a compare function:', numericstringarray.sort()); console.log('sorted with comparenumbers:', numericstringarray.sort(comparenumbers)); console.log('mixednumericarray:', mixednumericarray.join()); console.log('sorted without a compare function:', mixednumericarray.sort()); console.log('sorted with comparenumbers:', mixednumericarray.sort(comparenumbers)); this example produces the following output.

Array - JavaScript
as a result, '2' and '02' would refer to two different slots on the years object, and the following example could be true: console.log(years['2'] != years['02']) relationship between length and numerical properties a javascript array's length property and numerical properties are connected.
... to help explain these properties and elements, see this example and then refer to the table below: // match one d followed by one or more b's followed by one d // remember matched b's and the following d // ignore case const myre = /d(b+)(d)/i const myarray = myre.exec('cdbbdbsbz') the properties and elements returned from this match are as follows: property/element description example input read only the original string against which the regular expression was matched.
... examples creating an array the following example creates an array, msgarray, with a length of 0, then assigns values to msgarray[0] and msgarray[99], changing the length of the array to 100.
... let msgarray = [] msgarray[0] = 'hello' msgarray[99] = 'world' if (msgarray.length === 100) { console.log('the length is 100.') } creating a two-dimensional array the following creates a chessboard as a two-dimensional array of strings.

Function.prototype.bind() - JavaScript
a bound function has the following internal properties: [[boundtargetfunction]] the wrapped function object [[boundthis]] the value that is always passed as this value when calling the wrapped function.
... when a bound function is called, it calls internal method [[call]] on [[boundtargetfunction]], with following arguments call(boundthis, ...args).
...osest thing possible to the ecmascript 5 // internal iscallable function throw new typeerror('function.prototype.bind - ' + 'what is trying to be bound is not callable'); } return function(){ var funcargs = args.concat(slice.call(arguments)) return thatfunc.apply(thatarg, funcargs); }; }; })(); you can partially work around this by inserting the following code at the beginning of your scripts, allowing use of much of the functionality of bind() in implementations that do not natively support it.
... in the following piece of code, slice() is a bound function to the apply() function of function.prototype, with the this value set to the slice() function of array.prototype.

Object.prototype.constructor - JavaScript
let o = {} o.constructor === object // true let o = new object o.constructor === object // true let a = [] a.constructor === array // true let a = new array a.constructor === array // true let n = new number(3) n.constructor === number // true examples displaying the constructor of an object the following example creates a constructor (tree) and an object of that type (thetree).
... function tree(name) { this.name = name } let thetree = new tree('redwood') console.log('thetree.constructor is ' + thetree.constructor) this example displays the following output: thetree.constructor is function tree(name) { this.name = name } changing the constructor of an object the following example shows how to modify the constructor value of generic objects.
...tion () {}, math, new number(), 1, // remains unchanged new object(), {}, new regexp(), /(?:)/, new string(), 'test' // remains unchanged ] for (let i = 0; i < types.length; i++) { types[i].constructor = type types[i] = [types[i].constructor, types[i] instanceof type, types[i].tostring()] } console.log(types.join('\n')) this example displays the following output (comments added for reference): function type() {},false, // new array() function type() {},false, // [] function type() {},false,false // new boolean() function boolean() { [native code] },false,true // true function type() {},false,m...
... take the following case: the object has the create() method to create itself.

Object.defineProperties() - JavaScript
data descriptors and accessor descriptors may optionally contain the following keys: configurable true if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object.
... a data descriptor also has the following optional keys: value the value associated with the property.
... an accessor descriptor also has the following optional keys: get a function which serves as a getter for the property, or undefined if there is no getter.
... polyfill assuming a pristine execution environment with all names and properties referring to their initial values, object.defineproperties is almost completely equivalent (note the comment in iscallable) to the following reimplementation in javascript: function defineproperties(obj, properties) { function converttodescriptor(desc) { function hasproperty(obj, prop) { return object.prototype.hasownproperty.call(obj, prop); } function iscallable(v) { // nb: modify as necessary if other values than functions are callable.

Object.prototype.toString() - JavaScript
the following code illustrates this: const o = new object(); o.tostring(); // returns [object object] note: starting in javascript 1.8.5, tostring() called on null returns [object null], and undefined returns [object undefined], as defined in the 5th edition of ecmascript and subsequent errata.
... the following code defines the dog object type and creates thedog, an object of type dog: function dog(name, breed, color, sex) { this.name = name; this.breed = breed; this.color = color; this.sex = sex; } thedog = new dog('gabby', 'lab', 'chocolate', 'female'); if you call the tostring() method on this custom object, it returns the default value inherited from object: thedog.tostring(); // return...
...s [object object] the following code creates and assigns dogtostring() to override the default tostring() method.
...ame + ' is a ' + this.sex + ' ' + this.color + ' ' + this.breed; return ret; } or, using es6 template strings: dog.prototype.tostring = function dogtostring() { return `dog ${this.name} is a ${this.sex} ${this.color} ${this.breed}`; } with the preceding code in place, any time thedog is used in a string context, javascript automatically calls the dogtostring() function, which returns the following string: "dog gabby is a female chocolate lab" using tostring() to detect object class tostring() can be used with every object and (by default) allows you to get its class.

handler.defineProperty() - JavaScript
syntax const p = new proxy(target, { defineproperty: function(target, property, descriptor) { } }); parameters the following parameters are passed to the defineproperty() method.
... interceptions this trap can intercept these operations: object.defineproperty() reflect.defineproperty() invariants if the following invariants are violated, the proxy will throw a typeerror: a property cannot be added, if the target object is not extensible.
... examples trapping of defineproperty the following code traps object.defineproperty().
...st p = new proxy({}, { defineproperty: function(target, prop, descriptor) { console.log('called: ' + prop); return true; } }); const desc = { configurable: true, enumerable: true, value: 10 }; object.defineproperty(p, 'a', desc); // "called: a" when calling object.defineproperty() or reflect.defineproperty(), the descriptor passed to defineproperty() trap has one restriction—only following properties are usable (non-standard properties will be ignored): enumerable configurable writable value get set const p = new proxy({}, { defineproperty(target, prop, descriptor) { console.log(descriptor); return reflect.defineproperty(target, prop, descriptor); } }); object.defineproperty(p, 'name', { value: 'proxy', type: 'custom' }); // { value: 'proxy' } specific...

handler.get() - JavaScript
syntax const p = new proxy(target, { get: function(target, property, receiver) { } }); parameters the following parameters are passed to the get() method.
... interceptions this trap can intercept these operations: property access: proxy[foo]and proxy.bar inherited property access: object.create(proxy)[foo] reflect.get() invariants if the following invariants are violated, the proxy will throw a typeerror: the value reported for a property must be the same as the value of the corresponding target object property if the target object property is a non-writable, non-configurable own data property.
... examples trap for getting a property value the following code traps getting a property value.
... const p = new proxy({}, { get: function(target, property, receiver) { console.log('called: ' + property); return 10; } }); console.log(p.a); // "called: a" // 10 the following code violates an invariant.

handler.getOwnPropertyDescriptor() - JavaScript
syntax const p = new proxy(target, { getownpropertydescriptor: function(target, prop) { } }); parameters the following parameters are passed to the getownpropertydescriptor() method.
... interceptions this trap can intercept these operations: object.getownpropertydescriptor() reflect.getownpropertydescriptor() invariants if the following invariants are violated, the proxy will throw a typeerror: getownpropertydescriptor() must return an object or undefined.
... examples trapping of getownpropertydescriptor the following code traps object.getownpropertydescriptor().
... const p = new proxy({ a: 20}, { getownpropertydescriptor: function(target, prop) { console.log('called: ' + prop); return { configurable: true, enumerable: true, value: 10 }; } }); console.log(object.getownpropertydescriptor(p, 'a').value); // "called: a" // 10 the following code violates an invariant.

handler.has() - JavaScript
syntax const p = new proxy(target, { has: function(target, prop) { } }); parameters the following parameters are passed to has() method.
... interceptions this trap can intercept these operations: property query: foo in proxy inherited property query: foo in object.create(proxy) with check: with(proxy) { (foo); } reflect.has() invariants if the following invariants are violated, the proxy will throw a typeerror: a property cannot be reported as non-existent, if it exists as a non-configurable own property of the target object.
... examples trapping the in operator the following code traps the in operator.
... const p = new proxy({}, { has: function(target, prop) { console.log('called: ' + prop); return true; } }); console.log('a' in p); // "called: a" // true the following code violates an invariant.

handler.isExtensible() - JavaScript
syntax const p = new proxy(target, { isextensible: function(target) { } }); parameters the following parameter is passed to the isextensible() method.
... interceptions this trap can intercept these operations: object.isextensible() reflect.isextensible() invariants if the following invariants are violated, the proxy will throw a typeerror: object.isextensible(proxy) must return the same value as object.isextensible(target).
... examples trapping of isextensible the following code traps object.isextensible().
... const p = new proxy({}, { isextensible: function(target) { console.log('called'); return true; } }); console.log(object.isextensible(p)); // "called" // true the following code violates the invariant.

handler.ownKeys() - JavaScript
syntax const p = new proxy(target, { ownkeys: function(target) { } }); parameters the following parameter is passed to the ownkeys() method.
... interceptions this trap can intercept these operations: object.getownpropertynames() object.getownpropertysymbols() object.keys() reflect.ownkeys() invariants if the following invariants are violated, the proxy will throw a typeerror: the result of ownkeys() must be an array.
... examples trapping of getownpropertynames the following code traps object.getownpropertynames().
... const p = new proxy({}, { ownkeys: function(target) { console.log('called'); return ['a', 'b', 'c']; } }); console.log(object.getownpropertynames(p)); // "called" // [ 'a', 'b', 'c' ] the following code violates an invariant.

handler.preventExtensions() - JavaScript
syntax const p = new proxy(target, { preventextensions: function(target) { } }); parameters the following parameter is passed to the preventextensions() method.
... interceptions this trap can intercept these operations: object.preventextensions() reflect.preventextensions() invariants if the following invariants are violated, the proxy will throw a typeerror: object.preventextensions(proxy) only returns true if object.isextensible(proxy) is false.
... examples trapping of preventextensions the following code traps object.preventextensions().
... const p = new proxy({}, { preventextensions: function(target) { console.log('called'); object.preventextensions(target); return true; } }); console.log(object.preventextensions(p)); // "called" // false the following code violates the invariant.

String.prototype.indexOf() - JavaScript
for example, the following expression returns -1: 'blue whale'.indexof('blue') // returns -1 checking occurrences note that 0 doesn't evaluate to true and -1 doesn't evaluate to false.
... therefore, when checking if a specific string exists within another string, the correct way to check would be: 'blue whale'.indexof('blue') !== -1 // true 'blue whale'.indexof('bloe') !== -1 // false ~('blue whale'.indexof('bloe')) // 0, which is falsy examples using indexof() the following example uses indexof() to locate values in the string "brave new world".
... const str = 'brave new world' console.log('index of first w from start is ' + str.indexof('w')) // logs 8 console.log('index of "new" from start is ' + str.indexof('new')) // logs 6 indexof() and case-sensitivity the following example defines two string variables.
... const mystring = 'brie, pepper jack, cheddar' const mycapstring = 'brie, pepper jack, cheddar' console.log('mystring.indexof("cheddar") is ' + mystring.indexof('cheddar')) // logs 19 console.log('mycapstring.indexof("cheddar") is ' + mycapstring.indexof('cheddar')) // logs -1 using indexof() to count occurrences of a letter in a string the following example sets count to the number of occurrences of the letter e in the string str: const str = 'to be, or not to be, that is the question.' let count = 0 let position = str.indexof('e') while (position !== -1) { count++ position = str.indexof('e', position + 1) } console.log(count) // displays 4 specifications specification ecmascript (ecma-262)the definition of '...

yield - JavaScript
description the yield keyword pauses generator function execution and the value of the expression following the yield keyword is returned to the generator's caller.
...each time the generator's next() method is called, the generator resumes execution, and runs until it reaches one of the following: a yield, which causes the generator to once again pause and return the generator's new value.
... unfortunately, next() is asymmetric, but that can’t be helped: it always sends a value to the currently suspended yield, but returns the operand of the following yield.
... examples using yield the following code is the declaration of an example generator function.

switch - JavaScript
if no default clause is found, the program continues execution at the statement following the end of switch.
... the optional break statement associated with each case label ensures that the program breaks out of switch once the matched statement is executed and continues execution at the statement following switch.
... examples using switch in the following example, if expr evaluates to bananas, the program matches the value with case case 'bananas' and executes the associated statement.
... when break is encountered, the program breaks out of switch and executes the statement following switch.

throw - JavaScript
each of the following throws an exception: throw 'error2'; // generates an exception with a string value throw 42; // generates an exception with the value 42 throw true; // generates an exception with the value true throw new error('required'); // generates an error object with the message of required also note that the throw statement is affected by automatic semicolon insertion (asi) as no line termin...
...the following example creates an object of type userexception and uses it in a throw statement.
...) { return months[mo]; } else { throw new userexception('invalidmonthno'); } } try { // statements to try var mymonth = 15; // 15 is out of bound to raise the exception var monthname = getmonthname(mymonth); } catch (e) { monthname = 'unknown'; console.error(e.message, e.name); // pass exception object to err handler } another example of throwing an object the following example tests an input string for a u.s.
...the following example catches an exception with a numeric value and rethrows it if the value is over 50.

Template literals (Template strings) - JavaScript
using normal strings, you would have to use the following syntax in order to get multi-line strings: console.log('string text line 1\n' + 'string text line 2'); // "string text line 1 // string text line 2" using template literals, you can do the same like this: console.log(`string text line 1 string text line 2`); // "string text line 1 // string text line 2" expression interpolation in order to embed expressions within normal strings, you would u...
...se the following syntax: let a = 5; let b = 10; console.log('fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.'); // "fifteen is 15 and // not 20." now, with template literals, you are able to make use of the syntactic sugar, making substitutions like this more readable: let a = 5; let b = 10; console.log(`fifteen is ${a + b} and not ${2 * a + b}.`); // "fifteen is 15 and // not 20." nesting templates in certain cases, nesting a template is the easiest (and perhaps more readable) way to have configurable strings.
...(alternatively, it can return something completely different, as described in one of the following examples.) the name of the function used for the tag can be whatever you want.
... let str = string.raw`hi\n${2+3}!`; // "hi\n5!" str.length; // 6 array.from(str).join(','); // "h,i,\,n,5,!" tagged templates and escape sequences es2016 behavior as of ecmascript 2016, tagged templates conform to the rules of the following escape sequences: unicode escapes started by "\u", for example \u00a9 unicode code point escapes indicated by "\u{}", for example \u{2f804} hexadecimal escapes started by "\x", for example \xa9 octal literal escapes started by "\0o" and followed by one or more digits, for example \0o251 this means that a tagged template like the following is problematic, because, per ecmascript grammar, a...

MathML documentation index - MathML
10 <maction> mathml, mathml reference, mathml:element, mathml:enlivening expressions the following example uses the "toggle" actiontype: 11 <math> mathml, mathml reference, mathml:element the top-level element in mathml is <math>.
...use the following syntax: <mover> base overscript </mover> 23 <mpadded> mathml, mathml reference, mathml:element, mathml:general layout schemata the mathml <mpadded> element is used to add extra padding and to set the general adjustment of position and size of enclosed contents.
...the square root accepts only one argument, which leads to the following syntax: <msqrt> base </msqrt>.
...it uses the following syntax: <munder> base underscript </munder> 39 <munderover> mathml, mathml reference, mathml:element, mathml:script and limit schemata the mathml <munderover> element is used to attach accents or limits both under and over an expression.

Autoplay guide for media and Web Audio APIs - Web media technologies
that means that both of the following are considered autoplay behavior, and are therefore subject to the browser's autoplay blocking policy: <audio src="/music.mp4" autoplay> and audioelement.play(); the following web features and apis may be affected by autoplay blocking: the html <audio> and <video> elements the web audio api from the user's perspective, a web page or app that spontaneously starts making noise without war...
... 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.
...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 autoplay functionality the element has been created during page load enough media has been received to begin playback and continue to play through to the end of the media without interruption, assuming there are no dramatic changes in network performance or bandwidth.
...ument's domain to use the feature-policy header to only allow media to autoplay from the document's origin: feature-policy: autoplay 'self' to do the same for an <iframe>: <iframe src="mediaplayer.html" allow="autoplay 'src'"> </iframe> example: allowing autoplay and fullscreen mode adding fullscreen api permission to the previous example results in a feature-policy header like the following if fullscreen access is allowed regardless of the domain; a domain restriction can be added as well as needed.

Image file type and format guide - Web media technologies
image file type details the following sections provide a brief overview of each of the image file types supported by web browsers.
... gif supports simple animation, in which following an initial full-size frame, a series of images reflecting the parts of the image that change with each frame are provided.
...following the directory comes the data for the icons.
...for example, the following code represents an xbm image which is 8 pixels by 8 pixels, with those pixels in a black-and-white checkerboard pattern: #define square8_width 8 #define square8_height 8 static unsigned char square8_bits[] = { 0xaa, 0x55, 0xaa, 0x55, 0xaa, 0x55, 0xaa, 0x55 }; mime type image/xbm, image-xbitmap file extension(s) .xbm specification none browser comp...

Codecs used by WebRTC - Web media technologies
for details on webrtc-related considerations for each codec, see the sub-sections below by following the links on each codec's name.
...those are listed in the following table.
...those are listed in the following table.
... bit rate recommendations given a 20 millisecond frame size, the following table shows the recommended bit rates for various forms of media.

requiredFeatures - SVG: Scalable Vector Graphics
feature strings the following are the feature strings for the requiredfeatures attribute.
... http://www.w3.org/tr/svg11/feature#svg at least one of the following feature is supported: http://www.w3.org/tr/svg11/feature#svg-static http://www.w3.org/tr/svg11/feature#svg-animation http://www.w3.org/tr/svg11/feature#svg-dynamic http://www.w3.org/tr/svg11/feature#svgdom http://www.w3.org/tr/svg11/feature#svgdom at least one of the following feature is supported: http://www.w3.org/tr/svg11/feature#svgdom-static http://www.w3.org/tr/svg...
...11/feature#svgdom-animation http://www.w3.org/tr/svg11/feature#svgdom-dynamic http://www.w3.org/tr/svg11/feature#svg-static the browser supports all the following features: http://www.w3.org/tr/svg11/feature#coreattribute http://www.w3.org/tr/svg11/feature#structure http://www.w3.org/tr/svg11/feature#containerattribute http://www.w3.org/tr/svg11/feature#conditionalprocessing http://www.w3.org/tr/svg11/feature#image http://www.w3.org/tr/svg11/feature#style http://www.w3.org/tr/svg11/feature#viewportattribute http://www.w3.org/tr/svg11/feature#shape http://www.w3.org/tr/svg11/feature#text http://www.w3.org/tr/svg11/feature#paintattribute http://www.w3.org/tr/svg11/feature#opacityattribute http://www.w3.org/tr/svg11/feature#graphicsattribute http://www.w3.org/tr/...
... http://www.w3.org/tr/svg11/feature#svg-dynamic the browser supports all of the language features from http://www.w3.org/tr/svg11/feature#svg-animation plus the following features: http://www.w3.org/tr/svg11/feature#hyperlinking http://www.w3.org/tr/svg11/feature#scripting http://www.w3.org/tr/svg11/feature#view http://www.w3.org/tr/svg11/feature#cursor http://www.w3.org/tr/svg11/feature#graphicaleventsattribute http://www.w3.org/tr/svg11/feature#documenteventsattribute http://www.w3.org/tr/svg11/feature#animationeventsattribute http://www.w3...

SVG animation with SMIL - SVG: Scalable Vector Graphics
animating attributes of an element the following example animates the cx attribute of a circle.
...itle> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1"> <animatetransform attributename="transform" begin="0s" dur="20s" type="rotate" from="0 60 60" to="360 100 60" repeatcount="indefinite" /> </rect> </svg> animation following a path the <animatemotion> element lets you animate an element position and rotation according to a path.
...you can set the attribute to define whether the object rotates following the tangent of the path.
...tle>svg smil animate with path</title> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="3s" repeatcount="indefinite" /> </circle> </svg> view live sample example 2: curved motion same example as before with a curved path and following the direction of the path.

Same-origin policy - Web security
(a "tuple" is a set of items that together comprise a whole — a generic form for double/triple/quadruple/quintuple/etc.) the following table gives examples of origin comparisons with the url http://store.company.com/dir/page.html: url outcome reason http://store.company.com/dir2/other.html same origin only the path differs http://store.company.com/dir/inner/another.html same origin only the path differs https://store.company.com/page.html failure different protocol ...
... for example, assume a script from the document at http://store.company.com/dir/other.html executes the following: document.domain = "company.com"; afterward, the page can pass the same-origin check with http://company.com/dir/page.html (assuming http://company.com/dir/page.html sets its document.domain to "company.com" to indicate that it wishes to allow that - see document.domain for more).
... window the following cross-origin access to these window properties is allowed: methods window.blur window.close window.focus window.postmessage attributes window.closed read only.
... location the following cross-origin access to location properties is allowed: methods location.replace attributes urlutils.href write-only.

Introduction to using XPath in JavaScript - XPath
simple types when the desired result type in resulttype is specified as either: number_type - a double string_type - a string boolean_type - a boolean we obtain the returned value of the expression by accessing the following properties respectively of the xpathresult object.
... numbervalue stringvalue booleanvalue example the following uses the xpath expression count(//p) to obtain the number of <p> elements in an html document: var paragraphcount = document.evaluate( 'count(//p)', document, null, xpathresult.any_type, null ); alert( 'this document contains ' + paragraphcount.numbervalue + ' paragraph elements' ); although javascript allows us to convert the number to a string for display, the xpath interface will not automatically convert the numerical result if the stringvalue property is requested, so the following code will not work: var paragraphcount = document.evaluate('count(//p)', document, null, xpathresult.any_type, null ); alert( 'this document contains ' + paragraphcount.stringvalue + ' paragraph elements' ); instead, it will return an except...
...none yet =====any_type example===== <pre> </pre> examples within an html document the following code is intended to be placed in any javascript fragment within or linked to the html document against which the xpath expression is to be evaluated.
... evaluating against an xml document within an extension the following uses an xml document located at chrome://yourextension/content/peopledb.xml as an example.

Compiling from Rust to WebAssembly - WebAssembly
install rust install rust by going to the install rust page and following the instructions.
...to download and install it, enter the following command into your terminal: $ cargo install wasm-pack install node.js we are building an npm package in this tutorial, and so you need to have node.js and npm installed.
...$ mkdir site $ cd site $ npm link hello-wasm create a new file, package.json, and put the following code in it: { "scripts": { "serve": "webpack-dev-server" }, "dependencies": { "hello-wasm": "^0.1.0" }, "devdependencies": { "webpack": "^4.25.1", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.10" } } note that you need to fill in your own username, after the @, in the dependencies section.
...create webpack.config.js and put the following in it: const path = require('path'); module.exports = { entry: "./index.js", output: { path: path.resolve(__dirname, "dist"), filename: "index.js", }, mode: "development" }; now we need an html file; create index.html and give it the following contents: <!doctype html> <html> <head> <meta charset="utf-8"> <title>hello-wasm example</title> </head> <body> <script src="./index.js"></script> </body> </html> finally, create the index.js referenced in the html file and give it these contents: const js = import("./node_modules/hello-wasm/hello_wasm.js"); js.then(js => { js.greet("webassembly"); }); note that you need to fill in your npm username again.

Working with Events - Archive of obsolete content
for example, the following add-on registers a listener with the tabs module to listen for the ready event, and logs a string to the console reporting the event: var tabs = require("sdk/tabs"); tabs.on("ready", function () { console.log("tab loaded"); }); it is not possible to enumerate the set of listeners for a given event.
... the following add-on creates a button and assigns a listener to the onclick property of the options object supplied to the button's constructor.
... in the following add-on, we add two listeners to the tabs module's ready event.

widget - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the widget is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the widget has been loaded...
...this may have one of the following values: "start": load content scripts immediately after the document element for the widget is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the widget has been loaded, at the time th...
...this may have one of the following values: "start": load content scripts immediately after the document element for the widget view is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the widget view has been loaded, at t...

content/loader - Archive of obsolete content
example: the following code creates a wrapper on a hidden frame that reloads a web page in the frame every time the contenturl property is changed: var hiddenframes = require("sdk/frame/hidden-frame"); var { loader } = require("sdk/content/content"); var pageloader = loader.compose({ constructor: function pageloader(options) { options = options || {}; if (options.contenturl) this.contenturl = options.c...
...this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the wi...
... allow permissions for the content, with the following keys: ...

content/symbiont - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at...
... allow object permissions for the content, with the following keys: script boolean whether or not to execute script in the content.
...this may have one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the wi...