browser.altClickSave
the preference browser.altclicksave controls whether clicking a link while holding the alt key starts the download of that link.
... the preference browser.altclicksave controls whether clicking a link while holding the alt key starts the download of that link.

clicktoscroll - Archive of obsolete content
« xul reference home clicktoscroll type: boolean clicktoscroll, if true, the arrows must be clicked to scroll the scrollbox content.

panel.consumeoutsideclicks - Archive of obsolete content
« xul reference home consumeoutsideclicks type: boolean controls whether or not the event that caused the popup to be automatically dismissed (or "rolled up") should be consumed or be dispatched as a normal event.

click - Archive of obsolete content
« xul reference home click() return type: no return value calls the onclick handler for the element.

clickSelectsAll - Archive of obsolete content
« xul reference clickselectsall type: boolean if set to true, the contents of the textbox are selected when focused; otherwise, the cursor is left unchanged.

clicktoscroll - Archive of obsolete content
« xul reference home clicktoscroll type: boolean if true, the up or down arrow(s) must be clicked to scroll the content.

Index - Web APIs
fer.mozsetdataat() method is used to add data to a specific index in the drag event's data transfer object.
... read-only property of the document interface returns an htmlcollection object containing one or more htmlembedelements representing the <embed> elements in the current document.
... the toggleattribute() method of the element interface toggles a boolean attribute (removing it if it is present and adding it if it is not present) on the given element.
...And 75 more matches

ui/button/toggle - Archive of obsolete content
experimental add a toggle button to the firefox user interface.
...rface.
...e you can create buttons that function like a check box, representing an on/off choice.
...And 53 more matches

context-menu - Archive of obsolete content
nstead appear in an overflow menu to avoid making the context menu too large.
...or the occurrence of specific contexts.
...to the page or the node the user clicked to open the menu.
...And 50 more matches

ui/button/action - Archive of obsolete content
experimental add a button to the firefox user interface.
... this module you can create buttons that display icons and can respond to click events.
... events.
...And 44 more matches

Introduction to events - Learn web development
e examples, but let's recap just to cement our knowledge.
...de, we store a reference to the button inside a constant called btn, using the document.queryselector() function.
...n inside a constant called btn, using the document.queryselector() function.
...And 37 more matches

EventTarget.addEventListener() - Web APIs
ed to pass a boolean, and we pass false as the value of the usecapture parameter.
... <tr><td id="t2">two</td></tr> </table> javascript // function to change the content of t2 function modifytext() { const t2 = document.getelementbyid("t2"); if (t2.firstchild.nodevalue == "three") { t2.firstchild.nodevalue = "two"; } else { t2.firstchild.nodevalue = "three"; } } // add event listener to table const el = document.getelementbyid("outside"); el.addeventlistener("click", modifytext, false); in this code, modifytext() is a listener for click events registered using addeventlistener().
...t2 = document.getelementbyid("t2"); if (t2.firstchild.nodevalue == "three") { t2.firstchild.nodevalue = "two"; } else { t2.firstchild.nodevalue = "three"; } } // add event listener to table const el = document.getelementbyid("outside"); el.addeventlistener("click", modifytext, false); in this code, modifytext() is a listener for click events registered using addeventlistener().
...And 31 more matches

Componentizing our Svelte app - Learn web development
— components/filterbutton.svelte.
...n-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="btn toggle-btn" class:btn__primary={filter === 'active'} aria-pressed={filter === 'active'} on:click={()=> filter = 'active'} > <span class="visually-hidden">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === 'completed'} aria-pressed={filter === 'completed'} on:click={()=> filter = 'completed'} > <span class="visually-hidden">show</span> <span>completed</span> <span class=...
...on 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 {variable}, that's why we could replace <filterbutton filter={filter} /> with <filterbutton {filter} />.
...And 27 more matches

Index - Archive of obsolete content
ded and installed by a user, or provided pre-packaged with an application or by an external program.
...ngs.
....
...And 26 more matches

Tips - Firefox Developer Tools
general screenshots: entire page: click the screenshot button (; needs to be enabled first).
... general screenshots: entire page: click the screenshot button (; needs to be enabled first).
... general screenshots: entire page: click the screenshot button (; needs to be enabled first).
...And 26 more matches

widget - Archive of obsolete content
n particular, for a simple button, try the action button or toggle button apis, and for a more complex widget try the toolbar or sidebar apis.
...ry the action button or toggle button apis, and for a more complex widget try the toolbar or sidebar apis.
... on amo.
...And 23 more matches

Index - Archive of obsolete content
51 checkstate xul attributes, xul reference no summary!
... xul attributes, xul reference no summary!
... summary!
...And 22 more matches

Building up a basic demo with PlayCanvas editor - Game development
al involving editing a 3d rolling ball game.
... what the page looks like — you can create projects and manage them, change their settings etc.
...ect by clicking on the new button: the resulting dialog box will show a few different options.
...And 22 more matches

Localizing with Koala
ple "de" (for german) or "es-es" (for spanish in spain).
...s tutorial on mdc, you will see two string that need to be translated: add "mdc search" manage search engines...
... choose "koala" in the templates list.
...And 21 more matches

What are browser developer tools? - Learn web development
firefox: menu ➤ web developer ➤ toggle tools, or tools ➤ web developer ➤ toggle tools chrome: more tools ➤ developer tools safari: develop ➤ show web inspector.
...loper ➤ toggle tools, or tools ➤ web developer ➤ toggle tools chrome: more tools ➤ developer tools safari: develop ➤ show web inspector.
...the develop menu, go to safari ➤ preferences ➤ advanced, and check the show develop menu in menu bar checkbox.
...And 20 more matches

Eclipse CDT
low you to use wildcards.
...rs of nsdisplaylistbuilder::isintransform, the results will not include the caller in nsobjectframe.cpp because that caller is wrapped in "#ifndef xp_macosx".
...ck type hierarchy" from the context menu.
...And 19 more matches

Examine and edit HTML - Firefox Developer Tools
he html pane is a breadcrumbs toolbar.
...matching words within the text.
...lements but not the letter "a" within the text content.
...And 18 more matches

Build your own function - Learn web development
urly 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 through, so we'll walk you through it bit by bit.
... use of the same createelement() and appendchild() functions we've already seen to create two new elements — a <p> and a <button> — and insert them in the page as children of the panel <div>.
...ragraph, and an 'x' inside the button.
...And 17 more matches

What is JavaScript? - Learn web development
text-align: center; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px; padding: 3px 10px; display: inline-block; cursor: pointer; } and finally, we can add some javascript to implement dynamic behaviour: const para = document.queryselector('p'); para.addeventlistener('click', updatename); function updatename() { let name = prompt('enter a new name'); para.textcontent = 'player 1: ' + name; } try clicking on this last version of the text label to see what happens (note also that you can find this demo on github — see the source code, or run it live)!
...e example for instance, we ask for a new name to be entered then store that name in a variable called name.
...en store that name in a variable called name.
...And 17 more matches

Multiple Firefox profiles
uctions below, applicable to your operating system.
... to your operating system.
...firefox instance running, you can open another profile from the integrated profile manager on any platform: type about:profiles into the browser url search bar.
...And 17 more matches

Debugging on Mac OS X
e files under the project directory rather than link to them (still the case in xcode 10?) which breaks debugging and the possibility to modify-rebuild-relaunch from inside xcode.
...ry rather than link to them (still the case in xcode 10?) which breaks debugging and the possibility to modify-rebuild-relaunch from inside xcode.
... and the possibility to modify-rebuild-relaunch from inside xcode.
...And 16 more matches

ARIA: button role - Accessibility
the button role should be used for clickable elements that trigger a response when activated by the user.
...pressed="false">save</div> the above example creates a simple button which is first in the focus order, though <button> or <input> with type="button" should be used for buttons: <button id="savechanges">save</button> note: if using role="button" instead of the semantic <button> or <input type="button"> elements, you will need to make the element focusable and have to define event handlers for click and keydown events, including the enter and space keys, in order to process the user's input.
...all for the button label to change from "mute" to "unmute," a toggle button would not be appropriate, so the the aria-pressed attribute would be omitted.
...And 16 more matches

DOM onevent handlers - Developer guides
s are addeventlistener() and the specific onevent handlers.
... handlers the onevent handlers are properties on certain dom elements to manage how that element reacts to events.
... events.
...And 16 more matches

Menu - Archive of obsolete content
the item may be modified.
...context is an object describing the context in which the menu was shown.
...n string label.
...And 15 more matches

JavaScript basics - Learn web development
it is available to use.
...ariables defined inside functions are only available inside those functions.
...scoping.
...And 15 more matches

Migrating from Firebug - Firefox Developer Tools
al functions for your convenience.
... firephp allow to log server-side messages to the firebug console.
...ke document.
...And 15 more matches

Examine and edit CSS - Firefox Developer Tools
this can help you understand why certain styles are not being applied.
...: next to the selector is a target icon: click this to highlight all nodes in the page that match this selector.
...is selector.
...And 15 more matches

Event reference
o the clipboard paste the item from the clipboard has been pasted keyboard events event name fired when keydown any key is pressed keypress any key (except shift, fn, or capslock) is in a pressed position (fired continuously).
... event name fired when keydown any key is pressed keypress any key (except shift, fn, or capslock) is in a pressed position (fired continuously).
... keyup any key is released mouse events event name fired when auxclick a pointing device button (any non-primary button) has been pressed and released on an element.
...And 14 more matches

Content Scripts - Archive of obsolete content
mportant differences: first, if you define an event listener by passing it as a string into setattribute(), then the listener is evaluated in the page's context, so it will not have access to any variables defined in the content script.
... is evaluated in the page's context, so it will not have access to any variables defined in the content script.
....
...And 13 more matches

XUL Events - Archive of obsolete content
ent, the blur event is passed after an element loses the focus.
... change this event is sent when the value of the textbox is changed.
...event is not sent until the focus is moved to another element.
...And 13 more matches

React interactivity: Events and state - Learn web development
: to learn about handling events and state in react, and use those to start making the case study app interactive.
...'ve only written vanilla javascript before now, you might be used to having a separate javascript file, where you query for some dom nodes and attach listeners to them.
... in react, we write event handlers directly on the elements in our jsx, like this: <button type="button" onclick={() => alert("hi!")} > say hi!
...And 13 more matches

