toolbarbutton - Archive of obsolete content
s all toolbar functionality should be duplicated elsewhere in the application where possible, provide keyboard alternatives. where possible, duplicate functionality in a menu item or context menu. where not possible, make all toolbarbuttons focusable by -moz-user-focus: normal. ...
...in a menu item or context menu. where not possible, make all toolbarbuttons focusable by -moz-user-focus: normal. ...
..." group="radiogroup"/> <toolbarbutton accesskey="3" label="radio 3" type="radio" group="radiogroup"/> </toolbar> attributes accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. autocheck type: boolean if this attribute is true or left out, the checked state of the button will be switched each time the button is pressed. if this attribute is false, the checked state must be adjusted manually. when autocheck is true, the button type should be "checkbox" or "radio". checkstate type: integer, values 0, 1, or 2 this attribute may be used to create three state buttons, numbered 0, 1 and 2. when in state 0 or 1, pressing the button will switc...
...And 5 more matches

Componentizing our React app - Learn web development
default function todo() { return ( ); } this is ok so far, but our component has to return something! ...
...ce every occurrence of eat with your name prop. remember: when you're in the middle of a jsx expression, you use curly braces to inject the value of a variable. ...
...ton type="button" classname="btn"> edit <span classname="visually-hidden">{props.name}</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">{props.name}</span> </button> </div> </li> ); } now your browser should show three unique tasks. another problem remains though: they're all still checked by default. is it completed? in our original static list, only eat was checked. once again, we want to reuse most of the ui that makes up a <todo /> component, but change one thing. that's a good job for another prop! give each <todo /> call in app.js a new prop of completed. the first (eat) should have a value of true; the rest should be false: <todo name="eat" completed={true} /> <todo n...
...And 5 more matches

nsIPromptService
n wstring acheckmsg, inout boolean acheckstate ); parameters aparent the parent window for the dialog. if set to null the parent window will be nsiwindowwatcher.activewindow. adialogtitle text to appear in the title of the dialog. atext text to appear in the body of the dialog. acheckmsg text to appear with the checkbox. acheckstate contains the initial checked state of the checkbox when this method is called and the final checked state after this method returns. if you call this method from javascript you need to wrap this argument in an object with its 'value' property set to a boolean (or use an empty object). see also the alertcheck_example. confirm() shows a dialog with ok and cancel buttons. boolean confirm( in nsidomwindow aparent, in wstrin...
...n wstring acheckmsg, inout boolean acheckstate ); parameters aparent the parent window for the dialog. if set to null the parent window will be nsiwindowwatcher.activewindow. adialogtitle text to appear in the title of the dialog. atext text to appear in the body of the dialog. acheckmsg text to appear with the checkbox. acheckstate contains the initial checked state of the checkbox when this method is called and the final checked state after this method returns. if you call this method from javascript you need to wrap this argument in an object with its 'value' property set to a boolean (or use an empty object). return value true for ok, false for cancel confirmex() puts up a dialog with up to 3 buttons and an optional, labeled checkbox. the but...
...n abuttonflags abutton1title caption displayed for button 1 if(button_title_is_string*button_title_pos_1) flags are set in abuttonflags abutton2title caption displayed for button 2 if(button_title_is_string*button_title_pos_2) flags are set in abuttonflags acheckmsg text to appear with the checkbox. null if no checkbox is displayed. acheckstate contains the initial checked state of the checkbox when this method is called and the final checked state after this method returns. if you call this method from javascript you need to wrap this argument in an object with its 'value' property set to a boolean (or use an empty object). return value index of the button pressed prompt() shows a dialog with an edit field and an optional, labeled checkbox. see also the pro...
...And 5 more matches

Index - Web APIs
document.popupnode api, dom, deprecated, property, reference when a popup attached via the popup or context attributes is opened, the xul document's popupnode property is set to the node that was clicked on. this will be the target of the mouse event that activated the popup. if the popup was opened via the keyboard, the popup node may be set to null. typically, this property will be checked during a popupshowing event handler for a context menu to initialize the menu based on the context. 950 document.preferredstylesheetset api, cssom, dom, document, property, reference, stylesheets the preferredstylesheetset property returns the preferred style sheet set as set by the page author. 951 document.querycommandenabled() css, document, method, referenc...
... of files. when a directory is selected, the directory and its entire hierarchy of contents are included in the set of selected items. the selected file system entries can be obtained using the webkitentries property. 1749 htmlinputelement: invalid event constraint validation, event, forms, reference, events, invalid the invalid event fires when a submittable element has been checked for validity and doesn't satisfy its constraints. 1750 htmlinputelement: search event api, event, htmlinputelement, non-standard, reference, search, web the search event is fired when a search is initiated usinng an <input> element of type="search". 1751 htmlisindexelement api, html dom, interface, obsolete, reference the htmlisindexelement interface prov...
... 2187 intersectionobserver.thresholds api, intersection observer, intersection observer api, intersectionobserver, needsexample, property, reference the intersectionobserver interface's read-only thresholds property returns the list of intersection thresholds that w...
...And 5 more matches

More Menu Features - Archive of obsolete content
remember that you can put any element inside a menupopup. we've looked at placing menuitems and menuseparators in menupopups. however, you can create submenus by simply placing the menu element inside the menupopup element. this works because the menu element is valid even when it isn't directly placed inside a menu bar. ...
...ommand and a feature that is disabled has no check. when the user selects the menu, the check state is switched. you may also want to create radio buttons on menu items. the checks are created in a similar way to the checkbox and radio elements. this involves the use of two attributes: type to indicate the type of check, and name to group commands together. ...
...type to indicate the type of check, and name to group commands together. the example below creates a menu with a checked item. example 2 : source view <toolbox> <menubar id="options-menubar"> <menu id="options_menu" label="options"> <menupopup> <menuitem id="backups" label="make backups" type="checkbox"/> <menuitem id="email" label="email administrator" type="checkbox" checked="true"/> </menupopup> </menu> </menubar> </toolbox> the type attribute has been added which is used to make the menu item checkable. by setting its value to checkbox, the menu item can be checked on and off by selecting the menu item. menu with radios in addition to standard checks, you can create the radio style of checks by setting the type to a value of radio. a radio check is use...
...And 4 more matches

menuitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single choice in a menupopup element. it acts much like a button but it is rendered on a menu. more information is available in the xul tutorial. ...
...type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. allowevents type: boolean if true, events are passed to children of the element. otherwise, events are passed to the element only. autocheck type: boolean if this attribute is true or left out, the checked state of the button will be switched each time the button is pressed. if this attribute is false, the checked state must be adjusted manually. when autocheck is true, the button type should be "checkbox" or "radio". checked type: boolean indicates whether the element is checked or not. use hasattribute() to determine whether this attribute is set instead of getattribute(). for buttons, ...
...ked state must be adjusted manually. when autocheck is true, the button type should be "checkbox" or "radio". checked type: boolean indicates whether the element is checked or not. use hasattribute() to determine whether this attribute is set instead of getattribute(). for buttons, the type attribute must be set to checkbox or radio for this attribute to have any effect. note: if the checked attribute is set to true, and you persist its value via the persist attribute, mozilla will fail to persist its value when the menuitem is unchecked because of bug 15232. a workaround is to set the autocheck attribute to false, then programmatically set the checked attribute when the user selects the item, and set it to false instead of removing the attribute (i.e. do menuitem.setattribute("check...
...And 4 more matches

Creating our first Vue component - Learn web development
the template section (this will change when vue 3 comes out). we'll use a <div> for that root element. add an empty <div> inside your component template now. inside that <div>, let's add a checkbox and a corresponding label. add an id to the checkbox, and a for attribute mapping the checkbox to the label, as shown below. <template> <div> <input type="checkbox" id="todo-item" checked="false" /> <label for="todo-item">my todo item</label> </div> </template> using todoitem inside our app this is all fine, but we haven’t added the component to our app yet, so there’s no way to test it and see if everything is working. let’s add it now. open up app.vue again. at the top of your <script> tag, add the following to import your todoitem component: impo...
...hich lets us print the result of javascript expressions defined in our class, inside our template, including values and methods. it’s important to know that content inside {{}} is displayed as text and not html. in this case, we’re printing the value of the label prop. your component’s template section should now look like this: <template> <div> <input type="checkbox" id="todo-item" checked="false" /> <label for="todo-item">{{label}}</label> </div> </template> go back to your browser and you'll see the todo item rendered as before, but without a label (oh no!). go to your browser's devtools and you’ll see a warning along these lines in the console: [vue warn]: missing required prop: "label" found in ---> <todoitem> at src/components/todoitem.vue <app> at src/app.v...
...to the <to-do-item></to-do-item> call in your app component, you should see it update. this is great. we have a checkbox, with an updatable label. however, we're currently not doing anything with the "done" prop — we can check the checkboxes in the ui, but nowhere in the app are we recording whether a todo item is actually done. to achieve this, we want to bind the component's done prop to the checked attribute on the <input> element, so that it can serve as a record of whether the checkbox is checked or not. however, it's important that props serve as one-way data binding — a component should never alter the value of its own props. there are a lot of reasons for this. in part, components editing props can make debugging a challenge. if a value is passed to multiple children, it could be har...
...And 4 more matches

font - CSS: Cascading Style Sheets
lic large serif } /* use the same font as the status bar of the window */ p { font: status-bar } live sample html <p> change the radio buttons below to see the generated shorthand and it's effect. ...
...value="italic" onchange="setcss()"> <label for="font-style-italic">italic</label><br/> <input type="radio" id="font-style-oblique" name="font_style" value="oblique" onchange="setcss()"> <label for="font-style-oblique">oblique</label> </div> <div class="setpropcont"> font-variant<br> <input type="radio" id="font-variant-none" name="font_variant" checked="" value=" " onchange="setcss()"> <label for="font-variant-none">none</label><br/> <input type="radio" id="font-variant-normal" name="font_variant" value="normal" onchange="setcss()"> <label for="font-variant-normal">normal</label><br/> <input type="radio" id="font-variant-small-caps" name="font_variant" value="small-caps" onchange="setcss()"> <label for="font-variant-smal...
...me="font_variant" value="small-caps" onchange="setcss()"> <label for="font-variant-small-caps">small-caps</label> </div> <div class="setpropcont"> font-weight<br/> <input type="radio" id="font-weight-none" name="font_weight" value="" onchange="setcss()"> <label for="font-weight-none">none</label><br/> <input type="radio" id="font-weight-normal" checked="" name="font_weight" value="400" onchange="setcss()"> <label for="font-weight-normal">normal</label><br/> <input type="radio" id="font-weight-bold" name="font_weight" value="700" onchange="setcss()"> <label for="font-weight-bold">bold</label> </div> <div class="setpropcont"> font-size<br/> <input type="radio" id="font-size-12px" name="font_siz...
...And 4 more matches

button - Archive of obsolete content
s | methods | related ] a button that can be pressed by the user. event handlers can be used to trap mouse, keyboard and other events. it is typically rendered as a grey outset rectangle. you can specify the label of the button using the label attribute or by placing content inside the button. more information is available in the xul tutorial. ...
...rey outset rectangle. you can specify the label of the button using the label attribute or by placing content inside the button. more information is available in the xul tutorial. attributes accesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, icon, image, label, open, orient, tabindex, type properties accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <button label="press me" oncommand="alert('you pressed me!');"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. au...
... orient, tabindex, type examples <button label="press me" oncommand="alert('you pressed me!');"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. autocheck type: boolean if this attribute is true or left out, the checked state of the button will be switched each time the button is pressed. if this attribute is false, the checked state must be adjusted manually. when autocheck is true, the button type should be "checkbox" or "radio". checkstate type: integer, values 0, 1, or 2 this attribute may be used to create three state buttons, numbered 0, 1 and 2. when in state 0 or 1, pressing the button will swit...
...And 3 more matches

Accessibility API cross-reference
an interesting problem is that mozilla, safari/khtml, opera, staroffice and other apps are cross-platform, but there is currently no cross-platform accessibility api. ...
...tion for some cross-platform accessibility api of the future could be done through sockets. these tables describe how various accessibility apis define possible roles of an object, and states. all accessibility apis to date define a list of possible object roles, or general types, such as button, menu item, text, etc. they also define a list of possible object states, such as focused, read-only, checked, etc. this table is the start of a cross-reference, so we can spot the differences and similarities in the apis. aria is a standard developed as part of the web accessibility initiative, which uses markup syntax quite familiar to users of html, xml, sgml and others. the roles it specifies have already informed the 'semantic elements' of html5 (such as main and footer), but there is not a one-to-...
...pp's title bar menubar menu_bar menu_bar menubar a menu item menuitem menu_item menu_item menuitem a menuitem with a checkable state whose possible values are true, false, or mixed. menuitemcheckbox a checkable menuitem in a set of elements with the same role, only one of which can be checked at a time. menuitemradio any menu other than the menu bar java: menu is for pull-downs, popup_menu for all others menupopup popup_menu, menu popup_menu, menu menu a collection of navigational elements (usually links) for navigating the document or related documents. navigation <nav> if it's a...
...And 3 more matches

jspage - Archive of obsolete content
++){var d=document.id(f[c],!b.cash);if(b.ddup){if(g[d.uid]){continue;}g[d.uid]=true; }if(d){e.push(d);}}f=e;}return(b.cash)?$extend(f,this):f;}});elements.implement({filter:function(a,b){if(!a){return this;}return new elements(array.filter(this,(typeof a=="string")?function(c){return c.match(a); }:a,b));}});document.implement({newelement:function(a,b){if(browser.engine.trident&&b){["name","type","checked"].each(function(c){if(!b[c]){return;}a+=" "+c+'="'+b[c]+'"'; if(c!="checked"){delete b[c];}});a="<"+a+">";}return document.id(this.createelement(a)).set(b);},newtextnode:function(a){return this.createtextnode(a); },getdocument:function(){return this;},getwindow:function(){return this.window;},id:(function(){var a={string:function(d,c,b){d=b.getelementbyid(d);return(d)?a.element(d,c):null; },eleme...
...etwindow:function(){return this;}});native.implement([element,document],{getelement:function(a,b){return document.id(this.getelements(a,true)[0]||null,b); },getelements:function(a,d){a=a.split(",");var c=[];var b=(a.length>1);a.each(function(e){var f=this.getelementsbytagname(e.trim());(b)?c.extend(f):c=f; },this);return new elements(c,{ddup:b,cash:!d});}});(function(){var h={},f={};var i={input:"checked",option:"selected",textarea:(browser.engine.webkit&&browser.engine.version<420)?"innerhtml":"value"}; var c=function(l){return(f[l]||(f[l]={}));};var g=function(n,l){if(!n){return;}var m=n.uid;if(browser.engine.trident){if(n.clearattributes){var q=l&&n.clonenode(false); n.clearattributes();if(q){n.mergeattributes(q);}}else{if(n.removeevents){n.removeevents();}}if((/object/i).test(n.tagname)){for(...
....nodetype==1&&(!m||element.match(o,m))){if(!p){return document.id(o,r); }q.push(o);}o=o[l];}return(p)?new elements(q,{ddup:false,cash:!r}):null;};var e={html:"innerhtml","class":"classname","for":"htmlfor",defaultvalue:"defaultvalue",text:(browser.engine.trident||(browser.engine.webkit&&browser.engine.version<420))?"innertext":"textcontent"}; var b=["compact","nowrap","ismap","declare","noshade","checked","disabled","readonly","multiple","selected","noresize","defer"];var k=["value","type","defaultvalue","accesskey","cellpadding","cellspacing","colspan","frameborder","maxlength","readonly","rowspan","tabindex","usemap"]; b=b.associate(b);hash.extend(e,b);hash.extend(e,k.associate(k.map(string.tolowercase)));var a={before:function(m,l){if(l.parentnode){l.parentnode.insertbefore(m,l); }},after:func...
...And 2 more matches

Index - Archive of obsolete content
57 close xul attributes, xul reference no summar...
... 608 popupevents xul, xul popup guide there are several events related to popups and menus. 609 popupkeys xul, xul popup guide when using a menupopup element, a keyboard listener is attached to the window that will handle keypresses for the menu. this allows items within the menu to be navigated with the cursor keys. the following table lists the keys that are checked, and what the menu keyboard listener does in response: 610 positioning xul, xul popup guide there are several ways in which the location of a popup on screen may be controlled. 611 special per-platform menu considerations beginner, guide, xul, xul popup guide for many menu commands, convention dictates where these items will be placed. for instance, the e...
... 635 canadvance xul properties, xul reference no summary! 636 cangoback xul properties, xul reference no summary! 637 cangoforward xul properties, xul reference no summary! 638 canrewind xul properties, xul reference no summary! 639 checkstate xul properties, xul reference no summary! 640 checked xul properties, xul reference no summary! 641 child xul properties, xul reference no summary! 642 children xul properties, xul reference no summary! 643 classname xul properties, xul reference no summary! 644 clickselectsall xul properties, xul reference no summary! 645 collapsed xul prope...
...And 2 more matches

Using the radio role - Accessibility
ote: opinons may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: example from the basic form hints mdn page. ...
...handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: example from the basic form hints mdn page. ...
...ons and therefore not normative. examples example 1: example from the basic form hints mdn page. ...
...And 2 more matches

Box-shadow generator - CSS: Cascading Style Sheets
und-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 3px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: center left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } .ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b4a; } /* * box shadow generator tool */ body { max-width: 1000px; height: 800px; margin: 20px auto 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -web...
...e-yellow.png"); } #layer_menu .button:hover .delete { display: block; } /* * active element styling */ #layer_menu [data-active='subject'] { color: #fff; background-color: #379b4a; border: 1px solid #379b4a; } /* checkbox */ #layer_menu .ui-checkbox > label { height: 15px; line-height: 17px; font-weight: normal; width: 46px; margin: 0 5px 0 0; } #layer_menu .ui-checkbox > input:checked + label { display: none; } /******************************************************************************/ /******************************************************************************/ /* * preview area */ #preview_zone { width: 82%; float: left; } #preview { width: 100%; height: 400px; border: 1px solid #ccc; border-radius: 3px; text-align: center; -moz-box-sizing: border-b...
...bute('data-topic'); var state = node.getattribute('data-state'); var name = node.getattribute('data-label'); var align = node.getattribute('data-text-on'); state = (state === "true"); var checkbox = document.createelement("input"); var label = document.createelement("label"); var id = 'checkbox-' + topic; checkbox.id = id; checkbox.setattribute('type', 'checkbox'); checkbox.checked = state; label.setattribute('for', id); if (name) { label.classname = 'text'; if (align) label.classname += ' ' + align; label.textcontent = name; } node.appendchild(checkbox); node.appendchild(label); this.node = node; this.topic = topic; this.checkbox = checkbox; checkbox.addeventlistener('change', function(e) { notify.call(this); }.bind(this)); button...
...And 2 more matches

Adding menus and submenus - Archive of obsolete content
llomenu.accesskey;" insertafter="javascriptconsole,devtoolsseparator"> <menupopup> <!-- your menuitem goes here. --> </menupopup> </menu> </menupopup> now let's look at some specialized types of menu items. menu types checkbox menu items you can make a menuitem "checkable" to allow the user to enable/disable options using the menu. we use two attributes for this: type and checked. ...
...r"> <menupopup> <!-- your menuitem goes here. --> </menupopup> </menu> </menupopup> now let's look at some specialized types of menu items. menu types checkbox menu items you can make a menuitem "checkable" to allow the user to enable/disable options using the menu. we use two attributes for this: type and checked. the type attribute must be set to "checkbox". you can set the checked attribute to "true" to check it by default. the item's checked state changes when the user clicks on it. an example of one such item is the view > status bar item in the main firefox menu. radio menu items if you need to have a set of menuitem elements where only one of them has to be checked at any given moment, you should set the type to "radio". the name attribute is used to identify the it...
... to have a set of menuitem elements where only one of them has to be checked at any given moment, you should set the type to "radio". the name attribute is used to identify the items that belong to the radio group. <menupopup oncommand="xulschoolchrome.hw.greetingdialog.greeting(event);"> <menuitem type="radio" name="xulschoolhello-greeting-radio" label="&xulschoolhello.greet.short.label;" checked="true" /> <menuitem type="radio" name="xulschoolhello-greeting-radio" label="&xulschoolhello.greet.medium.label;" /> <menuitem type="radio" name="xulschoolhello-greeting-radio" label="&xulschoolhello.greet.long.label;" /> </menupopup> this is a modified version of the 3 greeting menus. it is now implemented as a radio menu where you pick one of the 3 available choices. the first one...
...ue" /> <menuitem type="radio" name="xulschoolhello-greeting-radio" label="&xulschoolhello.greet.medium.label;" /> <menuitem type="radio" name="xulschoolhello-greeting-radio" label="&xulschoolhello.greet.long.label;" /> </menupopup> this is a modified version of the 3 greeting menus. it is now implemented as a radio menu where you pick one of the 3 available choices. the first one is checked by default. the oncommand attribute is set on the menupopup to avoid code duplication, since now the 3 items call the same function. another example of a menu like this is the view > sidebars menu. only one sidebar is visible at any given moment, and you can pick from several. menus with images to add an icon to a menu or menuitem, set its class to "menu-iconic" or "menuitem-iconic" respective...

Anonymous Content - Archive of obsolete content
bytagname) will only see nodes that are in the same scope. methods invoked on the document (e.g., getelementbyid) only see nodes that are at the document-level scope. content generation rules for generation whenever bindings are attached to an element, anonymous content will potentially be generated or destroyed. when a new binding is attached, the bindings in its explicit 'inherits' chain are checked to see if any have anonymous content templates. the most derived binding in the chain with a template is the one used to determine if anonymous content should be generated. anonymous content is only generated from a template if there are insertion points defined within the template for all of the explicit content found underneath the bound element at the time the check for generation is made. if...
... the first encountered with a selector whose node set matches the element when doing a depth-first walk of the content template. note that children elements are never cloned when content is generated from a template. handling dom changes insertion points continuing to be used as elements are inserted or removed from the dom. whenever an element is inserted or appended, all insertion points are checked following all the same rules that applied when first placing explicit children during anonymous content generation. if no insertion point is found for the newly-inserted child, then the binding is no longer a fit for the bound element, and all anonymous content will be destroyed. whenever an element is removed, it simply disappears from its insertion point along with all anonymous content that w...
...original anonymous content responsible for the event can be obtained from a new field of the event object: originaltarget. the action taken (retarget vs. stop) is specific to the event type. in general, ui events are retargeted and mutation events are stopped. exceptions to the rule are noted below. focus and blur events when a focus or blur event crosses a scope boundary, the bound element is checked to see if it is focusable (i.e., if the user agent would normally fire a focus or blur event on the element). if the bound element is focusable, then the event is retargeted. if not, then the event is stopped. if anonymous content underneath a focusable bound element blurs and anonymous content also underneath the bound element takes focus, then the blur and focus events are both stopped. as far ...
...iple bindings attached to the same element, the sheets are walked from the base binding down to the most derived binding. bindings can fine-tune the control of the stylesheet scoping with the inheritstyle attribute, which indicates whether or not author sheets defined at outer scopes affect the anonymous content generated by the binding. for the primary generating binding only, this attribute is checked to see if any author sheets at outer levels of scoping should be applied to the anonymous content generated by the bindings attached to the bound element. if this attribute is set, the rules specified in any author sheets at outer scopes are not walked. by default, stylesheets specified in bindings files are applied only to the bound element and to anonymous content generated by bindings attached...

checkbox - Archive of obsolete content
lated ] an element that can be turned on and off. this is most commonly rendered as a box when the element is off and a box with a check when the element is on. the user can switch the state of the check box by selecting it with the mouse. a label, specified with the label attribute, may be added beside the check box. more information is available in the xul tutorial. attributes accesskey, checked, command, crop, disabled, src, label, preference, tabindex properties accesskey, accessibletype, checked, command, crop, disabled, src, label, tabindex examples <checkbox label="enable javascript" checked="true"/> <checkbox label="enable java" checked="false"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key. this shoul...
... use hasattribute() to determine whether this attribute is set instead of getattribute(). for buttons, the type attribute must be set to checkbox or radio for this attribute to have any effect. command type: id set to the id of a command element that is being observed by the element. ...
... use hasattribute() to determine whether this attribute is set instead of getattribute(). for buttons, the type attribute must be set to checkbox or radio for this attribute to have any effect. command type: id set to the id of a command element that is being observed by the element. ...
...b order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. properties accesskey type: character gets and sets the value of the accesskey attribute. accessibletype type: integer a value indicating the type of accessibility object for the element. checked type: boolean gets and sets the value of the checked attribute. command type: element id gets and sets the value of the command attribute. crop type: string gets and sets the value of the crop attribute. disabled type: boolean gets and sets the value of the disabled attribute. src type: url gets and sets the value of the...

listitem - Archive of obsolete content
| attributes | properties | methods | related ] a single row in a listbox. the text of the listitem is specified either using listcell elements, or by placing a label attribute directly on the listitem element. by default it contains a single listcell element of type and class appropriate to that of the listitem. more information is available in the xul tutorial. ...
...l elements, or by placing a label attribute directly on the listitem element. by default it contains a single listcell element of type and class appropriate to that of the listitem. more information is available in the xul tutorial. ...
... examples <listbox id="thelist"> <listitem label="ruby"/> <listitem label="emerald"/> <listitem label="sapphire" selected="true"/> <listitem label="diamond"/> </listbox> attributes accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. checked type: boolean indicates whether the element is checked or not. use hasattribute() to determine whether this attribute is set instead of getattribute(). for buttons, the type attribute must be set to checkbox or radio for this attribute to have any effect. command type: id set to the id of a command element that is being observed by the element. crop type: one of th...
...ng the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accesskey type: character gets and sets the value of the accesskey attribute. accessible type: nsiaccessible returns the accessibility object for the element. checked type: boolean gets and sets the value of the checked attribute. control type: element id gets and sets the value of the control attribute. crop type: string gets and sets the value of the crop attribute. current type: boolean gets and sets the value of the current attribute. disabled type: boolean gets and s...

Theme changes in Firefox 2 - Archive of obsolete content
firefox 1.5 themes are no longer used in firefox 2 and should be removed from your theme: #bookmarks-button:active #copy-button:active #cut-button:active #downloads-button:active #forward-button[buttondown="true"] #history-button:active #home-button:active #mail-button #mail-button:active #mail-button[disabled="true"] #mail-button[open="true"] #new-tab-button:active #new-tab-button[checked="true"] #new-window-button:active #new-window-button[checked="true"] #paste-button:active #print-button:active #reload-button:active #stop-button:active .messagebutton .messageimage .messagetext browsermessage toolbar[iconsize="small"] #bookmarks-button:active toolbar[iconsize="small"] #copy-button:active toolbar[iconsize="small"] #cut-button:active toolbar[iconsize="small"] #downlo...
...n:hover:active .toolbarbutton-menubutton-dropmarker #back-button[buttondown="true"] > .toolbarbutton-menubutton-dropmarker #back-button[buttonover="true"] #back-button[buttonover="true"] > .toolbarbutton-menubutton-dropmarker #back-button[disabled="true"] .toolbarbutton-menubutton-dropmarker #back-button[open="true"] #bookmarks-button:hover #bookmarks-button:hover:active #bookmarks-button[checked="true"] #copy-button:hover #copy-button:hover:active #cut-button:hover #cut-button:hover:active #downloads-button:hover #downloads-button:hover:active #feed-button[chromedir="rtl"][feeds]:active #feed-button[chromedir="rtl"][feeds]:hover #feed-button[feeds]:active #feed-button[feeds]:hover #forward-button .toolbarbutton-menubutton-dropmarker #forward-button:hover #forward-button:hove...
...ubutton-dropmarker #forward-button[buttondown="true"] > .toolbarbutton-menubutton-dropmarker #forward-button[buttonover="true"] #forward-button[buttonover="true"] > .toolbarbutton-menubutton-dropmarker #forward-button[disabled="true"] .toolbarbutton-menubutton-dropmarker #go-button:hover #go-button[chromedir="rtl"] #history-button:hover:active #history-button:hover:active #history-button[checked="true"] #home-button:hover #home-button:hover:active #new-tab-button:hover #new-tab-button:hover:active #new-window-button:hover #new-window-button:hover:active #paste-button:hover #paste-button:hover:active #print-button:hover #print-button:hover:active #reload-button:hover #reload-button:hover:active #searchbar[empty="true"] .searchbar-textbox #stop-button:hover #stop-button:hove...
...s the following styles are no longer used in firefox 2 and should be removed from your theme: #foundlist #statusbar-updates .updatecategorybox .updatecategorycontent .updatecategoryicon .updatecategorylabel[selected="true"] .updateicon .updateicon[severity="0"] .updateicon[severity="1"] .updateicon[severity="2"] .updateindicator > label .updateindicator[updatecount="0"] .updateitemchecked .updateitemchecked .checkbox-label-box .updateitemfromlabel .updateitemicon .updateitemicon .updateitemname .updateitemnamerow .updateitemurl .warning radio[type="update-type"] radiogroup[type="update-types"] toolbarbutton[type="updates"] toolbarbutton[type="updates"] > .toolbarbutton-icon toolbarbutton[type="updates"][severity="0"] > .toolbarbutton-icon toolbarbutton[type="updates"...

Beginning our React todo list - Learn web development
sname="visually-hidden"> tasks</span> </button> </div> <h2 id="list-heading"> 3 tasks remaining </h2> <ul role="list" classname="todo-list stack-large stack-exception" aria-labelledby="list-heading" > <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">eat</span> </button> <button type="button" classname="btn btn__danger"> delete <span classnam...
...tells assistive technologies that we're treating our list heading as the label that describes the purpose of the list beneath it. making this association gives the list a more informative context, which could help screen reader users better understand the purpose of it. finally, the labels and inputs in our list items have some attributes unique to jsx: <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> the defaultchecked attribute in the <input/ > tag tells react to check this checkbox initially. if we were to use checked, as we would in regular html, react would log some warnings into our browser console relating to handling events on the checkbox, which we want to avoid. don't worry too much about this for now — we w...
...t worry too much about this for now — we will cover this later on when we get to using events. the htmlfor attribute corresponds to the for attribute used in html. we cannot use for as an attribute in jsx because for is a reserved word, so react uses htmlfor instead. notes: to use boolean values (true and false) in jsx attributes, you must enclose them in curly braces. if you write defaultchecked="true", the value of defaultchecked will be "true" — a string literal. remember — this is actually javascript, not html! the aria-pressed attribute used in our earlier code snippet has a value of true because aria-pressed is not a true boolean attribute in the way checked is. implementing our styles paste the following css code into src/index.css so that it replaces what's currently there...
... summary now our todo list app actually looks a bit more like a real app! the problem is: it doesn’t actually do anything. we’ll start fixing that in the next chapter! previous overview: client-side javascript frameworks next in this module introduction to clien...

Dynamic behavior in Svelte: working with variables and props - Learn web development
, rather than adding or removing items at the end, and it's a good practice to always specify one. finally, an :else block can be provided, which will be rendered when the list is empty. let's give it a try. replace the existing <ul> element with the following simplified version to get an idea of how it works: <ul> {#each todos as todo, index (todo.id)} <li> <input type="checkbox" checked={todo.completed}/> {index}. {todo.name} (id: {todo.id}) </li> {:else} nothing to do here! {/each} </ul> go back to the app; you'll see something like this: now we've seen that this is working, let's generate a complete todo item with each loop of the {#each} directive, and inside embed the information from the todos array: id, name, and completed. replace your existing <ul> bl...
...e, and inside embed the information from the todos array: id, name, and completed. ...
... we've turned our static markup into a dynamic template ready to display the tasks from our component's state. great! we are getting there. working with props with a hardcoded list of todos, our todos component is not very useful. to turn our component into a general purpose to-do editor we should allow the parent of this component to pass in the list of to...
... functionality to toggle the task status. svelte has the on:eventname directive for listening to dom events. let's add a handler to the on:click event of the checkbox input to toggle the completed value. update the <input type="checkbox"> element inside src/components/todos.svelte as follows: <input type="checkbox" id="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. at the bottom of the todos.svelte <script> section, add the removetodo() function like so: function removetodo(todo) { todos = todos.filter(t => t.id !== todo.id) } we'll call it via the delete button. update it with a click event, like so: <button type="button" class="btn btn__danger" on:cl...

UpdateListener
pdateavailable(in addon addon) void onupdatefinished(in addon addon, in integer error) methods oncompatibilityupdateavailable() called when the update check found compatibility information for the application and platform version that the update check was being performed for. ...
...teavailable( in addon addon ) parameters addon the addon that was being checked for updates onnocompatibilityupdateavailable() called when the update check found no new compatibility information for the application and platform version that the update check was being performed for. void onnocompatibilityupdateavailable( in addon addon ) parameters addon the addon that was being checked for updates onupdateavailable() called when a new version of an add-on has been found for install. void onupdateavailable( in addon addon, in addoninstall install ) parameters addon the addon that was being checked for updates install an addoninstall for the updated version onnoupdateavailable() called when no new version of an add-on has been found for install. void onnoupdate...
...s been found for install. void onupdateavailable( in addon addon, in addoninstall install ) parameters addon the addon that was being checked for updates install an addoninstall for the updated version onnoupdateavailable() called when no new version of an add-on has been found for install. void onnoupdateavailable( in addon addon ) parameters addon the addon that was being checked for updates onupdatefinished() called when the update check is complete. ...
...the updated version onnoupdateavailable() called when no new version of an add-on has been found for install. void onnoupdateavailable( in addon addon ) parameters addon the addon that was being checked for updates onupdatefinished() called when the update check is complete. ...

Xptcall Porting Status
unixish-x86 versions of this code for gcc 2.7 or 2.8 vs. egcs 1.1. he notes that the vtbl scheme is different. he is hoping that others will help test the changes using these two compilers on the various platforms where this same code is used. bert's details <font color="white">done</font> mac ppc roger lawrence <rogerl@netscape.com>, patrick beard <beard@netscape.com> mac (passing tests and checked in) <font color="white">done</font> solaris sparc roger lawrence <rogerl@netscape.com>, chris mcafee <mcafee@netscape.com> unix this is checked in and working. <font color="white">done</font> solaris sparc v9 (64bit) stuart parmenter <pavlov@netscape.com>, chris seawood <cls@seawood.org> unix this is checked in and (pavlov claims!) working. <font color="white">done</font> os/2 john fai...
... had someone look over this code at bridge.com (the entry point to compaq/gem compiler team) and this code was given the ok. i consider it "done". this code lives in the files where the name includes 'alpha' in the win32 directory. <font color="white">done</font> linux arm stefan hanske<sh990154@mail.uni-greifswald.de> <font color="red">?</font> matthew wilcox <willy@bofh.ai> stefan's code is checked in and he says it is working. <font color="white">done</font> linux sparc anton blanchard <anton@progsoc.uts.edu.au>, roger lawrence <rogerl@netscape.com>, brandon ehle <ehle.3@osu.edu> anton contributed patches to roger's sparc code. anton says it works and passes the tests! (24-aug-1999) brandon writes: i've finished testing xptcall sparc linux on 12 different sparc machines and it check...
...nts in the code are detailed enough to help people attempting a port. <font color="white">done</font> sunos x86 arthur jones <aljones@lbl.gov> <font color="red">?</font> philip pokorny <ppokorny@mindspring.com> the word i hear is that this is working and done <font color="white">done</font> hp-ux thomas wang <wang@cup.hp.com> mike gleeson <mgleeson1@netscape.com> i hear that this code is checked in and working. though, there is some doubt - see bug #17997 <font color="white">done</font> aix ppc jim dunn <jdunn@netscape.com> philip k. warren writes: we have gone through several releases of aix without any problems. <font color="white">done</font> irix jason heirtzler <jasonh@m7.engr.sgi.com> jason has declared this done. jason is no longer working at sgi and will not be maintaining...
...white">done</font> beos x86 duncan wilcox <duncan@be.com> unix (yet another reuse of the linux 86 code!) duncan says this is all working. he did the code for old cfront style 'this' adjustment for others to use too! <font color="white">help!</font> beos ppc - - <font color="white">done</font> compaq tru64 unix (digital unix) steve streeter <streeter@zk3.dec.com> code passes the tests and is checked in. <font color="black">working</font> neutrio x86 jerry l. kirk <jerry.kirk@nexwarecorp.com> patches for xptc*_unixish_x86.cpp checked in. waiting for verification that this is really finished. <font color="black">investigating</font> sco uw7 and osr5 j. kean johnston <jkj@sco.com> evan hunt <evanh@sco.com> recent (feb-2001) email from jkj@sco.com suggests that work will be occuring soon.

HTMLInputElement - Web APIs
e setcustomvalidity method. willvalidate read only boolean: returns whether the element is a candidate for constraint validation. it is false if any conditions bar it from constraint validation, including: its type is hidden, reset, or button; it has a <datalist> ancestor; its disabled property is true. properties that apply only to elements of type checkbox or radio checked boolean: returns / sets the current state of the element when type is checkbox or radio. defaultchecked boolean: returns / sets the default state of a radio button or checkbox as originally specified in html that created this object. indeterminate boolean: returns whether the checkbox or radio button is in indeterminate state. for checkboxes, the effect is that the appe...
... properties that apply only to elements of type image alt string: returns / sets the element's alt attribute, containing alternative text to use when type is image. ...
... boolean: returns / sets the default state of a radio button or checkbox as originally specified in html that created this object. indeterminate boolean: returns whether the checkbox or radio button is in indeterminate state. for checkboxes, the effect is that the appearance of the checkbox is obscured/greyed in some way as to indicate its state is indeterminate (not checked but not unchecked). does not affect the value of the checked attribute, and clicking the checkbox will set the value to false. properties that apply only to elements of type image alt string: returns / sets the element's alt attribute, containing alternative text to use when type is image. height string: returns / sets the element's height attribute, which defines the height of the ...
...(max attribute) value. minlength long: returns / sets the element's minlength attribute, containing the minimum number of characters (in unicode code points) that the value can have. (if you set this to a negative number, an exception will be thrown.) pattern string: returns / sets the element's pattern attribute, containing a regular expression that the control's value is checked against. use the title attribute to describe the pattern to help the user. this attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored. placeholder string: returns / sets the element's placeholder attribute, containing a hint to the user of what can be entered in the control. the placeholder text must not contain carriage ret...

Border-image generator - CSS: Cascading Style Sheets
und-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 2px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: center left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } .ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b4a; } /*************************************************************************************/ /*************************************************************************************/ /* * border image generator tool */ body { width: 100%; margin: 0 auto; padding: 0 0 20px 0; f...
...bute('data-topic'); var state = node.getattribute('data-state'); var name = node.getattribute('data-label'); var align = node.getattribute('data-text-on'); state = (state === "true"); var checkbox = document.createelement("input"); var label = document.createelement("label"); var id = 'checkbox-' + topic; checkbox.id = id; checkbox.setattribute('type', 'checkbox'); checkbox.checked = state; label.setattribute('for', id); if (name) { label.classname = 'text'; if (align) label.classname += ' ' + align; label.textcontent = name; } node.appendchild(checkbox); node.appendchild(label); this.node = node; this.topic = topic; this.checkbox = checkbox; checkbox.addeventlistener('change', function(e) { notify.call(this); }.bind(this)); button...
... this.node = node; this.topic = topic; this.checkbox = checkbox; checkbox.addeventlistener('change', function(e) { notify.call(this); }.bind(this)); buttons[topic] = this; }; var getnode = function getnode(topic) { return buttons[topic].node; }; var setvalue = function setvalue(topic, value) { var obj = buttons[topic]; if (obj === undefined) return; obj.checkbox.checked = value; notify.call(obj); }; var subscribe = function subscribe(topic, callback) { if (subscribers[topic] === undefined) subscribers[topic] = []; subscribers[topic].push(callback); }; var unsubscribe = function unsubscribe(topic, callback) { subscribers[topic].indexof(callback); subscribers[topic].splice(index, 1); }; var notify = function notify() { if (subscribers[this...
...cribers[topic] = []; subscribers[topic].push(callback); }; var unsubscribe = function unsubscribe(topic, callback) { subscribers[topic].indexof(callback); subscribers[topic].splice(index, 1); }; var notify = function notify() { if (subscribers[this.topic] === undefined) return; for (var i = 0; i < subscribers[this.topic].length; i++) subscribers[this.topic][i](this.checkbox.checked); }; var init = function init() { var elem = document.queryselectorall('.ui-checkbox'); var size = elem.length; for (var i = 0; i < size; i++) new checkbox(elem[i]); }; return { init : init, setvalue : setvalue, subscribe : subscribe, unsubscribe : unsubscribe }; })(); window.addeventlistener("load", function() { borderimage.init(); }); var borderimage = (function bord...

Border-radius generator - CSS: Cascading Style Sheets
und-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 3px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: center left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } .ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b4a; } body { max-width: 1000px; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-selec...
...bute('data-topic'); var state = node.getattribute('data-state'); var name = node.getattribute('data-label'); var align = node.getattribute('data-text-on'); state = (state === "true"); var checkbox = document.createelement("input"); var label = document.createelement("label"); var id = 'checkbox-' + topic; checkbox.id = id; checkbox.setattribute('type', 'checkbox'); checkbox.checked = state; label.setattribute('for', id); if (name) { label.classname = 'text'; if (align) label.classname += ' ' + align; label.textcontent = name; } node.appendchild(checkbox); node.appendchild(label); this.node = node; this.topic = topic; this.checkbox = checkbox; checkbox.addeventlistener('change', function(e) { notify.call(this); }.bind(this)); button...
...ndchild(checkbox); node.appendchild(label); this.node = node; this.topic = topic; this.checkbox = checkbox; checkbox.addeventlistener('change', function(e) { notify.call(this); }.bind(this)); buttons[topic] = this; } var getnode = function getnode(topic) { return buttons[topic].node; } var setvalue = function setvalue(topic, value) { try { buttons[topic].checkbox.checked = value; } catch(error) { console.log(error); } } var subscribe = function subscribe(topic, callback) { if (subscribers[topic] === undefined) subscribers[topic] = []; subscribers[topic].push(callback); } var unsubscribe = function unsubscribe(topic, callback) { subscribers[topic].indexof(callback); subscribers[topic].splice(index, 1); } var notify = function notify()...
...allback) { if (subscribers[topic] === undefined) subscribers[topic] = []; subscribers[topic].push(callback); } var unsubscribe = function unsubscribe(topic, callback) { subscribers[topic].indexof(callback); subscribers[topic].splice(index, 1); } var notify = function notify() { for (var i = 0; i < subscribers[this.topic].length; i++) subscribers[this.topic][i](this.checkbox.checked); } var init = function init() { var elem = document.queryselectorall('.ui-checkbox'); var size = elem.length; for (var i = 0; i < size; i++) new checkbox(elem[i]); } return { init : init, setvalue : setvalue, subscribe : subscribe, unsubscribe : unsubscribe } })(); window.addeventlistener("load", function() { borderradius.init(); }); var borderradius = (function bord...

spellcheck - HTML: Hypertext Markup Language
note: the spellcheck attribute is an enumerated one and not a boolean one. ...
... note: the spellcheck attribute is an enumerated one and not a boolean one. this means that the explicit usage of one of the values true or false is mandatory, and that a shorthand like <textarea spellcheck></textarea> is not allowed. ...
... for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it may have the following values: true, which indicates that the element should be, if possible, checked for spelling errors; false, which indicates that the element should not be checked for spelling errors. note: the spellcheck attribute is an enumerated one and not a boolean one. this means that the explicit usage of one of the values true or false is mandatory, and that a shorthand like <textarea spellcheck></textarea> is not allowed. the correct usage is <textarea spellcheck="true"></textarea>. if this attribute is not set, its default value is element-type and browser-d...
...one. this means that the explicit usage of one of the values true or false is mandatory, and that a shorthand like <textarea spellcheck></textarea> is not allowed. the correct usage is <textarea spellcheck="true"></textarea>. if this attribute is not set, its default value is element-type and browser-defined. this default value may also be inherited, which means that the element content will be checked for spelling errors only if its nearest ancestor has a spellcheck state of true. this attribute is merely a hint for the browser: browsers are not required to check for spelling errors. typically non-editable elements are not checked for spelling errors, even if the spellcheck attribute is set to true and the browser supports spellchecking. specifications specification status co...

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
nput elements in html, menuitem elements can operate like checkboxes and radio buttons by setting their type attributes. checkbox adding type="checkbox" to a menuitem element will check that when it is selected, and uncheck it if it is selected again. for an example of menu items with checkboxes, see the view menu in firefox, with items to show or hide the toolbar and sidebar. when one has been checked, then the checked="true" attribute is set. radio button assigning type="radio" to multiple menuitem elements and setting them to have the same name attribute groups them so that selecting one deselects all the others, much like radio buttons in html. for an example of this kind of menu item, see the character encoding submenu of the view menu in firefox. the selected radio button has the select...
...pup id="button-popup"> <menuitem label="item 1"/> <menuitem label="item 2"/> <menuitem label="item 3"/> </menupopup> </toolbar> listing 13: various toolbar buttons figure 9: output of listing 13 - checkbox-type toolbar buttons specifying type="checkbox" results in a button that stays depressed when clicked, and pops up when clicked again. the button in its depressed state has checked="true" set. this is the kind of button used for the history and bookmark buttons that can be used to customize the toolbar. - menu-type toolbar buttons specifying type="menu" and adding a menupop child element (in firefox 3, you can also use the panel element), or setting the popup attribute to reference a popup menu located elsewhere by its id, will display a popup menu when the button is pres...
...element, part of the label will be replaced by an ellipsis (…) if it overflows the width of the parent element. the part of the label that gets cropped can be controlled by setting its value to start, center, or end. you can set the maximum width of the box using the css max-width property. checkboxes the checkbox shown in figure 11 was marked up using the checkbox element. when it is in its checked state, its checked attribute is set to true. <checkbox label="checkbox checked" checked="true"/> <checkbox label="checkbox unchecked" checked="false"/> listing 11: checkboxes in different state figure 11: output from listing 11 radio buttons radio buttons in html are multiple input elements grouped by assigning them all the same name attribute. in xul, this is expressed using a combinatio...

Input Controls - Archive of obsolete content
variations of buttons. the checkbox element is used for options that can be enabled or disabled. radio buttons can be used for a similar purpose when there are a set of them and only one can be selected at once. you can use most of the same attributes on checkboxes and radio buttons as with buttons. the example below shows some simple checkboxes and radio buttons. <checkbox id="case-sensitive" checked="true" label="case sensitive"/> <radio id="orange" label="orange"/> <radio id="violet" selected="true" label="violet"/> <radio id="yellow" label="yellow"/> the first line creates a simple checkbox. when the user clicks the checkbox, it switches between checked and unchecked. the checked attribute can be used to indicate the default state. you should set this to either true or false. the label a...
...set it to true to have a radio button selected by default, or leave it out for other radio buttons. radiogroup element in order to group radio buttons together, you need to use the radiogroup element. only one of the radio buttons in a radio group can be selected at once. ...
...l turn off all of the others in the same group. the following example demonstrates this. example 3 : source view <radiogroup> <radio id="orange" label="orange"/> <radio id="violet" selected="true" label="violet"/> <radio id="yellow" label="yellow"/> </radiogroup> attributes like buttons, check boxes and radio buttons are made up of a label and an image, where the image switches between checked and unchecked when it is pressed. check boxes have many of the same attributes as buttons: label the label on the check box or radio button. disabled set this to either true or false to disable or enable the check box or radio button. accesskey the shortcut key that can be used to select the element. the letter specified is usually drawn underlined in the label. to view xul, you need ...

Modifying a XUL Interface - Archive of obsolete content
use instead when you can. these are described in the next section. manipulating basic elements the main xul elements such as buttons, checkboxes and radio buttons may be manipulated using a number of script properties. the properties available are listed in the element reference as those available are different for each element. common properties that you will manipulate include the label, value, checked and disabled properties. they set or clear the corresponding attribute as necessary. label and value properties examples here is a simple example which changes the label on a button: example 3 : source view <button label="hello" oncommand="this.label = 'goodbye';"/> when the button is pressed, the label is changed. this technique will work for a variety of different elements that have labels. fo...
...ment, the textbox. the += operator is used to add to the current value so a 1 will be added onto the end of the existing text. note that you can still enter text into the textbox. you can also retrieve the current label or value using these properties, as in the following example: example 5 : source view <button label="hello" oncommand="alert(this.label);"/> toggling a checkbox checkboxes have a checked property which may be used to check or uncheck the checkbox. it should be easy to determine how this is used. in this next example, we reverse the state of the checked property whenever the button is pressed. note that while the label and value properties are strings, the checked property is a boolean property which will be set either true or false. note: if you're creating the checkbox dynami...
...uld be easy to determine how this is used. in this next example, we reverse the state of the checked property whenever the button is pressed. note that while the label and value properties are strings, the checked property is a boolean property which will be set either true or false. note: if you're creating the checkbox dynamically and it's not yet added to the dom, you must use setattribute("checked", "false") instead, because the xbl isn't initiated yet.) example 6 : source view <button label="change" oncommand="this.nextsibling.checked = !this.nextsibling.checked;"/> <checkbox label="check for messages"/> radio buttons may be selected as well using properties, however since only one in a group may be selected at a time, the others must all be unchecked when one is checked. you don't have ...

tree - Archive of obsolete content
f a tree: var idlist = []; var rangecount = tree.view.selection.getrangecount(); for (var i = 0; i < rangecount; i++) { var start = {}; var end = {}; tree.view.selection.getrangeat(i, start, end); for (var c = start.value; c <= end.value; c++) { idlist.push(tree.view.getitematindex(c).firstchild.id); } } the following returns a array of the indicies of the rows where the value is checked in a checkbox type column: function getcellchecked(tree, columnid) { var arr = []; var column = tree.columns.getnamedcolumn(columnid); for (var i = 0; i < tree.view.rowcount; i++) { if (tree.view.getcellvalue(i, column) == 'true') arr.push(i); } return arr; } to get the text value for a specific column (for example column 'age') from the currently focused row in the tree: ...
...cbox-check.gif isn't available in firefox 1, 2, and 3 in mac os x so you should specify a url to an image in your extension or elsewhere. */ list-style-ima...
...<treecell value="false"/> <treecell label="alice"/> </treerow> </treeitem> <treeitem> <treerow> <treecell value="false"/> <treecell label="bob"/> </treerow> </treeitem> </treechildren> </tree> </window> css: treechildren::-moz-tree-checkbox { /* unchecked checkbox treecells. this style must come before treechildren::-moz-tree-checkbox(checked) otherwise it won't take effect. */ list-style-image: url("") } treechildren::-moz-tree-checkbox(checked) { /* checked checkbox treecells. cbox-check.gif isn't available in firefox 1, 2, and 3 in mac os x so you should specify a url to an image in your extension or elsewhere. */ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } treechildren::-moz-tree-checkb...

reftest opportunities files - Archive of obsolete content
if you can look at the html in one of these pages, and can see a way to get the same visual ouptut, then that is an obvious reftest opportunity. ...
...if you can look at the html in one of these pages, and can see a way to get the same visual ouptut, then that is an obvious reftest opportunity. ...
...if you can look at the html in one of these pages, and can see a way to get the same visual ouptut, then that is an obvious reftest opportunity. ...

WAI-ARIA basics - Learn web development
eaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled. if the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. ...
... is also a good idea to indicate when it happens, and what the result is. for example, in our form-validation-checkbox-disabled.html demo there is a checkbox that when checked, enables another form input to allow further information be entered. we've set up a hidden live region: <p class="hidden-alert" aria-live="assertive"></p> which is hidden from view using absolute positioning. ...
... good idea to indicate when it happens, and what the result is. for example, in our form-validation-checkbox-disabled.html demo there is a checkbox that when checked, enables another form input to allow further information be entered. we've set up a hidden live region: <p class="hidden-alert" aria-live="assertive"></p> which is hidden from view using absolute positioning. ...

How to build custom form controls - Learn web development
dio buttons instead; let's look at this option. we can start with a completely semantic, accessible, unordered list of radio buttons with an associated <label>, labeling the entire group with a semantically appropriate <fieldset> and <legend> pair. ...
...like the earlier example, just to show that it can be done: .styledselect { display: inline-block; padding: 0; } .styledselect li { list-style-type: none; padding: 0; display: flex; } .styledselect [type=radio] { position: absolute; left: -100vw; top: -100vh; } .styledselect label { margin: 0; line-height: 2; padding: 0 0 0 4px; } .styledselect:not(:focus-within) input:not(:checked) + label { height: 0; outline: none; overflow: hidden; } .styledselect:not(:focus-within) input:checked + label { border: .2em solid #000; border-radius: .4em; box-shadow: 0 .1em .2em rgba(0,0,0,.45); } .styledselect:not(:focus-within) input:checked + label::after { content : "▼"; background: black; float: right; color: white; padding: 0 4px; margin: 0 -4px 0 4px; } .sty...
...der-radius: .4em; box-shadow: 0 .1em .2em rgba(0,0,0,.45); } .styledselect:not(:focus-within) input:checked + label::after { content : "▼"; background: black; float: right; color: white; padding: 0 4px; margin: 0 -4px 0 4px; } .styledselect:focus-within { border: .2em solid #000; border-radius: .4em; box-shadow: 0 .1em .2em rgba(0,0,0,.45); } .styledselect:focus-within input:checked + label { background-color: #333; color: #fff; width: 100%; } with no javascript, and just a little bit of css, we are able to style the list of radio buttons to display only the checked item. when the focus is within the <ul> in the <fieldset>, the list opens up, and the up and down (and left and right) arrows work to select the previous and next items. try it out: this works, to some ...

React interactivity: Events and state - Learn web development
ingtext = `${tasklist.length} ${tasksnoun} remaining`; now you can replace the list heading's text content with the headingtext variable. update your <h2> like so: <h2 id="list-heading">{headingtext}</h2> completing a task you might notice that, when you click on a checkbox, it checks and unchecks appropriately. as a feature of html, the browser knows how to remember which checkbox inputs are checked or unchecked without our help. this feature hides a problem, however: toggling a checkbox doesn't change the state in our react application. this means that the browser and our app are now out-of-sync. we have to write our own code to put the browser back in sync with our app. proving the bug before we fix the problem, let's observe it happening. we'll start by writing a toggletaskcompleted() ...
... completed={task.completed} key={task.id} toggletaskcompleted={toggletaskcompleted} /> )); next, go over to your todo.js component and add an onchange handler to your <input /> element, which should use an anonymous function to call props.toggletaskcompleted() with a parameter of props.id. the <input /> should now look like this: <input id={props.id} type="checkbox" defaultchecked={props.completed} onchange={() => props.toggletaskcompleted(props.id)} /> save everything and return to your browser and notice that our first task, eat, is checked. open your javascript console, then click on the checkbox next to eat. it unchecks, as we expect. your javascript console, however, will log something like this: object { id: "task-0", name: "eat", completed: true } the checkbox ...
...to make a new object // whose `completed` prop has been inverted return {...task, completed: !task.completed} } return task; }); settasks(updatedtasks); } here, we define an updatedtasks constant that maps over the original tasks array. if the task’s id property matches the id provided to the function, we use object spread syntax to create a new object, and toggle the checked property of that object before returning it. if it doesn’t match, we return the original object. then we call settasks() with this new array in order to update our state. deleting a task deleting a task will follow a similar pattern to toggling its completed state: we need to define a function for updating our state, then pass that function into <todo/> as a prop and call it when the right e...