Rich-Text Editing in Mozilla - Developer guides
ment){ return document.getelementbyid(aid).contentdocument; } else { // ie return document.frames[aid].document; } } the example contains a doricheditcommand function that makes it easier to execute commands on the iframe's document and keeps the html code clean.
...tains a doricheditcommand function that makes it easier to execute commands on the iframe's document and keeps the html code clean.
...en">green</option> <option value="black">black</option> </select> <select onchange="formatdoc('backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </div> <div id="toolbar2"> <img class="intlink" title="clean" onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqka...
...And 13 more matches

ContextMenus - Archive of obsolete content
context menus a context menu is a menu where the items on the menu are specific to the context in which the menu was opened.
... context menus a context menu is a menu where the items on the menu are specific to the context in which the menu was opened.
... context menus a context menu is a menu where the items on the menu are specific to the context in which the menu was opened.
...And 12 more matches

Popup Menus - Archive of obsolete content
hree different types of popups, described below.
... when you click on the little down arrows next to the back and forward buttons in a browser window.
... just add additional ones after the first menupopup element.
...And 12 more matches

XUL Event Propagation - Archive of obsolete content
s referred to as the event model.
...ion about user actions to the code behind the interface.
...tton responds to the user action by raising an event, a message meant to travel from one element within the interface to another.
...And 12 more matches

Network request list - Firefox Developer Tools
twork monitor shows a list of all the network requests made in the course of loading the page.
...u.
...re looking for easier to view.
...And 12 more matches

Color picker tool - CSS: Cascading Style Sheets
background-repeat: no-repeat; background-position: left 35px top 60%; text-align: right; border: 3px dashed rgb(221, 221, 221); border-radius: 15px; position: absolute; top: 50px; left: 20%; } #canvas[data-tutorial='drop']:after { content: "adjust, change or modify"; width: 40%; font-size: 24px; position: absolute; top: 130px; left: 32%; z-index: 2; } #canvas [data-tutorial='dblclick'] { background-color: #999 !important; } #canvas [data-tutorial='dblclick']:before { content: "double click to activate"; width: 80px; color: #fff; position: absolute; top: 10%; left: 20%; z-index: 2; } #canvas .sample { width: 100px; height: 100px; min-width: 20px; min-height: 20px; position: absolute; border: 1px solid rgba(255, 255, 255, 0.3); } #canvas .sample:hover { cursor...
...ent('input'); var info = document.createelement('span'); wrapper.classname = 'input'; wrapper.setattribute('data-topic', topic); info.textcontent = title; info.classname = 'name'; input.setattribute('type', 'text'); wrapper.appendchild(info); wrapper.appendchild(input); this.node.appendchild(wrapper); input.addeventlistener('change', onchangefunc); input.addeventlistener('click', function() { this.select(); }); this.subscribe(topic, function(value) { input.value = value; }); }; colorpicker.prototype.createchangemodebutton = function createchangemodebutton() { var button = document.createelement('div'); button.classname = 'switch_mode'; button.addeventlistener('click', function() { if (this.picker_mode === 'hsv') this.setpickermode('hsl'); ...
...e, setpickermode : setpickermode }; })(); /** * ui-slidersmanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.style.width = 50 + obj.precision * 10 + 'px'; input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parsefloat(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); return input; }; var slidercomponent = function slidercomponent(obj, sign) { var slider = document.createelement('div'); var startx = null; v...
...And 12 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
ent('input'); var info = document.createelement('span'); wrapper.classname = 'input'; wrapper.setattribute('data-topic', topic); info.textcontent = title; info.classname = 'name'; input.setattribute('type', 'text'); wrapper.appendchild(info); wrapper.appendchild(input); this.node.appendchild(wrapper); input.addeventlistener('change', onchangefunc); input.addeventlistener('click', function() { this.select(); }); this.subscribe(topic, function(value) { input.value = value; }); }; colorpicker.prototype.createchangemodebutton = function createchangemodebutton() { var button = document.createelement('div'); button.classname = 'switch_mode'; button.addeventlistener('click', function() { if (this.picker_mode === 'hsv') this.setpickermode('hsl'); ...
...ui-dropdown-list'; select.classname = 'ui-dropdown-select'; while (node.firstelementchild !== null) { option = node.firstelementchild; option_value = option.getattribute('data-value'); if (option_value === null) option.setattribute('data-value', uval); list.appendchild(node.firstelementchild); uval++; } node.appendchild(select); node.appendchild(list); select.onclick = this.toggle.bind(this); list.onclick = this.updatevalue.bind(this); document.addeventlistener('click', clickout); this.state = 0; this.time = 0; this.dropmenu = list; this.select = select; this.toggle(false); this.value = {}; this.topic = topic; if (label) select.textcontent = label; else this.setnodevalue(list.children[selected]); dropdowns[topic] = this; }; ...
....toggle(false); } this.time = date.now(); }; dropdown.prototype.setnodevalue = function setnodevalue(node, send_notify) { this.value['name'] = node.textcontent; this.value['value'] = node.getattribute('data-value'); this.select.textcontent = node.textcontent; this.select.setattribute('data-value', this.value['value']); if (send_notify !== false) notify.call(this); }; var clickout = function clickout(e) { if (active.state === 0 || e.target === active.dropmenu || e.target === active.select) return; active.toggle(false); }; var createdropdown = function createdropdown(topic, options) { var dropdown = document.createelement('div'); dropdown.setattribute('data-topic', topic); dropdown.classname = 'ui-dropdown'; for (var i in options) { var x = ...
...And 12 more matches

Creating a cross-browser video player - Developer guides
inc = document.getelementbyid('volinc'); var voldec = document.getelementbyid('voldec'); var progress = document.getelementbyid('progress'); var progressbar = document.getelementbyid('progress-bar'); var fullscreen = document.getelementbyid('fs'); using these handles, events can now be attached to each of the custom control buttons making them interactive.
...document.getelementbyid('progress-bar'); var fullscreen = document.getelementbyid('fs'); using these handles, events can now be attached to each of the custom control buttons making them interactive.
...es, events can now be attached to each of the custom control buttons making them interactive.
...And 12 more matches

panel - Archive of obsolete content
ssages between the content script and the main add-on code.
... the script using either the postmessage() api or (preferably, usually) the port api.
...mouse clicks on links inside the panel, and sends the target url to the main add-on code.
...And 11 more matches

Implementing the widget - Archive of obsolete content
efox 38.
... no longer works with firefox.
...le for replacements.
...And 11 more matches

Venkman Introduction - Archive of obsolete content
g this degree of flexibility, depth, and power in a visual debugging environment.
...ortunately, the xpinstall technology makes it possible to install new application modules in firefox by just clicking a hyperlink.
...ebugger.
...And 11 more matches

HTML: A good basis for accessibility - Learn web development
keyboard accessibility for more details.
...or for free, just by using the appropriate elements, e.g.
...on> <option>worried</option> </select> </div> </form> this means using links, buttons, form elements, and labels appropriately (including the <label> element for form controls).
...And 11 more matches

HTML: A good basis for accessibility - Learn web development
keyboard accessibility for more details.
...or for free, just by using the appropriate elements, e.g.
...on> <option>worried</option> </select> </div> </form> this means using links, buttons, form elements, and labels appropriately (including the <label> element for form controls).
...And 11 more matches

Practical positioning examples - Learn web development
mation available without having it fill the whole ui.
...> <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li> <li>aliquam ut porttitor urna.</li> <li>nulla facilisi</li> </ol> </article> </div> </section> so here we've got a <section> element with a class of info-box, which contains a <ul> and a <div>.
...vised against setting a fixed height on content containers if at all possible; it is ok in this circumstance because we have fixed content in our tabs.
...And 11 more matches

Vue conditional rendering: editing existing todos - Learn web development
a new file called todoitemeditform.vue.
...e code then read the below description to make sure you understand everything the component is doing before moving on.
...ng before moving on.
...And 11 more matches

Tutorial: Set a breakpoint - Firefox Developer Tools
s scratchpad.
...ck on the options gear at the upper right of the toolbox, and make sure that both “enable browser chrome and add-on debugging toolboxes” and “enable remote debugging” are checked.
...per right of the toolbox, and make sure that both “enable browser chrome and add-on debugging toolboxes” and “enable remote debugging” are checked.
...And 11 more matches

Window.open() - Web APIs
wobjectreference.focus(); /* else the window reference must exist and the window is not closed; therefore, we can bring it back on top of any other window with the focus() method.
...dfirefox.com/" target="promotefirefoxwindowname" onclick="openffpromotionpopup(); return false;" title="this link will create a new window or will re-use an already opened one" >promote firefox adoption</a></p> the above code solves a few usability problems related to links opening secondary window.
...te firefox adoption</a></p> the above code solves a few usability problems related to links opening secondary window.
...And 11 more matches

Making content editable - Developer guides
en">green</option> <option value="black">black</option> </select> <select onchange="formatdoc('backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </div> <div id="toolbar2"> <img class="intlink" title="clean" onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqka...
...:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqkaiskqci2pdc4qbg+oajc0ewadncogo6anqkkoiqa7" /> <img class="intlink" title="print" onclick="printdoc();" src="data:image/png;base64,ivborw0kggoaaaansuheugaaabyaaaawcayaaadetgw7aaaabgdbtueaalgpc/xhbqaaaazis0deap8a/wd/ol2nkwaaaalwsflzaaalewaacxmbajqcgaaaaad0su1fb9oebxczfmgboiwaaaaidevydenvbw1lbnqa9sywvwaaaufjrefuomvtlutsjfeux//n3nn0ydpbh1abrpt4lfqtqkc3jrkkneisiiribbehjjpklivo4m1rrmkkjqirmjruqudkpt71qpipirkpaqdf55tv5vvuszjqtjolseukd3xu/3dpzusc/22wtu2wrn+jg5so/ocdh8ycmjdflehmlkjkvk7kuyn+uf...
...7dtgdegxacsiznx8zpmwh7k4rkpjcuhdxcul6mdsmmbxdlwch2+xozsgbnzsncee4euyv4pwcpswypw0uhdybkswu1nyjendreqtkjwn2+zvttc1vmstb/mvev/weyslasslimcohobjxw+n3ap/sjefnl5gepzmpu4kg7opr1+tofpyuu3becwykcwqcdfmwfkauo90fhkdinbcamvqnymgqueagqwcohbdc1rjv9pild8ibvkz6qyviibqgtjpx4k0xpigezorn1da0cij4vfr0ta3wvbxh/rjdcufv6r2zpgph/e4pxsbcpeatqprjniso203/5s/za171mv8+w1loaaaaaelftksuqmcc"> <img class="intlink" title="undo" onclick="formatdoc('undo');" src="data:image/gif;base64,r0lgodlhfgawaomkadljwlie33morpgjuykl8aezxqpd+7/i19dv3nha7p///////////////////////yh5baekaa8alaaaaaawabyaaarr8mljq7046807tkayejjbnes4eeujvigapwyac0csocq7sdlwjkakca6tomywiargqf3mrqviejkksvlibsfewhdrih4fh/dzmice3/c4nbqbads=" /> <img class="intlink" title="redo" onclick="formatdoc('redo');" src="data:image/gif;base64,r0lgodlhfgawamihab1chdljwl9vj1ie34kl...
...And 11 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
us by adding class="menuitem-iconic" to a menuitem element, along with a src attribute that gives an image uri.
..., along with a src attribute that gives an image uri.
...ecute a command when a menu item is selected.
...And 10 more matches

More Event Handlers - Archive of obsolete content
s to stop both from occuring.
... has been prevented, neither may be re-enabled again for that event.
...n for that event.
...And 10 more matches

How to build custom form controls - Learn web development
nt.
...der, just like any native control.
... the page loads.
...And 10 more matches

General asynchronous programming concepts - Learn web development
ntensive chunk of code without returning control to the browser, the browser can appear to be frozen.
...ol to the browser, the browser can appear to be frozen.
...t's look at a couple of examples that show what we mean by blocking.
...And 10 more matches

Introducing asynchronous JavaScript - Learn web development
is.
... of the information we saw in the previous article.
...n = document.queryselector('button'); btn.addeventlistener('click', () => { alert('you clicked me!'); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); in this block, the lines are executed one after the other: we grab a reference to a <button> element that is already available in the dom.
...And 10 more matches

Introduction to automated testing - Learn web development
asics: manual tests once you sign in to lambdatest, you will be routed to the lambdatest dashboard.
...essions are running, your total number of tests to date, and more.
... test logs, and issue tracker at lambdatest.
...And 10 more matches

Storage access policy: Block cookies from trackers
ox through the content blocking settings (these steps will vary by version; the linked documentation includes a dropdown to select the appropriate firefox version).
... not.
... custom domains to the tracking protection url classifier.
...And 10 more matches

Profiling with the Firefox Profiler
tracing markers red: these indicate that the event loop is being unresponsive.
...so note that this indicates what would have happened had there been an event waiting and not necessarily that there was an event pending for that long.
...r very time-sensitive profiling, you may want to consider a non-sampling profiler.
...And 10 more matches

about:debugging - Firefox Developer Tools
the about:debugging page provides a single place from which you can attach the firefox developer tools to a number of debugging targets.
... the about:debugging page.
...r android device and your computer is not authorized yet.
...And 10 more matches

Signaling and video calling - Web APIs
e chat client to support video calling.
...playback in our code.
...ing the user names of every connected user.
...And 10 more matches

Overview of events and handlers - Developer guides
inuously between processing, drawing, presenting content, and waiting for some new event trigger.
...e function which will handle those data structures a method called addeventlistener which expects as arguments a string event type name and the handler function.
...hose data structures a method called addeventlistener which expects as arguments a string event type name and the handler function.
...And 10 more matches

Creating hyperlinks - Learn web development
what is a hyperlink?
...relative url link inside it would now point to a file located at http://www.example.com/pdfs/project-brief.pdf, not a file located at http://www.example.com/projects/pdfs/project-brief.pdf.
...your link text to effectively describe what is being linked to.
...And 9 more matches

Video and Audio APIs - Learn web development
ontrols.style.visibility = 'visible'; these two lines remove the default browser controls from the video, and make the custom controls visible.
...'; these two lines remove the default browser controls from the video, and make the custom controls visible.
...ck whether the video is paused.
...And 9 more matches

Handling common accessibility problems - Learn web development
ving the css from your code, but the easiest way is to use browser features, for example: firefox: select view > page style > no style from the main menu.
...ncluding via tab) by giving each one the attribute tabindex="0" (see webaim's tabindex article for more really useful details).
...ument.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.
...And 9 more matches

Eclipse CDT Manual Setup
workspace" (a directory where eclipse will store files that it generates during indexing, and so on.) it's recommended that you have a separate workspace containing only a single project for each mozilla source tree [rational], and that you choose a directory outside the mozilla source.
...nces) before creating a project in that workspace: in "general > workspace", disable "build automatically" in "c/c++ > indexer", disable "automatically update the index" turning off automatic indexing prevents the cpu intensive indexer from running at various stages during the steps below before we're ready.
... the font size.
...And 9 more matches

MouseEvent - Web APIs
the mouseevent interface represents events that occur due to the user interacting with a pointing device (such as a mouse).
... the mouseevent interface represents events that occur due to the user interacting with a pointing device (such as a mouse).
...only the type of device that generated the event (one of the moz_source_* constants listed below).
...And 9 more matches

Interacting with page scripts - Archive of obsolete content
the sdk.
...n event listener to each: one listener displays a property of the cloned object, and the other listener displays a property of the assigned object: <html> <head> </head> <body> <input id="works" type="button" value="i will work"/> <input id="fails" type="button" value="i will not work"/> <script> var works = document.getelementbyid("works"); works.addeventlistener("click", function() { alert(clonedcontentscriptobject.greeting); }, false); var fails = document.getelementbyid("fails"); fails.addeventlistener("click", function() { alert(assignedcontentscriptobject.greeting); }, false); </script> </body> </html> if you run the example, clicking "i will work" displays the value of "greeting" in an alert.
...listener("click", function() { alert(clonedcontentscriptobject.greeting); }, false); var fails = document.getelementbyid("fails"); fails.addeventlistener("click", function() { alert(assignedcontentscriptobject.greeting); }, false); </script> </body> </html> if you run the example, clicking "i will work" displays the value of "greeting" in an alert.
...And 8 more matches

Reddit Example - Archive of obsolete content
this example uses the action button api, which is only available from firefox 29 onwards.
... action button api, which is only available from firefox 29 onwards.
...t in the context of the reddit page which intercepts mouse clicks on each title link and fetches the link's target url.
...And 8 more matches

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
sing the repl, start at https://svelte.dev/repl/76cc90c43a37452e8c7f70521f88b698?version=3.23.2 working on the moreactions component now we'll tackle the check all and remove completed buttons.
...ons component now we'll tackle the check all and remove completed buttons.
...ur 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 btn__primary" on:click={checkall}>{completed ?
...And 8 more matches

Edit Shape Paths in CSS - Firefox Developer Tools
ide property and <basic-shape> values.
...vate / deactivate the shape path editor the shape path editor is accessed via the css rules panel, which can be opened as described in the guide to opening the inspector.
...t the margin box reference; this is the area that will be clipped by the margin box.
...And 8 more matches

Work with animations - Firefox Developer Tools
point in the timeline and see the page at that point.
...sing css transitions, css @keyframes rules, or the web animations api.
...works, we'll walk through an example.
...And 8 more matches

Element - Web APIs
h the specified name and namespace, from the current node.
...f full-screen mode.
...ess fired when a key that produces a character value is pressed down.
...And 8 more matches

<input type="button"> - HTML: Hypertext Markup Language
<input> elements of type button are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the click event).
...ve-examples and send us a pull request.
..., you can include html in the label, even images.
...And 8 more matches

Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
}); return frag; } // single element?
...amespace prefixes which can be used in the given dom tree.
... ], ['html:form', {id:'mysecondform'}, ['html:input', {type:'text', value:'my field for second form'}], ['html:div', {}, 'sub div with textcontent and siblings', ['html:br', {}], ['html:input', {type:'checkbox', id:'mycheck'}], ['html:label', {for:'mycheck'}, 'here is text of label, click this text will check the box' ] ] ] ]; document.body.appendchild(jsontodom(json, document, {})); jquery templating for extensions which already use jquery, it is possible to use its builtin dom building functions for templating, though care must be taken when passing non-static strings to methods such as .append() and .html().
...And 7 more matches

Building accessible custom components in XUL - Archive of obsolete content
don't want to make every label and description element focusable.
...rimentation, i found the solution for this.
...atically reset the focus to the previously focused cell.
...And 7 more matches

Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
ent);"/> </toolbarpalette> notes: the id of the palette (browsertoolbarpalette in the example) depends on the window (the parent window of the toolbar you wish to insert a button).
...sertoolbarpalette in the example) depends on the window (the parent window of the toolbar you wish to insert a button).
...ndow (the parent window of the toolbar you wish to insert a button).
...And 7 more matches

Framework main features - Learn web development
lked about the concept of state in the previous chapter — a robust state-handling mechanism is key to an effective framework, and each component may have data to control the state of.
...ge will persist in some way as long as the component is in use.
... component should be responsible for tracking its own count state, and could be written like this: function counterbutton() { const [count] = usestate(0); return ( <button>clicked {count} times</button> ); } usestate() is a react hook which, given an initial data value, will keep track of that value as it is updated.
...And 7 more matches

Dynamic behavior in Svelte: working with variables and props - Learn web development
so we can rewrite our last line like this.
...ent.
..."todo-{todo.id}" on:click={() => todo.completed = !todo.completed} checked={todo.completed} /> next we'll add a function to remove a todo from our todos array.
...And 7 more matches

Setting up your own test automation environment - Learn web development
to integrate it with tools like lambdatest, sauce labs, and browserstack.
...quire('selenium-webdriver'), by = webdriver.by, until = webdriver.until; const driver = new webdriver.builder() .forbrowser('firefox') .build(); driver.get('http://www.google.com'); driver.findelement(by.name('q')).sendkeys('webdriver'); driver.sleep(1000).then(function() { driver.findelement(by.name('q')).sendkeys(webdriver.key.tab); }); driver.findelement(by.name('btnk')).click(); driver.sleep(2000).then(function() { driver.gettitle().then(function(title) { if(title === 'webdriver - google search') { console.log('test passed'); } else { console.log('test failed'); } driver.quit(); }); }); in terminal, make sure you are inside your project folder, then enter the following command: node google_test you should see an instance of ...
...assed'); } else { console.log('test failed'); } driver.quit(); }); }); in terminal, make sure you are inside your project folder, then enter the following command: node google_test you should see an instance of firefox automatically open up!
...And 7 more matches

nsIAlertsService
ovided by firefox and have become platform-independent.
...sealert([optional] in astring name, [optional] in nsiprincipal principal); methods showalertnotification() displays a notification window.
...rs imageurl a url identifying the image to display in the notification alert.
...And 7 more matches

about:debugging (before Firefox 68) - Firefox Developer Tools
ebugging page provides a single place from which you can attach the firefox developer tools to a number of debugging targets.
...nect the add-on debugger to any restartless add-ons connecting the add-on debugger the add-ons page in about:debugging lists all restartless add-ons that are currently installed (note that this list may include add-ons that came preinstalled with your firefox).
...bugger the add-ons page in about:debugging lists all restartless add-ons that are currently installed (note that this list may include add-ons that came preinstalled with your firefox).
...And 7 more matches

Using files from web applications - Web APIs
= napprox.tofixed(3) + " " + amultiples[nmultiple] + " (" + nbytes + " bytes)"; } // end of optional code document.getelementbyid("filenum").innerhtml = nfiles; document.getelementbyid("filesize").innerhtml = soutput; } document.getelementbyid("uploadinput").addeventlistener("change", updatesize, false); </script> </body> </html> using hidden file input elements using the click() method you can hide the admittedly ugly file <input> element and present your own interface for opening the file picker and displaying which file or files the user has selected.
...uploadinput").addeventlistener("change", updatesize, false); </script> </body> </html> using hidden file input elements using the click() method you can hide the admittedly ugly file <input> element and present your own interface for opening the file picker and displaying which file or files the user has selected.
... own interface for opening the file picker and displaying which file or files the user has selected.
...And 7 more matches

Window.captureEvents() - Web APIs
the window.captureevents() method registers the window to capture all events of the specified type.
... the window.captureevents() method registers the window to capture all events of the specified type.
...ge, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload.
...And 7 more matches

Border-image generator - CSS: Cascading Style Sheets
t: left; } javascript content 'use strict'; /** * ui-slidersmanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.style.width = 50 + obj.precision * 10 + 'px'; input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parsefloat(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); return input; }; var slidercomponent = function slidercomponent(obj, sign) { var slider = document.createelement('div'); var startx = null; v...
...t.addeventlistener('change', function(e) { var value = parsefloat(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); return input; }; var slidercomponent = function slidercomponent(obj, sign) { var slider = document.createelement('div'); var startx = null; var start_value = 0; slider.addeventlistener("click", function(e) { document.removeeventlistener("mousemove", slidermotion); setvalue(obj.topic, obj.value + obj.step * sign); }); slider.addeventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value; document.body.style.cursor = "e-resize"; document.addeventlistener("mouseup", slideend); document.addeventlistener("mousemove", slidermotion); }); ...
...ui-dropdown-list'; select.classname = 'ui-dropdown-select'; while (node.firstelementchild !== null) { option = node.firstelementchild; option_value = option.getattribute('data-value'); if (option_value === null) option.setattribute('data-value', uval); list.appendchild(node.firstelementchild); uval++; } node.appendchild(select); node.appendchild(list); select.onclick = this.toggle.bind(this); list.onclick = this.updatevalue.bind(this); document.addeventlistener('click', clickout); this.state = 0; this.time = 0; this.dropmenu = list; this.select = select; this.toggle(false); this.value = {}; this.topic = topic; if (label) select.textcontent = label; else this.setnodevalue(list.children[selected]); dropdowns[topic] = this; }; ...
...And 7 more matches

Add a Context Menu Item - Archive of obsolete content
to follow this tutorial you'll need to have learned the basics of jpm.
...ext-menu module.
..."log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text = window.getselection().tostring();' + ' self.postmessage(text);' + '});', onmessage: function (selectiontext) { console.log(selectiontext); } }); try it: run the add-on, load a web page, select some text and right-click.
...And 6 more matches

Storing annotations - Archive of obsolete content
tationtext) handlenewannotation(annotationtext, this.annotationanchor); annotationeditor.hide(); }, onshow: function() { this.postmessage('focus'); } }); listing stored annotations to prove that this works, let's implement the part of the add-on that displays all the previously entered annotations.
...ge(storedannotations) { var annotationlist = $('#annotation-list'); annotationlist.empty(); storedannotations.foreach( function(storedannotation) { var annotationhtml = $('#template .annotation-details').clone(); annotationhtml.find('.url').text(storedannotation.url) .attr('href', storedannotation.url); annotationhtml.find('.url').bind('click', function(event) { event.stoppropagation(); event.preventdefault(); self.postmessage(storedannotation.url); }); annotationhtml.find('.selection-text') .text(storedannotation.anchortext); annotationhtml.find('.annotation-text') .text(storedannotation.annotationtext); annotationlist.append(annotationhtml); ...
...(storedannotation.url); }); annotationhtml.find('.selection-text') .text(storedannotation.anchortext); annotationhtml.find('.annotation-text') .text(storedannotation.annotationtext); annotationlist.append(annotationhtml); }); }); it builds the dom for the panel from the array of annotations it is given.
...And 6 more matches

Getting Started (jpm) - Archive of obsolete content
in "index.js" file in the root of your add-on.
..." file in the root of your add-on.
... add-on.
...And 6 more matches

Getting started (cfx) - Archive of obsolete content
in the "main.js" file in your "lib" directory.
....js" file in your "lib" directory.
...rectory.
...And 6 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
rors to the error console.
...orces strict error output from javascript true table 1: preferences to set for developing extensions to make these changes, start your development profile, type about:config into firefox’s location bar and open the preferences window; find the preferences listed in table 1 and double-click on them to set them accordingly.
...rlay document will insert its content into the base document.
...And 6 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
in mozilla by going to tools -> web development -> javascript console or in firefox (the standalone browser product from mozilla) at tools -> javascript console.
...cape model.
...orer, if a function is called from an event, it can access the event object through window.event.
...And 6 more matches

Extensions - Archive of obsolete content
by another extension, depending on the order in which the overlays are applied.
...nails.selectalllinks();" insertafter="context-selectall"/> </popup> see firefox context menu for a list of the ids of the items found on the firefox context menu.
....
...And 6 more matches

OpenClose - Archive of obsolete content
opening and closing popups popups and menus may be opened and closed by a script.
...ose automatically once the user has made a selection from the menu.
...tate to check if a menu is open, check the state of the menu's open property.
...And 6 more matches

panel - Archive of obsolete content
any type of content.
...en the panel's hidepopup method is called.
... <image src="warning.png"/> <vbox> <description value="you have 6 new messages."/> <hbox> <button label="read mail"/> <button label="new message"/> </hbox> </vbox> </hbox> </panel> <description value="6 new messages" popup="thepanel"/> attributes backdrag type: boolean setting the backdrag attribute on a xul panel lets the user move the panel by clicking and dragging anywhere on its background area.
...And 6 more matches

Desktop mouse and keyboard controls - Game development
you can write everything on your own, but you can also take the advantage of built-in functions in frameworks like phaser — these will make your life easier and development a lot faster.
...er — these will make your life easier and development a lot faster.
... the mouse interactions in the game are focused on clicking the buttons.
...And 6 more matches

CSS and JavaScript accessibility best practices - Learn web development
lor.
...value filled in when the form is submitted, we create a list item with a link and insert it in the errorlist.
...r = document.createelement('a'); anchor.textcontent = testitem.input.name + ' field is empty: fill in your ' + testitem.input.name + '.'; anchor.href = '#' + testitem.input.name; anchor.onclick = function() { testitem.input.focus(); }; listitem.appendchild(anchor); errorlist.appendchild(listitem); } each link serves a dual purpose — it tells you what the error is, plus you can click on it/activate it to jump straight to the input element in question and correct your entry.
...And 6 more matches

Client-side storage - Learn web development
form from actually submitting itself when the submit button is pressed, as this is not the behavior we want.
... hello" button is clicked.
...nts explain in detail what each bit does, but in essence here we are taking the name the user has entered into the text input box and saving it in web storage using setitem(), then running a function called namedisplaycheck() that will handle updating the actual website text.
...And 6 more matches

Working with Svelte stores - Learn web development
ent and see how we can read values from the store.
...the value we receive to the local variable, which will trigger the update of the component's dom.
...sing the component let's now use our component.
...And 6 more matches

Cross Process Object Wrappers
so should only be used when necessary and only as a migration aid.
... used when necessary and only as a migration aid.
... scripts frame scripts can send messages to chrome using one of two global functions: sendasyncmessage() or sendsyncmessage().
...And 6 more matches

Application Translation with Mercurial
check what is available for translation find out on which branch localization is done for your locale: read your localization team's page by clicking on the team with your language code (e.g.
... check what is available for translation find out on which branch localization is done for your locale: read your localization team's page by clicking on the team with your language code (e.g.
...of the texts in the application already translated.
...And 6 more matches

nsIDOMWindowUtils
ong akeycode, in long acharcode, in long amodifiers, [optional] in boolean apreventdefault); obsolete since gecko 15.0 boolean sendkeyevent(in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in unsigned long aadditionalflags); deprecated since gecko 38.0 void sendmouseevent(in astring atype, in float ax, in float ay, in long abutton, in long aclickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe); void sendmouseeventtowindow(in astring atype, in float ax, in float ay, in long abutton, in long aclickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe); void sendmousescrollevent(in astring atype, in float ax, in float ay, in long abutton, in long ascrollflags, in long adelta, in l...
...alled on it, true otherwise.
...ssed from unprivileged context (not content-accessible) will throw a dom security error if called without universalxpconnect privileges.
...And 6 more matches

Thunderbird Configuration Files
warning: the content of this article may be out of date.
... this article may be out of date.
...entioned on this site can be applied by using the built-in config editor.
...And 6 more matches

All keyboard shortcuts - Firefox Developer Tools
/uncomment line(s) ctrl + / cmd + / ctrl + / page inspector command windows macos linux inspect element ctrl + shift + c cmd + shift + c ctrl + shift + c node picker these shortcuts work while the node picker is active.
...t line(s) ctrl + / cmd + / ctrl + / page inspector command windows macos linux inspect element ctrl + shift + c cmd + shift + c ctrl + shift + c node picker these shortcuts work while the node picker is active.
... ctrl + / cmd + / ctrl + / page inspector command windows macos linux inspect element ctrl + shift + c cmd + shift + c ctrl + shift + c node picker these shortcuts work while the node picker is active.
...And 6 more matches

Style Editor - Firefox Developer Tools
appear at the bottom of the browser window, with the style editor activated: the style editor is divided into three main sections: the style sheet pane on the left the editor on the right the media sidebar.
... style sheet pane on the left the editor on the right the media sidebar.
...nu that lets you open the selected style sheet in a new tab.
...And 6 more matches

Examples of web and XML development using the DOM - Web APIs
<title>modifying an image border</title> <script> function setborderwidth(width) { document.getelementbyid("img1").style.borderwidth = width + "px"; } </script> </head> <body> <p> <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100" height="100" alt="border test"> </p> <form name="formname"> <input type="button" value="make border 20px-wide" onclick="setborderwidth(20);" /> <input type="button" value="make border 5px-wide" onclick="setborderwidth(5);" /> </form> </body> </html> example 3: manipulating styles in this simple example, some basic style properties of an html paragraph element are accessed using the style object on the element and that object's css style properties, which can be retrieved and set from the dom.
...al styles directly.
... for whole documents.
...And 6 more matches

Movement, orientation, and motion: A WebXR example - Web APIs
vertex, interpolating as needed from the values found in the texture and applying the lighting effects.
...ting as needed from the values found in the texture and applying the lighting effects.
... cameramatrixout = document.queryselector("#camera-matrix div"); mousematrixout = document.queryselector("#mouse-matrix div"); if (!navigator.xr || enableforcepolyfill) { console.log("using the polyfill"); polyfill = new webxrpolyfill(); } setupxrbutton(); } the load event handler gets a reference to the button that toggles webxr on and off into xrbutton, then adds a handler for click events.
...And 6 more matches

Video player styling basics - Developer guides
} // mute button else if (type == 'mute') { mute.setattribute('data-state', video.muted ?
...ate('playpause'); }, false); video.addeventlistener('pause', function() { changebuttonstate('playpause'); }, false); stop.addeventlistener('click', function(e) { video.pause(); video.currenttime = 0; progress.value = 0; // update the play/pause button's 'data-state' which allows the correct button image to be set via css changebuttonstate('playpause'); }); mute.addeventlistener('click', function(e) { video.muted = !video.muted; changebuttonstate('mute'); }); you might have noticed that there are new handlers where the play and pause events are reacted to on the video.
...gebuttonstate('playpause'); }); mute.addeventlistener('click', function(e) { video.muted = !video.muted; changebuttonstate('mute'); }); you might have noticed that there are new handlers where the play and pause events are reacted to on the video.
...And 6 more matches

Creating annotations - Archive of obsolete content
ents that the user can annotate, and a panel for the user to enter the annotation text itself.
... bound to it which sends a message to the main add-on code.
...gered the selector checks whether the element is eligible for annotation.
...And 5 more matches

Using third-party modules (jpm) - Archive of obsolete content
the modules included in this package will be somewhere in that directory: my-menuitem index.js node_modules menuitem package.json test we're interested in using the "menuitem" module, which is at "addon-pathfinder/lib/ui/menuitem".
...where in that directory: my-menuitem index.js node_modules menuitem package.json test we're interested in using the "menuitem" module, which is at "addon-pathfinder/lib/ui/menuitem".
... node_modules menuitem package.json test we're interested in using the "menuitem" module, which is at "addon-pathfinder/lib/ui/menuitem".
...And 5 more matches

Forms related code snippets - Archive of obsolete content
ncrmonth.innerhtml = "\u003e"; /* &gt; */ oincryear.innerhtml = "\u00bb"; /* &raquo; */ odecryear.id = sprefs + "-decr-year-" + nid; odecrmonth.id = sprefs + "-decr-month-" + nid; oincrmonth.id = sprefs + "-incr-month-" + nid; oincryear.id = sprefs + "-incr-year-" + nid; odecryear.onmousedown = oincryear.onmousedown = odecrmonth.onmousedown = oincrmonth.onmousedown = onheadclick; for (var nthid = 0; nthid < 7; nthid++) { oth = document.createelement("th"); oth.innerhtml = sdays[nthid]; ohrow.appendchild(oth); } othead.appendchild(ohrow); ocapt.appendchild(odecryear); ocapt.appendchild(odecrmonth); ocapt.appendchild(oincryear); ocapt.appendchild(oincrmonth); ocapt.appendchild(this.display); this.container.appendchild(ocapt); this.co...
... oth.innerhtml = sdays[nthid]; ohrow.appendchild(oth); } othead.appendchild(ohrow); ocapt.appendchild(odecryear); ocapt.appendchild(odecrmonth); ocapt.appendchild(oincryear); ocapt.appendchild(oincrmonth); ocapt.appendchild(this.display); this.container.appendchild(ocapt); this.container.appendchild(othead); this.current.setdate(1); this.writedays(); otarget.onclick = function () { if (otable.parentnode) { otable.parentnode.removechild(otable); return; } otable.style.zindex = nzindex++; otable.style.position = "absolute"; otable.style.left = otarget.offsetleft + "px"; otable.style.top = (otarget.offsettop + otarget.offsetheight) + "px"; otarget.parentnode.insertbefore(otable, otarget); }; ain...
...; niter < ntotal; niter++) { if (niter % 7 === 0) { otr = document.createelement("tr"); this.otbody.appendchild(otr); } nday = niter - nendblanks + 1; otd = document.createelement("td"); if (niter + 1 > nendblanks && niter < nend) { otd.classname = sprefs + "-active-cell"; otd.id = sprefs + "-day-" + this.id + "-" + nday; otd.onclick = ondayclick; otd.appendchild(document.createtextnode(nday)); } else { otd.classname = sprefs + "-empty-cell"; } otr.appendchild(otd); } this.display.innerhtml = smonthsnames[this.current.getmonth()] + " " + this.current.getfullyear(); this.container.appendchild(this.otbody); }; function ondocclick (opssevt) { const oevt = opssevt || /* ie ...
...And 5 more matches

JavaScript Daemons Management - Archive of obsolete content
r); orecompose.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #perform-me { margin: 50px; font-size: 20px; line-height: 20px; } </style> </head> <body> <h1>new daemon(<em>@thisobject</em>, <em>@callback</em>[, <em>@rate</em>, <em>@length</em>, <em>@init</em>, <em>@onstart</em>])</h1> <p><button onclick="orecompose.skipto(11);">skipto(11)</button> <button onclick="orecompose.makesteps(29);">makesteps(29)</button> <button onclick="orecompose.fixposition(-13);">fixposition(-13)</button> <button onclick="orecompose.play();">play</button> <button onclick="orecompose.turn();">turn</button> <button onclick="orecompose.pause();">pause</button> <button onclick="orecompose.reverseplay();">reverseplay</bu...
...pto(11);">skipto(11)</button> <button onclick="orecompose.makesteps(29);">makesteps(29)</button> <button onclick="orecompose.fixposition(-13);">fixposition(-13)</button> <button onclick="orecompose.play();">play</button> <button onclick="orecompose.turn();">turn</button> <button onclick="orecompose.pause();">pause</button> <button onclick="orecompose.reverseplay();">reverseplay</button> <button onclick="orecompose.reversals = 2;alert('changed');">two reversals</button> <button onclick="orecompose.makeloop();alert('changed');">makeloop</button> <button onclick="orecompose.unmakeloop();alert('changed');">unmakeloop</button> <button onclick="orecompose.close();">close</button> <button onclick="orecompose.reclose();">reclose</button><br /> frame rate: <input type="text" id="vello" value="33" style=...
... = function () { ounhide.owner.target.id = "animate-me"; document.body.appendchild(ounhide.owner.target); ounhide.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #animate-me { margin: 50px; font-size: 20px; line-height: 20px; } </style> </head> <body> <h1>daemon.buildaround()</h1> <p><button onclick="ounhide.skipto(11);">skipto(11)</button> <button onclick="ounhide.makesteps(29);">makesteps(29)</button> <button onclick="ounhide.fixposition(-13);">fixposition(-13)</button> <button onclick="ounhide.play();">play</button> <button onclick="ounhide.turn();">turn</button> <button onclick="ounhide.pause();">pause</button> <button onclick="ounhide.reverseplay();">reverseplay</button> <button onclick...
...And 5 more matches

Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
ozen or sealed, then creating a proxy around the object might be a viable approach.
...ragment throughout the rest of this section.
...real events has the added bonus that all other event listeners for that element (and the corresponding bubbling/capturing chain) will fire as well, so this method will have the closed resemblance to a real user event.
...And 5 more matches

Panels - Archive of obsolete content
rome://global/skin" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button label="details" type="panel"> <panel id="search-panel"> <label control="name" value="name:"/> <textbox id="name"/> </panel> </button> </window> many panels will be associated with a button, as in this example.
...automatic behaviour which opens the popup when pressed.
...e used to control the placement of the popup.
...And 5 more matches

Adding Event Handlers - Archive of obsolete content
the most common event used is the 'command' event.
...n the example we display an alert containing the target's tag name.
...y an alert containing the target's tag name.
...And 5 more matches

menupopup - Archive of obsolete content
pup is open, it floats above the window and may extend outside the window border.
...set to "menu" to create a popup that will open when the menu or button is pressed.
...> <menupopup> <menuitem label="mozilla" value="http://mozilla.org"/> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net"/> <menuitem label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menulist> the following example shows how a menupopup can be used as a context menu for an element.
...And 5 more matches

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
y want to create a variable that starts at 0, then increments by one every second using a constant loop.
...create this example without using a date() object, like we've done in our version, but less accurate — you can't guarantee that the callback will fire after exactly 1000ms.
...utions regardless of how long the code takes to execute, and you won't get errors.
...And 5 more matches

Image gallery - Learn web development
utton> that is used to control the darkening effect.
...y images inside the thumb-bar <div> (so-called "thumbnail" images) to 20%, and floats them to the left so they sit next to one another on a line.
...he left so they sit next to one another on a line.
...And 5 more matches

Website security - Learn web development
new page is loaded.
...icious user who knows that a particular site allows logged-in users to send money to a specified account using an http post request that includes the account name and an amount of money.
...n http post request will be sent to the server containing the transaction details and any client-side cookies that the browser associated with the site (adding associated site cookies to requests is normal browser behavior).
...And 5 more matches

Web Replay
e recording.
...only), go to devtools settings and select "enable webreplay".
...'s features can only be used in a tab that is recording or replaying.
...And 5 more matches

Accessibility Inspector - Firefox Developer Tools
wser performance.
...hen first implemented, the accessibility engine had to be explicitly turned on.
...ence devtools.accessibility.enabled to false.
...And 5 more matches

EventListener - Web APIs
ventlistener accepts both a function and an object with a handleevent() property function.
...mple below.
... any properties.
...And 5 more matches

Recording a media element - Web APIs
rticle using the mediastream recording api demonstrates using the mediarecorder interface to capture a mediastream generated by a hardware device, as returned by navigator.mediadevices.getusermedia(), you can also use an html media element (namely <audio> or <video>) as the source of the mediastream to be recorded.
...re a mediastream generated by a hardware device, as returned by navigator.mediadevices.getusermedia(), you can also use an html media element (namely <audio> or <video>) as the source of the mediastream to be recorded.
...the stop() function simply stops the input media: function stop(stream) { stream.gettracks().foreach(track => track.stop()); } this works by calling mediastream.gettracks(), using foreach() to call mediastreamtrack.stop() on each track in the stream.
...And 5 more matches

Using the MediaStream Recording API - Web APIs
inset 0 3px 4px rgba(0,0,0,0.7); background-color: rgba(0,0,0,0.1); height: calc(100% - 240px - 0.7rem); overflow: scroll; } note: calc() has good support across modern browsers too, even going back to internet explorer 9.
... has good support across modern browsers too, even going back to internet explorer 9.
... which abuses the fact that you can click on the <label> of a checkbox to toggle it checked/unchecked.
...And 5 more matches

Capabilities, constraints, and settings - Web APIs
h media constraints by editing the source code describing the constraint sets for audio and video tracks.
...ding both what the stream looks like and what the actual media settings are set to after applying the new constraints.
...at the complete example by clicking here.
...And 5 more matches

Using the Screen Capture API - Web APIs
splaymediaoptions contains the mediastreamconstraints to pass into getdisplaymedia(); here, the cursor property is set to always, indicating that the mouse cursor should always be included in the captured media.
...st videoelem = document.getelementbyid("video"); const logelem = document.getelementbyid("log"); const startelem = document.getelementbyid("start"); const stopelem = document.getelementbyid("stop"); // options for getdisplaymedia() var displaymediaoptions = { video: { cursor: "always" }, audio: false }; // set event listeners for the start and stop buttons startelem.addeventlistener("click", function(evt) { startcapture(); }, false); stopelem.addeventlistener("click", function(evt) { stopcapture(); }, false); logging content to make logging of errors and other issues easy, this example overrides certain console methods to output their messages to the <pre> block whose id is log.
...html += `<span class="info">${msg}</span><br>`; this allows us to use the familiar console.log(), console.error(), and so on to log information to the log box in the document.
...And 5 more matches

Simple color animation - Web APIs
« previousnext » a very basic color animation created using webgl, performed by clearing the drawing buffer with a different random color every second.
...mation created using webgl, performed by clearing the drawing buffer with a different random color every second.
...in a timer event handler.
...And 5 more matches

Using DTMF with WebRTC - Web APIs
r dtmf digits, telephony tones, and telephony signals.
...ony signals.
...tring = "12024561111"; let callerpc = null; let receiverpc = null; let dtmfsender = null; let hasaddtrack = false; let mediaconstraints = { audio: true, video: false }; let offeroptions = { offertoreceiveaudio: 1, offertoreceivevideo: 0 }; let dialbutton = null; let logelement = null; these are, in order: dialstring the dtmf string the caller will send when the "dial" button is clicked.
...And 5 more matches

Inputs and input sources - Web APIs
ed environment.
... and so on to provide additional input sources for both targeting and selection.
...abase from the webxr input profiles registry.
...And 5 more matches

ARIA: switch role - Accessibility
false.
... false.
...e the aria-readonly attribute is supported by the switch role.
...And 5 more matches

<menu> - HTML: Hypertext Markup Language
the html <menu> element represents a group of commands that a user can perform or activate.
...flow content describing available commands.
...ow content describing the available commands and options.
...And 5 more matches

Working with Events - Archive of obsolete content
the add-on sdk supports event-driven programming.
...ent, you can define your own events and use them to communicate between the main add-on code and the content scripts.
... and its argument will be the name of the event: var ui = require("sdk/ui"); var panels = require("sdk/panel"); var self = require("sdk/self"); var panel = panels.panel({ contenturl: self.data.url("panel.html") }); panel.on("*", function(e) { console.log("event " + e + " was emitted"); }); var button = ui.actionbutton({ id: "my-button", label: "my button", icon: "./icon-16.png", onclick: handleclick }); function handleclick(state) { panel.show({ position: button }); } this wildcard feature does not yet work for the tabs or windows modules.
...And 4 more matches

Getting Started with Firefox Extensions - Archive of obsolete content
ones in complexity, so you should go through this tutorial before giving them a try.
...on.
...it.
...And 4 more matches

Tabbed browser - Archive of obsolete content
dfixup, 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.
...errerurl ) 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.
...ing 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.
...And 4 more matches

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
note this article is the version from 2003 with slight modifications (no images and no links to samples).
...mple demonstrating that the inner-browsing model can be used to dynamically request new data from the server side and provide updates to the ticker.
...tate.
...And 4 more matches

Scroll Bars - Archive of obsolete content
you can slide back and forth.) the value ranges from 0 to the value of maxpos.
... the maximum position of the scroll bar thumb.
...meric value and does not have a unit.
...And 4 more matches

label - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used to provide a label for a control element.
...l value="email address" control="email"/> <textbox id="email"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...an <a> link) will have no effect.
...And 4 more matches

scale - Archive of obsolete content
increment and decrement the value by one unit, or the page up and page down keys to increment and decrement the value by one page, as specified by the pageincrement attribute.
... the element, leave this attribute out entirely.
... and scale) attribute changes when the arrows are clicked(or scales are dragged).
...And 4 more matches

What will your website look like? - Learn web development
abstract role in addressing how users will experience and interact with the website.
...color to choose a color, go to the color picker and find a color you like.
... a color you like.
...And 4 more matches

A first splash into JavaScript - Learn web development
lastresult.textcontent = 'wrong!'; lastresult.style.backgroundcolor = 'red'; if(userguess < randomnumber) { loworhi.textcontent = 'last guess was too low!' ; } else if(userguess > randomnumber) { loworhi.textcontent = 'last guess was too high!'; } } guesscount++; guessfield.value = ''; } guesssubmit.addeventlistener('click', checkguess); function setgameover() { guessfield.disabled = true; guesssubmit.disabled = true; resetbutton = document.createelement('button'); resetbutton.textcontent = 'start new game'; document.body.append(resetbutton); resetbutton.addeventlistener('click', resetgame); } function resetgame() { guesscount = 1; const resetparas = doc...
...lue out of the form text field and focus it again, ready for the next guess to be entered.
...pen in the browser — a button being clicked, a page loading, a video playing, etc.
...And 4 more matches

React interactivity: Editing, filtering, conditional rendering - Learn web development
ompleted(props.id)} /> <label classname="todo-label" htmlfor={props.id}> {props.name} </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">{props.name}</span> </button> <button type="button" classname="btn btn__danger" onclick={() => props.deletetask(props.id)} > delete <span classname="visually-hidden">{props.name}</span> </button> </div> </div> ); we've now got the two different template structures — "edit" and "view" — defined inside two separate constants.
...t button toggle this in the next section!
...ture interactive.
...And 4 more matches

Accessible Toolkit Checklist
and refocuses the previously focused on the parent window.
...wrap, not have invisible items in tab order dynamically added items must not corrupt the tab cycle or make it disorderly tab cycle must be identical backwards and forwards the f6 and shift+f6 key combinations should cycle through panes in a window making focus visible on any widget, and focus must always be visible shift+f10 or context menu key should work like right click on focused item, and context menu should show just under and to the right of the current focus.
...ng focus visible on any widget, and focus must always be visible shift+f10 or context menu key should work like right click on focused item, and context menu should show just under and to the right of the current focus.
...And 4 more matches

Frequently Asked Questions for Lightweight themes
o?
...olors.
...n install a theme and transform the look of your firefox web browser.
...And 4 more matches

mozbrowsercontextmenu
pe of event.
... cancelable read only boolean whether the event is cancellable or not.
... properties: clientx the x value of the coordinate that was clicked inside the browser <iframe>'s viewport.
...And 4 more matches

Localizing with Pontoon
o localize projects, from first sign-in to finalizing your contributions.
...-of-context, or a combination of the two.
...oon's in-context translation mode is what puts it above others.
...And 4 more matches

Basics
mathml basics this document illustrates some basic mathml constructions.
... the symbol font.
...u might get lost trying to locate a mathml fragment with the usual view source.
...And 4 more matches

Add to iPhoto
es as a demonstration of how to use js-ctypes to call mac os x carbon, core foundation, and other system frameworks from an extension written entirely in javascript.
...g have been declared, we can write the core of the extension itself.
...t listener to it that will be called when the context menu is displayed.
...And 4 more matches

Introduction to DOM Inspector - Firefox Developer Tools
ndows that are open, so to inspect the dom of a particular window in the dom inspector, simply access that window as you would normally and then choose its title from this dynamically updated menulist.
...ay close it, but you will not be able to observe any of the visual consequences of your actions.
...zed rules from that style sheet in order.
...And 4 more matches

Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
in the scratchpad, ensure that no text is selected, and press the "run" button.
...hat no text is selected, and press the "run" button.
... div.appendchild(spanfactory('span #' + i)); document.body.appendchild(div); } } function dodivsandspans() { divsandspans(); } </script> open the browser console (menu button > developer > browser console), and then evaluate the expression demotrackallocations() in the browser console.
...And 4 more matches

Console messages - Firefox Developer Tools
pt to see timestamps by selecting show timestamps in the console settings menu (gear icon in the console toolbar).
... http request method.
...ly from those for synchronous functions.
...And 4 more matches

NotificationAction - Web APIs
note: this feature is available in web workers.
...with notifications.
...ame of the action, which can be used to identify the clicked action similar to input names.
...And 4 more matches

SVGRectElement - Web APIs
to the rx attribute of the given <rect> element.
... to the ry attribute of the given <rect> element.
...tribute of the given <rect> element.
...And 4 more matches

Taking still photos with WebRTC - Web APIs
ght to the code on github if you like.
... that after the page is done loading.
...dth, and the width at which we're going to render it, width.
...And 4 more matches

<input type="image"> - HTML: Hypertext Markup Language
ontext that is an ancestor of the current one, and has no parent).
...url as parameters, for example ?x=52&y=55.
...me is prefixed on every attribute, so if the name is position, then the returned coordinates would be formatted in the url as ?position.x=52&position.y=55.
...And 4 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
e pair of fruit=cherry and the dirname / direction pair of fruit.dir=ltr to be sent.
... controls based on their ui features, also known as ui pseudo-classes.
...the <input> element: pseudo-class description :enabled any currently enabled element that can be activated (selected, clicked on, typed into, etc.) or accept focus and also has a disabled state, in which it can't be activated or accept focus.
...And 4 more matches

HTML documentation index - HTML: Hypertext Markup Language
<br>: the line break element element, html, html text-level semantics, reference, web the html <br> element produces a line break in text (carriage-return).
...ilable, depending on the device and user agent.
...recise value, however, is not considered important.
...And 4 more matches

Communicating using "port" - Archive of obsolete content
each time a content script is attached to a page, the worker associated with the page is supplied to the page-mod in its onattach function.
...ted with the page is supplied to the page-mod in its onattach function.
...t.stoppropagation();" + " event.preventdefault();" + "}, false);" + "self.port.on('warning', function(message) {" + "window.alert(message);" + "});" var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.port.on('click', function(html) { worker.port.emit('warning', 'do not click this again'); }); } }); in the add-on above there are two user-defined messages: click is sent from the page-mod to the add-on, when the user clicks an element in the page warning sends a silly string back to the page-mod port.emit() the port.emit() function sends a message from the "main.js", or another add-on modu...
...And 3 more matches

Display a Popup - Archive of obsolete content
to display a popup dialog, use the panel module.
...ry, and loading the "get-text.js" script // into it.
...ng the "get-text.js" script // into it.
...And 3 more matches

Modifying the Page Hosted by a Tab - Archive of obsolete content
tutorial you'll need to have learned the basics of jpm.
...-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: 'document.body.style.border = "5px solid red";' }); } }); to run this example, save an icon file named "icon-16.png" in add-on's "data" directory.
...con-16.png" in add-on's "data" directory.
...And 3 more matches

Displaying web content in an extension without security issues - Archive of obsolete content
lugins.
...; frame.docshell.allowmetaredirects = false; frame.docshell.allowplugins = false; frame.docshell.allowsubframes = false; but what about interactivity, for example if you want a certain reaction to mouse clicks?
...ell.allowmetaredirects = false; frame.docshell.allowplugins = false; frame.docshell.allowsubframes = false; but what about interactivity, for example if you want a certain reaction to mouse clicks?
...And 3 more matches

Interaction between privileged and non-privileged pages - Archive of obsolete content
; element.dispatchevent(evt); this code creates an arbitrary element -- <myextensiondataelement/> -- and inserts it into the web page's dom.
... this code creates an arbitrary element -- <myextensiondataelement/> -- and inserts it into the web page's dom.
... document.head.appendchild(request); var event = document.createevent("htmlevents"); event.initevent("something-query", true, false); request.dispatchevent(event); }, callback: function(response) { return alert("response: " + (response ?
...And 3 more matches

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
tside of the window element.
... this to true, unless you have strong reasons not to want users changing your toolbar.
...s.
...And 3 more matches

Setting Up a Development Environment - Archive of obsolete content
line of the build process.
...place "make" with "make clean" for the clean command.
...es komodo to use bash, which for some reason can't be set properly as the default command shell.
...And 3 more matches

Tamarin build documentation - Archive of obsolete content
n (also works with helios).
...ios).
...t is to have the indexer track the currently selected build config (so the correct conditional compiles are highlighted in the editor).
...And 3 more matches

Menus - Archive of obsolete content
menus a menu provides a list of commands that the user can carry out.
... menus a menu provides a list of commands that the user can carry out.
...sed for commands that apply to the entire application.
...And 3 more matches

Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
« previousnext » next, we'll find out how to add event handlers to xbl-defined elements.
...nt as usual.
...e action taken for a particular event specified by its event attribute.
...And 3 more matches

XUL accessibility guidelines - Archive of obsolete content
yboard planning faq and cross reference.
...mbinations and cross platform issues.
...key faq.
...And 3 more matches

splitter - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element which should appear before or after an element inside a container.
...zed.
...r has some styling associated with it.
...And 3 more matches

Adobe Flash - Archive of obsolete content
in a form field can be transferred to a flash animation (the grey text box below).
... element.
...nment that contains the flash animation -- in this case, the html page.
...And 3 more matches

Displaying notifications (deprecated) - Archive of obsolete content
fox 4.
... now!"); this returns a new notification object, but does not actually display the notification.
...gure the event listeners before the notification is shown, if you need to be notified when the notification is dismissed.
...And 3 more matches

Basic native form controls - Learn web development
required to set its name and value attributes.
...on or checkboxes generally being the content of the <legend>.
...pty elements; their displayed content is inserted inside the value attribute, and therefore only accepts plain text as content.
...And 3 more matches

Looping code - Learn web development
height; function random(number) { return math.floor(math.random()*number); } function draw() { ctx.clearrect(0,0,width,height); for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); } } btn.addeventlistener('click',draw); </script> </body> </html> you don't have to understand all the code for now, but let's look at the part of the code that actually draws the 100 circles: for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); } random(x), defined earlier in the code, return...
...for="search">search by contact name: </label> <input id="search" type="text"> <button>search</button> <p></p> now on to the javascript: const contacts = ['chris:2232322', 'sarah:3453456', 'bill:7654322', 'mary:9998769', 'dianne:9384975']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.addeventlistener('click', function() { let searchname = input.value.tolowercase(); input.value = ''; input.focus(); for (let i = 0; i < contacts.length; i++) { let splitcontact = contacts[i].split(':'); if (splitcontact[0].tolowercase() === searchname) { para.textcontent = splitcontact[0] + '\'s number is ' + splitcontact[1] + '.'; break; } else { para.textcontent = 'contact not fou...
...search by contact name: </label> <input id="search" type="text"> <button>search</button> <p></p> <script> const contacts = ['chris:2232322', 'sarah:3453456', 'bill:7654322', 'mary:9998769', 'dianne:9384975']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.addeventlistener('click', function() { let searchname = input.value.tolowercase(); input.value = ''; input.focus(); for (let i = 0; i < contacts.length; i++) { let splitcontact = contacts[i].split(':'); if (splitcontact[0].tolowercase() === searchname) { para.textcontent = splitcontact[0] + '\'s number is ' + splitcontact[1] + '.'; break; } else if (i =...
...And 3 more matches

Getting started with Svelte - Learn web development
} </style> we are applying a style to our <h1> element.
...y top level variable in a component.
... like so: <script> export let name; function togglename() { if (name === 'world') { name = 'svelte' } else { name = 'world' } } </script> <main> <h1>hello {name}!</h1> <button on:click={togglename}>toggle name</button> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> whenever the button is clicked, svelte executes the togglename() function, which in turn updates the value of the name variable.
...And 3 more matches

Focus management with Vue refs - Learn web development
to the element that you want to access, with a string identifier for the value of the attribute.
...adding a ref to our app so, let's attach a ref to our "edit" button in todoitem.vue.
... focusoneditbutton() { this.$nexttick(() => { const editbuttonref = this.$refs.editbutton; editbuttonref.focus(); }); } now when you activate the "edit" button and then cancel or save your changes via the keyboard, focus should be returned to the "edit" button.
...And 3 more matches

Implementing feature detection - Learn web development
se a dedicated feature detection library however, as it makes things much easier.
...however, as it makes things much easier.
...ure detection libraries is modernizr, and it can detect just about everything you'll ever need.
...And 3 more matches

Tracking Protection
etimes users won’t notice at all, if the page grid works such that other page elements slide in to fill holes left by blocked elements.
...ccess console output using the remote debugger.
...information about the currently loaded page.
...And 3 more matches

Reporting a Performance Problem
this article will guide you in reporting a performance problem using the built-in gecko profiler tool.
... this article will guide you in reporting a performance problem using the built-in gecko profiler tool.
...fox 75+.
...And 3 more matches

A guide to searching crash reports
criteria: crash signature, date, platform, product, version, etc.
...p right of any page in crash-stats.
...nally a list of bugs that have been marked as relating to this signature.
...And 3 more matches

How to embed the JavaScript engine
ructions at spidermonkey build documentation.
...valuearray is not defined.
...4] pass arguments length and the 'jsval *' pointer.
...And 3 more matches

DevTools API - Firefox Developer Tools
implementation.
... in the tooldefintion object, do // build: (window, target) => new mypanel(window, target), function mypanel(window, target) { // the window object that has loaded the url defined in the tooldefinition this.window = window; // the target this toolbox is debugging.
...target; // do synchronous initialization here.
...And 3 more matches

Edit CSS filters - Firefox Developer Tools
css filter properties in the rules view have a circular gray and white swatch next to them: clicking the swatch opens a filter editor: the filter editor lists each of the effects performed by that filter on a separate line.
... the swatch opens a filter editor: the filter editor lists each of the effects performed by that filter on a separate line.
...ffect, enter the settings you want and then press enter to update the effect.
...And 3 more matches

Page inspector keyboard shortcuts - Firefox Developer Tools
command windows macos linux inspect element ctrl + shift + c cmd + shift + c ctrl + shift + c node picker these shortcuts work while the node picker is active.
... command windows macos linux inspect element ctrl + shift + c cmd + shift + c ctrl + shift + c node picker these shortcuts work while the node picker is active.
... command windows macos linux inspect element ctrl + shift + c cmd + shift + c ctrl + shift + c node picker these shortcuts work while the node picker is active.
...And 3 more matches

Waterfall - Firefox Developer Tools
s the marker's duration and some more information that's specific to the marker type.
... gc events are labeled "(non-incremental)".
...is high enough that spidermonkey may run out of memory during incremental gc when the waterfall records a gc marker it indicates: whether the gc was incremental or not the reason the gc was performed if the gc was non-incremental, the reason it was non-incremental starting in firefox 46, if the gc event was caused by allocation pressure, a link appears, labeled "show allocation triggers".
...And 3 more matches

The JavaScript input interpreter - Firefox Developer Tools
your input does not appear to be complete when you press enter, then the console treats this as shift+enter , enabling you to finish your input.
...ne mode for multi-line entry, click the "split pane" icon at the right hand side of the single-line entry field, or press ctrl+b (windows/linux) or cmd+b (macos).
...nippet is echoed under the input prompt (in the right-side pane), followed by the result.
...And 3 more matches

Document - Web APIs
playing.
...teration an eventhandler called when an animationiteration event has been sent, indicating that a css animation has begun playing a new iteration of the animation sequence.
...sed.
...And 3 more matches

GlobalEventHandlers - Web APIs
playing.
...teration an eventhandler called when an animationiteration event has been sent, indicating that a css animation has begun playing a new iteration of the animation sequence.
...sed.
...And 3 more matches

Working with the History API - Web APIs
ple of pushstate() method suppose http://mozilla.org/foo.html executes the following javascript: let stateobj = { foo: "bar", } history.pushstate(stateobj, "page 2", "bar.html") this will cause the url bar to display http://mozilla.org/bar.html, but won't cause the browser to load bar.html or even check that bar.html exists.
...n't cause the browser to load bar.html or even check that bar.html exists.
...ce again, the url will change to http://mozilla.org/foo.html, and the document will get a popstate event, this time with a null state object.
...And 3 more matches

Notification - Web APIs
notification.image read only the url of an image to be displayed as part of the notification, as specified in the constructor's options parameter.
...ings.
...tamp read only specifies the time at which a notification is created or applicable (past, present, or future).
...And 3 more matches

NotificationEvent - Web APIs
the parameter passed into the onnotificationclick handler, the notificationevent interface represents a notification click event that is dispatched on the serviceworkerglobalscope of a serviceworker.
...ion click event that is dispatched on the serviceworkerglobalscope of a serviceworker.
...tendableevent interface.
...And 3 more matches

Using the Notifications API - Web APIs
ecifically grant that application permission to present notifications, thereby letting the user control which apps/sites are allowed to display notifications.
...n, which looks like this: notification.requestpermission(); the callback version optionally accepts a callback function that is called once the user has responded to the request to display permissions.
...n.
...And 3 more matches

Pointer Lock API - Web APIs
how far mouse movement can go in a single direction, and removes the cursor from view.
...or viewing maps or satellite imagery.
...y of the browser or screen.
...And 3 more matches

SVGCircleElement - Web APIs
element.r read only this property defines the radius of the <circle> element.
....r read only this property defines the radius of the <circle> element.
...cle> element.
...And 3 more matches

WebGLRenderingContext.makeXRCompatible() - Web APIs
p graphics, switching to vr mode, and so forth looks like this: const outputcanvas = document.queryselector(".output-canvas"); const gl = outputcanvas.getcontext("webgl"); let xrsession = null; let usingxr = false; let currentscene = "scene1"; let glstartbutton; let xrstartbutton; window.addeventlistener("load", (event) => { loadsceneresources(currentscene); glstartbutton.addeventlistener("click", handlestartbuttonclick); xrstartbutton.addeventlistener("click", handlestartbuttonclick); }); outputcanvas.addeventlistener("webglcontextlost", (event) => { /* the context has been lost but can be restored */ event.canceled = true; }); /* when the gl context is reconnected, reload the resources for the current scene.
... case aborterror: showsimplemessagebox("unable to transfer the game to your xr headset.", "cancel"); break; case invalidstateerror: showsimplemessagebox("you don't appear to have a compatible xr headset available.", "cancel"); break; default: handlefatalerror(err); break; } xrsession.end(); } } async function handlestartbuttonclick(event) { if (event.target.classlist.contains("use-webxr") && navigator.xr) { try { xrsession = await navigator.xr.requestsession("immersive-vr"); usingxr = true; } catch(err) { xrsession = null; usingxr = false; } } startgame(); } function startgame() { currentscene = "scene1"; loadsceneresources(currentscene); /* and so on */ } this works by ha...
...sion("immersive-vr"); usingxr = true; } catch(err) { xrsession = null; usingxr = false; } } startgame(); } function startgame() { currentscene = "scene1"; loadsceneresources(currentscene); /* and so on */ } this works by having two buttons, one which starts the game normally and the other which starts the game in vr mode.
...And 3 more matches