Starting our Svelte Todo list app - Learn web development
<button class="btn btn__primary todo-edit" type="submit"> save <span class="visually-hidden">new name for create a svelte starter app</span> </button> </div> </form> </div> </li> <!-- todo-2 --> <li class="todo"> <div class="stack-small"> <div class="c-cb"> <input type="checkbox" id="todo-2" checked/> <label for="todo-2" class="todo-label"> create your first component </label> </div> <div class="btn-group"> <button type="button" class="btn"> edit <span class="visually-hidden">create your first component</span> </button> <button type="button" class="btn btn__danger"> delete ...
...hoose to add to your project. the idea is to check for a11y issues in your markup by default and let you opt-out of specific warnings. note: you should only disable these warnings if you have good reasons to do so, for example while building a quick prototype. it's important to be a good web citizen and make make your pages accessible to the broadest possible userbase. the accessibility rules checked by svelte are taken from eslint-plugin-jsx-a11y, a plugin for eslint that provides static checks for many accessibility rules on jsx elements. svelte aims to implement all of them in its compiler, and most of them have already been ported to svelte. on github you can see which accessibility checks are still missing. you can check the meaning of each rule by clicking on its link. styling our mark...
...us + label::before { border-width: 4px; outline: 3px dashed #228bec; } .c-cb > label::after { box-sizing: content-box; content: ""; position: absolute; top: 11px; left: 9px; width: 18px; height: 7px; transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; border-top-color: transparent; opacity: 0; background: transparent; } .c-cb > input[type="checkbox"]:checked + label::after { opacity: 1; } with our markup styled, everything now looks better: the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/03-adding-dynamic-behavior or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/03-adding-dynamic-behavior remember to ...

TypeScript support in Svelte - Learn web development
ce: enables you to take advantage of many typescript features even without declaring variable types. availability of new and future javascript features: typescript transpiles many recent es6 features to plain old-school javascript, allowing you to use them even on user-agents that don't support them natively yet. typescript also has some disadvantages: not true static typing: types are only checked at compile time, and they are removed from the generated code. steep learning curve: even though typescript is a superset of javascript and not a completely new language, there is a considerable learning curve, especially if you have no experience at all with static languages like java or c#. more code: you have to write and maintain more code. no replacement for automatic tests: even though t...
... t.completed) : todos $: { if (filter === filter.all) $alert = 'browsing all todos' else if (filter === filter.active) $alert = 'browsing active todos' else if (filter === filter.completed) $alert = 'browsing completed todos' } const checkalltodos = (completed: boolean) => { todos = todos.map(t => ({...t, completed})) $alert = `${completed ? ...
...: todos $: { if (filter === filter.all) $alert = 'browsing all todos' else if (filter === filter.active) $alert = 'browsing active todos' else if (filter === filter.completed) $alert = 'browsing completed todos' } const checkalltodos = (completed: boolean) => { todos = todos.map(t => ({...t, completed})) $alert = `${completed ? ...

Componentizing our Svelte app - Learn web development
lace the call to removetodo with an alert. we'll add that functionality back in later on. create a new component file — components/todo.svelte. ...
...and delete button --> {/if} </div> the non-editing section — that is, the {:else} part (lower half) of the if block — will be very similar to the one we had in our todos component. the only difference is that we are calling ontoggle(), onedit(), and onremove(), depending on the user action. ...
...}</span> </button> <button class="btn btn__primary todo-edit" type="submit" disabled={!name}> save<span class="visually-hidden">new name for {todo.name}</span> </button> </div> </form> {:else} <!-- markup for displaying todo: checkbox, label, edit and delete button --> <div class="c-cb"> <input type="checkbox" id="todo-{todo.id}" on:click={ontoggle} checked={todo.completed} > <label for="todo-{todo.id}" class="todo-label">{todo.name}</label> </div> <div class="btn-group"> <button type="button" class="btn" on:click={onedit}> edit<span class="visually-hidden"> {todo.name}</span> </button> <button type="button" class="btn btn__danger" on:click={onremove}> delete<span class="visually-hidden"> {todo.name}</span> </...

Vue conditional rendering: editing existing todos - Learn web development
cations to our todoitem component. specifically, we need to add a variable to track if the item is being edited, and a button to toggle that variable. we’ll also add a delete button since deletion is closely related. update your todoitem’s template as shown below. ...
...ens as a result of them firing. for example: app.vue <to-do-form> listens for: todo-added event emitted by the onsubmit() method inside the todoform component when the form is submitted. result: addtodo() method invoked to add new todo item to the todoitems array. <to-do-item> listens for: checkbox-changed event emitted by the checkbox <input> inside the todoitem component when it is checked or unchecked. result: updatedonestatus() method invoked to update done status of associated todo item. item-deleted event emitted by the deletetodo() method inside the todoitem component when the "delete" button is pressed. result: deletetodo() method invoked to delete associated todo item. item-edited event emitted by the itemedited() method inside the todoitem component when the item-edit...
...iated todo item. todoform.vue <form> listens for submit event. result: onsubmit() method is invoked, which checks that the new label is not empty, then emits the todo-added event (which is then listened for inside app.vue, see above), and finally clears the new label <input>. todoitem.vue checkbox <input> listens for change event. result: checkbox-changed event emitted when the checkbox is checked/unchecked (which is then listened for inside app.vue; see above). "edit" <button> listens for click event. result: toggletoitemeditform() method is invoked, which toggles this.isediting to true, which in turn displays the todo item's edit form on re-render. "delete" <button> listens for click event. result: deletetodo() method is invoked, which emits the item-deleted event (which is then list...

The Firefox codebase: CSS Guidelines
his: h1, h2, h3 { font-family: sans-serif; text-align: center; } not this: h1, h2, h3 { font-family: sans-serif; text-align: center; } naming standards for class names lower-case-with-dashes is the most common. but camelcase is also used sometimes. try to follow the style of existing or related code. other tips assume ="true" in attribute selectors. example: use option[checked], not option[checked="true"]. avoid id selectors unless it is really the wanted goal, since ids have higher specificity and therefore are harder to override. using descendant selectors is good practice for performance when possible: for example: .autocomplete-item[selected] > .autocomplete-item-title would be more efficient than .autocomplete-item[selected] .autocomplete-item-title ...
...t it was overriding got removed in the meantime. in this case, simply dropping the override should work. it is also good practice to look at whether the rule you are overriding is still needed: maybe the ux spec for the component has changed and that rule can actually be updated or removed. when this is the case, don't be afraid to remove or update that rule. once the two things above have been checked, check if the other rule you are overriding contains !important, if that is case, try putting it in question, because it might have become obsolete. afterwards, check the specificity of the other selector; if it is causing your rule to be overriden, you can try reducing its specificity, either by simplifying the selector or by changing where the rule is placed in the stylesheet. if this isn't po...
...check the specificity of the other selector; if it is causing your rule to be overriden, you can try reducing its specificity, either by simplifying the selector or by changing where the rule is placed in the stylesheet. if this isn't possible, you can also try introducing a :not() to prevent the other rule from applying, this is especially relevant for different element states (:hover, :active, [checked] or [disabled]). however, never try to increase the selector of the rule you are adding as it can easily become hard to understand. finally, once you have checked all the things above, you can permit yourself to use !important along with a comment why it is needed. using css variables adding new variables before adding new css variables, please consider the following questions: is the vari...

Index
d automatically with the -changepw option. -nocertdb do not open the certificate or key databases. this has several effects: o with the -create command, only a module security file is created; certificate and key databases are not created. o with the -jar command, signatures on the jar file are not checked. o with the -changepw command, the password on the nss internal module cannot be set or changed, since this password is stored in the key database. -pwfile old-password-file specify a text file containing a token's existing password so that a password can be entered automatically when the -changepw option is used...
...e (for example, spaces, tabs, and carriage returns) is considered equal and is used only to delimit tokens. keys the java install file uses keys to define the platform and module information. forwardcompatible gives a list of platforms that are forward compatible. if the current platform cannot be found in the list of supported platforms, then the forwardcompatible list is checked for any platforms that have the same os and architecture in an earlier version. if one is found, its attributes are used for the current platform. platforms (required) gives a list of platforms. each entry in the list is itself a key-value pair: the key is the name of the platform and the value list contains various attributes of the platform. the platform string is in the form...
...at with netscape signing tool version 1.1 and later this option can appear multiple times on one command line, making it possible to specify several particular directories to exclude. -z tells signtool not to store the signing time in the digital signature. this option is useful if you want the expiration date of the signature checked against the current date and time rather than the time the files were signed. -z jarfile creates a jar file with the specified name. you must specify this option if you want signtool to create the jar file; it does not do so automatically. if you don't specify -z, you must use an external zip tool to create the jar file. the -z option ca...

sslcrt.html
atus cert_verifycertnow( certcertdbhandle *handle, certcertificate *cert, prbool checksig, seccertusage certusage, void *wincx); parameters this function has the following parameters: handle a pointer to the certificate database handle. cert a pointer to the certificate to be checked. checksig indicates whether certificate signatures are to be checked. pr_true means certificate signatures are to be checked. pr_false means certificate signatures will not be checked. certusage one of these values: certusagesslclient certusagesslserver ...
...ostname. syntax #include <cert.h> secstatus cert_verifycertname( certcertificate *cert, char *hostname); parameters this function has the following parameters: cert a pointer to the certificate against which to check the hostname referenced by hostname. hostname the hostname to be checked. returns the function returns one of these values: if the common name in the subject dn for the certificate matches the domain name passed in the hostname parameter, secsuccess. if the common name in the subject dn for the certificate is not identical to the domain name passed in the hostname parameter, secfailure. use pr_geterror to obtain the error code. descriptio...
...ificate chain for a specified certificate are on a specified list of ca names. syntax #include <nss.h> secstatus nss_cmpcertchainwcanames( certcertificate *cert, certdistnames *canames); parameters this function has the following parameters: cert a pointer to the certificate structure for the certificate whose certificate chain is to be checked. canames a pointer to a structure that contains a list of distinguished names (dns) against which to check the dns for the signers in the certificate chain. returns the function returns one of these values: if successful, secsuccess. if unsuccessful, secfailure. use pr_geterror to obtain the error code. manipul...

Tutorial: Set a breakpoint - Firefox Developer Tools
does not work in firefox 57. since the debugger api is only available to privileged javascript code, you’ll need to use the browser content toolbox to try it out. to do this, open the firefox developer tools, click 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. these are located at the bottom right of the options panel; you may need to scroll to see them. once they’re checked, you can close the developer tools. save the following text to an html file: <div onclick="report('the best div');">click me!</div> <div onclick="report('another great div');">or me!</div> <script> function report(what) { console.log('clicked: ' + what); } </script> ...
...</div> <div onclick="report('another great div');">or me!</div> <script> function report(what) { console.log('clicked: ' + what); } </script> visit the html file in your browser, and open the browser content toolbox by opening the firefox menu, choosing “web developer”, and then “browser content toolbox”. ...
...the scratchpad panel should appear at the top of the toolbox alongside the console, debugger, and memory panels. ...

Settings - Firefox Developer Tools
categories default firefox developer tools this group of checkboxes determines which tools are enabled in the toolbox. new tools are often included in firefox but not enabled by default. available toolbox buttons this group of checkboxes determines which tools get an icon in the toolbox's toolbar. as of firefox 62, if the option to "select an iframe as the currently targeted document" is checked, the icon will appear in the toolbar while the settings tab is displayed, even if the current page doesn't include any iframes. note that in firefox 52 we removed the checkbox to toggle the "select element" button. the "select element" button is now always shown. themes this enables you to choose one of two themes. there's a light theme, which is the default: a dark theme: ...
...in the debugger. enable new debugger frontend enable the new debugger. this setting only exists in firefox nightly. style editor show original sources when a css preprocessor supporting source maps is used, this enables the style editor to display the original, preprocessor, sources rather than the generated css. learn more about style editor support for css source maps. with this setting checked, the page inspector rules view will also provide links to the original sources. autocomplete css enable the style editor to offer autocomplete suggestions. screenshot behavior screenshot to clipboard when you click the icon for the screenshot tool, copy the screenshot image to the clipboard (the image will still be saved to your downloads directory). new in firefox 53. play camera shutte...
...codemirror source editor, which is included in firefox and used by several developer tools, including scratchpad and the style editor. detect indentation auto-indent new lines based on the current indentation. autoclose brackets determines whether typing an opening character like [ or { will cause the editor to insert the matching closing character ] or } for you. indent using spaces when checked, indentation will be performed using spaces, when off, the editor will use tabs instead. tab size the frequency of tab stops in the editor. select 2, 4, or 8. keybindings choose the default codemirror keybindings or keybindings from one of several popular editors: vim emacs sublime text advanced settings show gecko platform data a setting to control whether or not profiles s...

Pixel manipulation with canvas - Web APIs
by default, we might want to disable the smoothing to see clear pixels. you can toggle the checkbox to see the effect of the imagesmoothingenabled property (which needs prefixes for different browsers). ...
...lt, we might want to disable the smoothing to see clear pixels. you can toggle the checkbox to see the effect of the imagesmoothingenabled property (which needs prefixes for different browsers). ...
...ction() { draw(this); }; function draw(img) { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); img.style.display = 'none'; var zoomctx = document.getelementbyid('zoom').getcontext('2d'); var smoothbtn = document.getelementbyid('smoothbtn'); var togglesmoothing = function(event) { zoomctx.imagesmoothingenabled = this.checked; zoomctx.mozimagesmoothingenabled = this.checked; zoomctx.webkitimagesmoothingenabled = this.checked; zoomctx.msimagesmoothingenabled = this.checked; }; smoothbtn.addeventlistener('change', togglesmoothing); var zoom = function(event) { var x = event.layerx; var y = event.layery; zoomctx.drawimage(canvas, math.min(math.max(0, x - 5), img.width ...

Using the MediaStream Recording API - Web APIs
olor: 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. checkbox hack for showing/hiding this is fairly well documented already, but we thought we'd give a mention to the checkbox hack, which abuses the fact that you can click on the <label> of a checkbox to toggle it checked/unchecked. in web dictaphone this powers the information screen, which is shown/hidden by clicking the question mark icon in the top right hand corner. first of all, we style the <label> how we want it, making sure that it has enough z-index to always sit above the other elements and therefore be focusable/clickable: label { font-family: 'notocoloremoji'; font-size: 3rem; position: a...
...we then use the mediarecorder api to record the stream, and output each recorded snippet into t...
...ansform: translatex(100%); transition: 0.6s all; background-color: #999; background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5)); } last, we write a rule to say that when the checkbox is checked (when we click/focus the label), the adjacent <aside> element will have its horizontal translation value changed and transition smoothly into view: input[type=checkbox]:checked ~ aside { transform: translatex(0); } basic app setup to grab the media stream we want to capture, we use getusermedia(). we then use the mediarecorder api to record the stream, and output each recorded snippet into the source of a generated <audio> element so it can be played back. we'll declare some variables for the record and stop buttons, and the <article> that will contain the generate...

Advanced techniques: Creating and sequencing audio - Web APIs
reference queue for the notes that are to be played, and the functionality to play them using the functions we've previously created: const notesinqueue = []; function schedulenote(beatnumber, time) { // push the note on the queue, even if we're not playing. ...
... created: const notesinqueue = []; function schedulenote(beatnumber, time) { // push the note on the queue, even if we're not playing. ...
...'re not playing. notesinqueue.push({ note: beatnumber, time: time }); if (pads[0].queryselectorall('button')[currentnote].getattribute('aria-checked') === 'true') { playsweep() } if (pads[1].queryselectorall('button')[currentnote].getattribute('aria-checked') === 'true') { playpulse() } if (pads[2].queryselectorall('button')[currentnote].getattribute('aria-checked') === 'true') { playnoise() } if (pads[3].queryselectorall('button')[currentnote].getattribute('aria-checked') === 'true') { playsourcenode(audioctx, sample); } } here we look at the current time and compare it to the time for the next note; when the two match it will call the previous two functions. function scheduler() { // while there are notes that will need ...

WAI-ARIA Roles - Accessibility
ttons.aria: cell rolethe cell value of the aria role attribute identifies an element as being a cell in a tabular container that does not contain column or row header information. to be supported, the cell must be nested in an element with the role of row.aria: checkbox rolethe checkbox role is used for checkable interactive controls. elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology.aria: comment rolethe comment landmark role semantically denotes a comment/reaction to some content on the page, or to a previous comment.aria: complementary rolethe complementary landmark role is used to designate a supporting section that relates to the main content, yet can stand alone when separated. these sections are frequentl...
... search the page, site, or collection of sites.aria: suggestion rolethe suggestion landmark role semantically denotes a single proposed change to an editable document. ...
..., site, or collection of sites.aria: suggestion rolethe suggestion landmark role semantically denotes a single proposed change to an editable document. ...

Basic form hints - Accessibility
low shows a radio button group implemented using an unordered list. note that on line 3, the <ul> element sets the aria-labelledby attribute to rg1_label, the id of the <h3> element on line 1, which is the label for the radio group. ...
...ed list. note that on line 3, the <ul> element sets the aria-labelledby attribute to rg1_label, the id of the <h3> element on line 1, which is the label for the radio group. ...
...bute to rg1_label, the id of the <h3> element on line 1, which is the label for the radio group. <h3 id="rg1_label">lunch options</h3> <ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label"> <li id="r1" tabindex="-1" role="radio" aria-checked="false"> <img role="presentation" src="radio-unchecked.gif" /> thai </li> <li id="r2" tabindex="-1" role="radio" aria-checked="false"> <img role="presentation" src="radio-unchecked.gif" /> subway </li> <li id="r3" tabindex="0" role="radio" aria-checked="true"> <img role="presentation" src="radio-checked.gif" /> radio maria </li> </ul> describing with aria form controls sometimes have a description associated with them, in addition to the label. aria provides the aria-describedby attribute to directly ...

An overview of accessible web applications and widgets - Accessibility
aria-labelledby="quiztab">quiz content goes here</div> </div> aria is well supported by all major browsers, including firefox, safari, opera, chrome, and internet explorer, and many assistive technologies. ...
.... presentational changes dynamic presentational changes include using css to change the appearance of content (such as a red border around invalid data, or changing the background color of a checked checkbox), as well as showing or hiding content. state changes aria provides attributes for declaring the current state of a ui widget. ...
...-hidden attribute on line 1. example 2b. attribute-based selector for indicating state div.tooltip[aria-hidden="true"] { display: none; } the javascript to update the aria-hidden property has the form shown in example 2c. note that the script only updates the aria-hidden attribute (line 2); it does not need to also add or remove a custom classname. example 2c. javascript to update the aria-checked attribute var showtip = function(el) { el.setattribute('aria-hidden', 'false'); } role changes aria allows developers to declare a semantic role for an element that otherwise offers incorrect or no semantics. the role of an element should not change. instead, remove the original element and replace it with an element with the new role. for example, consider an "inline edit" widget: a compo...

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
f the current iaccessible. this is not really too useful. get_accrole: get an enumerated value representing what this iaccessible is used for, for example. is it a link, static text, editable text, a checkbox, or a table cell, etc. [important] get_accstate: a 32 bit field representing possible on/off states, such as focused, focusable, selected, selectable, visible, protected (for passwords), checked, etc. [important] get_acchelp: get context sensitive help for the iaccessible. get_acchelptopic: we don't use this, it's only if the windows help system is used. get_acckeyboardshortcut: what is the keyboard shortcut for this iaccessible (underlined alt+combo mnemonic) get_accfocus: which child is focused? [important] get_accselection: which children of this item are selected? get_accdefaul...
...s cheat sheet for information on what each state does, see the msdn state constants page. check with your assistive technology partners to find out what states you need to support. ...
...ations from microsoft do in a similar situation. undocumented window class usage problem: for common controls, msaa is actually less direct than simply getting the window class and style bits for a window, so at products only look for it only when necessary. in fact, when a control has its own window, it's easy for a 3rd party application to know whether the object is disabled, focused, hidden, checked, etc. some assistive technologies will look for msaa if it doesn't already know that the given window class is used for something common. common examples are button, listbox, combobox, msctls_statusbar32, msctls_trackbar32, #32770 (dialog class), systreeview32, static, edit and richedit. other assistive technologies use a whitelist, and must list your window classes somewhere in their implementa...

Pseudo-classes - CSS: Cascading Style Sheets
change a button's color when the user's pointer hovers over it. /* any button over which the user's pointer is hovering */ button:hover { color: blue; } pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not). note: in contrast to pseudo-classes, pseudo-elements can be used to style a specific part of an element. syntax selector:pseudo-class { property: value; } like regular classes, you can chain together as many pseudo-classes as you want in a selector. index of...
... :hover, which lets you know if the mouse is over an element or not). note: in contrast to pseudo-classes, pseudo-elements can be used to style a specific part of an element. syntax selector:pseudo-class { property: value; } like regular classes, you can chain together as many pseudo-classes as you want in a selector. ...
...ange, :out-of-range, :required, :optional, :read-only and :read-write, but without the associated semantic meaning. selectors level 3 recommendation defined :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty and :not(). defined the syntax of :enabled, :disabled, :checked, and :indeterminate, but without the associated semantic meaning. no significant change for pseudo-classes defined in css level 2 (revision 1). css level 2 (revision 1) recommendation defined :lang(), :first-child, :hover, and :focus. no significant change for pseudo-classes defined in css level 1. css level 1 recommendation defined :link, :visited and :activ...

panel - Archive of obsolete content
this is usually the best approach. embedding an iframe in the panel, and changing its document setting the panel's co...
...this is usually the best approach. embedding an iframe in the panel, and changing its document setting the panel's contenturl property. however, doing this will cause any content scripts to be unloaded and then reloaded, so it may be l...

Dialogs and Prompts - Archive of obsolete content
// notice if user clicks cancel, window.arguments[0].out remains null // because this function is never called window.arguments[0].out = {name:document.getelementbyid("name").value, description:document.getelementbyid("description").value, ...
...nce if and only if the user clicks ok function onok() { // return the changed arguments. // notice if user clicks cancel, window.arguments[0].out remains null // because this function is never called window.arguments[0].out = {name:document.getelementbyid("name").value, description:document.getelementbyid("description").value, enabled:document.getelementbyid("enabled").checked}; return true; } see also passing parameter to a dialog and getting return values from it. displaying the standard "open file"/"save file"/"select folder" dialogs nsifilepicker prompts and the prompt service now that you understand dialogs, let's examine prompts. prompts differ from dialogs in that they don't require custom xul. because of this, however, they are less customizable. most ...

Enhanced Extension Installation - Archive of obsolete content
s.ini - an ini manifest listing the directories for all the extensions and themes at the location (used by the component manager, preferences system, chrome registry etc to locate files during the startup process). in the profile directory, the file compatibility.ini stores information about the version of the application (build info) that last started this profile - during startup this file is checked and if the version info held by the running app disagrees with the info held by this file, a compatibility check is run on all installed items. when changes are made to the extensions datasource - new items are installed, old items uninstalled, enabled or disabled, a .autoreg file is written to the profile directory as well, which tells the startup code that the system has been modified, so that...
...ed install location. installation from a file initiation when an item is installed from a file (such as, when an item is installed from the web, via xpinstall, upgraded by xpinstall or dropped into a directory-based install location), the install manifest supplied by the item is expanded into a temporary location and read. the guid and version supplied are validated, and then compatibility is checked for by the new _getinstalldata function. this function returns the guid, version, and type of the item, and also an error code listing either success, or the reason for a failure, such as invalid guid, version, or incompatible item. depending on the failure, the install function may take several steps. if the item is found incompatible, a version update check is performed as before. if updated c...

Interaction between privileged and non-privileged pages - Archive of obsolete content
and your chrome needs to carefully check every value passed (you need to do that either way). ...
...or detail */ function sendmsg(type, dataxml) { var el = targetdoc.body; el.setattribute("eventdatatopage", dataxml ? dataxml.tostring() : ""); var event = targetdoc.createevent("event") event.initevent(type, true, true); el.dispatchevent(event); } /** * verifies that the event is indeed coming from our page * as expected, and returns the data for that event. * @returns {e4x} the (unchecked) detail data from the page. * you must check the data. * @see <https://developer.mozilla.org/docs/code_snippets/ * interaction_between_privileged_and_non-privileged_pages#security_notes> */ function geteventdata(event) { if (event.target.ownerdocument != targetdoc) throw "event from unexpected source"; return new xml(event.target.getattribute("eventdatafrompage")); } security notes ...

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
on uses a resource such as the web page or the web application to control the navigation system. in other words, the page is the browsing device during the experience, and the user is "immersed" in that browsing device. what does this mean, practically speaking? what does it look like? good candidates for inner-browsing include a spell check application, in which the text entered in a web page is checked as it is typed; a webmail application that uses the inner-browsing model to display the separate messages and message lists in an integrated way, much like a client mail app; and a stock ticker that spools the information across the web page. see the table below for a description of how applications like this exemplify inner-browsing and how they might be implemented using the inner-browsing appr...
...ludes a ticker example demonstrating that the inner-browsing model can be used to dynamically request new data from the server side and provide updates to the ticker. spell check suppose you have a web publishing system for a portal, and a spell check application on your server. today, this publishing system allows your users to modify content for the portal, but in order to have their text spell checked they must click somewhere and wait for the response page. the inner-browsing model is able to provide users with automatic spell check without leaving the page being edited, a similar experience to a word processor application. the incorrect words are highlighted while the user is typing. forms with nested selects in today's web pages it is common to see selects where content is dependent on the ...

Building Firefox with Rust code - Archive of obsolete content
as dependencies in toolkit/library/rust/cargo.toml. if you want to call code in the "e10s" crate, you would add: extern crate e10s; to toolkit/library/rust/shared/lib.rs; you would also need to specify the path to that crate in the dependencies section of toolkit/library/rust/shared/cargo.toml: [dependencies] e10s = { path = "../../../../path/from/srcdir/e10s" } the e10s crate must also be checked into the tree at the appropriate path. if the e10s crate depends on any other crates, their sources must also be checked into the tree, and e10s's cargo.toml must have path attributes for each of its dependencies, and so on. this is automated by the mach vendor command, which installs the dependencies in third_party/rust. be sure the licenses of all dependent crates are compatible. cargo.lock ...
... crates for unit tests can be added in a similar fashion to the files in toolkit/library/gtest/rust/. ...

New Security Model for Web Services - Archive of obsolete content
ll result in the rest of the file to be ignored. since the commands only allow access, the order of processing the "allow" commands that were successfully parsed is never significant. allowing web script access to permit scripts to access the resources of this server, use the following command: <wsa:allow type="<request-type>" from ="<uri-prefix>"/> the type of request, if specified, will be checked against the type of request being requested by the script, such as "soap", "soapv", or "load". types must not contain spaces. specify "any" as the type to permit any requested type of access to resources. the principle uri of the script will be checked for the specified uri prefix. if "from" is not specified, then all scripts will be allowed. note: one can also use wild charater(s) in "from" val...
...laration file is considered valid (validation based on the syntax described above); an invalid document will result in access denial. denies script access in the event of an xml-wellformedness error, or validation error, or if the declaration file does not grant access. reports errors (validation, wellformedness, file not found, etc.) to the console via nsiconsoleservice. note: script access is checked via declaration file only if the script security manager denies access. summary advantages the proposed declaration file places the server operator, not the client in control of access to his server by untrusted scripts. the access hole is no bigger than the service in question. the access is disabled by default, and there is nothing the user needs to do to open access, and nothing that can g...

New Skin Notes - Archive of obsolete content
to this page. thanks! feedback fix weird width bug on preferences page. --dria css classes for feature and subfeature boxes, including required graphics. -- dria when will these fixes be on the live site? --nickolay 10:38, 31 aug 2005 (pdt) existing fixes should be on test/docs/ now. --dria stuff that's been fixed note that while i've made these fixes, they haven't necessarily been checked in yet. edit page textarea needs to 'scale' better with page width (so large whitespace area's are non-existant), suggest min-width:some-em-size; width: 88%; and max-width set to 95% or something like that. --callek i tried this, but it gets totally screwed up in ie for some reason. i'll try again, but can't guarantee this will be fixed for the initial upgrades. --dria took two days, but i fin...
...esterday.also, the current color for visited links makes them less visible. --gandalf 00:45, 31 aug 2005 (pdt) i don't like the current color too, but i strongly disagree that we don't need to give visited links different color. this is not what user expects (well, i don't expect sites to style visited and non-visited links the same), and it's false that other documentation sites do this (i just checked apple's and microsoft's sites). your statement that "it looks odd when someone who uses devmo on regular basis sees some violet links just because he already worked with this site yesterday" holds true for every single place on the web, yet visited links use different styling on most sites. --nickolay 01:34, 31 aug 2005 (pdt) ok, so i'm asking just to change this color. --gandalf 04:55, 31 aug 2...

group - Archive of obsolete content
...
... ...

menuitem.name - Archive of obsolete content
« xul reference home name type: string name radio menuitems with the same name as put into a group. only one menuitem in each radio group can be checked at a time. ...
...e: string name radio menuitems with the same name as put into a group. only one menuitem in each radio group can be checked at a time. ...

Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
hin the handlers element. each handler element defines the action taken for a particular event specified by its event attribute. valid event types are those supported by xul and javascript, such as click and focus. use the event name without the 'on' in front of it. a common reason to set handlers is to modify the custom properties when an event occurs. for example, a custom checkbox might have a checked property which needs to be changed when the user clicks the checkbox: <handlers> <handler event="mouseup" action="this.checked=!this.checked"/> </handlers> when the user clicks and releases the mouse button over the check box, the mouseup event is sent to it, and the handler defined here is called, causing the state of the checked property to be reversed. similarly, you may wish to change a pr...
...er event="mouseup" button="1" action="alert('middle button pressed')"/> <handler event="click" button="2" action="alert('right button pressed');"/> </handlers> handling key events for key events, you can use a number of attributes similar to those for the key element to match a specific key and match only when certain modifer keys are pressed. the previous example could be extended so that the checked property of the check box is changed when the space bar is pressed. <handlers> <handler event="keypress" key=" " action="this.checked=!checked"/> </handlers> you can also use the keycode attribute to check for non-printable keys. the section on keyboard shortcuts provides more information. the modifier keys can be checked by adding a modifiers attribute. this should be set to one of the values...

Introduction to Public-Key Cryptography - Archive of obsolete content
te for the engineering ca. verifying a certificate chain certificate chain verification is the process of making sure a given certificate chain is well-formed, valid, properly signed, and trustworthy. red hat software uses the following procedure for forming and verifying a certificate chain, starting with the certificate being presented for authentication: the certificate validity period is checked against the current time provided by the verifier's system clock. the issuer's certificate is located. the source can be either the verifier's local certificate database (on that client or server) or the certificate chain provided by the subject (for example, over an ssl connection). the certificate signature is verified using the public key in the issuer's certificate. if the issuer's certifi...
...l certificate database (on that client or server) or the certificate chain provided by the subject (for example, over an ssl connection). the certificate signature is verified using the public key in the issuer's certificate. if the issuer's certificate is trusted by the verifier in the verifier's certificate database, verification stops successfully here. otherwise, the issuer's certificate is checked to make sure it contains the appropriate subordinate ca indication in the red hat certificate type extension, and chain verification returns to step 1 to start again, but with this new certificate. figure 8 presents an example of this process. figure 8 shows what happens when only root ca is included in the verifier's local database. if a certificate for one of the intermediate cas shown in f...

Common Firefox theme issues and solutions - Archive of obsolete content
loper > inspect) are too similar to the background colors making them very hard to read. please choose text label colors that stand out against the background color better. the style rules for these labels can be found near the end of chrome://browser/skin/browser.css. ...
...ry hard to read. please choose text label colors that stand out against the background color better. the style rules for these labels can be found near the end of chrome://browser/skin/browser.css. the color style for the following statements need to be adjusted: .inspector-breadcrumbs-button { .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag { .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id { .inspector-breadcrumbs-id, .inspector-breadcrumbs-classes { style inspector breadcrumb button backgrounds are not consistent between pre-ff14 and ff14+ the use of the styling rule fill in -moz-border-image is incompatible with versions of firefox older than firefox14, however, its use is needed for firefox 14 and later. themes that use -moz-border-image and sup...

Using the Right Markup to Invoke Plugins - Archive of obsolete content
ute is another attribute that can be used, and it can be used to point directly to an xpinstall file for a more streamlined download. for the embed element in particular, these attributes in netscape 7 and mozilla are governed by the plugin finder service preference. under edit | preferences | navigator | helper applications is a preference to use netscape's plugin finder service. ...
... original document information author(s): arun k. ranganathan, netscape communications last updated date: 14. ...

Practical positioning examples - Learn web development
ent to scroll. we glue it to the top of the viewport, and set it so that by default it is offscreen to the right. finally, we set a transition on the element. transitions are an interesting feature that allow you to make changes between states happen smoothly, rather than just going "on", "off" abruptly. in this case we are intending to make the panel slide smoothly onscreen when the checkbox is checked. ...
...hanges between states happen smoothly, rather than just going "on", "off" abruptly. in this case we are intending to make the panel slide smoothly onscreen when the checkbox is checked. (or to put it another way, when the question mark icon is clicked — remember, clicking the <label> will check the associated checkbox! we told you it was a hack.) you will learn a lot more about... setting the checked state there is one final bit of css to add — put the following at the bottom of your css: input[type=checkbox]:checked + aside { right: 0px; } the selector is pretty complex here — we are selecting the <aside> element adjacent to the <input> element, but only when it is checked (note the use of the :checked pseudo-class to achieve this). when this is the case, we are setting the right pr...

Advanced form styling - Learn web development
n't like banana </label> </p> <p> <label> <input type="checkbox" name="fruit-3" value="strawberry"> i like strawberry </label> </p> </fieldset> </form> now, let's style these with a custom checkbox design. ...
...idth: 1em; height: 1em; border: 1px solid gray; /* adjusts the position of the checkboxes on the text baseline */ vertical-align: -2px; /* set here so that windows' high-contrast mode can override */ color: green; } input[type="checkbox"]::before { content: "✔"; position: absolute; font-size: 1.2em; right: -1px; top: -0.3em; visibility: hidden; } input[type="checkbox"]:checked::before { /* 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 ...

Index - Learn web development
ctionality in place. we can display, add, edit and delete todos, mark them as completed, and filter by status. 276 creating our first vue component beginner, components, frameworks, javascript, learn, client-side, props, state, vue and that will do for this article. at this point we have a nicely-working todoitem component that can be passed a label to display, will store its checked state, and will be rendered with a unique id each time it is called. you can check if the unique ids are working by temporarily adding more <to-do-item></to-do-item> calls into app.vue, and then checking their rendered output with your browser's devtools. 277 deployment and next steps beginner, deployment, frameworks, javascript, learn, svelte, client-side, resources in the p...
...s, ember, frameworks, javascript, learn, services, client-side, decorators, events ok, so that's great progress for now. we can now add todo items to our app, and the state of the data is tracked using our service. next we'll move on to getting our footer functionality working, including the todo counter, and look at conditional rendering, including correctly styling todos when they've been checked. we'll also wire up our "clear completed" button. 282 ember resources and troubleshooting beginner, ember, frameworks, javascript, learn, client-side, resources our final ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information. 283 focus management with vue refs ...

Ember Interactivity: Footer functionality, conditional rendering - Learn web development
we'll also wire up our "clear completed" button. along the way, we'll learn about using conditional rendering in our templates. ...
...fn allows for partial application, which is similar to bind, but it never changes the invocation context; this is equivalent to using bind with a null first argument. try restarting the dev server and going to localhost:4200 again, and...

Working with Svelte stores - Learn web development
have a look at your app again, and try adding/deleting/updating a few todos! as soon ...
...have a look at your app again, and try adding/deleting/updating a few todos! as soon as we execute ...

Gecko info for Windows accessibility vendors
as been reached, go back to the start if wrapping is desired, otherwise return null (no item found) go to step 2 checkable, required and invalid states are supported gecko defines three state constants using previously unused states: const unsigned long state_checkable = state_marqueed; // useful on menuitem, listitem // and treeitem. indicates that the absence of state_checked should be spoken as // "unchecked", and that event_state_change will be fired in the event that the // checkbox is toggled. const unsigned long state_required = state_alert_low; // used on form controls // to indicate that this field must be filled out to submit the form const unsigned long state_invalid = state_alert_high; // used on form controls to // indicate the the field does not curren...
...for example, "open\tctrl+o" role_tooltip xul: <tooltip> or tooltiptext attribute role_application default role of root object of application dhtml: role="wairole:application" accname() exposes the <titl...

Accessible Toolkit Checklist
ware that the wrapping layer will introduce accessibility bugs, and thus you will need to test extensively and fill in the holes. you will also need to provide a way for custom and owner drawn controls to easily accessibility api support, as wxwidgets does. there will be custom and owner drawn controls -- there always are. for example, lists of checkboxes are implemented in windows with images of checked and unchecked checkboxes. owner drawn toolkits , like xul and flash's flex ui framework use few or no native widgets. these toolkits need to have accessibility implemented from the ground up, and get nothing for free in terms of keyboard, api or os-theme support. in this case, adding a complete or even a partial accessibility solution is major work, and will require more than on...
...a url for a link, the text a user entered in a field. get_accrole: get an enumerated value representing what this iaccessible is used for, for example. is it a link, static text, editable text, a checkbox, or a table cell, etc. get_accstate: a 32 bit field representing possible on/off states, such as focused, focusable, selected, selectable, visible, protected (for passwords), checked, etc. get_acckeyboardshortcut: what is the keyboard shortcut for this iaccessible (underlined alt+combo mnemonic) get_accfocus: which child is focused? get_accselection: which children of this item are selected? acclocation: get the x,y coordinates, and the height and width of this iaccessible node. accnavigate: navigate to the first/last child, p...

Android-specific test suites
run the tests and report the results to stdout, as well as produce an html report. disabling one failing test in general, it's not sensible to allow java code that doesn't observe the existing coding style; in this respect, this job is equivalent to the eslint jobs that check the javascript coding style throughout the tree. however, the existing configuration can be tweaked and the set of files checked can be modified. contact information android-checkstyle is currently owned by :mcomella and :nalexander. file tickets in the firefox for android product in bugzilla. android-findbugs ensures that the code avoids common java coding errors. using this suite will allow the code to be analyzed to spot any design flaws or potential bugs. if an issue is found within the code, a warning will be ide...
...o run android-findbugs, first build firefox for android with your changes; then run ./mach android findbugs this will run the tests and report the results to stdout, as well as produce an html report. disabling one failing test in general, it's not sensible to allow new java code to land that findbugs detects issues with. however, the existing configuration can be tweaked and the set of files checked can be modified. contact information android-checkstyle is currently owned by :mcomella and :nalexander. file tickets in the firefox for android product in bugzilla. android-lint ensure that the code avoids common android coding errors. lint is a code scanning tool that identifies problems in the code regarding quality. it is a fast process that can be run on unexecuted code, and test cases ...

Old Thunderbird build
tand. for example, to create a debug build instead of a release build, that file would contain: ac_add_options --enable-debug for more on configuration options, see the page configuring build options. note that if you use an moz_objdir it cannot be a sibling folder to your source directory. use an absolute path to be sure! building thunderbird before you start, make sure that the version you checked out is not busted. for hg tip, you should see green bs on https://treeherder.mozilla.org/#/jobs?repo=comm-central to start the build, cd into the comm-central subdirectory, and run: ./mozilla/mach build mach is our command-line tool to streamline common developer tasks. see the mach article for more. building can take a significant amount of time, depending on your system, os, and chosen bui...
... path/to/dir this is the tricky bit, since you need to specify the directory that installs the files, which may be a parent directory of the changed file's directory. for all other changes run the full rebuild: ./mozilla/mach build problems building? have you: check comm-central on treeherder for known failures at the time you pulled the code. the current status of the trunk can also be checked at https://treestatus.mozilla.org/ if the trunk is broken (i.e. closed), you may wish to consider building one of the branches (to pull the source code from a branch, just replace the url to the repository in the hg clone instruction). on windows: check that the mapi header files from https://www.microsoft.com/en-us/download/details.aspx?id=12905 are installed because the mapi header...

Simple Instantbird build
d im which has been configured to automatically rebuild /chat as well. upstream changes to fetch the latest upstream changes, in your comm-central directory, run the same command as before: python client.py checkout problems building? have you: tried a clobber? this means deleting the object directory so that your next build is completely fresh. ...
...leting the object directory so that your next build is completely fresh. to do this you can use mach clobber checked the instantbird buildbot for known failures at the time you pulled the code? if the trunk is broken, you may wish to consider building one of the branches (to pull the source code from a branch, just replace the url to the repository in the hg clone instruction). checked to make sure that the path in which you placed the source code has no spaces, and is not too long? have you searched the bug database for issues relating to your problem (e.g., platform-specific issues)? try asking in mozilla.dev.chat - don't forget to include details of what is in your mozconfig, and what the actual error is. references general build documentation comm-central simple t...

Simple Thunderbird build
g` file, you should go ahead and remove it when building thunderbird 74 or later, since support for it will eventually be removed completely. add the following line to your mozconfig file: ac_add_options --enable-calendar to add that line you can do this in the source/ directory: echo 'ac_add_options --enable-calendar' >> mozconfig building before you start, make sure that the version you checked out is not busted. for hg tip, you should see green bs on https://treeherder.mozilla.org/#/jobs?repo=comm-central to start the build, cd into the source directory, and run: ./mach build mach is our command-line tool to streamline common developer tasks. see the mach article for more. building can take a significant amount of time, depending on your system, os, and chosen build options. linux...
...he files, which may be a parent directory of the changed file's directory. for example, to just rebuild the lightning calendar extension: ./mach build comm/calendar/lightning for all other changes run the full rebuild: ./mach build problems building? have you: check comm-central on treeherder for known failures at the time you pulled the code. the current status of the trunk can also be checked at https://treestatus.mozilla.org/ if the trunk is broken (i.e. closed), you may wish to consider building one of the branches (to pull the source code from a branch, just replace the url to the repository in the hg clone instruction). check to make sure that the path in which you placed the source code has no spaces, and is not too long. searched the bug database for issues relatin...

HTML parser threading
ree ops by obtaining a mutex once instead of having to synchronize thread on a per-tree op basis.) if the executor isn't reading from a stage, it calls nshtml5parser::parseuntilblocked() to parse potential document.write()-generated data into tree ops. the outer loop then has an inner loop that iterates over the tree ops in the executor's queue and calls perform on each one. parser termination is checked before each tree op for an early return, because, unfortunately, gecko expects parsers to be able to terminate immediately. after each tree op except the last one in the queue, the clock time is checked to see if runflushloop() has spent too much time without returning to the event loop. if too much time has been spent, a runnable for calling runflushloop() again is dispatched and an early return...
...tialized as described above and placed in the queue of speculation objects after the previous one. it is possible that the parser thread ends up parsing all remaining data into speculations before the main thread is ready to receive more tree ops. attempting to execute a script on the main thread, when the tree op executor executes a tree op that attempts to execute a script, the tree op is first checked for a tree builder state snapshot. there will be a snapshot if the tree op came from the parser thread. there won't be one if the tree op came from document.write() on the main thread (discussed later). if there is a snapshot, the tokenizer used for parsing document.write()-originating data on the main thread is reset to the data state. there's no need to snapshot the tokenizer state, because the...

Hacking with Bonsai
also, with as many as 100 engineers, it was very difficult to determine what happened in the tree that caused the instability. bonsai was created to solve these problems. ...
... have been off on a branch and need a stable tip to merge in can pull the tip for their merge. these people, when they check in, will be "on the hook" for the next day's build. the car pool lane is only available to those who arrange access ahead of time with the release team. when the tree is re-opened, the web page is updated and the hook is cleared. use the bonsai query tool to see what's been checked in to the tree lately and to look at differences between versions. read the introduction to bonsai for more information about queries. the rules no checkins when the tree is closed unless you are fixing a build problem at the request of a build person. if you are on the hook, your top priority is to be available to the build team to fix bustages. if you are on the hook, you are findable. you ar...

How Mozilla determines MIME Types
, otherwise application/octet-stream. externalhelperappservice (located at uriloader/exthandler/nsexternalhelperappservice.cpp) the file->mime type mapping works like this: on beos, the operating system is asked for the type of the file (not quite yet, bug 217723) on macos, the type and creator code will be used to lookup the type of the file from the os a hardcoded list of extensions is checked (containing currently 13 entries, nsexternalhelperappservice.cpp line 463 (this is done for speed – it is faster to find data in the hardcoded list than asking the os or looking in preferences) if the extension is not listed there, it becomes interesting. firstly, the operating system is asked for a mime type. (on unix, this means checking mime.types.) if that fails, a user-supplied helper ap...
...for a mime type. (on unix, this means checking mime.types.) if that fails, a user-supplied helper app is searched for by extension, and the specified mime type will be used. (i.e. the list in edit/preferences/helper applications) if that failed, a list of "extra" mime types is searched for an extension match. see line 507 for the complete list. if that also failed, the list of loaded plugins is checked for a plugin that can handle this extension, and is asked for the mime type if no plugin is registered, the ext-to-type-mapping xpcom category is searched for the extension. this allows extensions to register additional mappings. the key of the category entry is the extension without leading dot, the value is the mime type. the extension must be lowercase. if no ext-to-type-mapping category is ...

How to get a stacktrace with WinDbg
e "ntdll" in these commands with "ntdll32". q: the first four frames of my stack trace look like this: 0012fe20 7c90e89a ntdll!kifastsystemcallret 0012fe24 7c81cd96 ntdll!zwterminateprocess+0xc 0012ff20 7c81cdee kernel32!_exitprocess+0x62 0012ff34 6000179e kernel32!exitprocess+0x14 this looks wrong to me?! a: you ran the application without the "debug child processes also" check box being checked. you need to detach the debugger and open the application again, this time with the check box being checked. q: windbg tells me that it is unable to verify checksum for firefox.exe. is this normal? a: yes, this is normal and can be ignored. q: should i click yes or no when windbg asks me to "save information for workspace?" a: click yes and windbg will save you from having to enter in the sym...
...be that internet explorer has been set to the work offline mode. you will not receive any warnings of this in windbg, visual c++ or visual studio. even using the command line with symchk.exe to download symbols will fail. this is because microsoft uses internet explorer's internet & proxy settings to download the symbol files. check the file menu of internet explorer to ensure "work offline" is unchecked. see also symbol server maps addresses to human readable strings. source server maps addresses to source code lines ...

AddonUpdateChecker
of update objects appversion the version of the application or null to use the current version platformversion the version of the platform or null to use the current version checkforupdates() starts an update check. ...
...pplication or null to use the current version platformversion the version of the platform or null to use the current version checkforupdates() starts an update check. ...

Application Translation with Mercurial
file. exporting the changes as patch a patch is a file containing recorded changes to a repository. it can be used to apply these changes to a copy of the repository yet without these changes. tell mercurial to store the changes in the mercurial queue with the qref command. we also create a commit message which will describe the changes in the patch and later get used when the patched gets checked in ('added') to the official repository with the localized files. for the commit message, we have to use the -m command line flag, hg qref -m "firefox 29: localize missing string in aboutprivatebrowsing.dtd" you can change the commit message in the mercurial queue every time by calling hg qref again. now export the patch to the file system using the qexport command which is defined in the .h...
...onent the localization for which you have translated. choose a meaningful bug summary which will be shown for searches etc. like in this example "firefox 29: aboutprivatebrowsing.dtd" fill any important and additional information into the description field. click the 'add attachment' button. select the exported patch file with the file picker. the checkbox for 'patch' should get automatically checked. add a meaningful name for the attachment, e.g. aboutprivatebrowsing.dtd, patch, v1 go to the review 'flags' category and set the one for review to ?, meaning that you request review for the patch. in the text field next to it, add the mail address of the person leading the translation of the locale. this information can be found on the page of the localization team. submit the bug report. n...

Mozilla Web Developer FAQ
e id as a string as the argument. also, old client sniffers can shut out new browsers. the point of having a common api (the w3c dom) is interoperability, and checking for a particular browser defeats that purpose. when working with the dom, it is better to check for the existence of the methods and objects you are planning on using. for example, the existence of document.getelementbyid() can be checked as follows: if(document.getelementbyid) { /* code that uses document.getelementbyid() */ } why doesn’t mozilla display my alt tooltips? contrary to a popular belief stemming from the behavior of a couple browsers running on the windows platform, alt isn’t an abbreviation for ‘tooltip’ but for ‘alternative’. the value of the alt attribute is a textual replacement for the image a...
...ding to a parse error) and serving the same soup labeled as text/html to ie (not leading to a parse error). how is the treatment of application/xhtml+xml documents different from the treatment of text/html documents? an xml parser (expat) is used instead of the tag soup parser. most well-formedness constraints are enforced. despite common allegations to the contrary, the document is not checked for validity. externally defined character entities other than the five pre-defined ones (&lt;, &gt;, &amp;, &quot; and &apos;) are only supported if the document references a public identifier for which there is a mapping in mozilla’s pseudo-dtd catalog and the document has not been declared standalone. in older versions of mozilla as well as in old mozilla-based products, there is no ps...

Profiling with the Firefox Profiler
will be split between its children. tip: focus on one section of the tree by clicking on the "arrow-in-a-circle" icon that appears to the right of the tree element as you hover over it. a "tree breadcrumb" will appear similar to the range breadcrumbs noted above. clicking the "javascript only" option will only show javascript code in the call tree. you could compare the time with this option checked and the total time to get an idea of how much time was spent running js. note that long-running js function execution may not actually be taking as long as you think because further down the call stack there may be something like painting happening. clicking the "invert call stack" option will sort by the time spent in a function in descending order. note that the running time here is only the r...
... stack of the selected threads in firefox and collects a stack trace. this stack trace is the combined stack of three different stacks: the native stack, the javascript stack, and the label stack. native stack the native stack is the regular c / c++ / rust function stack that you know from your debugger. it's only collected if the "stack walk" checkbox in the gecko profiler add-on's settings is checked. javascript stack the javascript stack is collected by the js engine. this is controlled by the "javascript" checkbox in the gecko profiler add-on's settings panel. label stack the label stack (formerly called "pseudo stack") uses function entry/exit tags added by hand to important points in the code base. the stacks you see in the ui are chains of these tags. this is good for highlighting ...

NSS_3.12.1_release_notes.html
san contains no dnsname bug 401928: support generalized pkcs#5 v2 pbes bug 403543: pkix: need a way to enable/disable aia cert fetching bug 408847: pkix_ocspchecker_check does not support specified responder (and given signercert) bug 414003: crash [[@ cert_decodecertpackage] sometimes with this testcase bug 415167: memory leak in certutil bug 417399: arena allocation results are not checked in pkix_pl_infoaccess_parselocation bug 420644: improve ssl tracing of key derivation bug 426886: use const char* in pk11_importcertforkey bug 428103: cert_encodesubjectkeyid is not defined in any public header file bug 429716: debug builds of libpkix unconditionally dump socket traffic to stdout bug 430368: vfychain -t option is undocumented bug 430369: vfychain -o succeeds even if -...
... bug 430916: add sustaining asserts bug 431805: leak in nssarena_destroy() bug 431929: memory leaks on error paths in devutil.c bug 432303: replace pkix_pl_memcpy with memcpy bug 433177: fix the gcc compiler warnings in lib/util and lib/freebl bug 433437: vfychain ignores the -a option bug 433594: crash destroying ocsp cert id [[@ cert_destroyocspcertid ] bug 434099: nss relies on unchecked pkcs#11 object attribute values bug 434187: fix the gcc compiler warnings in nss/lib bug 434398: libpkix cannot find issuer cert immediately after checking it with ocsp bug 434808: certutil -b deadlock when importing two or more roots bug 434860: coverity 1150 - dead code in ocsp_createcertid bug 436428: remove unneeded assert from sec_pkcs7encryptlength bug 436430: make nss public he...

NSS tools : modutil
text file containing a token's new or replacement password so that a password can be entered automatically with the -changepw option. -nocertdb do not open the certificate or key databases. this has several effects: o with the -create command, only a module security file is created; certificate and key databases are not created. o with the -jar command, signatures on the jar file are not checked. o with the -changepw command, the password on the nss internal module cannot be set or changed, since this password is stored in the key database. -pwfile old-password-file specify a text file containing a token's existing password so that a password can be entered automatically when the -changepw option is used to change passwords. -secmod secmodname give the name of the security modul...
..., all white space (for example, spaces, tabs, and carriage returns) is considered equal and is used only to delimit tokens. keys the java install file uses keys to define the platform and module information. forwardcompatible gives a list of platforms that are forward compatible. if the current platform cannot be found in the list of supported platforms, then the forwardcompatible list is checked for any platforms that have the same os and architecture in an earlier version. if one is found, its attributes are used for the current platform. platforms (required) gives a list of platforms. each entry in the list is itself a key-value pair: the key is the name of the platform and the value list contains various attributes of the platform. the platform string is in the format system nam...

sslfnc.html
isserver); this callback function has the following parameters: arg a pointer supplied by the application (in the call to ssl_authcertificatehook) that can be used to pass state information. can be null. fd a pointer to the file descriptor for the ssl socket. checksig pr_true means signatures are to be checked and the certificate chain is to be validated. pr_false means they are not to be checked. (the value is normally pr_true.) isserver pr_true means the callback function should evaluate the certificate as a server does, treating the remote end as a client. pr_false means the callback function should evaluate the certificate as a client does, treating the remote end as...
...e of the certificate database to be used in validating the certificate's signature. (this use of the arg parameter is required for ssl_authcertificate, but not for all implementations of a certificate authentication callback function.) fd a pointer to the file descriptor for the ssl socket. checksig pr_true means signatures are to be checked and the certificate chain is to be validated. pr_false means they are not to be checked. (the value is normally pr_true.) isserver pr_true means the callback function should evaluate the certificate as a server does, treating the remote end is a client. pr_false means the callback function should evaluate the certificate as a client does, treating the remote end as...

NSS Tools modutil
kenname option. -slot slotname specify a particular slot to be enabled or disabled with the -enable modulename or -disable modulename options. -nocertdb do not open the certificate or key databases. this has several effects: with the -create command, only a secmod.db file will be created; cert8.db and key3.db will not be created. with the -jar command, signatures on the jar file will not be checked. with the -changepw command, the password on the netscape internal module cannot be set or changed, since this password is stored in key3.db. usage the security module database tool's capabilities are grouped as follows, using these combinations of options and arguments. the options and arguments in square brackets are optional, those without square brackets are required. creating ...
...age returns) is considered equal and is used only to delimit tokens. keys keys are case-insensitive. this section discusses the following keys: global keysper-platform keysper-file keys global keys forwardcompatible gives a list of platforms that are forward compatible. if the current platform cannot be found in the list of supported platforms, then the forwardcompatible list is checked for any platforms that have the same os and architecture in an earlier version. if one is found, its attributes are used for the current platform. platforms (required) gives a list of platforms. each entry in the list is itself a key-value pair: the key is the name of the platform and the value list contains various attributes of the platform. the modulename, modulefile, and files attributes ...

NSS tools : modutil
d automatically with the -changepw option. -nocertdb do not open the certificate or key databases. this has several effects: o with the -create command, only a module security file is created; certificate and key databases are not created. o with the -jar command, signatures on the jar file are not checked. o with the -changepw command, the password on the nss internal module cannot be set or changed, since this password is stored in the key database. -pwfile old-password-file specify a text file containing a token's existing password so that a password can be entered automatically when the -changepw option is used...
...e (for example, spaces, tabs, and carriage returns) is considered equal and is used only to delimit tokens. keys the java install file uses keys to define the platform and module information. forwardcompatible gives a list of platforms that are forward compatible. if the current platform cannot be found in the list of supported platforms, then the forwardcompatible list is checked for any platforms that have the same os and architecture in an earlier version. if one is found, its attributes are used for the current platform. platforms (required) gives a list of platforms. each entry in the list is itself a key-value pair: the key is the name of the platform and the value list contains various attributes of the platform. the platform string is in the form...

JSCheckAccessOp
id, jsaccessmode mode, jsval *vp); name type description cx jscontext * the js context in which the property access attempt is occurring. obj jsobject * the object whose properties are being accessed. id jsval the name or index of the property being accessed. mode jsaccessmode the type of access being checked. vp jsval * out parameter. on success, the callback must set *vp to the stored value of the property. description check whether obj[id] may be accessed per mode, returning js_false on error/exception, js_true on success with obj[id]'s stored value in *vp. as for jspropertyop, id is either a string or an int jsval. jscheckaccessop implementations generally work by using jsd...
... description check whether obj[id] may be accessed per mode, returning js_false on error/exception, js_true on success with obj[id]'s stored value in *vp. as for jspropertyop, id is either a string or an int jsval. jscheckaccessop implementations generally work by using jsdbgapi functions such as js_frameiterator and js_stackframeprincipals to obtain the principals of the code attempting the checked operation, then examining those principals and comparing them with the system's security policy. the nature of principals and the security policy are entirely up to the application. if a class leaves the checkaccess field null, a runtime-wide object access callback is called instead; see js_setcheckobjectaccesscallback. jsclass hooks jsclass offers the following hook: the jsclass.checkac...