Hello vertex attributes - Web APIs
« previousnext » this webgl example demonstrates how to combine shader programming and user interaction by sending user input to the shader using vertex attributes.
...programparameter(program, gl.link_status)) { var linkerrlog = gl.getprograminfolog(program); cleanup(); document.queryselector("p").innerhtml = "shader program did not link successfully.
...s)) { var linkerrlog = gl.getprograminfolog(program); cleanup(); document.queryselector("p").innerhtml = "shader program did not link successfully.
...And 3 more matches

Web Audio API best practices - Web APIs
"more intuitive, declarative interface to web audio".
...not be allowed to automatically play audio; they should instead be started by a user.
...e really annoying and obtrusive.
...And 3 more matches

XRSystem - Web APIs
available using the ondevicechange event handler.
...the ondevicechange event handler.
... examples the following example shows how to use both issessionsupported() and requestsession().
...And 3 more matches

Keyboard - Accessibility
3, etc.).
...logical order of the page.
...x values.
...And 3 more matches

Operable - Accessibility
the link purpose is ambiguous to all users (see ambiguous to users in general for a useful explanation of this).
...ose is ambiguous to all users (see ambiguous to users in general for a useful explanation of this).
...us to all users (see ambiguous to users in general for a useful explanation of this).
...And 3 more matches

-moz-image-rect - CSS: Cascading Style Sheets
le-image property to use parts of an image as the bullets in lists.
...round-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%); width:133px; height:136px; position:absolute; } #box4 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%); width:133px; height:136px; position:absolute; } html the html is quite simple: <div id="container" onclick="rotate()"> <div id="box1" style="left:0px;top:0px;">top left</div> <div id="box2" style="left:133px;top:0px;">top right</div> <div id="box3" style="left:0px;top:136px;">bottom left</div> <div id="box4" style="left:133px;top:136px;">bottom right</div> </div> this places the four segments of our image in a two-by-two box grid.
...:0px;top:0px;">top left</div> <div id="box2" style="left:133px;top:0px;">top right</div> <div id="box3" style="left:0px;top:136px;">bottom left</div> <div id="box4" style="left:133px;top:136px;">bottom right</div> </div> this places the four segments of our image in a two-by-two box grid.
...And 3 more matches

Writing forward-compatible websites - Developer guides
released.
...utes with “window.” when an event handler content attribute (onclick, onmouseover, and so forth) is used on html element, all name lookup in the attribute first happens on the element itself, then on the element's form if the element is a form control, then on the document, and then on the window (where the global variables you have defined are).
... an event handler content attribute (onclick, onmouseover, and so forth) is used on html element, all name lookup in the attribute first happens on the element itself, then on the element's form if the element is a form control, then on the document, and then on the window (where the global variables you have defined are).
...And 3 more matches

<input type="radio"> - HTML: Hypertext Markup Language
dividual radio button within the group.
...oup when the above form is submitted with a radio button selected, the form's data includes an entry in the form contact=value.
...act" value="phone"> <label for="contactchoice2">phone</label> <input type="radio" id="contactchoice3" name="contact" value="mail"> <label for="contactchoice3">mail</label> </div> <div> <button type="submit">submit</button> </div> </form> <pre id="log"> </pre> then we add some javascript to set up an event listener on the submit event, which is sent when the user clicks the "submit" button: var form = document.queryselector("form"); var log = document.queryselector("#log"); form.addeventlistener("submit", function(event) { var data = new formdata(form); var output = ""; for (const entry of data) { output = output + entry[0] + "=" + entry[1] + "\r"; }; log.innertext = output; event.preventdefault(); }, false); try this example out and see how ...
...And 3 more matches

contextmenu - HTML: Hypertext Markup Language
the contextmenu attribute is obsolete and will be removed from all browsers the contextmenu global attribute is the id of a <menu> to use as the contextual menu for this element.
... is the id of a <menu> to use as the contextual menu for this element.
... context menu is a menu that appears upon user interaction, such as a right-click.
...And 3 more matches

Add to Home screen - Progressive web apps (PWAs)
ler like the one below to handle the installation: window.addeventlistener('beforeinstallprompt', (e) => { // prevent chrome 67 and earlier from automatically showing the prompt e.preventdefault(); // stash the event so it can be triggered later.
... deferredprompt = null; }); }); }); so here we: call event.preventdefault() to stop chrome 67 and earlier from calling the install prompt automatically (this behavior changed in chrome 68).
...dprompt = null; }); }); }); so here we: call event.preventdefault() to stop chrome 67 and earlier from calling the install prompt automatically (this behavior changed in chrome 68).
...And 3 more matches

How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
otifications let's start with notifications — they can work without push, but are very useful when combined with them.
...ombined with them.
...=== 'granted') { randomnotification(); } }); }); this shows a popup using the operating system’s own notifications service: when the user confirms to receive notifications, the app can then show them.
...And 3 more matches

Communicating With Other Scripts - Archive of obsolete content
reverse.
... contentscriptfile: data.url("listen.js") }); the web page "talk.html" embeds a script that uses window.postmessage() to send the content script a message when the user clicks a button: <!doctype html> <html> <head></head> <body> <script> function sendmessage() { window.postmessage("message from page script", "http://my-domain.org/"); } </script> <button onclick="sendmessage()">send message</button> </body> </html> finally, the content script "listen.js" uses window.addeventlistener() to listen for messages from the page script: // listen.js window.addeventlistener('message', function(event) { console.log(event.data); // message from page script console.log(event.origin); }, false); using postmessage() before firefox 31 if your add-on is r...
... <meta charset="utf-8"> </head> <body> <input id="message" type="button" value="send a message"/> <script type="text/javascript" src="page-script.js"></script> </body> </html> the content script "content-script.js" adds an event listener to the button, that sends a custom event containing a message: var messenger = document.getelementbyid("message"); messenger.addeventlistener("click", sendcustomevent, false); function sendcustomevent() { var greeting = {"greeting" : "hello world"}; var event = document.createevent('customevent'); event.initcustomevent("addon-message", true, true, greeting); document.documentelement.dispatchevent(event); } finally, the page script "page-script.js" listens for the message and logs the greeting to the web console: window.addeventlist...
...And 2 more matches

notifications - Archive of obsolete content
display transient, toaster-style desktop messages to the user.
...cations on windows, os x using growl (and notification center as of os x 10.9 mavericks), and linux using libnotify.
... : object optional options: name type title string a string to display as the message's title.
...And 2 more matches

ui/frame - Archive of obsolete content
eive such messages in the frame script, listen for the window's message event: window.addeventlistener("message", handlepong, false); sending json in all cases, you can send a string as a message or a json object.
...ntlistener("message", handlepong, false); sending json in all cases, you can send a string as a message or a json object.
...ack to this particular frame instance.
...And 2 more matches

Tree - Archive of obsolete content
e tree item from the focused row assuming <tree id="my-tree">, you can use the following to get the tree item: var view = document.getelementbyid("my-tree").view; var sel = view.selection.currentindex; //returns -1 if the tree is not focused var treeitem = view.getitematindex(sel); note that the current index may be unselected (for example, a multi-select tree).
...y-tree">, you can use the following to get the tree item: var view = document.getelementbyid("my-tree").view; var sel = view.selection.currentindex; //returns -1 if the tree is not focused var treeitem = view.getitematindex(sel); note that the current index may be unselected (for example, a multi-select tree).
....
...And 2 more matches

Installing Extensions and Themes From Web Pages - Archive of obsolete content
ef, iconurl: aevent.target.getattribute("iconurl"), hash: aevent.target.getattribute("hash"), tostring: function () { return this.url; } } }; installtrigger.install(params); return false; } //--> </script> <a href="http://www.example.com/foo.xpi" iconurl="http://www.example.com/foo.png" hash="sha1:28857e60d043447c5f4550853f2d40770b326a13" onclick="return install(event);">install extension!</a> let's go through this piece by piece.
...ample.com/foo.png" hash="sha1:28857e60d043447c5f4550853f2d40770b326a13" onclick="return install(event);">install extension!</a> let's go through this piece by piece.
...13" onclick="return install(event);">install extension!</a> let's go through this piece by piece.
...And 2 more matches

Adding Events and Commands - Archive of obsolete content
relevant to them, but there are several events that are implemented for most elements.
... it's very useful because it represents the most common action for input controls such as menu items, buttons and checkboxes.
...presents the most common action for input controls such as menu items, buttons and checkboxes.
...And 2 more matches

Using Breakpoints in Venkman - Archive of obsolete content
the url of a future breakpoint, and has executable code at the specified line, venkman will automatically set a future breakpoint.
...ou can change the values of the variables that venkman displays (only in the context of the debugging environment itself) and see how these changes affect the execution of the code.
...bles that venkman displays (only in the context of the debugging environment itself) and see how these changes affect the execution of the code.
...And 2 more matches

Elements - Archive of obsolete content
mplied phase (capturing|bubbling|target) #implied button (1|2|3) #implied modifiers cdata #implied keycode cdata #implied key cdata #implied charcode cdata #implied clickcount (1|2|3) #implied command id #implied preventdefault false|true #implied > the handler element describes a single event handler.
..., "z".
...tribute is present, then its value must match the charcode field of the dom key event object in order for the handler to fire.
...And 2 more matches

Event Handlers - Archive of obsolete content
ed, the attribute wins.
...vascript body is compiled just before execution; code that does not depend on the context of the event should be factored into normal javascript file.
..., modifier keys can be specified using the modifiers attribute.
...And 2 more matches

A XUL Bestiary - Archive of obsolete content
rdened developers.
...derstand them adequately myself, but here goes a simple explanation of events and of how they are used, basically, in a event-based interface like those created in xul.
...nterface like those created in xul.
...And 2 more matches

Positioning - Archive of obsolete content
ead of their usual placement if there is not enough room to display the menu at full size below or to the right.
...ough room on either side, the menu will be shrunk down to fit.
...arbutton, the position attribute controls how the menupopup is anchored to the parent menu, button or toolbarbutton.
...And 2 more matches

Splitters - Archive of obsolete content
« previousnext » we'll now look at how to add splitters to a window.
...as follows: id the unique identifier of the splitter.
...wn (collapsed) and the other occupying all of the space.
...And 2 more matches

Tabboxes - Archive of obsolete content
« previousnext » it is common in preference dialogs for tabbed pages to appear.
... you have more options than will fit in one screen.
...w <tabbox> <tabs> <tab label="mail"/> <tab label="news"/> </tabs> <tabpanels> <tabpanel id="mailtab"> <checkbox label="automatically check for mail"/> </tabpanel> <tabpanel id="newstab"> <button label="clear news buffer"/> </tabpanel> </tabpanels> </tabbox> here, two tabs have been added, the first labeled 'mail' and the other 'news'.
...And 2 more matches

XUL element attributes - Archive of obsolete content
from the datasource are containers and thus can have child nodes and which ones are not containers.
...s and thus can have child nodes and which ones are not containers.
...tainers.
...And 2 more matches

tooltip - Archive of obsolete content
ial.
...he tooltip being filled automatically as appropriate for a browser content area tooltip, i.e.
...s closed and not visible.
...And 2 more matches

Accessible multimedia - Learn web development
er 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.
... to toggle between play and pause with a simple conditional function, like the following.
...bottom, which controls the stop button: stopbtn.onclick = function() { player.pause(); player.currenttime = 0; playpausebtn.textcontent = 'play'; }; there is no stop() function available on htmlmediaelements, so instead we pause() it, and at the same time set the currenttime to 0.
...And 2 more matches

Debugging CSS - Learn web development
malize all of the html, and the dom will also show any changes made by javascript.
...css that is being inherited by the box from its ancestors, in this case to <body>.
...using the problem.
...And 2 more matches

How do you set up a local testing server? - Learn web development
rver on your machine, and the basics of how to use it.
... purposes is to use python's simplehttpserver (or http.server, depending on the version of python installed.) to do this: install python.
...an get an installer from the python homepage and follow the instructions to install it: go to python.org under the download section, click the link for python "3.xxx".
...And 2 more matches

HTML text fundamentals - Learn web development
98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
... 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
... 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
...And 2 more matches

From object to iframe — other embedding technologies - Learn web development
find a video you like.
... body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
... if they are trying to maliciously modify your webpage, or trick people into doing something they don't want to do, such as reveal sensitive information like usernames and passwords.
...And 2 more matches

Functions — reusable blocks of code - Learn web development
tion myfunction() { alert('hello'); } but you can also create a function that doesn't have a name: function() { alert('hello'); } this is called an anonymous function — it has no name!
...on that doesn't have a name: function() { alert('hello'); } this is called an anonymous function — it has no name!
...thing on its own.
...And 2 more matches

Third-party APIs - Learn web development
which to display the marker, and an options object containing an icon property that defines the icon to display at that point.
...d of developer key, for reasons of security and accountability.
...the first 10 (0-9) if the page url parameter is set to 0 (or not included at all — 0 is the default value), the next 10 (10-19) if it is set to 1, and so on.
...And 2 more matches

Arrays - Learn web development
put id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solutio...
...— here we're giving you a fake search site, with a search box.
...1y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 370px; width: 95%"> const list = document.queryselector('.output ul'); const searchinput = document.queryselector('.output input'); const searchbtn = document.queryselector('.output button'); list.innerhtml = ''; let myhistory = []; searchbtn.onclick = function() { // we will only allow a term to be entered if the search input isn't empty if (searchinput.value !== '') { // number 1 // empty the list so that we don't display duplicate entries // the display is regenerated every time a search term is entered.
...And 2 more matches

Debugging on Windows
tent process, gpu process, etc.
...the same command line.
... example, without the quotes).
...And 2 more matches

Communicating with frame scripts
with your add-on's id.
...d after that you can pass any objects it wants to pass to content as cpows.
...e script messagemanager.addmessagelistener("my-addon@me.org:my-e10s-extension-message", listener); function listener(message) { console.log(message.name); console.log(message.sync); console.log(message.data); console.log(message.target); console.log(message.objects); } so combining this message listener with the message above will give console output somewhat like this, when the user clicks a <div>: "my-addon@me.org:my-e10s-extension-message" false object { details: "they clicked", tag: "div" } <xul:browser anonid="initialbrowser" ...
...And 2 more matches

Fonts for Mozilla's MathML engine
ost of these instructions may as well apply to other web rendering engines.
...9 directory and then inside the otf directory.
...tively good mathml rendering.
...And 2 more matches

about:memory
perhaps someone has asked you to use about:memory to generate "memory reports" so they can investigate a problem you are having.
... file dialog that lets you save the memory reports to a file of your choosing.
...ead on a website, click on the "measure..." button.
...And 2 more matches

nsIDOMXULElement
dom/interfaces/xul/nsidomxulelement.idlscriptable represents a xul element within the dom.
...lement.
...ooltiptext domstring gets/sets the value of the element's tooltiptext attribute.
...And 2 more matches

nsIFrameLoader
); void activateremoteframe(); void destroy(); void loadframe(); void loaduri(in nsiuri auri); void sendcrossprocesskeyevent(in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in boolean apreventdefault); void sendcrossprocessmouseevent(in astring atype, in float ax, in float ay, in long abutton, in long aclickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe); void updatepositionandsize(in nsiframe aiframe); native code only!
...efault whether or not to prevent default actions from being performed.
...s equivalent for cross-process event handling.
...And 2 more matches

nsINavHistoryResultViewObserver
; parameters row the row at which the drop occurred.
...r, indicating whether the drop destination is before, on, or after the target row.
...is opened or closed.
...And 2 more matches

nsITaskbarPreviewController
er the controller is connected to an nsitaskbartabpreview or nsitaskbarwindowpreview, only certain methods and attributes need to be implemented.
...y attached to a canvas element.
...ill equal the thumbnailaspectratio, within the margin of rounding errors.
...And 2 more matches

Using popup notifications
ve a moment to do so, instead of being forced to deal with them at possibly inconvenient times.
...deal with them at possibly inconvenient times.
...", callback: function() { alert("first secondary option selected."); } }, { label: "second secondary option", accesskey: "2", callback: function() { alert("second secondary option selected."); } } ] ); when this notification is presented, and the user clicks on the menu button in the panel, the display looks like this: when the user chooses one of your secondary actions from the drop-down menu, the corresponding callback is invoked.
...And 2 more matches

Flash Activation: Browser Comparison - Plugins
r-site basis.
...power saver peripheral content pause each of the browser vendors has a roadmap about the future of flash and changes to the user experience.
...yed when the site attempts to use flash.
...And 2 more matches

Browser Console - Firefox Developer Tools
tom, a command line interpreter enables you to evaluate javascript expressions.
...service"); var hud = hudservice.getbrowserconsole(); var clearbtn = hud.chromewindow.document.queryselector('.webconsole-clear-console-button'); clearbtn.addeventlistener('mouseover', function() { hud.jsterm.clearoutput(true); }, false); bonus features available for add-on sdk add-ons, the console api is available automatically.
...n'); clearbtn.addeventlistener('mouseover', function() { hud.jsterm.clearoutput(true); }, false); bonus features available for add-on sdk add-ons, the console api is available automatically.
...And 2 more matches

UI Tour - Firefox Developer Tools
the top level sources are organized by origin, and under that they're organized by the directory structure from which they are served.
...log so you can save the file locally.
...o enable/disable it: watch expressions you can add watch expressions in the right pane.
...And 2 more matches