nsIEditorSpellCheck
onary(); parameters none. getpersonaldictionaryword() used after you call getpersonaldictionary() to iterate through all the words added to the personal dictionary. returns an empty string when there are no more words. wstring getpersonaldictionaryword(); parameters none. return value the next word in the personal dictionary. ...
...ignorewordalloccurrences() tells the spell checker to ignore all occurrences of the specified word when spell checking the document. void ignorewordalloccurrences( in wstring word ); parameters word the word to ignore when spell checking. ...

nsINavBookmarksService
he bookmark, i will get redirected to "www.mozilla.org". logically, this new page is also bookmarked. this function, if given "www.mozilla.org", will return the uri of the bookmark, in this case "mozilla.org". note: will only return bookmarks in the first 3 levels of redirection (1 -> 2 -> 3 -> auri). nsiuri getbookmarkedurifor( in nsiuri auri ); parameters auri the uri that needs to be checked if it is bookmarked or not. return value native code only!getbookmarkfolderstarray obsolete since gecko 1.9 (firefox 3)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. tarray version of getbookmarkfolders() for ease of use in c++ code. pass in a reference to a tarray; it will get clea...
...the folder, or default_index to append to the end of the list. return value the id of the new separator. isbookmarked() this method checks whether or not the given uri is in any bookmark folder. if you want the results to be redirect-aware, use getbookmarkedurifor() boolean isbookmarked( in nsiuri auri ); parameters auri the uri whose existence in any bookmark folder is needed to be checked. return value returns true if the given uri is in any bookmark folder, otherwise returns false. movefolder() obsolete since gecko 1.9 (firefox 3) note: moveitem() provides an alternative for this method. moves a folder to a different container, preserving its contents. void movefolder( in print64 folder, in print64 newparent, in print32 index ); parameters...

XPIDL
). for example, the method '[binaryname(foo)] void bar();' becomes 'nsresult foo()' in native code (note that capitalization is still applied). however, the capitalization is not applied when using binaryname with attributes; i.e., [binaryname(foo)] readonly attribute quux bar; becomes getfoo(quux**) in native code. attributes named 'iid' and methods named 'getiid' are forbidden, although this is checked before binaryname conversion. the implicit_jscontext and optional_argc parameters are properties which help native code implementations determine how the call was made from script. if implicit_jscontext is present on a method, then an additional jscontext *cx parameter is added just after the regular list which receives the context of the caller. if optional_argc is present, then an additional u...
...etter. this property can only be used for attributes having built-in or interface types, and within classes that are marked with builtinclass. the latter restriction is because c++ implementations of fallible getters can be audited for infallibility, but js implementations cannot. the must_use property is useful if the result of a method call or an attribute get/set should always (or usually) be checked, which is frequently the case. (e.g. a method that opens a file should almost certainly have its result checked.) this property will cause moz_must_use to be added to the generated function declarations, which means certain compilers (e.g. clang and gcc) will reports errors if these results are not used. source and binary compatibility some consumers of idl interfaces create binary plugins that...

Responsive Design Mode - Firefox Developer Tools
ge the value by 10. the mouse wheel changes the size values by 1 pixel at a time you can also change the device's screen size by grabbing the bottom-right corner of the viewport and dragging it to the size you want. orientation (portrait or landscape) - this setting persists between sessions screenshots are saved to firefox's default download location. if you checked "screenshot to clipboard" in the developer tools settings page, then the screenshot will be copied to the system clipboard. dpr (pixel ratio) - beginning with firefox 68, the dpr is no longer editable; create a custom device in order to change the dpr throttling - a drop-down list where you can select the connection throttling to apply, for example 2g, 3g, or lte enable/disable touch ...
...t when touch simulation is enabled, this toolbar icon is blue; when simulation is disabled, it is black. on the right end of the screen, three buttons allow you to: camera button - take a screenshot settings button - opens the rdm settings menu close button - closes rdm mode and returns to regular browsing the settings menu includes the following commands: left-align viewport - when checked moves the rdm viewport to the left side of the browser window show user agent - when checked displays the user agent string the final two options define when the page is reloaded: reload when touch simulation is toggled: when this option is enabled, the page is reloaded whenever you toggle touch support. reload when user agent is changed: when this option is enabled, the page isreloade...

Element: overflow event - Web APIs
rendered for the first time in this state (only works for elements styled with overflow != visible). it is a proprietary event specific to gecko (firefox). ...
... ...

Element: underflow event - Web APIs
flowed by its content. this only works for elements for which overflow is not set to visible. the counterpart overflow event is fired when overflow occurs. ...
... ...

GlobalEventHandlers.oninvalid - Web APIs
syntax target.oninvalid = functionref; var functionref = target.oninvalid; value functionref is a function name or a function expression. the function receives a event object as its sole argument. ...
... syntax target.oninvalid = functionref; var functionref = target.oninvalid; value functionref is a function name or a function expression. the function receives a event object as its sole argument. ...

HTMLInputElement: invalid event - Web APIs
the invalid event fires when a submittable element has been checked for validity and doesn't satisfy its constraints. bubbles no cancelable yes interface event event handler property globaleventhandlers.oninvalid this event can be useful for displaying a summary of the problems with a form on submission. when a form is submitted, invalid events are fired at each form control that is invalid. the validity of submittable elements is checked before submitting their owner <form>, or after the checkvalidity() method of the element or its owner <form> is called. it is not checked on blur. ...
...in this example, when an invalid event fires because of an invalid value in the input, the invalid value is logged. ...

Drag Operations - Web APIs
ag-over css pseudoclass on a drop target. .droparea:-moz-drag-over { outline: 1px solid black; } in this example, the element with the class droparea will receive a 1 pixel black outline while it is a valid drop target, that is, if the preventdefault() method was called during the dragenter event. note: you must cancel the dragenter event for this pseudoclass to apply, as this state is not checked for the dragover event. for more complex visual effects, you can also perform other operations during the dragenter event. for example, by inserting an element at the location where the drop will occur. this might be an insertion marker, or an element that represents the dragged element in its new location. to do this, you could create an image or separator element and simply insert it into the...
...ent = data; event.preventdefault(); } the getdata() method takes one argument, the type of data to retrieve. it will return the string value that was set when setdata() was called at the beginning of the drag operation. an empty string will be returned if data of that type does not exist. (naturally, though, you would likely know that the right type of data was available, as it was previously checked during a dragover event.) in the example here, once the data has been retrieved, we insert the string as the textual content of the target. this has the effect of inserting the dragged text where it was dropped, assuming that the drop target is an area of text such as a p or div element. in a web page, you should call the preventdefault() method of the event if you have accepted the drop, so th...

IntersectionObserver.takeRecords() - Web APIs
the intersectionobserver method takerecords() returns an array of intersectionobserverentry objects, one for each targeted element which has experienced an intersection change since the last time the intersections were checked, either explicitly through a call to this method or implicitly by an automatic call to the observer's callback. note: if you use the callback to monitor these changes, you don't need to call this method. calling this method clears the pending intersection list, so the callback will not be run. ...
...you don't need to call this method. calling this method clears the pending intersection list, so the callback will not be run. syntax intersectionobserverentries = intersectionobserver.takerecords(); parameters none. return value an array of intersectionobserverentry objects, one for each target element whose intersection with the root has changed since the last time the intersections were checked. examples <<<...>>> specifications specification status comment intersection observerthe definition of 'intersectionobserver.takerecords()' in that specification. working draft initial definition. ...

Timing element visibility with the Intersection Observer API - Web APIs
since it's theoretically possible to get called multiple times, we only proceed if we haven't already paused the timers and saved the visibility states of the existing ads. to pause the timers, all we need to do is remove the ads from the set of visible ads (visibleads) and mark them as inactive. to do so, we begin by saving the set of visible ads...
...+ diff; } adbox.dataset.lastviewstarted = currenttime; } to track an element's visible time, we use two custom data attributes (see data-*) on every ad: lastviewstarted the time in milliseconds, relative to the time at which the document was created, at which the ad's visibility count was last updated, or the ad last became visible. 0 if the ad was not visible as of the last time it was checked. totalviewtime the total number of milliseconds the ad has been visible. these are accessed through each ad's htmlelement.dataset attribute, which provides a domstringmap mapping each custom attribute's name to its value. the values are strings, but we can convert those to numbers easily enough—in fact, javascript generally does it automatically, although we'll have one instance where we ha...

NodeList - Web APIs
nodelists, since they will also enumerate its length and item properties and cause errors if your script assumes it only has to deal with element objects. also, for..in is not guaranteed to visit the properties in any particular order. ...
... living standard document object model (dom) level 3 core specificationthe definition of 'nodelist' in that specification. ...

ParentNode.replaceChildren() - Web APIs
ns to, using the spread operator to pass in all the options contained in both constants. ...
... living standard initial definition. ...

RadioNodeList - Web APIs
="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">radionodelist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties the radionodelist interface inherits the properties of nodelist. radionodelist.value if the underlying element collection contains radio buttons, the value property represents the checked radio button. on retrieving the value property, the value of the currently checked radio button is returned as a string. if the collection does not contain any radio buttons or none of the radio buttons in the collection is in checked state, the empty string is returned. on setting the value property, the first radio button input element whose value property is equal to the new value will be set ...
... methods the radionodelist interface inherits the methods of nodelist. ...

Using the Web Speech API - Web APIs
two distinct areas of functionality — speech recognition, and speech synthesis (also known as text to speech, or tts) — which open up interesting new possibilities for accessibility, and control mechanisms. this article provides a simple introduction to both areas, along with demos. speech recognition speech recognition involves receiving speech through a device's microphone, which is then checked by a speech recognition service against a list of grammar (basically, the vocabulary you want to have recognised in a particular app.) when a word or phrase is successfully recognised, it is returned as a result (or list of results) as a text string, and further actions can be initiated as a result. the web speech api has a main controller interface for this — speechrecognition — plus a numb...
... list of all the available voices, represented by speechsynthesisvoice objects. we then loop through this list — for each voice we create an <option> element, set its text content to display the name of the voice (grabbed from speechsynthesisvoice.name), the language of the voice (grabbed from speechsynthesisvoice.lang), and -- default if the voice is the default voice for the synthesis engine (checked by seeing if speechsynthesisvoice.default returns true.) we also create data- attributes for each option, containing the name and language of the associated voice, so we can grab them easily later on, and then append the options as children of the select. function populatevoicelist() { voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement...

Using XMLHttpRequest - Web APIs
detecting the correct one is non-trivial. */ /* field type is not file or is file but is empty */ this.segments.push( this.technique === 3 ? /* enctype is multipart/form-data */ "content-disposition: form-data; name=\"" + ofield.name + "\"\r\n\r\n" + ofield.value + "\r\n" : /* enctype is app...
...continue; } sfieldtype = ofield.nodename.touppercase() === "input" ? ...

XRPermissionDescriptor.requiredFeatures - Web APIs
the xrpermissiondescriptor dictionary's requiredfeatures property should be set prior to calling navigator.permissions.query() to a list of webxr features which must be supported for the app to work. this ensures that permissions are checked as applicable to ensure that those features are available upon request. syntax xrpermissiondescriptor = { mode: xrsessionmode, requiredfeatures: reqfeaturelist, optionalfeatures: optfeaturelist }; xrpermissiondescriptor.requiredfeatures = reqfeaturelist; reqfeaturelist = xrpermissiondescriptor.requiredfeatures; value an array of strings indicating the webxr features which must be available for use by the app or site. the permissions check will be performed in such a manner as to verify that all features in the list are available for use with ...
...ed by all instances of xrsession, both immersive and inline, though it's most useful for inline sessions. it's particularly useful when determining the distance between the viewer and an input, or when working with offset spaces. otherwise, typically, one of the other reference space types will be used more often. xrreferencespace usage notes examples in this example, permissions are checked to ensure that the user has granted permission for the site or app to use immersive augmented reality mode with the local-floor reference space (presumably since the user is unlikely to start to fly). let xrpermissiondesc = { name: "xr", mode: "immersive-ar", requiredfeatures: [ "local-floor" ] }; if (navigator.permissions) { navigator.permissions.query(xrpermissiondesc).then(({state}) ...

Accessibility documentation index - Accessibility
element as being a cell in a tabular container that does not contain column or row header information. to be supported, the cell must be nested in an element with the role of row. 57 aria: checkbox role aria, accessibility, needscontent, role(2), rôle the checkbox role is used for checkable interactive controls. elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology. 58 aria: contentinfo role aria, aria role, reference, role-contentinfo the contentinfo landmark role is used to identify information repeated at the end of every page of a website, including copyright information, navigation links, and privacy statements. this section is commonly called a footer. 59 ...
...ch role aria, aria role, reference, role-search the search landmark role is used to identify a section of the page used to search the page, site, or collection of sites. 72 aria: switch role aria, aria role, accessibility, on/off, reference, switch, a11y, toggle the aria switch role is functionally identical to the checkbox role, except that instead of representing "checked" and "unchecked" states, which are fairly generic in meaning, the switch role represents the states "on" and "off." 73 aria: tab role aria, aria role, aria tab, aria widget, reference the aria tab role indicates an interactive element inside a tablist that, when activated, displays its associated tabpanel. 74 aria: table role aria, aria role, aria table, aria t...

:default - CSS: Cascading Style Sheets
...
... it is a <form>’s default submission button: the first <button> in dom order that belongs to the form. this also applies to <input> types that submit forms, like image or submit. ...

:indeterminate - CSS: Cascading Style Sheets
the :indeterminate css pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their html indeterminate attribute set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate <progress> elements. ...
...adio buttons are unchecked, and indeterminate <progress> elements. /* selects any <input> whose state is indeterminate */ input:indeterminate { background: lime; } elements targeted by this selector are: <input type="checkbox"> elements whose indeterminate property is set to true by javascript <input type="radio"> elements, when all radio buttons with the same name value in the form are unchecked <progress> elements in an indeterminate state syntax :indeterminate examples checkbox & radio button this example applies special styles to the labels associated with indeterminate form fields. html <div> <input type="checkbox" id="checkbox"> <label for="checkbox">this label starts out lime.</label> </div> <div> <input type="radio" id="radio"> <label for="radio">this label starts...

transform-style - CSS: Cascading Style Sheets
on the browser you are using. ...
... editor's draft initial definition. ...

Creating a cross-browser video player - Developer guides
gress = 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. most of these buttons require a simple click event listener to be added, and a media api defined method and/or attributes to be called/checked on the video. play/pause playpause.addeventlistener('click', function(e) { if (video.paused || video.ended) video.play(); else video.pause(); }); when a click event is detected on the play/pause button, the handler first of all checks if the video is currently paused or has ended (via the media api's paused and ended attributes); if so, it uses the play() method to playback the video. o...
....fullscreen || document.webkitisfullscreen || document.mozfullscreen || document.msfullscreenelement || document.fullscreenelement); } this function checks all the various browser prefixed versions to try and determine the correct result. if the browser is currently in fullscreen mode, then it must be exited and vice versa. support for the different prefixed versions of the relevant action are checked in order to call the correct one. interestingly document must be used for exiting/cancelling fullscreen mode, whereas any html element can request fullscreen mode, here the videocontainer is used as it also contains the custom controls which should also appear with the video in fullscreen mode. the exception to this is safari 5.1, which will only allow webkitrequestfullscreen to be called on the...

Rich-Text Editing in Mozilla - Developer guides
ndow').execcommand(aname,false, aarg); document.getelementbyid('editorwindow').contentwindow.focus() } example: a simple but complete rich text editor <!doctype html> <html> <head> <title>rich text editor</title> <script type="text/javascript"> var odoc, sdeftxt; function initdoc() { odoc = document.getelementbyid("textbox"); sdeftxt = odoc.innerhtml; if (document.compform.switchmode.checked) { setdocmode(true); } } function formatdoc(scmd, svalue) { if (validatemode()) { document.execcommand(scmd, false, svalue); odoc.focus(); } } function validatemode() { if (!document.compform.switchmode.checked) { return true ; } alert("uncheck \"show html\"."); odoc.focus(); return false; } function setdocmode(btosource) { var ocontent; if (btosource) { ocontent = document.c...
... resources mozilla.org's rich-text editing specification mozilla.org's rich-text editing demo converting an app u...

Making content editable - Developer guides
pboard.cutcopy", "allaccess"); user_pref("capability.policy.allowclipboard.clipboard.paste", "allaccess"); example: a simple but complete rich text editor <!doctype html> <html> <head> <title>rich text editor</title> <script type="text/javascript"> var odoc, sdeftxt; function initdoc() { odoc = document.getelementbyid("textbox"); sdeftxt = odoc.innerhtml; if (document.compform.switchmode.checked) { setdocmode(true); } } function formatdoc(scmd, svalue) { if (validatemode()) { document.execcommand(scmd, false, svalue); odoc.focus(); } } function validatemode() { if (!document.compform.switchmode.checked) { return true ; } alert("uncheck \"show html\"."); odoc.focus(); return false; } function setdocmode(btosource) { var ocontent; if (btosource) { ocontent = document.c...
... ...

HTML attribute reference - HTML: Hypertext Markup Language
e time range of already buffered media. capture <input> from the html media capturethe definition of 'media capture' in that specification.spec, specifies a new file can be captured. challenge <keygen> a challenge string that is submitted along with the public key. charset <meta>, <script> declares the character encoding of the page or script. checked <command>, <input> indicates whether the element should be checked on page load. cite <blockquote>, <del>, <ins>, <q> contains a uri which points to the source of the quote or change. class global attribute often used with css to style elements with common properties. code <applet> specifies the url of the applet's class file to be loaded and exe...
...t invalid xml. </div> <div itemscope=""> this is valid html and also valid xml. </div> <div itemscope="itemscope"> this is also valid html and xml, but perhaps a bit verbose. </div> to be clear, the values "true" and "false" are not allowed on boolean attributes. to represent a false value, the attribute has to be omitted altogether. this restriction clears up some common misunderstandings: with checked="false" for example, the element’s checked attribute would be interpreted as true because the attribute is present. ...

<menuitem> - HTML: Hypertext Markup Language
. (if specified, the type attribute of the <menu> element must be popup; if missing, the parent element of the <menu> must itself be a <menu> in the popup menu state.) permitted aria roles none dom interface htmlmenuitemelement attributes this element includes the global attributes; in particular title can be used to describe the command, or provide usage hints. checked boolean attribute which indicates whether the command is selected. may only be used when the type attribute is checkbox or radio. command specifies the id of a separate element, indicating a command to be invoked indirectly. may not be used within a menu item that also includes the attributes checked, disabled, icon, label, radiogroup or type. default this boolean attribute indicates use of ...
...ckbox: represents a command that can be toggled between two different states. radio: represent one selection from a group of commands that can be toggled as radio buttons. example html content <!-- a <div> element with a context menu --> <div contextmenu="popup-menu"> right-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. </menuitem> <menuitem type="command" label="this command has javascript" onclick="alert('command clicked')"> commands don't render their contents. </menuitem> <hr> <menuitem type="radio" ...

HTML documentation index - HTML: Hypertext Markup Language
he slot global attribute assigns a slot in a shadow dom shadow tree to an element: an element with a slot attribute is assigned to the slot created by the <slot> element whose name attribute's value matches that slot attribute's value. 29 spellcheck global attributes, html, reference the spellcheck global attribute is an enumerated attribute defines whether the element may be checked for spelling errors. 30 style global attributes, html, reference the style global attribute contains css styling declarations to be applied to the element. note that it is recommended for styles to be defined in a separate file or files. this attribute and the <style> element have mainly the purpose of allowing for quick styling, for example for testing purposes. 31 ...
...n 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). 120 <input type="checkbox"> element, html, html forms, input, input types, reference, checkbox, form <input> elements of type checkbox are rendered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper form. the exact appearance depends upon the operating system configuration under which the browser is running. generally this is a square but it may have rounded corners. a checkbox allows you to select single values for submission in a form (or not). 121 <input type="color"> color picker, element, form inp...

tabs - Archive of obsolete content
tabs hosted by private browser windows won't be seen if you enumerate the tabs module itself, and you won't receive any events for them. to learn m...

ui - Archive of obsolete content
", icon: "./icon.png", onclick: function(state) { console.log("you clicked '" + state.label + "'"); } }); you can make a button standalone or add it to a toolbar. if it's standalone, it appears in the toolbar at the top right of the browser window: togglebutton a toggle button is a special kind of button that's for representing a binary on/off state, like a checkbox. so they have a checked property which is toggled when the user clicks the button, and the icon gets a "pressed" look when the button is checked. it's otherwise identical to the action button. attaching panels to buttons is only supported from firefox 30 onwards. from firefox 30 onwards, you can attach panels to toggle buttons, by passing the button into the panel's constructor or its show() method: frame a fram...

ui/button/action - Archive of obsolete content
if you specify multiple icons, firefox will select the best-fitting icon based on the device screen resolution and the place the icon appears. for example, in the screenshots above, firefox uses the small ic...

jpm - Archive of obsolete content
cepts the following options: --api-key=jwt_issuer api access key (string) generated on the addons.mozilla.org key management page. on the amo key management page, this value is labeled "jwt issuer". --api-secret=jwt_secret api access secret (string) generated on the addons.mozilla.org key management page. this value should be guarded with care and never checked into version control. if your secret is compromised, another developer could upload add-ons to your account. you should revoke and regenerate compromised api credentials immediately. on the amo key management page, this value is labeled "jwt secret". --api-url-prefix=http://.../api an optional api url prefix in case you'd like to use a pre-production signing api. fo...

Adding a Button to the Toolbar - Archive of obsolete content
o a remote file. you can change the icon at any time by setting the button's icon property. you can change the icon, and the other state attributes, either globally, for a specific window, or for a specific tab. read more about updating state. attaching a panel if you need to attach a panel to a button, use the toggle button api. this is just like the action button api except it adds a boolean checked property which is toggled whenever the button is checked. to attach the panel, pass the button to the panel's show() method. for more details on this, see the toggle button's documentation. displaying richer content to create more complex user interface content than is possible with just a button, use the toolbar api. with the toolbar api you get a complete horizontal strip of user interface re...

Getting started (cfx) - Archive of obsolete content
odules the sdk modules you use to implement your add-on are built into firefox. when you run or package an add-on using cfx run or cfx xpi, the add-on will use the versions of the modules in the version of firefox that hosts it. as an add-on developer, this is usually what you want. but if you're developing the sdk modules themselves, of course, it isn't. in this case it's assumed that you have checked out the sdk from its github repo and will have run the bin/activate script from the root of your checkout. then when you invoke cfx run or cfx xpi, you pass the "-o" option: cfx run -o this instructs cfx to use the local copies of the sdk modules, not the ones in firefox. developing without cfx run because cfx run restarts the browser each time you invoke it, it can be a little cumbersome i...

Examples and demos from articles - Archive of obsolete content
lgorithms. this is a common technique used, for example, in order to create pure-css dropdown menus (that is only css, without using javascript). .[article] pure-css web gallery based on the :hover pseudoclass [zip] you can use the :hover pseudo-class in order to build an image gallery with full-size images shown only when mouse goes over previews. .[article] pure-css web gallery based on the :checked pseudoclass [zip] you can also use the :checked pseudo-class applied to hidden radioboxes in order to build, for example, an image gallery with full-size images shown only when mouse clicks on previews. [article] pure-css tooltips [html] this shows the use of the ::after pseudo-element in conjunction with the attr() css expression and a data-descr custom data attribute to create a pure-css, gl...

Sidebar - Archive of obsolete content
startup. users have been known to complain about this "feature", and if two or more extensions try to open their sidebars on startup, the user will see a flurry of sidebars opening and closing with which ever extension going last "winning". web panels sidebar content such as web pages can be safely loaded as sidebar in the "viewwebpanelssidebar". bookmarks with "load this bookmark in sidebar" checked in the properties open in the "viewwebpanelssidebar". a web page can use window.sidebar to create bookmark with that property. to open a page in the "viewwebpanelssidebar" from chrome code (browser/addon/extension) such as from menuitem, it can call: openwebpanel(atitle, auri); accessing the sidebar from a browser.xul script the sidebar content is always in a document separate from the main b...

Adding windows and dialogs - Archive of obsolete content
attribute values so that the window reloads it last state when opened. most xul elements support the persist attribute, which has this exact function. you set the persist attribute with a space-separated list of attribute names, indicating which attribute values must be persisted across window "sessions". <checkbox id="xulschoolhello-some-checkbox" label="&xulschoolhello.sometext.label;" checked="false" persist="checked" /> setting the id attribute of the element is mandatory if you want the persist attribute to work. you can also set persistence programatically using the document.persist function: document.persist("xulschoolhello-some-checkbox", "checked"); persistent data is stored in the user profile, in the file localstore.rdf. you may need to modify or delete this file ofte...

CSS3 - Archive of obsolete content
mespaces by defining the notion of css qualified name, using the ' | ' syntax and adding the @namespace css at-rule. selectors level 3 recommendation since september 29th, 2011 adds: substring matching attribute selectors, e[attribute^="value"], e[attribute$="value"], e[attribute*="value"] . new pseudo-classes: :target, :enabled and :disabled, :checked, :indeterminate, :root, :nth-child and :nth-last-child, :nth-of-type and :nth-last-of-type, :last-child, :first-of-type and :last-of-type, :only-child and :only-of-type,:empty, and :not. pseudo-elements are now characterized by two colons rather than one: :after becomes ::after, :before becomes ::before, :first-letter becomes ::first-letter, and :first-line becomes ::first-line. the new...

JXON - Archive of obsolete content
t> becomes "test" element names become object properties: <root><name>xml</name><encoding>ascii</encoding></root> becomes { "name": "xml", "encoding": "ascii" } numbers are recognized (integers and decimals): <root><age>12</age><height>1.73</height></root> becomes { "age": 12, "height": 1.73 } booleans are recognized case insensitive: <root><checked>true</checked><answer>false</answer></root> becomes { "checked": true, "answer": false } strings are escaped: <root>quote: &quot; new-line: </root> becomes "quote: \" new-line:\n" empty elements will become null: <root><nil/><empty></empty></root> becomes { "nil": null, "empty": null } if all sibling elements have the same name, they become an ...

Source Navigator - Archive of obsolete content
ore by pressing 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. then click "ok". the snavigator then begins to scan your source directories. this takes a few minutes. now you can enjoy searching the mozilla code in a faster speed. using source navigator (more later) opening a project open a terminal. type <tt>snavigator</tt> followed by striking enter. this shows the "source-navigator projects" dialog. choose the project file that you've just created an...

Creating a Release Tag - Archive of obsolete content
m. note that there are a couple of extra files for win32 and macintosh that aren't pulled by the normal script and need to be pulled by hand. the mini-branch is created so you can check in the build scripts with the necessary changes without touching the original branch. check out mozilla from the branch you want to tag. remember to also check out extra mac and win32 files that aren't normally checked out on linux or the tag won't build on those platforms. cvs co -r netscape_6_2_release mozilla/client.mk cd mozilla gmake -f client.mk checkout create a mini branch for the pull scripts on all three platforms so we can change them without changing anything on the original branch. cd .. cvs tag -b mozilla_0_9_4_1_release_mini_branch mozilla/client.mk delete the existing build s...

Installing Dehydra - Archive of obsolete content
upported on mac os x. building spidermonkey it is recommended that you use spidermonkey revision aurora_base_20110705 when building dehydra. cd $home hg clone http://hg.mozilla.org/mozilla-central/ cd mozilla-central hg update aurora_base_20110705 cd js/src autoconf-2.13 mkdir $home/obj-js cd $home/obj-js $home/mozilla-central/js/src/configure --enable-optimize --disable-debug make it has to be checked whether later/newer branches (like aurora_base_20120131) are working, too. please also note that autoconf v2.13 is really needed: it does not work with e.g. v2.68. there is no need for some installation after make. you can skip the next section "building gcc 4.5" if you are using gcc 4.6 or above. building gcc 4.5 for treehydra's process_tree_decl to work, when compiling with g++, you must use a ...

Developing New Mozilla Features - Archive of obsolete content
er. if you think your feature can only be implemented and reviewed in one enormous chunk, ask for design help in the appropriate newsgroup and/or from the developers with whom you have established relationships. if it is not possible to submit your feature in manageable size patches and you submit a 500k patch, be prepared for several months of review and revision before the patch is ready to be checked in it may not take this long. but if your team has worked for months on a feature, it is going to take reviewers new to the code a long time to work their way through it. and if it’s not possible to design the feature in bite-size chunks, it probably won’t be possible to review it that way either. we expect our reviewers to understand the code they approve for check-in, not to simply glance ...

Content states and the style system - Archive of obsolete content
we will focus on describing how changes in content state are handled. generally, whenever a node's content state changes, style has to be reresolved (recomputed) for that node and all of its descendants. this is an expensive operation, however, so the style system tries to minimize the number of style reresolves it does. ...

JavaScript crypto - Archive of obsolete content
ngeresponse() function is not implemented. ...

Hacking wiki - Archive of obsolete content
et the css files needed: export cvsroot=:pserver:anonymous@cvs-mirror.mozilla.org:/www cvs login cvs co mozilla-org/css (when prompted to enter a password, type <tt>anonymous</tt>) setting up copy the contents of the <tt>trunk</tt> folder and the <tt>css</tt> folder (note: the folder itself) into the <tt>www</tt> directory on your server. the contents of the <tt>trunk</tt> directory you just checked out is a slightly modified mediawiki install, so you can follow the mediawiki install instructions. the <tt>css</tt> folder contains files that are supposed to be in the <tt>/css</tt> directory of the site.) to get a working install, you need to configure mediawiki. it's done by navigating to <tt>/config/index.php</tt> in your web browser. polvi claims that you'll have it, but in case you don't, ...