Eyedropper - Firefox Developer Tools
> inspector > default color unit: you can use it in one of two ways: to select a color from the page and copy it to the clipboard to change a color value in the inspector's rules view to a color you've selected from the page copying a color to the clipboard open the eyedropper in one of these two ways: select "eyedropper" under the "web developer" menu open the page inspector tab and click the eyedropper button in its toolbar as you move the mouse around the page you'll see the current color value in the eyedropper change.
...e a color value in the inspector's rules view to a color you've selected from the page copying a color to the clipboard open the eyedropper in one of these two ways: select "eyedropper" under the "web developer" menu open the page inspector tab and click the eyedropper button in its toolbar as you move the mouse around the page you'll see the current color value in the eyedropper change.
...r" under the "web developer" menu open the page inspector tab and click the eyedropper button in its toolbar as you move the mouse around the page you'll see the current color value in the eyedropper change.
...And 2 more matches

Basic operations - Firefox Developer Tools
opening the memory tool before firefox 50, the memory tool is not enabled by default.
...mory tool is enabled by default.
...on the left: the snapshot will occupy the large pane on the right-hand side.
...And 2 more matches

Network request details - Firefox Developer Tools
the request details pane appears when you click on a network request in the request list.
... the request details pane appears when you click on a network request in the request list.
... firefox 78.
...And 2 more matches

Web Audio Editor - Firefox Developer Tools
love it if you filed them in bugzilla.
...de as the destination.
...ghted and you get a node inspector on the right hand side.
...And 2 more matches

Web Console UI Tour - Firefox Developer Tools
the web console's interface is split into three horizontal sections, detailed in the sections below.
... the web console's interface is split into three horizontal sections, detailed in the sections below.
... the web console's interface is split into three horizontal sections, detailed in the sections below.
...And 2 more matches

Animation.playbackRate - Web APIs
= newrate; value takes a number that can be 0, negative, or positive.
... animation’s playbackrate to 0 effectively pauses the animation (however, its playstate does not necessarily become paused).
...king alice game example, clicking or tapping the bottle causes alice's growing animation (alicechange) to reverse, causing her to shrink: var shrinkalice = function() { alicechange.playbackrate = -1; alicechange.play(); } // on tap or click, alice will shrink.
...And 2 more matches

EffectTiming.fill - Web APIs
as indicate that the box should be centered both vertically and horizontally inside its container.
...r it ends, and so forth.
...element will be rendered in its natural, unaltered condition anytime the animation isn't actively running.
...And 2 more matches

EventTarget.removeEventListener() - Web APIs
will not be triggered by the current actions.
...oked for the event it was registered for after being removed.
...r after being removed.
...And 2 more matches

GlobalEventHandlers.onanimationiteration - Web APIs
; } the animation's keyframes are defined next; they describe an animation which causes the box to migrate from the top-left corner of the container to the bottom-right corner.
...+1); }; this sets up two global variables: box, which references the "box" element that we're animating, and iterationcounter, which is initially zero, which indicates how many iterations of the animation have occurred.
...iterationcounter, which is initially zero, which indicates how many iterations of the animation have occurred.
...And 2 more matches

Using IndexedDB - Web APIs
'(biblioid: ' + value.biblioid + ') ' + value.title + '</li>'); if (value.year != null) list_item.append(' - ' + value.year); if (value.hasownproperty('blob') && typeof value.blob != 'undefined') { var link = $('<a href="' + cursor.key + '">file</a>'); link.on('click', function() { return false; }); link.on('mouseenter', function(evt) { setinviewer(evt.target.getattribute('href')); }); list_item.append(' / '); list_item.append(link); } else { list_item.append(" / no attached file"); } pub_list.append(list_item); }; // move on to the next object...
...(msg) { msg = typeof msg != 'undefined' ?
... $('#msg').html('<span class="action-failure">' + msg + '</span>'); } function resetactionstatus() { console.log("resetactionstatus ..."); $('#msg').empty(); console.log("resetactionstatus done"); } function addeventlisteners() { console.log("addeventlisteners"); $('#register-form-reset').click(function(evt) { resetactionstatus(); }); $('#add-button').click(function(evt) { console.log("add ..."); var title = $('#pub-title').val(); var biblioid = $('#pub-biblioid').val(); if (!title || !biblioid) { displayactionfailure("required field(s) missing"); return; } var year = $('#pub-year').val(); if (year != '') { // better use number.isinteger if the engine has ecmascript 6 if (isna...
...And 2 more matches

MouseEvent.initMouseEvent() - Web APIs
ggering events gives more information about the way to use these.
...e events include: click, mousedown, mouseup, mouseover, mousemove, mouseout.
...as depressed during the event.
...And 2 more matches

NotificationEvent.notification - Web APIs
the notification read-only property of the notificationevent interface returns the instance of the notification that was clicked to fire the event.
... the notification read-only property of the notificationevent interface returns the instance of the notification that was clicked to fire the event.
...erface returns the instance of the notification that was clicked to fire the event.
...And 2 more matches

PaymentRequest.show() - Web APIs
the paymentrequest interface's show() method instructs the user agent to begin the process of showing and handling the user interface for the payment request to the user.
...quires that the payment request's details need to be updated between instantiating the payment interface and the user beginning to interact with it.
...eady been shown for this request (its state is interactive because it is being shown already).
...And 2 more matches

Using the Payment Request API - Web APIs
the following snippet, a merchant page performs this check, and if it returns true updates the checkout button to use paymentrequest instead of legacy web forms.
...), buildshoppingcartdetails()); checkoutbutton.addeventlistener('click', function() { request.show().then(function(paymentresponse) { // handle successful payment }).catch(function(error) { // handle cancelled or failed payment.
....canmakepayment() .then(function(result) { shouldcallpaymentrequest = result; }).catch(function(error) { console.log(error); // the user may have turned off query ability in their privacy settings.
...And 2 more matches

Selection.modify() - Web APIs
o.
...e following space, regardless of the default platform behavior.
...m behavior.
...And 2 more matches

UIEvent.detail - Web APIs
the uievent.detail read-only property, when non-zero, provides the current (or next, depending on the event) click count.
... the uievent.detail read-only property, when non-zero, provides the current (or next, depending on the event) click count.
... the uievent.detail read-only property, when non-zero, provides the current (or next, depending on the event) click count.
...And 2 more matches

Raining rectangles - Web APIs
« previousnext » a simple webgl game that demonstrates clearing with solid colors, scissoring, animation, and user interaction.
..., setupanimation, false); var gl, timer, rainingrect, scoredisplay, missesdisplay; function setupanimation (evt) { window.removeeventlistener(evt.type, setupanimation, false); if (!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); rainingrect = new rectangle(); timer = settimeout(drawanimation, 17); document.queryselector("canvas") .addeventlistener("click", playerclick, false); var displays = document.queryselectorall("strong"); scoredisplay = displays[0]; missesdisplay = displays[1]; } var score = 0, misses = 0; function drawanimation () { gl.scissor(rainingrect.position[0], rainingrect.position[1], rainingrect.size[0] , rainingrect.size[1]); gl.clear(gl.color_buffer_bit); rainingrect.position[1] -= rainingrect.velocity; if...
...it); rainingrect.position[1] -= rainingrect.velocity; if (rainingrect.position[1] < 0) { misses += 1; missesdisplay.innerhtml = misses; rainingrect = new rectangle(); } // we are using settimeout for animation.
...And 2 more matches

Using the Web Speech API - Web APIs
iri on ios, cortana on windows 10, android speech, etc.
...ed to chrome for desktop and android — chrome has supported it since around version 33 but with prefixed interfaces, so you need to include prefixed versions of them, e.g.
...e default anyway.) recognition.grammars = speechrecognitionlist; recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; starting the speech recognition after grabbing references to the output <div> and the html element (so we can output diagnostic messages and update the app background color later on), we implement an onclick handler so that when the screen is tapped/clicked, the speech recognition service will start.
...And 2 more matches

window.location - Web APIs
example #4: display the properties of the current url in an alert dialog: function showloc() { var olocation = location, alog = ["property (typeof): value", "location (" + (typeof olocation) + "): " + olocation ]; for (var sprop in olocation){ alog.push(sprop + " (" + (typeof olocation[sprop]) + "): " + (olocation[sprop] || "n/a")); } alert(alog.join("\n")); } // in html: <button onclick="showloc();">show location properties</button> example #5: send a string of data to the server by modifying the search property: function senddata (sdata) { location.search = sdata; } // in html: <button onclick="senddata('some data');">send data</button> the current url with "?some%20data" appended is sent to the server (if no action is taken by the server, the current document is reload...
...cursus.
...tae eros.
...And 2 more matches

Window - Web APIs
enthandlers.onbeforeprint called when the print dialog box is opened.
...ent.
...beforeunload an event handler property for before-unload events on the window.
...And 2 more matches

XRSystem: isSessionSupported() - Web APIs
name is one of the following strings.
... the device supports vr mode by checking to see if an immersive-vr session is supported.
...st the vr session and, if successful, set up the session in a method called onsessionstarted(), not shown.
...And 2 more matches

CSS Animations tips and tricks - CSS: Cascading Style Sheets
the element's animation-play-state to "running" again.
...ng" class, which says that the @keyframes named "colorchange" should be used over the course of two seconds to animate the box.
...) a second time!
...And 2 more matches

Box-shadow generator - CSS: Cascading Style Sheets
node.appendchild(pointer); this.pointer = pointer; setmousetracking(node, updateslider.bind(this)); sliders[topic] = this; setvalue(topic, this.value); } var setbuttoncomponent = function setbuttoncomponent(node) { var type = node.getattribute('data-type'); var topic = node.getattribute('data-topic'); if (type === "sub") { node.textcontent = '-'; node.addeventlistener("click", function() { decrement(topic); }); } if (type === "add") { node.textcontent = '+'; node.addeventlistener("click", function() { increment(topic); }); } } var setinputcomponent = function setinputcomponent(node) { var topic = node.getattribute('data-topic'); var unit_type = node.getattribute('data-unit'); var input = document.createelement('input'); var unit...
...ar setinputcomponent = function setinputcomponent(node) { var topic = node.getattribute('data-topic'); var unit_type = node.getattribute('data-unit'); var input = document.createelement('input'); var unit = document.createelement('span'); unit.textcontent = unit_type; input.setattribute('type', 'text'); node.appendchild(input); node.appendchild(unit); input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { setvalue(topic, e.target.value | 0); }); subscribe(topic, function(value) { node.children[0].value = value; }); } var increment = function increment(topic) { var slider = sliders[topic]; if (slider === null || slider === undefined) return; if (slider.value + slider.step <= slider.ma...
... action = node.getattribute('data-action'); title = title === null ?
...And 2 more matches

Cross-browser audio basics - Developer guides
> </audio> <!-- custom play and pause buttons --> <button id="play">play</button> <button id="pause">pause</button> next, we attach some functionality to the player using javascript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var play = document.getelementbyid('play'); var pause = document.getelementbyid('pause'); // associate functions with the 'onclick' events play.onclick = playaudio; pause.onclick = pauseaudio; function playaudio() { myaudio.play(); } function pauseaudio() { myaudio.pause(); } } media loading events above we have shown how you can create a very simple audio player, but what if we want to show progress, buffering and only activate the buttons when the media is ready to play?
...splaycontrols() { loading.style.display = "none"; play.style.display = "block"; } // check that the media is ready before displaying the controls if (myaudio.paused) { displaycontrols(); } else { // not ready yet - wait for canplay event myaudio.addeventlistener('canplay', function() { displaycontrols(); }); } play.addeventlistener('click', function() { myaudio.play(); play.style.display = "none"; pause.style.display = "block"; }); pause.addeventlistener('click', function() { myaudio.pause(); pause.style.display = "none"; play.style.display = "block"; }); // display progress myaudio.addeventlistener('timeupdate', function() { //sets the percentage bar.style.width = ...
...ing using the seek bar this is a good start, but it would be nice to be able to navigate the audio using the progress bar.
...And 2 more matches

<label> - HTML: Hypertext Markup Language
ith an <input> element offers some major advantages: the label text is not only visually associated with its corresponding text input; it is programmatically associated with it too.
...nest the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit: <label>do you like peas?
... attributes are not needed because the association is implicit: <label>do you like peas?
...And 2 more matches

<template>: The Content Template element - HTML: Hypertext Markup Language
th two new rows appended to it via javascript: table { background: #000; } table td { background: #fff; } avoiding documentfragment pitfall a documentfragment is not a valid target for various events, as such it is often preferable to clone or refer to the elements within it.
...tfragment is not a valid target for various events, as such it is often preferable to clone or refer to the elements within it.
... for various events, as such it is often preferable to clone or refer to the elements within it.
...And 2 more matches

begin - SVG: Scalable Vector Graphics
t's animation should begin.
...mation should begin.
...uld begin.
...And 2 more matches

end - SVG: Scalable Vector Graphics
ment's animation should end.
...animation should end.
...should end.
...And 2 more matches

Types of attacks - Web security
this article describes various types of security attacks and techniques to mitigate them.
... this article describes various types of security attacks and techniques to mitigate them.
... this article describes various types of security attacks and techniques to mitigate them.
...And 2 more matches

XUL Migration Guide - Archive of obsolete content
eforwardbutton() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); var forward = window.document.getelementbyid('forward-button'); var parent = window.document.getelementbyid('urlbar-container'); parent.removechild(forward); } require("sdk/ui/button/action").actionbutton({ id: "remove-forward-button", label: "remove forward button", icon: "./icon-16.png", onclick: removeforwardbutton }); there are more useful examples of this technique in the jetpack wiki's collection of third party modules.
...uire("sdk/tabs/utils").getactivetab(window); if (tab.style.getpropertyvalue('background-color')) { tab.style.setproperty('background-color','','important'); } else { tab.style.setproperty('background-color','rgb(255,255,100)','important'); } } require("sdk/ui/button/action").actionbutton({ id: "highlight-active-tab", label: "highlight active tab", icon: "./icon-16.png", onclick: highlightactivetab }); security implications the sdk implements a security model in which an add-on only gets to access the apis it explicitly imports via require().
... use to load and access any xpcom object.
...org/embedcomp/prompt-service;1"].

ui - Archive of obsolete content
lbar, and sidebar ui objects.
...its own reference page, linked above: for all the details please refer to the reference page.
...the details please refer to the reference page.
...te) { console.log("you clicked '" + state.label + "'"); } }); you can make a button standalone or add it to a toolbar.

List Open Tabs - Archive of obsolete content
to follow this tutorial you'll need to have learned the basics of jpm.
... to follow this tutorial you'll need to have learned the basics of jpm.
...: "list-tabs", label: "list tabs", icon: "./icon-16.png", onclick: listtabs }); function listtabs() { var tabs = require("sdk/tabs"); for (let tab of tabs) console.log(tab.url); } note: to get this working, you will need to save an icon for the button to your add-on's "data" directory as "icon-16.png".
.../about/ info: http://www.bbc.co.uk/ you don't get direct access to any content hosted in the tab.

Dialogs and Prompts - Archive of obsolete content
dialog, process those arguments in the dialog, and return user-modified arguments to the caller.
... code to open a dialog named mydialog.xul and pass it arguments: var params = {inn:{name:"foo", description:"bar", enabled:true}, out:null}; window.opendialog("chrome://myext/content/mydialog.xul", "", "chrome, dialog, modal, resizable=yes", params).focus(); if (params.out) { // user clicked ok.
...alog.js: // called once when the dialog displays function onload() { // use the arguments passed to us by the caller document.getelementbyid("name").value = window.arguments[0].inn.name; document.getelementbyid("description").value = window.arguments[0].inn.description; document.getelementbyid("enabled").checked = window.arguments[0].inn.enabled; } // called once if and only if the user clicks ok function onok() { // return the changed arguments.
...guments passed to us by the caller document.getelementbyid("name").value = window.arguments[0].inn.name; document.getelementbyid("description").value = window.arguments[0].inn.description; document.getelementbyid("enabled").checked = window.arguments[0].inn.enabled; } // called once if and only if the user clicks ok function onok() { // return the changed arguments.

Offering a context menu for form controls - Archive of obsolete content
firefox 3 changed the behavior of right-click on form controls to no longer display a context menu by default.
...tent the first thing to do is to establish an overlay over the chrome for the window in which you want to allow context menus on form controls.
... in which you want to allow context menus on form controls.
...f (this.istargetaformcontrol(anode)) this.shoulddisplay = true; }; }, false); this code, which is run when the window is opened up, works by replacing the settarget() routine for the prototype of nscontextmenu with one that forces the context menu to display if the target of the menu is a form control.

Custom XUL Elements with XBL - Archive of obsolete content
ht after they are created and inserted to the document.
...due to some asynchronous operation related to node insertion.
... node insertion.
...not including the content tag, and then just add the methods and properties you wish to override.

Handling Preferences - Archive of obsolete content
m as you please.
...rence windows it's very common for extensions to have a few settings that their users can change to tailor them to their needs.
...ystems where the instant apply rule is not used.
...s not used.

The Box Model - Archive of obsolete content
rences window.
... it was cut.
...need to restrict the width using css.
...is way, but string bundles won't do anything special with it.

User Notifications and Alerts - Archive of obsolete content
evel, to prevent the user from getting used to dismissing high-level notifications.
...t the user from getting used to dismissing high-level notifications.
...so, clicking on any of your custom buttons will cause the notification to be immediately closed, so you should only use notification boxes for single-step processes.
....getstring("xulschoolhello.greeting.title"); let message = this._bundle.getstring("xulschoolhello.greeting.label"); alertsservice.showalertnotification( "chrome://xulschoolhello/skin/hello-notification.png", title, message, true, "", this, "xulschool hello message"); we pass this as an argument, assuming that this is an object that implements nsiobserver.

Signing an extension - Archive of obsolete content
you're working on mac and you've already got a valid certificate from ca.
...on.
...efox, export it by following the steps below.
...y installed to firefox.

Creating a Microsummary - Archive of obsolete content
o contains basic functions for manipulating those nodes and their content.
...b page that calls firefox's window.sidebar.addmicrosummarygenerator() method to download and install the generator.
....mozilla.com/~myk/micro...-generator.xml, and we wanted users to be able to install it from http://people.mozilla.com/~myk/micro...ial/index.html, we might add the following code to the index.html page: <button onclick="window.sidebar.addmicrosummarygenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">install the spread firefox home page microsummary!</button> clicking that button will generate a javascript error on browsers that don't support microsummaries, however, so to improve the experience for those users, we should check to see if the user is using a microsummaries-enabled browser and display an explanatory message if not.
...ng code: <script> const warning = "sorry, you need a microsummary-enabled browser like firefox 2.0 to install and use microsummary generators."; function addgenerator(url) { if (typeof window.sidebar == "object" && typeof window.sidebar.addmicrosummarygenerator == "function") window.sidebar.addmicrosummarygenerator(url); else alert(warning); } </script> <button onclick="addgenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">install the spread firefox home page microsummary!</button> note that due to bug 341283, addmicrosummarygenerator() will not accept a relative url.

In-Depth - Archive of obsolete content
that you've got everything extracted and you know how to modify items, you might be wondering, how do i know where everything is?
...aller again.
...rowser window.
...ll be xul:toolbarbutton.

Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
32,371" href="#open"> <area alt="(4)" coords="90,384,127,417" href="#openuri-innards"> <area alt="(0) registercontentlistener()" coords="37,474,346,474,346,505,88,505,88,535,37,535" href="#registercontentlistener" shape="poly"> <area alt="(3) openuri() (nsuriloader)" coords="5,207,312,269" href="#openuri"> <area alt="(2)" coords="102,114,139,148" href="#internalload"> <area alt="(1) loaduri/onlinkclick" coords="77,5,449,59" href="#loaduri"> <area alt="nsiexternalhelperappservice" coords="527,305,839,339" href="#nsiexternalhelperappservice"> <area alt="category manager" coords="683,467,807,527" href="#nscategorymanager"> <area alt="nsdocumentopeninfo" coords="371,71,635,185" href="#nsdocumentopeninfo"> <area alt="necko" coords="721,113,821,157" href="#necko"> <area alt="nsuriloader" coords="23,3...
...n the diagram are still accurate.
...urrent page), and session history issues.
...hands off to nsuriloader::openchannel.

slideBar - Archive of obsolete content
s of browsers.
...functiononreadyfunction)this is a list of options to specify modifications to your slidebar instance.
... a list of options to specify modifications to your slidebar instance.
... of the content area and the selected slide sizeint persistdefault slide behavior when being selectedbool autoreloadautomatically reload content on selectbool onclickcallback when the icon is clickedfunction onselectcallback when the feature is selectedfunction onreadycallback when featured is loadedfunction an example: jetpack.slidebar.append({ url: "http://mozilla.com", width: 150, onclick: function(slide){ slide.icon.src = "chrome://branding/content/icon48.png"; }}); ...

Proxy UI - Archive of obsolete content
products firefox menu: preferences > advanced tab > networking tab > connection button.
...list of proxy types that require a hostname and a port number.
...stname and a port number.
...uttons: ( ) socks v4 ( ) socks v5 "no proxy for:" discussed in detail elsewhere...

Tamarin Build System Documentation - Archive of obsolete content
n appears in the buildbot status page, please describe what you are trying to build and test after submitting a sandbox build view the build status page or the queue (if buildbot is busy) how do i view and change the queue?
...ceptance-release.sh <optional hg revision number like 1902> how do i navigate the build status page?
... page is divided into the phase table at the top and the waterfall table below the phase table shows all phases at the top of the page, each slave is shown as a box with a red,green, or yellow color: red means failed, green passed, and yellow has warnings.
...idual box to display the test result below the phase table the waterfall displays each buildstep and result the left side contains the time column and the user/revision link to represent the revision triggering a build, mouse over the user to see the revision and submission notes each buildstep run on a slave is a box with color indicating status, red is failed, green passed, yellow has warnings click the stdio link to see the output click on the build yellow box at the bottom of a set of buildsteps to see the result of all of the buildsteps for a build and the time each buildstep took scroll down to see previous builds triggered at the bottom of the page click on the [next page] link to display more previous builds what are the goals of the build system (qos)?

Introduction to XUL - Archive of obsolete content
xul file, so script is just mixed in with the other content, delimited by a script element in the html namespace.
...hanges of state between widgets.
...this document.
... { display: block; width: 100%; height: 100%; } for example, the above style rule would apply to the main window and dictates that the window should consume the full width and height available to it in a content area.

PopupEvents - Archive of obsolete content
tems on the popup based on the context.
...e popupshowing event just before a popup is about to be displayed, a popupshowing event will fired on the popup.
...ill fired on the popup.
...puphiding event when a popup is closed, the popuphiding event is fired on the popup just before it is removed from the screen.

Custom toolbar button - Archive of obsolete content
e.
... the name of the saved file is: button-1.png explanation: the image is in four parts.
...cking it).
...the application's extension manager window.

Using the Editor from XUL - Archive of obsolete content
et content.
...space, delete, enter/return).
...ndles the drop by inserting data in dragdrop.
...istener this is an odd-man-out event listener, in that it's registered from the editorshell, rather than internally to the editor.

arrowscrollbox - Archive of obsolete content
ies | methods | related ] a box which provides scroll arrows along its edges for scrolling through the contents of the box.
...es, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width clicktoscroll type: boolean clicktoscroll, if true, the arrows must be clicked to scroll the scrollbox content.
... and sets the value of the disabled attribute.
...ative value to scroll backward that many lines.

colorpicker - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a palette of colors from which a user may select by clicking on one of the grid cells.
...type: integer the tab order of the element.
...sabled attribute.
...x, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsidomxulcontrolelement bugs the onchange event only fires if attribute type is set to "button".

scrollbar - Archive of obsolete content
butes | properties | methods | related ] when a container's contents which are larger that the size of the container, scroll bars may be placed at the side of the container to allow the user to scroll around in the container.
...ageincrement examples <scrollbar curpos="5" maxpos="50"/> attributes curpos type: integer the current position of the scrollbar, which ranges from 0 to the value of the maxpos attribute.
...ber boxes and scale) attribute changes when the arrows are clicked(or scales are dragged).
... , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...

textbox - Archive of obsolete content
eld with multiple rows.
... code.
...f this attribute is not specified, word wrapping is enabled.
... return type: no return value sets the selected portion of the textbox, where the start argument is the index of the first character to select and the end argument is the index of the character after the selection.

Gecko Compatibility Handbook - Archive of obsolete content
ng these browsers is that if you're only detecting netscape or netscape6 you'll see the issues right away.
...all the user agent switcher extension.
...pecify quirks mode layout via the doctype.
...yout instead.

2006-11-22 - Archive of obsolete content
ccessibility - nov 17-nov 22, 2006 announcements mozilla osk project grant aaron leventhal (on behalf of michael curran) mentiond that there is now an nvda email list you can join if you wish to keep up to date with the latest changes, or if you wish to discuss new features or talk with other nvda users.
...d that there is now an nvda email list you can join if you wish to keep up to date with the latest changes, or if you wish to discuss new features or talk with other nvda users.
...mail address) michael would like to thank stormdragon for setting this up.
...if anyone has experience with these issues, and is comfortable helping out in the mozilla/accessible module, would you please take a look at https://bugzilla.mozilla.org/show_bug.cgi?id=166994 he stated that he almost had it working a couple of years ago.

2D maze game with device orientation - Game development
s showing the progress on the screen.
...rtbutton.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.
...te position on canvas in pixels.
...rmation on how to play the game.

Mobile accessibility - Learn web development
global options relating to the device as a whole, and the latter provides options relating just to the current app/screen you are in.
...testing on ios, see test accessibility on your device with voiceover.
...ur css and javascript accessibility article, we looked at the idea of events that are specific to a certain type of control mechanism (see mouse-specific events).
...n is consequently known as a "hamburger menu".

WAI-ARIA basics - Learn web development
to take a copy of aria-no-live.html and quotes.json, and update your <section> tag as follows: <section aria-live="assertive"> this will cause a screenreader to read out the content as it is updated.
...l accessibility article, and enhancing keyboard accessibility, above).
...s as buttons.
...sing phrases like "click me!, group", which is obviously confusing.

Styling links - Learn web development
e :visited pseudo class.
... illustrates what a link will behave like by default (the css is simply enlarging and centering the text to make it stand out more.) <p><a href="#">a simple link</a></p> p { font-size: 2rem; text-align: center; } note: all the links in the examples in this page are fake links — a # (hash, or pound sign) is put in place of the real url.
...link makes the mouse pointer change to a little hand icon.
....value; var csscode = cssinput.value; var output = document.queryselector(".output"); var solution = document.getelementbyid("solution"); var styleelem = document.createelement('style'); var headelem = document.queryselector('head'); headelem.appendchild(styleelem); function drawoutput() { output.innerhtml = htmlinput.value; styleelem.textcontent = cssinput.value; } reset.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = csscode; drawoutput(); }); solution.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n ...

How do I use GitHub Pages? - Learn web development
-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.
... a terminal with ctrl + alt + t.
...ating a repo for your code next, you need to create a new repo for your files to go in.
...ster now you need to turn github pages on for your repository.

HTML forms in legacy browsers - Learn web development
supported not supported form buttons there are two ways to define buttons within html forms: the <input> element with its attribute type set to the values button, submit, reset or image the <button> element <input> the <input> element can make things a little difficult if you want to apply some css by using the element selector: <input type="button" value="click me"> if we remove the border on all inputs, can we restore the default appearance on input buttons only?
...sest to restoring default rendering, when supported.
...tion.
...t instead of the content of the value attribute when clicked.

How to structure a web form - Learn web development
bel> even in such cases however, it is considered best practice to set the for attribute to ensure all assistive technologies understand the relationship between label and widget.
...or attribute to ensure all assistive technologies understand the relationship between label and widget.
...abel, or if the form control is neither implicitly or explicitly associated with a label, and a screenreader will read out something like "edit text blank", which isn't very helpful at all.
... properly set up labels is that you can click or tap the label to activate the corresponding widget.

Sending forms through JavaScript - Learn web development
request manually.
...eventlistener( 'error', function(event) { alert( 'oops!
...h the formdata object.
... { alert( 'yeah!

Your first form - Learn web development
ility, we include an explicit label for each form control.
...d to add a button to allow the user to send, or "submit", their data once they have filled out the form.
...lement; add the following just above the closing </ul> tag: <li class="button"> <button type="submit">send your message</button> </li> the <button> element also accepts a type attribute — this accepts one of three values: submit, reset, or button.
...tton.

Advanced text formatting - Learn web development
y { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
...y { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
...y { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
... editor.

Getting started with HTML - Learn web development
98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
...ute.
... 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
...100%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...

Test your skills: Links - Learn web development
in this task we want you to help fill in the links on our whales information page: the first link should be linked to a page called whales.html, which is in the same directory as the current page.
...cond link should be turned into a link you can click to open up an email in the user's default mail application, with the recipient set as "whales@example.com".
...nt directory.
... page about narwhals, a support email address, and a pdf factfile that is 4mb in size.

TypeScript support in Svelte - Learn web development
has been discontinued.
...n a continuous integration (ci) pipeline.
... replace the content of the filterbutton.svelte file with the following: <!-- components/filterbutton.svelte --> <script lang='ts'> import { filter } from '../types/filter.enum' export let filter: filter = filter.all </script> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === filter.all} aria-pressed={filter === filter.all} on:click={()=> filter = filter.all} > <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === filter.active} aria-pressed={filter === filter.active} on:click={()=> filter = filter.active} > <span class="visually-hidden">show</span> <span>active</span> <span clas...
...btn toggle-btn" class:btn__primary={filter === filter.active} aria-pressed={filter === filter.active} on:click={()=> filter = filter.active} > <span class="visually-hidden">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === filter.completed} aria-pressed={filter === filter.completed} on:click={()=> filter = filter.completed} > <span class="visually-hidden">show</span> <span>completed</span> <span class="visually-hidden">tasks</span> </button> </div> here we are just importing the filter enum, and using it instead of the string values we used previously.

Handling common JavaScript problems - Learn web development
examples like this one, which shows a typical pattern of saving a this scope to a separate variable, then using that variable in nested functions so you can be sure you are applying functionality to the correct this scope.
...ows a typical pattern of saving a this scope to a separate variable, then using that variable in nested functions so you can be sure you are applying functionality to the correct this scope.
...ful details pertaining to the current environment — breakpoints, callstack and currently active scopes.
... code was stopped.

Debugging a hang on OS X (Archived)
ation is still hung, open up spin control.app (it’s in your <tt>/developer/applications/performance tools/</tt> folder; if it is missing, install the latest computer hardware understanding development (chud) tools from apple).
... understanding development (chud) tools from apple).
...button; a new window will open with a couple of rows with stacktraces for all the threads in the sampled application.
...en…” button.

HTMLIFrameElement.sendMouseEvent()
not work for every user.
...ver, mouseout, or contextmenu.
...enu.
...ls.

How to get a stacktrace with WinDbg
these four commands, pressing enter after each one.
...rnel32!exitprocess+0x14 this looks wrong to me?!
...n without the "debug child processes also" check box being checked.
...he application again, this time with the check box being checked.

How to Report a Hung Firefox
crashfirefox.exe here (source code).
... any process monitoring tool to find the firefox process id (pid).
...end the crash report to mozilla start firefox.
... this link.

CustomizableUI.jsm
l windows for you.
... parameters aarea the id of the area whose customize target you want to have awindow the window where you want to fetch the dom node.
...ting the element, because otherwise, the icon will not be set as the buttons are added, then we register the listener.
... it needs a 16x16 icon.

Interfacing with the Add-on Repository
the add-on repository javascript code module makes it easy for your extension to interface with the amo repository.
...ns() queries the add-on repository for add-ons matching given search criteria.
... popupnotifications.remove(box); } } }, null /* secondary action */ ); } the code here starts by stashing the passed-in addoninstall object for later use, then creates and displays the pop-up notification box with the text and button label passed into the method.
... here starts by stashing the passed-in addoninstall object for later use, then creates and displays the pop-up notification box with the text and button label passed into the method.