Proxy UI - Archive of obsolete content
ble and did not match any of the previous protocols), then use socks. the socks version is selected by radio buttons: ( ) socks v4 ( ) socks v5 "no proxy for:" discussed in detail elsewhere... but should be noted that if you cut and paste from ie, the semi-colons are automatically converted to commas when you save changes (ff, tb, sm). automatic proxy configuration url supports a url (which is checked via urifixup) and a reload button. offline|online "plug" location status bar on the right side. right-click a menu is displayed that has the following items: online (proxy: none) online (proxy: auto discover) online (proxy: auto url) online (proxy: manual) --- proxy configuration... <h7 name="details">details</h7> the menu should display the current proxy mode with a dot. the modes that can have ...

Space Manager High Level Design - Archive of obsolete content
edge of the available space. the blockreflowstate then stores this available space rect for use in the rest of the reflow chain. use case 4: propagation of float damage: detecting and handling float damage this process is driven by the block frame. ...

Table Layout Regression Tests - Archive of obsolete content
auto right: auto bottom: auto auto 0[0x0]tw null auto 0[0x0]tw null 0 auto |0 0 0 normal normal 0[0x0]tw normal |0 11 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 null comparison for file:///e:/moz_src/mozilla/layout/html/tests/table/core/baseline/standards1.rgd failed. the first regression test has failed and it is marked so. adding new regression tests once you have checked in the code: please add your testcase for the bug to the regression tests. a testcase should only contain local files. place the images in table/images block/images or (don't forget cvs commit -kb) and the test file in the table/bugs or block/bugs directory. update the rtest.lst file in the corresponding directory in order to include your file. additional notes there is a special type o...

Running Tamarin performance tests - Archive of obsolete content
environment variable to the path of the asc.jar compiler. you may download the latest asc.jar from ftp://ftp.mozilla.org/pub/js/tamarin...latest/asc.jar. also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/dis...exsdk/flex+sdk. (optional) you may compare the performance of the avmshell to another avmshell. for example you may download or build the latest checked in avmshell to compare against a local change. to compare a build against another build set the avm2 environment variable to the other avmshell or use the "-s --avm2" options. results from the two shells will be shown side to side and the percent speedup will be shown. $ cd tamarin-redux/test/performance $ python runtests.py executing tests at 2008-07-22 13:56:54.820920 avm: c:/dev/tamarin-traci...

Tamarin build documentation - Archive of obsolete content
enable this go to eclipse preferences >> c/c++ >> indexer, then select 'use active build configuration' in the 'build configuration for the indexer' section. ...

Tamarin mercurial commit hook - Archive of obsolete content
arin. the hook is located in the tamarin-redux repository in the file utils/hooks/tamarin-commit-hook.py this is a simple mercurial hook that checks the following filetypes ('.cpp', '.h', '.as', '.abs', '.py') for the following: tabs anywhere in the line trailing whitespace windows line endings (\r\n) "mark_security_change" - looks for this text and warns user as security changes should not be checked into the public tamarin-redux repository. installing the commit hook the easiest way to implement the hook is to sync to the tip of tamarin-redux then add the following to your tamarin-redux/.hg/hgrc file (or to ~/.hgrc to implement for all local repos): [hooks] pretxncommit.commit = python:/path/to/tamarin-redux/utils/hooks/tamarin-commit-hook.py:master_hook once added, all commits will run th...

Using cross commit - Archive of obsolete content
getting the script "make -f client.mk pull_all" from a working copy of the trunk now pulls cross-commit, and that'll work on the 1.8 branch soon, too, so you might already have the script. if you don't, however, then from the parent directory of your source dir, do: cvs co mozilla/tools/cross-commit note that you will need to have $cvsroot and such set up correctly for this to work. ...

Venkman Introduction - Archive of obsolete content
ce text for the selected function. this is the same text you would get from the tosource method of the function prototype. if the source text you are debugging is poorly formatted, pretty print can help make it easier to read by inserting line breaks and whitespace in appropriate places. when pretty print is enabled you will see a green check mark on the toolbar button, and the menu item will be checked as well. the loaded scripts view the loaded scripts view is in the top left portion of the window. when a file is loaded by the browser it will appear in this view, and when unloaded it will be removed. files are listed in alphabetical order, grouped by file type. file names are displayed after a color coded, single letter icon representing the file extension. figure 6 shows the table of icon...

XML in Mozilla - Archive of obsolete content
lete since gecko 1.9.1 internet-draft document.load(), document.async part of dom level 3 load & save module, a w3c working draft xhtml we have reasonable xhtml support, most things should work. we treat xhtml documents differently depending on the mime type (or file suffix if files are loaded from local discs). files that go through the html code path are not checked for well-formedness. you will also notice not all xhtml features are supported when you exercise the html code path. mime type file suffix code path text/xml application/xml application/xhtml+xml xml xht xhtml xml text/html html htm html the entire document need not ...

Install script template - Archive of obsolete content
folder + ":" + errblock1); cancelinstall(errblock1); } } else { logcomment("cancelling current browser install due to lack of space..."); cancellinstall(); } // secondary install block, which sets up plugins and xpt in another location in addition to the current browser errblock2 = createsecondaryinstall(); // performinstall block, in which error conditions from previous blocks are checked. // this block also invokes a function to write registry keys (plid) and checks return from key writing // this block invokes refreshplugins() to ensure that plugin and xpt are available for use immediately if (errblock1 == success) { // installation to the current browser was a success - this is the most important job of this script! if(errblock2 == success) { // now take care of writing...

confirm - Archive of obsolete content
). abutton0title custom title for button 0. abutton1title custom title for button 1. abutton2title custom title for button 2. acheckmsg a string to display as a checkbox label. acheckstate an object with a boolean value property representing the state of the checkbox: when the dialog box is shown, its checkbox will be checked when this object's value is true. after the user presses a button (or closes the window), the value property is updated according to the checkbox. var check = { value: false }; var button = confirm("are you sure you want to install foobar 0.1?", "confirm", std_yes_no_buttons, null, null, null...

Learn XPI Installer Scripting by Example - Archive of obsolete content
that until this point, the install calls you have been making on the install object are preliminary only. recall that an install process takes the following general form: initinstall(); if (verify_space()) { err = add_dirs_and_files; register_files; if (err==success) { performinstall() }; else { cancelinstall() }; } in this arrangement, the actual execution of the installation is checked against the errors returned from the addition of files to the installation, which may itself have been conditioned on some verification of version and necessary disk space. the actual install code used to execute the installation appears in theinstall.js file as follows: if (err==success) { err = performinstall(); logcomment("performinstall() returned: " + err); } else { ...

autocheck - Archive of obsolete content
« xul reference home autocheck type: boolean if this attribute is true or left out, the checked state of the button will be switched each time the button is pressed. if this attribute is false, the checked state must be adjusted manually. when autocheck is true, the button type should be "checkbox" or "radio". ...

label - Archive of obsolete content
bel="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') )"/> ...

menuitem.type - Archive of obsolete content
« xul reference home type type: one of the values below can be used to create checkable menuitems or for radio button menuitems. checkbox the menuitem is checked. the checked attribute determines whether the menuitem is checked or not. radio the menuitem becomes part of a radio group. other menuitems that have the same value for their name attributes are part of the same radio group. only one menuitem in the same radio group can be checked at once. more information on adding checkmarks to menus in the xul tutorial ...

persist - Archive of obsolete content
s closed. when the window is re-opened, the values of persistent attributes are restored. in mozilla, persistent attributes are stored in the per-profile file xulstore.json. persistence can also be stored using the document.persist function. in order for persistence to work, the element must also have an id. persistence will not remember the absence of an attribute, so for boolean attributes like checked where absence means false, you will need to explicitly set the attribute to false before the window closes (bug 15232). ...

toolbarbutton.type - Archive of obsolete content
the user may click anywhere on the button to open and close the menu. menu-button: you can also use the value menu-button to create a button with a menu. unlike the menu type, this type requires the user to press the arrow to open the menu, but a different command may be invoked when the main part of the button is pressed. checkbox: use this type to create a toggle button which will switch the checked state each time the button is pressed. radio: use this type to create a radio button. you can also create a group of toolbarbuttons using this type and the attribute group. examples: type value <toolbarbutton > menu menu-button checkbox radio see also type ...

treecol.type - Archive of obsolete content
the content of the columns are a progress meters. this is used in mozilla's download manager window. text the content of the columns is text. if you are using type="checkbox", then the tree and each treecol must be editable. you need to apply css to make the checkbox toggle. here is an example css style using the current theme's checkboxes: treechildren::-moz-tree-checkbox { /* unchecked checkbox treecells. this style must come before treechildren::-moz-tree-checkbox(checked) otherwise it won't take effect. */ list-style-image: none; } treechildren::-moz-tree-checkbox(checked) { /* checked checkbox treecells. cbox-check.gif isn't available in firefox 1, 2, and 3 in mac os x so you should specify a url to an image in your extension or elsewhere. */ list-style-image...

validate - Archive of obsolete content
never the image will be loaded from the cache if possible. ...

Attribute (XUL) - Archive of obsolete content
ram autofill autofillaftermatch 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...

XUL Events - Archive of obsolete content
he event. accessibility events these events are used to notify the accessibility system of changes to an element. you would not normally use these yourself. event description checkboxstatechange this event is sent when a checkbox is checked or unchecked, either by the user or a script. normally, you would use the command event to listen to checkbox changes, however, the command event is only sent when the user modifies the value, while the checkboxstatechange event is also sent when a script modifies the checked property of a checkbox. for user changes, the checkboxstatechange event is sent before the command event. the checkboxstat...

Introduction to XUL - Archive of obsolete content
vascript functions may be added in a fashion similar to html. there is no <head> section of a xul file, so script is just mixed in with the other content, delimited by a script element in the html namespace. <html:script type="application/javascript"> // dialog initialization code function initwindow() { var checkbox = document.getelementbyid("remember"); if (checkbox) checkbox.checked = true; } </html:script> javascript can be referenced as in html documents: as onclick handlers and the like. see individual widget documentation referenced at the index for a list of attributes accepting javascript values. javascript is most safely kept in a separate file and included in the xul file <html:script language="javascript" src="our.js"/> or relegated to the contents of a cdat...

ContextMenus - Archive of obsolete content
will still be a node (the context) that the menu applies to, which will be the element that is currently focused. when the mouse is used, the context will be the element that is clicked. you can retrieve this element using the popup's triggernode property. in firefox 3.6 and earlier, the document's popupnode property was used; this is now deprecated. in this example, the triggernode property is checked for a popup attached to a browser to determine whether an image is clicked: <script> function showhideitems(aevent) { // aevent.target is the popup for which the popupshowing event fired. var element = aevent.target.triggernode; var isimage = (element instanceof components.interfaces.nsiimageloadingcontent && element.currenturi); document.getelementbyid("enlarge").hidden...

PopupEvents - Archive of obsolete content
er. the default operation of the popupshowing event is to continue showing the popup. the preventdefault method will stop this from happening and the popup will not be opened. <menu label="edit"> <menupopup onpopupshowing="if (gdisallowed) event.preventdefault();"> <menuitem label="undo"/> <menuitem label="redo"/> </menupopup> </menu> in this example, a global variable gdisallowed is checked and the preventdefault method is called. if you want to prevent a context menu from opening it is better to call preventdefault with a handler for the contextmenu event instead, to avoid the extra steps necessary to fire the popupshowing event if it isn't needed. when using nested submenus, make sure to check in the popupshowing event that the event corresponds to the right popup. this is because...

PopupKeys - Archive of obsolete content
handling keys within menus when using a menupopup element, a keyboard listener is attached to the window that will handle keypresses for the menu. this allows items within the menu to be navigated with the cursor keys. the following table lists the keys that are checked, and what the menu keyboard listener does in response: cursor up/down move the highlight within the menu up or down, wrapping around if necessary. on linux and the macintosh, disabled items within the menu are skipped over when navigating with the cursor keys. cursor left/right when a menu is selected, cursor right opens the menu, while a cursor left closes a menu. in a menubar, cursor left and right will cycle between top level menus. home/end move the highlight to the beginning or the end of the menu, selecting the fir...

disabled - Archive of obsolete content
« xul reference disabled type: boolean gets and sets the value of the disabled attribute. <!-- checkbox enables/disables the button --> <checkbox label="enable button" oncommand="document.getelementbyid('buttremove').disabled = ! this.checked"/> <button id="buttremove" label="remove all" disabled="true"/> ...

Property - Archive of obsolete content
« xul reference accessible accessibletype accesskey align allnotifications allowevents alwaysopenpopup amindicator applocale autocheck autofill autofillaftermatch boxobject browsers builder builderview buttons canadvance cangoback cangoforward canrewind checked checkstate child children classname clickselectsall clientheight clientwidth collapsed color columns command commandmanager completedefaultindex container contentdocument contentprincipal contenttitle contentview contentvieweredit contentviewerfile contentwindow contextmenu control controller controllers crop current currentindex currentitem currentnotification currentpage currentpane currentset currenturi customtoo...

Building Hierarchical Trees - Archive of obsolete content
, the tree item becomes a container, and the user may open the row by double-clicking it. note that this test is done on the member value not the reference value. for instance, in the photo example, we have a container 'http://www.xulplanet.com/rdf/myphotos' with three photos. three results will be generated from a simple rule with no extra conditions. it is the result, or the photo, that will be checked, not the container of photos. since a photo isn't a container, the tree rows will not become containers, so you will not be able to open them. as the rows are not containers, the tree builder does not recurse to find additional data. the tree builder creates rows lazily, so a closed container will not have any data generated inside in it until the row is opened. when the user opens the tree row, ...

RDF Modifications - Archive of obsolete content
uld only affect a template rule's bindings. since the bindings section of a rule specifies predicates that may optionally have values, the addition or removal or this rdf data would never be able to add or remove a new result. at the very most, the change would cause a label to be filled in with a value, or cleared when removing an rdf triple. as described earlier, the query part of a template is checked first to see if it would cause a change. after this, the bindings are examined. this is done whether the query produced a new result, removed one, or the content was not affected, since a binding could have affected any existing results. it's possible, for instance, for every existing row to be affected by a single triple being added to the datasource. consider the following binding: <binding su...

Template Builder Interface - Archive of obsolete content
if so, a template builder will be created for the element and attached to the element. if the element is a <tree> element and has the flags attribute set to "dont-build-content", a tree builder will be created. otherwise, a content builder will be created. both types of builder share much of the same code except for how they generate output to be displayed. both types of builders implement the nsixultemplatebuilder interface, while the tree builder also implements the nsixultreebuilder interface. ...

Template Logging - Archive of obsolete content
s been set to a variable. instead, it has to be set to a resource predicate. <triple> requires a variable for its object attribute the object attribute on a <triple> element has to be variable (a value beginning with a question mark). this error can also occur if the object attribute was not set. neither container or child variables of <member> has a value this indicates that a <member> was being checked and yet neither the variables specified for the container or the child have a value for a result. this error will occur while processing a result and will often repeat for each result. this error generally indicates an error in the logic of the template. common errors are misspelled variable names or <member> and <triple> elements placed in the wrong order. note that this error does not occur sim...

Tree Widget Changes - Archive of obsolete content
x. <treecol type="checkbox"> you can then set or clear the checkbox for a particular cell in that column by setting the value attribute to true, or leaving out the attribute. note that it's the value attribute you use, not the label attribute. <treecell/> <treecell value="true"/> you need to specify the checkbox image with css for the checkbox to display. (do not set id of the column to be 'checked' it will cause 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"> ... </treecol> </treecols> </tree> if the column is editable...

Commands - Archive of obsolete content
controllers. you might use this to have a listbox respond to cut, copy and paste operations, for instance. an example of this will be provided later. by default, only textboxes have a controller that does anything. the textbox controller handles clipboard operations, selection, undo and redo as well as some editing operations. note that an element may have multiple controllers, which will all be checked. if the currently focused element does not have a suitable controller, the window is checked next. the window also has a controllers property which you can modify if desired. if the focus is inside a frame, each frame leading to the top-level window is checked as as well. this means that commands will work even if the focus is inside a frame. this works well for a browser, since editing commands...

Creating a Wizard - Archive of obsolete content
e methods will be called when the page is hidden or shown, regardless of which button was pressed (except when cancel is pressed -- you need to use onwizardcancel to check for this.) these three methods should provide enough flexibility to handle navigation as you need to. the following is a summary of attribute functions that are called when the user presses next, in the order that they will be checked. as soon as one returns false, the navigation will be cancelled. attribute place on tag when it is called pagehide wizardpage called on the page that the user is leaving. pageadvanced wizardpage called on the page the user is leaving. wizardnext wizard called on the wizard. pageshow wizardpage called on the page that ...

Document Object Model - Archive of obsolete content
ent type or the other. retrieving elements the most common method to retrieve an element in a document is to give the element an id attribute and the use the document's getelementbyid() method. we've added the id attribute to a number of elements in the find file dialog. for example, we could get the state of a check box by using the code below: var state = document.getelementbyid('casecheck').checked; the value casecheck corresponds to the id of the case sensitive checkbox. once we have an indication of whether it is checked or not, we can use the state to perform the search. we could do something similar for the other check box, or any other element that has an id. we'll need to get the text in the input field for example. our find files example it doesn't make sense to have the progres...

Element Positioning - Archive of obsolete content
e earlier. the first two buttons will be sized at a suitable default width and the third button will be larger because it has a longer label. the first button is made flexible and all three elements have been placed inside a box. the width of the box will be set to the initial total width of all three buttons (around 430 pixels in the image). if you increase the width of the window, elements are checked to see whether they are flexible to fill the blank space that would appear. the first button is the only flexible element, but it will not grow wider. this is because the box that the button is inside is not flexible. an inflexible element never changes size even when space is available, so the button can't grow either. thus, the button won't get wider. the solution is to make the box flexible a...

Groupboxes - Archive of obsolete content
w <groupbox flex="1"> <caption> <checkbox label="enable backups"/> </caption> <hbox> <label control="dir" value="directory:"/> <textbox id="dir" flex="1"/> </hbox> <checkbox label="compress archived files"/> </groupbox> in this example, a checkbox has been used as a caption. we might use a script to enable and disable the contents of the groupbox when the checkbox is checked and unchecked. the groupbox contains a horizontal box with a label and textbox. both the textbox and groupbox have been made flexible so the textbox expands when the window is expanded. the additional checkbox appears below the textbox because of the vertical orientation of the groupbox. we'll add a groupbox to the find files dialog in the next section. radio groups you can use the radiogroup ele...

Manifest Files - Archive of obsolete content
iles/app/, where c is the drive letter. make sure the contents.rdf file is in the right directory and is well-formed. open the contents.rdf file in mozilla to see if it parses as well-formed xml. if not, you will see an error on a yellow background. if you are using a debug build of mozilla, some info will be printed to the terminal when starting up indicating what chrome applications are being checked. check if your application is listed. the error message "xml parsing error: undefined entity" in your xul file can be caused by an error in the manifest or in the jar file referenced by the manifest. for example, in <!doctype window system "chrome://fireclipse/locale/fireclipse.dtd"> the dtd file must exist and its directory must be correctly addressed in the "locale" manifest or xml parsing wil...

Modifying the Default Skin - Archive of obsolete content
ht not use images and it may need some more complex design. by referring to the images with css, they are easy to remove. it also removes the reliance on specific image filenames. you can assign images to a button, checkbox and other elements by using the list-style-image property as in the following: checkbox { list-style-image: url("chrome://findfile/skin/images/check-off.jpg"); } checkbox[checked="true"] { list-style-image: url("chrome://findfile/skin/images/check-on.jpg"); } this code changes the image associated with a checkbox. the first style sets the image for a normal checkbox and the second style sets the image for a checked checkbox. the modifier 'checked=true' makes the style only apply to elements which have their checked attributes set to true. see also : creating a skin f...

Styling a Tree - Archive of obsolete content
solid red; } treechildren::-moz-tree-row(readonly, unread) { background-color: rgb(80%, 80%, 80%); } default properties the properties list for tree elements contain a small number of default properties, which you can also use in a style sheet. you can use these extra properties to set the appearance of containers or selected rows. the following properties are automatically set as needed: checked this property is set cells whose column is type="checkbox" focus this property is set if the tree currently has the focus. selected this property is set for rows or cells that are currently selected. current this property is set if the keyboard cursor is at the row. only one row will have this property set at a time. hover this property is set if the mouse cursor is on the row. only one ...

Templates - Archive of obsolete content
ookmarks and a second type for separators. we can do this by using the rule element. we define a rule for each variation of elements that we want to have created. in our case, we would need a rule for bookmarks and a rule for separators. attributes placed on the rule element determine which rules apply to which rdf resource. when scanning for which rule applies to the data, each rule element is checked in sequence for a match. that means that the order in which you define rules is important. earlier rules will override later rules. rule example the following example demonstrates the earlier example with two rules: example 4 : source <window id="example-window" title="bookmarks list" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" x...

XUL Questions and Answers - Archive of obsolete content
xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <listbox rows="4"> <listhead> <listheader label="multi-column"/> </listhead> <listcols> <listcol flex="1"/> </listcols> <listitem> <listcell type="checkbox" value="1" label="vghkvghk"/> </listitem> <listitem> <listcell type="checkbox" value="2" label="vghjkvk" checked="true"/> </listitem> <listitem> <listcell type="checkbox" value="3" label="hukfzgjcfj" disabled="true"/> </listitem> </listbox> <listbox rows="4"> <listhead> <listheader label="single-column"/> </listhead> <listitem type="checkbox" value="1" label="vghkvghk"/> <listitem type="checkbox" value="2" label="vghjkvk" checked="true"/> <listitem type="checkbox" value="3" l...

XUL element attributes - Archive of obsolete content
s closed. when the window is re-opened, the values of persistent attributes are restored. in mozilla, persistent attributes are stored in the per-profile file xulstore.json. persistence can also be stored using the document.persist function. in order for persistence to work, the element must also have an id. persistence will not remember the absence of an attribute, so for boolean attributes like checked where absence means false, you will need to explicitly set the attribute to false before the window closes (bug 15232). popup type: id should be set to the value of the id of the popup element that should appear when the user clicks on the element. position type: string (representing an integer) when an element is in an overlay, the position is an index where the child is inse...

XUL controls - Archive of obsolete content
l="new document"/> <menuitem label="new image"/> </menupopup> </button> more information about this type of menu button element. button reference related elements: menupopup menuitem <checkbox> a control that may be turned on and off, typically used to create options which may be enabled or disabled. <checkbox label="show toolbar labels" checked="true"/> more information about the checkbox element. checkbox reference <colorpicker> a control that may be used to select a color. <colorpicker color="#ff0000"/> colorpicker reference <colorpicker type="button"> a specialized type of color picker which shows only a button. pressing the button displays a color...

caption - Archive of obsolete content
her a text label, using the label attribute, or child elements for a more complex caption. more information is available in the xul tutorial. attributes accesskey, crop, image, label, tabindex properties accesskey, crop, image, label, tabindex examples <groupbox> <caption label="my groupbox"/> </groupbox> <groupbox flex="1"> <caption> <checkbox label="a checked groupbox"/> </caption> </groupbox> attributes accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped...

image - Archive of obsolete content
e uri of the content to appear in the element. validate type: one of the values below this attribute indicates whether to load the image from the cache or not. this would be useful if the images are stored remotely or you plan on swapping the image frequently. the following values are accepted, or leave out the attribute entirely for default handling: always the image is always checked to see whether it should be reloaded. never the image will be loaded from the cache if possible. properties accessibletype type: integer a value indicating the type of accessibility object for the element. src type: url gets and sets the value of the src attribute. inherited properties align, , allowevents, , boxobject, builder, , , , classname, , ...

radio - Archive of obsolete content
property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. focused type: boolean this attribute is true if the element is focused. group type: string group name buttons with type="radio" and the same value for their group attribute are put into the same group. only one button from each group can be checked at a time. if the user selects one the buttons, the others in the group are unchecked. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text app...

tab - Archive of obsolete content
ibute is not present if the tab is not unread. validate type: one of the values below this attribute indicates whether to load the image from the cache or not. this would be useful if the images are stored remotely or you plan on swapping the image frequently. the following values are accepted, or leave out the attribute entirely for default handling: always the image is always checked to see whether it should be reloaded. never the image will be loaded from the cache if possible. properties accesskey type: character gets and sets the value of the accesskey attribute. accessibletype type: integer a value indicating the type of accessibility object for the element. command type: element id gets and sets the valu...

treecol - Archive of obsolete content
yles need to be added to the stylesheet (see treecol.type). on firefox 2.x and 3.x, all operating systems other than mac os x already use these styles by default. if targeting firefox for mac os x, be sure to use these styles but include your own checkbox image. however, chrome://global/skin/checkbox/cbox-check.gif is available in seamonkey on mac os x.. treechildren::-moz-tree-checkbox { /* unchecked checkbox treecells. this style must come before treechildren::-moz-tree-checkbox(checked) otherwise it won't take effect. */ list-style-image: none; } treechildren::-moz-tree-checkbox(checked){ /* css for checked cells. cbox-check.gif isn't available in firefox 1, 2, and 3 on mac os x, so you should specify a url to an image in your extension or elsewhere. */ list-style-image: url("c...

Application Update - Archive of obsolete content
this is off in firefox by default since we show a // upgrade start page instead! other apps may wish to show this ui, and supply // a whatsnewurl field in their brand.properties that contains a link to a page // ...

Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
++ components, you can avoid the challenge of building xulrunner itself by downloading a prebuilt sdk. do this if at all possible and send me some of the money you save on psychiatry sessions. if you are actively modifying xulrunner as part of your development, however, you'll have to bite the bullet. for example, you may be fixing bugs in xulrunner, applying patches from bugzilla that aren't yet checked into the main repository or making your own changes to deploy as part of a customized xulrunner build. so basically, almost everyone should be able to skip the next section. building xulrunner still here? hey, it's not all bad. you'll get a warm fuzzy feeling from mastering the complex but very powerful mozilla build system. and all that furniture you smash in the meantime makes great kindling to...

Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
pp-1.0-win32 ; setupiconfile= compression=lzma solidcompression=yes [languages] name: english; messagesfile: compiler:default.isl [components] name: main; description: my app; types: full compact custom; flags: fixed name: runtime; description: xul runner runtime; types: full custom [tasks] name: desktopicon; description: {cm:createdesktopicon}; groupdescription: {cm:additionalicons}; flags: unchecked name: quicklaunchicon; description: {cm:createquicklaunchicon}; groupdescription: {cm:additionalicons}; flags: unchecked [files] source: c:\develop\xulrunnerinstaller\myapp\myapp.exe; destdir: {app}; components: main; flags: ignoreversion source: c:\develop\xulrunnerinstaller\myapp\application.ini; destdir: {app}; components: main; flags: ignoreversion source: c:\develop\xulrunnerinstaller\myapp...

XULRunner tips - Archive of obsolete content
xulrunner frequently asked questions. work in progress. contains tons of non-working code (bit rot). extension manager to be able to install any extensions, you first need to enable the extension manager in application.ini. xulrunner 1.8.0 does not load extensions from the application directory; only the xulrunner directory and the user profile directory are checked. however, it seems that with xulrunner 1.9 the xulrunner directory is ignored, while the profile and application directories are checked. the following prefs must also be set to make the xpinstall dialog, extension manager, and theme manager work: pref("xpinstall.dialog.confirm", "chrome://mozapps/content/xpinstall/xpinstallconfirm.xul"); pref("xpinstall.dialog.progress.skin", "chrome://mozapps/content/extensions/extensions...

nsIContentPolicy - Archive of obsolete content
short shouldload( in unsigned long acontenttype, in nsiuri acontentlocation, in nsiuri arequestorigin, in nsisupports acontext, in acstring amimetypeguess, in nsisupports aextra, in nsiprincipal arequestprincipal ); parameters acontenttype the type of content being tested. this will be one one of the content types listed above. acontentlocation the uri of the content being checked; must not be null. arequestorigin {optional_inline}} the location of the resource that initiated this load request; can be null if inapplicable. acontext {optional_inline}} the nsidomnode or nsidomwindow that initiated the request, or something that can queryinterface() to one of those; can be null if inapplicable. note: acontext is the new tab/window when a user uses the context menu to...

Archived Mozilla and build documentation - Archive of obsolete content
opens. it reports javascript-related errors and warnings, css errors and arbitrary messages from chrome code. in firefox, the error console can be opened from the tools menu or by ctrl-shift-j. exception logging in javascript technical review completed. existing content this is a list of existing mozilla.org documentation. it needs to be checked, prioritized, and migrated. extension frequently asked questions this is quick set of answers to the most common issues with extension development. they are currently written with mostly firefox in mind, but most if not all should easily translate to seamonkey, thunderbird or any of the other applications. for thunderbird, you may also find the extensio...

Gecko Compatibility Handbook - Archive of obsolete content
lorer and netscape navigator 4 proprietary html tags. so, a page may not display in gecko browsers as it does in internet explorer 4 or in netscape navigator 4. the prime example of this is the use of netscape navigator 4 proprietary <layer>, commonly used in site navigation. for standards-based alternatives, see updating dhtml web pages for next generation browsers. an html page can be quickly checked for the use of proprietary html markup by submitting the page to the w3's html validator using the html 4.01 doctype. we will have more to say about doctypes later in this article, but essentially the doctype is supposed to indicate to a browser what version of html is used in the page. the html element cross reference provides a list of all html elements supported in netscape 4, gecko browsers,...

Extentsions FAQ - Archive of obsolete content
ace(ci.nsidomwindow) .queryinterface(ci.nsidomchromewindow); var sidebar = toplevelwindow.document.getelementbyid("sidebar"); alert(sidebar.contentdocument); is there anyone successfully using dojo in a firefox extension and where to fine sample codes? the problem with most js frameworks is that they bootstrap by dynamically appending script elements, which doesn't work in xul, last i checked. take a look at the bottom of http://svn.dojotoolkit.org/dojo/trunk/dojo.js see what it's trying to load and write out the script element by hand. could someone write an extension that would collapse the current sidebar in firefox? these are called "grippies" <https://addons.mozilla.org/firefox/2242/> this extension brings grippies back to firefox (and thunderbird!) is there any way to ...

::-ms-check - Archive of obsolete content
sform-origin visibility width syntax ::-ms-check example html <form> <label for="redbutton">red</label> <input type="radio" id="redbutton"><br> <label for="greencheckbox">green</label> <input type="checkbox" id="greencheckbox"> </form> css input, label { display: inline; } input[type=radio]::-ms-check { border-color: red; /* this will make the border red when the button is checked. */ color: red; /* this will make the circle red when the button is checked. */ } input[type=checkbox]::-ms-check { border-color: green; /* this will make the box green when the button is checked. */ color: green; /* this will make the checkmark green when the button is checked. */ } result below is an example for you to try. the screenshot to the left shows what will happen when you ch...

@set - Archive of obsolete content
e. examples of variable declarations look like this: @set @myvar1 = 12 @set @myvar2 = (@myvar1 * 20) @set @myvar3 = @_jscript_version the following operators are supported in parenthesized expressions: ! ~ * / % + - << >> >>> < <= > >= == != === !== & ^ | && | | if a variable is used before it has been defined, its value is nan. nan can be checked for using the @if statement: @if (@newvar != @newvar) ... this works because nan is the only value not equal to itself. requirements supported in all versions of internet explorer, but not in windows 8.x store apps. see also conditional compilation conditional compilation variables @cc_on statement @if statement ...

Reference - Archive of obsolete content
- dria 08:19, 24 february 2006 (pst) object and function relation here is my problem , it has been breaking my head for quite some time now. i'm very confused about the way function and object in the javascript core are related at first i thought it was something like this : function -> object -> instance instance is for example the math object, it behaves same way as creating new object. i checked this by doing alert(math.constructor) //shows that object is its constructor alert(object.constructor) //shows that function is its constructor alert(function.constructor) //shows that function is its constructor note : the function.constructor seems to keep on refering to itself, if you do the following you get same results which suggests that this is indeed the top level object. alert(f...

3D collision detection - Game development
e quickest algorithm to determine whether the two game entities are overlapping or not. this consists of wrapping game entities in a non-rotated (thus axis-aligned) box and checking the positions of these boxes in the 3d coordinate space to see if they are overlapping. the axis-aligned constraint is there because of performance reasons. the overlapping area between two non-rotated boxes can be checked with logical comparisons alone, whereas rotated boxes require additional trigonometric operations, which are slower to calculate. if you have entities that will be rotating, you can either modify the dimensions of the bounding box so it still wraps the object, or opt to use another bounding geometry type, such as spheres (which are invariant to rotation.) the animated gif below shows a graphic ex...

Desktop mouse and keyboard controls - Game development
playerx += 5; } else if(leftpressed) { playerx -= 5; } if(downpressed) { playery += 5; } else if(uppressed) { playery -= 5; } ctx.drawimage(img, playerx, playery); requestanimationframe(draw); } the draw function first clears the whole canvas — we draw everything from scratch on every single frame. then the pressed key variables are checked and the playerx and playery variables (that we define earlier just after leftpressed and the others) holding the position of the ship are adjusted by a given amount, let's say 5 pixels. then the player's ship is drawn on the screen and the next draw is called from within the requestanimationframe. we could write our own keycode object containing the key codes, for example: var keyboardhelper = ...