PopupNotifications.jsm
for 30 seconds).
...ation should persist across location changes.
...therwise been dismissed (that is, any time the popup is closed due to user interaction).
...s the url in a new tab.

Localizing with Mercurial
ld\hg to do this.
... /result .
...ich means the current directory.
...orrectly." alternatively, you can edit the %path% variable manually.

McCoy
ccoy https://bugzilla.mozilla.org/show_bug.cgi?id=396525 signing update manifests before you release your add-on in order to verify the update manifests applications need to already have information from you for how to verify it.
...button or select "create key" from the "keys" menu.
... do this is to select the key then click the install toolbar button.
...he key, select \"copy public key\" and then add it to the file as an updatekey entry.

PKCS11 FAQ
ession handle of 0 is indeed invalid.
...rt card which has initial pin set at '9999', i insert it into my reader and download with my certificate (keygen completed), can i issue 'change password' from the firefox to set a new pin to the smart card?
...nto my reader and download with my certificate (keygen completed), can i issue 'change password' from the firefox to set a new pin to the smart card?
...ificate (keygen completed), can i issue 'change password' from the firefox to set a new pin to the smart card?

Rhino Debugger
d watch windows are updated to reflect the names and values of the variables visible at that scope.
...aring breakpoints the main desktop of the debugger contains file windows which display the contents of each script you are debugging.
...menu item.
...cted line contains executable code a red dot will appear next to the line number and a breakpoint will be set at that location.

Shumway
e flash player especially when unavoidable patents (such as those surrounding flash drm) get in the way.
...your swf file.
...lems relating to shumway, itself.
...humway into firefox.

Building the WebLock UI
-browsers].
...st: function addthissite() { var tf = document.getelementbyid("dialog.input"); // weblock is global and declared above weblock.addsite(tf.value); } this javascript function can be called directly from the xul widget, where the input string is retrieved as the value property of the textbox element.
...og, so it can use a single declaration to import the "global" skin from the browser and make it available to the widgets you define in weblock.xul.
...lable there.

nsIPromptService
constant value description button_pos_0_default 0 button_pos_1_default 16777216 button_pos_2_default 33554432 button_delay_enable button_delay_enable causes the buttons to be initially disabled.
...nterpret this loosely, as the intent is to ensure that the user does not click through a security dialog too quickly.
...ck.value is now true if the box was checked and false if the box was cleared confirm example confirm displays a dialog with ok/cancel.
...as checked and false if the box was cleared confirm example confirm displays a dialog with ok/cancel.

Troubleshooting XPCOM components registration
le/extensions/$plugindirectory/components!
...code, and then check them again.
...pendency walker, open the options menu and select configure module search order....
..., check for any missing dependencies using file -> open -> firefox.exe (or equivalent).

3D view - Firefox Developer Tools
from firefox 47 onwards, 3d view is no longer available.
... from firefox 47 onwards, 3d view is no longer available.
...m of the page.
...g and dragging the view, you can rotate and re-orient the 3d presentation of the dom hierarchy of your page to see it from different angles, to better examine its structure.

DOM Inspector FAQ - Firefox Developer Tools
earches, and will do partial matching.
...h nodes' tags for "tab", you'll get matches for tabpanel and tabbox as well as tab.
... get matches for tabpanel and tabbox as well as tab.
...he beginning-of-string and end-of-string markers; e.g., searching nodes for "^tab$" will return only nodes whose names are exactly "tab".

Use watchpoints - Firefox Developer Tools
chpoints: get, set, and get or set.
...he debugger user interface, find an object you want to watch, and right-click it to open its context menu.
...oint type (get or set), the debugger pauses, enabling you to see line of code responsible, and to inspect anything else you wish at that time.
... pauses, enabling you to see line of code responsible, and to inspect anything else you wish at that time.

Index - Firefox Developer Tools
e tags and summary 1 firefox developer tools developing mozilla, guide, tools, web development, web development:tools, l10n:priority firefox developer tools is a set of web developer tools built into firefox.
... using the pause button.
...ks and works properly on a range of different devices — particularly mobile phones and tablets as well as desktops and laptops.
...ibrary’s abstraction leaks during debugging sessions when you are forced to step through its stack frames in order to reach your own code.

Dominators view - Firefox Developer Tools
about 21% and 8% of the total size of the memory snapshot, respectively.
...ee all the nodes for which this root is the immediate dominator.
...window dominates a css2properties object, whose retained size is 2% of the total snapshot size.
...n stack" in firefox 46.

CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
ining and modifying them, debugging layout issues, and more.
...ontainer or flex item, the tooltip includes the appropriate information.
...note: the layout view can be found underneath the layout tab on the right-hand pane of the page inspector.
... color picker so you can select a different color for the overlay.

Select an element - Firefox Developer Tools
ng the box model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page.
...ment": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page.
...e highlighted in the page.
... you can also use the arrow keys to move around the dom with the keyboard.

UI Tour - Firefox Developer Tools
e the same as what getcomputedstyle would return.): compatibility view starting with firefox developer edition version 77, the compatibility view shows css compability issues, if any, for properties applied to the selected element, and for the current page as a whole.
... element, and for the current page as a whole.
...r deprecated.
... compatibility" section of the article gives details of browser support for the property.

Settings - Firefox Developer Tools
opening settings beginning with firefox 62, the icon to open developer tools settings has been moved into a menu accessed by clicking/touching ...
... useful if you have a widescreen monitor.
...es the style editor to display the original, preprocessor, sources rather than the generated css.
...or rules view will also provide links to the original sources.

Storage Inspector - Firefox Developer Tools
orage items cannot be shared between them.
...en by object store name: with the cookies, local storage, and session storage types, there's only one level in the hierarchy, so stored items are listed directly under each origin: you can click on each item in the tree to expand or collapse its children.
...rarchy, so stored items are listed directly under each origin: you can click on each item in the tree to expand or collapse its children.
...s storage type will show all the cookies belonging to that domain.

View Source - Firefox Developer Tools
view source lets you look at the html or xml source for the page you're viewing.
...rrors.
...ing the #linennn anchor to the url the browser will jump to the nnn line.
...://www.mozilla.org/#line100 view selection source if you select part of a web page and conext-click, you'll see a context menu item labeled "view selection source", that behaves just like "view page source", except you only see the source for the selection.

Rich output - Firefox Developer Tools
utput for many object types, including the following: object array date promise regexp window document element event examining object properties when an object is logged to the console it has a right-pointing triangle next to it, indicating that it can be expanded.
...ts: starting with firefox 67 (available now in firefox developer) you can use the arrow keys on your keyboard to navigate through objects displayed in the console.
...s.
... object { status: "to do", description: "normalize table", datecreated: 1552404533790 } ​ length: 4 ​ <prototype>: array [] debugger eval code:1:9 undefined highlighting and inspecting dom nodes if you hover the mouse over any dom element in the console output, it's highlighted on the page: in the screenshot above you'll also see a blue "target" icon next to the node in the console output: click it to switch to the inspector with that node selected.

Using dynamic styling information - Web APIs
e</title> <script type="text/javascript"> function alterstyle(elem) { elem.style.background = 'green'; } function resetstyle(elemid) { elem = document.getelementbyid(elemid); elem.style.background = 'white'; } </script> <style type="text/css"> #p1 { border: solid blue 2px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'.
...t/javascript"> function alterstyle(elem) { elem.style.background = 'green'; } function resetstyle(elemid) { elem = document.getelementbyid(elemid); elem.style.background = 'white'; } </script> <style type="text/css"> #p1 { border: solid blue 2px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'.
...document.getelementbyid(elemid); elem.style.background = 'white'; } </script> <style type="text/css"> #p1 { border: solid blue 2px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'.
... <title>style property example</title> <link rel="stylesheet" href="example.css" type="text/css"> <script type="text/javascript"> function stilo() { document.getelementbyid('d').style.color = 'orange'; } function resetstyle() { document.getelementbyid('d').style.color = 'black'; } </script> </head> <body> <div id="d" class="thunder">thunder</div> <button onclick="stilo()">click here to change text color</button> <button onclick="resetstyle()">reset text color</button> </body> </html> the media and type of the style may or may not be given.

Using channel messaging - Web APIs
the <iframe>.
...t.getelementbyid('message-input'); var output = document.getelementbyid('message-output'); var button = document.queryselector('button'); var iframe = document.queryselector('iframe'); var channel = new messagechannel(); var port1 = channel.port1; // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for button clicks button.addeventlistener('click', onclick); // listen for messages on port1 port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('init', '*', [channel.port2]); } // post a message on port1 when the button is clicked function onclick(e) { e.preventdefault(); port1.postmessage(input.value); } // handle messages received on port1 function onmessage(e) { output.innerhtml = ...
...nel.port2]); } // post a message on port1 when the button is clicked function onclick(e) { e.preventdefault(); port1.postmessage(input.value); } // handle messages received on port1 function onmessage(e) { output.innerhtml = e.data; input.value = ''; } we start off by creating a new message channel by using the messagechannel() constructor.
...is initial port transfering this message could be an empty string but in this example it is set to 'init'.

Clients.openWindow() - Web APIs
the openwindow() method of the clients interface creates a new top level browsing context and loads a given url.
...t to open in the window.
... otherwise.
...plicable if (self.notification.permission === 'granted') { const notificationobject = { body: 'click here to view your messages.', data: { url: self.location.origin + '/some/path' }, // data: { url: 'http://example.com' }, }; self.registration.shownotification('you\'ve got messages!', notificationobject); } // notification click event listener self.addeventlistener('notificationclick', e => { // close the notification popout e.notification.close(); // get all the window clients e.waituntil(clients.matchall({ type: 'window' }).then(clientsarr => { // if a window tab matching the targeted url already exists, focus that; const hadwindowtofocus = clientsarr.some(windowclient => windowclient.url === e.notification.data.url ?

Document.cookie - Web APIs
ccessor property with native setter and getter functions, and consequently is not a data property with a value: what you write is not the same as what you read, everything is always mediated by the javascript interpreter.
...unction alertcookie() { alert(document.cookie); } <button onclick="alertcookie()">show cookies</button> example #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.
... 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.
...d(row => row.startswith('dosomethingonlyonce'))) { alert("do something here!"); document.cookie = "dosomethingonlyonce=true; expires=fri, 31 dec 9999 23:59:59 gmt"; } } <button onclick="doonce()">only do something once</button> example #4: reset the previous cookie function resetonce() { document.cookie = "dosomethingonlyonce=; expires=thu, 01 jan 1970 00:00:00 gmt"; } <button onclick="resetonce()">reset only once cookie</button> example #5: check a cookie existence //es5 if (document.cookie.split(';').some(function(item) { return item.trim().indexof('reader=') == 0 })) { console.log('the cookie "reader" exists (es5)') } //es2016 if (document.cookie.split(';').some((item) => item.trim().startswith('reader='))) { console.log('the cookie "reader" exists (es6)'...

Document.mozSetImageElement() - Web APIs
t); parameters imageelementid is a string indicating the name of an element that has been specified as a background image using the -moz-element css function.
...ck each time the block is clicked by the user.
...ked() { var canvas = document.createelement("canvas"); canvas.setattribute("width", 100); canvas.setattribute("height", 100); var ctx = canvas.getcontext('2d'); ctx.fillstyle = "#" + c.tostring(16) + "0000"; ctx.fillrect(25, 25, 75, 75); c += 0x11; if (c > 0xff) { c = 0x00; } document.mozsetimageelement("canvasbg", canvas); } the code here is called each time the user clicks the <div> element.
...> 0xff) { c = 0x00; } document.mozsetimageelement("canvasbg", canvas); } the code here is called each time the user clicks the <div> element.

Events and the DOM - Web APIs
the three phases of event flow through the dom in the dom level 3 events draft.
...uments) alert('hello world') } this is the method you should use in modern web pages.
...passed the event object via the event parameter.
...le shows how an event object is passed to the event handler function, and can be used from within one such function.

Event.eventPhase - Web APIs
r, starting with the parent, and eventually reaching the containing window.
...ng window.
... border: thin black solid; } #divinfo { margin: 18px; padding: 8px; background-color:white; font-size:80%; } javascript let clear = false, divinfo = null, divs = null, usecapture = false; window.onload = function () { divinfo = document.getelementbyid('divinfo') divs = document.getelementsbytagname('div') chcapture = document.getelementbyid('chcapture') chcapture.onclick = function () { removelisteners() addlisteners() } clear() addlisteners() } function removelisteners() { for (let i = 0; i < divs.length; i++) { let d = divs[i] if (d.id != "divinfo") { d.removeeventlistener("click", ondivclick, true) d.removeeventlistener("click", ondivclick, false) } } } function addlisteners() { for (let i = 0; i < divs.length; i++...
... { for (let i = 0; i < divs.length; i++) { let d = divs[i] if (d.id != "divinfo") { d.removeeventlistener("click", ondivclick, true) d.removeeventlistener("click", ondivclick, false) } } } function addlisteners() { for (let i = 0; i < divs.length; i++) { let d = divs[i] if (d.id != "divinfo") { if (chcapture.checked) { d.addeventlistener("click", ondivclick, true) } else { d.addeventlistener("click", ondivclick, false) d.onmousemove = function () { clear = true } } } } } function ondivclick(e) { if (clear) { clear() clear = false } if (e.eventphase == 2) e.currenttarget.style.backgroundcolor = 'red'; let level = e.eventphase == 0 ?

Event.preventDefault() - Web APIs
to propagate as usual, unless one of its event listeners calls stoppropagation() or stopimmediatepropagation(), either of which terminates propagation at once.
...ls stoppropagation() or stopimmediatepropagation(), either of which terminates propagation at once.
...elable event, such as one dispatched via eventtarget.dispatchevent(), without specifying cancelable: true has no effect.
...x is the default action of clicking on a checkbox.

Event.type - Web APIs
the type read-only property of the event interface returns a string containing the event's type.
...string containing the event's type.
...n the event is constructed and is the name commonly used to refer to the specific event, such as click, load, or error.
...events document.addeventlistener('keydown', geteventtype, false); // first document.addeventlistener('keypress', geteventtype, false); // second document.addeventlistener('keyup', geteventtype, false); // third // mouse events document.addeventlistener('mousedown', geteventtype, false); // first document.addeventlistener('mouseup', geteventtype, false); // second document.addeventlistener('click', geteventtype, false); // third result specifications specification status comment domthe definition of 'event.type' in that specification.

Force Touch events - Web APIs
and is not on a standards track.
...dware) new interactions based on how hard the user clicks or presses down on the touchscreen or trackpad.
...fired before the mousedown event.
...wn, webkitmouseforceup, mousemove, and mouseup event objects: mouseevent.webkitforce read only the amount of pressure currently being applied to the trackpad/touchscreen constants these constants are useful for determining the relative intensity of the pressure indicated by mouseevent.webkitforce: mouseevent.webkit_force_at_mouse_down read only minimum force necessary for a normal click mouseevent.webkit_force_at_force_mouse_down read only minimum force necessary for a force click specifications not part of any specification.

GeolocationCoordinates.longitude - Web APIs
he iers reference meridian, which is located 5.3 arcseconds (102 meters / 335 feet) east of the greenwich meridian.
...splay the resulting coordinates once they're returned.
....latitude; let long = position.coords.longitude; lattext.innertext = lat.tofixed(2); longtext.innertext = long.tofixed(2); }); }); after setting up variables to more conveniently reference the button element and the two elements into which the latitude and logitude will be drawn, the event listener is established by calling addeventlistener() on the <button> element.
...ed(2); longtext.innertext = long.tofixed(2); }); }); after setting up variables to more conveniently reference the button element and the two elements into which the latitude and logitude will be drawn, the event listener is established by calling addeventlistener() on the <button> element.

GlobalEventHandlers.onpointerdown - Web APIs
watch for and act upon pointerdown events using onpointerdown.
...e contents of the target box.
...ust restore the original text into the target box after the user's interaction with the element ends (for example, when they release the mouse button, or when they lift the stylus or finger from the screen).
...ect its functionality at all.

HTMLElement.hidden - Web APIs
syntax ishidden = htmlelement.hidden; htmlelement.hidden = true | false; value a boolean which is true if the element is hidden from view; otherwise, the value is false.
... = true; document.getelementbyid("awesome").hidden = false; }, false); this code sets up a handler for the welcome panel's "ok" button that hides the welcome panel and makes the follow-up panel—with the curious name "awesome"—visible in its place.
...visible in its place.
...shown here.

HTMLInputElement.select() - Web APIs
the htmlinputelement.select() method selects all the text in a <textarea> element or in an <input> element that includes a text field.
... the htmlinputelement.select() method selects all the text in a <textarea> element or in an <input> element that includes a text field.
...) { const input = document.getelementbyid('text-box'); input.focus(); input.select(); } result notes calling element.select() will not necessarily focus the input, so it is often used with htmlelement.focus().
...put.select(); } result notes calling element.select() will not necessarily focus the input, so it is often used with htmlelement.focus().

HTMLInputElement - Web APIs
eckbox as originally specified in html that created this object.
... browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.
...e of virtual keyboard configuration to use when editing this element or its contents.
... available via the onsearch event handler property.

HTMLElement.blur() - Web APIs
the htmlelement.blur() method removes keyboard focus from the current element.
... the htmlelement.blur() method removes keyboard focus from the current element.
... the htmlelement.blur() method removes keyboard focus from the current element.
... the htmlelement.blur() method removes keyboard focus from the current element.

HTMLElement.focus() - Web APIs
scroll (the default) means that the browser will scroll the element into view after focusing it.
...eans that the browser will scroll the element into view after focusing it.
... document.getelementbyid("mytextfield").focus(); } html <input type="text" id="mytextfield" value="text field."> <p></p> <button type="button" onclick="focusmethod()">click me to focus on the text field!</button> result focus on a button javascript focusmethod = function getfocus() { document.getelementbyid("mybutton").focus(); } html <button type="button" id="mybutton">click me!</button> <p></p> <button type="button" onclick="focusmethod()">click me to focus on the button!</button> result focus with focusoption javascript focusscrollmethod = function getfocus() { document.getelementbyid("mybutton").focus({preventscroll:false}); } focusnoscrollmethod = function getfocuswithoutscrolling() { document.getelementbyid("mybutton").focus({preve...
..."focusmethod()">click me to focus on the button!</button> result focus with focusoption javascript focusscrollmethod = function getfocus() { document.getelementbyid("mybutton").focus({preventscroll:false}); } focusnoscrollmethod = function getfocuswithoutscrolling() { document.getelementbyid("mybutton").focus({preventscroll:true}); } html <button type="button" onclick="focusscrollmethod()">click me to focus on the button!</button> <button type="button" onclick="focusnoscrollmethod()">click me to focus on the button without scrolling!</button> <div id="container" style="height: 1000px; width: 1000px;"> <button type="button" id="mybutton" style="margin-top: 500px;">click me!</button> </div> result specification specification status commen...

MediaStreamConstraints.audio - Web APIs
eature policy enabled, the samples below need the microphone feature enabled.
...der: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: true }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which uses getusermedia() to obtain an audio-only stream with no specific constraints, then attaches the resulting stream to an <audio> element once the stream i...
...re we see an event handler for a click event which uses getusermedia() to obtain an audio-only stream with no specific constraints, then attaches the resulting stream to an <audio> element once the stream is returned.
...der: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: { samplesize: 8, echocancellation: true } }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which calls getusermedia(), specifying a set of audio constraints requesting that echo cancellation be enabl...

MediaStreamConstraints.video - Web APIs
/or required values or ranges of values for the track's constrainable properties.
...der: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: true }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which uses getusermedia() to obtain a video-only stream with no specific constraints, then attaches the resulting stream to a <video> element once the stream i...
...here we see an event handler for a click event which uses getusermedia() to obtain a video-only stream with no specific constraints, then attaches the resulting stream to a <video> element once the stream is returned.
...der: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 120, framerate: 15 } }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which calls getusermedia(), specifying a set of video constraints that indicate a preferenc...

MouseEvent.altKey - Web APIs
the mouseevent.altkey read-only property is a boolean that indicates whether the alt key was pressed or not when a given mouse event occurs.
... left mouse click combined with the alt key is used to move or resize windows.
...ned with the alt key is used to move or resize windows.
...instanceofmouseevent.altkey return value a boolean, where true indicates that the key is pressed, and false indicates that the key is not pressed.

Notifications API - Web APIs
ms, across different platforms.
... supported platforms, showing a system notification generally involves two things.
...sing the notifications api.
...tion defines a notification object.

Selection.deleteFromDocument() - Web APIs
the deletefromdocument() method of the selection interface deletes the selected text from the document's dom.
... the deletefromdocument() method of the selection interface deletes the selected text from the document's dom.
...rom the document's dom.
...pon clicking the button, the window.getselection() method gets the selected text, and the deletefromdocument() method removes it.

Selection.rangeCount - Web APIs
the selection.rangecount read-only property returns the number of ranges in the selection.
... the selection.rangecount read-only property returns the number of ranges in the selection.
... rangecount is 0.
...after the user clicks on the page, rangecount is 1, even if no selection is visible.

SubtleCrypto.exportKey() - Web APIs
(".exported-key"); exportkeyoutput.textcontent = `[${exportedkeybuffer}]`; } /* generate an encrypt/decrypt secret key, then set up an event listener on the "export" button.
... "export" button.
...port" button.
...d-key"); exportkeyoutput.textcontent = json.stringify(exported, null, " "); } /* generate a sign/verify key pair, then set up an event listener on the "export" button.

A simple RTCDataChannel sample - Web APIs
function startup() { connectbutton = document.getelementbyid('connectbutton'); disconnectbutton = document.getelementbyid('disconnectbutton'); sendbutton = document.getelementbyid('sendbutton'); messageinputbox = document.getelementbyid('message'); receivebox = document.getelementbyid('receivebox'); // set event listeners for user interface widgets connectbutton.addeventlistener('click', connectpeers, false); disconnectbutton.addeventlistener('click', disconnectpeers, false); sendbutton.addeventlistener('click', sendmessage, false); } this is quite straightforward.
...terface widgets connectbutton.addeventlistener('click', connectpeers, false); disconnectbutton.addeventlistener('click', disconnectpeers, false); sendbutton.addeventlistener('click', sendmessage, false); } this is quite straightforward.
...l) { console.log("receive channel's status has changed to " + receivechannel.readystate); } } the handlereceivechannelstatuschange() method receives as an input parameter the event which occurred; this will be an rtcdatachannelevent.
...this method simply performs some basic dom injection; it creates a new <p> (paragraph) element, then creates a new text node containing the message text, which is received in the event's data property.

Controlling multiple parameters with ConstantSourceNode - Web APIs
let's look at the setup() function, which is our handler for the window's load event; it handles all the initialization tasks that require the dom to be in place.
...w.addeventlistener("load", setup, false); first, we get access to the window's audiocontext, stashing the reference in context.
..., a recording stream, or any other destination type.
...nto all of its outputs, which are, as set above, gainnode2 and gainnode3.

Using IIR filters - Web APIs
fer) { const soundsource = audiocontext.createbuffersource(); soundsource.buffer = audiobuffer; soundsource.connect(audiocontext.destination); soundsource.start(); return soundsource; } this function is called when the play button is pressed.
...oundsource.buffer = audiobuffer; soundsource.connect(audiocontext.destination); soundsource.start(); return soundsource; } this function is called when the play button is pressed.
...tlistener('click', function() { if (this.dataset.playing === 'false') { srcnode = playsourcenode(audioctx, sample); ...
... ...

WindowOrWorkerGlobalScope.setInterval() - Web APIs
r oelem = document.getelementbyid('my_box'); oelem.style.color = oelem.style.color == 'red' ?
...px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ } </style> </head> <body> <p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">copyleft 2012 by <a href="https://developer.mozilla.org/" target="_blank">mozilla developer network</a></p> <p id="controls" style="text-align: center;">[&nbsp;<span class="intlink" onclick="otwexample1.play();">play</span> | <span class="intlink" onclick="otwexample1.pause();">pause</span> | <span class="intlink" onclick="otwexample1.terminate();">terminate</span>&nbsp;]</p> <div id="info"> vivamus blandit massa ut metus mattis in fringilla lectus imperdiet.
...eased/decreased (depending on the actual direction of the process).
...l page: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>minidaemin example - mdn</title> <script type="text/javascript" src="minidaemon.js"></script> <style type="text/css"> #sample_div { visibility: hidden; } </style> </head> <body> <p> <input type="button" onclick="fadeinout.start(false /* optional */);" value="fade in" /> <input type="button" onclick="fadeinout.start(true);" value="fade out"> <input type="button" onclick="fadeinout.pause();" value="pause" /> </p> <div id="sample_div">some text here</div> <script type="text/javascript"> function opacity (nindex, nlength, bbackwards) { this.style.opacity = nindex / nlength; if (bbackwards ?

XMLHttpRequest: abort event - Web APIs
the abort event is fired when a request has been aborted, for example because the program called xmlhttprequest.abort().
...le because the program called xmlhttprequest.abort().
...lable no interface progressevent event handler property onabort examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrb...
....addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comm...

XMLHttpRequest: error event - Web APIs
the error event is fired when the request encountered an error.
...event is fired when the request encountered an error.
...lable no interface progressevent event handler property onerror examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrb...
....addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comm...

XMLHttpRequest: load event - Web APIs
the load event is fired when an xmlhttprequest transaction completes successfully.
... an xmlhttprequest transaction completes successfully.
...elable no interface progressevent event handler property onload examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrb...
....addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comm...

XMLHttpRequest: loadend event - Web APIs
the loadend event is fired when a request has completed, whether successfully (after load) or unsuccessfully (after abort or error).
...ter load) or unsuccessfully (after abort or error).
...ble no interface progressevent event handler property onloadend examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrb...
....addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comm...

XMLHttpRequest: loadstart event - Web APIs
the loadstart event is fired when a request has started to load data.
...is fired when a request has started to load data.
...e no interface progressevent event handler property onloadstart examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrb...
....addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comm...

XMLHttpRequest: progress event - Web APIs
the progress event is fired periodically when a request receives more data.
...ed periodically when a request receives more data.
...le no interface progressevent event handler property onprogress examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrb...
....addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comm...

XRSystem: requestSession() - Web APIs
ode the following example shows how to use both issessionsupported() and requestsession().
... enabling controls for entering xr.
...ls for entering xr.
....xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { immersivebutton.addeventlistener('click', onbuttonclicked); immersivebutton.innerhtml = 'enter xr'; immersivebutton.disabled = false; } else { console.log("webxr doesn't support immersive-vr mode!"); } }); } else { console.log("webxr is not available!"); } function onbuttonclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then((session) => { xrsession = session; // onsessionstarted() not shown for reasons of brevity and clarity.

ARIA: checkbox role - Accessibility
the checkbox is checked false the checkbox is not checked mixed the checkbox is partially checked, or indeterminate tabindex="0" used to make it focusable so the assistive technology user can tab to it and start reading right away.
...ked false the checkbox is not checked mixed the checkbox is partially checked, or indeterminate tabindex="0" used to make it focusable so the assistive technology user can tab to it and start reading right away.
...ey to change the state of the checkbox by changing the value of the aria-checked attribute and the appearance of the checkbox so it appears checked or unchecked to the sighted user examples the following example creates a simple checkbox element using css and javascript to handle the checked or unchecked status of the element.
...ppears checked or unchecked to the sighted user examples the following example creates a simple checkbox element using css and javascript to handle the checked or unchecked status of the element.

Using CSS animations - CSS: Cascading Style Sheets
e special aliases: from and to.
...he left margin is set to 0% and the width of the element is set to 100%.
...th: 100%; } } <p>the caterpillar and alice looked at each other for some time in silence: at last the caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p> this tells the browser that 75% of the way through the animation sequence, the header should have its left margin at 25% and the width should be 150%.
...information about the received events: <h1 id="watchme">watch me move</h1> <p> this example shows how to use css animations to make <code>h1</code> elements move across the page.

Getting Started - Developer guides
which contains the text "i'm a test." then we'll alert() the contents of the response.
...echange = alertcontents; httprequest.open('get', 'test.html'); httprequest.send(); } function alertcontents() { if (httprequest.readystate === xmlhttprequest.done) { if (httprequest.status === 200) { alert(httprequest.responsetext); } else { alert('there was a problem with the request.'); } } } })(); </script> in this example: the user clicks the "make a request" button; the event handler calls the makerequest() function; the request is made and then (onreadystatechange) the execution is passed to alertcontents(); alertcontents() checks if the response was received and ok, then alert()s the contents of the test.html file.
...p request we used the request object's responsetext property , which contained the contents of the test.html file.
...er their name: <label>your name: <input type="text" id="ajaxtextbox" /> </label> <span id="ajaxbutton" style="cursor: pointer; text-decoration: underline"> make a request </span> we'll also add a line to our event handler to get the user's data from the text box and send it to the makerequest() function along with the url of our server-side script: document.getelementbyid("ajaxbutton").onclick = function() { var username = document.getelementbyid("ajaxtextbox").value; makerequest('test.php',username); }; we need to modify makerequest() to accept the user data and pass it along to the server.

Printing - Developer guides
n finished if you want to be able to automatically close a popup window (for example, the printer-friendly version of a document) after the user prints its contents, you can use code like this: <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>javascript window close example </title> <script type="text/javascript"> function popuponclick() { my_window = window.open('', 'mywindow', 'status=1,width=350,height=150'); my_window.document.write('<html><head><title>print me</title></head>'); my_window.document.write('<body onafterprint="self.close()">'); my_window.document.write('<p>when you print this window, it will close afterward.</p>'); my_window.document.write('</body></html>'); } </script> </head...
...,width=350,height=150'); my_window.document.write('<html><head><title>print me</title></head>'); my_window.document.write('<body onafterprint="self.close()">'); my_window.document.write('<p>when you print this window, it will close afterward.</p>'); my_window.document.write('</body></html>'); } </script> </head> <body> <p>to try out the <code>afterprint</code> event, click the link below to open the window to print.
..._window.document.write('<p>when you print this window, it will close afterward.</p>'); my_window.document.write('</body></html>'); } </script> </head> <body> <p>to try out the <code>afterprint</code> event, click the link below to open the window to print.
...rl) { var ohiddframe = document.createelement("iframe"); ohiddframe.onload = setprint; ohiddframe.style.position = "fixed"; ohiddframe.style.right = "0"; ohiddframe.style.bottom = "0"; ohiddframe.style.width = "0"; ohiddframe.style.height = "0"; ohiddframe.style.border = "0"; ohiddframe.src = surl; document.body.appendchild(ohiddframe); } </script> </head> <body> <p><span onclick="printpage('externalpage.html');" style="cursor:pointer;text-decoration:underline;color:#0000ff;">print external page!</span></p> </body> </html> note: older versions of internet explorer cannot print the contents of a hidden <iframe>.

User input and controls - Developer guides
ue); where handlekeydown and handlekeyup are the functions implementing the controls about the keydown and keyup events.
...e handlekeydown and handlekeyup are the functions implementing the controls about the keydown and keyup events.
...msrequestfullscreen) { elem.msrequestfullscreen(); } else if (elem.mozrequestfullscreen) { elem.mozrequestfullscreen(); } else if (elem.webkitrequestfullscreen) { elem.webkitrequestfullscreen(); } note: to find more out about adding fullscreen functionality your application, read our documentation about using fullscreen mode.
...time this example tracks multiple touch points at a time, allowing the user to draw in a <canvas> with more than one finger at a time.

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
: next, we enter our color's hex code (d79c7a) into the "base rgb" box at the bottom-left corner of the tool: we now see a monochromatic palette based on the color we picked from the mars photo.
...e picked from the mars photo.
...he palette type (currently "monochromatic").
...he bottom-right corner tells us that this color is #508d7c.

<a>: The Anchor element - HTML: Hypertext Markup Language
tpink'; function draw(x, y) { if (isdrawing) { c.beginpath(); c.arc(x, y, 10, 0, math.pi*2); c.closepath(); c.fill(); } } canvas.addeventlistener('mousemove', event => draw(event.offsetx, event.offsety) ); canvas.addeventlistener('mousedown', () => isdrawing = true); canvas.addeventlistener('mouseup', () => isdrawing = false); document.queryselector('a').addeventlistener('click', event => event.target.href = canvas.todataurl() ); result security and privacy <a> elements can have consequences for users’ security and privacy.
...ation attacks (vulnerability description), although note that, in newer browser versions (e.g.
..."/products">here</a>.
...about our products</a>.

<button>: The Button element - HTML: Hypertext Markup Language
the html <button> element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.
...ound the button is placed on.
....
...66px and bold or larger, or 24px or larger.) webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 clicking and focus whether clicking on a <button> causes it to (by default) become focused varies by browser and os.

<input type="checkbox"> - HTML: Hypertext Markup Language
<div> <input type="checkbox" id="coding" name="interest" value="coding" checked> <label for="coding">coding</label> </div> <div> <input type="checkbox" id="music" name="interest" value="music"> <label for="music">music</label> </div> </fieldset> providing a bigger hit area for your checkboxes in the above examples, you may have noticed that you can toggle a checkbox by clicking on its associated <label> element as well as on the checkbox itself.
...type="checkbox" id="music" name="interest" value="music"> <label for="music">music</label> </div> </fieldset> providing a bigger hit area for your checkboxes in the above examples, you may have noticed that you can toggle a checkbox by clicking on its associated <label> element as well as on the checkbox itself.
... checkbox is set to indeterminate.
...inate state is used to state that collecting the ingredients has started, but the recipe is not yet complete.

<input type="reset"> - HTML: Hypertext Markup Language
<input> elements of type "reset" are rendered as buttons, with a default click event handler that resets all of the inputs in the form to their initial values.
...he form to their initial values.
...e for this interactive example is stored in a github repository.
...ractive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

HTTP Index - HTTP
nd enforcing a same-origin policy.
...s (onclick) and xslt stylesheets which can trigger script execution.
... event handlers like onclick, but not urls loaded directly into <script> elements.
...protocol used between the client and the load balancer, the x-forwarded-proto request header can be used.

Closures - JavaScript
bject's properties) with one or more methods.
...() { document.body.style.fontsize = size + 'px'; }; } var size12 = makesizer(12); var size14 = makesizer(14); var size16 = makesizer(16); size12, size14, and size16 are now functions that resize the body text to 12, 14, and 16 pixels, respectively.
... }; } var size12 = makesizer(12); var size14 = makesizer(14); var size16 = makesizer(16); size12, size14, and size16 are now functions that resize the body text to 12, 14, and 16 pixels, respectively.
...sizer(14); var size16 = makesizer(16); size12, size14, and size16 are now functions that resize the body text to 12, 14, and 16 pixels, respectively.

Web security
shared with requesting code from the given origin.
...from the given origin.
...nt-type-options the x-content-type-options response http header is a marker used by the server to indicate that the mime types advertised in the content-type headers should not be changed and be followed.
...liberately configured.

port - Archive of obsolete content
a particular message, use port.removelistener().
... the button sends the content script a message called "get-first-para" when it is clicked: // main.js pageworker = require("sdk/page-worker").page({ contentscriptfile: require("sdk/self").data.url("listener.js"), contenturl: "http://en.wikipedia.org/wiki/chalk" }); require("sdk/ui/button/action").actionbutton({ id: "get-first-para", label: "get-first-para", icon: "./icon-16.png", onclick: function() { console.log("sending 'get-first-para'"); pageworker.port.emit("get-first-para"); } }); the content script listens for "get-first-para".
...e document and then calls removelistener() to stop listening.

page-mod - Archive of obsolete content
not work properly in many real-world cases.
...mple, we might want to run a script in the context of the currently active tab when the user clicks a button: to block certain content, to change the font style, or to display the document's dom structure.
...the attach method of the tab object, you can attach a set of content scripts to a particular tab.

simple-storage - Archive of obsolete content
our code, or you may zero them each time the construction code runs.
...array is only constructed if it does not already exist: if (!ss.storage.pages) ss.storage.pages = []; deleting data you can delete properties using the delete operator.
...at adds three buttons to write, read, and delete a value: var ss = require("sdk/simple-storage"); require("sdk/ui/button/action").actionbutton({ id: "write", label: "write", icon: "./write.png", onclick: function() { ss.storage.value = 1; console.log("setting value"); } }); require("sdk/ui/button/action").actionbutton({ id: "read", label: "read", icon: "./read.png", onclick: function() { console.log(ss.storage.value); } }); require("sdk/ui/button/action").actionbutton({ id: "delete", label: "delete", icon: "./delete.png", onclick: function() { delete ss.storage.value; console.log("deleting value"); } }); if you run it, you'll see that after clicking "read" after clicking "delete" gives you the expected output: info: undefined note that t...

Creating Reusable Modules - Archive of obsolete content
e file const pr_uint32_max = 0xffffffff; ch.updatefromstream(istream, pr_uint32_max); // pass false here to get binary data back var hash = ch.finish(false); // convert the binary hash data to a hex string.
...urnok || rv == nsifilepicker.returnreplace) { var file = fp.file; // get the path as string.
...h, (c, i) => tohexstring(hash.charcodeat(i))).join(""); return s; } exports.hashfile = md5file; index.js finally, update index.js to import these two new modules and use them: var filepicker = require("./filepicker.js"); var md5 = require("./md5.js"); require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png" }, onclick: function() { console.log(md5.hashfile(filepicker.promptforfile())); } }); distributing modules with jpm, we use npm as the package manager for sdk modules that don't ship inside firefox.

Miscellaneous - Archive of obsolete content
own in the following table mousewheel.withxxxkey.action result 0 scroll by lines.
... mousewheel.withxxxkey.action result 0 scroll by lines.
...es.

Progress Listeners - Archive of obsolete content
progress listeners progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events.
...wser only notifies you of the events for which you provide a callback.
...of which is when the tab is changed.

Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
chanism in quicknote1 for our debugger.
...t: function() { }, push: function(val) { }, plus: function() { }, pop: function() { } } implement the addition operation create test case begin by creating the test case.
... prompt and navigate to the directory containing gonzui.

Setting up an extension development environment - Archive of obsolete content
m in your user home directory, and name folders for easy navigation to firenightly and firedevedition or similar.
... install any additional extensions, and finally close this instance of firefox.
...erence settings in firefox or seamonkey, type about:config in the location bar.

Adding preferences to an extension - Archive of obsolete content
s.stockwatcher2.symbol" type="string" title="stock to watch" /> </vbox> adding the context menu adding the contextual menu is easy; all the work that needs doing is done in the stockwatcher2.xul file.
...he context menu adding the contextual menu is easy; all the work that needs doing is done in the stockwatcher2.xul file.
... done in the stockwatcher2.xul file.

Creating a dynamic status bar extension - Archive of obsolete content
version="1.0" encoding="utf-8"?> <!doctype overlay> <overlay id="stockwatcher-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://stockwatcher/content/stockwatcher.js"/> <!-- firefox --> <statusbar id="status-bar"> <statusbarpanel id="stockwatcher" label="loading..." tooltiptext="current value" onclick="stockwatcher.refreshinformation()" /> </statusbar> </overlay> also, notice that the definition of the status bar panel now includes a new property, onclick, which references the javascript function that will be executed whenever the user clicks on the status bar panel.
...loading..." tooltiptext="current value" onclick="stockwatcher.refreshinformation()" /> </statusbar> </overlay> also, notice that the definition of the status bar panel now includes a new property, onclick, which references the javascript function that will be executed whenever the user clicks on the status bar panel.
... as soon as possible.

Source Navigator - Archive of obsolete content
executing: $ which snavigator /usr/bin/snavigator importing the source execute the following: snavigator.
... the "more" button.) in my case, i inputted the followings: project file: <tt>~/snav-mozilla</tt> add directory (where your source files reside in -- i understand that the label here is not so self-explanatory...): <tt>~/moz1.9/mozilla</tt> (because i saved my source at ~/moz1.9/mozilla.) remember to ensure that "include subdirectories" and "build cross-reference database" are checked.
... click "ok".

jspage - Archive of obsolete content
ative({name:"event",initialize:function(a,f){f=f||window;var k=f.document;a=a||f.event;if(a.$extended){return a;}this.$extended=true;var j=a.type; var g=a.target||a.srcelement;while(g&&g.nodetype==3){g=g.parentnode;}if(j.test(/key/)){var b=a.which||a.keycode;var m=event.keys.keyof(b);if(j=="keydown"){var d=b-111; if(d>0&&d<13){m="f"+d;}}m=m||string.fromcharcode(b).tolowercase();}else{if(j.match(/(click|mouse|menu)/i)){k=(!k.compatmode||k.compatmode=="css1compat")?k.html:k.body; var i={x:a.pagex||a.clientx+k.scrollleft,y:a.pagey||a.clienty+k.scrolltop};var c={x:(a.pagex)?a.pagex-f.pagexoffset:a.clientx,y:(a.pagey)?a.pagey-f.pageyoffset:a.clienty}; if(j.match(/dommousescroll|mousewheel/)){var h=(a.wheeldelta)?a.wheeldelta/120:-(a.detail||0)/3;}var e=(a.which==3)||(a.button==2);var l=null;if(j.mat...
...a.wheeldelta/120:-(a.detail||0)/3;}var e=(a.which==3)||(a.button==2);var l=null;if(j.match(/over|out/)){switch(j){case"mouseover":l=a.relatedtarget||a.fromelement; break;case"mouseout":l=a.relatedtarget||a.toelement;}if(!(function(){while(l&&l.nodetype==3){l=l.parentnode;}return true;}).create({attempt:browser.engine.gecko})()){l=false; }}}}return $extend(this,{event:a,type:j,page:i,client:c,rightclick:e,wheel:h,relatedtarget:l,target:g,code:b,key:m,shift:a.shiftkey,control:a.ctrlkey,alt:a.altkey,meta:a.metakey}); }});event.keys=new hash({enter:13,up:38,down:40,left:37,right:39,esc:27,space:32,backspace:8,tab:9,"delete":46});event.implement({stop:function(){return this.stoppropagation().preventdefault(); },stoppropagation:function(){if(this.event.stoppropagation){this.event.stoppropagation();}e...
...{var c=this.retrieve("events");if(!c||!c[d]){return this;}c[d].keys.each(function(e){e.create({bind:this,delay:a,"arguments":b})(); },this);return this;},cloneevents:function(d,a){d=document.id(d);var c=d.retrieve("events");if(!c){return this;}if(!a){for(var b in c){this.cloneevents(d,b); }}else{if(c[a]){c[a].keys.each(function(e){this.addevent(a,e);},this);}}return this;}});element.nativeevents={click:2,dblclick:2,mouseup:2,mousedown:2,contextmenu:2,mousewheel:2,dommousescroll:2,mouseover:2,mouseout:2,mousemove:2,selectstart:2,selectend:2,keydown:2,keypress:2,keyup:2,focus:2,blur:2,change:2,reset:2,select:2,submit:2,load:1,unload:1,beforeunload:2,resize:1,move:1,domcontentloaded:1,readystatechange:1,error:1,abort:1,scroll:1}; (function(){var a=function(b){var c=b.relatedtarget;if(c==undefined)...

PyDOM - Archive of obsolete content
he global object (i.e., the window), instead of to a module's __dict__ as you expect in the python world.
...rint foo"/> should be able to reference 'foo' via globals as shown.
... able to reference 'foo' via globals as shown.

allowevents - Archive of obsolete content
e allowevents type: boolean if true, events are passed to children of the element.
... also retargeted to the element itself.
...s may be set to true on a descendant instead.

collapse - Archive of obsolete content
« xul reference home collapse type: one of the values below determines which side of the splitter is collapsed when its grippy is clicked.
... « xul reference home collapse type: one of the values below determines which side of the splitter is collapsed when its grippy is clicked.
...hen its grippy is clicked.

context - Archive of obsolete content
« xul reference home context type: id should be set to the value of the id of the popup element that should appear when the user context-clicks on the element.
... « xul reference home context type: id should be set to the value of the id of the popup element that should appear when the user context-clicks on the element.
... « xul reference home context type: id should be set to the value of the id of the popup element that should appear when the user context-clicks on the element.

label - Archive of obsolete content
ring the label that will appear on the element.
...his attribute is copied to the menulist.value property upon user selection of the menuitem.
...value="whaw" id="the-big-label" command="the-big-button"/> <button id="the-big-button" label="click me" oncommand="alert(document.getelementbyid('the-big-label').value)"/> <label id="mylabel" value="my label"/> <button label="click me" oncommand="document.getelementbyid('mylabel').setattribute('value','value changed');" /> <checkbox label="my checkbox" id="mycheckbox"/> <button label="another click" oncommand="document.getelementbyid('mycheckbox').setattribute('label','still not checked');"/> <button label="show label of checkbox" oncommand="alert( document.getelementbyid('mycheckbox').getattribute('label') )"/> ...

Sorting Results - Archive of obsolete content
gnore whether results are containers and just sort by a value, alphabetically or numerically depending on the type of data.
...be sorted by the ?name variable and the second column by the ?date variable.
...value should be either 'ascending', 'descending' or 'natural'.

Adding Labels and Images - Archive of obsolete content
ample: example 2 : <label>this is some longer text that will wrap onto several lines.</label> as with html, line breaks and extra whitespace are collapsed into a single space.
... control attribute to set which control the label is associated with.
...ociated label, that control will be focused.

Focus and Selection - Archive of obsolete content
iousnext » the section will describe how to handle the focus and selection of elements.
...and dispatcher and sets a label to its tag name.
...box' as we might expect.

Input Controls - Archive of obsolete content
dd these lines before the buttons we created in the last section.
...use most of the same attributes on checkboxes and radio buttons as with buttons.
...will appear beside the check box.

List Controls - Archive of obsolete content
e that the column stretches as the window does.
...a menulist element which can be used for this purpose.
...s the individual choices.

More Button Features - Archive of obsolete content
nside the button to cause a menu to drop down when the button is pressed, much like the menulist.
...ttached to each item to perform a task.
...set the type attribute to the value menu-button.

Urlbar-icons - Archive of obsolete content
[ examples | attributes | properties | methods | related ] the location of ui elements like the bookmarks, feed and go buttons.
...tion of ui elements like the bookmarks, feed and go buttons.
...dress bar and the navigation bar.) example the default contents of browser.xul: <hbox id="urlbar-icons"> <button be="" chromedir="ltr" class="urlbar-icon" click="" for="" id="safebrowsing-urlbar-icon" img="" level="safe" might="" onclick="godocommand('safebrowsing-show-warning');" page="" style="-moz-user-focus:" tooltiptext="this" type="menu"> <img class="urlbar-icon" id="star-button" onclick="placesstarbutton.onclick(event);" /> <img address="" chromedir="ltr" class="urlbar-icon" id="go-button" in="" location="" onclick="handleurlbarcommand(event);" p="" the="" to="" tooltiptext="go" /> </button> </hbox> ...

Using Remote XUL - Archive of obsolete content
web site uses an html navigation bar on the left-hand side of its pages to provide site navigation.
...g/" /> </menupopup> </menu> <button label="faq" value="https://www.mozilla.org/faq.html" /> <button label="search" value="https://www.mozilla.org/search.html" /> </menubar> <iframe src="https://www.mozilla.org/" flex="1" /> </window> the menupopup element is a container for menu items.
...first we write an event handler function that receives an event, extracts a url from the value attribute of the element where the event occurred (a.k.a.

button - Archive of obsolete content
.
... created.
...s and sets the value of the open attribute.

tabbrowser - Archive of obsolete content
rea in the tabbrowser.
...llable directly on the element itself, such as goback and goforward.
...oad a url into the document, with the specified load flags, the given referrer, character set, and post data.

tabpanels - Archive of obsolete content
mples | attributes | properties | methods | related ] a container to hold the set of pages in a tabbox.
...container to hold the set of pages in a tabbox.
...o this property, all items will be deselected.

tabs - Archive of obsolete content
o effect.
... out entirely.
...abindex type: integer gets and sets the value of the tabindex attribute.

titlebar - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] boxes created with the titlebar element behave just like a normal window titlebar: when the element is clicked and dragged, the window moves with it.
... when the element is clicked and dragged, the window moves with it.
... , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...

treecol - Archive of obsolete content
arger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size.
...n the cell.
... , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...

2006-12-01 - Archive of obsolete content
rnal website use universalbrowserwrite on a local intranet.
... microsummary generator questions and discussion surrounding microsummaries in ff 2.0.
...and discussion surrounding microsummaries in ff 2.0.

Building a Theme - Archive of obsolete content
" menu), and go to "file->inspect chrome document".
...one should remember to include a closing slash and remove any trailing spaces.
...changes to your css files, close and restart firefox, and see the updates.

Common Firefox theme issues and solutions - Archive of obsolete content
t(0, 48px, 16px, 32px); } #page-proxy-favicon[pageproxystate="invalid"] { opacity: 0.5; } for more information about identity boxes please see the identity box section of the amo editors theme review guidelines no visual clue for disabled url bars there needs to be a visual clue when url bar is disabled.
...he "click me" link.
...ult theme into the mozapps/extensions/ folder of your theme and add the following style rule to the css file extensions.css: .addon[active="false"] .icon { filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale"); opacity:0.3; } about:memory about:memory nodes do not collapse the styling of about:memory is a little messed up in that nodes do not collapse as they should when clicked on.

XForms Submit Element - Archive of obsolete content
it element doesn't interact with the data in the bound node.
...ons the xforms submit element can be represented by the following widgets for the specified appearance attribute values: button - default representation (xhtml/xul) link/clickable text - used when appearance = 'minimal' (xhtml only) button displaying a button is the default presentation (xhtml/xul).
...mal' (xhtml only) button displaying a button is the default presentation (xhtml/xul).

Audio for Web games - Game development
ormation about it here from the google developers site.
...wn.mp3" mp3 file consists of a number being spoken every 2 seconds, the idea being that we play back that number when the corresponding button is pressed.
...nst anchor = el.queryselector('a'); const loadtext = el.queryselector('p'); const playbutton = el.queryselector('button'); // load file loadfile(anchor.href).then((track) => { // set loading to false el.dataset.loading = 'false'; // hide loading text loadtext.style.display = 'none'; // show button playbutton.style.display = 'inline-block'; // allow play on click playbutton.addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } playtrack(track); playbutton.dataset.playing = true; }) }) }) note: you can see this demo in action here and view the source code here.

Mobile touch controls - Game development
this.button.events.oninputover.add(itemtouched, this); function itemtouched(button, pointer) { // do something } that way you'll be able to attach an event to any object in the game, like the player's ship, and react to the actions performed by the user.
...r.
... this out in the background for you.

Implementing game control mechanisms - Game development
actual gameplay.
...ne is needed for preloading required assets, create() is executed once the state had started, and update() is executed on every frame.
...s, create() is executed once the state had started, and update() is executed on every frame.

Extra lives - Game development
labels defining the texts look like something we already did in the score lesson.
...use this variable when stlying our text labels — update your code so that the multiple instances of the text styling are replaced with the variable: scoretext = game.add.text(5, 5, 'points: 0', textstyle); livestext = game.add.text(game.world.width-5, 5, 'lives: '+lives, textstyle); livestext.anchor.set(1,0); lifelosttext = game.add.text(game.world.width*0.5, game.world.height*0.5, 'life lost, click to continue', textstyle); lifelosttext.anchor.set(0.5); lifelosttext.visible = false; this way changing the font in one variable will apply the changes to every place it is used.
...t, game over!'); location.reload(); } } instead of instantly printing out the alert when you lose a life, we first subtract one life from the current number and check if it's a non-zero value.

Prefetch - MDN Web Docs Glossary: Definitions of Web-related terms
ll likely be requested, enabling the content to load instantly if and when the user requests it.
...al websites that may be clicked on, like search engine results, dns prefetching resolves domain names in advance thereby speeding up load times by reducing the time associated with domain lookup at request time.
...hing resolves domain names in advance thereby speeding up load times by reducing the time associated with domain lookup at request time.

Advanced form styling - Learn web development
fore { /* use `visibility` instead of `display` to avoid recalculating layout */ visibility: visible; } input[type="checkbox"]:disabled { border-color: black; background: #ddd; color: gray; } you'll find more out about such pseudo-classes and more in the next article; the above ones do the following: :checked — the checkbox (or radio button) is in a checked state — the user has clicked/activated it.
...> we then use generated content to generate a little down arrow, and put it in the right place using positioning: .select-wrapper { position: relative; } .select-wrapper::after { content: "▼"; font-size: 1rem; top: 6px; right: 10px; position: absolute; } the second, slightly more major issue is that you don't have control over the box that appears containing the options when you click on the <select> box to open it.
... custom list of file names and sizes in any way you want; we created it after all.

Dealing with files - Learn web development
e a folder called images, inside your test-site folder.
... a folder called scripts, inside your test-site folder.
... same directory as index.html.

What’s in the head? Metadata in HTML - Learn web development
e your page appear higher in relevant searches performed in search engines (such activities are termed search engine optimization, or seo.) active learning: the description's use in search engines the description is also used on search engine result pages.
...n the html file in both your browser, and your text editor.
....

Test your skills: Events - Learn web development
this yet in the course, but you'll have seen some examples that make use of it, and we'd like you to do some research into what dom apis you need to successfully answer the questions.
...e seen some examples that make use of it, and we'd like you to do some research into what dom apis you need to successfully answer the questions.
...ordinate of the circle.

Manipulating documents - Learn web development
ral parent interface htmlelement, and node — which represents all nodes in a dom).
...ping-list.html starting file and make a copy of it somewhere.
....

Useful string methods - Learn web development
: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solutio...
...: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solutio...
... 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solutio...

Ember Interactivity: Footer functionality, conditional rendering - Learn web development
ate.
... <strong>0</strong> todos left with this, which populates the incomplete number with the length of the incomplete array: <strong>{{this.todos.incomplete.length}}</strong> todos left next, replace this: <button type="button" class="clear-completed"> with this: <button type="button" class="clear-completed" {{on 'click' this.todos.clearcompleted}}> so now when the button is clicked, the clearcompleted() action we added earlier is run.
...th the length of the incomplete array: <strong>{{this.todos.incomplete.length}}</strong> todos left next, replace this: <button type="button" class="clear-completed"> with this: <button type="button" class="clear-completed" {{on 'click' this.todos.clearcompleted}}> so now when the button is clicked, the clearcompleted() action we added earlier is run.

Accessibility in React - Learn web development
s we set out to implement.
...f ref to each element, and set their values to the appropriately named ref objects.
... react reads the current value of the editfieldref and moves browser focus to it.

Adding a new todo form: Vue events, methods, and models - Learn web development
late>, like so: <template> <div id="app"> <h1>my to-do list</h1> <to-do-form></to-do-form> <ul> <li v-for="item in todoitems" :key="item.id"> <to-do-item :label="item.label" :done="item.done" :id="item.id"></to-do-item> </li> </ul> </div> </template> now when you view your running site, you should see the new form displayed.
...el by logging the value of the data submitted in our onsubmit() method.
...ins the old value.

Strategies for carrying out testing - Learn web development
te than global browser stats like those mentioned above.
...d disk now, vdi (virtual disk image), and dynamically allocated).
...w some steps and report the results they get.

Deploying our app - Learn web development
oncise, and descriptive, so they clearly describe what the change does.
... step.
...l chain: a test to ensure our code works.

API-provided widgets
string indicating the type of widget.
... non-custom widgets; a function that will be invoked after the widget has a dom node destroyed, passing the document from which it was removed.
...estroyed, passing the document from which it was removed.

Localizing without a specialized tool
ou have set up the proper build environment on your local machine?
...d localize.
...at the change is visible in the ui.

QA phase
omething (oops!).
...ut needing a language pack.
... steps below to test your localization: install aurora in your preferred language.

Activity Monitor, Battery Status Menu and top
upport documentation specifically recommends it for troubleshooting battery life problems.) unfortunately "energy impact" is not a good measure for either users or software developers and it should be avoided.
...res, among other things, cpu usage and idle wakeups for each running process.
... energy”.

Gecko Profiler FAQ
ly also for rayon threads (used in stylo).
...tform thread spawning functions but nobody has looked at it yet.
...ge that you’re interested in in its manifest.

Profiling with Instruments
for memory profiling and for statistical profiling.
...instruments user guide instruments user reference instruments help articles instruments help performance overview basic usage select "time profiler" from the "choose a profiling template for:" dialog.
...ance overview basic usage select "time profiler" from the "choose a profiling template for:" dialog.

Profile Manager
efox will be launched when that profile is selected.
...ly, you can manually add firefox versions by clicking the "manage firefox versions..." button: each firefox version in the list has the following properties: path, version, and default.
...backup, and choose "backup to->archive" from the toolbar's backup menu.

Index
m provides a complete management solution for creating, deploying, and managing certificates, including cas that issue object-signing certificates.
... token: ----------------------------------------------- using netscape signing tool and a smart card to sign files the signtool command normally takes an argument of the -k option to specify a signing certificate.
...------------------- using netscape signing tool and a smart card to sign files the signtool command normally takes an argument of the -k option to specify a signing certificate.

PKCS11 Implement
se these two functions but uses c_encrypt and c_decrypt instead if c_wrapkey and c_unwrapkey aren't implemented.
...en't implemented.
...ny convenient location on the user's hard disk, but you must tell the user to type the module name and location in the cryptographic modules portion of the communicator security info window.

NSS tools : signtool
m provides a complete management solution for creating, deploying, and managing certificates, including cas that issue object-signing certificates.
... token: ----------------------------------------------- using netscape signing tool and a smart card to sign files the signtool command normally takes an argument of the -k option to specify a signing certificate.
...------------------- using netscape signing tool and a smart card to sign files the signtool command normally takes an argument of the -k option to specify a signing certificate.

Signing Mozilla apps for Mac OS X
e easiest way to get a signing certificate is to use apple's keychain feature to create one.
...o use apple's keychain feature to create one.
...ing identity".

Gecko states
f this second state is defined, then clients can communicate the information about the object to users.
...oth state_invisible and state_offscreen set.
...focusable the object can be focused.

Components.utils.cloneInto
oned object.
...s.exportfunction: // add-on script var addonscriptobject = { greetme: function() { alert("hello from add-on"); } }; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow, {clonefunctions: true}); // page script var test = document.getelementbyid("test"); test.addeventlistener("click", function() { window.addonscriptobject.greetme(); }, false); cloning objects that contain dom elements by default, if the object you clone contains objects that are reflected from c++, such as dom elements, the cloning operation will fail with an error.
...clone is allowed to contain these objects: // add-on script var addonscriptobject = { body: contentwindow.document.body }; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow, {wrapreflectors: true}); // page script var test = document.getelementbyid("test"); test.addeventlistener("click", function() { console.log(window.addonscriptobject.body.innerhtml); }, false); access to these objects in the target scope is subject to the normal security checks.

Components.utils.exportFunction
ted function will affect the original object that was passed in: // privileged scope: for example, a content script function changemyname(user) { user.name = "bill"; } exportfunction(changemyname, contentwindow, { defineas: "changemyname" }); // less-privileged scope: for example, a page script var user = {name: "jim"}; var test = document.getelementbyid("test"); test.addeventlistener("click", function() { console.log(user.name); // "jim" window.changemyname(user); console.log(user.name); // "bill" }, false); note that this is subject to the normal rules of xrays: for example, an expando property added to a dom node will not be visible in the original object.
...ontent script function loguser(user) { // console.log(user.getuser()); // error console.log(user.wrappedjsobject.getuser()); // "bill" } exportfunction(loguser, contentwindow, { defineas: "loguser" }); // less-privileged scope: for example, a page script var user = {getuser: function() {return "bill";}} var test = document.getelementbyid("test"); test.addeventlistener("click", function() { window.loguser(user); }, false); passing functions as arguments if functions are given as arguments, these are also passed as xrays.
...rks, making the allowcallbacks option redundant: // privileged scope: for example, a content script function loguser(getuser) { console.log(getuser()); // "bill" } exportfunction(loguser, unsafewindow, { defineas: "loguser" }); // less-privileged scope: for example, a page script function getuser() { return "bill"; } var test = document.getelementbyid("test"); test.addeventlistener("click", function() { window.loguser(getuser); }, false); cross-origin checking when the exported function is called each argument, including this, is checked to make sure that the caller subsumes that argument.

nsIAccessibleStates
defined, then clients can communicate the information about the object to users.
... and state_offscreen set.
...ically announces information.

nsITreeView
behavior where drops are only allowed on items, such as the mailnews folder pane, always return false from candropbeforeafter().
...he index of the item.
...lue to change the cell to.

Index
in related bug reports.
... 56 thunderbird configuration files config editor, configuration files many of the tips and tricks mentioned on this site can be applied by using the built-in config editor.
... 70 thunderbird extensions add-ons, extensions, thunderbird categori 71 adding items to the folder pane this tutorial examines how to add items to an existing folder pane view.

Adding items to the Folder Pane
this tutorial examines how to add items to an existing folder pane view.
... (attribute) the level in the tree to display the item at open (rw, attribute) whether or not this container is open children (attribute) an array of child items also conforming to this spec getproperties (function) a call from getrowproperties or getcellproperties for this item will be passed into this function command (function) this function will be called when the item is double-clicked for our example extension, two different types of folder-tree-items will be defined.
... it all together all that is left at this point is to actually add these newly defined folder-tree-items to the folder pane's _rowmap at the appropriate time.

Plug-in Basics - Plugins
keyboard and mouse events obtain data from the network using urls post data to urls add hyperlinks or hotspots that link to new urls draw into sections on an html page communicate with javascript/dom from native code you can see which plug-ins are installed on your system and have been properly associated with the browser by consulting the installed plug-ins page.
...["application/x-shockwave-flash"]; if (mimetype) { // yes, so can we display with a plug-in?
...nstall a plug-in, because the default plug-in is only automatically invoked when you use the embed element.

Debugging service workers - Firefox Developer Tools
al for creating offline apps, it can be annoying to test the cache.
...rite code to empty the cache, and then fill it again.
...s’ storage tab has a cache storage section that lists all the different caches you have stored under each different origin.

Browser Toolbox - Firefox Developer Tools
remote debugging".
... content windows as well as any iframes they contain.
...ables you to inspect documents in individual chrome windows and popups, as well as in content tabs.

Examine, modify, and watch variables - Firefox Developer Tools
ngs.
...he variable's current value and you'll be able to type there: watch an expression watch expressions are expressions that are evaluated each time execution pauses.
...he watch expression does nothing until you begin to step through your code, so nothing happens until you reach a breakpoint.

Pretty-print a minified file - Firefox Developer Tools
to prettify a minified file, click the pretty print source icon () at the bottom of the source pane.
... to prettify a minified file, click the pretty print source icon () at the bottom of the source pane.
...the source pane.

Set a breakpoint - Firefox Developer Tools
ur console rather than pausing execution as a breakpoint does.
...source pane and pressing ctrl + b (windows/linux) or cmd + b (macos).
...e condition you want it to break on: once you've entered your condition and pressed enter/return, the line number will be highlighted in orange: breakpoints list once you've set some breakpoints, the breakpoints list in the right-hand column shows the filename and line number for each one: unsetting a breakpoint once a breakpoint has been set, you can unset it again in various ways: click on the line number highlight.

Set an XHR breakpoint - Firefox Developer Tools
an xhr (xmlhttprequest) breakpoint breaks code execution when an xhr request is dispatched so that you can examine the current state of the program.
... an xhr (xmlhttprequest) breakpoint breaks code execution when an xhr request is dispatched so that you can examine the current state of the program.
...s header, enter the url in which you are interested, and press enter.

Using the Debugger map scopes feature - Firefox Developer Tools
with all concatenated module files).
...nt at line 102 in the increment function.
...itional section is added to the right-hand panel below the call stack to display variables mapped from the original scope, like this: as useful as this is, it would be even nicer if you could view the original code (before it was packages into the "bundle.js" file.

Measure a portion of the page - Firefox Developer Tools
ol you can measure a specific area of a web page.
...port, you'll see the mouse has a crosshair cursor with its current coordinates displayed beside it.
...ton down and then drag, you'll start to draw a rectangle, with its x, y, and diagonal dimensions displayed.

Aggregate view - Firefox Developer Tools
ach category, and that number as a percentage of the whole heap size for that tab.
... the monster example page.
...s where the "bytes" and "count" columns are useful: they show allocation size and number of allocations at that exact point.

Inspecting web sockets - Firefox Developer Tools
a web app that utilizes a web socket connection, the web socket requests are listed in the list of requests in the network monitor along with all other requests.
...dshake) are visible, which indicates that the server is switching to a web socket connection.
...messages for control frames sent by the browser.

Performance Analysis - Firefox Developer Tools
the network monitor includes a performance analysis tool, to help show you how long the browser takes to download the different parts of your site.
...for each run side by side, or vertically if the browser window is narrow: the results for each run are summarised in a table and a pie chart.
...ly if the browser window is narrow: the results for each run are summarised in a table and a pie chart.

CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
en an html element on your page has display: grid applied to it, a number of features are made available in the devtools to provide easy access to grid features.
...eparate page.
...grid present on a page has an entry in the "overlay grid" section: each entry consists of (from left to right): a checkbox allowing you to toggle the grid overlay for that grid on and off.

Inspect and select colors - Firefox Developer Tools
in the css pane's rules view, if a rule contains a color value, you'll see a sample of the color next to the value: a color sample is also shown for css custom properties (variables) that represent colors.
... that represent colors.
... change the color: if the color is a foreground color, the color picker tells you whether its contrast with the background color meets accessibility guidelines.

Select and highlight elements - Firefox Developer Tools
ng the box model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page.
...ment": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page.
...e highlighted in the page.

Allocations - Firefox Developer Tools
llocation-samples in this function (also shown as a percentage of the total) rows are sorted by the "self bytes" column.
...eral, though: allocation pressure - allocating a lot of memory, or allocating memory at a high rate - makes spidermonkey more likely to run garbage collection, and more likely to run full, non-incremental garbage collection.
...n, and more likely to run full, non-incremental garbage collection.

How to - Firefox Developer Tools
r tools menu if you display the menu bar or are on os x) select "performance" from tools button, in the toolbar, if you have one: record a profile to start a new recording, press the stopwatch icon in the recordings pane.
...tton, in the toolbar, if you have one: record a profile to start a new recording, press the stopwatch icon in the recordings pane.
...watch icon in the recordings pane.

Responsive Design Mode - Firefox Developer Tools
informed about how you can make them automatic.
...ct this to see a panel containing all the choices, which enables you to check the devices you want to see in the drop-down.
... gprs 50 kb/s 20 kb/s 500 regular 2g 250 kb/s 50 kb/s 300 good 2g 450 kb/s 150 kb/s 150 regular 3g 750 kb/s 250 kb/s 100 good 3g 1.5 mb/s 750 kb/s 40 regular 4g/lte 4 mb/s 3 mb/s 20 dsl 2 mb/s 1 mb/s 5 wi-fi 30 mb/s 15 mb/s 2 to select a network, click the list box that's initially labeled "no throttling": ...

Shader Editor - Firefox Developer Tools
tex and fragment shaders.
...ree panes: a list of all the glsl programs on the left, the vertex shader for the currently selected program in the middle, and the fragment shader for the currently selected program on the right: managing programs the left hand pane lists all programs currently in use by a webgl context.
...cted program on the right: managing programs the left hand pane lists all programs currently in use by a webgl context.

Cookies - Firefox Developer Tools
sent with requests initiated from the same registrable domain.
...ated — date and time when the cookie was created.
... is, the domain value matches exactly the domain of the current website.

AddressErrors - Web APIs
e taken from defaultpaymentdetails.
...to call the event's updatewith() method, passing along the updatedetails object.
...ified error or errors but to allow the user to keep trying to edit the address.

AudioContext.createMediaStreamDestination() - Web APIs
on = audioctx.createmediastreamdestination(); returns a mediastreamaudiodestinationnode.
...blob.
... <button>make sine wave</button> <audio controls></audio> <script> var b = document.queryselector("button"); var clicked = false; var chunks = []; var ac = new audiocontext(); var osc = ac.createoscillator(); var dest = ac.createmediastreamdestination(); var mediarecorder = new mediarecorder(dest.stream); osc.connect(dest); b.addeventlistener("click", function(e) { if (!clicked) { mediarecorder.start(); osc.start(0); e.target.innerhtml = "stop recording"; clicked = true; } else { mediarecorder.stop(); osc.stop(0); e.target.disabled = true; } }); mediarecorder.ondataavailable = function(evt) { // push each chunk (blobs) in a...

AudioContext.getOutputTimestamp() - Web APIs
contexttime: a point in the time coordinate system of the currenttime for the baseaudiocontext; the time after the audio context was first created.
...nterface; the time after the document containing the audio context was first rendered examples in the following code we start to play an audio file after a play button is clicked, and start off a requestanimationframe loop running, which constantly outputs the contexttime and performancetime.
...hich constantly outputs the contexttime and performancetime.

Body.text() - Web APIs
ponse is always decoded using utf-8.
... value a promise that resolves with a usvstring.
...request() constructor, then use it to fetch a specific .txt file.

Document.createTextNode() - Web APIs
nt.createtextnode(data); text is a text node.
...is a string containing the data to be put in the text node.
...node.

Document.forms - Web APIs
tion object listing all of the document's forms.
... single <form> element.
... examples getting form information <!doctype html> <html lang="en"> <head> <title>document.forms example</title> </head> <body> <form id="robby"> <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" /> </form> <form id="dave"> <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" /> </form> <form id="paul"> <input type="button" onclick="alert(document.forms[2].id);" value="paul's form" /> </form> </body> </html> getting an element from within a form var selectform = document.forms[index]; var selectformelement = document.forms[index].elements[index]; named form access <!doctype html> <html lang="en"> <head> <title>document.forms example</title> </head> <body> <form name="login"> <input name="email" type="email"> ...

Document.requestStorageAccess() - Web APIs
lve.
...utomatic access grants are given through our compatibility heuristics.
...emeral storage access grant is: invalidated at the end of the browser session.

Element: contextmenu event - Web APIs
the contextmenu event fires when the user attempts to open a context menu.
... the contextmenu event fires when the user attempts to open a context menu.
...g fired at the targeted element.

Element: fullscreenchange event - Web APIs
es into or out of full-screen mode.
...es yes cancelable no interface event event handler property onfullscreenchange this event is sent to the element which is transitioning into or out of full-screen mode.
...cument.fullscreenelement will point to the element that // is in fullscreen mode if there is one.

Element.innerHTML - Web APIs
"; } log("logging mouse events inside this container..."); the log() function creates the log output by getting the current time from a date object using tolocaletimestring(), and building a string with the timestamp and the message text.
..."event <strong>" + event.type + "</strong> at <em>" + event.clientx + ", " + event.clienty + "</em>"; log(msg); } then we use this as the event handler for a number of mouse events on the box that contains our log: var boxelem = document.queryselector(".box"); boxelem.addeventlistener("mousedown", logevent); boxelem.addeventlistener("mouseup", logevent); boxelem.addeventlistener("click", logevent); boxelem.addeventlistener("mouseenter", logevent); boxelem.addeventlistener("mouseleave", logevent); html the html is quite simple for our example.
...he container for the log text itself.

Element.insertAdjacentElement() - Web APIs
he position specified is not a recognised value.
...e: the beforebegin and afterend positions work only if the node is in a tree and has an element parent.
...listener('click', function() { var tempdiv = document.createelement('div'); tempdiv.style.backgroundcolor = randomcolor(); if (activeelem) { activeelem.insertadjacentelement('afterend',tempdiv); } setlistener(tempdiv); }); have a look at our insertadjacentelement.html demo on github (see the source code too.) here we have a sequence of <div> elements inside a container.

Element: mousedown event - Web APIs
the mousedown event is fired at an element when a pointing device button is pressed while the pointer is inside the element.
... the mousedown event is fired at an element when a pointing device button is pressed while the pointer is inside the element.
... the mousedown event is fired at an element when a pointing device button is pressed while the pointer is inside the element.

Event.composed - Web APIs
ss the shadow dom boundary into the standard dom.
...er(); let pelem = document.createelement('p'); pelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="i have a closed shadow root"></closed-shadow> then include a click event listener on the <html> element: document.queryselector('html').addeventlistener('click',function(e) { console.log(e.composed); console.log(e.composedpath()); }); when you click on the <open-shadow> element and then the <closed-shadow> element, you'll notice two things.
..."i have a closed shadow root"></closed-shadow> then include a click event listener on the <html> element: document.queryselector('html').addeventlistener('click',function(e) { console.log(e.composed); console.log(e.composedpath()); }); when you click on the <open-shadow> element and then the <closed-shadow> element, you'll notice two things.

Event.currentTarget - Web APIs
et examples event.currenttarget is interesting to use when attaching the same event handler to several elements.
...ng to use when attaching the same event handler to several elements.
...de(e){ e.currenttarget.style.visibility = 'hidden'; console.log(e.currenttarget); // when this function is used as an event handler: this === e.currenttarget } var ps = document.getelementsbytagname('p'); for(var i = 0; i < ps.length; i++){ // console: print the clicked <p> element ps[i].addeventlistener('click', hide, false); } // console: print <body> document.body.addeventlistener('click', hide, false); // click around and make paragraphs disappear note: the value of event.currenttarget is only available while the event is being handled.

Event.initEvent() - Web APIs
nt.
...hrough the event chain or not.
...ubbles will give its value.

Event - Web APIs
the event interface represents an event which takes place in the dom.
... the event interface represents an event which takes place in the dom.
... at which the event was created (in milliseconds).

GainNode - Web APIs
-processing module that causes a given gain to be applied to the input data before its propagation to the output.
... is an a-rate audioparam representing the amount of gain to apply.
... audio: true }, // success callback function(stream) { source = audioctx.createmediastreamsource(stream); }, // error callback function(err) { console.log('the following gum error occured: ' + err); } ); } else { console.log('getusermedia not supported on your browser!'); } source.connect(gainnode); gainnode.connect(audioctx.destination); ...

GlobalEventHandlers.oncontextmenu - Web APIs
the oncontextmenu property of the globaleventhandlers mixin is an eventhandler that processes contextmenu events.
...function expression.
...nts context menus from opening in the window.

GlobalEventHandlers.ontransitioncancel - Web APIs
t the value of elapsedtime, which is zero until the delay period ends and the animation begins.
...px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.
...2000); function appear() { box.style.display = 'block'; } } box.ontransitioncancel = function(event) { console.log('transitioncancel fired after ' + event.elapsedtime + ' seconds.'); } result the resulting content looks like this: notice what happens when you hover your mouse cursor over the box, then move it away.