Implementing game control mechanisms - Game development
it will be created once at the start of the game, and will execute this.clickenclave() action assigned to it when clicked, but you can also use the mouse's pointer value in the update() function to make an action: update: function() { // ... if(this.game.input.mousepointer.isdown) { // do something } // ... } this will be executed whenever the mouse button is pressed, and it will be checked against the input's isdown boolean variable on every frame of the game. that should give you some understanding of the project structure. we'll be playing mostly with the mainmenu.js and game.js files, and we'll explain the code inside the create() and update() methods in much more detail in later articles. pure javascript demo there's also a small online demo with full source code available o...

Collision detection - Game development
= -dy; b.status = 0; } } } } } activating our collision detection the last thing to do is to add a call to the collisiondetection() function to our main draw() function. add the following line to the draw() function, just below the drawpaddle() call: collisiondetection(); compare your code the collision detection of the ball is now checked on every frame, with every brick. now we can destroy bricks! :- exercise: change the color of the ball when it hits the brick. next steps we are definitely getting there now; let's move on! in the eighth chapter we will be looking at how to track the score and win. « previousnext » ...

2D maze game with device orientation - Game development
e create() function : this.keys = this.game.input.keyboard.createcursorkeys(); as you can see there’s a special phaser function called createcursorkeys(), which will give us an object with event handlers for the four arrow keys to play with: up, down, left and right. next we will add the following code to the update() function, so it will be fired on every frame. ...

Accessibility tree (AOM) - MDN Web Docs Glossary: Definitions of Web-related terms
’ as its name (more on how names are computed in the accessible name and description computation spec). description how do we describe this element, if we want to add anything to the name? the description of a table could explain what kind of info that table offers. role what kind of thing is it? for example, is it a button, a nav bar, or a list of items? state does it have a state? think checked/unchecked for checkboxes, or collapsed/expanded for the <summary> element. additionally, the accessibility tree often contains information on what can be done with an element: a link can be followed, a text input can be typed into, etc. ...

Digest - MDN Web Docs Glossary: Definitions of Web-related terms
e indicates whether someone has tampered with a given message. a digest can be used to perform several tasks: in non-cryptographic applications (e.g., the index of hash tables, or a fingerprint used to detect duplicate data or to uniquely identify files) verify message integrity (a tampered message will have a different hash) store passwords so that they can't be retrieved, but can still be checked (to do this securely, you also need to salt the password.) generate pseudo-random numbers generate keys it is critical to choose the proper hash function for your use case to avoid collisions and predictability. learn more see hash function hash function on wikipedia ...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
rformance a long task is a task that takes more than 50ms to complete. 256 loop codingscripting, glossary, control flow, programming a loop is a sequence of instructions that is continually repeated until a certain condition is met in computer programming. an example would be the process of getting an item of data and changing it, and then making sure some condition is checked such as, if a counter has reached a prescribed number. 257 lossless compression beginner, composing, glossary, images, web performance, compression, lossless lossless compression is a class of data compression algorithms that allows the original data to be perfectly reconstructed from the compressed data. lossless compression methods are reversible. examples of lossless compr...

Loop - MDN Web Docs Glossary: Definitions of Web-related terms
examples for loop syntax: for (statement 1; statement 2; statement 3){ execute code block } statement 1 is executed once before the code block is run. statement 2 defines the condition needed to execute the code block. ...

Pseudo-classes and pseudo-elements - Learn web development
s on mdn. use this as a reference to see the kind of things that are available for you to target. pseudo-classes selector description :active matches when the user activates (for example clicks on) an element. :any-link matches both the :link and :visited states of a link. :blank matches an <input> element whose input value is empty. :checked matches a radio button or checkbox in the selected state. :current matches the element, or an ancestor of the element, that is currently being displayed. :default matches the one or more ui elements that are the default among a set of similar elements. :dir select an element based on its directionality (value of the html dir attribute or css direction proper...

create fancy boxes - Learn web development
...

Client-side form validation - Learn web development
on sometimes requires javascript if you want to customize styling and error messages, but it always requires you to think carefully about the user. always remember to help your users correct the data they provide. to that end, be sure to: display explicit error messages. be permissive about the input format. point out exactly where the error occurs, especially on large forms. once you have checked that the form is filled out correctly, the form can be submitted. we'll cover sending form data next. previous overview: forms next in this module your first form how to structure a web form basic native form controls the html5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced to...

Sending form data - Learn web development
you should go and check that article out, to get an idea of what's possible. be paranoid: never trust your users so, how do you fight these threats? this is a topic far beyond this guide, but there are a few rules to keep in mind. the most important rule is: never ever trust your users, including yourself; even a trusted user could have been hijacked. all data that comes to your server must be checked and sanitized. always. no exception. escape potentially dangerous characters. the specific characters you should be cautious with vary depending on the context in which the data is used and the server platform you employ, but all server-side languages have functions for this. things to watch out for are character sequences that look like executable code (such as javascript or sql commands). l...

Client-side storage - Learn web development
name' : 'crystal' }, { 'name' : 'elf' }, { 'name' : 'frog' }, { 'name' : 'monster' }, { 'name' : 'pig' }, { 'name' : 'rabbit' } ]; to start with, once the database is successfully opened we run an init() function. this loops through the different video names, trying to load a record identified by each name from the videos database. if each video is found in the database (easily checked by seeing whether request.result evaluates to true — if the record is not present, it will be undefined), its video files (stored as blobs) and the video name are passed straight to the displayvideo() function to place them in the ui. if not, the video name is passed to the fetchvideofromnetwork() function to ... you guessed it — fetch the video from the network. function init() { // loo...

Silly story generator - Learn web development
the following: generates a silly story when the "generate random story" button is pressed. replaces the default name "bob" in the story with a custom name, only if a custom name is entered into the "enter custom name" text field before the generate button is pressed. converts the default us weight and temperature quantities and units in the story into uk equivalents if the uk radio button is checked before the generate button is pressed. will generate another random silly story if you press the button again (and again...) the following screenshot shows an example of what the finished program should output: to give you more of an idea, have a look at the finished example (no peeking at the source code!) steps to complete the following sections describe what you need to do. basic setu...

Storing the information you need — Variables - Learn web development
rt('hello bella, nice to see you!'); } else if (name === 'bianca') { alert('hello bianca, nice to see you!'); } else if (name === 'chris') { alert('hello chris, nice to see you!'); } // ... and so on ... you may not fully understand the syntax we are using (yet!), but you should be able to get the idea — if we didn't have variables available, we'd have to implement a giant code block that checked what the entered name was, and then display the appropriate message for any name. this is obviously really inefficient (the code is a lot bigger, even for only five choices), and it just wouldn't work — you couldn't possibly store all possible choices. variables just make sense, and as you learn more about javascript they will start to become second nature. another special thing about variabl...