HTMLDialogElement.close() - Web APIs
logelement interface closes the dialog.
... updating the returnvalue of the the dialog.
...elbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).

HTMLDialogElement.open - Web APIs
openvalue = dialoginstance.open; value a boolean representing the state of the open html attribute.
...attribute.
...elbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).

HTMLDialogElement.show() - Web APIs
the show() method of the htmldialogelement interface displays the dialog modelessly, i.e.
... the show() method of the htmldialogelement interface displays the dialog modelessly, i.e.
...elbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> specifications specification status comment html living standardthe definition ...

HTMLDialogElement.showModal() - Web APIs
backdrop pseudo-element.
...it is rendered inert.
...elbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).

HTMLDialogElement - Web APIs
essly, i.e.
...lays the dialog as a modal, over the top of any other dialogs that might be present.
...elbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).

HTMLElement: change event - Web APIs
event, the change event is not necessarily fired for each alteration to an element's value.
...rty onchange depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment: when the element is :checked (by clicking or using the keyboard) for <input type="radio"> and <input type="checkbox">; when the user commits the change explicitly (e.g., by selecting a value from a <select>'s dropdown with a mouse click, by selecting a date from a date picker for <input type="date">, by selecting a file in the file picker for <input type="file">, etc.); when the element loses focus after its value was changed, but not commited (e.g., after editing the value of <textarea> or <input type="text">).
...ment.queryselector('.ice-cream'); selectelement.addeventlistener('change', (event) => { const result = document.queryselector('.result'); result.textcontent = `you like ${event.target.value}`; }); result text input element for some elements, including <input type="text">, the change event doesn't fire until the control loses focus.

HTMLImageElement.sizes - Web APIs
; border-radius: 7em; padding: 1.5em; font: 16px "open sans", verdana, arial, helvetica, sans-serif; } article img { display: block; max-width: 100%; border: 1px solid #888; box-shadow: 0 0.5em 0.3em #888; margin-bottom: 1.25em; } javascript the javascript code handles the two buttons that let you toggle the third width option between 40em and 50em; this is done by handling the click event, using the javascript string object method replace() to replace the relevant portion of the sizes string.
...buttons that let you toggle the third width option between 40em and 50em; this is done by handling the click event, using the javascript string object method replace() to replace the relevant portion of the sizes string.
... click event, using the javascript string object method replace() to replace the relevant portion of the sizes string.

HTMLInputElement.setSelectionRange() - Web APIs
the htmlinputelement.setselectionrange() method sets the start and end positions of the current text selection in an <input> or <textarea> element.
...character after the last selected character.
...ction in which the selection is considered to have been performed.

HTMLMediaElement.play() - Web APIs
ection handler is called with an exception name passed in as its sole input parameter (as opposed to a traditional exception being thrown).
... even more in-depth information about autoplay and autoplay blocking, see our article autoplay guide for media and web audio apis.
...ment's class is cleared, restoring its default appearance.

HTMLSelectElement.selectedOptions - Web APIs
fetching the htmlcollection of selected elements using the selected property.
...tion[i].label; if (i === (collection.length - 2) && (collection.length < 3)) { output += " and "; } else if (i < (collection.length - 2)) { output += ", "; } else if (i === (collection.length - 2)) { output += ", and "; } } if (output === "") { output = "you didn't order anything!"; } outputbox.innerhtml = output; }, false); this script sets up a click event listener on the "order now" button.
... && (collection.length < 3)) { output += " and "; } else if (i < (collection.length - 2)) { output += ", "; } else if (i === (collection.length - 2)) { output += ", and "; } } if (output === "") { output = "you didn't order anything!"; } outputbox.innerhtml = output; }, false); this script sets up a click event listener on the "order now" button.

HTMLTextAreaElement - Web APIs
nselend); omsginput.setselectionrange(bdouble || nselstart === nselend ?
...(bdouble ?
...nternal span to behave like a link: .intlink { cursor: pointer; text-decoration: underline; color: #0000ff; } html: <form name="myform"> <p>[&nbsp;<span class="intlink" onclick="insertmetachars('&lt;strong&gt;','&lt;\/strong&gt;');"><strong>bold</strong></span> | <span class="intlink" onclick="insertmetachars('&lt;em&gt;','&lt;\/em&gt;');"><em>italic</em></span> | <span class="intlink" onclick="var newurl=prompt('enter the full url for the link');if(newurl){insertmetachars('&lt;a href=\u0022'+newurl+'\u0022&gt;','&lt;\/a&gt;');}else{document.myform.mytxtarea.focus();}">url</span> | <span class="intlink" onclick="insertmetachars('\n&lt;code&gt;\n','\n&lt;\/code&gt;\n');">code</span> | <span class="intlink" onclick="insertmetachars(' :-)');">smile</span> | etc.

ImageCapture - Web APIs
example below starts with a device's media device (in other words a camera).
... these calls to a canvas object.
... const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); }) .catch(error => console.log(error)); } function ongrabframebuttonclick() { imagecapture.grabframe() .then(imagebitmap => { const canvas = document.queryselector('#grabframecanvas'); drawcanvas(canvas, imagebitmap); }) .catch(error => console.log(error)); } function ontakephotobuttonclick() { imagecapture.takephoto() .then(blob => createimagebitmap(blob)) .then(imagebitmap => { const canvas = document.queryselector('#takephotocanvas'); drawcanvas(canvas, imagebitmap); }) .catch(error => console.log(error)); } /* utils */ function drawcanvas(canvas, img) { canvas.width = getcomputedstyle(canvas).width.split('px')[0]; canvas.height = getcomputedstyle(canvas).

MediaRecorder - Web APIs
wed or was attempted using an unsupported codec.
...ks = []; navigator.mediadevices.getusermedia(constraints) .then(function(stream) { var mediarecorder = new mediarecorder(stream); visualize(stream); record.onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); console.log("recorder started"); record.style.background = "red"; record.style.color = "black"; } stop.onclick = function() { mediarecorder.stop(); console.log(mediarecorder.state); console.log("recorder stopped"); record.style.background = ""; record.style.color = ""; } mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var clipname = prompt('enter a name for your sound clip'); var clipcontainer...
...o); clipcontainer.appendchild(cliplabel); clipcontainer.appendchild(deletebutton); soundclips.appendchild(clipcontainer); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); chunks = []; var audiourl = url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); deletebutton.onclick = function(e) { evttgt = e.target; evttgt.parentnode.parentnode.removechild(evttgt.parentnode); } } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } }) .catch(function(err) { console.log('the following error occurred: ' + err); }) } this code sample is inspired by the web dictaphone demo.

MouseEvent.button - Web APIs
g one or multiple buttons.
...o the standard "left to right" layout.
...d="button" oncontextmenu="event.preventdefault();">click here with your mouse...</button> <p id="log"></p> javascript let button = document.queryselector('#button'); let log = document.queryselector('#log'); button.addeventlistener('mouseup', logmousebutton); function logmousebutton(e) { if (typeof e === 'object') { switch (e.button) { case 0: log.textcontent = 'left button clicked.'; break; case 1: log.textcontent = 'middle button clicked.'; break; case 2: log.textcontent = 'right button clicked.'; break; default: log.textcontent = `unknown button code: ${e.button}`; } } } result specifications specification status comment document object model (dom) level 3 events specif...

MouseEvent.ctrlKey - Web APIs
that indicates whether the ctrl key was pressed or not when a given mouse event occurs.
... the ctrl key was pressed or not when a given mouse event occurs.
...tanceofmouseevent.ctrlkey return value a boolean, where true indicates that the key is pressed, and false indicates that the key is not pressed.

MouseEvent.metaKey - Web APIs
may open the start menu.
...u.
...tanceofmouseevent.metakey return value a boolean, where true indicates that the key is pressed, and false indicates that the key is not pressed.

MouseEvent.pageX - Web APIs
the pagex read-only property of the mouseevent interface returns the x (horizontal) coordinate (in pixels) at which the mouse was clicked, relative to the left edge of the entire document.
...which the mouse was clicked, relative to the left edge of the entire document.
..., this property was defined as a long integer.

MouseEvent.shiftKey - Web APIs
the mouseevent.shiftkey read-only property is a boolean that indicates whether the shift key was pressed or not when a given mouse event occurs.
...key read-only property is a boolean that indicates whether the shift key was pressed or not when a given mouse event occurs.
...ceofmouseevent.shiftkey return value a boolean, where true indicates that the key is pressed, and false indicates that the key is not pressed.

NotificationEvent.action - Web APIs
returns the string id of the notification button the user clicked.
... returns the string id of the notification button the user clicked.
...utton, or the notification does not have a button.

ParentNode.replaceChildren() - Web APIs
splay: block; } .buttons { display: flex; flex-flow: column; justify-content: center; } select { width: 200px; } what we want to do is transfer any selected options in the "no" list over to the "yes" list when the "yes" button is pressed, and transfer any selected options in the "yes" list over to the "no" list when the "no" button is pressed.
...o in another constant.
...st nobtn = document.getelementbyid('to-no'); const yesbtn = document.getelementbyid('to-yes'); yesbtn.addeventlistener('click', () => { const selectedtransferoptions = document.queryselectorall('#no option:checked'); const existingyesoptions = document.queryselectorall('#yes option'); yesselect.replacechildren(...selectedtransferoptions, ...existingyesoptions); }); nobtn.addeventlistener('click', () => { const selectedtransferoptions = document.queryselectorall('#yes option:checked'); const existingnooptions = document.queryselectorall('#no option'); noselect.replacechildren(...selectedtransferoptions, ...existingnooptions); }); the end result looks like this: specification specification status comment domthe definition of 'parentnode.replacechildren()...

PerformanceEventTiming - Web APIs
the performanceeventtiming interface of the event timing api provides timing information for the event types listed below.
... the performanceeventtiming interface of the event timing api provides timing information for the event types listed below.
... the performanceeventtiming interface of the event timing api provides timing information for the event types listed below.

Using the Permissions API - Web APIs
revoke existing permissions, using the permissions.revoke() method.
...is doesn't offer much more than what we had already.
...y permission), then we can't get back to the permission prompt without using the browser menu options: firefox: tools > page info > permissions > access your location.

SVGTransformList - Web APIs
re immediately reflected in the list.
... xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>example showing how to transform svg elements that using svgtransform objects</desc> <script type="application/ecmascript"> <![cdata[ function transformme(evt) { // svg root element to access the createsvgtransform() function var svgroot = evt.target.parentnode; // svgtransformlist of the element that has been clicked on var tfmlist = evt.target.transform.baseval; // create a seperate transform object for each transform var translate = svgroot.createsvgtransform(); translate.settranslate(50,5); var rotate = svgroot.createsvgtransform(); rotate.setrotate(10,0,0); var scale = svgroot.createsvgtransform(); scale.setscale(0.8,0.8); // apply the transforma...
... // apply the transformations by appending the svgtranform objects to the svgtransformlist associated with the element tfmlist.appenditem(translate); tfmlist.appenditem(rotate); tfmlist.appenditem(scale); } ]]> </script> <polygon fill="orange" stroke="black" stroke-width="5" points="100,225 100,115 130,115 70,15 70,15 10,115 40,115 40,225" onclick="transformme(evt)"/> <rect x="200" y="100" width="100" height="100" fill="yellow" stroke="black" stroke-width="5" onclick="transformme(evt)"/> <text x="40" y="250" font-family="verdana" font-size="16" fill="green" > click on a shape to transform it </text> </svg> live preview: specifications specification status comment scalable vecto...

ServiceWorkerGlobalScope - Web APIs
ope.oninstall property.
...essage occurs when incoming messages are received.
...ssage() method to send messages to service workers.

ServiceWorkerRegistration.showNotification() - Web APIs
the array should be an object literal.
... be a valid bcp 47 language tag.
...ion) { registration.shownotification('vibration sample', { body: 'buzz!

UIEvent.initUIEvent() - Web APIs
bbles will give its value.
... set, the read-only property event.cancelable will give its value.
...ong specifying some detail information about the event, depending on the type of event.

Starting up and shutting down a WebXR session - Web APIs
mber of security measures in place revolving around webxr.
...r of the device's availability, begin to monitor it for inputs, offer configuration options, or whatever you need to do with it.
...d event to be sent to the xrsession.

Using the Web Animations API - Web APIs
var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); the element.animate() method will immediately run after it is called.
... by setting a decay on her animation’s playbackrate.
...e playback rate never falls below .4 if (redqueen_alice.playbackrate > .4) { redqueen_alice.updateplaybackrate(redqueen_alice.playbackrate * .9); } }, 3000); but urging them on by clicking or tapping causes them to speed up by multiplying their playbackrate: var gofaster = function() { redqueen_alice.updateplaybackrate(redqueen_alice.playbackrate * 1.1); } document.addeventlistener("click", gofaster); document.addeventlistener("touchstart", gofaster); the background elements also have playbackrates that are impacted when you click or tap.

Window.find() - Web APIs
rue, specifies a whole word search.
...earchinframes boolean.
...f the string is found; otherwise, false.

Window.onbeforeinstallprompt - Web APIs
d to "install" a web application.
...window.onbeforeinstallprompt = function(event) { ...}; example the following example uses the beforeinstallprompt event to make an install button operable, by using the event inside a click handler.
...le the following example uses the beforeinstallprompt event to make an install button operable, by using the event inside a click handler.

Window.prompt() - Web APIs
are many ways to use the prompt feature sign = window.prompt(); // open the blank prompt window sign = prompt(); // open the blank prompt window sign = window.prompt('are you feeling lucky'); // open the window with text "are you feeling lucky" sign = window.prompt('are you feeling lucky', 'sure'); // open the window with text "are you feeling lucky" and default value "sure" when the user clicks the ok button, text entered in the input field is returned.
...nk prompt window sign = prompt(); // open the blank prompt window sign = window.prompt('are you feeling lucky'); // open the window with text "are you feeling lucky" sign = window.prompt('are you feeling lucky', 'sure'); // open the window with text "are you feeling lucky" and default value "sure" when the user clicks the ok button, text entered in the input field is returned.
...= window.prompt('are you feeling lucky'); // open the window with text "are you feeling lucky" sign = window.prompt('are you feeling lucky', 'sure'); // open the window with text "are you feeling lucky" and default value "sure" when the user clicks the ok button, text entered in the input field is returned.

WindowOrWorkerGlobalScope.clearTimeout() - Web APIs
ntifier of the timeout you want to cancel.
...sponding call to settimeout().
...r alarm = { remind: function(amessage) { alert(amessage); this.timeoutid = undefined; }, setup: function() { if (typeof this.timeoutid === 'number') { this.cancel(); } this.timeoutid = window.settimeout(function(msg) { this.remind(msg); }.bind(this), 1000, 'wake up!'); }, cancel: function() { window.cleartimeout(this.timeoutid); } }; window.onclick = function() { alarm.setup(); }; notes passing an invalid id to cleartimeout() silently does nothing; no exception is thrown.

Using the link role - Accessibility
en magnifiers may enlarge links.
...abindex="0" id="link1" role="link" class="link"> fake accessible link created using a span </span> <p><a href="https://mozilla.org" target="_blank">actual real link</a></p> css span[role="link"] { color: blue; text-decoration: underline; cursor: pointer; } span[role="link"]:focus { outline: 1px dotted black; } javascript const spanelem = document.queryselector('span'); //handles clicks and keydowns on the link function navigatelink(e) { if (e.type === 'click' || e.key === 'enter') { let ref = e.target != null ?
...line: 1px dotted black; } javascript const spanelem = document.queryselector('span'); //handles clicks and keydowns on the link function navigatelink(e) { if (e.type === 'click' || e.key === 'enter') { let ref = e.target != null ?

ARIA: tab role - Accessibility
: 0 0.5em 0.5em 0.7em; border: 1px solid grey; border-radius: 0 0 5px 5px; background: white; z-index: 2; } [role="tabpanel"]:focus { border-color: orange; outline: 1px solid orange; } there are two things we need to do with javascript: we need to change focus and tab index of our tab elements with the right and left arrows, and we need to change the active tab and tabpanel when we click on a tab.
...nd all tabpanel elements in the grandparent element, make them all hidden, and finally select the element whose id is equal to the triggering tab's aria-controls and removes the hidden attribute, making it visible.
...ally select the element whose id is equal to the triggering tab's aria-controls and removes the hidden attribute, making it visible.

ARIA: listbox role - Accessibility
lected.
...> element with descendant <option> elements handles all the needed interactions natively.
...ant <option> elements handles all the needed interactions natively.

Accessibility Information for Web Authors - Accessibility
heck" for accessibility, privacy, searchability, metadata and even alt text attribute quality.
...firefox 2.x and firefox 3.x.
...delines (section 508, wcag priorities 1, 2 or 3).