Adding features to our bouncing balls demo - Learn web development
l()'s collisiondetect() method, so you can use a copy of that as the basis of this new method. but there are a couple of differences: in the outer if statement, you no longer need to check whether the current ball in the iteration is the same as the ball that is doing the checking — because it is no longer a ball, it is the evil circle! instead, you need to do a test to see if the ball being checked exists (with which property could you do this with?). if it doesn't exist, it has already been eaten by the evil circle, so there is no need to check it again. in the inner if statement, you no longer want to make the objects change color when a collision is detected — instead, you want to set any balls that collide with the evil circle to not exist any more (again, how do you think you'd do t...

Ember interactivity: Events, classes and state - Learn web development
that now the text submitted in the <input> is properly reflected in the ui: summary ok, so that's great progress for now. we can now add todo items to our app, and the state of the data is tracked using our service. next we'll move on to getting our footer functionality working, including the todo counter, and look at conditional rendering, including correctly styling todos when they've been checked. we'll also wire up our "clear completed" button. previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditio...

React interactivity: Editing, filtering, conditional rendering - Learn web development
ing {props.name}</span> </button> <button type="submit" classname="btn btn__primary todo-edit"> save <span classname="visually-hidden">new name for {props.name}</span> </button> </div> </form> ); const viewtemplate = ( <div classname="stack-small"> <div classname="c-cb"> <input id={props.id} type="checkbox" defaultchecked={props.completed} onchange={() => props.toggletaskcompleted(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 ty...

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
8b698?version=3.23.2 working on the moreactions component now we'll tackle the check all and remove completed buttons. let's create a component that will be in charge of displaying the buttons and emitting the corresponding events. create a new file — components/moreactions.svelte. when the first button is clicked, we'll emit a checkall event to signal that all the todos should be checked/unchecked. when the second button is clicked, we'll emit a removecompleted event to signal that all of the completed todos should be removed. put the following content into your moreactions.svelte file: <script> import { createeventdispatcher } from 'svelte' const dispatch = createeventdispatcher() let completed = true const checkall = () => { dispatch('checkall', completed) ...

Using Vue computed properties - Learn web development
eted items does not change. tracking changes to "done" we can use events to capture the checkbox update and manage our list accordingly. since we're not relying on a button press to trigger the change, we can attach a @change event handler to each checkbox instead of using v-model. update the <input> element in todoitem.vue to look like this. <input type="checkbox" class="checkbox" :id="id" :checked="isdone" @change="$emit('checkbox-changed')" /> since all we need to do is emit that the checkbox was checked, we can include the $emit() inline. in app.vue, add a new method called updatedonestatus(), below your addtodo() method. this method should take one parameter: the todo item id. we want to find the item with the matching id and update its done status to be the opposite of its cur...

Rendering a list of Vue components - Learn web development
ression between the <li> tags will have access to the item value in addition to the other component attributes. this means we can pass the fields of our item objects to our todoitem component — just remember to use the v-bind syntax. this is really useful, as we want our todo items to display their label properties as their label, not a static label of "my todo item". in addition, we want their checked status to reflect their done properties, not always be set to done="false". update the label="my todo item" attribute to :label="item.label", and the :done="false" attribute to :done="item.done", as seen in context below: <ul> <li v-for="item in todoitems" :key="item.id"> <to-do-item :label="item.label" :done="item.done"></to-do-item> </li> </ul> now when you look at your ru...

Styling Vue components with CSS - Learn web development
to the root <div>, add a custom-checkbox class. to the <input>, add a checkbox class. last of all, to the <label> add a checkbox-l...

Understanding client-side JavaScript frameworks - Learn web development
ive features, and setting up a service to keep track of the data state of our app. 4. ember interactivity: footer functionality, conditional rendering now it's time to start tackling the footer functionality in our app. here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). we'll also wire up our "clear completed" button. along the way, we'll learn about using conditional rendering in our templates. 5. routing in ember in this article we learn about routing or url-based filtering as it is sometimes referred to. we'll use it to provide a unique url for each of the three todo views — "all", "active", and "completed". 6. ember resources and troubleshooting our ...

Mozilla accessibility architecture
...

Accessibility and Mozilla
these articles provide mozilla-specific details about accessibility. accessibility api cross-referencethis cross-reference helps us see the difference between today's accessibility api's. all accessibility apis to date define a list of possible object roles, or general types, such as button, menu item, text, etc. they also define a list of possible object states, such as focused, read-only, checked, etc.accessibility features in firefoxfirefox works with popular screen readers, with the best support currently coming from gw micro's window-eyes 5.5. we are optimistic that jaws support will catch up this year. in recent articles from both afb's access world and nfb's voice of the nation's blind, reviewers found no significant roadblocks in moving to firefox from internet explorer for screen ...

A bird's-eye view of the Mozilla framework
pporting the mozilla application suite, not the architecture of the individual applications themselves. prerequisites this article assumes you have access to mozilla sources and are familiar with the directory structure of the source tree. the code samples in the article are based on mozilla/5.0 (windows; u; windows nt 5.1; en-us; rv:1.9a1) gecko/20051104 seamonkey/1.1a from a new source tree checked out 11/04/05. the build id is 2005110409. thehelp viewer files referenced in the article are located in /seamonkey/extensions/help/ this article also assumes you are familiar with the javascript and c++ programming languages, object-oriented programming (oop) terminology and design concepts, the microsoft® component object model (com), and the corba omg interface definition language (idl). or...

Creating reftest-based unit tests
should be able to "snap a picture" of the glyph as it should be displayed and then the reference page would include that graphic in an <img> element. more investigation into whether this will work is definitely warranted. experiments with this have shown it to be not as easy as one would hope. we'll see. here is a list of reftest opportunities files in the source. these are files that have been checked in to be tested. presumably, one was supposed to open the pages with a browser and look at them and see if they look right. it is hard to tell how many of these will be usable as reftests. if the file is associated with a bug, the bug should be examined. i have seen a case where the html file in the bug had a problem, but the checked-in version was "cleaned up" and not valid for testing. mozilla...

Creating Sandboxed HTTP Connections
// ... }) } handling cookies when sending a request, cookies that apply to the url are sent with the http request. the http response can also contain cookies, which the browser processes. as of mozilla 1.8.1 (firefox 2), it is now possible to intercept those two cases. for example, this means that if the user was logged into an webmail account, another account on the same domain could be checked without changing the user's cookies. the observer service (nsiobserverservice) is used to send general notifications, including the two cookie ones. the addobserver method is used to add an observer for a certain topic and takes in three agruments: an object than implements nsiobserver the topic to listen for. for cookies, the two topics are: http-on-modify-request - happens afte...

Working with Mozilla source code
getting a pre-configured mozilla build system virtual machine this is the easiest way to get started: use a virtualbox virtual machine which is already configured with a complete build environment for you to use. just boot the vm and build! viewing and searching mozilla source code online learn how to use searchfox, mozilla's online search and browsing tool for accessing the source code. this isn't a good way to download the code, but is a great way to search it. ...

Firefox UI considerations for web developers
ick access to them. each site is represented by an icon and, below it, a name for the site. while both of these can be edited by the user, you may wish to ensure that your site provides a good icon to use in places like this. how an icon is selected the new tab page chooses icons to use for top sites by trying a series of methods until it obtains an icon to use: a global "top sites" list is checked. this list is created by a mozilla service called tippy top. the data store provided by tippy top includes an optimized icon for each of the sites in the list; if the site is on this list, that icon is used. if tippy top doesn't include the site, firefox looks in its places data store for icons specified in the page's <head> element; if an svg icon is available, that icon is selected. o...

HTTP Cache
quest for the rest of the data - and becomes that way a new writer. the rest of the readers are still concurrently reading the content since output stream for the cache entry is again open and kept by the current writer. lifetime of an existing entry with only a partial content such a cache entry is first examined in the nsicacheentryopencallback.oncacheentrycheck callback, where it has to be checked for completeness. in this case, the content-length (or different indicator) header doesn't equal to the data size reported by the cache entry. the consumer then indicates the cache entry needs to be revalidated by returning entry_needs_revalidation from oncacheentrycheck. this consumer, from the point of view the cache, takes a role of the writer. other parallel consumers, if any, are blocked...

Add-on Manager
/www.foo.com/test.xpi", function(ainstall) { // ainstall is an instance of addoninstall ainstall.install(); }, "application/x-xpinstall"); the progress of addoninstalls can be monitored using an installlistener. a listener can be registered either for a specific install using the addlistener() method or for all installs using the addinstalllistener() method. finding updates add-ons can be checked for updates using the findupdates() method. it must be passed an updatelistener to receive information about compatibility information and new update information. any available update is returned as an addoninstall which is ready to be downloaded and installed. detecting add-on changes requires gecko 7.0(firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) you can also get lists of add-ons ...

WebChannel.jsm
while also ensuring the scheme is https). components.utils.import("resource://gre/modules/webchannel.jsm"); constructor webchannel(string webchannelid, nsiuri originorpermission); 2nd argument is a valid origin that should be part of requests for this channel. webchannel(string webchannelid, string originorpermission); 2nd argument is a permission for which the permission manager will be checked to determine if the request is allowed. note that in addition to the permission manager check, the request must be made over https. method overview listen(function callback); stoplistening(); send(object message, eventtarget target); attributes id string webchannel id methods listen() registers the callback for messages on this channel...

Bootstrapping a new locale
ild directory. this sounds worse than it is, you won't need to actually build, but we'll need to setup something that looks like it. you're still in the l10n directory, right? we'll create build right next to it. the name of that directory doesn't really matter, so no reason to change it. mkdir ../build cd ../build now we'll set up a not-so-compile environment by calling configure. if you just checked out the localizable parts of en-us above, it will create a plethora of warnings no such file or directory, but no errors. ../mozilla/configure --disable-compile-environment --enable-application=browser whenever you need a build directory, these are the steps that you need to do to initialize it. if you're downloading a new release of firefox from cvs, you might want to run configure again, too...

Localizing with Mozilla Translator
matically filled, although if you do this you should review them, because for en-us strings with several possible translations, mt will choose one of them, which could not be the one you want. from cvs to mercurial in mt so, you have a firefox product in mt with a platform neutral and, inside it, several directories (''components'' in mt terminology) more or less like the second sample above, checked out from cvs. now, you want to start working directly on mozilla-central (and l10n-central). what should you do? the first thing to do, once you have your mercurial local repository up and working, is create a new product... or more. with good oldie cvs, you could checkout just the locale content and, even more, you could checkout just ''the locale directories'' you were interested in. with merc...

Mozilla Framework Based on Templates (MFBT)
them. functionality types and type manipulation standardinteger.h implements the <stdint.h> interface. (the <stdint.h> standard header is not available on all platforms and so cannot be used directly. this header also provides a useful "hook" for embeddings that must customize the types underlying the fixed-size integer types.) types.h includes standardinteger.h and further provides size_t. checkedint.h implements checked integers. they behave like integers, but safely check for integer overflow and divide-by-zero. useful for input validation. floatingpoint.h provides various operations for examining and working upon double-precision floating point values, and for producing various special floating point values. core types.h further provides macros to define imported and exported c symbo...

Mozilla DOM Hacking Guide
structors of dom objects in the global scope (e.g. node) setting up custom prototypes for those dom objects new image(), new option() window.history[index] document.<formname> how to add a new interface to an existing dom object for this section, we will use the simple example of the domimplementation dom object. this is a real-world case that was used to solve bug 33871 (the patch is not checked in yet, as of writing this document). the problem is the following: we have to add a new htmldomimplementation interface to the domimplementation dom object. the domimplementation object is used when one does, in js, document.implementation. this object already implements the domimplementation interface, but dom2 html says it should also implement the htmldomimplementation interface, so here we g...

Mozilla Development Strategies
isn't on by default. this also makes it easier to get help on the problem. it's easier to tell someone set a pref, or apply a small patch, or set a #define than to apply a monster patch. for c++, use #define, #ifdef, #else and #endif for xul / js, and you're doing something major, add your new files to the tree and then have it be a simple jar.mn patch to enable it. you can also have code that checked in, but controlled with a pref and off by default. make sure you have the right fix when you go for reviews when tempted to do a first pass fix and fix the fallout later, do it right the first time; don't assume you'll be able to file a "fix it" bug and fix stuff you know about later -- chances are the reviewer will make you do the work anyway. if it takes you five extra minutes to do somethin...

GPU performance
nvidia parallel nsight - haven't tried. amd gpu shaderanalyzer - will compile a shader and show the machine code and give static pipeline estimations. not that useful for firefox because all of our shaders are pretty simple. ...

Refcount tracing and balancing
nd-comptr-leakers.pl will find the exact stack for you, and you don't have to look at trees. ignore balanced trees. the make-tree.pl script accepts an option --ignore-balanced, which tells it not to bother printing out the children of a node whose balance factor is zero. this can help remove some of the clutter from an otherwise noisy tree. ignore matched releases from smart pointers. if you've checked (see above) that the leak wasn't from a smart pointer, you can ignore the references that came from smart pointers (where we can use the pointer identity of the smart pointer to match the addref and the release). this requires using an xpcom_mem_refcnt_log and an xpcom_mem_comptr_log that were collected at the same time. for more details, see the old documentation (which should probably be incorp...

Profile Manager
new instance -no-remote note: it isn't possible to start a second instance of firefox without passing it the -no-remote command line argument. for this reason, if you attempt to launch firefox using profile manager, and it detects that another instance of firefox is already running, it will automatically add the -no-remote argument for you, regardless of whether this launch option was checked. locked profiles some profiles may be shown as locked in the main window. such profiles are currently being used by an instance of firefox. if you attempt to perform any operation on a locked profile, you'll get a warning; if you choose to continue despite the warning, you may encounter errors or corrupt a profile. it's strongly recommended to avoid operations on locked profiles. if yo...

PR EnumerateAddrInfo
to continue an enumeration (thereby getting successive addresses from the praddrinfo structure), the value should be set to the function's last returned value. the enumeration is complete when a value of null is returned. addrinfo a pointer to a praddrinfo structure returned by pr_getaddrinfobyname. port the port number to be assigned as part of the prnetaddr structure. this parameter is not checked for validity. result on input, a pointer to a prnetaddr structure. on output, this structure is filled in by the runtime if the result of the call is not null. returns the function returns the value you should specify in the enumptr parameter for the next call of the enumerator. if the function returns null, the enumeration is ended. description pr_enumerateaddrinfo is a stateless enumerat...

PR_EnumerateHostEnt
enumeration (thereby getting successive addresses from the host entry structure), the value should be set to the function's last returned value. the enumeration is complete when a value of zero is returned. hostent a pointer to a prhostent structure obtained from pr_gethostbyname or pr_gethostbyaddr. port the port number to be assigned as part of the prnetaddr structure. this parameter is not checked for validity. address on input, a pointer to a prnetaddr structure. on output, this structure is filled in by the runtime if the result of the call is greater than 0. returns the function returns one of the following values: if successful, the function returns the value you should specify in the enumindex parameter for the next call of the enumerator. if the function returns 0, the enumer...

4.3.1 Release Notes
t will be used to perform. some tokens require that a key be marked for an operation before the key can be used to perform that operation; other tokens don't care. nss/jss provides a way to specify a set of flags and a corresponding mask for these flags. see generateeckeypairwithopflags see generatersakeypairwithopflags see generatedsakeypairwithopflags distribution information jss is checked into mozilla/security/jss/. the cvs tag for the jss 4.3.1 release is jss_4_3_1_rtm. source tarballs are available from ftp://ftp.mozilla.org/pub/mozilla.or...-4.3.1.tar.bz2 binary releases are no longer available on mozilla. jss is a jni library we provide the jss4.jar but expect you to build the jss's matching jni shared library. we provide the jss4.jar in case you do not want to obtain your own...

4.3 Release Notes
the cvs tag for the jss 4.3 release is jss_4_3_rtm. source tarballs are available from https://archive.mozilla.org/pub/security/jss/releases/jss_4_3_rtm/src/jss-4.3.tar.bz2 binary releases are no longer available on mozilla. jss is a jni library we provide the jss4.jar but expect you to build the jss's matching jni shared library. we provide the jss4.jar in case you...

JSS
the jss project has been relocated! as of april 6, 2018, jss has been migrated from mercurial on mozilla to git on github. jss source should now be checked out from the github: git clone git@github.com:dogtagpki/jss.git -- or -- git clone https://github.com/dogtagpki/jss.git all future upstream enquiries to jss should now use the pagure issue tracker system: https://pagure.io/jss/issues documentation regarding the jss project should now be viewed at: http://www.dogtagpki.org/wiki/jss note: as much of the jss documentation is sorely out-of-date, updated information will be a work in progress, and many portions of any legacy documentation will be re-written over the course of time. stay tuned! legacy jss information can still be found at: source: https://hg.mozil...

NSS API Guidelines
#ifdef debug if( !nssfoo_verifypointer(arg1) ) return (rv *)null; if( !nssbar_verifypointer(arg2) ) return (rv *)null; #endif /* debug */ return nsstype_method(t, arg1, arg2); } aside from error cases, all documented entry points should check pointers in a debug, wherever possible. pointers to user-supplied buffers, and templates, should be checked against null. pointers to context-style functions should be checked using special debug macros. these macros only define code when debug is turned on, providing a way for systems to register, deregister, and check valid pointers. secport_decl_ptr_class(classname, size) - declare a class of pointers (labelled classname) this object file needs to check. this class is local only to this object file...

nss tech note3
chain must have the cert type and key usage required for ca certs for that cert usage. ...

PKCS #11 Module Specs
of flags describing any root certs that may be stored (case-insensitive). valid flags are: hasrootcerts - claims that this token has the default root certs and trust values. at init time nss, will try to look for a default root cert device if one has not already been loaded. hasroottrust - parsed but ignored. timeout - time in minutes before the current authentication should be rechecked. this value is only used if askpwd is set to 'timeout'. (default = 0). askpwd - case-insensitive flag describing how password prompts should be manages. only one of the following can be specified. every - prompt whenever the a private key on this token needs to be access (this is on the entire token, not on a key-by-key basis. timeout- whenever the last explicit login was longer than ...

NSS tools : signtool
at with netscape signing tool version 1.1 and later this option can appear multiple times on one command line, making it possible to specify several particular directories to exclude. -z tells signtool not to store the signing time in the digital signature. this option is useful if you want the expiration date of the signature checked against the current date and time rather than the time the files were signed. -z jarfile creates a jar file with the specified name. you must specify this option if you want signtool to create the jar file; it does not do so automatically. if you don't specify -z, you must use an external zip tool to create the jar file. the -z option ca...

Hacking Tips
he last). drop "-i" for gdb. dump a backtrace. this should show you the point at which the oom is incorrectly handled, which will be a few frames up from the breakpoint. note: if you are on linux it may be simpler to use rr. some guidelines for handling oom that lead to failures when they are not followed: check for allocation failure! fallible allocations should always must be checked and handled, at a minimum by returning a status indicating failure to the caller. report oom to the context if you have one if a function has a jscontext* argument, usually it should call js::reportoutofmemory(cx) on allocation failure to report this to the context. sometimes it's ok to ignore oom for example if you are performing a speculative optimisation you might aband...

Index
e 1.) get yourself an optimized libxul build of firefox, with debugger info. 520 running automated javascript tests automated testing, build documentation, guide, qa, spidermonkey the jstests shell harness is js/src/tests/jstests.py. basic usage is: 521 running parsemark spidermonkey, tests here's how you get your mitts on it. the test files are not checked into the source tree because they're non-mozilla js code. 522 savedframe spidermonkey a savedframe instance is a singly linked list of stack frames. it represents a javascript call stack at a past moment of execution. younger frames hold a reference to the frames that invoked them. the older tails are shared across many younger frames. 523 setting up cdt to work on...

Bytecode Descriptions
(the environment on the environment chain designated to receive new variables). jsop::def{var,let,const,fun} instructions must appear in the script before anything else that might add bindings to the environment, and only once per binding. there must be a correct entry for the new binding in script->bodyscope(). (all this ensures that at run time, there is no existing conflicting binding. this is checked by the jsop::checkglobalorevaldecl bytecode instruction that must appear before jsop::def{var,let,const,fun}.) throw a syntaxerror if the current variableenvironment is the global environment and a binding with the same name exists on the global lexical environment. this is used for global scripts and also in some cases for function scripts where use of dynamic scoping inhibits optimization. form...

Tracing JIT
de. if the side exit condition indicates that the trace exited unsuccessfully -- due to encountering sufficient memory pressure to trigger a garbage collection, running out of native stack space, expiring a timer or any similar abnormal condition -- the monitor returns to monitoring mode. some other terminology may be helpful when reading the code: the term guard denotes a condition that is checked by an executing trace to confirm that some assumptions made during recording still hold. if guard's condition fails to hold, the guard either jumps to an exit or, if the guard has been extended, jumps to a sub-trace that has been recorded under the opposite assumption as the guard was checking. for example, when recording any conditional branch in the spidermonkey bytecode, a guard will be incorp...

JSAPI User Guide
on. implement access check callback functions (see jsclass.checkaccess and js_setcheckobjectaccesscallback). these will be called from js_checkaccess and sometimes from within the javascript engine. an access check callback function can use jsdbgapi.h functions such as js_frameiterator and js_stackframeprincipals to obtain the principals of the code that is trying to perform the checked operation. then it determines whether to allow the operation to proceed. tracing and profiling there are features provided by the jsapi that make it easier to implement javascript tracers and profilers. function tracing if you configure with --enable-trace-jscalls, you can use js_setfunctioncallback() to set up a c function to be called whenever a javascript function is about to be called,...

JSHasInstanceOp
ce. syntax typedef bool (* jshasinstanceop)(jscontext *cx, js::handleobject obj, js::mutablehandlevalue vp, bool *bp); name type description cx jscontext * the js context in which the type check is occurring. obj js::handleobject the "type" in the type check. v js::mutablehandlevalue the value whose type is being checked. bp bool * out parameter. on success, the callback stores the result of the type check in *bp. description jshasinstanceop is called to check whether v is an instance of obj. return false on error or exception, true on success with true in *bp if v is an instance of obj, false in *bp otherwise. jsclass hooks jsclass offers the following hook: the jsclass.hasinstance...

JS_FlattenString
str jsstring * the string to flatten. description js_flattenstring flattens a string str and returns a pointer to jsflatstring. to catch errors, an opaque jsflatstring type is returned. note: the input and output of js_flattenstring() are the same actual gc-thing so only one needs to be rooted. if a jsstring is known to be flat, you can use js_assert_string_is_flat to make a debug-checked cast. example: // in a fallible situation jsflatstring *fstr = js_flattenstring(cx, str); if (!fstr) return false; js_assert(fstr == js_assert_string_is_flat(str)); // in an infallible situation, for the same 'str' const jschar *chars = js_getflatstringchars(fstr) js_assert(chars); see also mxr id search for js_flattenstring js_assert_string_is_flat js_forget_string_flatness bug 609440...

JS_ObjectIsDate
s if a specified object is a date object. syntax bool js_objectisdate(jscontext *cx, js::handleobject obj); name type description cx jscontext * pointer to a javascript context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * jsobject that should be checked. description js_objectisdate() can be used to check if you are dealing with a date object, or a date object used across compartments (or windows or sites, in the browser embedding). this function returns true if the object is a date. see also mxr id search for js_objectisdate js_newdateobject js_newdateobjectmsec bug 625870 ...

Property attributes
jsprop_resolving resolve hooks and enumerate hooks must pass this flag when calling js_define* apis to reify lazily-defined properties. jsprop_resolving is used only with property-defining apis. it tells the engine to skip the resolve hook when performing the lookup at the beginning of property definition. this keeps the resolve hook from accidentally triggering itself: unchecked recursion. for enumerate hooks, triggering the resolve hook would be merely silly, not fatal, except in some cases involving non-configurable properties. added in spidermonkey 45 mxr id search for jsprop_resolving jsprop_ignore_enumerate ignore the value in jsprop_enumerate. this flag only valid when defining over an existing property. added in spidermonkey 38 ...

JSAPI reference
these macros must not be applied to values that are not known to be the right type. like c casts, they may cause crashes if applied to incorrect values. they never create new objects or call into javascript code. boolean_to_jsvalobsolete since jsapi 42 int_to_jsval obsolete since jsapi 42 double_to_jsvalobsolete since jsapi 42 object_to_jsvalobsolete since jsapi 42 str...

Running Parsemark
download the suite of parse tests from bug 548621 and decompress them. ...

Secure Development Guidelines
sert() truncate() checking return values often causes problems return value not handled certain cases not handled or interpreted incorrectly double meaning malloc() can return a pointer or null, but null by itself is a valid address checking return values int main() { int fds[2]; pipe(fds); write(fds[0], "data", 4); } the pipe() return value is not checked if pipe() fails, fds is not initialized write to un-initialized file descriptor checking return values check all return values—no matter how unlikely the api failure for example: close() can fail and leak file descriptor setuid() can fail and privileges don’t get dropped snprintf() can fail and result in return value -1 tmp = realloc(tmp, size) — realloc could fail an...

Gecko Roles
for a column of a table. role_table_row_header the header for a row of a table. role_tear_off_menu_item a menu item used to tear off and reattach its menu. role_terminal represents an accessible terminal. role_text_container collection of objects that constitute a logical text entity. role_toggle_button a toggle button. a specialized push button that can be checked or unchecked, but does not provide a separate indicator for the current state. role_tree_table representas a control that is capable of expanding and collapsing rows as well as showing multiple columns of data. role_viewport a viewport. an object usually used in a scroll pane. it represents the portion of the entire data that the user can see. as the user manipulates the scroll ba...

Gecko states
bject that allows its children to be selected and that this child is one of those children that has been selected. applied to: role_menuitem, role_cell, role_outlineitem, xxx: continue events: event_state_change Сoncomitant state: state_selectable state_focused the object is focused applied to: events: concomitant state: state_focusable state_pressed the object is pressed. state_checked the object is checked state_mixed indicates that the state of a three-state check box or toolbar button is not determined. the check box is neither checked nor unchecked and is therefore in the third or mixed state. state_readonly the object is designated read-only. state_hottracked the object is hot-tracked by the mouse, which means that its appearance has changed to indicate that the mou...

History Service Design
case the database is missing a new one is created, if instead the database exists but the connection to it fails due to database corruption, the corrupt database is moved away and a new one is created. in both cases an implementer can know what did happen at startup and act accordingly (maybe restoring a backup). once the database connection has been set-up the schema version of the database is checked. schema version is upgraded every time a change is made to the database schema, history service will eventually upgrade the database, moving and fixing its datas accordingly. in case the database has been created for the first time history service will create all tables, indexes and triggers, calling related inittables static methods of other dependant services. finally temporary tables, indexes...

Accessing the Windows Registry Using XPCOM
you must call startwatching() for the key to be monitored. the method takes one parameter, a boolean indicating whether child keys should be watched. after that, you can call haschanged() to determine whether or not you need to reread the value. calling haschanged() automatically resets the watch, so you can be sure th...

An Overview of XPCOM
the nsisupports class (and you'll see in the chapter using xpcom utilities to make things easier how macros can make this process much easier), you must make sure the class methods return a valid result when the client calls queryinterface with the nsisupports iid. queryinterface should support all interfaces that the component supports. in implementations of queryinterface, the iid argument is checked against the nsiid class. if there is a match, the object's this pointer is cast to void, the reference count is incremented, and the interface returned to the caller. if there isn't a match, the class returns an error and sets the out value to null. in the example above, it's easy enough to use a c-style cast. but casting can become more involved where you must first cast void then to the reques...

Building the WebLock UI
akes action. site adding ui the next step is to create that part of the user interface that lets you add a new site to the white list. there are other, more sophisticated ways to do this; you may also want to include some ui that lets you view the white list or edit it as a list. in this part of the tutorial, however, we only provide the means of adding an url provided as a string (which is not checked for validity) and passing it through to the addsite api we defined in the earlier part of the tutorial. <separator class="thin"/> <hbox align="center"> <textbox id="url.input" flex="1"/> <button label="add this url" oncommand="addthissite();"/> </hbox> this snippet introduces a couple of new general layout widgets in xul. the separator that appears at the top of this snippet creates a lit...

Index
to chrome javascript via components.utils.importglobalproperties) instead of this api. 889 nsiscrollable scrollbar scroll orientations a scrollbar can be in. 890 nsisearchengine inherits from: nsisupports 891 nsisearchsubmission interfaces, interfaces:scriptable, xpcom, xpcom interface reference no summary! 892 nsisecuritycheckedcomponent interfaces, interfaces:scriptable, security, xpcom, xpcom api reference, xpcom interface reference in gecko, a "capability" is a string identifying a set of actions that code is allowed to perform. two examples: 893 nsiseekablestream files, interfaces, interfaces:scriptable, needscontent, xpcom interface reference this method moves the stream offset of the...

Components.isSuccessCode
description components.issuccesscode() may be used to determine whether an xpcom return code (an nsresult) indicates success or failure. ...

Components.utils.exportFunction
this prevents passing cross-origin objects (like window or location) to privileged functions, since the privileged code will have full access to those objects and might unintentionally do something dangerous. this provision can be overridden by passing { allowcrossoriginarguments: true } to exportfunction. example export to global scope this...

Components.utils.importGlobalProperties
const {blob, file, services} = cu.import("resource://gre/modules/services.jsm", {}); reference: stackoverflow :: use blob on firefox add-on hiddendomwindow the hidden domwindow has all of these objects automatically imported. the downside of using hiddendomwindow is that on startup of firefox, the hiddendomwindow objects cannot be accessed until it is fully loaded. therefore readystate must be checked, if it is not complete, then a load listener must be attached. once readystate is complete then the objects can be used. for example this is how to ues the file object. var domfile = services.appshell.hiddendomwindow.file('/path/to/file'); xpcom components some objects have an xpcom alternative, which typically allows more flexibility then the dom version here is an example of how to use the...

Examples
there are several java test applications checked in to the tree that give examples on how to embed gecko or init xpcom from within java. the test apps can be found at mozilla/extensions/java/xpcom/tests. ...

JavaXPCOM
t-xpcom bridge), and uses xpidl. note: javaxpcom was included in xulrunner up through version 1.9.2. it has been removed in xulrunner 2, and is not actively maintained. documentation javaxpcom development how to get and build the source, as well as how to view and report bugs. sample code there are several java test applications checked in to the tree that give examples on how to embed gecko or init xpcom from within java. embedding mozilla in a java application using javaxpcom xulrunner ships with the javaxpcom component, which allows java code to interact with xpcom objects. as you will see in this article, working with xpcom objects in java is not that much different than doing so in c++. view...

mozIStorageConnection
rogress handler callbacks. ahandler the mozistorageprogresshandler instance that is being registered. return value returns the previous registered handler, or null if none was previously registered. tableexists() determines if there exists a table with the given name. boolean tableexists( in autf8string atablename ); parameters atablename the sql table whose existence should be checked. return value returns true if the table exists, false otherwise. see also storage mozstorage introduction and how-to article mozistoragestatement create and execute sql statements on a sqlite database. mozistoragevaluearray wraps an array of sql values, such as a result row. mozistoragefunction create a new sqlite function. mozistorageaggregatefunction create a new sqlite aggregate fun...

mozIThirdPartyUtil
i of the channel. if so, return. obtain the bottommost nsidomwindow, and its same-type parent if it exists, from the channel's notification callbacks. then: if the parent is the same as the bottommost window, and the channel has the load_document_uri flag set, return false. this represents the case where a toplevel load is occurring and the window's uri has not yet been updated. (we have already checked that auri is not foreign with respect to the channel uri.) otherwise, return the result of isthirdpartywindow() with arguments of the channel's bottommost window and the channel uri, respectively. therefore, both the channel's uri and each level in the window hierarchy associated with the channel is tested. for example, if auri is "http://mail.google.com/", achannel has a uri of "http://google...

mozIVisitStatusCallback
avisitedstatus true if the specified uri has been visited; otherwise false. see also moziasynchistory ...

nsIAccessibleRole
88 the header for a column of a table. role_table_row_header 89 the header for a row of a table. role_tear_off_menu_item 90 a menu item used to tear off and reattach its menu. role_terminal 91 represents an accessible terminal. role_text_container 92 collection of objects that constitute a logical text entity. role_toggle_button 93 a toggle button. a specialized push button that can be checked or unchecked, but does not provide a separate indicator for the current state. role_tree_table 94 representas a control that is capable of expanding and collapsing rows as well as showing multiple columns of data. role_viewport 95 a viewport. an object usually used in a scroll pane. it represents the portion of the entire data that the user can see. as the user manipulates the scroll bars, th...

nsIAccessibleStates
ate_unavailable 0x00000001 the object is unavailable, that is disabled. state_selected 0x00000002 the object is selected, that is it indicates this object is the child of an object that allows its children to be selected and that this child is one of those children that has been selected. state_focused 0x00000004 the object is focused. state_pressed 0x00000008 the object is pressed. state_checked 0x00000010 the object is checked. state_mixed 0x00000020 indicates that the state of a three-state check box or toolbar button is not determined. the check box is neither checked nor unchecked and is therefore in the third or mixed state. state_readonly 0x00000040 the object is designated read-only. state_hottracked 0x00000080 the object is hot-tracked by the mouse, which means that its app...

nsIBlocklistService
his parameter is null, the version of the running toolkit is used. return value the blocklist state of the plugin, one of the constants. isaddonblocklisted() determine if an item is blocklisted. boolean isaddonblocklisted( in jsval addon, in astring appversion, optional from gecko 1.9.1 in astring toolkitversion optional from gecko 1.9.1 ); parameters addon the addon object to be checked. appversion optional from gecko 1.9.1 the version of the application we are checking in the blocklist. if this parameter is null, the version of the running application is used. toolkitversion optional from gecko 1.9.1 the version of the toolkit we are checking in the blocklist. if this parameter is null, the version of the running toolkit is used. return value true if the item i...

nsICacheEntryDescriptor
ement nsisupports get or set the cache data element. this will fail if the cache entry is stream based. the cache entry holds a strong reference to this object. the object will be released when the cache entry is destroyed. file nsifile get the disk file associated with the cache entry. read only. predicteddatasize print64 stores the content-length specified in the http header for this entry. checked before we write to the cache entry, to prevent ever taking up space in the cache for an entry that we know up front is going to have to be evicted anyway. see bug 588507. securityinfo nsisupports get or set security info on the cache entry for this descriptor. this fails if the storage policy is not store_in_memory. storagepolicy nscachestoragepolicy get or set the storage policy of the cach...

nsICachingChannel
tching this url would cause validation of the cache entry via the network. combining this flag with load_bypass_local_cache will cause all loads to fail. this flag differs from load_only_from_cache in that this flag fails the load if validation is required while load_only_from_cache skips validation where possible. load_check_offline_cache 1 << 27 this load flag causes the offline cache to be checked when fetching a request. it will be set automatically if the browser is offline. this flag will not be transferred through a redirect. load_bypass_local_cache 1 << 28 this load flag causes the local cache to be skipped when fetching a request. unlike load_bypass_cache, it does not force an end-to-end load (that is, it does not affect proxy caches). load_bypass_local_cache_if_busy 1 << 29 th...

nsIController
alled, your implementation should execute the command with the specified name. void docommand( in string command ); parameters command the name of the command to execute. iscommandenabled() implement this method to indicate whether or not the specified command is enabled. boolean iscommandenabled( in string command ); parameters command the name of the command whose availability is to be checked. return value return true if the specified command is currently available to be used; otherwise, it should return false. onevent() implement this method to process the event with the specified name. void onevent( in string eventname ); parameters eventname the name of the event to process. supportscommand() implement this method to report whether or not the command with the specified name i...

nsIDOMOfflineResourceList
ate constants indicating the status of the application cache. constants application cache state constants constant value description uncached 0 the object isn't associated with an application cache. idle 1 the application cache is not in the process of being updated. checking 2 the application cache manifest is being fetched and checked for updates. downloading 3 resources are being downloaded to be added to the cache. updateready 4 there is a new version of the application cache available. obsolete 5 the application cache group is now obsolete. methods mozadd() adds an item to the dynamically managed entries. the resource will be fetched and added to the application cache. ...

nsIDOMStorageManager
ocal storage area exists for a given origin. nsidomstorage getlocalstorageforprincipal( nsiprincipal aprincipal, domstring adocumenturi ); parameters aprincipal the principal for which to return the local storage object. adocumenturi the document's uri. return value the local storage object for the specified principal. getusage() returns the amount of disk space used by a domain. usage is checked against the domain of the page that set the key (the owner domain), not the domain of the storage object. long getusage( astring aownerdomain ); parameters aownerdomain the domain to check. return value the space usage of the domain, in bytes.see also offline apps dom storage structured client-side storage (html 5 specification) ...

nsIDroppedLinkHandler
ed can be dropped. boolean candroplink( in nsidomdragevent aevent, in prbool aallowsamedocument ); parameters aevent a dragenter or dragover event. aallowsamedocument if false, drops are only allowed if the document of the source of the drag is different from the destination. this check includes any parent, sibling and child frames in the same content tree. if true, the source is not checked. return value true if the link being dragged can be dropped. exceptions thrown missing exception missing description droplink() given a drop event, determines the link being dragged. if a uri is returned the caller can, for instance, load it. if null is returned, there is no valid link to be dropped. astring droplink( in nsidomdragevent aevent, out astring aname, [optional] in b...

nsIHTMLEditor
void setinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void setparagraphformat(in astring aparagraphformat); void updatebaseurl(); attributes attribute type description iscssenabled boolean a boolean which is true is the htmleditor has been instantiated with css knowledge and if the css pref is currently checked. returninparagraphcreatesnewparagraph boolean a boolean indicating if a return key pressed in a paragraph creates another paragraph or just inserts a <br> at the caret. constants constant value description eleft 0 ecenter 1 eright 2 ejustify 3 methods adddefaultproperty() registers ...

nsIMessenger
current history. void openurl(in acstring aurl); parameters aurl the url to open. loadurl() load a custom message by url. similar to openurl() except can be used to load things that appear as messages to users (e.g load an attachment as a email). void loadurl(in nsidomwindow awin, in acstring aurl); parameters awin a window. as far as i can tell this isn't used or checked. aurl the url to open. launchexternalurl() launches the nsiexternalprotocolservice and sends it the url. void launchexternalurl(in acstring aurl); parameters aurl the url to open. canundo() queries if there are any undo items in the transaction manager. boolean canundo(); return value boolean representing whether undo is available. canredo() queries if there are any redo...

nsIMsgIdentity
t to ask the user to complete all the fields. smtpserverkey astring the preferred smtp server for this identity. if this is set, this is the smtp server that should be used for the message send. requestreturnreceipt boolean readonly: default request for return receipt option for this identity. if this is set, the return receipt menu item on the compose window will be checked. receiptheadertype long readonly: requestdsn boolean readonly: default request for dsn option for this identity. if this is set, the dsn menu item on the compose window will be checked. methods clearallvalues() note: this is really dangerous! this destroys all pref values; do not call this unless you know what you're doing! void clearallvalues(); paramet...

nsITransaction
r/txmgr/idl/nsitransaction.idlscriptable please add a summary to this article. inherits from: nsisupports last changed in gecko 1.7 method overview void dotransaction(); boolean merge(in nsitransaction atransaction); void redotransaction(); void undotransaction(); attributes attribute type description istransient boolean the transaction's transient state. this attribute is checked by the transaction manager after the transaction's execute() method is called. if the transient state is false, a reference to the transaction is held by the transaction manager so that the transactions' undotransaction() and redotransaction() methods can be called. if the transient state is true, the transaction manager returns immediately after the transaction's dotransaction() method is called...

nsIXPCScriptable
resolve() this method is called when the want_newresolve flag is set. when this method is called, xpconnect is attempting to resolve a lazy property named by id on obj. the js engine will check if the property named by id is defined after this method has been called. this is very similar to jsnewresolveop. if an implementation of this method throws an error code, the prototype chain will not be checked for the property. prbool newresolve( in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval id, in pruint32 flags, out jsobjectptr objp ); parameters wrapper cx the pointer to the jscontext newresolve is being called from. obj the pointer to the jsobject that the property named by id that is being accessed. id the name or index of the p...

nsIXULTemplateQueryProcessor
arated list of uris. this list is processed by the builder and supplied to the query processor in the adatasources array as a list of nsiuri objects or nsidomnode objects. this method may return an object corresponding to these uris and the builder will supply this object to other query processor methods. for example, for an xml source, the datasource might be an nsidomnode. all of these uris are checked by the builder so it is safe to use them, however note that a uri that redirects may still needs to be checked to ensure that the document containing arootnode may access it. this is the responsibility of the query processor if it needs to load the content of the uri. if the query processor needs to load the datasource asynchronously, it may set the ashoulddelaybuilding returned parameter to true...

nsMsgFolderFlagType
onst nsmsgfolderflagtype createdoffline = 0x02000000; /// this imap folder cannot have children :-( const nsmsgfolderflagtype imapnoinferiors = 0x04000000; /// this folder configured for offline use const nsmsgfolderflagtype offline = 0x08000000; /// this folder has offline events to play back const nsmsgfolderflagtype offlineevents = 0x10000000; /// this folder is checked for new messages const nsmsgfolderflagtype checknew = 0x20000000; /// this folder is for spam messages const nsmsgfolderflagtype junk = 0x40000000; /// this folder is in favorites view const nsmsgfolderflagtype favorite = 0x80000000; /// special-use folders const nsmsgfolderflagtype specialuse = inbox|drafts|trash|sentmail| ...

XPCOM Interface Reference
nnsiradiointerfacelayernsirandomgeneratornsirequestnsirequestobservernsiresumablechannelnsirunnablensishentrynsishistorynsishistorylistenernsisockssocketinfonsisslerrorlistenernsisslsocketcontrolnsiscreennsiscreenmanagernsiscripterrornsiscripterror2nsiscriptableionsiscriptableinputstreamnsiscriptableunescapehtmlnsiscriptableunicodeconverternsiscrollablensisearchenginensisearchsubmissionnsisecuritycheckedcomponentnsiseekablestreamnsiselectionnsiselection2nsiselection3nsiselectioncontrollernsiselectionimageservicensiselectionprivatensiserversocketnsiserversocketlistenernsiservicemanagernsisessionstartupnsisessionstorensisimpleenumeratornsismsdatabaseservicensismsrequestmanagernsismsservicensisocketprovidernsisocketproviderservicensisockettransportnsisockettransportservicensisoundnsispeculativeconne...

XPCOM Interface Reference by grouping
nsicookiemanager2 nsicookiepermission nsicookiepromptservice nsicookieservice nsicookiestorage nsisessionstore crypto nsicryptohash filter nsiparentalcontrolsservice nsipermission nsipermissionmanager nsisecuritycheckedcomponent ssl nsisslerrorlistener stream stream nsipipe nsitraceablechannel nsitransport nsitransporteventsink nsitransportsecurityinfo timer nsitimer nsitimercallback ui ...

nsIAbCard/Thunderbird3
boolean getpropertyasbool(in string name); setproperty() setpropertyasastring() setpropertyasautf8string() setpropertyasuint32() setpropertyasbool() assigns the given to value to the property of the given name. should the property exist, its value will be overwritten. an implementation may impose additional semantic constraints for certain properties. however, such constraints might not be checked by this method. these functions convert values in the same manner as the default implementation of nsivariant. a value must be convertible to a string; if this convention is not followed, consumers of cards may fail unpredictably or return incorrect results. the non-variant functions are marked [noscript] since xpconnect uses magic with nsivariant such that the other functions are not needed, ...

nsMsgViewCommandCheckState
the nsmsgviewcommandcheckstate interface contains constants used for command status in thunderbird. it is (as far as i can tell) not currently used anywhere in thunderbird. mailnews/base/public/nsimsgdbview.idlscriptable please add a summary to this article. last changed in gecko 1.9 (firefox 3) constants name value description notused 0 checked 1 unchecked 2 ...

Xptcall Porting Guide
ssed on to the overridden callmethod. the platform dependent code is responsible for doing any cleanup and returning. the stub methods are declared in xptcall/public/xptcstubsdecl.inc. these are '#included' into the declaration of nsxptcstubbase. a similar include file (xptcall/public/xptcstubsdef.inc) is expanded using platform specific macros to define the stub functions. these '.inc' files are checked into cvs. however, they can be regenerated as necessary (i.e. to change the number of stubs or to change their specific declaration) using the perl script xptcall/public/genstubs.pl. here are examples of this implementation for win32 and linux x86, netbsd x86, and freebsd. both of these examples use inline assembly language. that is just how i decided to do it. you can do it as you choose. the wi...

customDBHeaders Preference
es custom header data for use in a custom column within thunderbird's main view. the mailnews.customdbheaders preference will be our focus. some of the functionality described here is really new, so please try to be understanding if some of these things change tomorrow (or have changed already). while i was going through the creating a custom column guide, i built and used thunderbird-2.0b1 checked-out from cvs with the thunderbird_2_0b1_release tag. there is a high probability that your experience will be different should you use an earlier release. getting started to build upon the reply-to column tutorial, i'll describe the process i went through in developing a custom column to display a 'superfluous' column within thunderbird's main view. the data will come from a custom header lab...

Using tab-modal prompts
/* exception: prompt aborted by user undefined:425 */ ...

Using the Mozilla symbol server
...

WebIDL bindings
. in other words, it acts like it has a "void" return type. preference or permission checking should be implemented by adding an extended attribute to the webidl interface. this has the advantage that if the check fails, the constructor or object will not show up at all. for preference checking, add an extended attribute pref="mypref.enabled" where mypref.enabled is the preference that should be checked. settingslock is an example of this. for permissions or other kinds of checking, add an extended attribute func="mypermissionchecker" where mypermissionchecker is a function implemented in c++ that returns true if the interface should be enabled. this function can do whatever checking is needed. one example of this is pushmanager. example here's an example js implementation of the above interf...

Mozilla
r was shut down. git moved here: https://firefox-source-docs.mozilla.org/contributing/contribution_quickref.html hacking with bonsai bonsai was originally created to solve the problem of tree instability. the original navigator code base had large sections that were shared across multiple platforms. many times, code checked in would compile or run on a handful of platforms. also, with as many as 100 engineers, it was very difficult to determine what happened in the tree that caused the instability. bonsai was created to solve these problems. how mozilla determines mime types all data handling in mozilla is based on the mime type of the content. this means th...

Plug-in Basics - Plugins
ins access("/home/user_name/.mozilla/firefox/dqh2nb5k.default-1441864569209/plugins", f_ok) = -1 enoent (no such file or directory) access("/home/user_name/.mozilla/plugins", f_ok) = -1 enoent (no such file or directory) access("/usr/lib64/firefox/browser/plugins", f_ok) = -1 enoent (no such file or directory) access("/usr/lib/mozilla/plugins", f_ok) = 0 this output i have after close firefox. i checked also this command with above script (with environment variable) on my system and also working. however, primary working path with binary file was /usr/lib/mozilla/plugins for 32-bit and 64-bit linux distributions and looks still working. firefox and opensuse probably use "moz_plugin_path environment variable" in script to run firefox, so in this way /usr/lib64/mozilla/plugins also should be su...

Using the Debugger map scopes feature - Firefox Developer Tools
dle.js" file. right-click on the source code and the context menu now includes an option to jump to original location as shown below. click jump to original location. the debugger opens the file "increment.js" so you can view the original code. notice that your breakpoint is set here in the original code as it was in the corresponding line in the "bundle.js" file. and, since map has been checked in the scopes panel, you also see variable symbols from the original code. using this feature is expensive in terms of resources, but it certainly makes your life easier when you have to debug source code that has been packaged webpack or a similar tool. ...

UI Tour - Firefox Developer Tools
at any given point during the recording: to learn much more about the flame chart, see the separate flame chart page. allocations the allocations view is new in firefox 46. the allocations view is like the call tree view, but for allocations: it shows you which functions in your page are allocating the most memory over the course of the profile. the allocations view only appears if you checked "record allocations" in the performance tool settings, before recording a profile: to learn much more about the allocations view, see the separate allocations page. ...

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

Debugging Firefox Desktop - Firefox Developer Tools
nt instance of desktop firefox running on the same machine. in this guide, the instance of firefox being debugged is called the debuggee, and the instance of firefox doing the debugging is called the debugger. enable remote debugging first, you'll need to ensure that both debugger and debuggee have the "enable browser chrome and add-on debugging toolboxes" and "enable remote debugging" settings checked in the developer tools settings. you only need to do this once: the setting values persist across restarts. start the debugger server next, you need to start the debugger server in the debuggee. run the debuggee from the command line, passing it the --start-debugger-server option: /path/to/firefox --start-debugger-server passed with no arguments, --start-debugger-server makes the debugger...

CSSStyleDeclaration.getPropertyPriority() - Web APIs
return value priority is a domstring that represents the priority (e.g. "important") if one exists. if none exists, returns the empty string. ...

CSSStyleDeclaration.getPropertyValue() - Web APIs
return value value is a domstring containing the value of the property. if not set, returns the empty string. ...

DataTransferItem.webkitGetAsEntry() - Web APIs
scanfiles(entry, directorycontainer); }); }); } } scanfiles() begins by creating a new <li> element to represent the item being scanned, inserts the name of the item into it as its text content, and then appends it to the container. the container is always a list element in this example, as you'll see shortly. once the current item is in the list, the item's isdirectory property is checked. if the item is a directory, we need to recurse into that directory. the first step is to create a filesystemdirectoryreader to handle fetching the directory's contents. that's done by calling the item's createreader() method. then a new <ul> is created and appended to the parent list; this will contain the directory's contents in the next level down in the list's hierarchy. after that, director...

Document.createProcessingInstruction() - Web APIs
tandard no change dom4the definition of 'createprocessinginstruction()' in that specification. obsolete added more explicit definition of how the data parameter is validated. document object model (dom) level 3 core specificationthe definition of 'createprocessinginstruction()' in that specification. obsolete added note that the namespace of the target name is not checked whether it is well-formed, defined what is considered an illegal character for the target name and specified the returned processinginstruction object more precisely. document object model (dom) level 2 core specificationthe definition of 'createprocessinginstruction()' in that specification. obsolete no change document object model (dom) level 1 specificationthe definitio...

Document.fullscreenEnabled - Web APIs
var isfullscreenavailable = document.fullscreenenabled; value a boolean value which is true if the document and the elements within can be placed into full-screen mode by calling element.requestfullscreen(). if full-screen mode isn't available, this value is false. example in this example, before attempting to request full-screen mode for a <video> element, the value of fullscreenenabled is checked, in order to avoid making the attempt when not available. function requestfullscreen() { if (document.fullscreenenabled) { videoelement.requestfullscreen(); } else { console.log('your browser cannot use fullscreen right now'); } } specifications specification status comment fullscreen apithe definition of 'document.fullscreenenabled' in that specificat...

Document.popupNode - Web APIs
uthors are encouraged to use the menupopup property triggernode instead. when a popup attached via the popup or context attributes is opened, the xul document's popupnode property is set to the node that was clicked on. this will be the target of the mouse event that activated the popup. if the popup was opened via the keyboard, the popup node may be set to null. typically, this property will be checked during a popupshowing event handler for a context menu to initialize the menu based on the context. this property is only set for popups attached via the popup or context attributes. for other types of popups, the value is not changed. in these other cases, for example when calling the popup's showpopup method, you may wish to set the popupnode property directly beforehand. this property applie...

Element.scrollHeight - Web APIs
ht; document.registration.accept.disabled = document.getelementbyid("nextstep").disabled = !checkreading.read; checkreading.noticebox.innerhtml = checkreading.read ? ...

Event.eventPhase - Web APIs
ddlisteners() } 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++) { 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 = ...

EventTarget.addEventListener() - Web APIs
th a getter function for the passive property; the getter sets a flag, passivesupported, to true if it gets called. that means that if the browser checks the value of the passive property on the options object, passivesupported will be set to true; otherwise, it will remain false. we then call addeventlistener() to set up a fake event handler, specifying those options, so that the options will be checked if the browser recognizes an object as the third parameter. then, we call removeeventlistener() to clean up after ourselves. (note that handleevent() is ignored on event listeners that aren't called.) you can check whether any option is supported this way. just add a getter for that option using code similar to what is shown above. then, when you want to create an actual event listener that use...

FileSystemDirectoryReader.readEntries() - Web APIs
scanfiles(entry, directorycontainer); }); }); } } scanfiles() begins by creating a new <li> element to represent the item being scanned, inserts the name of the item into it as its text content, and then appends it to the container. the container is always a list element in this example, as you'll see shortly. once the current item is in the list, the item's isdirectory property is checked. if the item is a directory, we need to recurse into that directory. the first step is to create a filesystemdirectoryreader to handle fetching the directory's contents. that's done by calling the item's createreader() method. then a new <ul> is created and appended to the parent list; this will contain the directory's contents in the next level down in the list's hierarchy. after that, director...

FormData() - Web APIs
v> <label for="useracc">enter account number:</label> <input type="text" id="useracc" name="useracc"> </div> <div> <label for="userfile">upload file:</label> <input type="file" id="userfile" name="userfile"> </div> <input type="submit" value="submit!"> </form> note: only successful form controls are included in a formdata object, i.e. those with a name, not disabled and checked (radio buttons and checkboxes) or selected (one or more options within a select). let myform = document.getelementbyid('myform'); let formdata = new formdata(myform); specifications specification status comment xmlhttprequestthe definition of 'formdata()' in that specification. living standard initial definition ...

HTMLElement: change event - Web APIs
e the input event, the change event is not necessarily fired for each alteration to an element's value. ...

HTMLElement - Web APIs
lobaleventhandlers interface and added an inheritance from it. html5the definition of 'htmlelement' in that specification. recommendation added the following properties: dataset, hidden, tabindex, accesskey, accesskeylabel, draggable, dropzone, contenteditable, iscontenteditable, contextmenu, spellcheck, commandtype, commandlabel, commandicon, commandhidden, commanddisabled, commandchecked, style, and all the onxyz properties. moved the id and classname properties to the element interface. document object model (dom) level 2 html specificationthe definition of 'htmlelement' in that specification. obsolete no change from document object model (dom) level 2 html specification document object model (dom) level 1 specificationthe definition of 'htmlelement' ...

HTMLSelectElement.disabled - Web APIs
living standard html5the definition of 'htmlselectelement' in that specification. recommendation initial definition, snapshot of ...

Recommended Drag Types - Web APIs
nditem(file.leafname); } } </script> in this example, the event returns false only if the data transfer contains the application/x-moz-file type. during the drop event, the data associated with the file type is retrieved, and the filename of the file is added to the listbox. note that the instanceof operator is used here as the mozgetdataat() method will return an nsisupports that needs to be checked and converted into an nsifile. this is also a good extra check in case someone made a mistake and added a non-file for this type. updates to datatransfer.types the latest spec dictates that datatransfer.types should return a frozen array of domstrings rather than a domstringlist (this is supported in firefox 52 and above). as a result, the contains method no longer works; the includes method s...

IntersectionObserver.IntersectionObserver() - Web APIs
if the threshold list is empty, it's set to the array [0.0]. syntax var observer = new intersectionobserver(callback[, options]); parameters callback a function which is called when the percentage of the target element is visible crosses a threshold. ...

KeyboardEvent.key - Web APIs
the same goes for the inputevent.data property of the beforeinput and input events. as we finally release the key 2, a keyup event is fired but the key property will be set to the string value 2 for both keyboard layouts because the modifier shift key is no longer active. example this example uses eventtarget.addeventlistener() to listen for keydown events. when they occur, the key's value is checked to see if it's one of the keys the code is interested in, and if it is, it gets processed in some way (possibly by steering a spacecraft, perhaps by changing the selected cell in a spreadsheet). window.addeventlistener("keydown", function (event) { if (event.defaultprevented) { return; // do nothing if the event was already processed } switch (event.key) { case "down": // ie/edge ...

MediaError.message - Web APIs
known error occurred."; break; } let message = err.message; if (message && message.length) { s += " " + message; } displayerrormessage("<strong>error " + err.code + ":</strong> " + s + "<br>"); }; this gets the mediaerror object describing the error from the error property on the htmlaudioelement representing the audio player. the error's code attribute is checked to determine a generic error message to display, and, if message is not empty, it's appended to provide additional details. then the resulting text is output to the log. result you can try out this example below, and can see the example in action outside this page here. specifications specification status comment html living standardthe definition of 'mediaerror.mess...

MouseEvent - Web APIs
. see the keyboardevent.getmodifierstate() for details. mouseevent.initmouseevent() initializes the value of a mouseevent created. if the event has already being dispatched, this method does nothing. example this example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using dom methods. ...

Navigator.mozIsLocallyAvailable() - Web APIs
the navigator.mozislocallyavailable() method allows add-ons to determine whether or not a given resource is available. note: security exceptions can occur if the requested uri is not from the same origin. syntax navigator.mozislocallyavailable(uri, ifoffline); parameters uri the uri of the resource whose availability is to be checked, as a string. ifoffline allows you to specify whether or not the offline resources cache should be checked; specify true to consider the offline resources cache. example var available = navigator.mozislocallyavailable("my-image-file.png", true); if (available) { /* the offline resource is present */ } else { console.log("certain needed resources are not available offline"); } specifications not part of any specifications. ...

Node.isDefaultNamespace() - Web APIs
return value result is a boolean that holds the return value true or false. ...

RTCIceCandidate.relatedAddress - Web APIs
ine) describing an ice candidate discovered by the stun server: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 6502 typ srflx raddr 192.168.2.77 rport 32768 generation 0 the remote address, relatedaddress, is the dotted quad (for ipv4) or colon-delineated 64-bit address (for ipv6) immediately following the text "raddr", or "192.168.2.77". example in this example, the candidate's type is checked, and then debugging output is presented, based on the candidate type, including the candidate's ip and relatedaddress. switch(candidate.type) { case "host": console.log("host candidate's ip address is " + candidate.ip); break; case "srflx": console.log("server reflexive candidate's base address is " + candidate.relatedaddress + "; reachable at " + candidate.ip); break...

RTCIceCandidate.relatedPort - Web APIs
which shows a bit of this. here's an sdp attribute line (a-line) describing an ice candidate discovered by the stun server: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 6502 typ srflx raddr 192.168.2.77 rport 32768 generation 0 the remote port, relatedport, is the number immediately following the "rport" label on the a-line, or 32768. example in this example, the candidate's type is checked, and then debugging output is presented, based on the candidate type, including the candidate's type, address (ip and port), and related address (relatedaddress and relatedport). var ip = candidate.ip; var port = candidate.port; var relip = candidate.relatedaddress; var relport = candidate.relatedport; if (relip && relport) { console.log("candidate type '" + type + "' -- contact address: " + ...

RTCIceCandidatePairStats.state - Web APIs
pair has a state, whose value is represented by rtcstatsicecandidatepairstate. when a candidate pair is added to the check list, it begins in the frozen state. as soon as there are no checks ongoing which block the pair from being analyzed, it is unfrozen and moves into the waiting state. this may happen immediately upon being added to the check list. each time a candidate pair is done being checked, the next-highest priority candidate pair remaining on the check list moves from the waiting state to the in-progress state, and its check begins. if the check fails for any reason, the pair moves into its final state, failed. if the check succeeds, the pair ends up in the succeeded state. the ice check list state for any given pair of ice candidates can be found in the corresponding the state p...

RTCPeerConnection.iceConnectionState - Web APIs
a usable pairing of local and remote candidates has been found for all components of the connection, and the connection has been established. it's possible that gathering is still underway, and it's also possible that the ice agent is still checking candidates against one another looking for a better connection to use. "completed" the ice agent has finished gathering candidates, has checked all pairs against one another, and has found a connection for all components. "failed" the ice candidate has checked all candidates pairs against one another and has failed to find compatible matches for all components of the connection. it is, however, possible that the ice agent did find compatible connections for some components. "disconnected" checks to ensure that com...

RTCPeerConnection: iceconnectionstatechange event - Web APIs
rtc session for further information. usage notes a successful connection attempt will typically involve the state starting at new, then transitioning through checking, then connected, and finally completed. however, under certain circumstances, the connected state can be skipped, causing a connection to transition directly from the checking state to completed. this can happen when only the last checked candidate is successful, and the gathering and end-of-candidates signals both occur before the successful negotiation is completed. ice connection state during ice restarts when an ice restart is processed, the gathering and connectivity checking process is started over from the beginning, which will cause the iceconnectionstate to transition to connected if the ice restart was triggered while ...

RTCPeerConnection - Web APIs
a usable pairing of local and remote candidates has been found for all components of the connection, and the connection has been established. it's possible that gathering is still underway, and it's also possible that the ice agent is still checking candidates against one another looking for a better connection to use. "completed" the ice agent has finished gathering candidates, has checked all pairs against one another, and has found a connection for all components. "failed" the ice candidate has checked all candidates pairs against one another and has failed to find compatible matches for all components of the connection. it is, however, possible that the ice agent did find compatible connections for some components. "disconnected" checks to ensure that com...

RTCStatsIceCandidatePairState - Web APIs
d yet for this candidate pair, and performing the check is blocked until another check is successful. once that check has succeeded, this pair will unfreeze and move into the waiting state. in-progress a check has been initiated for this pair, but the check's transaction is still in progress. succeeded a check for this pair has been completed successfully. waiting this pair has not yet been checked, but the check can be performed as soon as this pair is the highest priority pair remaining in the waiting state. specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcstatsicecandidatepairstate' in that specification. candidate recommendation initial specification. ...

RadioNodeList.value - Web APIs
if the underlying element collection contains radio buttons, the radionodelist.value property represents the checked radio button. on retrieving the value property, the value of the currently checked radio button is returned as a string. if the collection does not contain any radio buttons or none of the radio buttons in the collection is in checked state, the empty string is returned. on setting the value property, the first radio button input element whose value property is equal to the new value will be set to checked. syntax value = radionodelist.value; radionodelist.value = string; example html <form> <label><input type="radio" name="color" value="blue">blue</label> <label><input type="radio" name="color" value="red">red</label> </form> javascript // get the form const form = do...

ResizeObserver.unobserve() - Web APIs
editor's draft initial definition. ...

ResizeObserver - Web APIs
editor's draft initial definition. ...

Screen Wake Lock API - Web APIs
!== null && document.visibilitystate === 'visible') { wakelock = await navigator.wakelock.request('screen'); } }); putting it all together you can find the complete code on github here. the demo uses a button to acquire a wake lock and also release it, which in turn updates the ui. the ui also updates if the wake lock is released automatically for any reason. there's a checkbox which when checked, will automatically reacquire the wake lock if the document's visibility state changes and becomes visible again. performance considerations release the screen wake lock when user ends activity that required always-on screen. for example, a ticketing app which uses qr codes to transmit ticket information, might acquire screen wake lock when the qr code is displayed (so that code is successful...

ScrollToOptions.behavior - Web APIs
ooth scrolling enabled or not. when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ? 'smooth' : 'auto' } window.scrollto(scrolloptions); }); specifications specification status comment css object model (cssom) view modulethe definition of 'behavior' in that specification. working draft ...

ScrollToOptions.left - Web APIs
ooth scrolling enabled or not. when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ? 'smooth' : 'auto' } window.scrollto(scrolloptions); }); specifications specification status comment css object model (cssom) view modulethe definition of 'left' in that specification. working draft ...

ScrollToOptions.top - Web APIs
ooth scrolling enabled or not. when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ? 'smooth' : 'auto' } window.scrollto(scrolloptions); }); specifications specification status comment css object model (cssom) view modulethe definition of 'top' in that specification. working draft ...

ScrollToOptions - Web APIs
ooth scrolling enabled or not. when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ? 'smooth' : 'auto' } window.scrollto(scrolloptions); }); specifications specification status comment css object model (cssom) view modulethe definition of 'scrolltooptions' in that specification. working draft ...

UIEvent.isChar - Web APIs
t.ischar; value a boolean which is true if the event produces a character; otherwise false. some keystroke combinations may raise events but not produce any character (example: ctrl-alt-?). when this is the case, ischar returns false. it is used when event handlers need to do something like echo the input on the screen. example in this snippet, which is part of an event handler, the event is checked to see if it generates a character; if it does, the value of uievent.which is appended to a string which buffers the typed characters. if (event.ischar) { characterbuffer += e.which; } specification this property is not part of any specification. ...

Adding 2D content to a WebGL context - Web APIs
t, the shader type, and the source code, then creates and compiles the shader as follows: a new shader is created by calling gl.createshader(). the shader's source code is sent to the shader by calling gl.shadersource(). once the shader has the source code, it's compiled using gl.compileshader(). to check to be sure the shader successfully compiled, the shader parameter gl.compile_status is checked. to get its value, we call gl.getshaderparameter(), specifying the shader and the name of the parameter we want to check (gl.compile_status). if that's false, we know the shader failed to compile, so show an alert with log information obtained from the compiler using gl.getshaderinfolog(), then delete the shader and return null to indicate a failure to load the shader. if the shader was loaded a...

WebGL best practices - Web APIs
be completed (with an effect similar to glfinish() in native opengl). in production code, avoid such entry points, especially on the browser main thread where they can cause the entire page to jank (often including scrolling or even the whole browser). geterror(): causes a flush + round-trip to fetch errors from the gpu process). for example, within firefox, the only time glgeterror is checked is after allocations (bufferdata, *teximage*, texstorage*) to pick up any gl_out_of_memory errors. getshader/programparameter(), getshader/programinfolog(), other gets on shaders/programs: flush + shader compile + round-trip, if not done after shader compilation is complete. (see also parallel shader compilation below.) get*parameter() in general: possible flush + round-trip. in some ...

Using the Web Audio API - Web APIs
web audio apis. since our scripts are playing audio in response to a user input event (a click on a play button, for instance), we're in good shape and should have no problems from autoplay blocking. so, let's start by taking a look at our play and pause functionality. we have a play button that changes to a pause button when the track is playing: <button data-playing="false" role="switch" aria-checked="false"> <span>play/pause</span> </button> before we can play our track we need to connect our audio graph from the audio source/input node to the destination. we've already created an input node by passing our audio element into the api. for the most part, you don't need to create an output node, you can just connect your other nodes to baseaudiocontext.destination, which handles the situ...

Window.locationbar - Web APIs
syntax objref = window.locationbar example the following complete html example shows how the visible property of the locationbar object is used. <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>various dom tests</title> <script> var visible = window.locationbar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> specifications specification status comment html living standardthe definition of 'window.locationbar' in that specification. ...

Window.menubar - Web APIs
syntax objref = window.menubar example the following complete html example demonstrates how the visible property of the menubar object is used. <html> <head> <title>various dom tests</title> <script> var visible = window.menubar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> specifications specification status comment html living standardthe definition of 'window.menubar' in that specification. ...

Window.pageYOffset - Web APIs
s. duis condimentum sapien non felis cursus blandit. integer euismod lectus a ipsum pellentesque lacinia.</p> `; document.getelementbyid("frame").contentdocument .body.innerhtml = contenthtml; in this example, an <iframe> is created and filled with content, then a specific element within the document is scrolled into view in the frame. once that's done, the vertical scroll position is checked by looking at the value of pageyoffset in the frame's contentwindow. html the html is extremely simple and has just two elements: an <iframe> that contains the document we're going to scroll, and a <div> into which we'll output the value of pageyoffset when we've finished the scroll. <iframe id="frame"> </iframe> <div id="info"> </div> javascript var frame = document.getelementbyid("frame")...

Window.scrollbars - Web APIs
syntax objref = window.scrollbars example the following complete html example shows how the visible property of the scrollbars object is used. <!doctype html> <html> <head> <title>various dom tests</title> <script> let visiblescrollbars = window.scrollbars.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> specifications specification status comment html living standardthe definition of 'window.scrollbars' in that specification. ...

XRSystem: isSessionSupported() - Web APIs
d by the user's webxr device. otherwise, the promise resolves with false. if the no devices are available or the browser doesn't have permission to use the xr device, the promise is rejected with an appropriate domexception. syntax var issupportedpromise = xr.issessionsupported(xrsessionmode) parameters xrsessionmode a domstring specifying the webxr session mode for which support is to be checked. this string must be one of inline (to present the webxr content inline within the context of an html document) or immersive-vr for a fully-immersive virtual experience. return value a promise that resolves to true if the specified session mode is supported; otherwise the promise resolves to false. exceptions rather than throwing true exceptions, issessionsupported() rejects the returned pro...

XRView.eye - Web APIs
updateinjury() returns true if the eye is still injured or false if the eye has ...

Using ARIA: Roles, states, and properties - Accessibility
img list listitem math none note presentation row rowgroup rowheader separator table term textbox toolbar tooltip landmark roles banner complementary contentinfo form main navigation region search live region roles alert log marquee status timer window roles alertdialog dialog states and properties widget attributes aria-autocomplete aria-checked aria-current aria-disabled aria-errormessage aria-expanded aria-haspopup aria-hidden aria-invalid aria-label aria-level aria-modal aria-multiline aria-multiselectable aria-orientation aria-placeholder aria-pressed aria-readonly aria-required aria-selected aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext live region attributes aria-live aria-relevan...

Cognitive accessibility - Accessibility
an input error is automatically detected and suggestions for correction are known (unless doing so would jeopardize the security or purpose of the content). prevent catastrophes for submissions that cause, or can lead to, legal, financial, or other significant consequences, ensure that the submissions can be reviewed, confirmed, and/or are reversible. data entered by the user should be checked for errors before submission, and the user should be given the opportunity to correct them. the user should be able to review, confirm, and correct information before final submission. also, be sure to include a confirmation checkbox in addition to a submit button. if a submission causes a legal or financial transaction to occur, provide a stated time within which the request can be amended or c...

HTML To MSAA - Accessibility
eadonly attribute is used n/a "activate" n/a input @type=password role_system_ text n/a n/a state_system_ readonly if @readonly attribute is used state_system_ protected n/a "activate" n/a input type="checkbox" role_system_ checkbutton n/a n/a state_system_ marqueed used as state checkable state_system_ mixed for html 5 if intermediate property of dom element returns true state_system_ checked if checked property of dom element returns true n/a "check"/"uncheck"/"cycle" depending on state event_object_ statechange when state is changed input type="radio" role_system_ radiobutton n/a n/a state_system_ marqueed used as state checkable state_system_ checked if checked property of dom element returns true n/a "select" event_object_ statechange when state is changed label role_sy...

Mobile accessibility checklist - Accessibility
have the same text available in the programmatic name of the component. wcag 2.1: label in name. all form controls must have labels (<label> elements) for the benefit of screen reader users. handling state standard controls such as radio buttons and checkboxes are handled by the operating system. however, for other custom controls state changes must be provided via aria states such as aria-checked, aria-disabled, aria-selected, aria-expanded, and aria-pressed. orientation content should not be restricted to a single orientation, such as portrait or landscape, unless essential. wcag 2.1: orientation examples of when an orientation is esssential is a piano application or a bank cheque. general guidelines an app title must be provided. headings must not break hierarchic...

Understandable - Accessibility
played usefully in context, just like error messages (see 3.3.1). no tutorial suggestions yet. 3.3.4 error prevention (legal, financial, data) (aa) in the case of forms involved with entry of sensitive data (such as legal agreements, e-commerce transactions, or personal data), at least one of the following should be true: submissions are reversible. data is checked for errors, and the user is given an opportunity to correct them. a mechanism is available for confirming and correcting information before final submission. reversible — for any view where data can be entered, provide an equivalent view that allows you to edit or even delete an entry, as appropriate. checking data — as covered in 3.3.1, a combination of client-side...

:disabled - CSS: Cascading Style Sheets
<fieldset id="shipping"> <legend>shipping address</legend> <input type="text" placeholder="name"> <input type="text" placeholder="address"> <input type="text" placeholder="zip code"> </fieldset> <br> <fieldset id="billing"> <legend>billing address</legend> <label for="billing-checkbox">same as shipping address:</label> <input type="checkbox" id="billing-checkbox" checked> <br> <input type="text" placeholder="name" disabled> <input type="text" placeholder="address" disabled> <input type="text" placeholder="zip code" disabled> </fieldset> </form> css input[type="text"]:disabled { background: #ccc; } javascript // wait for the page to finish loading document.addeventlistener('domcontentloaded', function () { // attach `change` event liste...

:hover - CSS: Cascading Style Sheets
try hovering over this link.</a> css a { background-color: powderblue; transition: background-color .5s; } a:hover { background-color: gold; } result image gallery you can use the :hover pseudo-class to build an image gallery with full-size images that show only when the mouse moves over a thumbnail. see this demo for a possible cue. note: for an analogous effect, but based on the :checked pseudo-class (applied to hidden radioboxes), see this demo, taken from the :checked reference page. specifications specification comment feedback html living standardthe definition of ':hover' in that specification. whatwg html github issues selectors level 4the definition of ':hover' in that specification. allows :hover to be applied to any pseudo...

any-pointer - CSS: Cascading Style Sheets
ne only matches when none of them are pointing devices. examples this example creates a small checkbox for users with at least one fine pointer and a large checkbox for users with at least one coarse pointer. the big checkbox takes precedence because it is declared after the small one. ...

pointer - CSS: Cascading Style Sheets
ng device. examples this example creates a small checkbox for users with fine primary pointers and a large checkbox for users with coarse primary pointers. ...

Variable fonts guide - CSS: Cascading Style Sheets
ible. note: supplying value ranges for font-weight, font-stretch, and font-style will keep the browser from attempting to render an axis outside that range if you are using the appropriate attribute (i.e. font-weight or font-stretch), but will not block you from supplying an invalid value via font-variation-settings, so use with care. working with older browsers variable font support can be checked with css feature queries (see @supports), so it's possible to use variable fonts in production and scope the css calling the variable fonts inside a feature query block. h1 { font-family: some-non-variable-font-family; } @supports (font-variation-settings: 'wdth' 115) { h1 { font-family: some-variable-font-family; } } sample pages the following example pages show two different ways to ...

CSS reference - CSS: Cascading Style Sheets
ht-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottom@bottom-centerbox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()ccalc()caption-sidecaret-colorch@character-variantcharacter-variant()@charset:checkedcircle()clamp()clearclipclip-pathcm<color>colorcolor-adjustcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradient()containcontentcontrast()<counter>counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-bezier()::cue::cue-regioncursor<custom-ident>d:defaultdeg<dimension>:dirdirection:di...

grid-auto-flow - CSS: Cascading Style Sheets
candidate recommendation initial definition ...

Event reference
html5 the fragment identifier of the url has changed (the part of the url after the #). lostpointercapture pointerevent pointer events element lost pointer capture. input event html5 the value of an element changes or the content of an element with the attribute contenteditable is modified. invalid event html5 a submittable element has been checked and doesn't satisfy its constraints. keydown keyboardevent dom l3 a key is pressed down. keypress keyboardevent dom l3 a key is pressed down, and that key normally produces a character value (use input event instead). keyup keyboardevent dom l3 a key is released. languagechange event html 5.1the definition of 'navigatorlangu...

Constraint validation - Developer guides
le marking up the form itself is easy, checking whether each field has a valid and coherent value is more difficult, and informing the user about the problem may become a headache. html5 introduced new mechanisms for forms: it added new semantic types for the <input> element and constraint validation to ease the work of checking the form content on the client side. basic, usual constraints can be checked, without the need for javascript, by setting new attributes; more complex constraints can be tested using the constraint validation api. for a basic introduction to these concepts, with examples, see the form validation tutorial. note: html5 constraint validation doesn't remove the need for validation on the server side. even though far fewer invalid form requests are to be expected, invalid on...

The HTML autocomplete attribute - HTML: Hypertext Markup Language
te given the context of the other fields in the form. "photo" the url of an image representing the person, company, or contact information given in the other fields in the form. see the whatwg standard for more detailed information. note: the autocomplete attribute also controls whether firefox will — unlike other browsers — persist the dynamic disabled state and (if applicable) dynamic checkedness of an <input> element, <textarea> element, or entire <form> across page loads. the persistence feature is enabled by default. setting the value of the autocomplete attribute to off disables this feature. this works even when the autocomplete attribute would normally not apply by virtue of its type. see bug 654072. examples <div> <label for="cc-number">enter your credit card number</label...

<command>: The HTML Command element - HTML: Hypertext Markup Language
tag omission the start tag is mandatory, but, as it is a void element, the use of an end tag is forbidden. permitted parent elements <colgroup> only, though it can be implicitly defined as its start tag is not mandatory. the <colgroup> must not have a <span> as child. dom interface htmlcommandelement attributes this element includes the global attributes. checked indicates whether the command is selected. must be omitted unless the type attribute is checkbox or radio. disabled indicates that the command is not available. icon gives a picture which represents the command. label the name of the command as shown to the user. radiogroup this attribute gives the name of the group of commands, with a type of radio, that will be toggled when the command...

<input type="range"> - HTML: Hypertext Markup Language
nly. orient similar to the -moz-orient non-standard css property impacting the <progress> and <meter> elements, the orient attribute defines the orientation of the range slider. values include horizontal, meaing the range is rendered horizontally, and vertical, where the range is rendered vertically. note: the following input attributes do not apply to the input range: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size, src, and width. any of these attributes, if included, will be ignored. examples while the number type lets users enter a number with optional constraints forcing their value to be between a minimum and a maximum value, it does requir...

<source>: The Media or Image Source element - HTML: Hypertext Markup Language
tor and pixel density descriptor. the browser chooses the most adequate image to display at a given point of time. the srcset attribute has an effect only when the <source> element is the direct child of a <picture> element. type the mime media type of the resource, optionally with a codecs parameter. if the type attribute isn't specified, the media's type is retrieved from the server and checked to see if the user agent can handle it; if it can't be rendered, the next <source> is checked. if the type attribute is specified, it's compared against the types the user agent can present, and if it's not recognized, the server doesn't even get queried; instead, the next <source> element is checked at once. when used in the context of a <picture> element, the browser will fall back to using th...

<textarea> - HTML: Hypertext Markup Language
only control is still submitted with the form. required this attribute specifies that the user must fill in a value before submitting a form. rows the number of visible text lines for the control. spellcheck specifies whether the <textarea> is subject to spell checking by the underlying browser/os. the value can be: true: indicates that the element needs to have its spelling and grammar checked. default : indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. false : indicates that the element should not be spell checked. wrap indicates how the control wraps text. possible values are: hard: the browser automatically inserts line breaks (cr+lf) so that each line has no more than the width of the con...

Global attributes - HTML: Hypertext Markup Language
. part names allows css to select and style specific elements in a shadow tree via the ::part pseudo-element. slot assigns a slot in a shadow dom shadow tree to an element: an element with a slot attribute is assigned to the slot created by the <slot> element whose name attribute's value matches that slot attribute's value. spellcheck an enumerated attribute defines whether the element may be checked for spelling errors. it may have the following values: true, which indicates that the element should be, if possible, checked for spelling errors; false, which indicates that the element should not be checked for spelling errors. style contains css styling declarations to be applied to the element. note that it is recommended for styles to be defined in a separate file or files. this ...

Using the application cache - HTML: Hypertext Markup Language
ache has a state, which indicates the current condition of the cache. caches that share the same manifest uri share the same cache state, which can be one of the following: uncached a special value that indicates that an application cache object is not fully initialized. idle the application cache is not currently in the process of being updated. checking the manifest is being fetched and checked for updates. downloading resources are being downloaded to be added to the cache, due to a changed resource manifest. updateready there is a new version of the application cache available. there is a corresponding updateready event, which is fired instead of the cached event when a new update has been downloaded but not yet activated using the swapcache() method. obsolete the application ca...

HTTP authentication - HTTP
this may be an attempt to trick you." ...

HTTP caching - HTTP
urns a 304 (not modified) header without sending the body of the requested resource, saving some bandwidth. here is an example of this process with a shared cache proxy: the freshness lifetime is calculated based on several headers. if a "cache-control: max-age=n" header is specified, then the freshness lifetime is equal to n. if this header is not present, which is very often the case, it is checked if an expires header is present. if an expires header exists, then its value minus the value of the date header determines the freshness lifetime. finally, if neither header is present, look for a last-modified header. if this header is present, then the cache's freshness lifetime is equal to the value of the date header minus the value of the last-modified header divided by 10. the expiration t...

Content negotiation - HTTP
presented the resources and choose the one to use. unfortunately, the http standard does not specify the format of the page allowing to choose between the available resource, which prevents to easily automatize the process. besides falling back to the server-driven negotiation, this method is almost always used in conjunction with scripting, especially with javascript redirection: after having checked for the negotiation criteria, the script performs the redirection. a second problem is that one more request is needed in order to fetch the real resource, slowing the availability of the resource to the user. ...

JavaScript data types and data structures - JavaScript
ge. variables in javascript are not directly associated with any particular value type, and any variable can be assigned (and re-assigned) values of all types: let foo = 42; // foo is now a number foo = 'bar'; // foo is now a string foo = true; // foo is now a boolean data and structure types the latest ecmascript standard defines nine types: six data types that are primitives, checked by typeof operator: undefined : typeof instance === "undefined" boolean : typeof instance === "boolean" number : typeof instance === "number" string : typeof instance === "string" bigint : typeof instance === "bigint" symbol : typeof instance === "symbol" null : typeof instance === "object". special primitive type having additional usage for its value: if object is not...

Control flow and error handling - JavaScript
returns false, // which overwrites the `throw` inside the above `catch` console.log('caught outer "bogus"'); } // output // caught inner "bogus" // false nesting try...catch statements you can nest one or more try...catch statements. if an inner try...catch statement does not have a catch block: it must contain a finally block, and the enclosing try...catch statement's catch block is checked for a match. for more information, see nested try-blocks on the try...catch reference page. utilizing error objects depending on the type of error, you may be able to use the name and message properties to get a more refined message. the name property provides the general class of error (such as domexception or error), while message generally provides a more succinct message than one would g...

Loops and iteration - JavaScript
mentbyid('btn'); btn.addeventlistener('click', function() { alert('number of options selected: ' + howmany(document.selectform.musictypes)); }); </script> do...while statement the do...while statement repeats until a specified condition evaluates to false. a do...while statement looks as follows: do statement while (condition); statement is always executed once before the condition is checked. (to execute multiple statements, use a block statement ({ ... }) to group those statements.) if condition is true, the statement executes again. at the end of every execution, the condition is checked. when the condition is false, execution stops, and control passes to the statement following do...while. example in the following example, the do loop iterates at least once and reiterates until...

Inheritance and the prototype chain - JavaScript
ave the property, then the browser looks for the property in the __proto__ of dosomeinstancing (a.k.a. dosomething.prototype). if the __proto__ of dosomeinstancing has the property being looked for, then that property on the __proto__ of dosomeinstancing is used. otherwise, if the __proto__ of dosomeinstancing does not have the property, then the __proto__ of the __proto__ of dosomeinstancing is checked for the property. by default, the __proto__ of any function's prototype property is window.object.prototype. so, the __proto__ of the __proto__ of dosomeinstancing (a.k.a. the __proto__ of dosomething.prototype (a.k.a. object.prototype)) is then looked through for the property being searched for. if the property is not found in the __proto__ of the __proto__ of dosomeinstancing, then the __proto...

Array.isArray() - JavaScript
return value true if the value is an array; otherwise, false. description if the value is an array, true is returned; otherwise, false is. ...

Array.prototype.map() - JavaScript
1, 108, 108, 111, 32, 87, 111, 114, 108, 100] using map generically queryselectorall this example shows how to iterate through a collection of objects collected by queryselectorall. this is because queryselectorall returns a nodelist (which is a collection of objects). in this case, we return all the selected options' values on the screen: let elems = document.queryselectorall('select option:checked') let values = array.prototype.map.call(elems, function(obj) { return obj.value }) an easier way would be the array.from() method. tricky use case (inspired by this blog post) it is common to use the callback with one argument (the element being traversed). certain functions are also commonly used with one argument, even though they take additional optional arguments. these habits may lead...

ArrayBuffer.isView() - JavaScript
hether the passed value is one of the arraybuffer views, such as typed array objects or a dataview. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax arraybuffer.isview(value) parameters value the value to be checked. return value true if the given argument is one of the arraybuffer views; otherwise, false. examples using isview arraybuffer.isview(); // false arraybuffer.isview([]); // false arraybuffer.isview({}); // false arraybuffer.isview(null); // false arraybuffer.isview(undefined); // false arraybuffer.isview(new arrayb...

Object.isExtensible() - JavaScript
hod determines if an object is extensible (whether it can have new properties added to it). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax object.isextensible(obj) parameters obj the object which should be checked. return value a boolean indicating whether or not the given object is extensible. description objects are extensible by default: they can have new properties added to them, and (in engines that support __proto__) their __proto__ property can be modified. an object can be marked as non-extensible using object.preventextensions(), object.seal(), or object.freeze(). examples using object.isex...

Object.isFrozen() - JavaScript
the object.isfrozen() determines if an object is frozen. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax object.isfrozen(obj) parameters obj the object which should be checked. return value a boolean indicating whether or not the given object is frozen. description an object is frozen if and only if it is not extensible, all its properties are non-configurable, and all its data properties (that is, properties which are not accessor properties with getter or setter components) are non-writable. examples using object.isfrozen // a new object is extensible, so it is not frozen. object.isfrozen({}); //...

Object.prototype.isPrototypeOf() - JavaScript
in another object's prototype chain. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. isprototypeof() differs from the instanceof operator. in the expression "object instanceof afunction", the object prototype chain is checked against afunction.prototype, not against afunction itself. syntax prototypeobj.isprototypeof(object) parameters object the object whose prototype chain will be searched. return value a boolean indicating whether the calling object lies in the prototype chain of the specified object. errors thrown typeerror a typeerror is thrown if prototypeobj is undefined or null. description ...

Object.isSealed() - JavaScript
the object.issealed() method determines if an object is sealed. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax object.issealed(obj) parameters obj the object which should be checked. return value a boolean indicating whether or not the given object is sealed. description returns true if the object is sealed, otherwise false. an object is sealed if it is not extensible and if all its properties are non-configurable and therefore not removable (but not necessarily non-writable). examples using object.issealed // objects aren't sealed by default. var empty = {}; object.issealed(empty); // === false ...

Set - JavaScript
the set object lets you store unique values of any type, whether primitive values or object references. description set objects are collections of values. you can iterate through the elements of a set in insertion order. a value in the set may only occur once; it is unique in the set's collection. value equality because each value in the set has to be unique, the value equality will be checked. in an earlier version of ecmascript specification, this was not based on the same algorithm as the one used in the === operator. specifically, for sets, +0 (which is strictly equal to -0) and -0 were different values. however, this was changed in the ecmascript 2015 specification. see "key equality for -0 and 0" in the browser compatibility table for details. nan and undefined can also be stored in a...

Progressive web app structure - Progressive web apps (PWAs)
allows developers to have direct access to data streaming from the server — if you want to perform an operation on the data (for example, adding a filter to a video), you no longer need to wait for all of it to be downloaded and converted to a blob (or whatever) — you can start right away. it provides fine-grained control — the stream can be started, chained with another stream, cancelled, checked for errors, and more. in theory, streaming is a better model, but it's also more complex, and at the time of writing (march 2018) the streams api is still a work-in-progress and not yet fully available in any of the major browsers. when it is available, it will be the fastest way of serving the content — the benefits are going to be huge in terms of performance. for working examples and more ...

Structural overview of progressive web apps - Progressive web apps (PWAs)
i allows developers to have direct access to data streaming from the server. if you want to perform an operation on the data (for example, adding a filter to a video), you no longer need to wait for all of it to be downloaded and converted to a blob (or whatever). instead, you can start right away. it provides fine-grained control: the stream can be started, chained with another stream, canceled, checked for errors, and more. in theory, streaming is a better model than the app shell model, but it's also more complex, and the streams api isn't yet fully supported by any of the major browsers. once it's available, however, it will be the fastest way to serve your app's content. the performance benefits will be truly spectacular. for working examples and more information, see the streams api docum...

<a> - SVG: Scalable Vector Graphics
rsor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes most notably: xlink:title aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-pla...

<circle> - SVG: Scalable Vector Graphics
lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-pla...

<ellipse> - SVG: Scalable Vector Graphics
lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-pla...

<foreignObject> - SVG: Scalable Vector Graphics
lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-pla...

<g> - SVG: Scalable Vector Graphics
lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-pla...

<line> - SVG: Scalable Vector Graphics
lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-pla...

<marker> - SVG: Scalable Vector Graphics
lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-pla...

<path> - SVG: Scalable Vector Graphics
lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-pla...

<polygon> - SVG: Scalable Vector Graphics
lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-pla...

<polyline> - SVG: Scalable Vector Graphics
lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-pla...

<rect> - SVG: Scalable Vector Graphics
lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-pla...

<svg> - SVG: Scalable Vector Graphics
lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-pla...

<symbol> - SVG: Scalable Vector Graphics
lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-pla...

<text> - SVG: Scalable Vector Graphics
rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-pla...

<textPath> - SVG: Scalable Vector Graphics
lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-pla...

<tspan> - SVG: Scalable Vector Graphics
rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-pla...

<use> - SVG: Scalable Vector Graphics
lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-pla...

mimeTypes.rdf corruption - SVG: Scalable Vector Graphics
al knowledge. it's adapted from jp fiset's comment in bug 303581 which in turn was adapted from jeff schiller's comment in bug 303581. 1. try and open a local .svg file using mozilla and when the "opening ..." dialog comes up, select the "open with" radio button and choose any .exe except firefox.exe/mozilla.exe. 2. make sure the "do this automatically for files like this from now on" checkbox is checked. 3. click ok, and when the program you chose tries to open the file, just close it. 4. in firefox, go to tools > options... > downloads > view & edit actions... to open the download actions window. 5. select the svg entry, click the remove action button and then click close to close the download actions window. 6. try and load a local .svg file and this scripting across embed demo. if the files y...

Same-origin policy - Web security
any.com"; afterward, the page can pass the same-origin check with http://company.com/dir/page.html (assuming http://company.com/dir/page.html sets its document.domain to "company.com" to indicate that it wishes to allow that - see document.domain for more). however, company.com could not set document.domain to othercompany.com, since that is not a superdomain of company.com. the port number is checked separately by the browser. any call to document.domain, including document.domain = document.domain, causes the port number to be overwritten with null. therefore, one cannot make company.com:8080 talk to company.com by only setting document.domain = "company.com" in the first. it has to be set in both so their port numbers are both null. note: when using document.domain to allow a subdomain to...

Understanding WebAssembly text format - WebAssembly
r explicitly during the command call instead of before it, like this: (call_indirect (type $return_i32) (local.get $i)) in a higher level, more expressive language like javascript, you could imagine doing the same thing with an array (or probably more likely, object) containing functions. the pseudo code would look something like tbl[i](). so, back to the typechecking. since webassembly is typechecked, and the funcref can be potentially any function signature, we have to supply the presumed signature of the callee at the callsite, hence we include the $return_i32 type, to tell the program a function returning an i32 is expected. if the callee doesn’t have a matching signature (say an f32 is returned instead), a webassembly.runtimeerror is thrown. so what links the call_indirect to the table...

Using the WebAssembly JavaScript API - WebAssembly
cess’s virtual address space and so, for the safety reasons mentioned above, cannot be stored directly in linear memory. instead, function references are stored in a table and their indexes, which are integers and can be stored in linear memory, are passed around instead. when the time comes to call a function pointer, the webassembly caller supplies the index, which can then be safety bounds checked against the table before indexing and calling the indexed function reference. thus, tables are currently a rather low-level primitive used to compile low-level programming language features safely and portably. tables can be mutated via table.prototype.set(), which updates one of the values in a table, and table.prototype.grow(), which increases the number of values that can be stored in a tabl...