:active - CSS: Cascading Style Sheets
d rules, as defined by the lvha-order: :link — :visited — :hover — :active.
......
...k { color: blue; } /* unvisited links */ a:visited { color: purple; } /* visited links */ a:hover { background: yellow; } /* hovered links */ a:active { color: red; } /* active links */ p:active { background: #eee; } /* active paragraphs */ result active form elements html <form> <label for="my-button">my button: </label> <button id="my-button" type="button">try clicking me or my label!</button> </form> css form :active { color: red; } form button { background: white; } result specifications specification status comment html living standardthe definition of ':active' in that specification.

user-select - CSS: Cascading Style Sheets
otherwise, if the used value of user-select on the parent of this element is none, the used value is none otherwise, the used value is text text the text can be selected by the user.
...e used value of user-select on the parent of this element is none, the used value is none otherwise, the used value is text text the text can be selected by the user.
...ed only in internet explorer.

Audio and Video Delivery - Developer guides
ss, then use javascript to link your controls to the audio/video api.
...'my-audio'); var mycontrol = document.getelementbyid('my-control'); function switchstate() { if (myaudio.paused == true) { myaudio.play(); mycontrol.innerhtml = "pause"; } else { myaudio.pause(); mycontrol.innerhtml = "play"; } } function checkkey(e) { if (e.keycode == 32 ) { //spacebar switchstate(); } } mycontrol.addeventlistener('click', function() { switchstate(); }, false); window.addeventlistener( "keypress", checkkey, false ); } you can try this example out here.
...lback content of a video, when none of the sources could be decoded in the current browser, is to add an error handler on the last source element.

Creating and triggering events - Developer guides
function() { // create and dispatch/trigger an event on the fly // note: optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element this.dispatchevent(new customevent('awesome', { bubbles: true, detail: { text: () => textarea.value } })) }); triggering built-in events this example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using dom methods.
...(instead of the "arrow function expression") so "this" will represent the element this.dispatchevent(new customevent('awesome', { bubbles: true, detail: { text: () => textarea.value } })) }); triggering built-in events this example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using dom methods.
...") so "this" will represent the element this.dispatchevent(new customevent('awesome', { bubbles: true, detail: { text: () => textarea.value } })) }); triggering built-in events this example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using dom methods.

<area> - HTML: Hypertext Markup Language
xt that is an ancestor of the current one and has no parent).
...specifying the position of the defined area in the browser tabbing order.
...bute is global in html5.

<dialog>: The Dialog element - HTML: Hypertext Markup Language
p css pseudo-element can be used to style behind a <dialog> element when the dialog is displayed with htmldialogelement.showmodal().
... aria-live="polite"></output> javascript var updatebutton = document.getelementbyid('updatedetails'); var favdialog = document.getelementbyid('favdialog'); var outputbox = document.queryselector('output'); var selectel = document.queryselector('select'); var confirmbtn = document.getelementbyid('confirmbtn'); // "update details" button opens the <dialog> modally updatebutton.addeventlistener('click', function onopen() { if (typeof favdialog.showmodal === "function") { favdialog.showmodal(); } else { alert("the <dialog> api is not supported by this browser"); } }); // "favorite animal" input sets the value of the submit button selectel.addeventlistener('change', function onselect(e) { confirmbtn.value = selectel.value; }); // "confirm" button of form triggers "close" on dialo...
...s not supported by this browser"); } }); // "favorite animal" input sets the value of the submit button selectel.addeventlistener('change', function onselect(e) { confirmbtn.value = selectel.value; }); // "confirm" button of form triggers "close" on dialog because of [method="dialog"] favdialog.addeventlistener('close', function onclose() { outputbox.value = favdialog.returnvalue + " button clicked - " + (new date()).tostring(); }); result specifications specification status comment html living standardthe definition of '<dialog>' in that specification.

<input type="datetime-local"> - HTML: Hypertext Markup Language
rted than datetime-local.
...well, but you shouldn't rely on this behavior since you can't easily predict it.
...ng() method can be used for this purpose.

<input type="number"> - HTML: Hypertext Markup Language
nstrain the minimum and maximum number of valid digits using the min and max attributes (as explained above).
...y, the javascript: let metersinputgroup = document.queryselector('.metersinputgroup'); let feetinputgroup = document.queryselector('.feetinputgroup'); let metersinput = document.queryselector('#meters'); let feetinput = document.queryselector('#feet'); let inchesinput = document.queryselector('#inches'); let switchbtn = document.queryselector('input[type="button"]'); switchbtn.addeventlistener('click', function() { if(switchbtn.getattribute('class') === 'meters') { switchbtn.setattribute('class', 'feet'); switchbtn.value = 'enter height in meters'; metersinputgroup.style.display = 'none'; feetinputgroup.style.display = 'block'; feetinput.setattribute('required', ''); inchesinput.setattribute('required', ''); metersinput.removeattribute('required'); metersi...
...istener is added to the button to control the switching mechanism.

<input type="submit"> - HTML: Hypertext Markup Language
<input> elements of type submit are rendered as buttons.
... <input> elements of type submit are rendered as buttons.
... <input> elements of type submit are rendered as buttons.

<menuitem> - HTML: Hypertext Markup Language
three values.
...t-click to see the adjusted context menu </div> <menu type="context" id="popup-menu"> <menuitem type="checkbox" checked>checkbox</menuitem> <hr> <menuitem type="command" label="this command does nothing" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png"> commands don't render their contents.
...usted context menu </div> <menu type="context" id="popup-menu"> <menuitem type="checkbox" checked>checkbox</menuitem> <hr> <menuitem type="command" label="this command does nothing" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png"> commands don't render their contents.

HTML elements reference - HTML: Hypertext Markup Language
.
... (data cell) and <th> (header cell) elements.
...nt represents a dialog box or other interactive component, such as a dismissable alert, inspector, or subwindow.

CSP: script-src - HTTP
the http content-security-policy (csp) script-src directive specifies valid sources for javascript.
...mple' requires a sample of the violating code to be included in the violation report.
...csp header: content-security-policy: script-src https://example.com/ the following script is blocked and won't be loaded or executed: <script src="https://not-example.com/js/library.js"></script> note that inline event handlers are blocked as well: <button id="btn" onclick="dosomething()"> you should replace them with addeventlistener calls: document.getelementbyid("btn").addeventlistener('click', dosomething); unsafe inline script note: disallowing inline styles and inline scripts is one of the biggest security wins csp provides.

Concurrency model and the event loop - JavaScript
will run entirely before any other code runs (and can modify data the function manipulates).
... like click or scroll.
...browser mitigates this with the "a script is taking too long to run" dialog.

Introduction - JavaScript
f you are new to javascript, start with the articles in the learning area and the javascript guide.
...res, and statements.
...u can use the multi-line line input mode.

Promise - JavaScript
) { console.error("had previously handled error"); } else { console.error(`trouble with promisegetword(): ${reason}`); } }) .finally((info) => console.log("all done")); advanced example <button id="btn">make a promise!</button> <div id="log"></div> this small example shows the mechanism of a promise.
...beforeend', val + ') promise fulfilled (async code terminated)'); }).catch((reason) => { // log the rejection reason console.log(`handle rejected promise (${reason}) here.`); }); // end log.insertadjacenthtml('beforeend', thispromisecount + ') promise made (sync code terminated)'); } if ("promise" in window) { let btn = document.getelementbyid("btn"); btn.addeventlistener("click",testpromise); } else { log = document.getelementbyid('log'); log.innerhtml = "live example not available as your browser doesn't support the <code>promise<code> interface."; } this example is started by clicking the button.
...minated)'); } if ("promise" in window) { let btn = document.getelementbyid("btn"); btn.addeventlistener("click",testpromise); } else { log = document.getelementbyid('log'); log.innerhtml = "live example not available as your browser doesn't support the <code>promise<code> interface."; } this example is started by clicking the button.

this - JavaScript
.
...e related element blue function bluify(e) { // always true console.log(this === e.currenttarget); // true when currenttarget and target are the same object console.log(this === e.target); this.style.backgroundcolor = '#a5d9f3'; } // get a list of every element in the document var elements = document.getelementsbytagname('*'); // add bluify as a click listener so when the // element is clicked on, it turns blue for (var i = 0; i < elements.length; i++) { elements[i].addeventlistener('click', bluify, false); } in an inline event handler when the code is called from an inline on-event handler, its this is set to the dom element on which the listener is placed: <button onclick="alert(this.tagname.tolowercase());"> show this </button> the above alert shows button.
... { elements[i].addeventlistener('click', bluify, false); } in an inline event handler when the code is called from an inline on-event handler, its this is set to the dom element on which the listener is placed: <button onclick="alert(this.tagname.tolowercase());"> show this </button> the above alert shows button.

void operator - JavaScript
ed!" executing the above function without the void keyword will result in an uncaught syntaxerror.
...script uris when a browser follows a javascript: uri, it evaluates the code in the uri and then replaces the contents of the page with the returned value, unless the returned value is undefined.
...troduce a short-hand braceless syntax that returns an expression.

<maction> - MathML
ment provides a possibility to bind actions to (sub-) expressions.
... can make use of the selection attribute.
...s for this element.

CSS and JavaScript animation performance - Web Performance
d before the next repaint.
...rmance test, using firefox, to see what animation method seems better overall.
...raw-fps preference.

Populating the page: how browsers work - Web Performance
ns.
... class="heading">my page</h1> <p>a paragraph with a <a href="https://example.com/about">link</a></p> <div> <img src="myimage.jpg" alt="image description"/> </div> <script src="anotherscript.js"></script> </body> </html> this response for this initial request contains the first byte of data received.
...the user would see the page super quickly, but wouldn't be able to scroll without jank until the script was downloaded, parsed and executed.

Structural overview of progressive web apps - Progressive web apps (PWAs)
like a native app with instant interaction and solid performance while keeping all the benefits of the web.
...website/g,games[i].website) .replace(/github/g,games[i].github); entry = entry.replace('<a href=\'http:///\'></a>','-'); content += entry; }; document.getelementbyid('content').innerhtml = content; then it registers a service worker: if ("serviceworker" in navigator) { navigator.serviceworker.register("/pwa-examples/js13kpwa/sw.js"); } after that, the app adds a handler for clicks on a button whose id is notifications; this handler requests permission to send notifications to the user, then generates and sends a random notification.
... worker: if ("serviceworker" in navigator) { navigator.serviceworker.register("/pwa-examples/js13kpwa/sw.js"); } after that, the app adds a handler for clicks on a button whose id is notifications; this handler requests permission to send notifications to the user, then generates and sends a random notification.

pointer-events - SVG: Scalable Vector Graphics
esentation attribute that allows defining whether or when an element may be the target of a mouse event.
...e circle will always intercept the mouse event.
...="15" cy="5" r="4" fill="white" pointer-events="none" /> </svg> window.addeventlistener('mouseup', (e) => { // let's pick a random color between #000000 and #ffffff const color = math.round(math.random() * 0xffffff) // let's format the color to fit css requirements const fill = '#' + color.tostring(16).padstart(6,'0') // let's apply our color in the // element we actually clicked on e.target.style.fill = fill }) as a presentation attribute, it can be applied to any element but it is mostly relevant only on the following twenty-three elements: <a>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use> usage not...

SVG documentation index - SVG: Scalable Vector Graphics
ibute defines the blending mode on the <feblend> filter primitive.
...filter primitive.
...tribute the name attribute specifies either the name of a color profile or a font face.

mimeTypes.rdf corruption - SVG: Scalable Vector Graphics
.
...ct the "open with" radio button and choose any .exe except firefox.exe/mozilla.exe.
...se any .exe except firefox.exe/mozilla.exe.

Cross-domain Content Scripts - Archive of obsolete content
uest the following add-on creates a panel whose content is the summary weather forecast for shetland.
...var data = require("sdk/self").data; var forecast_panel = require("sdk/panel").panel({ height: 50, contenturl: data.url("panel.html"), contentscriptfile: data.url("panel-script.js") }); forecast_panel.on("show", function(){ forecast_panel.port.emit("show"); }); require("sdk/ui/button/action").actionbutton({ id: "get-forecast", label: "get the forecast", icon: "./icon-16.png", onclick: function() { forecast_panel.show(); } }); the "panel.html" just includes a <div> block for the forecast: <!doctype html> <!-- panel.html --> <html> <head></head> <body> <div id="forecast_summary"></div> </body> </html> the "panel-script.js" uses xmlhttprequest to fetch the latest forecast: // panel-script.js var url = "http://datapoint.metoffice.gov.uk/public/data/txt/wxf...

simple-prefs - Archive of obsolete content
lignment", "type": "radio", "title": "alignment", "value": "n", "options": [ { "value": "l", "label": "lawful" }, { "value": "n", "label": "neutral" }, { "value": "c", "label": "chaotic" } ] } control displays a button.
... "label": "chaotic" } ] } control displays a button.

lang/functional - Archive of obsolete content
oop.
...unction () { ...

Adding a Button to the Toolbar - Archive of obsolete content
icon-64.png then open the file called "index.js" in the root of your addon directory and add the following code to it: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://www.mozilla.org/"); } now run the add-on with jpm run.
...ps://www.mozilla.org/"); } now run the add-on with jpm run.

Unit Testing - Archive of obsolete content
dules/services.jsm"); exports.atob = a => atob(a); exports.btoa = b => btoa(b); this code exports two functions, which just call the platform's btoa() and atob() functions.
...unction() { encoded = base64.btoa("hello"); console.log(encoded); decoded = base64.atob(encoded); console.log(decoded); } }); to run this example you'll also have to have an icon file named "icon-16.png" saved in your add-ons "data" directory.

Localization - Archive of obsolete content
to the html tag where you want the localized string to appear, and assign the identifier to it: <html> <body> <h1 data-l10n-id="hello_id"></h1> </body> </html> then you can use this html file to build your interface, for example inside a panel: var button = require("sdk/ui/button/action").actionbutton({ id: "localized-hello", label: "localized hello", icon: "./icon-16.png", onclick: function() { hello.show(); } }); var hello = require("sdk/panel").panel({ height: 75, width: 150, contenturl: require("sdk/self").data.url("my-panel.html") }); given locale files for "en-us" and "fr" which provide translations of hello_id, the panel will now display "hello!" or "bonjour !", according to the current locale: the translation is inserted into the node which has the ...
...eys to look up your translations.

Windows - Archive of obsolete content
w-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); var newwindow = wm.getmostrecentwindow("navigator:browser"); var b = newwindow.gbrowser; the code generate a typeerror from firefox console.
...ator:browser"); var b = newwindow.gbrowser; the code generate a typeerror from firefox console.

Extension Versioning, Update and Compatibility - Archive of obsolete content
//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.
...dows users should consider hashtab for interactive (non-build-script) use.

Adding windows and dialogs - Archive of obsolete content
gs in an extension.
.../keymaster/gatekeeper/there.is.only.xul"> carefully read the specification of the dialog element.

Creating reusable content with CSS and XBL - Archive of obsolete content
bindings, see the xbl page in this wiki.
... settimeout(this.cleardemo, 2000, this) ]]></body> </method> <method name="cleardemo"> <parameter name="me"/> <body><![cdata[ me.square.style.backgroundcolor = "transparent" me.square.style.marginleft = "0" me.button.removeattribute("disabled") ]]></body> </method> </implementation> <handlers> <handler event="click" button="0"><![cdata[ if (event.originaltarget == this.button) this.dodemo() ]]></handler> </handlers> </binding> </bindings> make a new css file, bind6.css.

Creating a Web based tone generator - Archive of obsolete content
have samples to play, a buffer of 500 ms is created.
...created.

Working with BFCache - Archive of obsolete content
q: what is the bfcache exactly?
... q: what is the bfcache exactly?

Bookmark Keywords - Archive of obsolete content
ark</tt> <tt>google bookmark site:developer.netscape.com</tt> <tt>google netscape xml support -site:netscape.com</tt> a few examples in the course of writing this article, a number of potentially useful bookmarks were considered as possible examples.
...etscape.com</tt> <tt>google netscape xml support -site:netscape.com</tt> a few examples in the course of writing this article, a number of potentially useful bookmarks were considered as possible examples.

Creating a Skin for Mozilla - Archive of obsolete content
n in order to create a skin for mozilla, you will need to know three things.
...ow three things.

Drag and Drop JavaScript Wrapper - Archive of obsolete content
be called when a drag starts on the button.
... here, an observer has been declared and stored in the variable textobserver.

Repackaging Firefox - Archive of obsolete content
me of the default search engine.
... to be different from the default to prevent the migration wizard from overwriting it.

Remotely debugging Firefox for Metro - Archive of obsolete content
ort (to change the tcp port number where firefox will listen for connections) devtools.debugger.prompt-connection = false (allow connections without displaying a confirmation prompt.
...e desktop via the desktop tile and check if windows firewall has thrown up an incoming connection permissions prompt.

Frequently Asked Questions - Archive of obsolete content
for svg content authors to make mozilla use a plugin when people view the svg files on their website.
...ly, occasional fixes are provided by other mozilla hackers.

InstallTrigger.installChrome - Archive of obsolete content
installtrigger.installchrome trigger scripts are typically invoked by javascript event handlers on hyperlinks.
... installtrigger.installchrome trigger scripts are typically invoked by javascript event handlers on hyperlinks.

button.type - Archive of obsolete content
« xul reference home type type: one of the values below the type of button.
... created.

href - Archive of obsolete content
« xul reference home href type: string defines a url to open when this element is clicked.
... « xul reference home href type: string defines a url to open when this element is clicked.

id - Archive of obsolete content
« xul reference home id type: unique id a unique identifier so that you can identify the element with.
...er to getelementbyid() and other dom functions and to reference the element in style sheets.

oncommand - Archive of obsolete content
« xul reference home oncommand type: script code this event handler is called when the command is activated.
... « xul reference home oncommand type: script code this event handler is called when the command is activated.

Attribute (XUL) - Archive of obsolete content
llaftermatch autoscroll beforeselected buttonaccesskeyaccept buttonaccesskeycancel buttonaccesskeydisclosure buttonaccesskeyextra1 buttonaccesskeyextra2 buttonaccesskeyhelp buttonalign buttondir buttondisabledaccept buttonlabelaccept buttonlabelcancel buttonlabeldisclosure buttonlabelextra1 buttonlabelextra2 buttonlabelhelp buttonorient buttonpack buttons checked checkstate clicktoscroll class closebutton closemenu coalesceduplicatearcs collapse collapsed color cols command commandupdater completedefaultindex container containment contentcontextmenu contenttooltip context contextmenu control crop curpos current currentset customindex customizable cycler datasources decimalplaces default defaultbutton defaultset description dir disableautoc...
... ignorekeys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline multiple name negate newlines next noautofocus noautohide noinitialfocus nomatch norestorefocus object observes onbeforeaccept onbookmarkgroup onchange onclick onclosetab oncommand oncommandupdate ondialogaccept ondialogcancel ondialogclosure ondialogextra1 ondialogextra2 ondialoghelp onerror onerrorcommand onextra1 onextra2 oninput onload onnewtab onp...

command - Archive of obsolete content
the command event is executed when an element is activated.
... cases, there are several ways to activate an element.

openPopup - Archive of obsolete content
s open, menus opened earlier do not highlight or execute their items.
...d earlier do not highlight or execute their items.

Floating Panels - Archive of obsolete content
reen.
...cation is made active, and become visible again when the xul application is made active.

Popup Guide - Archive of obsolete content
e list of commands.
...appears again.

currentIndex - Archive of obsolete content
cannot rely on this property to change or determine a tree selection, except for trees with seltype="single".
...election.

textbox (Toolkit autocomplete) - Archive of obsolete content
the value of the maxrows attribute.
... type type: string set to the value autocomplete to have an autocomplete textbox.

Textbox (XPFE autocomplete) - Archive of obsolete content
e minresultsforpopup (or minresultsforpopup) attribute.
...te.

The Joy of XUL - Archive of obsolete content
operating system.
...one release builds.

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
xt section in this tutorial contains examples of code that you can use to make your button do something useful.
...created.

Tree Widget Changes - Archive of obsolete content
problems with the css) treechildren::-moz-tree-checkbox(checked) { /* css for checked cells */ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } in addition, checkmark columns support editing: <tree editable="true"> <treecols> <treecol type="checkbox" editable="true"> ...
... { /* css for checked cells */ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } in addition, checkmark columns support editing: <tree editable="true"> <treecols> <treecol type="checkbox" editable="true"> ...

Broadcasters and Observers - Archive of obsolete content
caster id="colorchanger" style="color: black"/> </broadcasterset> <button label="test"> <observes element="colorchanger" attribute="style" onbroadcast="alert('color changed');"/> </button> <button label="observer" oncommand="document.getelementbyid('colorchanger').setattribute('style','color: red');" /> two buttons have been created, one labeled test and the other labeled observer.
...<button label="test"> <observes element="colorchanger" attribute="style" onbroadcast="alert('color changed');"/> </button> <button label="observer" oncommand="document.getelementbyid('colorchanger').setattribute('style','color: red');" /> two buttons have been created, one labeled test and the other labeled observer.

Content Panels - Archive of obsolete content
in this section, we'll look at how to add panels that can display html pages or other xul files.
... file.

More Tree Features - Archive of obsolete content
rows which are declared with the treerow element or a set of rows which are declared with the treechildren element.
... <treerow> <treecell label="jerry" /> <treecell label="hodge" /> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </tree> this has created a hierarchical tree.

Simple Menu Bars - Archive of obsolete content
f menus.
...bel="redo"/> </menupopup> </menu> </menubar> </toolbox> here, a simple menu bar is created using the menubar element.

Skinning XUL Files by Hand - Archive of obsolete content
efinition, the selector "toolbar.nav-bar" is used to define style information for all xul toolbars of the class "nav-bar." unlike an id -- which is also often used as a selector but must be unique -- a class attribute can be used on multiple xul elements you want to pick up the specified style information.
...s used to define style information for all xul toolbars of the class "nav-bar." unlike an id -- which is also often used as a selector but must be unique -- a class attribute can be used on multiple xul elements you want to pick up the specified style information.

Tree Box Objects - Archive of obsolete content
notice the label change between 'text' and 'cell'.
...e 'cell' indicates the area around the text, for example, the margin on the left side where the open and close twisties are normally drawn.

Trees - Archive of obsolete content
the next section.
...g the label attribute.

Trees and Templates - Archive of obsolete content
ee.
...u can write a script to sort the data.

XPCOM Examples - Archive of obsolete content
scape.com/nc-rdf#name"/> </rule> </template> </menupopup> </menu> </menubar> </toolbox> a window menu will be created with a list of all the open windows.
...ource, which can be used to get the window given a resource.

browser - Archive of obsolete content
lable directly on the element itself, such as goback and goforward.
...oad a url into the document, with the specified load flags, the given referrer, character set, and post data.

menu - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element, much like a button, that is placed on a menubar.
... only.

menulist - Archive of obsolete content
ty which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.
...tabindex type: integer gets and sets the value of the tabindex attribute.

popupset - Archive of obsolete content
thods | related ] a container for menupopup, panel and tooltip elements.
... , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...

richlistbox - Archive of obsolete content
election, scrolltoindex, selectall, selectitem, selectitemrange, timedselect, toggleitemselection examples <richlistbox> <richlistitem> <description>a xul description!</description> </richlistitem> <richlistitem> <button label="a xul button"/> </richlistitem> </richlistbox> the richlistbox element contains multiple richlistitem elements, which can contain any content.
...abindex type: integer gets and sets the value of the tabindex attribute.

tab - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single tab which should be placed inside a tabs element.
...abindex type: integer gets and sets the value of the tabindex attribute.

tabbox - Archive of obsolete content
, selectedtab, tabs, tabpanels examples <tabbox id="mytablist" selectedindex="2"> <tabs> <tab label="a first tab"/> <tab label="second tab"/> <tab label="another tab"/> <tab label="last tab"/> </tabs> <tabpanels> <tabpanel><!-- tabpanel first elements go here --></tabpanel> <tabpanel><!-- tabpanel second elements go here --></tabpanel> <tabpanel><button label="click me"/></tabpanel> <tabpanel><!-- tabpanel fourth elements go here --></tabpanel> </tabpanels> </tabbox> attributes eventnode type: one of the values below indicates where keyboard navigation events are listened to.
...rently selected tab, which will always be one of the tab elements in the tabs element.

toolbarbutton - Archive of obsolete content
string the type of button.
... gets and sets the value of the open attribute.

toolbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container for toolbars.
...ay of external toolbars; that is, toolbar elements that should be considered to be members of this toolbox, even if they are not actually children of the toolbox.

tree - Archive of obsolete content
set to false, a drop-down will appear in the upper right corner of the tree, which the user may use to show and hide columns.
...plements nsitreeview to this property.

treecell - Archive of obsolete content
r the cell using the label attribute.
... , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...

treeitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a treeitem should be placed inside a treechildren element and should contain treerow elements.
... , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...

XUL Explorer - Archive of obsolete content
e both available to help debug problems.
...toggled with the editor.

nsIContentPolicy - Archive of obsolete content
be loaded (the actual load triggered by the refresh will go through shouldload() as expected).
...nline}} the location of the resource that initiated this load request; can be null if inapplicable.

Extentsions FAQ - Archive of obsolete content
equest for a thunderbird extension that can automatically detect the default domain when composing e-mails via autodetect.
...imic the functionality of ie in this respect?

NPEvent - Archive of obsolete content
window being activate or deactivated.
...er clicks the instance or presses the tab key to focus the instance.

NPP_URLNotify - Archive of obsolete content
void* notifydata); parameters the function has the following parameters: instance pointer to the current plug-in instance.
...() after the completion of a npn_geturlnotify() or npn_posturlnotify() request to inform the plug-in that the request was completed and supply a reason code for the completion.

Plugins - Archive of obsolete content
ferent from extensions, which modify or enhance the functionality of the browser itself.
...ins, which plug additional search engines in the search bar.

Vulnerabilities - Archive of obsolete content
g the possibility of someone violating the trust assumptions to compromise security.
...ders html content in email messages.

Creating a Skin for Firefox - Archive of obsolete content
r firefox, there are three things you need to know: how to edit images, how to extract zip files, and how to modify css.
...it images, how to extract zip files, and how to modify css.

Using Firebug and jQuery (Screencast) - Archive of obsolete content
note: this screencast is originally from: http://ejohn.org/blog/hacking-digg-w...ug-and-jquery/ this is an adaptation of a presentation that i gave while at mashup camp boston.
...ve while at mashup camp boston.

-ms-filter - Archive of obsolete content
getransform.microsoft.motionblur(strength=50) progid:dximagetransform.microsoft.basicimage(mirror=1)" src="/workshop/samples/author/dhtml/graphics/cone.jpg" height="80px" width="80px" alt="cone"> the following example shows how to use scripting to set the filter on an image.
...="sphere"> <div id="filterto" style="position: absolute; width: 200px; height: 250px; top: 20px; left: 20px; background: white; visibility: hidden;"> </div> </div> <script type="text/javascript"> let filterimg = document.queryselector('#filterfrom'); filterimg.addeventlistener('click', dofilter); function dofilter () { filterfrom.filters.item(0).apply(); // 12 is the dissolve filter.

Troubleshooting XForms Forms - Archive of obsolete content
atest release of the extension.
...submit to a different domain than the form is loaded from, make sure that you have allowed cross-domain submission for that specific "form domain".

XForms Input Element - Archive of obsolete content
ted will 'drop down' a calender widget that the user can also interact with (xhtml/xul).
...e: xsd:integer xsd:nonpositiveinteger xsd:negativeinteger xsd:long xsd:int xsd:short xsd:byte xsd:nonnegativeinteger xsd:unsignedlong xsd:unsignedint xsd:unsignedshort xsd:unsignedbyte xsd:positiveinteger analogous widget is <xul:textbox type="number"/> (will be available in fx 3.0) specific handling of attributes incremental - if "true", the bound instance node will be updated when the user clicks on the up or down spin buttons or directly edits the field and then sets focus elsewhere.

XForms Trigger Element - Archive of obsolete content
r element doesn't interact with the data in the bound node.
...he xforms trigger element can be represented by the following widgets for the specified appearance attribute values: button - default representation (xhtml/xul) link/clickable text - used when appearance = 'minimal' (xhtml only) button displaying a button is the default presentation (xhtml/xul).

Mozilla XForms User Interface - Archive of obsolete content
with the mediatype element to display the image.
... user to initiate actions (see the spec).

The Business Benefits of Web Standards - Archive of obsolete content
sults, web standards pages index and rank properly (where they deserve to) across all search engines.
... coding gymnastics to cope with the vendors of browsers and other user agents.

Windows Media in Netscape - Archive of obsolete content
us, in order to deploy cross-platform code, avoiding syntax that makes use of global namespace is important.
... global namespace is important.

Visual-js game engine - Game development
ownloads http://www.textures4photoshop.com/ female body v3.blend this file has been released by andrescuccaro under the following license: creative commons attribution 3.0 about gui for windows (canvas2d part only) : windows gui application version 1.0 (using visual-js 0.9 lib) important : you will need net 4.5.2 minimum also redistribution pack for c++ how to start project ?
....9 lib) important : you will need net 4.5.2 minimum also redistribution pack for c++ how to start project ?

Index - MDN Web Docs Glossary: Definitions of Web-related terms
rowser renders the first bit of content from the dom, providing the first feedback to the user that the page is actually loading.
...pplication, telephony over ip like skype and conference technologies.

SQL Injection - MDN Web Docs Glossary: Definitions of Web-related terms
base or to retrieve information directly from the database.
...follows: "select count(*) from users where username=' admin ' and password=' passwd123 ' "; if the credentials are correct, then the user is allowed to log in, so it's a very simple (and therefore insecure) mechanism.

Getting started with CSS - Learn web development
d on state the final type of styling we shall take a look at in this tutorial is the ability to style things based on their state.
...hat to a better color?

Web fonts - Learn web development
g the font file(s) and licensing information).
... the required code (and font formats).

The HTML5 input types - Learn web development
eate search boxes on pages and apps.
...javascript plugins and libraries for some suggestions).

Example 4 - Learn web development
); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); }); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(func...
...) { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.previouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, index) { option.addeventlistener('click', function (event) { updatevalue(select, index); }); }); select.addeventlistener('keyup', function (event) { var length = optionlist.length, index = getindex(select); if (event.keycode === 27) { deactivateselect(select); } if (event.keycode === 40 && index < length - 1) { index++; } if (event.keycode === 38 && index > 0) { index--; } ...

UI pseudo-classes - Learn web development
hat pseudo-classes do we have available?
...ge then pops up in place of "required".

Publishing your website - Learn web development
o easily publish your site via github pages.
... address.

Images in HTML - Learn web development
98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
... 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...

Making decisions in your code — conditionals - Learn web development
: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solutio...
...: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solutio...

Drawing graphics - Learn web development
with user input (like mouse movement, in this case).
...vent) ?

Silly story generator - Learn web development
ore the second set of three strings inside an array called inserty.
...et of three strings inside an array called insertz.