beforeselected - Archive of obsolete content
« xul reference home beforeselected type: boolean this is set to true if the tab is immediately before the currently selected tab. this is set automatically set when needed and you shouldn't adjust it manually. this is primarily useful for themes so that they can adjust the appearance of the area around the selected tab. ...

completeselectedindex - Archive of obsolete content
...

lastSelected - Archive of obsolete content
« xul reference home lastselected type: string set this to the id of the last selected pane. it will be opened by default the next time the preferences dialog is opened. ...

visuallyselected - Archive of obsolete content
« xul reference home visuallyselected type: boolean new in firefox 40. indicates that a tab is selected. the visuallyselected attribute is set asynchronously, once the browser has switched to the selected tab. if your code needs to apply some styling to the currently selected tab, this is the attribute you should use from firefox 40 onwards. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. ...

advanceSelectedTab - Archive of obsolete content
« xul reference home advanceselectedtab( dir, wrap ) return type: no return value if the argument dir is set to 1, the currently selected tab changes to the next tab. if the argument dir is set to -1, the currently selected tab changes to the previous tab. if the wrap argument is true, the adjustment will wrap around when the first or last tab is reached. ...

ensureSelectedElementIsVisible - Archive of obsolete content
« xul reference home ensureselectedelementisvisible() return type: no return value if the currently selected element in the list box is not currently visible to the user, the list box view is scrolled so that it is. if the item is already visible, no scrolling occurs. ...

getSelectedItem - Archive of obsolete content
« xul reference home getselecteditem( index ) return type: element when multiple items are selected, you can retrieve each selected item using this method. the argument index specifies the index in the list of the selected items, not the row number of the item. the item index is zero-based, thus this example will return the first selected item: getselecteditem(0). ...

deck.selectedPanel - Archive of obsolete content
« xul reference do not hide panels; the deck element only understands visible panels. selectedpanel type: element holds a reference to the currently selected panel within a deck element. assigning a value to this property will modify the selected panel. ...

selectedBrowser - Archive of obsolete content
« xul reference selectedbrowser type: browser element this read-only property returns the currently displayed browser element. ...

selectedCount - Archive of obsolete content
« xul reference selectedcount type: integer returns the number of items that are currently selected. ...

selectedItem - Archive of obsolete content
« xul reference selecteditem type: element holds the currently selected item. if no item is currently selected, this value will be null. you can select an item by setting this value. a select event will be sent to the controlling container (i.e. the listbox, richlistbox, radiogroup, etc., not the list item that was selected) when it is changed either via this property, the selectedindex property, or changed by the user. ...

selectedItems - Archive of obsolete content
« xul reference selecteditems type: array of listitems returns an array of the selected items in the list. ...

selectedPanel - Archive of obsolete content
« xul reference selectedpanel type: element holds a reference to the currently selected panel within a <tabbox> element. assigning a value to this property will modify the selected panel. a select event will be sent when the selected panel is changed. ...

selectedTab - Archive of obsolete content
« xul reference selectedtab type: tab element a reference to the currently selected tab, which will always be one of the tab elements in the tabs element. assign a value to this property to modify the currently selected tab. ...

SetSelected
« nsiaccessible page summary this method adds or remove this accessible to the current selection. void setselected( in boolean aisselected ); parameters aisselected[out] the current selection exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree. see also nsiaccessible.takeselection() nsiaccessible.extendselection() ...

VideoTrack.selected - Web APIs
the videotrack property selected controls whether or not a particular video track is active. syntax isvideoselected = videotrack.selected; videotrack.selected = true | false; value the selected property is a boolean whose value is true if the track is active. only a single video track can be active at any given time, so setting this property to true for one track while another track is active will make that other track inactive. specifications specification status comment html living standardthe definition of 'videotrack: selected' in that specification. living standard ...

VideoTrackList.selectedIndex - Web APIs
the read-only videotracklist property selectedindex returns the index of the currently selected track, if any, or -1 otherwise. syntax var index = videotracklist.selectedindex; value a number indicating the index of the currently selected track, if any, or -1 otherwise. specifications specification status comment html living standardthe definition of 'videotracklist: selectedindex' in that specification. living standard ...

Index - Web APIs
fied property of the document interface returns a string containing the date and time on which the current document was last modified. 933 document.laststylesheetset api, cssom, dom, document, property, reference, stylesheets, laststylesheetset the document.laststylesheetset property returns the last enabled style sheet set. this property's value changes whenever the document.selectedstylesheetset property is changed. 934 document.linkcolor api, deprecated, document, html dom, needsspectable, property, reference the document.linkcolor property gets/sets the color of links within the document. 935 document.links api, document, html dom, property, reference the links read-only property of the document interface returns a collection of al...
... the document. the returned object is an htmlcollection. 962 document.scrollingelement api, document, property, reference, scrollingelement the scrollingelement read-only property of the document interface returns a reference to the element that scrolls the document. in standards mode, this is the root element of the document, document.documentelement. 963 document.selectedstylesheetset api, cssom, dom, property, reference, stylesheets the selectedstylesheetset property indicates the name of the style sheet set that's currently in use. 964 document.stylesheetsets api, cssom, dom, property, reference, stylesheets the stylesheetsets read-only property returns a live list of all of the currently-available style sheet sets. 965 ...
...eing presented in full-screen mode in this document, or null if full-screen mode is not currently in use. 1042 documentorshadowroot.getselection() api, documentorshadowroot, doument, method, reference, shadowroot, getselection, getselection(), shadow dom the getselection() property of the documentorshadowroot interface returns a selection object representing the range of text selected by the user, or the current position of the caret. 1043 documentorshadowroot.mselementsfromrect() api, api:microsoft extensions, method, non-standard, reference, mselementsfromrect the mselementsfromrect method returns the node list of elements that are under a rectangle defined by left, top, width, and height. 1044 documentorshadowroot.nodefrompoint() api, doc...
...And 50 more matches

IAccessibleTable2
he iaccessibletablecell interface. if you want to support older applications you should also support the iaccessibletable interface. ...
...ant to support older applications you should also support the iaccessibletable interface. ...
... should also support the iaccessibletable interface. ...
...And 27 more matches

Index - Archive of obsolete content
r selection events in html or plain text. 530 tabs in this class you can find information about the tabs in your firefox window. 531 slidebar slidebar is a reinvention of the old sidebar features of browsers. they allow quick access to a wide range of both temporary and permanent information at the side of your browser window. when a slidebar feature is selected its contents will be revealed from behind the current webpage. 532 slidebar to implement a new slidebar within your jetpack code, use the method jetpack.slidebar.append(options) 533 users no summary! 534 aza no summary! 535 dropbox no summary! 536 docs no summary! 537 meta ...
...o indicate status, for instance whether the user is online or whether there are new messages. 750 a xul bestiary add-ons, extensions, needstechnicalreview, xul this xulnote presents some of the key concepts and terms in the xul development environment. the purpose of this article is not to describe these items in any great detail but to define what they are in simple terms. i selected items for this group because they seemed to be either shrouded in mystery, misused as concepts or terms, or underestimated according to their role in xul and cross-platform development. in contrast to the mozilla jargon file, this article describes items of specific interest to the web or content developer looking to establish a context for understanding mozilla's new technologies -- and in parti...
..., xul reference no summary! 755 acceltext xul attributes, xul reference no summary! 756 accessible xul attributes, xul reference no summary! 757 accesskey reference, xul, xul attributes, xul reference, accesskey no summary! 758 activetitlebarcolor xul attributes, xul reference no summary! 759 afterselected xul attributes, xul reference no summary! 760 align reference, référence(2), xul no summary! 761 allowevents xul attributes, xul reference no summary! 762 allownegativeassertions xul attributes, xul reference no summary! 763 alternatingbackground xul attributes, xul reference no summary! 764 ...
...And 25 more matches

listbox - Archive of obsolete content
a listbox may contain multiple columns. there are numerous methods which allow the items in the listbox to be retrieved and modified. you may specify the number of rows to display in the list using the rows attribute. additional rows can be viewed using a scroll bar. a listbox is expected to contain listitem elements. all the rows in the listbox are the same height, which is the height of the tallest item in the list. ...
...st. if you wish to create a list with variable height rows, or with non-text content, you should instead use the richlistbox element. see list controls for more information. ...
... to create a list with variable height rows, or with non-text content, you should instead use the richlistbox element. see list controls for more information. ...
...And 23 more matches

richlistbox - Archive of obsolete content
simple text content. note: in versions of firefox prior to firefox 3, rich list boxes support only single selection. firefox 3 introduced multiple selection to rich list boxes. ...
...ntent. note: in versions of firefox prior to firefox 3, rich list boxes support only single selection. firefox 3 introduced multiple selection to rich list boxes. ...
...n versions of firefox prior to firefox 3, rich list boxes support only single selection. firefox 3 introduced multiple selection to rich list boxes. ...
...And 22 more matches

Index - Archive of obsolete content
to indicate status, for instance whether the user is online or whether there are new messages. 3 a xul bestiary add-ons, extensions, needstechnicalreview, xul this xulnote presents some of the key concepts and terms in the xul development environment. the purpose of this article is not to describe these items in any great detail but to define what they are in simple terms. i selected items for this group because they seemed to be either shrouded in mystery, misused as concepts or terms, or underestimated according to their role in xul and cross-platform development. in contrast to the mozilla jargon file, this article describes items of specific interest to the web or content developer looking to establish a context for understanding mozilla's new technologies -- and in parti...
...tribute, xul reference no summary! 8 acceltext xul attributes, xul reference no summary! 9 accessible xul attributes, xul reference no summary! 10 accesskey reference, xul, xul attributes, xul reference, accesskey no summary! 11 activetitlebarcolor xul attributes, xul reference no summary! 12 afterselected xul attributes, xul reference no summary! 13 align reference, référence(2), xul no summary! 14 allowevents xul attributes, xul reference no summary! 15 allownegativeassertions xul attributes, xul reference no summary! 16 alternatingbackground xul attributes, xul reference no summary! 17 alwa...
... 31 browserid xul, xul reference no summary! 32 but...
...And 21 more matches

IAccessibleTable
index ); [propget] hresult columndescription([in] long column, [out] bstr description ); [propget] hresult columnextentat([in] long row, [in] long column, [out] long ncolumnsspanned ); [propget] hresult columnheader([out] iaccessibletable accessibletable, [out] long startingrowindex ); [propget] hresult columnindex([in] long cellindex, [out] long columnindex ); [propget] hresult iscolumnselected([in] long column, [out] boolean isselected ); [propget] hresult isrowselected([in] long row, [out] boolean isselected ); [propget] hresult isselected([in] long row, [in] long column, [out] boolean isselected ); [propget] hresult modelchange([out] ia2tablemodelchange modelchange ); [propget] hresult ncolumns([out] long columncount ); [propget] hresult nrows([out] long rowcount ); [prop...
...umn, [out] boolean isselected ); [propget] hresult isrowselected([in] long row, [out] boolean isselected ); [propget] hresult isselected([in] long row, [in] long column, [out] boolean isselected ); [propget] hresult modelchange([out] ia2tablemodelchange modelchange ); [propget] hresult ncolumns([out] long columncount ); [propget] hresult nrows([out] long rowcount ); [propget] hresult nselectedchildren([out] long cellcount ); [propget] hresult nselectedcolumns([out] long columncount ); [propget] hresult nselectedrows([out] long rowcount ); [propget] hresult rowcolumnextentsatindex([in] long index, [out] long row, [out] long column, [out] long rowextents, [out] long columnextents, [out] boolean isselected ); [propget] hresult rowdescription([in] long row, [out] bstr description )...
...et] hresult rowdescription([in] long row, [out] bstr description ); [propget] hresult rowextentat([in] long row, [in] long column, [out] long nrowsspanned ); [propget] hresult rowheader([out] iaccessibletable accessibletable, [out] long startingcolumnindex ); [propget] hresult rowindex([in] long cellindex, [out] long rowindex ); hresult selectcolumn([in] long column ); [propget] hresult selectedchildren([in] long maxchildren, [out, size_is(,maxchildren), length_is(, nchildren)] long children, [out] long nchildren ); [propget] hresult selectedcolumns([in] long maxcolumns, [out, size_is(,maxcolumns), length_is(, ncolumns)] long columns, [out] long ncolumns ); [propget] hresult selectedrows([in] long maxrows, [out, size_is(,maxrows), length_is(, nrows)] long rows, [out] long nrows ); ...
...And 21 more matches

ARIA: listbox role - Accessibility
ntain images. description the listbox role is used to identify an element that creates a list from which a user may select one or more static items, similar to the html <select> element. unlike <select>, a listbox can contain images. each child of a listbox should have a role of option. ...
...tify an element that creates a list from which a user may select one or more static items, similar to the html <select> element. unlike <select>, a listbox can contain images. each child of a listbox should have a role of option. it is highly recommended to use the html select element, or a group of radio buttons if only one item can be selected, or a group of checkboxes if multiple items can be selected, because there is a lot of keyboard interactivity to manage focus for all the descendants, and native html elements provide this functionality for you for free. elements with the role listbox have an implicit aria-orientation value of vertical. when a list is tabbed to, the first item in the list will be selected if nothing else already is. up/down arrows navigate the list, and pressing shift +...
...istbox when it gets focus. if an option or item is focused within the list, it gets announced next, followed by an indication of the item's position with the list if the screen reader supports this. as focus moves within the list, the screen reader announces the relevant items. associated aria roles, states, and properties associated roles option one or more nested options are required. all selected options have aria-selected set to true. all options that are not selected have aria-selected set to false. if an option is not selectable, omit the aria-selected. list a section containing listitem elements states and properties aria-activedescendant holds the id string of the currently active element within the listbox. if that's an option element, then that would be the id of the most...
...And 18 more matches

Manipulating Lists - Archive of obsolete content
rolelement interface so any xul elements which implement this interface have these methods. this includes the menulist, radiogroup and tabs elements. for example, to add a new item to a menulist, you can use the same syntax as for a listbox. the right kind of element will be appended in each situation. ...
...ce so any xul elements which implement this interface have these methods. this includes the menulist, radiogroup and tabs elements. for example, to add a new item to a menulist, you can use the same syntax as for a listbox. the right kind of element will be appended in each situation. list selection the nsidomxulselectcontrolelement interface provides two additonal properties, selectedindex and selecteditem. ...
...ace have these methods. this includes the menulist, radiogroup and tabs elements. for example, to add a new item to a menulist, you can use the same syntax as for a listbox. the right kind of element will be appended in each situation. list selection the nsidomxulselectcontrolelement interface provides two additonal properties, selectedindex and selecteditem. the former returns the index of the selected item while the latter returns the selected element. ...
...And 16 more matches

nsIAccessibleTable
t(in long cellindex); note: renamed from getcolumnatindex in gecko 1.9.2 void getrowandcolumnindicesat(in long cellindex, out long rowindex, out long columnindex); astring getrowdescription(in long rowindex); long getrowextentat(in long row, in long column); long getrowindexat(in long cellindex); note: renamed from getrowatindex in gecko 1.9.2 void getselectedcellindices(out unsigned long cellsarraysize, [retval, array, size_is(cellsarraysize)] out long cellsarray); note: renamed from getselectedcells in gecko 1.9.2 void getselectedcolumnindices(out unsigned long columnsarraysize, [retval, array, size_is(columnsarraysize)] out long columnsarray); note: renamed from getselectedcolumns in gecko 1.9.2 void getselectedrowindices(out unsig...
...; note: renamed from getselectedcells in gecko 1.9.2 void getselectedcolumnindices(out unsigned long columnsarraysize, [retval, array, size_is(columnsarraysize)] out long columnsarray); note: renamed from getselectedcolumns in gecko 1.9.2 void getselectedrowindices(out unsigned long rowsarraysize, [retval, array, size_is(rowsarraysize)] out long rowsarray); note: renamed from getselectedrows in gecko 1.9.2 boolean iscellselected(in long rowindex, in long columnindex); boolean iscolumnselected(in long columnindex); boolean isprobablyforlayout(); boolean isrowselected(in long rowindex); void selectcolumn(in long columnindex); void selectrow(in long rowindex); void unselectcolumn(in long columnindex); void u...
...columncount long the number of columns in the table. read only. note: renamed from columns in gecko 1.9.2 columnheader nsiaccessibletable read only. obsolete since gecko 1.9.2 rowcount long the number of rows in the table. read only. note: renamed from rows in gecko 1.9.2 rowheader nsiaccessibletable read only. ...
...And 14 more matches

How to build custom form controls - Learn web development
clicks on it. once we know how to change states, it is important to define how to change the control's value: the value changes when: the user clicks on an option when the control is in the open state. the user hits the up or down arrow keys when the control is in its active state. the value does not change when: the user hits the up arrow key when the first option is selected. ...
...nt to define how to change the control's value: the value changes when: the user clicks on an option when the control is in the open state. the user hits the up or down arrow keys when the control is in its active state. the value does not change when: the user hits the up arrow key when the first option is selected. the user hits the down arrow key when the last option is selected. ...
...en the control is in the open state. the user hits the up or down arrow keys when the control is in its active state. the value does not change when: the user hits the up arrow key when the first option is selected. the user hits the down arrow key when the last option is selected. finally, let's define how the control's options will behave: when the control is opened, the selected option is highlighted when the mouse is over an option, the option is highlighted and the previously highlighted option is returned to its normal state for the purposes of our example, we'll stop with that; however, if you're a careful reader, you'll notice that some behaviors are missing. for example, what do you think will happen if the user hits the tab key while the control is in its open ...
...And 13 more matches

Tree Selection - Archive of obsolete content
the onselect() event handler may be added to the tree element. ...
...the onselect() event handler may be added to the tree element. ...
...the onselect() event handler may be added to the tree element. ...
...And 10 more matches

Theme changes in Firefox 2 - Archive of obsolete content
preferences/preferences.css the following styles are no longer used in firefox 2 and should be removed from your theme: #browserstartuphomepage #browserstartuphomepage #panedownloads description #panegeneral description radio[pane=panedownloads] radio[pane=panedownloads]:active...
...eme: #browserstartuphomepage #browserstartuphomepage #panedownloads description #panegeneral description radio[pane=panedownloads] radio[pane=panedownloads]:active the following styles need to be added to your theme to make it compatible with firefox 2: #panecontent description #panemain description #panesecurity description radio[pane=paneadvanced]:hover radio[pane=paneadvanced][selected="true"] radio[pane=panecontent]:hover radio[pane=panecontent][selected="true"] radio[pane=panefeeds] radio[pane=panefeeds]:active radio[pane=panefeeds]:hover radio[pane=panefeeds][selected="true"] radio[pane=panegeneral]:hover radio[pane=panegeneral][selected="true"] radio[pane=panemain] radio[pane=panemain]:active radio[pane=panemain]:hover radio[pane=panemain][selected="true"] radi...
... feeds/addfeedreader.css this is a new file in firefox 2. ...
...And 10 more matches

All keyboard shortcuts - Firefox Developer Tools
through tools left to right ctrl + ] cmd + ] ctrl + ] cycle through tools right to left ctrl + [ cmd + [ ctrl + [ toggle between active tool and settings. f1 f1 f1 toggle toolbox between the last 2 docking modes ctrl + shift + d cmd + shift + d ctrl + shift + d toggle split console (except if console is the currently selected tool) esc esc esc these shortcuts work in all tools that are hosted in the toolbox. command windows macos linux increase font size ctrl + + cmd + + ctrl + + decrease font size ctrl + - cmd + - ctrl + - reset font size ctrl + 0 cmd + 0 ctrl + 0 source editor this table lists the default short...
...0 ctrl + 0 source editor this table lists the default shortcuts for the source editor. in the editor preferences section of the developer tools settings, you can choose to use vim, emacs, or sublime text key bindings instead. to select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to that setting. if you do this, the selected bindings will be used for all the developer tools that use the source editor. you need to reopen the editor for the change to take effect. from firefox 33 onwards, the key binding preference is exposed in the editor preferences section of the developer tools settings, and you can set it there instead of about:config. command windows macos linux go to line ctrl + j,...
... command windows macos linux select the element under the mouse and cancel picker mode click click click select the element under the mouse and stay in picker mode shift+click shift+click shift+click html pane these shortcuts work while you're in the inspector's html pane. ...
...And 10 more matches

<input type="file"> - HTML: Hypertext Markup Language
files can be uploaded to a server using form submission, or manipulated using javascript code and the file api. 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. value a domstring representing the path to the selected file. events change and input supported common attributes required additional attributes accept, capture, files, multiple idl attributes files and value dom interface htmlinputelement properties properties that apply only to elements of type file methods select() value a file input's valu...
...mon attributes required additional attributes accept, capture, files, multiple idl attributes files and value dom interface htmlinputelement properties properties that apply only to elements of type file methods select() value a file input's value attribute contains a domstring that represents the path to the selected file(s). if the user selected multiple files, the value represents the first file in the list of files they selected. the other files can be identified using the input's htmlinputelement.files property. note: if multiple files are selected, the string represents the first selected file. javascript can access the other files through the input's files property. if no file is yet selected, the ...
... the user agent is free to decide on its own what to do. if the requested facing mode isn't available, the user agent may fall back to its preferred default mode. note: capture was previously a boolean attribute which, if present, requested that the device's media capture device(s) such as camera or microphone be used instead of requesting a file input. files a filelist object that lists every selected file. this list has no more than one member unless the multiple attribute is specified. multiple when the multiple boolean attribute is specified, the file input allows the user to select more than one file. non-standard attributes in addition to the attributes listed above, the following non-standard attributes are available on some browsers. you should try to avoid using them when possible,...
...And 10 more matches

IME handling guide
t method editor. this is a technical term from windows but these days, this is used on other platforms as well. ime is a helper application of a user's text input. it handles native key events before or after focused application (depending on the platform) and creates a composition string (a.k.a. preedit string), suggests a list of what the user attempts to input, commits composition string as a selected item off the list and commits composition string without any conversion. ime is used by chinese, japanese, korean and taiwan users for inputting chinese characters because the number of them is beyond thousands and cannot be input from the keyboard directly. however, especially on mobile devices nowadays, ime is also used for inputting latin languages like autocomplete. additionally, ime may be u...
...です" (in the following screenshot each clause is underlined and not connected adjacently. these clauses are called "converted clause"). if one or more clauses were not converted as expected, the user can choose one of the clauses with arrow keys and look for the expected result form the list in the drop down menu (in the following screenshot, the clause with the thicker underline is called "selected clause"). basically, composition string and each clause style is rendered by gecko. and the drop down menu is created by ime. each clause is represented with selection in the editor. from chrome script, you can check it with nsiselectioncontroller. in native code, you can access it with either nsiselectioncontroller or mozilla::selectiontype (the latter is recommended because of type safer). ...
...event as mozilla::textrangearray. following table explains the mapping between them. ...
...And 9 more matches

Using files from web applications - Web APIs
sk the user to select local files and then read the contents of those files. this selection can be done by either using an html <input type="file"> element or by drag and drop. if you want to use the dom file api from extensions or other browser chrome code, you can; however, note there are some additional features to be aware of. see using the dom file api in chrome code for details. ...
...f you want to use the dom file api from extensions or other browser chrome code, you can; however, note there are some additional features to be aware of. see using the dom file api in chrome code for details. accessing selected file(s) consider this html: <input type="file" id="input" multiple> the file api makes it possible to access a filelist containing file objects representing the files selected by the user. the multiple attribute on the input element allows the user to select multiple files. accessing the first selected file using a classical dom selector: const selectedfile = document.getelementbyid('input').files[0]; accessing selected file(s) on a change event it is also possible (but not mandatory) to access the filelist through the change event. you need to use eventtarget.add...
...not mandatory) to access the filelist through the change event. ...
...And 9 more matches

ARIA: tab role - Accessibility
the aria tab role indicates an interactive element inside a tablist that, when activated, displays its associated tabpanel. <button role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id">tab label</button> description an element with the tab role controls the visibility of an associated element with the tabpanel role. the common user experience pattern is a group of visual tabs above, or to the side of, a content area, and selecting a different tab changes the content and makes the selected tab more prominent than the other tabs. elements with the role tab must either be a child of an element with the tablist role, or have their id part of the aria-owns property of a tablist. this combination identifies to assistive technology that the element is part of a group of related el...
...ide a tablist, and inform users of which tab they currently have targeted. they should contain the aria-controls property identifying an element with the tabpanel role. when an element with the tabpanel role has focus, or a child of it has focus, that indicates that the connected element with the tab role is the active tab in a tablist. ...
...y currently have targeted. they should contain the aria-controls property identifying an element with the tabpanel role. when an element with the tabpanel role has focus, or a child of it has focus, that indicates that the connected element with the tab role is the active tab in a tablist. ...
...And 9 more matches

XBL Example - Archive of obsolete content
nt of the pages will be specified in the xul file, not in xbl, but we'll need to add it inside the deck. the children tag will need to be used. along the bottom, we'll need a button to go the previous page, a label to display the current page number, and a button to go to the next page. example 1 : source <binding id="slideshow"> <content> <xul:vbox flex="1"> <xul:deck xbl:inherits="selectedindex" selectedindex="0" flex="1"> <children/> </xul:deck> <xul:hbox> <xul:button xbl:inherits="label=previoustext"/> <xul:label flex="1"/> <xul:button xbl:inherits="label=nexttext"/> </xul:hbox> </xul:vbox> </content> </binding> this binding creates the slideshow structure that we want. the flex attribute has been added to a number of elem...
...he flex attribute has been added to a number of elements so that it stretches in the right way. the label attributes on the two buttons inherit their values from the bound element. here, they inherit from two custom attributes, previoustext and nexttext. this makes it easy to change the labels on the buttons. the children of the element that the xbl is bound to will be placed inside the deck. the selectedindex is inherited by the deck, so we may set the initial page in the xul. the following xul file produces the result in the image. <box class="slideshow" previoustext="previous" nexttext="next" flex="1"> <button label="button 1"/> <checkbox label="checkbox 2"/> <textbox/> </box> the style sheet used here is: .slideshow { -moz-binding: url("slideshow.xml#slideshow"); } the first b...
...ng: url("slideshow.xml#slideshow"); } the first button, button 1 has been used as the first page of the deck. the label widget has not appeared as no value has been specified for it. we could set a value, but instead it will calculated later. page property next, a property that holds the current page will be added. when getting this custom property, it will need to retrieve the value of the selectedindex attribute of the deck, which holds the number of the currently displayed page. similarly, when setting this property, it will need to change the selectedindex attribute of the deck. in addition, the text widget will need to be updated to display which page is the current one. <property name="page" onget="return parseint(document.getanonymousnodes(this)[0].childnodes[0].getattribute('sel...
...And 8 more matches

tree - Archive of obsolete content
ill not be able to use the dom functions to retrieve the tree rows. hidecolumnpicker type: boolean when set to false, a drop-down will appear in the upper right corner of the tree, which the user may use to show and hide columns. when set to true, the column picker will be hidden. the default value is false. onselect type: script code this event is sent to a tree when a row is selected, or whenever the selection changes. the user can select multiple rows by holding down shift or control and clicking on a row. the onselect event will be sent for each item added to or removed from the selection. rows type: integer the number of rows to display in the element. if the element contains more than this number of rows, a scrollbar will appear which the user c...
...r the number of rows to display in the element. if the element contains more than this number of rows, a scrollbar will appear which the user can use to scroll to the other rows. to get the actual number of rows in the element, use the getrowcount method. seltype type: one of the values below used to indicate whether multiple selection is allowed. single only one row may be selected at a time. (default in listbox and richlistbox.) multiple multiple rows may be selected at once. (default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column. for richlistbox, this is new in firefox 3.5. statedat...
...not be the first column displayed in the tree. inputfield type: textbox element read-only property that holds the textbox that is used for editing. seltype type: string gets and sets the value of the seltype attribute. selstyle type: string if set to the value primary, only the label of the primary column will be highlighted when an item in the tree is selected. otherwise, the entire row will be highlighted. to see the difference, compare the selection style in the folder list and the message list in mozilla mail. tabindex type: integer gets and sets the value of the tabindex attribute. treeboxobject type: nsitreeboxobject the box object is responsible for rendering the tree on the window. this object implements the nsitreeb...
...And 8 more matches

DevTools API - Firefox Developer Tools
object. a definition is a js light object that exposes different information about the tool (like its name and its icon), and a build method that will be used later-on to start an instance of this tool. the gdevtools global object provides methods to register a tool definition and to access tool instances. an instance of a tool is called a toolpanel. the toolpanel is built only when the tool is selected (not when the toolbox is opened). there is no way to "close/destroy" a toolpanel. the only way to close a toolpanel is to close its containing toolbox. all these objects implement the eventemitter interface. api gdevtools the gdevtools api can be used to register new tools, themes and handle toolboxes for different tabs and windows. to use the gdevtools api from an add-on, it can be imported w...
...ting a new one or activating an existing one. parameters: target {target} - the target the toolbox will debug. toolid {string} - the tool that should be activated. if unspecified the previously active tool is shown. hosttype {string} - the position the toolbox will be placed. one of bottom, side, window, custom. see hosttype for details. hostoptions {object} - an options object passed to the selected host. see hosttype for details. return value: a promise that is fulfilled with the toolbox instance once it has been initialized and the selected tool is loaded. gettoolbox(target) fetch the toolbox object for the given target. parameters: target {target} - the target the toolbox is debugging. return value: toolbox object or undefined if there's no toolbox for the given target.. ...
...ut does not activate it. parameters: toolid {string} - the tool identifier. return value: a promise that is fulfilled with the toolpanel object of the loaded panel once the tool has loaded. selecttool(toolid) selects the tool with the given toolid. parameters: toolid {string} - the tool identifier. return value: a promise that is fulfilled with the toolpanel object of the selected panel once the tool has loaded and activated. selectnexttool() selects the next tool in the toolbox. return value: a promise that is fulfilled with the toolpanel object of the selected panel. selectprevioustool() selects the previous tool in the toolbox. return value: a promise that is fulfilled with the toolpanel object of the selected panel. highlighttool(toolid) highl...
...And 8 more matches

<input type="radio"> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the 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. ...
... because they look and operate in a similar manner to the push buttons on old-fashioned radios, such as the one shown below. note: checkboxes are similar to radio buttons, but with an important distinction: radio buttons are designed for selecting one value out of a set, whereas checkboxes let you turn individual values on and off. where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected. value a domstring representing the value of the radio button. events change and input supported common attributes checked and value idl attributes checked and value methods select() value the value attribute is a domstring containing the radio button's va...
...And 8 more matches

Tabbed browser - Archive of obsolete content
// wrong way (the page hasn't finished loading yet) var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); alert(newtabbrowser.contentdocument.body.innerhtml)...
...enumerator.getnext(); var tabbrowser = browserwin.gbrowser; // check each tab of this browser instance var numtabs = tabbrowser.browsers.length; for (var index = 0; index < numtabs; index++) { var currentbrowser = tabbrowser.getbrowseratindex(index); if (url == currentbrowser.currenturi.spec) { // the url is already opened. select this tab. tabbrowser.selectedtab = tabbrowser.tabcontainer.childnodes[index]; // focus *this* browser-window browserwin.focus(); found = true; break; } } } // our url isn't open. open it now. if (!found) { var recentwindow = wm.getmostrecentwindow("navigator:browser"); if (recentwindow) { // use an existing browser window recentwindow.delayedopentab(url, n...
... 0, tabbrowser = wm.getenumerator('navigator:browser').getnext().gbrowser; index < tabbrowser.tabcontainer.childnodes.length && !found; index++) { // get the next tab var currenttab = tabbrowser.tabcontainer.childnodes[index]; // does this tab contain our custom attribute? if (currenttab.hasattribute(attrname)) { // yes--select and focus it. tabbrowser.selectedtab = currenttab; // focus *this* browser window in case another one is currently focused tabbrowser.ownerdocument.defaultview.focus(); found = true; } } if (!found) { // our tab isn't open. open it now. var browserenumerator = wm.getenumerator("navigator:browser"); var tabbrowser = browserenumerator.getnext().gbrowser; // create tab var newtab = ta...
...And 7 more matches

UI pseudo-classes - Learn web development
in this article, we will explore in detail the different ui pseudo-classes available to us in modern browsers for styling forms in different states. ...
...:disabled, and :read-only and :read-write: target enabled or disabled form controls (e.g. with the disabled html attribute set), and read-write or read-only form controls (e.g. with the readonly html attribute set). :checked, :indeterminate, and :default: respectively target checkboxes and radio buttons that are checked, in an indeterminate state (neither checked or not checked), and the default selected option when the page loads (e.g. an <input type="checkbox"> with the checked attribute set, or an <option> element with the selected attribute set). there are many others too, but the ones listed above are the most obviously useful. some of the others are aimed at solving very specific niche problems, or simply not very well supported in browsers yet. the ones listed above all have pretty good ...
...o using generated content. note: you'll probably not find yourself using the :optional pseudo-class very often. form controls are optional by default, so you could just do your optional styling by default, and add styles on top for required controls. note: if one radio button in a same-named group of radio buttons has the required attribute, all the radio buttons will be invalid until one is selected, but only the one with the attribute assigned will actually match :required. using generated content with pseudo-classes in previous articles, we've seen the usage of generated content, but we thought now would be a good time to talk about it in a bit more detail. the idea is that we can use the ::before and ::after pseudo-elements along with the content property to make a chunk of content ap...
...And 7 more matches

Extensions support in SeaMonkey 2 - Archive of obsolete content
these are so commonly available...
...these are so commonly available that developer...
...these are so commonly available that developers often forget th...
...And 6 more matches

menulist - Archive of obsolete content
to create the drop-down, put a menupopup inside the menulist containing the choices as menuitem elements. the command event may be used to execute code when the menulist selection changes. more information is available in the xul tutorial. ...
...selection changes. more information is available in the xul tutorial. ...
...es. more information is available in the xul tutorial. ...
...And 6 more matches

tabs - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a row of tabs. a tabs element should be placed inside a tabbox and should contain tab elements. nb: you can add some other elements to tabs such as button, but they will receive an index. activating them will not change the selectedindex. more information is available in the xul tutorial. ...
... related ] a row of tabs. a tabs element should be placed inside a tabbox and should contain tab elements. nb: you can add some other elements to tabs such as button, but they will receive an index. activating them will not change the selectedindex. more information is available in the xul tutorial. ...
... nb: you can add some other elements to tabs such as button, but they will receive an index. activating them will not change the selectedindex. more information is available in the xul tutorial. attributes closebutton, disableclose, disabled, onclosetab, onnewtab, onselect, setfocus, selectedindex, tabbox, tabindex, tooltiptextnew, value, properties accessibletype, disabled, itemcount, selectedindex, selecteditem, tabindex, value, methods advanceselectedtab, appenditem, getindexofitem, getitematindex, insertitemat, removeitemat examples (example needed) attributes closebutton obsolete since gecko 1.9.2 type: boolean if this attribute is set to true, the tabs row will have a "new tab" button and "close" button on the ends. this feature is used by the ta...
...And 6 more matches

source-editor.jsm
operations number getcharcount(); string getindentationstring(); string getlinedelimiter(); number getlinecount(); number getlineend(number alineindex, boolean aincludedelimiter); number getlinestart(number alineindex); string getmode(); string gettext([optional] number astart, [optional] number aend); string getselectedtext(); void setmode(string amode); void settext(string atext, [optional] number astart, [optional] number aend); selection operations void dropselection(); number getcaretoffset(); object getcaretposition(); object getselection(); void setcaretoffset(number aoffset); void setcaretposition(number aline, [optional] numb...
...s that can be undone. boolean canundo(); parameters none. return value true if there are changes that can be undone, otherwise false. destroy() destroys the editor, releasing resource it's allocated and removing event handlers it's installed. you should call this method when you're done using the editor object. void destroy(); parameters none. dropselection() deselects the currently selected text. void dropselection(); parameters none. endcompoundchange() ends a compound change that was previously started by calling startcompoundchange(). all changes made to the text between the two calls is considered to be a single edit for the purposes of undo operations. void endcompoundchange(); parameters none. find() finds a string in the editor's text. number find( [optional] s...
...undchange(). all changes made to the text between the two calls is considered to be a single edit for the purposes of undo operations. void endcompoundchange(); parameters none. find() finds a string in the editor's text. number find( [optional] string astring [optional] object aoptions ); parameters astring optional the string for which to search. if not specified, the currently selected text in the editor is used as the search string. aoptions optional an optional object containing properties customizing the search operation. see find options for details. return value returns an integer indicating the offset into the text at which the first character of the found string is located, or -1 if the string wasn't found. find options the aoptions object can customize the search...
...And 6 more matches

sslerr.html
nnect: ssl is disabled." the local socket is configured in such a way that it cannot use any of the ssl cipher suites. possible causes include: (a) both ssl2 and ssl3 are disabled, (b) all the individual ssl cipher suites are disabled, or (c) the socket is configured to handshake as a server, but the certificate associated with that socket is inappropriate for the key exchange algorithm selected. ssl_error_fortezza_pqg -12267 "cannot connect: ssl peer is in another fortezza domain." the local system and the remote system are in different fortezza domains. they must be in the same domain to communicate. ssl_error_unknown_cipher_suite -12266 "an unknown ssl cipher suite has been requested." the application has attempted to configure...
...tes are present and enabled in this program." possible causes: (a) all cipher suites have been configured to be disabled, (b) the only cipher suites that are configured to be enabled are those that are disallowed by cipher export policy, (c) the socket is configured to handshake as a server, but the certificate associated with that socket is inappropriate for the key exchange algorithm selected. ssl_error_bad_block_padding -12264 "ssl received a record with bad block padding." ssl was using a block cipher, and the last block in an ssl record had incorrect padding information in it. this usually indicates that the client and server have failed to come to agreement on the set of keys used to encrypt the application data and to check message integrity. if this ...
...4 "no pkcs#11 token could be found to do a required operation." a cryptographic operation required a pkcs#11 token with specific abilities, and no token could be found in any slot, including the "soft token" in the internal virtual slot, that could do the job. may indicate a server configuration error, such as having a certificate that is inappropriate for the key exchange algorithm selected. ssl_error_no_compression_overlap -12203 "cannot communicate securely with peer: no common compression algorithm(s)." ssl_error_handshake_not_completed -12202 "cannot initiate another ssl handshake until current handshake is complete." ssl_error_bad_handshake_hash_value -12201 "received incorrect handshakes hash values from peer." ssl_erro...
...And 6 more matches

Examine and edit CSS - Firefox Developer Tools
you can: toggle pseudo-classes; toggle classes; add a new rule; change the display based on the color scheme preference (as of firefox 72, you must set devtools.inspector.color-scheme-simulation.enabled to true in the configuration editor to enable this feature); change the display based on print media rules. ...
...styles are displayed against a different background, and the link to the filename and line number contains the prefix (user agent): element {} rule the element {} rule at the top of the rules list isn't actually a css rule. it represents the css properties assigned to the element via its style attribute. this also gets the target icon: , giving you a convenient way to highlight the currently selected element in the page. filtering rules there's a box at the top of the rules view labeled "filter styles": as you type: any rules which don't contain the typed string at all are hidden any declarations which contain the typed string are highlighted click the "x" at the end of the search box to remove the filter. while in the rules view, you can press ctrl / cmd + f to focus the search ...
... as well as just color.: if you enclose the search query in backticks, like this: `color`, the search is restricted to exact matches: expanding shorthand properties shorthand properties can be expanded to display their related longhand properties by clicking the arrow besides them. ...
...And 6 more matches

Page inspector keyboard shortcuts - Firefox Developer Tools
command windows macos linux select the element under the mouse and cancel picker mode click click click select the element under the mouse and stay in picker mode shift+click shift+click shift+click html pane these shortcuts work while you're in the inspector's html pane. ...
... ctrl + shift + z / ctrl + y cmd + shift + z / cmd + y ctrl + shift + z / ctrl + y move to next node (expanded nodes only) down arrow down arrow down arrow move to previous node up arrow up arrow up arrow move to first node in the tree. home home home move to last node in the tree. end end end expand currently selected node right arrow right arrow right arrow collapse currently selected node left arrow left arrow left arrow (when a node is selected) move inside the node so you can start stepping through attributes. enter return enter step forward through the attributes of a node tab tab tab step backward through the attributes of a node ...
...ently selected node left arrow left arrow left arrow (when a node is selected) move inside the node so you can start stepping through attributes. ...
...And 6 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
xul uses css to specify the appearance of its elements. again, since xul is a type of xml, stylesheets are read in using the xml-stylesheet processing instruction. on line 2 of listing 2, we’re reading in the theme’s standard style sheet. by referring to a special style sheet within chrome://global/skin/, we can make label and button sizes, window background color, etc, match the currently selected theme in firefox. we can also read in a stylesheet that we had set up ourselves. the xul box model in principle, xul lays out all ui components using combinations of two kinds of boxes: horizontal and vertical. as shown in listing 3, elements can be laid out horizontally using the hbox (horizontal box) element or vertically using the vbox (vertical box) element. when this file is opened in fire...
...g menupopup and menu elements. you can even display icons in menus by adding class="menuitem-iconic" to a menuitem element, along with a src attribute that gives an image uri. figure 7 shows an example of how this is displayed. figure 7: menu items with icons executing commands when selecting menu items much like dynamic html, event handlers are used to execute a command when a menu item is selected. to respond to mouse and keyboard inputs in html, the onclick event handler is typically used to respond to mouse clicks, and the onkeypress event handler for keyboard input. xul can also use these event handlers, but xul also offers the oncommand special event handler to deal with actions that often have specific meanings, such as selection by a left-click (or right-click on systems set up as l...
....parentnode.removechild(item); } item.addeventlistener('command', handlecommandevent, false); listing 11: additions and deletions using a dynamic event listener special menu items much like input 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 ...
...And 5 more matches

radiogroup - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a group of radio buttons. only one radio button inside the group can be selected at a time. the radio buttons may either direct children of the radiogroup or descendants. place the radiogroup inside a groupbox if you would like a border or caption for the group. the radiogroup defaults to vertical orientation. more information is available in the xul tutorial. ...
...the radio buttons may either direct children of the radiogroup or descendants. place the radiogroup inside a groupbox if you would like a border or caption for the group. the radiogroup defaults to vertical orientation. more information is available in the xul tutorial. ...
...ns may either direct children of the radiogroup or descendants. place the radiogroup inside a groupbox if you would like a border or caption for the group. the radiogroup defaults to vertical orientation. more information is available in the xul tutorial. attributes disabled, focused, preference, tabindex, value properties accessibletype, disabled, focuseditem, itemcount, selectedindex, selecteditem, tabindex, value methods appenditem, checkadjacentelement, getindexofitem, getitematindex, insertitemat, removeitemat examples <radiogroup> <radio id="orange" label="red"/> <radio id="violet" label="green" selected="true"/> <radio id="yellow" label="blue"/> </radiogroup> attributes disabled type: boolean indicates whether the element is disabled or not. if this attr...
...And 5 more matches

tab - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single tab which should be placed inside a tabs element. the user may click a tab to bring the associated page of the tabbox to the front. more information is available in the xul tutorial. attributes accesskey, afterselected, beforeselected, command, crop, disabled, first-tab, image, label, last-tab, linkedpanel, oncommand, pending, pinned, selected, tabindex, unread, validate, value properties accesskey, accessibletype, command, control, crop, disabled, image, label, linkedpanel, selected, tabindex, value examples (example needed) 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 t...
... validate, value properties accesskey, accessibletype, command, control, crop, disabled, image, label, linkedpanel, selected, tabindex, value examples (example needed) 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. afterselected type: boolean this is set to true if the tab is immediately after the currently selected tab. this is automatically set when needed and you shouldn't adjust it manually. ...
...ortcut key. this should be one of the characters that appears in the label attribute for the element. afterselected type: boolean this is set to true if the tab is immediately after the currently selected tab. this is automatically set when needed and you shouldn't adjust it manually. this is primarily useful for themes so that they can adjust the appearance of the area around the selected tab. beforeselected type: boolean this is set to true if the tab is immediately before the currently selected tab. this is set automatically set when needed and you shouldn't adjust it manually. this is primarily useful for themes so that they can adjust the appearance of the area around the selected tab. crop type: one of the values below if the label of the el...
...And 5 more matches

ARIA Test Cases - Accessibility
zoom (leopard) pass n/a pass pass zoomtext pass - fail fail orca - n/a - - combobox testcases: editable combo 2 dojo nightly build (combobox) dojo nightly build (combobox with auto complete) expected at behavior: on focus, screen reader announces the label, the role and the current content of the combobox. if the currently selected option is changed the new option should be spoken whether the list is open or closed. when the combo box is opened or closed, the new open/closed state should be spoken. markup used: notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 fail. label and current content as well as role are spoken, also when typing in a new ...
... - - - - drag and drop tic tac toe slide show expected at behavior: (mz) once focusing or arrowing onto the draggable item, screen reader should indicate that item can be an object that can be dragged. once marked for drag and drop, screen reader should announce that this item has been picked up, to distinguish it from others that may be draggable, but are currently not selected for the operation. (al) i'm not sure if there is a way for the screen reader to know when something has been marked for drag & drop. target nodes where the item can be dropped should be indicated from now on when they receive focus or arrowing onto them with the virtual cursor. after drag and drop operation has completed, the new location of the item should be indicated in the virtual buffer re...
... virtual cursor - jaws treats a grid as if it were an html table. all table keys are active. header behavior is not yet defined. pc cursor - tbd. window-eyes window-eyes should allow the user to change row/col header reading modes with ctrl+shift+h, whether the user is in browse or forms mode. ...
...And 5 more matches

<select>: The HTML Select element - HTML: Hypertext Markup Language
iven an id attribute to enable it to be associated with a <label> for accessibility purposes, as well as a name attribute to represent the name of the associated data point submitted to the server. each menu option is defined by an <option> element nested inside the <select>. each <option> element should have a value attribute containing the data value to submit to the server when that option is selected. ...
... represent the name of the associated data point submitted to the server. each menu option is defined by an <option> element nested inside the <select>. each <option> element should have a value attribute containing the data value to submit to the server when that option is selected. if no value attribute is included, the value defaults to the text contained inside the element. you can include a selected attribute on an <option> element to make it selected by default when the page first loads. the <select> element has some unique attributes you can use to control it, such as multiple to specify whether multiple options can be selected, and size to specify how many options should be shown at once. it also accepts most of the general form input attributes such as required, disabled, autofocus, etc...
...s attribute must be the id of a <form> in the same document. (if this attribute is not set, the <select> is associated with its ancestor <form> element, if any.) this attribute lets you associate <select> elements to <form>s anywhere in the document, not just inside a <form>. it can also override an ancestor <form> element. multiple this boolean attribute indicates that multiple options can be selected in the list. if it is not specified, then only one option can be selected at a time. when multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown. name this attribute is used to specify the name of the control. required a boolean attribute indicating that an option with a non-empty string value must be selected. size if the control is presente...
...And 5 more matches

textbox (Toolkit autocomplete) - Archive of obsolete content
containing a list of possible completions for what the user has started to type. toolkit applications (such as firefox) use a different autocomplete mechanism than the mozilla suite. the example below will create an autocomplete textbox that will search the user's history. ...
...ap directory is searched. autocompletesearchparam new in thunderbird 2 requires seamonkey 1.1 type: string a string which is passed to the search component. completedefaultindex new in thunderbird 3 requires seamonkey 2.0 type: boolean if true, the best match value will be filled into the textbox as the user types. if set to false or omitted, the value must be selected from the list. completeselectedindex type: boolean if true, the text in the text field will be autocompleted as the user selects from the popup list. crop type: boolean this attribute is not used and is only provided for compatibility with the menulist element. disableautocomplete new in thunderbird 3requires seamonkey 2.0 type: boolean if true, the a...
...true if the last search resulted in no matches. overview an onchange attribute is an event listener to the object for the event change. a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files...
...And 4 more matches

Open and Save Dialogs - Archive of obsolete content
be different for each type and will vary on each platform. once the user selects a file or folder, it can be read from or written to. the file picker interface nsifilepicker is responsible for displaying a dialog in one of the three modes. you can set a number a features of the dialog by using the interface. when the dialog is closed, you can use the interface functions to get the file that was selected. creating a file picker to begin, you need to create a file picker component and initialize it. var nsifilepicker = components.interfaces.nsifilepicker; var fp = components.classes["@mozilla.org/filepicker;1"].createinstance(nsifilepicker); fp.init(window, "select a file", nsifilepicker.modeopen); first, a new file picker object is created and stored in the variable 'fp'. the 'init' function...
...n the dialog is opened. the second is a filter that indicates the list of file types that are displayed in the dialog. this would be used, for example, to hide all but .html files. you can set the default directory by setting the displaydirectory property of the file picker object to a directory. the directory should be an nsilocalfile object. if you do not set this, a suitable default will be selected for you. to add filters, call the appendfilters() function to set the file types that you wish to have displayed. fp.appendfilters(nsifilepicker.filterhtml | nsifilepicker.filterimages); fp.appendfilters(nsifilepicker.filtertext | nsifilepicker.filterall); the first example will add filters for html and for image files. the user will only be able to select those types of files. the manner in...
...,"*.wav; *.mp3"); this line will add a filter for wave and mp3 audio files. the first argument is the title of the file type and the second is a semicolon-seperated list of file masks. you can add more masks or fewer masks as needed. you can call appendfilter as many times as necessary to add additional filters. the order you add them determines their priority. ...
...And 4 more matches

Introduction to events - Learn web development
ltiple handlers for the same listener. the following two handlers wouldn't both be applied: myelement.onclick = functiona; myelement.onclick = functionb; the second line overwrites the value of onclick set by the first line. this would work, however: myelement.addeventlistener('click', functiona); myelement.addeventlistener('click', functionb); both functions would now run when the element is selected. in addition, there are other powerful features and options available with this event mechanism. these are a little out of scope for this article, but if you want to read them, visit the addeventlistener() and removeeventlistener() reference pages. what mechanism should i use? of the three mechanisms, you shouldn't use the html event handler attributes — these are outdated, and bad practice,...
...evt/event are most commonly used by developers because they are short and easy to remember. it's always good to be consistent — with yourself, and with others if possible. e.target is incredibly useful when you want to set the same event handler on multiple elements and do something to all of them when an event occurs on them. you might, for example, have a set of 16 tiles that disappear when selected. it is useful to always be able to just set the thing to disappear as e.target, rather than having to select it in some more difficult way. in the following example (see useful-eventtarget.html for the full source code; also see it running live here), we create 16 <div> elements using javascript. we then select all of them using document.queryselectorall(), then loop through each one, adding an o...
...than having to select it in some more difficult way. in the following example (see useful-eventtarget.html for the full source code; also see it running live here), we create 16 <div> elements using javascript. ...
...And 4 more matches

Accessible Toolkit Checklist
ue" of the iaccessible, for example a number in a slider, 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. ...
... in autocomplete text fields, make sure that the left or right arrow closes the popup and starts moving through the text letter by letter msaa support, including accessible value that holds text, protected for password fields and readonly for read-only fields checkboxes space bar to toggle msaa support, including checkbox state and statechange event ...
... msaa support, including checkbox state and statechange event...
...And 4 more matches

Midas
command. supported commands command value description backcolor a color code. this command will set the background color of the document. bold if there is no selection, the insertion point will set bold for subsequently typed characters. if there is a selection and all of the characters are already bold, the bold will be removed. otherwise, all selected characters will become bold. contentreadonly this command will make the editor readonly(true)or editable(false). anticipated usage is for temporarily disabling input while something else is occurring elsewhere in the web page. copy if there is a selection, this command will copy the selection to the clipboard. if there isn't a selection, nothing will happen. ...
...sing signed js. see: more about security preferences note: the shortcut key will automatically trigger this command (typically accel-x) with or without the signed js or any code on the page to handle it. decreasefontsize this command will add a <small> tag around selection or at insertion point. delete this command will delete all text and objects that are selected. if no text is selected it deletes one character to the right. this is similar to the delete button on the keyboard. fontname a font name this command will set the font face for a selection or at the insertion point if there is no selection. the given string is such as would be used in the "face" attribute of the font tag, i.e., a comma-separated list of font names. ...
...on. the given number is such as would be used in the "size" attribute of the font tag. forecolor a color code this command will set the text color of the selection or at the insertion point. formatblock h1, h2, h3, h4, h5, h6, p, div, address, blockquote (more?) the selection surrounded by the given block element. heading h1, h2, h3, h4, h5, h6 selected block will be formatted as the given type of heading. hilitecolor a color code this command will set the hilite color of the selection or at the insertion point. it only works with stylewithcss enabled. increasefontsize this command will add a <big> tag around selection or at insertion point. indent indent the block where the caret is located. if the...
...And 4 more matches

nsIHTMLEditor
ring avalue, out boolean afirst, out boolean aany, out boolean aall); nsisupportsarray getlinkedobjects(); void getlistitemstate(out boolean amixed, out boolean ali, out boolean adt, out boolean add); void getliststate(out boolean amixed, out boolean aol, out boolean aul, out boolean adl); astring getparagraphstate(out boolean amixed); nsidomelement getselectedelement(in astring atagname); nsidomelement getselectioncontainer(); void ignorespuriousdragevent(in boolean aignorespuriousdragevent); void increasefontsize(); void indent(in astring aindent); void insertelementatselection(in nsidomelement aelement, in boolean adeleteselection); void insertfromdrop(in nsidomevent aevent); void inserth...
...ters none. return value anodelist the linked nodes found. getlistitemstate() getlistitemstate returns what list item type is in the selection. void getlistitemstate( out boolean amixed, out boolean ali, out boolean adt, out boolean add ); parameters amixed true if there is more than one type of list item, or if there is some list and non-list. ali true if "li" list items are selected. adt true if "dt" list items are selected. add true if "dd" list items are selected. getliststate() returns what list type is in the selection. void getliststate( out boolean amixed, out boolean aol, out boolean aul, out boolean adl ); parameters amixed true if there is more than one type of list, or if there is some list and non-list. aol the company that employs me. no, ...
...lected. add true if "dd" list items are selected. getliststate() returns what list type is in the selection. void getliststate( out boolean amixed, out boolean aol, out boolean aul, out boolean adl ); parameters amixed true if there is more than one type of list, or if there is some list and non-list. aol the company that employs me. no, really, it is true if an "ol" list is selected. aul true if an "ul" list is selected. adl true if a "dl" list is selected. getparagraphstate() returns what block tag paragraph format is in the selection. astring getparagraphstate( out boolean amixed ); parameters amixed true if there is more than one format. return value name of block tag. "" is returned for none. ...
...And 4 more matches

Index - Firefox Developer Tools
wn javascript code rather than just web pages like the normal toolbox. the browser toolbox's context is the whole browser rather than just single page on a single tab. 16 dom property viewer dom, tools, web development the dom property viewer lets you inspect the properties of the dom as an expandable tree structure, starting from the window object of the current page or the selected iframe. 17 debugger-api debugger, intermediate, intro, javascript, tools mozilla’s javascript engine, spidermonkey, provides a debugging interface named debugger which lets javascript code observe and manipulate the execution of other javascript code. both firefox’s built-in developer tools and the firebug add-on use debugger to implement their javascript debuggers. howev...
...in the dark theme and light theme for developer tools. 31 eyedropper firefox, tools, web development:tools the eyedropper tool enables you to select colors in the current page. it works like a magnifying glass over the page, enabling you to select with pixel precision. underneath the magnifying glass it shows the color value for the current pixel using whichever scheme you've selected in settings > inspector > default color unit: 34 index tools found 158 pages: 35 json viewer firefox includes a json viewer. if you open a json file in the browser, or view a remote url with the content-type set to application/json, it is parsed and given syntax highlighting. arrays and objects are shown collapsed, and you can expand them using the "+" i...
...alue, you'll see a sample of the color next to the value: 66 open the inspector guide, inspector, tools there are two main ways to open the inspector: 67 reposition elements in the page starting in firefox 48 you can move absolutely positioned elements by dragging them around the page. ...
...And 4 more matches

HTMLSelectElement - Web APIs
the element is not associated with of a <form> element, then it returns null. htmlselectelement.labelsread only a nodelist of <label> elements associated with the element. htmlselectelement.length an unsigned long the number of <option> elements in this select element. htmlselectelement.multiple a boolean reflecting the multiple html attribute, which indicates whether multiple items can be selected. htmlselectelement.name a domstring reflecting the name html attribute, containing the name of this control used by servers and dom search functions. htmlselectelement.optionsread only an htmloptionscollection representing the set of <option> (htmloptionelement) elements contained by this element. htmlselectelement.required a boolean reflecting the required html attribute, which indicates ...
...of this control used by servers and dom search functions. htmlselectelement.optionsread only an htmloptionscollection representing the set of <option> (htmloptionelement) elements contained by this element. htmlselectelement.required a boolean reflecting the required html attribute, which indicates whether the user is required to select a value before submitting the form. htmlselectelement.selectedindex a long reflecting the index of the first selected <option> element. the value -1 indicates no element is selected. htmlselectelement.selectedoptionsread only an htmlcollection representing the set of <option> elements that are selected. htmlselectelement.size a long reflecting the size html attribute, which contains the number of visible items in the control. the default is 1, unless m...
...atisfy (if any). this attribute is the empty string if the control is not a candidate for constraint validation (willvalidate is false), or it satisfies its constraints. htmlselectelement.validityread only a validitystate reflecting the validity state that this control is in. htmlselectelement.value a domstring reflecting the value of the form control. returns the value property of the first selected option element if there is one, otherwise the empty string. htmlselectelement.willvalidateread only a boolean that indicates whether the button is a candidate for constraint validation. it is false if any conditions bar it from constraint validation. methods this interface inherits the methods of htmlelement, and of element and node. htmlselectelement.add() adds an element to the collec...
...And 4 more matches

Border-image generator - CSS: Cascading Style Sheets
tle"> border-image-outset </div> </div> <!-- other-settings --> <div id="aditional-properties" class="category"> <div class="title"> aditional-properties </div> <div class="property"> <div class="name"> repeat-x </div> <div class="ui-dropdown border-repeat" data-topic="image-repeat-x" data-selected="2"> <div data-value="0">repeat</div> <div data-value="0">stretch</div> <div data-value="0">round</div> </div> </div> <div class="property"> <div class="name"> repeat-y </div> <div class="ui-dropdown border-repeat" data-topic="image-re...
... <div data-value="0">repeat</div> <div data-value="0">stretch</div> <div data-value="0">round</div> </div> </div> <div class="property"> <div class="name"> repeat-y </div> <div class="ui-dropdown border-repeat" data-topic="image-repeat-y" data-selected="2"> <div data-value="1">repeat</div> <div data-value="1">stretch</div> <div data-value="1">round</div> </div> </div> <div class="property"> <div class="ui-input-slider" data-topic="font-size" data-info="em size" data-unit="px" dat...
...*******************************************************/ /* * border image picker */ #gallery { box-shadow: 0 0 3px 0 #bababa; } #image-gallery { width: 600px; height: 100px; margin: 0 auto; transition: margin 0.4s; } #image-gallery .image { height: 80px; float: left; margin: 10px; opacity: 0.5; background-color: #fff; box-shadow: 0px 0px 3px 1px #bababa; } #image-gallery .image[selected="true"] { box-shadow: 0px 0px 3px 1px #3bba52; opacity: 1; } #image-gallery .image:hover { cursor: pointer; box-shadow: 0px 0px 3px 1px #30ace5; opacity: 1; } #image-gallery[data-collapsed='true'] { margin-top: -100px; } /* load menu */ #load-actions { margin: 10px 0; } #toggle-gallery { width: 30px; height: 25px; margin: 10px; color: #fff; background-image: url('https://mdn.moz...
...And 4 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
is not specified, the default type adopted is text. the available types are as follows: type description basic examples spec button a push button with no default behavior displaying the value of the value attribute, empty by default. <input type="button" name="button" /> checkbox a check box allowing single values to be selected/deselected. <input type="checkbox" name="checkbox"/> color a control for specifying a color; opening a color picker when active in supporting browsers. <input type="color" name="color"/> html5 date a control for entering a date (year, month, and day, with no time). opens a date picker or numeric wheels for year, month, day when active in su...
... and adds default validation when supported. displays a numeric keypad in some devices with dynamic keypads. <input type="number" name="number"/> html5 password a single-line text field whose value is obscured. will alert user if site is not secure. <input type="password" name="password"/> radio a radio button, allowing a single value to be selected out of multiple choices with the same name value. <input type="radio" name="radio"/> range a control for entering a number whose exact value is not important. displays as a range widget defaulting to the middle value. used in conjunction min and max to define the range of acceptable values. <input type="range" name="range" min="0" max="25"/> html5 ...
...lid for the file input type only, the capture attribute defines which media—microphone, video, or camera—should be used to capture a new file for upload with file upload control in supporting scenarios. see the file input type. checked valid for both radio and checkbox types, checked is a boolean attribute. if present on a radio type, it indicates that that radio button is the currently selected one in the group of same-named radio buttons. if present on a checkbox type, it indicates that the checkbox is checked by default (when the page loads). it does not indicate whether this checkbox is currently checked: if the checkbox’s state is changed, this content attribute does not reflect the change. (only the htmlinputelement’s checked idl attribute is updated.) note: unlike other in...
...And 4 more matches

jspage - Archive of obsolete content
(){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(var o in n){if(typ...
...!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:function(m,l){if(!l.parentnode){return;}var n=l.
...en(l,m).erase(this); },getchildren:function(l,m){return j(this,"nextsibling","firstchild",l,true,m);},getwindow:function(){return this.ownerdocument.window;},getdocument:function(){return this.ownerdocument; },getelementbyid:function(o,n){var m=this.ownerdocument.getelementbyid(o);if(!m){return null;}for(var l=m.parentnode;l!=this;l=l.parentnode){if(!l){return null; }}return document.id(m,n);},getselected:function(){return new elements($a(this.options).filter(function(l){return l.selected;}));},getcomputedstyle:function(m){if(this.currentstyle){return this.currentstyle[m.camelcase()]; }var l=this.getdocument().defaultview.getcomputedstyle(this,null);return(l)?l.getpropertyvalue([m.hyphenate()]):null;},toquerystring:function(){var l=[]; this.getelements("input, select, textarea",true).each(function...
...And 3 more matches

Menus - Archive of obsolete content
don't apply at a given time should be disabled. however, the actual top level menus do not generally change for a given window. button a menu may be attached to a button by setting the type attribute of the button to 'menu'. instead of creating a standard button, this will create a button with a small arrow or other indicator. clicking the button will display the menu, allowing a command to be selected. this type of menu would be used when you want to have a set of commands yet don't want to use a menu bar, for example in a dialog box. see menu buttons for more information. toolbarbutton toolbar buttons can also support menus. this works just like it does for other buttons. see menu buttons for more information. menulist a menulist is used when you wish the user to select from a list of ite...
... set of commands yet don't want to use a menu bar, for example in a dialog box. see menu buttons for more information. toolbarbutton toolbar buttons can also support menus. this works just like it does for other buttons. see menu buttons for more information. menulist a menulist is used when you wish the user to select from a list of items. for this type of menu, one of the items within it is selected. when another item is selected, the label of the item is set as the label of the menulist. other user interfaces call this type of widget a combobox. you may also see a popup tag used in place of the menupopup tag. the popup tag is deprecated but is equivalent to the menupopup tag. menu tag overview the following shows a simple menu example, containing a menubar with a single menu labeled 'fi...
...p should be a child of the menu element. the following shows a simple help menu. <menu label="help"> <menupopup> <menuitem label="contents"/> <menuitem label="search help"/> </menupopup> </menu> normally, a menupopup is hidden. when the 'help' label is pressed, the menupopup is displayed over top of the window, aligned along the bottom of the help menu label. when a menu command is selected or the menu is cancelled, the menupopup disappears from the screen again. the menu element the menu element is used for the labels on a menubar and for the labels of submenus. for information about submenus, see submenus below. the label for the menu element is specified using the label attribute. in the example below, the menu has the label 'view'. <menu label="view"> <menupopup> <menu...
...And 3 more matches

Textbox (XPFE autocomplete) - Archive of obsolete content
boolean if set to true, the best match will be filled into the textbox as the user types. if false, the default, the value will not be filled in until the user selects an item. completedefaultindex new in thunderbird 3 requires seamonkey 2.0 type: boolean if true, the best match value will be filled into the textbox as the user types. if set to false or omitted, the value must be selected from the list. crop type: boolean this attribute is not used and is only provided for compatibility with the menulist element. disableautocomplete obsolete since gecko 1.9.1 type: boolean if true, the autocomplete behavior will be disabled. you might use a script to change this attribute. if false, the default, autocomplete is enabled. as of gecko 1.9.1, this at...
...true if the last search resulted in no matches. overview an onchange attribute is an event listener to the object for the event change. a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files...
...t is not called when the user presses non-displayable keys. onsearchcomplete new in thunderbird 3requires seamonkey 2.0 type: script code this event handler is called when the autocomplete search is finished and results are available. ontextcommand obsolete since gecko 1.9.1 type: script code note: applies to: thunderbird, seamonkeythis event handler is called when a result is selected for the textbox. as of gecko 1.9.1, this attribute is superseded by the ontextentered attribute. ontextentered new in thunderbird 3requires seamonkey 2.0 type: script code this event handler is called when a result is selected for the textbox. ontextrevert obsolete since gecko 1.9.1 type: script code note: applies to: thunderbird, seamonkey this event handler is called when the ...
...And 3 more matches

listitem - Archive of obsolete content
n 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. ...
...he 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. attributes accesskey, checked, command, crop, current, disabled, image, label, preference, selected, tabindex, type, value properties accesskey, accessible, checked, control, crop, current, disabled, image, label, selected, tabindex, value style classes listitem-iconic 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 ...
...ibute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } current type: boolean this attribute will be set to true if the listitem is the current item. this is typically used by a theme to customize the focus ring. to change the currently selected item in a listbox, use the listbox property selecteditem. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form element...
...And 3 more matches

tabbox - Archive of obsolete content
ay be used to switch between each page. the tabbox should contain two children, the first a tabs element which contains the tabs and the second a tabpanels element which contains the contents of the pages. more information is available in the xul tutorial. ...
...witch between each page. the tabbox should contain two children, the first a tabs element which contains the tabs and the second a tabpanels element which contains the contents of the pages. more information is available in the xul tutorial. ...
...ach page. the tabbox should contain two children, the first a tabs element which contains the tabs and the second a tabpanels element which contains the contents of the pages. more information is available in the xul tutorial. ...
...And 3 more matches

Handling common accessibility problems - Learn web development
m the main menu (to enable the develop menu, choose safari > preferences > advanced > show develop menu in menu bar). chrome: install the web developer toolbar extension, then restart the browser. click the gear icon that will appear, then select css > disable all styles. edge: select view > style > no style from the main menu. using native keyboard accessibility certain html features can be selected using only the keyboard — this is default behavior, available since the early days of the web. the elements that have this capability are the common ones that allow user to interact with web pages, namely links, <button>s, and form elements like <input>. you can try this out using our native-keyboard-accessibility.html example (see the source code) — open this in a new tab, and try pressing ...
...ose to start vo or not, and run through a rather useful tutorial to learn how to use it. to turn it off again, press cmd + f5 again. note: you should go through the tutorial at least once — it is a really useful way to learn vo. when vo is on, the display will look mostly the same, but you'll see a black box at the bottom left of the screen that contains information on what vo currently has selected. the current selection will also be highlighted, with a black border — this highlight is known as the vo cursor. to use vo, you will make a lot of use of the "vo modifier" — this is a key or key combination that you need to press in addition to the actual vo keyboard shortcuts to get them to work. using a modifier like this is common with screenreaders, to enable them to keep their command...
.... the basic ones you'll need for web page testing are in the following table. in the keyboard shortcuts, "vo" means "the voiceover modifier". most common voiceover keyboard shortcuts keyboard shortcut description vo + cursor keys move the vo cursor up, right, down, left. vo + spacebar select/activate items highlighted by the vo cursor. this includes items selected in the rotor (see below). vo + shift + down cursor move into a group of items (such as an html table, or a form, etc.) once inside a group you can move around and select items inside that group using the above commands as normal. vo + shift + up cursor move out of a group. vo + c (when inside a table) read the header of the current column. vo + r (w...
...And 3 more matches

CustomizableUI.jsm
the oth...
...the other way is to watch for when your widget is d...
...the other way is to watch for when your widget is dropped into an area, and give an appropriate icon. this way is simpler because you d...
...And 3 more matches

Profiling with the Firefox Profiler
that high priority events such as vsync are not included here. also note that this indicates what would have happened had there been an event waiting and not necessarily that there was an event pending for that long. black: these indicate synchronous ipc calls. ranges ranges of time can be zoomed in on by clicking and dragging anywhere in the tracing marker or thread areas. once a range is selected, a magnifying glass appears which zooms into that range. clicking on a tracing marker will create a selection corresponding with its duration allowing for easy zooming in on interesting time ranges. as you zoom in on ranges, breadcrumbs are created allowing you to easily navigate back to previously-selected ranges or the entire profile (denoted as "full range"). tip: while zooming out to a prev...
...nifying glass appears which zooms into that range. clicking on a tracing marker will create a selection corresponding with its duration allowing for easy zooming in on interesting time ranges. as you zoom in on ranges, breadcrumbs are created allowing you to easily navigate back to previously-selected ranges or the entire profile (denoted as "full range"). tip: while zooming out to a previously-selected range deletes the narrower range, the browser back button can be used to restore the narrower range. thread timeline(s) thread/process timelines: below the tracing markers we have a list of profiled threads. these threads may come from different processes. in this case, we have the 'geckomain [default]' process' main thread, a content process' main thread, and the main thread of the compositor...
... you may want to consider a non-sampling profiler. y (stack) axis: the y axis is the stack depth, not the cpu activity. the change in stack height is useful to find patterns like long blocking calls (long flatlines) or very tall spiky blocks (recursive calls and js). with more experience you can read profiles faster by recognizing patterns. also note that you can click on timeline elements (the selected element gets darker when selected) and the tree view (see below) reflects the selected element. 2. call tree the call tree shows the samples organized by 'running time' which will show the data by wall clock time. there are lighter grey names to the right of tree elements that indicate where the code comes from. be aware that elements can be from javascript, gecko, or system libraries. not...
...And 3 more matches

nsIMsgDBView
dupdater); void sort(in nsmsgviewsorttypevalue sorttype, in nsmsgviewsortordervalue sortorder); void docommand(in nsmsgviewcommandtypevalue command); void docommandwithfolder(in nsmsgviewcommandtypevalue command, in nsimsgfolder destfolder); void getcommandstatus(in nsmsgviewcommandtypevalue command, out boolean selectable_p, out nsmsgviewcommandcheckstatevalue selected_p); void viewnavigate(in nsmsgnavigationtypevalue motion, out nsmsgkey resultid, out nsmsgviewindex resultindex, out nsmsgviewindex threadindex, in boolean wrap); boolean navigatestatus(in nsmsgnavigationtypevalue motion); nsmsgkey getkeyat(in nsmsgviewindex index); nsimsgdbhdr getmsghdrat(in nsmsgviewindex index); nsimsgfolder getfolderforviewindex(in...
...e defined in nsmsgviewtype. viewflags nsmsgviewflagstypevalue constants are defined in nsmsgviewflagstype. sorttype nsmsgviewsorttypevalue the type of sort being used (i.e. author, date, status, etc). sort types are defined in nsmsgviewsorttype. sortorder nsmsgviewsortordervalue readonly: constants are defined in nsmsgviewsortorder. keyforfirstselectedmessage nsmsgkey readonly: the key of the first message in the current selection. nsmsgkey is defined as an unsigned long in mailnewstypes2.idl. viewindexforfirstselectedmsg nsmsgviewindex readonly: the index of the first selected message. nsmsgviewindex is defined as a unsigned long in mailnewstypes2.idl. msgfolder nsimsgfolder readonly: the current folder. ...
...age in the current selection. nsmsgkey is defined as an unsigned long in mailnewstypes2.idl. viewindexforfirstselectedmsg nsmsgviewindex readonly: the index of the first selected message. nsmsgviewindex is defined as a unsigned long in mailnewstypes2.idl. msgfolder nsimsgfolder readonly: the current folder. viewfolder nsimsgfolder uriforfirstselectedmessage acstring readonly: url of the first selected message. hdrforfirstselectedmessage nsimsgdbhdr readonly: header of the first selected message. numselected long readonly: the number of messages currently selected. msgtoselectafterdelete nsmsgviewindex readonly: the index of the message to select after the current one is deleted. nsmsgviewinde...
...And 3 more matches

nsITextInputProcessor
yboard events on the window. the second argument, callback, should be an object which implements nsitextinputprocessorcallback or just a function which is the same as nsitextinputprocessorcallback.onnotify(). see the document of nsitextinputprocessorcallback for the detail. next, you can set the composition string or dispatch keyboard events. ...
...ld be an object which implements nsitextinputprocessorcallback or just a function which is the same as nsitextinputprocessorcallback.onnotify(). see the document of nsitextinputprocessorcallback for the detail. next, you can set the composition string or dispatch keyboard events. the following example sets "foo-bar-buzz", "bar" is selected clause to convert, and caret position is the end of the selected clause: // first, sets composition string. ...
...ard events. the following example sets "foo-bar-buzz", "bar" is selected clause to convert, and caret position is the end of the selected clause: // first, sets composition string. tip.setpendingcompositionstring("foo-bar-buzz"); // next, append clauses. ...
...And 3 more matches

nsITreeSelection
layout/xul/base/src/tree/public/nsitreeselection.idlscriptable this interface is used by the tree widget to get information about what is selected. ...
...ts last changed in gecko 1.9 (firefox 3) method overview void adjustselection(in long index, in long count); void clearrange(in long startindex, in long endindex); void clearselection(); void getrangeat(in long i, out long min, out long max); long getrangecount(); void invalidateselection(); void invertselection(); boolean isselected(in long index); void rangedselect(in long startindex, in long endindex, in boolean augment); void select(in long index); void selectall(); void timedselect(in long index, in long delay); void toggleselect(in long index); attributes attribute type description count long the number of rows currently selected in this tr...
... selecteventssuppressed boolean this attribute is a boolean indicating whether or not the "select" event should fire when the selection is changed using one of our methods. ...
...And 3 more matches

nsMsgViewCommandType
in thunderbird. for example to mark a message read, you would call: // assuming gdbview is a global nsimsgdbview gdbview.docommand(components.interfaces.nsmsgviewcommandtype.markmessagesread); mailnews/base/public/nsimsgdbview.idlscriptable please add a summary to this article. last changed in gecko 1.9 (firefox 3) constants name value description markmessagesread 0 marks the selected messages as read. markmessagesunread 1 mark the selected messages as unread togglemessageread 2 toggle the read flag of the selected messages flagmessages 3 flag the selected messages. unflagmessages 4 unflag the selected messages. togglethreadwatched 6 toggle the watched state of the selected thread. deletemsg 7 move the selected message to the accounts trash. deletenotrash 8...
...read. markmessagesunread 1 mark the selected messages as unread togglemessageread 2 toggle the read flag of the selected messages flagmessages 3 flag the selected messages. unflagmessages 4 unflag the selected messages. togglethreadwatched 6 toggle the watched state of the selected thread. deletemsg 7 move the selected message to the accounts trash. deletenotrash 8 delete the selected message. markthreadread 9 mark all messages in a thread as read. markallread 10 mark all messages currently shown as read expandall 11 expand all threads. collapseall 12 collapse all threads. copymessages 13 copy the selected messages. use with nsimsgdbview.docommandwithfolder() to select the destination folder. movemessages 14 move the selected messages. use with nsimsgdbview.d...
... downloadflaggedforoffline 17 download all flagged messages for offline. selectthread 18 select the entire thread. selectflagged 19 select all flagged messages. ...
...And 3 more matches

Using the Screen Capture API - Web APIs
the resulting stream. example of a window allowing the user to select a display surface to capture you can then use the captured stream, capturestream, for anything that accepts a stream as input. the examples below show a few ways to make use of the stream. visible vs logical display surfaces for the purposes of the screen capture api, a display surface is any content object that can be selected by the api for sharing purposes. sharing surfaces include the contents of a browser tab, a complete window, all of the applications of a window combined into a single surface, and a monitor (or group of monitors combined together into one surface). there are two types of display surface. a visible display surface is a surface which is entirely visible on the screen, such as the frontmost window ...
...of the user agent, for a brief time before after moving. then the cursor is removed from the stream. never the cursor should never be visible in the generated stream. logicalsurface a boolean which if true indicates that the capture should include offscreen areas of the source, if there are any. none of the constraints are applied in any way until after the content to capture has been selected. the contraints alter what you see in the resulting stream. for example, if you specify a width constraint for the video, it's applied by scaling the video after the user selects the area to share. it doesn't establish a restriction on the size of the source itself. note: constraints never cause changes to the list of sources available for capture by the screen sharing api. this ensures that w...
...erable using enumeratedevices(). related to this, the devicechange event is never sent when there are changes to the sources available for getdisplaymedia(). capturing shared audio getdisplaymedia() is most commonly used to capture video of a user's screen (or parts thereof). however, user agents may allow the capture of audio along with the video content. the source of this audio might be the selected window, the entire computer's audio system, or the user's microphone (or a combination of all of the above). before starting a project that will require sharing of audio, be sure to check the browser compatibility in mediadevices.getdisplaymedia() to see if the browsers you wish compaibility with have support for audio in captured screen streams. to request that the screen be shared with includ...
...And 3 more matches

Proxy UI - Archive of obsolete content
electing a proxy mode, then filling out any additional needed information in "related" ui. the "ok" button saves the preferences. the preference changes selecting the proxy "mode" all product's proxy preference panels share a basic design: a radio button that selects the proxy mode, then "related proxy mode" ui when needed. ...
...t, "proxy mode" means both: whatever was selected in the ui (as opposed to the value of the network.proxy.type. the underlying behavior. the currently available modes are based on "network.proxy.type". for example, firefox 3: [ ] no proxy [ ] auto-detect proxy settings for this network [ ] manual proxy configuration: [ ] automatic proxy configuration url: behavior default value: "no proxy" is selected all other "type" radio buttons are enabled, but not selected. "related" ui elements only two proxy modes have related ui. manual proxy is a list of proxy types that require a hostname and a port number. proxy autoconfiguration has a url field and a reload button. enabling and disabling related fields when a radio button is selected, the related ui elements are enabled (and editable). the pre...
...saving changes click "ok" to save changes to prefs. click "cancel" to discard changes. ...
...And 2 more matches

removeItemAt - Archive of obsolete content
« xul reference home removeitemat( index ) return type: element removes the child item in the element at the specified index. the method returns the removed item. ...
... « xul reference home removeitemat( index ) return type: element removes the child item in the element at the specified index. the method returns the removed item. ...
... « xul reference home removeitemat( index ) return type: element removes the child item in the element at the specified index. the method returns the removed item. ...
...And 2 more matches

Commands - Archive of obsolete content
larger applications. for instance, in order to implement the clipboard menu commands, cut, copy and paste, you can use commands. if you did not use commands, you would need to figure out which field has the focus, then check to ensure that the operation is suitable for that element. in addition, the menu commands would need to be enabled and disabled depending on whether the focused element had selected text or not, and for paste operations, whether there is something suitable on the clipboard to paste. as you can see, this becomes complicated. by using commands, much of the work is handled for you. you can use a command for any operation. mozilla uses them for almost every menu command. in addition, text fields and other widgets have a number of commands which they already support that you can...
...abled. corresponding buttons will be disabled automatically. docommand (command) execute the command. this is where you would put the code to handle the command. onevent (event) this method handles an event. example: controller implementation let's assume that we want to implement a listbox that handles the delete command. when the user selects delete from the menu, the listbox deletes the selected row. in this case, you just need to attach a controller to a listbox which will perform the action in its docommand method. try opening the example below (source view) in a browser window and selecting items from the list. you'll notice that the delete command on the browser's edit menu is enabled and that selecting it will delete a row. (see discussion about opening this example). the example b...
...="controller-example" title="controller example" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function init() { var list = document.getelementbyid("thelist"); var listcontroller = { supportscommand : function(cmd){ return (cmd == "cmd_delete"); }, iscommandenabled : function(cmd){ if (cmd == "cmd_delete") return (list.selecteditem != null); return false; }, docommand : function(cmd){ list.removeitemat(list.selectedindex); }, onevent : function(evt){ } }; list.controllers.appendcontroller(listcontroller); } </script> <listbox id="thelist"> <listitem label="ocean"/> <listitem label="desert"/> <listitem label="jungle"/> <listitem label="swamp"/> </listbox> </window> the control...
...And 2 more matches

prefwindow - Archive of obsolete content
ediately, the preferences are adjusted as soon as the user interface element is changed. on other platforms, the preferences are not applied until the dialog is closed. you can open a preference window using a window's opendialog method as with other dialogs. you can pass the id of a particular pane as the fourth argument to opendialog to open a specific pane by default. you can also set the lastselected attribute on the prefwindow tag to the id of the pane to start with. normally, you would not set this attribute as it will be set automatically such that the default pane is the same as the one showing when the preferences dialog was last closed. more information is available in the preferences system article. important note for xulrunner-based applications: the preferences system - part of the...
... nsiwindowwatcher.openwindow() with a null parentwindow. this does not work with prefwindows, breaking the general behavior of the window and in particular the list of prefpanes. prefer the classical window.opendialog() with the following window features: "chrome,titlebar,toolbar,centerscreen,dialog=yes". ...
...prefer the classical window.opendialog() with the following window features: "chrome,titlebar,toolbar,centerscreen,dialog=yes". ...
...And 2 more matches

radio - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element that can be turned on and off. radio buttons are almost always listed together in groups. only one radio button within the same radiogroup may be selected at a time. the user can switch which radio button is turned on by selecting it with the mouse or keyboard. other radio buttons in the same group are turned off. a label, specified with the label attribute may be added beside the radio button. ...
...iogroup may be selected at a time. the user can switch which radio button is turned on by selecting it with the mouse or keyboard. other radio buttons in the same group are turned off. a label, specified with the label attribute may be added beside the radio button. more information is available in the xul tutorial. ...
... keyboard. other radio buttons in the same group are turned off. a label, specified with the label attribute may be added beside the radio button. more information is available in the xul tutorial. attributes accesskey, command, crop, disabled, focused, group, image, label, selected, tabindex, value properties accesskey, accessibletype, control, crop, disabled, image, label, radiogroup, selected, tabindex, value examples <radiogroup> <radio id="orange" label="red" accesskey="r"/> <radio id="violet" label="green" accesskey="g" selected="true"/> <radio id="yellow" label="blue" accesskey="b" disabled="true"/> </radiogroup> 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...
...And 2 more matches

textbox - Archive of obsolete content
n if true, the value of the number box will wrap around when the maximum or minimum value is exceeded. the minimum and maximum values must both not be infinity. properties accessibletype type: integer a value indicating the type of accessibility object for the element. clickselectsall type: boolean if set to true, the contents of the textbox are selected when focused; otherwise, the cursor is left unchanged. decimalplaces type: integer gets and sets the value of the decimalplaces attribute. decimalsymbol type: string the character used for the decimal place indicator. the default value is a period (.) defaultvalue type: string gets and sets the the default value in a textbox. ...
...the value of the min attribute. placeholder type: string gets and sets a string that appears in the textbox when it has no value. readonly type: boolean if set to true, then the user cannot modify the value of the element. searchbutton type: boolean gets and sets the value of the searchbutton attribute. ...
...of the element. searchbutton type: boolean gets and sets the value of the searchbutton attribute. selectionend type: integer get or set the end of the selected portion of the field's text. use in conjuction with the selectionstart property. the value specifies the index of the character after the selection. if this value is equal to the value of the selectionstart property, no text is selected, but the value indicates the position of the caret (cursor) within the textbox. selectionstart type: integer get or set the beginning of the selected portion of the field's text. use in conjuction with the selectionend property. the value specifies the index of the first selected character. size type: integer gets and sets the value of the size attribute. spinbuttons t...
...And 2 more matches

How to enable locale switching in a XULRunner application - Archive of obsolete content
locale localeswitchdemo de-de locale/de-de/ locale localeswitchdemo en-gb locale/en-gb/ locale localeswitchdemo fr-fr locale/fr-fr/ how are you going to populate the xul listbox? you can hardwire the choices into the xul code using fixed list items, or could take the elegant approach and construct the list dynamically. ...
... currently selected locale as well as all locales available in the application package. ...
...e javascript code to populate the control: try { // query available and selected locales var chromeregservice = components.classes["@mozilla.org/chrome/chrome-registry;1"].getservice(); var xulchromereg = chromeregservice.queryinterface(components.interfaces.nsixulchromeregistry); var toolkitchromereg = chromeregservice.queryinterface(components.interfaces.nsitoolkitchromeregistry); var selectedlocale = xulchromereg.getselectedlocale("localeswitchdemo"); var availablelocales = toolkitchromereg.getlocalesforpackage("localeswitchdemo"); // render locale menulist by iterating through the query result from getlocalesforpackage() const xul_ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var localelistbox = document.getelementbyid("locale-listbox"); var s...
...And 2 more matches

XForms Switch Module - Archive of obsolete content
sed on user actions and events. the module defines for this switch, case and toggle elements. switch element the element (see the spec) is used in conjunction with case and toggle elements. the switch element contains case elements which in turn contain markup. only the contents of a single case may be displayed at one time. the toggle element is an action that when triggered will make a case selected and visible and thereby hiding all other case elements contained by the same switch. attributes single-node binding type restrictions the switch element can be bound to a node containing data of any type. actually, the switch element doesn't interact with the data in the bound node. however, having a relevant model item property on the bound node has an effect on a switch. binding a switch to...
...h. binding a switch to a data node will also set a context that the expressions contained inside the case elements can build upon. representations the switch element doesn't have a visual representation. case element this element (see the spec) encloses markup to be conditionally rendered. the content elements (e.g. ...
... inside the case elements can build upon. representations the switch element doesn't have a visual representation. case element this element (see the spec) encloses markup to be conditionally rendered. the content elements (e.g. form controls, groups, switches, repeats and host language elements) within a non-selected case are not rendered. correspondingly, content elements in a case that becomes selected are visible. attributes special selected - determines the initial selected state of the case. if multiple cases within a switch are marked as selected="true", the first selected case will appear and all others will not be visible. if no case is initially selected, the first case inside the switch becomes selected and visible. representations the case element doesn't have a ...
...And 2 more matches

Making decisions in your code — conditionals - Learn web development
e've got an html <select> element allowing us to make different weather choices, and a simple paragraph. in the javascript, we are storing a reference to both the <select> and <p> elements, and adding an event listener to the <select> element so that when its value is changed, the setweather() function is run. when this function is run, we first set a variable called choice to the current value selected in the <select> element. we then use a conditional statement to show different text inside the paragraph depending on what the value of choice is. notice how all the conditions are tested in else if() {...} blocks, except for the first one, which is tested in an if() {...} block. the very last choice, inside the else {...} block, is basically a "last resort" option — the code inside it will be...
......
..., meaning that the site color are inverted. note: you can also find this example on github (see it running live on there also.) active learning: a simple calendar in this example, you are going to help us finish a simple calendar application. in the code you've got: a <select> element to allow the user to choose between different months. an onchange event handler to detect when the value selected in the <select> menu is changed. a function called createcalendar() that draws the calendar and displays the correct month in the <h1> element. we need you to write a conditional statement inside the onchange handler function, just below the // add conditional here comment. it should: look at the selected month (stored in the choice variable. this will be the <select> element value after th...
...And 2 more matches

Index
le tree. 282 previoussibling returns previous node in accessible tree. 283 relationscount returns the number of accessible relations for this object. 284 role enumerated accessible role for the associated element. the values depend on platform because of variations. see the role_* constants in roles documentation. 285 setselected this method adds or remove this accessible to the current selection. 286 takefocus this method focuses this accessible node. 287 takeselection this method selects this accessible node only. 288 value accessible value -- a number or a secondary text equivalent for this node. widgets that use role attribute can force a val...
...1 nsiaccessiblescrolltype accessibility, interfaces, interfaces:scriptable, xpcom, xpcom interface reference no summary! 312 nsiaccessibleselectable accessibility, interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference adds the specified accessible child of the object to the object's selection. if the specified object is already selected, then it does nothing. 313 nsiaccessiblestatechangeevent interfaces, interfaces:scriptable, xpcom, xpcom interface reference none. 314 nsiaccessiblestates accessibility, interfaces, interfaces:scriptable, xpcom, xpcom interface reference prior to gecko 1.9, these constants were implemented in nsiaccessible. 315 nsiaccessibletable accessibil...
...n dom, firefox 3, interfaces, xpcom, xpcom api reference the nsidomfileexception interface represents exceptions that can be raised by calls to the methods in the nsidomfile interface. 482 nsidomfilelist dom, files, firefox 3, interfaces, xpcom, xpcom api reference, drag and drop the nsidomfilelist interface contains a list of nsidomfile objects describing the files selected by the user for a "file" input field on a web form. 483 nsidomfilereader dom, file i/o, files, interfaces, interfaces:scriptable the nsidomfilereader interface provides a way to read data from a file specified by an nsidomfile. 484 nsidomfontface interfaces, interfaces:scriptable, needscontent this object describes a single font. it's returned in a list y...
...And 2 more matches

IAccessibleTableCell
.2 inherits from: iunknown last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview [propget] hresult columnextent([out] long ncolumnsspanned ); [propget] hresult columnheadercells([out, size_is(, ncolumnheadercells,)] iunknown cellaccessibles, [out] long ncolumnheadercells ); [propget] hresult columnindex([out] long columnindex ); [propget] hresult isselected([out] boolean isselected ); [propget] hresult rowcolumnextents([out] long row, [out] long column, [out] long rowextents, [out] long columnextents, [out] boolean isselected ); [propget] hresult rowextent([out] long nrowsspanned ); [propget] hresult rowheadercells([out, size_is(, nrowheadercells,)] iunknown cellaccessibles, [out] long nrowheadercells ); [propget] hresult rowindex([out] long...
...lse if there is no header, [out] values are null and 0 respectively. s_ok. columnindex() translates this cell accessible into the corresponding column index. [propget] hresult columnindex( [out] long columnindex ); parameters columnindex returns the 0 based column index of the cell of the specified cell or the index of the first column if the cell spans multiple columns. return value s_ok. isselected() returns a boolean value indicating whether this cell is selected. [propget] hresult isselected( [out] boolean isselected ); parameters isselected returns true if the specified cell is selected and false otherwise. return value s_ok. rowcolumnextents() gets the row and column indexes and extents of this cell accessible and whether or not it is selected. this is a convenience function. it is...
... return value s_ok. rowextent() returns the number of rows occupied by this cell accessible. ...
...And 2 more matches

nsIAccessibleSelectable
accessible/public/nsiaccessibleselectable.idlscriptable an interface for the accessibility module and in-process accessibility clients for dealing with getting and changing the selection of accessible nodes. inherits from: nsisupports last changed in gecko 1.7 method overview void addchildtoselection(in long index); void clearselection(); nsiarray getselectedchildren(); boolean ischildselected(in long index); nsiaccessible refselection(in long index); void removechildfromselection(in long index); boolean selectallselection(); attributes attribute type description selectioncount long the number of accessible children currently selected. read only. constants constant value description eselection_add 0 eselection_remove 1 eselection_getstate 2 ...
...ction(); attributes attribute type description selectioncount long the number of accessible children currently selected. read only. constants constant value description eselection_add 0 eselection_remove 1 eselection_getstate 2 methods addchildtoselection() adds the specified accessible child of the object to the object's selection. if the specified object is already selected, then it does nothing. void addchildtoselection( in long index ); parameters index the zero-based accessible child index. exceptions thrown ns_error_failure if the specified object is not selectable. ...
... accessible child of the object to the object's selection. if the specified object is already selected, then it does nothing. void addchildtoselection( in long index ); parameters index the zero-based accessible child index. exceptions thrown ns_error_failure if the specified object is not selectable. clearselection() clears the selection in the object so that no children in the object are selected. void clearselection(); parameters none. getselectedchildren() returns an nsiarray of the selected nsiaccessible children. nsiarray getselectedchildren(); parameters none. return value an nsiarray. ischildselected() determines if the current child of this object is selected. boolean ischildselected( in long index ); parameters index the zero-based accessible child index. return value true ...
...And 2 more matches

Address Book examples
n delete it in the same way as per deleting a contact. if you have it in its nsiabdirectory form, then you can delete it like this: var abmanager = components.classes["@mozilla.org/abmanager;1"] .createinstance(components.interfaces.nsiabmanager); abmanager.deleteaddressbook(maillist.uri); how do i display properties dialogs to the user? in the following examples: selectedab is the uri of an address book to default the dialog to saving the card in. this may be blank if not required. aburi and card are the uri of the address book and the card contained within that address book. new contact dialog window.opendialog("chrome://messenger/content/addressbook/abnewcarddialog.xul", "", "chrome,resizable=no,titlebar,modal,centerscreen...
...dress book to default the dialog to saving the card in. this may be blank if not required. aburi and card are the uri of the address book and the card contained within that address book. ...
...to default the dialog to saving the card in. this may be blank if not required. aburi and card are the uri of the address book and the card contained within that address book. ...
...And 2 more matches

Folders and message lists
variable gfolderdisplay. this object provides many of the functions required for working with folder views. we'll look at some of them below. getting the current nsimsgfolder the nsimsgfolder interface contains many methods and attributes for working with folders. to get the nsimsgfolder instance for the currently-displayed folder, just use gfolderdisplay.displayedfolder. ...
...king with folder views. we'll look at some of them below. getting the current nsimsgfolder the nsimsgfolder interface contains many methods and attributes for working with folders. to get the nsimsgfolder instance for the currently-displayed folder, just use gfolderdisplay.displayedfolder. getting the currently-selected message the folderdisplaywidget has several ways of getting the currently-selected message(s), depending on what exactly you're trying to do: gfolderdisplay.selectedcount: returns the number of messages currently selected. gfolderdisplay.selectedmessage: returns the first currently-selected message. when using this, be sure that there's only one selected message (or that you only care about the first one). otherwise, use one of the methods described below. gfolderdisplay.s...
...: gfolderdisplay.selectedcount: returns the number of messages currently selected. gfolderdisplay.selectedmessage: returns the first currently-selected message. when using this, be sure that there's only one selected message (or that you only care about the first one). otherwise, use one of the methods described below. gfolderdisplay.selectedmessages: returns an array of nsimsgdbhdrs for the selected messages. if a collapsed thread is in there and working with collapsed threads is enabled, this will include the headers for the messages in that collapsed thread. gfolderdisplay.selectedmessageuris: returns an array of the uris corresponding to the selected messages. like selectedmessages, this also includes messages in selected collapsed threads when so enabled. changing the current message ...
...And 2 more matches

Migrating from Firebug - Firefox Developer Tools
in bug 1067318 and bug 815464. copy html and related information firebug's html panel allows to copy the inner and outer html of an element as well as the css and xpath to it via the context menu of an element. the page inspector provides the same functionality except copying xpaths. this is covered by bug 987877. edit css both tools allow to view and edit the css rules related to the element selected within the node view in a similar way. firebug has a style side panel for this, the devtools have a rules side panel. in firebug you add new rules by right-clicking and choosing add rule... from the context menu. the devtools also have a context menu option for that named add new rule and additionally have a + button within the rules panel's toolbar to create new rules. to edit element styles, ...
...it into their related longhand properties by setting the option expand shorthand properties within the style side panel. the devtools' rules panel is a bit smarter and allows you to expand individual shorthand properties by clicking the twisty besides them. only show applied styles the style side panel in firebug has an option to display only the properties of a css rule that are applied to the selected element and hide all overwritten styles. there is no such feature in the rules side panel of the devtools, but it is requested in bug 1335327. inspect box model in firebug the box model can be inspected via the layout side panel. in the devtools the box model is part of the computed side panel. both tools highlight the different parts of the box model within the page when hovering them in the b...
...ources the css panel of firebug allows to switch between different css sources using the css location menu. the style editor has a sidebar for this purpose. edit a style sheet firebug's css panel offers three different ways for editing style sheets. the default one is to edit them inline like within the style side panel. furthermore it has a source and a live edit mode, which allow to edit the selected style sheet like within a text editor. the style editor of the devtools only has one way to edit style sheets, which corresponds to firebug's live edit mode. try out css selectors firebug's selectors side panel provides a way to validate a css selector. it lists all elements matching the entered selector. the devtools don't have this feature yet, but it's requested in bug 1323746. searching wi...
...And 2 more matches

Examine and edit HTML - Firefox Developer Tools
the breadcrumbs bar has its own keyboard shortcuts. searching the page inspector's search box matches all markup in the current document and in any frames. ...
... outer html copy the outer html for the element. pressing ctrl + c (or cmd + c on a mac) also performs this action. (copy) unique selector/css selector copy a css selector that uniquely selects the element. (copy) css path copy a css selector that represents the full path to the element. ...
...ects the element. (copy) css path copy a css selector that represents the full path to the element. (copy) image data-url copy image as a data:// url, if the selected element is an image. (copy) attribute copy the attribute of the element. show dom properties open the split console and enter the console command "inspect($0)" to inspect the currently selected element. use in console assigns the currently selected node to a variable named temp0 (or temp1 if temp0 is already taken, and so on), then opens the split console, enabling you to interact with that node using the console's command line. expand all in the tree view, expand the current element and all the elements underneath it. this is equivalent to holding the alt key an...
...And 2 more matches

FileList - Web APIs
starting with gecko 1.9.2, if the input element's multiple attribute is true, the filelist may contain multiple files. ...
...starting with gecko 1.9.2, if the input element's multiple attribute is true, the filelist may contain multiple files. ...
...integer a read-only value indicating the number of files in the list. methods item() returns a file object representing the file at the specified index in the file list. file item( index ); parameters index the zero-based index of the file to retrieve from the list. return value the file representing the requested file. ...
...And 2 more matches

HTMLInputElement - Web APIs
if the value of type is image. properties that apply only to elements of type file accept string: returns / sets the element's accept attribute, containing comma-separated list of file types accepted by the server when type is file. allowdirs boolean: part of the non-standard directory upload api; indicates whether or not to allow directories and files both to be selected in the file list. implemented only in firefox and is hidden behind a preference. files returns/accepts a filelist object, which contains a list of file objects representing the files selected for upload. webkitdirectory boolean: returns the webkitdirectory attribute; if true, the file system picker interface only accepts directories instead of files. webkitentri...
...d a preference. files returns/accepts a filelist object, which contains a list of file objects representing the files selected for upload. webkitdirectory boolean: returns the webkitdirectory attribute; if true, the file system picker interface only accepts directories instead of files. webkitentries array of filesystementry objects: describes the currently selected files or directories. properties that apply only to text/number-containing or elements autocomplete string: returns / sets the element's autocomplete attribute, indicating whether the value of the control can be automatically completed by the browser. ignored if the value of the type attribute is hidden, checkbox, radio, file, or a button type (button, submit, reset, image). p...
...h, tel, url or email; otherwise it is ignored. readonly boolean: returns / sets the element's readonly attribute, indicating that the user cannot modify the value of the control. html5this is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type. selectionstart unsigned long: returns / sets the beginning index of the selected text. when nothing is selected, this returns the position of the text input cursor (caret) inside of the <input> element. selectionend unsigned long: returns / sets the end index of the selected text. when there's no selection, this returns the offset of the character immediately following the current text input cursor position. selectiondirection string: returns / sets th...
...And 2 more matches

Option() - Web APIs
the option() constructor creates a new htmloptionelement. syntax var optionelementreference = new option(text, value, defaultselected, selected); parameters text optional a domstring representing the content of the element, i.e. the displayed text. if this is not specified, a default value of "" (empty string) is used. value optional a domstring representing the value of the htmloptionelement, i.e. the value attribute of the equivalent <option>. if this is not specified, the value of text is used as the value, e.g. for the associated <select> element's value when the form is submitted to the server. ...
...ement, i.e. the displayed text. if this is not specified, a default value of "" (empty string) is used. value optional a domstring representing the value of the htmloptionelement, i.e. the value attribute of the equivalent <option>. if this is not specified, the value of text is used as the value, e.g. for the associated <select> element's value when the form is submitted to the server. ...
...not specified, a default value of "" (empty string) is used. value optional a domstring representing the value of the htmloptionelement, i.e. the value attribute of the equivalent <option>. if this is not specified, the value of text is used as the value, e.g. for the associated <select> element's value when the form is submitted to the server. defaultselected optional a boolean that sets the selected attribute value, i.e. so that this <option> will be the default value selected in the <select> element when the page is first loaded. if this is not specified, a default value of false is used. note that a value of true does not set the option to selected if it is not already selected. selected optional a boolean that sets the option's selected state; the default is false (not selected). if omi...
...And 2 more matches

VideoTrackList: change event - Web APIs
the change event is fired when a video track is made active or inactive, for example by changing the track's selected property. ...
...ging the track's selected property. ...
...lement = document.queryselector('video'); videoelement.videotracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); // changing the value of `selected` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.videotracks[0]; track.selected = !track.selected; }); using the onchange event handler property: const videoelement = document.queryselector('video'); videoelement.videotracks.onchange = (event) => { console.log(`'${event.type}' event fired`); }; // changing the value of `selected` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('clic...
...And 2 more matches

:first-child - CSS: Cascading Style Sheets
the :first-child css pseudo-class represents the first element among a group of sibling elements. /* selects any <p> that is the first element among its siblings */ p:first-child { color: lime; } note: as originally defined, the selected element had to have a parent. beginning with selectors level 4, this is no longer required. ...
...ss pseudo-class represents the first element among a group of sibling elements. /* selects any <p> that is the first element among its siblings */ p:first-child { color: lime; } note: as originally defined, the selected element had to have a parent. beginning with selectors level 4, this is no longer required. ...
...t element among a group of sibling elements. /* selects any <p> that is the first element among its siblings */ p:first-child { color: lime; } note: as originally defined, the selected element had to have a parent. beginning with selectors level 4, this is no longer required. ...
...And 2 more matches

:last-child - CSS: Cascading Style Sheets
the :last-child css pseudo-class represents the last element among a group of sibling elements. /* selects any <p> that is the last element among its siblings */ p:last-child { color: lime; } note: as originally defined, the selected element had to have a parent. beginning with selectors level 4, this is no longer required. ...
... css pseudo-class represents the last element among a group of sibling elements. /* selects any <p> that is the last element among its siblings */ p:last-child { color: lime; } note: as originally defined, the selected element had to have a parent. beginning with selectors level 4, this is no longer required. ...
... last element among a group of sibling elements. /* selects any <p> that is the last element among its siblings */ p:last-child { color: lime; } note: as originally defined, the selected element had to have a parent. beginning with selectors level 4, this is no longer required. ...
...And 2 more matches

Event reference
ing device is moved off the element that has the listener attached or off one of its children. mouseup a pointing device button is released over an element. pointerlockchange the pointer was locked or released. pointerlockerror it was impossible to lock the pointer for technical reasons or because the permission was denied. select some text is being selected. wheel a wheel button of a pointing device is rotated in any direction. drag & drop events event name fired when drag an element or text selection is being dragged (fired continuously every 350ms). dragend a drag operation is being ended (by releasing a mouse button or hitting the escape key). dragenter a dragged element ...
...ck to the app. resume speechsynthesisevent web speech api a paused utterance is resumed. scroll uievent dom l3 the document view or an element has been scrolled. seeked event html5 media a seek operation completed. seeking event html5 media a seek operation began. select uievent dom l3 some text is being selected. selectstart event selection api a selection just started. selectionchange event selection api the selection in the document has been changed. show mouseevent html5 a contextmenu event was fired on (or bubbled to) an element that has a contextmenu attribute slotchange event dom the node contents of a htmlslotelement (<slo...
...tbd.) mozbrowserasyncscroll firefox os browser api-specific sent when the scroll position within a browser <iframe> changes. mozbrowseraudioplaybackchange firefox os browser api-specific sent when audio starts or stops playing within the browser <iframe> content. mozbrowsercaretstatechanged firefox os browser api-specific sent when the text selected inside the browser <iframe> content changes. mozbrowserclose firefox os browser api-specific sent when window.close() is called within a browser <iframe>. mozbrowsercontextmenu firefox os browser api-specific sent when a browser <iframe> tries to open a context menu. mozbrowserdocumentfirstpaint firefox os browser api-specific sent when a n...
...And 2 more matches

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
every time the value of the element changes; that is, every time the user adjusts the color in the color picker. each time this event arrives, we set the box's border color to match the color picker's current value. the change event is received when the color picker's value is finalized. we respond by setting the contents of the <p> element with the id "output" to a string describing the finally selected color. using color wisely making the right choices when selecting colors when designing a website can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. the wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. worse still, if using the wrong ...
... find that browser extensions that let you select colors from web content can be particularly handy. some of these are even specifically designed to help with this sort of work. for example, the website colorzilla offers an extension (chrome / firefox) that offers an eyedropper tool for picking colors from the web. it can also take averages of the colors of pixels in various sized areas or even a selected area of the page. the advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. picking just one of these pixels can result in getting a color that on its own looks very out of place. fleshing out the palette once you have decided on your base color, there ...
...ders humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. we use a color picker tool to select a sample of the color we choose. using an eyedropper tool, we identify a color we like and determine that the color in question is #d79c7a, which is an appropriate rusty orange-red color that's so stereotypical of the martian surface. having selected our base color, we need to build out our palette. we decide to use paletton to come up with the other colors we need. upon opening paletton, we see: next, we enter our color's hex code (d79c7a) into the "base rgb" box at the bottom-left corner of the tool: we now see a monochromatic palette based on the color we picked from the mars photo. if you need a lot of related colors for some reason...
...And 2 more matches

Proxy - JavaScript
xtend(person, function(name, age) { this.age = age; }); boy.prototype.gender = 'm'; var peter = new boy('peter', 13); console.log(peter.gender); // "m" console.log(peter.name); // "peter" console.log(peter.age); // 13 manipulating dom nodes sometimes you want to toggle the attribute or class name of two different elements. here's how using the set handler. ...
...boy('peter', 13); console.log(peter.gender); // "m" console.log(peter.name); // "peter" console.log(peter.age); // 13 manipulating dom nodes sometimes you want to toggle the attribute or class name of two different elements. here's how using the set handler. ...
...eter.name); // "peter" console.log(peter.age); // 13 manipulating dom nodes sometimes you want to toggle the attribute or class name of two different elements. here's how using the set handler. ...
...And 2 more matches

tabs/utils - Archive of obsolete content
parameters tab : tab a xul tab element to activate. window : window a browser window. gettabbrowser(window) get the tabbrowser element for the given browser window. parameters window : window a browser window. returns tabbrowser : gettabcontainer(window) get the tabbrowser's tabcontainer property. parameters window : window a browser window. returns tabcontainer : gettabs(window) returns the tabs for the specified window. ...
...he function will exclude all tabs that are hosted by private browser windows. to learn more about private windows, how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. parameters window : nsiwindow optional. returns array : an array of tab elements. getactivetab(window) given a browser window, get the active, or selected, tab. parameters window : window a browser window. returns tab : the currently selected tab. getownerwindow(tab) get the browser window that owns the specified tab. parameters tab : tab a browser tab. returns window : a browser window. opentab(window, url, options) open a new tab in the specified browser window. parameters window : window the browser window in which to open the t...
...b. returns window : a browser window. opentab(window, url, options) open a new tab in the specified browser window. parameters window : window the browser window in which to open the tab. url : string url for the document to load. options : object optional options: name type inbackground boolean if true, open the new tab, but keep the currently selected tab selected. if false, make the new tab the selected tab. optional, defaults to false. pinned boolean pin this tab. optional, defaults to false. returns tab : the new tab. istabopen(tab) test whether the specified tab is open. parameters tab : tab a xul tab element. returns boolean : true if the tab is open, otherwise false. closetab(tab) close the sp...
...rns tab : gettaburl(tab) get the specified tab's url. parameters tab : tab a xul tab element. returns string : the current uri. settaburl(tab, url) set the specified tab's url. parameters tab : tab a xul tab element. url : string gettabcontenttype(tab) get the contenttype of the document hosted by the specified tab. parameters tab : tab a xul tab element. returns string : getselectedtab(window) get the selected tab for the specified browser window. parameters window : window returns tab : a xul tab element. gettabforbrowser(browser) get the tab linked to the specified browser. parameters browser : browser the browser whose tab element we want to find. returns tab : the xul tab element linked to the specified browser, if any. ...

Miscellaneous - Archive of obsolete content
se and key events https://developer.mozilla.org/samples/domref/dispatchevent.html also, new in firefox 3 / gecko 1.9: var utils = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindowutils); utils.sendmouseevent("mousedown", 10, 10, 0, 1, 0); utils.sendmouseevent("mouseup", 10, 10, 0, 1, 0); getting the currently selected text from browser.xul overlay context: var selectedtext = document.commanddispatcher.focusedwindow.getselection().tostring(); or: content.getselection(); // |window| object is implied; i.e., window.content.getselection() or: getbrowserselection(); // |window| object is implied; i.e., window.getbrowserselection() this final option massages the selection to remove leading and trailing whi...
...on massages the selection to remove leading and trailing whitespace. it also collapses consecutive whitespaces into a single whitespace, and returns at most 150 characters, making it ideal to display text in context menus. it is defined at //github.com/realityripple/pale-moon/blob/master/palemoon/base/content/browser.js#l5113. note that it returns the empty string (""), not false, when nothing is selected. getbrowserselection() is not implemented on some platforms, such as thunderbird and songbird. see also http://mxr.mozilla.org/seamonkey/source/browser/base/content/browser.js#4674 discovering which element in the loaded document has focus // focusedcontrol stores the focused field, or null if there is none. // this excludes textareas for simplicity, but onpageload() can easily be // modified ...
... element.setselectionrange(selectionend, selectionend); } inserttext(document.getelementbyid("example"), "the text to be inserted"); disabling javascript programmatically // disable js in the currently active tab from the context of browser.xul gbrowser.docshell.allowjavascript = false; if this isn't your browser, you should save the value and restore it when finished. if you wish to block selected scripts based on their uri, implement nsicontentpolicy. using string bundles from javascript assuming the extension has myext.properties with name/value pairs such as: invalid.url=the speficied url, %s, is invalid. that was attempt number %s. these properties can be accessed from javascript in the following manner: var common = { _bundle: components.classes["@mozilla.org/intl/stringbun...
...t, you need to get the browser you want, and its historysession. var ci = components.interfaces; var cc = components.classes; //assume you can not get the main window object directly, if you can, just use it var wm = cc["@mozilla.org/appshell/window-mediator;1"].getservice(ci.nsiwindowmediator); var mainwindow = wm.getmostrecentwindow("navigator:browser"); //get sessionhistory from the current selected tab var history = mainwindow.gbrowser.selectedbrowser.webnavigation.sessionhistory; and then get the page you want, and it's postdata. this example obtains the post data of the last page. var postdata = history.getentryatindex(history.index-1,false).queryinterface(ci.nsishentry).postdata; if you got here all by yourself, your problem must be at reading the postdata, because it's a nsiinputst...

slideBar - Archive of obsolete content
otype, which is no longer under active development. read the experiment report for what we learned from it and the blog post announcing the first sdk release for what we're up to next! slidebar is a reinvention of the old sidebar features of browsers. they allow quick access to a wide range of both temporary and permanent information at the side of your browser window. when a slidebar feature is selected its contents will be revealed from behind the current webpage. it currently under development and lives in the future. jetpack.future.import("slidebar"); methods append(iconurihtmlhtml/xmlurluriwidthintpersistboolautoreloadboolonclickfunctiononselectfunctiononreadyfunction)this is a list of options to specify modifications to your slidebar instance. iconhref oficon to show in the slidebaruri htm...
... jetpack.future.import("slidebar"); methods append(iconurihtmlhtml/xmlurluriwidthintpersistboolautoreloadboolonclickfunctiononselectfunctiononreadyfunction)this is a list of options to specify modifications to your slidebar instance. ...
...ml/xmlurluriwidthintpersistboolautoreloadboolonclickfunctiononselectfunctiononreadyfunction)this is a list of options to specify modifications to your slidebar instance. ...
...lidebar instance. ...

Attribute (XUL) - Archive of obsolete content
« xul reference home acceltext accessible accesskey activetitlebarcolor afterselected align allowevents allownegativeassertions alternatingbackground alwaysopenpopup attribute autocheck autocompleteenabled autocompletepopup autocompletesearch autocompletesearchparam 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 ...
...eight helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline multiple name negate newlines next noautofocus noautohide noinitialfocus nomatch norestorefocus object observes onbeforeaccept onbookmarkgroup onchange onclick onclosetab ...
...ardfinish onwizardnext open ordinal orient pack pageid pageincrement pagestep parent parsetype persist persistence phase pickertooltiptext placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabscrolling targets template timeout title toolbarname tooltip tooltiptext tooltiptextnew ...
...column showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabscrolling targets template timeout title toolbarname tooltip tooltiptext tooltiptextnew top type uri useraction validate value var visuallyselected wait-cursor width windowtype wrap wraparound ...

Input Controls - Archive of obsolete content
utton" label="find"/> add these lines before the buttons we created in the last section. if you open this window, you will see something much like that shown in the image. notice that the label and the text input field have now appeared in the window. the textbox is fully functional and you can type into it and select text. note that the control attribute has been used so that the textbox is selected when the label is clicked. checkboxes and radio buttons two additional elements are used for creating check boxes and radio buttons. they are 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 o...
...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. ...
...t"/> <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 attribute can be used to assign a label that will appear beside the check box. for radio buttons, you should use the selected attribute instead of the checked attribute. 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. clicking one will turn off all of the others in the same group. the following ex...
... 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. clicking one will 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 fa...

Keyboard Shortcuts - Archive of obsolete content
e's key commands are only triggered when the user is focused on a particular element). creating a keyboard shortcut xul provides methods in which you can define keyboard shortcuts. we've already seen in the section on menus that we can define an attribute called accesskey which specifies the key which a user can press to activate the menu or menu item. in the example below, the file menu can be selected by pressing alt + f together (or some other key combination for a specific platform). once the file menu is open, the close menu item can be selected by pressing c. example 1 : source view <menubar id="sample-menubar"> <menu id="file-menu" label="file" accesskey="f"> <menupopup id="file-popup"> <menuitem id="close-command" label="close" accesskey="c"/> </menupopup> </menu> </m...
... you might want to set up more general keyboard shortcuts however. for example, pressing ctrl + c to copy text to the clipboard. although shortcuts such as this might not always be valid, they will usually work any time the window is open. usually, a keyboard shortcut will be allowed at any time and you can check to see whether it should do something using a script. ...
... shortcuts however. for example, pressing ctrl + c to copy text to the clipboard. although shortcuts such as this might not always be valid, they will usually work any time the window is open. usually, a keyboard shortcut will be allowed at any time and you can check to see whether it should do something using a script. for example, copying text to the clipboard should only work when some text is selected. key element xul provides an element, key, which lets you define a keyboard shortcut for a window. it has attributes to specify the key that should be pressed and what modifier keys (such as shift or ctrl) need to be pressed. an example is shown below: <keyset> <key id="sample-key" modifiers="shift" key="r"/> </keyset> this sample defines a keyboard shortcut that is activated when the user...
...n example is shown below: <keyset> <key id="copy-key" modifiers="accel" key="c" oncommand="docopy();"/> </keyset> the function docopy will be called when the user presses the keys specified by the key element, which in this example, are the keys for copying to the clipboard (such as control + c). this will work as long as the window is open. the docopy function should check to see if text is selected and then copy the text to the clipboard. note that textboxes have the clipboard shortcuts built-in so you don't have to implement them yourself. assigning a keyboard shortcut on a menu the second way is: if you are assigning a keyboard shortcut that performs a command that also exists on a menu, you can associate the key element directly with the menu command. to do this, also add a key attribu...

Accessibility/XUL Accessibility Reference - Archive of obsolete content
lorpicker <colorpicker type="button" palettename="standard" /> colorpicker appears to read color values out if the colorpicker can get focus in the first place. column see grid columns see grid command see keyboard shortcut tutorial commandset see keyboard shortcut tutorial deck only the currently selected deck layer can be focused. grid although text in the grid can be read, jaws does not recognize grids as tables for table reading mode. groupbox <groupbox> <caption label="<!--group label-->" /> <hbox> <button label="<!--button text-->" /> </hbox> </groupbox> iframe jaws 7.10 issues testing with jaws 7.10, use of an iframe elemen...
...i don't see a means of accessing a popup brought up via the popup attribute. using context="popupid" allows access via shift+f10 on windows and linux. ...
...a the popup attribute. using context="popupid" allows access via shift+f10 on windows and linux. ...
...l label="<!--status bar-->" flex="1"/> </statusbar> read using jaws with insert+page down statusbarpanel see statusbar tab see tabbox tabbox <tabbox> <tabs> <tab label="<!--tab text-->" /> </tabs> <tabpanels> <tabpanel orient="vertical"> ... </tabpanel> </tabpanels> focusing the tabbox will visually set focus to the selected tab, then you can select different tabs by using the left and right arrow keys. tabbrowser jaws 7.10 issues testing with jaws 7.10, use of a tabbrowser element causes many, unpredictable issues with xul inside of the iframe. okay to use html inside of tabbrowser. see browser element for more info. tabpanel see tabbox tabpanels see tabbox t...

colorpicker - Archive of obsolete content
t with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. color type: color string the currently selected color. this is modified when the user selects a color. you can assign a string of the form #rrggbb to this property to change the selected color. overview an onchange attribute is an event listener to the object for the event change. a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key...
... to this property to change the selected color. overview an onchange attribute is an event listener to the object for the event change. a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files...
...orpicker is displayed inside the window. if this is set to the text button, the colorpicker is displayed as a button. when the user clicks the button, a popup appears for the user to select a color. properties accessibletype type: integer a value indicating the type of accessibility object for the element. color type: color string the currently selected color. this is modified when the user selects a color. you can assign a string of the form #rrggbb to this property to change the selected color. disabled type: boolean gets and sets the value of the disabled attribute. open type: boolean returns true if the popup for a button-type colorpicker is open. set this property to true to open the popup or false to close t...
... ...

datepicker - Archive of obsolete content
ows the user to enter a date. three types are available, which can be specified using the type attribute. normal - a datepicker with three fields for entering the year, month and date. grid - a datepicker with a calendar grid for selecting a date. popup - a normal datepicker with three fields, but with an additional dropdown button to display a popup grid. there are several ways to set the selected day. in xul, the value attribute may be set to a value of the form yyyy-mm-dd to initialize the datepicker to a certain date. if not specified, the datepicker defaults to the current day. to change the selected date, the value property may be used to set a new value in the form yyyy-mm-dd. the datevalue property may be used to retrieve and set the date using a date object. in addition, the date,...
...alendar grid where one month is shown at a time. popup a datepicker with three entry fields but an additional dropdown button, which, when pressed, will display a popup calendar grid. value type: string the initial value of the datepicker in the form yyyy-mm-dd. properties date type: integer the currently selected date of the month from 1 to 31. set this property to change the selected date. dateleadingzero type: boolean a read only value indicating whether a leading zero should be displayed before the date when it is less than 10. datevalue type: date the date that is currently entered or selected in the datepicker as a date object. disabled ...
... a read only value indicating whether a leading zero should be displayed before the date when it is less than 10. datevalue type: date the date that is currently entered or selected in the datepicker as a date object. disabled type: boolean gets and sets the value of the disabled attribute. month type: integer the currently selected month from 0 to 11. set this property to change the selected month. monthleadingzero type: boolean a read only value indicating whether a leading zero should be displayed before the month when it is less than 10. open type: boolean for popup type datepickers, specifies whether the popup is open. set this property to open or close the popup. for non-...
...ther the popup is open. set this property to open or close the popup. for non-popup datepickers, this property is always false. readonly type: boolean if set to true, then the user cannot modify the value of the element. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string the currently selected date in the form yyyy-mm-dd. unlike the month property, months in this value range from 01 to 12. set this property to change the selected date. year type: integer the currently selected year from 1 to 9999. set this property to change the selected year. yearleadingzero type: boolean a read only value indicating whether a leading zero should be disp...

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. ...
... a button but it is rendered on a menu. more information is available in the xul tutorial. ...
...bel type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. 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. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the element. the tab 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 th...
...attribute. labelelement type: label element the label element associated with the control. this is set when a label has a control attribute pointing to this element. this property will be null when no label is associated with the control. parentcontainer type: menu element read only property that returns the containing menu element, or null if there isn't a containing menu. selected type: boolean this property's value is true if this element is selected, or false if it is not. this property is read only. this property is available for menuitem and menuseparator elements in firefox 3. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. fo...

menuseparator - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] used to create a separator between menu items. typically drawn as a thin line. more information is available in the xul tutorial. ...
...rties | methods | related ] used to create a separator between menu items. typically drawn as a thin line. more information is available in the xul tutorial. attributes acceltext, accesskey, allowevents, command, crop, disabled, image, label, selected, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value examples <menu label="menu"> <menupopup> <menuitem label="item1"/> <menuseparator/> <menuitem label="item2"/> <menuitem label="item3"/> </menupopup> </menu> attributes acceltext type: string text that appears beside the menu label to indicate the shortcut key (accelerator key) to use to invoke the command. if this value is set,...
...lement. 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 appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the element. the tab 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 t...
...ribute. labelelement type: label element the label element associated with the control. this is set when a label has a control attribute pointing to this element. this property will be null when no label is associated with the control. parentcontainer type: menu element read only property that returns the containing menu element, or null if there isn't a containing menu. selected type: boolean this property's value is true if this element is selected, or false if it is not. this property is read only. this property is available for menuitem and menuseparator elements in firefox 3. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. ...

prefpane - Archive of obsolete content
specified directly as children of the prefpane element, or the src attribute may be used to put a pane in a separate file. in this latter case, the separate file should use an overlay tag as its root tag since it will be loaded as an overlay to the main preferences window. more information is available in the preferences system article. ...
...ed to put a pane in a separate file. in this latter case, the separate file should use an overlay tag as its root tag since it will be loaded as an overlay to the main preferences window. more information is available in the preferences system article. attributes helpuri, image, label, onpaneload, selected, src properties image, label, preferenceelements, preferences, selected, src examples methods preferenceforelement <prefpane id="panegeneral" label="general" src="chrome://path/to/paneoverlay.xul"/> or <prefpane id="panegeneral" label="general" onpaneload="ongeneralpaneload(event);"> <preferences> <preference id="pref_one" name="extensions.myextension.one" type="bool"/> ... more preferences ... </preferences> <checkbox label="number on...
... type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. onpaneload type: script code code defined here is called when the pane has been loaded, much like the load event for a window. selected type: boolean this attribute will be set to true for the currently selected prefpane. to change the selected pane, use the prefwindow's showpane method. src type: uri the uri of the overlay contents of preference pane. if this is not specified, the contents of the prefpane element is used. properties contentheight (readonly) the height (in...
...l type: string gets and sets the value of the label attribute. loaded indicates whether the pane is fully loaded. preferenceelements type: dom nodelist holds a list of the ui elements in the pane that are attached to preferences. preferences type: dom nodelist holds a list of the preference elements in the pane. selected type: boolean this property's value is true if this element is selected, or false if it is not. this property is read only. this property is available for menuitem and menuseparator elements in firefox 3. src type: url gets and sets the value of the src attribute. methods domelement getpreferenceelement(in domelement startelement) preferenceforeleme...

richlistitem - Archive of obsolete content
if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. ...
...if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. ...
...xcept for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. searchlabel type: string text used for 'find-as-you-type' (fayt) searching. in situations where the search text is ambiguous or missing, searchlabel can be used to give context to fayt. if searchlabel is not present, fayt falls back to use the label property. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the element. the tab 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 t...
... the control attribute. disabled type: boolean gets and sets the value of the disabled attribute. label type: string gets the concatentation of text from any child label elements. does not support setting label values. use the child elements directly to set label text. searchlabel type: string gets and sets the value of the searchlabel attribute. selected type: boolean this property's value is true if this element is selected, or false if it is not. this property is read only. this property is available for menuitem and menuseparator elements in firefox 3. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. ...

tabbrowser - Archive of obsolete content
ions. ...
...tes autocompleteenabled, autocompletepopup, autoscroll, contentcontextmenu, contenttooltip, handlectrlpageupdown, onbookmarkgroup, onnewtab, tabmodalpromptshowing properties browsers, cangoback, cangoforward, contentdocument, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, securityui, selectedbrowser, selectedtab, sessionhistory, tabcontainer, tabs, visibletabs, webbrowserfind, webnavigation, webprogress methods addprogresslistener, addtab, addtabsprogresslistener,appendgroup, getbrowseratindex, getbrowserindexfordocument, getbrowserfordocument, getbrowserfortab, geticon, getnotificationbox, gettabforbrowser, gettabmodalpromptbox, goback, gobackgroup, goforward, goforwardgroup, gohome, gotoindex, loa...
...he value of the user's home page setting. markupdocumentviewer type: nsimarkupdocumentviewer this read-only property contains the nsimarkupdocumentviewer which is responsible for drawing the document. securityui type: nsisecurebrowserui the read-only property holds an object which may be used to determine the security level of the loaded document. selectedbrowser type: browser element this read-only property returns the currently displayed browser element. selectedtab type: tab element a reference to the currently selected tab, which will always be one of the tab elements in the tabs element. assign a value to this property to modify the currently selected tab. sessionhistory type: nsishistory this read-only property ...
...the rest of the parameters are optional. this method works the same as addtab except for the loadinbackground parameter which allows you to choose whether to open the new tab in foreground or background. there's also no owner parameter as the owner tab is specified automatically. parameters inbackground if true the tab will be loaded in the background, if false the tab will be the newly selected tab. and if null or not specified, this parameter will default to the browser.tabs.loadinbackground preference. firefox 3.6 note the second form of this method was added in firefox 3.6; it adds the relatedtocurrent parameter, and allows the parameters to be specified by name, in any order. loadtabs( uris, loadinbackground, replace ) loadtabs( uris, params ) return type: no ret...

Scratchpad - Archive of obsolete content
on: the "[docs]" link takes you to the mdn documentation for the symbol. executing once you've written your code, select the code you want to run. if you don't select anything, all the code in the window will be run. then choose the way you want the code to run using the buttons along the top, using the execute menu, or using the context menu. the code is executed in the scope of the currently selected tab. any variables you declare outside of a function will be added to the global object for that tab. there are four execution options available. run when you choose the run option, the selected code is executed. this is what you'd use to execute a function or other code that manipulates the content of your page without needing to see the result. inspect the inspect option executes the code...
...nt of your page without needing to see the result. inspect the inspect option executes the code just like the run option; however, after the code returns, an object inspector is opened to let you examine the returned value. for example, if you enter the code: window then choose inspect, the object inspector is shown that looks something like this: display the display option executes the selected code, then inserts the result directly into your scratchpad editor window as a comment, so you can use it as a repl. reload and run the reload and run option is only available in the execute menu. it first reloads the page, then executes the code when the page's "load" event fires. this is useful for running the code in a pristine environment. running scratchpad in the browser context you can...
...istine environment. running scratchpad in the browser context you can run scratchpad in the context of the browser as a whole rather than a specific web page. this is useful if you are working on firefox itself or developing add-ons. to do this check "enable chrome and add-on debugging" in the developer tool settings. once you've done this, the environment menu has a browser option; once that's selected, your scope is the entire browser rather than just the page content, as you will see from examining some globals: window /* [object chromewindow] */ gbrowser /* [object xulelement] */ the scratchpad execution context is set to browser when a snippet file has // -sp-context: browser on the first line. keyboard shortcuts command windows macos linux open the scratch...
...space source editor shortcuts this table lists the default shortcuts for the source editor. in the editor preferences section of the developer tools settings, you can choose to use vim, emacs, or sublime text key bindings instead. to select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to that setting. if you do this, the selected bindings will be used for all the developer tools that use the source editor. you need to reopen the editor for the change to take effect. from firefox 33 onwards, the key binding preference is exposed in the editor preferences section of the developer tools settings, and you can set it there instead of about:config. command windows macos linux go to line ctrl + j,...

Mobile accessibility - Learn web development
to on the device. the former provides global options relating to the device as a whole, and the latter provides options relating just to the current app/screen you are in. to get to these menus: access the global menu by quickly swiping down, and then right. access the local menu by quickly swiping up, and then right. swipe left and right to cycle between the different options. once you've selected the option you want, double-click to choose that option. for details on all the options available under the global and local context menus, see use global and local context menus. browsing web pages you can use the local context menu while in a web browser to find options to navigate web pages using just the headings, form controls, or links, or navigate line by line, etc. for example, with ...
... select accessibility > voiceover. press the voiceover slider to enable it (you'll also see a number of other options related to voiceover on this page). note: some older ios devices have the voiceover menu at settings app > general > accessibility > voiceover. once voiceover is enabled, ios's basic control gestures will be a bit different: a single tap will cause the item you tap on to be selected; your device will speak the item you've tapped on. you can also navigate the items on the screen by swiping left and right to move between them, or by sliding your finger around on the screen to move between different items (when you find the item you want, you can remove your finger to select it). to activate the selected item (e.g., open a selected app), double-tap anywhere on the screen. sw...
...nd on the screen like you are turning a dial. each option will be read aloud as you twist further around. you can go back and forth to cycle through the options. once you've found the option you want: release your fingers to select it. if it is an option you can iterate the value of (such as volume or speaking rate), you can do a swipe up or down to increase or decrease the value of the selected item. the options available under the rotor are context-sensitive — they will differ depending on what app or view you are in (see below for an example). browsing web pages let's have a go at web browsing with voiceover: open your web browser. activate the url bar. enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. to enter the text of the ur...
..., and then double-tapping. for each character, hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to select it. double-tap to type it. once you've finished, find the enter key and press it. swipe left and right to move between items on the page. you can double-tap an item to select it (e.g., follow a link). by default, the selected rotor option will be speaking rate; you can currently swipe up and down to increase or decrease the speaking rate. now turn two fingers around the screen like a dial to show the rotor and move between its options. here are a few examples of the options available: speaking rate: change the speaking rate. containers: move between different semantic containers on the page. headings: mov...

What are browser developer tools? - Learn web development
s you to instantly modify the html and css and see the results of your changes reflected live in the browser viewport. if you don't see the inspector, tap/click the inspector tab. in internet explorer, tap/click dom explorer, or press ctrl + 1. in microsoft edge, or opera, tap/click elements. in safari, the controls are not so clearly presented, but you should see the html if you haven't selected something else to appear in the window. press the style button to see the css. exploring the dom inspector for a start, right-click (ctrl-click) an html element in the dom inspector and look at the context menu. the available menu options vary among browsers, but the important ones are mostly the same: delete node (sometimes delete element). deletes the current element. edit as html (som...
...nes are mostly the same: delete node (sometimes delete element). deletes the current element. edit as html (sometimes add attribute/edit text). lets you change the html and see the results on the fly. very useful for debugging and testing. :hover/:active/:focus. forces element states to be toggled on, so you can see what their styling would look like. copy/copy as html. copy the currently selected html. some browsers also have copy css path and copy xpath available, to allow you to copy the css selector or xpath expression that would select the current html element. try editing some of your dom now. double-click an element, or right-click it and choose edit as html from the context menu. you can make any changes you'd like, but you cannot save your changes. exploring the css editor by...
...o allow you to copy the css selector or xpath expression that would select the current html element. try editing some of your dom now. double-click an element, or right-click it and choose edit as html from the context menu. you can make any changes you'd like, but you cannot save your changes. exploring the css editor by default, the css editor displays the css rules applied to the currently selected element: these features are especially handy: the rules applied to the current element are shown in order of most-to-least-specific. click the checkboxes next to each declaration to see what would happen if you removed the declaration. click the little arrow next to each shorthand property to show the property's longhand equivalents. click a property name or value to bring up a text box,...
... rule causes the dev tools to jump to show it in its own view, where it can generally be edited and saved. you can also click the closing curly brace of any rule to bring up a text box on a new line, where you can write a completely new declaration for your page. you'll notice a number of clickable tabs at the top of the css viewer: computed: this shows the computed styles for the currently selected element (the final, normalized values that the browser applies). layout: in firefox, this area includes two sections: box model: represents visually the current element's box model, so you can see at a glance what padding, border and margin is applied to it, and how big its content is. grid: if the page you are inspecting uses css grid, this section allows you to view the grid details. ...

Other form controls - Learn web development
values the user can select between. note: you can find examples of all the drop-down box types on github at drop-down-content.html (see it live also). select box a simple select box is created with a <select> element with one or more <option> elements as its children, each of which specifies one of its possible values. <select id="simple" name="simple"> <option>banana</option> <option selected>cherry</option> <option>lemon</option> </select> if required, the default value for the select box can be set using the selected attribute on the desired <option> element — this option is then preselected when the page loads. the <option> elements can be nested inside <optgroup> elements to create visually associated groups of values: <select id="groups" name="groups"> <optgroup labe...
... if required, the default value for the select box can be set using the selected attribute on the desired <option> element — this option is then preselected when the page loads. the <option> elements can be nested inside <optgroup> elements to create visually associated groups of values: <select id="groups" name="groups"> <optgroup label="fruits"> <option>banana</option> <option selected>cherry</option> <option>lemon</option> </optgroup> <optgroup label="vegetables"> <option>carrot</option> <option>eggplant</option> <option>potato</option> </optgroup> </select> on the <optgroup> element, the value of the label attribute is displayed before the values of the nested options. the browser usually sets them visually apart from the options (i.e. by being bolde...
...ment, the value of the label attribute is displayed before the values of the nested options. the browser usually sets them visually apart from the options (i.e. by being bolded and at a different nesting level) so they are less likely to be confused for actual options. if an <option> element has an explicit value attribute set on it, that value is sent when the form is submitted with that option selected. if the value attribute is omitted, as with the examples above, the content of the <option> element is used as the value. so value attributes are not needed, but you might find a reason to want to send a shortened or different value to the server than what is visually shown in the select box. for example: <select id="simple" name="simple"> <option value="banana">big, beautiful yellow banana</...
...ly lets the user select a single value. by adding the multiple attribute to the <select> element, you can allow users to select several values, by using the default mechanism provided by the operating system (e.g. holding down cmd/ctrl and clicking multiple values on desktop). ...

Firefox UI considerations for web developers
umber of rows of icons serving as quick links to sites the user commonly visits, or that the user has chosen to pin to the top sites list in order to have quick 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 s...
...ist 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. otherwise, bitmapped icons which are at least 96 pixels wide are considered. if one is found to have a width of exactly 96 pixels, it is used. otherwise, the smallest image larger than 96 pixels wide is selected. if no high-resolution icon is found, a screenshot is taken of the site; this screenshot is then scaled and cropped to fit in the space allotted to the icon. if the site also has a...
...e considered. if one is found to have a width of exactly 96 pixels, it is used. otherwise, the smallest image larger than 96 pixels wide is selected. if no high-resolution icon is found, a screenshot is taken of the site; this screenshot is then scaled and cropped to fit in the space allotted to the icon. if the site also has a favicon, it may be overlaid in the corner of the image. the selected image is then presented within the top sites list. rich icons the high resolution icons—also known as rich icons—are specified by setting the rel attribute to one of: apple-touch-icon apple-touch-icon-precomposed fluid-icon the size of each icon is taken from the size attribute specified on the <link>, if it's provided. apple-touch-icon and apple-touch-icon-precomposed icons with no ...
...pecified by setting the rel attribute to one of: apple-touch-icon apple-touch-icon-precomposed fluid-icon the size of each icon is taken from the size attribute specified on the <link>, if it's provided. apple-touch-icon and apple-touch-icon-precomposed icons with no size attribute are assumed to be the standard classic iphone size of 57x57 pixels. the icon closest in size to 96 pixels is selected. firefox does its best to avoid having to scale the images, which can result in fuzzy or distorted images, especially at smaller sizes. providing a top sites ready icon the simple rule is to provide an icon which is at least 96x96 pixels in size, using a <link> element whose rel attribute is a reference to a file containing an icon of a supported type. <link rel="apple-touch-icon" sizes="128x1...

nsICompositionStringSynthesizer
sor instead of this. every instance is associated with a dom window at created by nsidomwindowutils.createcompositionstringsynthesizer(). to create an instance for this: var domwindowutils = window.windowutils; var compositionstringsynthesizer = domwindowutils.createcompositionstringsynthesizer(); for example, when you create a composition whose composing string is "foo-bar-buzz" and "bar" is selected to convert, then, first, you need to start composition: domwindowutils.sendcompositionevent("compositionstart", "", ""); next, dispatch composition string with crause information and caret information (optional): // set new composition string with .setstring(). compositionstringsynthesizer.setstring("foo-bar-buzz"); // set clause information with .appendclause(). compositionstringsynthesizer.a...
...information and caret information (optional): // set new composition string with .setstring(). compositionstringsynthesizer.setstring("foo-bar-buzz"); // set clause information with .appendclause(). compositionstringsynthesizer.appendclause("foo-".length, compositionstringsynthesizer.attr_convertedtext); compositionstringsynthesizer.appendclause("bar".length, compositionstringsynthesizer.attr_selectedconvertedtext); compositionstringsynthesizer.appendclause("-buzz".length, compositionstringsynthesizer.attr_convertedtext); // set caret position in the composition string. (optional) compositionstringsynthesizer.setcaret("foo-bar".length, 0); // dispatch dom events to modify the focused editor compositionstringsynthesizer.dispatchevent(); when you modify the composing string, you don't need to ...
... instance anymore. the composing string information is cleared by a call of .dispatchevent(). ...
...ength, in unsigned long aattribute); boolean dispatchevent(); void setcaret(in unsigned long aoffset, in unsigned long alength); void setstring(in astring astring); constants constant value description attr_raw_input 0x02 a clause attribute. this means that the clause is not converted. i.e., raw text of user input. attr_selectedrawtext 0x03 a clause attribute but this is typically not used. this means that the clause is not converted but selected to convert or modify. attr_convertedtext 0x04 a clause attribute. this means that the clause is already converted. attr_selectedconvertedtext 0x05 a clause attribute. this means that the clause is already converted and is selected to convert. ...

nsIEditorMailSupport
tnewlines); void stripcites(); methods getembeddedobjects() get a list of img and object tags in the current document. nsisupportsarray getembeddedobjects(); parameters none. return value an nsisupportsarray containing the img and object tags of the current document. insertascitedquotation() insert a string as quoted text (whose representation is dependent on the editor type), replacing the selected text (if any), including, if possible, a "cite" attribute. nsidomnode insertascitedquotation( in astring aquotedtext, in astring acitation, in boolean ainserthtml ); parameters aquotedtext the actual text to be quoted. acitation the "mid" url of the source message. ainserthtml insert as html? (vs plaintext) return value the nsidomnode which was inserted. insertasquotation() insert a stri...
...ation( in astring aquotedtext, in astring acitation, in boolean ainserthtml ); parameters aquotedtext the actual text to be quoted. acitation the "mid" url of the source message. ainserthtml insert as html? (vs plaintext) return value the nsidomnode which was inserted. insertasquotation() insert a string as quoted text (whose representation is dependent on the editor type), replacing the selected text (if any). nsidomnode insertasquotation( in astring aquotedtext ); parameters aquotedtext the actual text to be quoted. return value the nsidomnode which was inserted. inserttextwithquotations() inserts a plain text string at the current location, with special processing for lines beginning with ">", which will be treated as mail quotes and inserted as plain text quoted blocks. if the se...
...s plain text quoted blocks. if the selection is not collapsed, the selection is deleted and the insertion takes place at the resulting collapsed selection. void inserttextwithquotations( in domstring astringtoinsert ); parameters astringtoinsert the string to be inserted pasteascitedquotation() paste a string as quoted text, whose representation is dependent on the editor type, replacing the selected text (if any) void pasteascitedquotation( in astring acitation, in long aselectiontype ); parameters acitation the "mid" url of the source message. aselectiontype text or html? pasteasquotation() paste the text in the os clipboard at the cursor position, as a quotation (whose representation is dependent on the editor type), replacing the selected text (if any). void pasteasquotation( in ...
...ntype ); parameters acitation the "mid" url of the source message. aselectiontype text or html? pasteasquotation() paste the text in the os clipboard at the cursor position, as a quotation (whose representation is dependent on the editor type), replacing the selected text (if any). void pasteasquotation( in long aselectiontype ); parameters aselectiontype text or html? rewrap() rewrap the selected part of the document, re-quoting if necessary. void rewrap( in boolean arespectnewlines ); parameters arespectnewlines try to maintain newlines in the original? stripcites() strip any citations in the selected part of the document. void stripcites(); parameters none. ...

Using popup notifications
vided in a drop-down menu accessed through the notification's button. creating a popup notification popup notifications can be created using the popupnotifications.jsm javascript code module. this code module is imported by the browser, so you don't need to do it explicitly yourself. ...
... style the icon, like this: .popup-notification-icon[popupid="sample-popup"] { list-style-image: url("chrome://popupnotifications/skin/mozlogo.png"); } with this css in place, the result is the look we want: adding secondary options to provide options in the drop-down menu, add an array of notification actions to the call to the show() method, like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", "this is a sample popup notification.", null, /* anchor id */ { label: "do something", accesskey: "d", callback: function() { alert("doing something awesome!"); } }, [ { label: "first secondary option", accesskey: "1", callback: function...
...e popup notification.", null, /* anchor id */ { label: "do something", accesskey: "d", callback: function() { alert("doing something awesome!"); } }, [ { label: "first secondary option", accesskey: "1", callback: function() { alert("first secondary option selected."); } }, { label: "second secondary option", accesskey: "2", callback: function() { alert("second secondary option selected."); } } ] ); when this notification is presented, and the user clicks on the menu button in the panel, the display looks like this: when the user choo...
...isappear after some amount of time, by calling notification.remove() as shown below. ...

Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
in the scratchpad enter the following code in the scratchpad: // this simply defines the 'debugger' constructor in this // scratchpad; it doesn't actually start debugging anything. components.utils.import('resource://gre/modules/jsdebugger.jsm'); adddebuggertoglobal(window); (function () { // the debugger we'll use to observe a tab's allocation. ...
... dbg.adddebuggee(w.wrappedjsobject); // enable allocation tracking in dbg's debuggees. ...
...make sure the current browser tab is displaying this page. <div onclick="dodivsandspans()"> click here to make the ...
... } console.log(indent + totals.get(site) + ': ' + name + place); for (let [child, grandchildren] of children) walk(child, grandchildren, indent + ' '); } walk(null, rootchildren, ''); } })(); in the scratchpad, ensure that no text is selected, and press the "run" button. (if you get an error complaining that components.utils is not defined, be sure you've selected browser from the scratchpad's environment menu, as described in step 2.) save the following html text to a file, and visit the file in your browser. make sure the current browser tab is displaying this page. <div onclick="dodivsandspans()"> click here to make the page do some allocations. </div> <script> function makefactory(type) { return function factory(content) { var e...

UI Tour - Firefox Developer Tools
ons of the page inspector's user interface. it covers the three top-level components of the inspector's ui: the "select element" button the html pane the css pane this guide is intentionally kept as short as possible. it links to various how to guides for the details of how to work with the inspector. select element button the inspector gives you detailed information about the currently selected element. the select element button is one way you can select an element for inspection: note that it's actually part of the main toolbox toolbar, so it's immediately accessible from any tool, not just the inspector. to learn how to select an element, see the guide to selecting an element. html pane the inspector is split into two or three sections, depending on your settings. you can toggle...
...e (available from firefox 62 onwards) which moves the css rules view into a separate pane in the center of the inspector. the following image shows 3-pane mode: as you can see, the css pane has moved into the center of the inspector. to learn more about the structure of the html pane, see the guide to examining and editing html. rules view the rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific. see above. see examine and edit css for more details. layout view the layout view displays the box model of the page. if the page includes any sections using either the flexbox display model or css grids, this view shows the flexbox or grid settings used on the page. to learn more about the layout view, see examine and edit the box mo...
...del. note that before firefox 50, the box model view did not appear in the "computed view" tab, but had its own tab. to learn more about the css declarations listed in this view, see examine computed css. changes view when you are editing in the rules view, you can see the changes you have made in the changes view. computed view the computed view shows you the complete computed css for the selected element (the computed values are the same as what getcomputedstyle would return.): compatibility view starting with firefox developer edition version 77, the compatibility view shows css compability issues, if any, for properties applied to the selected element, and for the current page as a whole. it shows icons for the browsers that do support the properties, and notes properties that are e...
...gs at the bottom of the panel. untick the checkbox for any browser you are not interested in. as new browser versions are released, the version numbers in this list will be updated. fonts view the fonts view shows all the fonts in the page along with editable samples. see view fonts for more details. animations view the animations view gives you details of any animations applied to the selected element, and a controller to pause them: see work with animations for more details. ...

Responsive Design Mode - Firefox Developer Tools
ess ctrl + shift + m (or cmd + opt + m on macos). controlling responsive design mode with responsive design mode enabled, the content area for web pages is set to the screen size for a mobile device. initially, it's set to 320 x 480 pixels. note: the device you select when in responsive design mode and the orientation (portrait or landscape) is saved between sessions. information for the selected device is centered over the display. from left to right, the display includes: name of the selected device - a drop-down list that includes whatever devices you have selected from the device settings screen. screen size - you can edit the width and height values to change the device size by editing a number directly or using the up and down keys to increase or decrease the value by 1 pixels o...
...omatic, and informed about how you can make them automatic. for example: developer toolbox with rdm you can show or hide the developer tools toolbox independently of toggling responsive design mode itself: while responsive design mode is enabled, you can continue browsing as you normally would in the resized content area. ...
...ools toolbox independently of toggling responsive design mode itself: while responsive design mode is enabled, you can continue browsing as you normally would in the resized content area. device selection just above the viewport there is a label "no device selected"; click this to see a list of device names. select a device, and responsive design mode sets the following properties to match the selected device: screen size device pixel ratio (the ratio of device physical pixels to device-independent pixels) touch event simulation additionally, firefox sets the user-agent http request header to identify itself as the default browser on the selected device. for example, if you've selected an iphone, then firefox identifies itself as safari. the navigator.useragent property is set to the sam...
...at the end of the drop-down, there is an item labeled edit list. select this to see a panel containing all the choices, which enables you to check the devices you want to see in the drop-down. ...

Tips - Firefox Developer Tools
onsole command: screenshot <filename.png> --fullpage. settings: choose between a light and a dark theme for the developer tools. change the keyboard bindings to vim, emacs or sublime text if you're used to different shortcuts. check or uncheck the different tools to enable or disable them. ...
...gs: choose between a light and a dark theme for the developer tools. change the keyboard bindings to vim, emacs or sublime text if you're used to different shortcuts. check or uncheck the different tools to enable or disable them. (there are more than the default tools!) page inspector in the markup view: press h with a node selected to hide/show it. press backspace or del with a node selected to delete it. alt + click on a node to expand or collapse it and all its descendants. click on the last breadcrumb button to scroll the selection into view in the inspector. click the "ev" icon besides a node to see all event listeners attached to it. press s with a node selected to see it in the page (same as right-click a node and click "scroll into view"). right-click a node and click "us...
...y. click on the filter icon () next to an overridden property to find which other property overrides it. right-click on a name, value, or rule to copy anything from the name, the value, the declaration or the whole rule to your clipboard. web console in all panels: esc opens the split console; useful when debugging, or inspecting nodes in the command line: $0 references the currently selected node. $() is a shortcut to document.queryselector(). $$() returns an array with the results from document.queryselectorall(). copy copies anything as a string. right-click a node in the inspector and click "use in console" to create a tempn variable for it. cd switches the javascript evaluation context to a different iframe in the page. console.table() displays tabular data as table. help ...
... rule to apply it in responsive design mode. click the import button () to import a style sheet or the create button () to create a new one. click the options button in the style sheet pane and click "show original sources" to toggle the display of css preprocessor files. network monitor click the request summary to compare performance of cache vs. no-cache page loading. when a request is selected click "edit and resend" to modify its headers and send it again. check "enable persistent logs" in the settings to keep requests from before even after navigation. hover the "js" icon within the "cause" column to see the javascript stack trace, which caused the request. check "disable http cache (when toolbox is open)" in the settings to disable the network cache while debugging network issues...

Document - Web APIs
page is considered hidden or not. document.imagesread only returns a list of the images in the current document. document.implementationread only returns the dom implementation associated with the current document. document.laststylesheetsetread only returns the name of the style sheet set that was last enabled. has the value null until the style sheet is changed by setting the value of selectedstylesheetset. document.linksread only returns a list of all the hyperlinks in the document. document.mozsyntheticdocument returns a boolean that is true only if this document is synthetic, such as a standalone image, video, audio file, or the like. document.pluginsread only returns a list of the available plugins. document.featurepolicy read only returns the featurepolicy interface ...
...h provides a simple api for introspecting the feature policies applied to a specific document. document.preferredstylesheetsetread only returns the preferred style sheet set as specified by the page author. document.scriptsread only returns all the <script> elements on the document. document.scrollingelementread only returns a reference to the element that scrolls the document. document.selectedstylesheetset returns which style sheet set is currently in use. document.stylesheetsetsread only returns a list of the style sheet sets available on the document. document.timelineread only returns timeline as a special instance of documenttimeline that is automatically created on page load. document.undomanager read only … document.visibilitystateread only returns a string denoti...
...be called when the select event is raised. globaleventhandlers.onselectstart is an eventhandler representing the code to be called when the selectionchange event is raised, i.e. when the user starts to make a new text selection on a web page. globaleventhandlers.onselectionchange is an eventhandler representing the code to be called when the selectionchange event is raised, i.e. when the text selected on a web page changes. globaleventhandlers.onshow is an eventhandler representing the code to be called when the show event is raised. globaleventhandlers.onsort is an eventhandler representing the code to be called when the sort event is raised. globaleventhandlers.onstalled is an eventhandler representing the code to be called when the stalled event is raised. globaleventhandlers.onsub...
...) writes a line of text in a document. methods included from documentorshadowroot the document interface includes the following methods defined on the documentorshadowroot mixin. note that this is currently only implemented by chrome; other browsers still implement them on the document interface. documentorshadowroot.getselection() returns a selection object representing the range of text selected by the user, or the current position of the caret. documentorshadowroot.elementfrompoint() returns the topmost element at the specified coordinates. documentorshadowroot.elementsfrompoint() returns an array of all elements at the specified coordinates. documentorshadowroot.caretpositionfrompoint() returns a caretposition object containing the dom node containing the caret, and caret's chara...

FileReader: error event - Web APIs
the error event is fired when the read failed due to an error (for example, because the file was not found or not readable). ...
...fired when the read failed due to an error (for example, because the file was not found or not readable). ...
...(for example, because the file was not found or not readable). ...
...terface progressevent event handler property filereader.onerror examples const fileinput = document.queryselector('input[type="file"]'); const reader = new filereader(); function handleselected(e) { const selectedfile = fileinput.files[0]; if (selectedfile) { reader.addeventlistener('error', () => { console.error(`error occurred reading file: ${selectedfile.name}`); }); reader.addeventlistener('load', () => { console.error(`file: ${selectedfile.name} read successfully`); }); reader.readasdataurl(selectedfile); } } fileinput.addeventlistener('change', handleselected); specifications specification status file api working draft ...

HTMLOptionElement - Web APIs
ill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloptionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmloptionelement.defaultselected is a boolean that contains the initial value of the selected html attribute, indicating whether the option is selected by default or not. htmloptionelement.disabled is a boolean representing the value of the disabled html attribute, which indicates that the option is unavailable to be selected. an option can also be disabled if it is a child of an <optgroup> element that is disabled. htmlop...
...ons it belongs to, in tree-order. if the option is not part of a list of options, like when it is part of the <datalist> element, the value is 0. htmloptionelement.label read only is a domstring that reflects the value of the label html attribute, which provides a label for the option. if this attribute isn't specifically set, reading it returns the element's text content. htmloptionelement.selected is a boolean that indicates whether the option is currently selected. htmloptionelement.text is a domstring that contains the text content of the element. htmloptionelement.value is a domstring that reflects the value of the value html attribute, if it exists; otherwise reflects value of the node.textcontent property. methods inherits methods from its parent, htmlelement. option() is ...
...e element. htmloptionelement.value is a domstring that reflects the value of the value html attribute, if it exists; otherwise reflects value of the node.textcontent property. methods inherits methods from its parent, htmlelement. option() is a constructor creating an htmloptionelement object. it has four values: the text to display, text, the value associated, value, the value of defaultselected, and the value of selected. the last three values are optional. specifications specification status comment html living standardthe definition of 'htmloptionelement' in that specification. living standard html5the definition of 'htmloptionelement' in that specification. recommendation a constructor, option(), has been added. the form property c...
...ition of 'htmloptionelement' in that specification. living standard html5the definition of 'htmloptionelement' in that specification. recommendation a constructor, option(), has been added. the form property can be the null value. document object model (dom) level 2 html specificationthe definition of 'htmloptionelement' in that specification. obsolete the selected property changed its meaning: it now indicates if the option is currently selected and no longer if it was initally selected. the defaultselected property is no longer read-only. document object model (dom) level 1 specificationthe definition of 'htmloptionelement' in that specification. obsolete initial definition ...

HTMLTextAreaElement - Web APIs
le text lines for the control. selectiondirection string: returns / sets the direction in which selection occurred. this is "forward" if selection was performed in the start-to-end direction of the current locale, or "backward" for the opposite direction. this can also be "none" if the direction is unknown. ...
.... selectiondirection string: returns / sets the direction in which selection occurred. this is "forward" if selection was performed in the start-to-end direction of the current locale, or "backward" for the opposite direction. this can also be "none" if the direction is unknown. selectionend unsigned long: returns / sets the index of the end of selected text. ...
...on being set, the control behaves as if setselectionrange() had been called with this as the first argument, and selectionend as the second argument. ...
...on being set, the control behaves as if setselectionrange() had been called with this as the first argument, and selectionend as the second argument. tabindex long: returns / sets the position of the element in the tabbing navigation order for the current document. ...

Key Values - Web APIs
editing keys keyboardevent.key value description virtual keycode windows mac linux android "backspace" the backspace key. this key is labeled delete on mac keyboards. vk_back (0x08) kvk_delete (0x33) gdk_key_backspace (0xff08) qt::key_backspace (0x01000003) keycode_del (67) "clear" the clear key. removes the currently selected input. vk_clear (0x0c) vk_oem_clear (0xfe) kvk_ansi_keypadclear (0x47) gdk_key_clear (0xff0b) qt::key_clear (0x0100000b) keycode_clear (28) "copy" the copy key (on certain extended keyboards). appcommand_copy gdk_key_copy (0x1008ff57) qt::key_copy (0x010000cf) "crsel" [3] the cursor select key, crsel. vk_crsel (0xf7) gdk_key_...
...el" when the crsel key is pressed. [4] internet explorer (tested on release 9 and 11) and firefox 36 and earlier generate the value "exsel" instead of "exsel" when the exsel key is pressed. ui keys keyboardevent.key value description virtual keycode windows mac linux android "accept" the accept, commit, or ok key or button. accepts the currently selected option or input method sequence conversion. vk_accept (0x1e) keycode_dpad_center (23) "again" the again key. redoes or repeats a previous action. gdk_key_redo (0xff66) "attn" [4] the attn (attention) key. vk_oem_attn (0xf0) gdk_key_3270_attn (0xfd0e) "cancel" [1] the cancel key. gdk_key_cancel (0xff69) ...
...ide (172) "guidenextday" if the guide is currently displayed, this button tells the guide to display the next day's content. vk_next_day "guidepreviousday" if the guide is currently displayed, this button tells the guide to display the previous day's content. vk_prev_day "info" toggles the display of information about the currently selected content, program, or media. vk_info qt::key_info (0x0100011b) keycode_info (165) "instantreplay" tellls the device to perform an instant replay (typically some form of jumping back a short amount of time then playing it again, possibly but not usually in slow motion). vk_instant_replay "link" opens content liniked to the current program, if avai...
...on). vk_instant_replay "link" opens content liniked to the current program, if available and possible. vk_link "listprogram" lists the current program. vk_list "livecontent" toggles a display listing currently available live content or programs. vk_live "lock" locks or unlocks the currently selected content or pgoram. vk_lock "mediaapps" presents a list of media applications, such as photo viewers, audio and video players, and games. [1] vk_apps "mediaaudiotrack" the audio track key. gdk_key_audiocycletrack (0x1008ff9b) qt::key_audiocycletrack (0x01000106) keycode_media_audio_track (222) "medialast" jumps bac...

PaymentResponse.shippingOption - Web APIs
this option is only present when the requestshipping option is set to true in the paymentoptions object passed to the paymentrequest constructor. syntax var shippingoption = paymentrequest.shippingoption; example in the example below, the paymentrequest.onshippingaoptionchange event is called. it calls updatedetails() to toggle the shipping method between "standard" and "express". // initialization of paymentrequest arguments are excerpted for brevity. ...
...promise(function(resolve, reject) { updatedetails(details, request.shippingoption, resolve, reject); })); }); payment.show().then(function(paymentresponse) { // processing of paymentresponse exerpted for the same of brevity. ...
..., reject); })); }); payment.show().then(function(paymentresponse) { // processing of paymentresponse exerpted for the same of brevity. ...
... bad happened", err.message); }); function updatedetails(details, shippingoption, resolve, reject) { var selectedshippingoption; var othershippingoption; if (shippingoption === 'standard') { selectedshippingoption = details.shippingoptions[0]; othershippingoption = details.shippingoptions[1]; details.total.amount.value = '55.00'; } else if (shippingoption === 'express') { selectedshippingoption = details.shippingoptions[1]; othershippingoption = details.shippingoptions[0]; details.total.amount.value = '67.00'; } else { reject('unknown shipping option \'' + shippingoption + '\''); return; } selectedshippingoption.selected = true; othershippingoption.selected = false; details.displayitems.splice(2, 1, selectedshippingoption); resolve(details); } ...

Selection - Web APIs
to obtain a selection object for examination or manipulation, call window.getselection(). a user may make a selection from left to right (in document order) or right to left (reverse of document order). the anchor is where the user began the selection and the focus is where the user ends the selection. if you make a selection with a desktop mouse, the anchor is placed where you pressed the mouse button, and the focus is placed where you released the mouse button. anchor and focus should not be confused with the start and end positions of a selection. ...
...selection.deletefromdocument() deletes the selection's content from the document. selection.empty() removes all ranges from the selection. this is an alias for removeallranges() — see selection.removeallranges() for more details. selection.extend() moves the focus of the selection to a specified point. selection.getrangeat() returns a range object representing one of the ranges currently selected. selection.modify() changes the current selection. selection.removerange() removes a range from the selection. selection.removeallranges() removes all ranges from the selection. selection.selectallchildren() adds all the children of the specified node to the selection. selection.setbaseandextent() sets the selection to be a range including all or parts of two specified dom nodes, and a...
...extent() sets the selection to be a range including all or parts of two specified dom nodes, and any content located between them. selection.setposition() collapses the current selection to a single point. this is an alias for collapse() — see selection.collapse() for more details. selection.tostring() returns a string currently being represented by the selection object, i.e. the currently selected text. notes string representation of a selection calling the selection.tostring() method returns the text contained within the selection, e.g.: var selobj = window.getselection(); window.alert(selobj); note that using a selection object as the argument to window.alert will call the object's tostring method. multiple ranges in a selection a selection object represents the ranges that the ...
...notes string representation of a selection calling the selection.tostring() method returns the text contained within the selection, e.g.: var selobj = window.getselection(); window.alert(selobj); note that using a selection object as the argument to window.alert will call the object's tostring method. multiple ranges in a selection a selection object represents the ranges that the user has selected. typically, it holds only one range, accessed as follows: var selobj = window.getselection(); var range = selobj.getrangeat(0); selobj is a selection object range is a range object as the selection api specification notes, the selection api was initially created by netscape and allowed multiple ranges (for instance, to allow the user to select a column from a <table>). however, browsers...

Using the Web Speech API - Web APIs
e create an event handler to start speaking the text entered into the text field. we are using an onsubmit handler on the form so that the action happens when enter/return is pressed. we first create a new speechsynthesisutterance() instance using its constructor — this is passed the text input's value as a parameter. next, we need to figure out which voice to use. we use the htmlselectelement selectedoptions property to return the currently selected <option> element. we then use this element's data-name attribute, finding the speechsynthesisvoice object whose name matches this attribute's value. we set the matching voice object to be the value of the speechsynthesisutterance.voice property. finally, we set the speechsynthesisutterance.pitch and speechsynthesisutterance.rate to the values of t...
...speechsynthesisutterance.rate to the values of the relevant range form elements. then, with all necessary preparations made, we start the utterance being spoken by invoking speechsynthesis.speak(), passing it the speechsynthesisutterance instance as a parameter. ...
... to the values of the relevant range form elements. then, with all necessary preparations made, we start the utterance being spoken by invoking speechsynthesis.speak(), passing it the speechsynthesisutterance instance as a parameter. ...
...erance being spoken by invoking speechsynthesis.speak(), passing it the speechsynthesisutterance instance as a parameter. inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); in the final part of the handler, we include an speechsynthesisutterance.onpause handler to demonstrate how speechsynthesisevent can be put to good use. when speechsynthesis.pause() is invoked, this returns a message reporting the character number and na...

Window.speechSynthesis - Web APIs
ecessary variables, we retrieve a list of the voices available using speechsynthesis.getvoices() and populate a select menu with them so the user can choose what voice they want. inside the inputform.onsubmit handler, we stop the form submitting with preventdefault(), create a new speechsynthesisutterance instance containing the text from the text <input>, set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the speechsynthesis.speak() method. var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); function populatevoicelist() { voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var opt...
... draft ...
... draft ...
... draft ...

ARIA live regions - Accessibility
be annoying, should receive this attribute. the screen reader will speak changes whenever the user is idle. for regions which are not important, or would be annoying because of rapid updates or other reasons, silence them with aria-live="off". dropdown box updates useful onscreen information a website specializing in providing information about planets provides a dropdown box. when a planet is selected from the dropdown, a region on the page is updated with information about the selected planet. html <fieldset> <legend>planet information</legend> <label for="planetsselect">planet:</label> <select id="planetsselect" aria-controls="planetinfo"> <option value="">select a planet&hellip;</option> <option value="mercury">mercury</option> <option value="venus">venus</option> <o...
...it is named after the roman d...
...net".' } }; function renderplanetinfo(planet) { const planettitle = document.queryselector('#planettitle'); const planetdescription = document.queryselector('#planetdescription'); if (planet in planets_info) { planettitle.textcontent = planets_info[planet].title; planetdescription.textcontent = planets_info[planet].description; } else { planettitle.textcontent = 'no planet selected'; planetdescription.textcontent = 'select a planet to view its description'; } } const renderplanetinfobutton = document.queryselector('#renderplanetinfobutton'); renderplanetinfobutton.addeventlistener('click', event => { const planetsselect = document.queryselector('#planetsselect'); const selectedplanet = planetsselect.options[planetsselect.selectedindex].value; renderplanetinfo...
...because the live region has aria-live="polite", the screen reader will wait until the user pauses before announcing the update. thus, moving down in the list and selecting another planet will not announce updates in the live region. updates in the live region will only be announced for the plan...

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
[important] get_accdescription: get a long description of 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:...
...(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_accdefaultaction: get a description or name of the default action for this component, such as "jump" for links. accselect: select the item associated with this iaccessible. [important] acclocation: get the x,y coordinates, and the height and width of this iaccessible node. [important] accnavigate: navigate to the first/last child, previous/next sibling, up, down, left or right from this ...
...ent_object_defactionchange event_object_acceleratorchange msaa states 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. ...
...ed highlight tracking simply reads any text that is currently highlighted, even if it resides in several places on the screen. it does not take into account the problems that commonly occur with this feature, such as speaking the wrong thing, speaking the right thing twice or speaking two different things. problems can easily happen merely by having two listboxes visible at the same time, because selected listbox items use the system highlight color, even when the listbox itself is not focused. other problems occur when a piece of static text which has the same color background, which will cause that text to be repeated each time the focus or highlight moves. at least one major screen reader has a feature to turn highlight tracking off, but that's only a global setting, and turning off highlight t...

:nth-child() - CSS: Cascading Style Sheets
irst element in a group of siblings. this is the same as the :first-child selector (and has the same specificity). p:nth-child(n+8):nth-child(-n+15) represents the eighth through the fifteenth <p> elements of a group of siblings. ...
...mong the child elements.</h3> <p>children 1, 3, 5, and 7 are selected.</p> <div class="first"> <span>span 1!</span> <span>span 2</span> <span>span 3!</span> <span>span 4</span> <span>span 5!</span> <span>span 6</span> <span>span 7!</span> </div> <br> <h3><code>span:nth-child(2n+1)</code>, with an <code>&lt;em&gt;</code> among the child elements.</h3> <p>children 1, 5, and 7 are selected.<br> 3 is used in the counting because it is a child, but it isn't selected because it isn't a <code>&lt;span&gt;</code>.</p> <div class="second"> <span>span!</span> <span>span</span> <em>this is an `em`.</em> <span>span</span> <span>span!</span> <span>span</span> <span>span!</span> <span>span</span> </div> <br> <h3><code>span:nth-of-type(2n+1)</code>, with an <code>&lt...
...the <code>&lt;em&gt;</code> is completely skipped over and ignored.</p> <div class="third"> <span>span!</span> <span>span</span> <em>this is an `em`.</em> <span>span!</span> <span>span</span>...
...the <code>&lt;em&gt;</code> is completely skipped over and ignored.</p> <div class="third"> <span>span!</span> <span>span</span> <em>this is an `em`.</em> <span>span!</span> <span>span</span> <span>span!</span> <span>span</span> <span...

Column combinator - CSS: Cascading Style Sheets
the column combinator (||) is placed between two css selectors. it matches only those elements matched by the second selector that belong to the column elements matched by the first. ...
... the column combinator (||) is placed between two css selectors. it matches only those elements matched by the second selector that belong to the column elements matched by the first. ...
...ween two css selectors. it matches only those elements matched by the second selector that belong to the column elements matched by the first. ...
... working draft initial definition. ...

CSS reference - CSS: Cascading Style Sheets
. basic selectors basic selectors are fundamental selectors; these are the most basic selectors that are frequently combined to create other, more complex selectors. universal selector *, ns|*, *|*, |* type selector elementname class selector .classname id selector #idname attribute selector [attr=value] grouping selectors selector list a, b specifies that both a and b elements are selected. ...
... [attr=value] grouping selectors selector list a, b specifies that both a and b elements are selected. this is a grouping method to select several matching elements. combinators combinators are selectors that establish a relationship between two or more simple selectors, such as "a is a child of b" or "a is adjacent to b." adjacent sibling combinator a + b specifies that the elements selected by both a and b have the same parent and that the element selected by b immediately follows the element selected by a horizontally. general sibling combinator a ~ b specifies that the elements selected by both a and b share the same parent and that the element selected by a comes before—but not necessarily immediately before—the element selected by b. child combinator a > b specifies that...
...d b have the same parent and that the element selected by b immediately follows the element selected by a horizontally. general sibling combinator a ~ b specifies that the elements selected by both a and b share the same parent and that the element selected by a comes before—but not necessarily immediately before—the element selected by b. child combinator a > b specifies that the element selected by b is the direct child of the element selected by a. descendant combinator a b specifies that the element selected by b is a descendant of the element selected by a, but is not necessarily a direct child. column combinator a || b specifies that the element selected by b is located within the table column specified by a. elements which span multiple columns are considered to be a member of...
... pseudo elements :: represents entities that are not included in html. see also: selectors in the selectors level 4 specification. ...

place-content - CSS: Cascading Style Sheets
<'justify-content'>? ...
...:</code><select id="writingmode"> <option value="horizontal-tb" selected>horizontal-tb</option> <option value="vertical-rl">vertical-rl</option> <option value="vertical-lr">vertical-lr</option> <option value="sideways-rl">sideways-rl</option> <option value="sideways-lr">sideways-lr</option> </select><code>;</code><br/> <code>direction:</code><select id="direction"> <option value="ltr" selected>ltr</option> <option value="rtl">rtl</option> </select><code>;</code><br/> <code>place-content:</code><select id="aligncontentalignment"> <option value="normal">normal</option> <option value="first baseline">first baseline</option> <option value="last baseline">last baseline</option> <option value="baseline">baseline</option> <option value="space-between">space-between</option> <opt...
...<code>place-content:</code><select id="aligncontentalignment"> <option value="normal">normal</option> <option value="first baseline">first baseline</option> <option value="last baseline">last baseline</option> <option value="baseline">baseline</option> <option value="space-between">space-between</option> <option value="space-around">space-around</option> <option value="space-evenly" selected>space-evenly</option> <option value="stretch">stretch</option> <option value="center">center</option> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="safe">safe</option> <option value="unsafe">unsafe</option> </select> <select id="justifycontentalignmen...
... <option value="safe">safe</option> <option value="unsafe">unsafe</option> </select> <select id="justifycontentalignment"> <option value="normal">normal</option> <option value="space-between">space-between</option> <option value="space-around">space-around</option> <option value="space-evenly">space-evenly</option> <option value="stretch">stretch</option> <option value="center" selected>center</option> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="left">left</option> <option value="right">right</option> <option value="safe">safe</option> <option value="unsafe">unsafe</option> </select><code>;</code> var update = function () { docum...

HTML attribute: multiple - HTML: Hypertext Markup Language
rol accepts one or more values. valid for the email and file input types and the <select>, the manner by which the user opts for multiple values depends on the form control. depending on the type, the form control may have a different appearance if the multiple attribute is set. for the file input type, the native messaging the browser provides differs. in firefox, the file input reads "no files selected" when the attribute is present and "no file selected" when not, when no files are selected. most browsers displaying a scrolling list box for a <select> control with the multiple attribute set versus a single line dropdown when the attribute is ommitted. the email input displays the same, but will match the :invalid pseudo-class if more than one comma-separated email address is included if the a...
...peg, .png, .svg, .gif" multiple> </p> <p> <label for="text">pick a text file to upload: </label> <input type="file" id="text" name="text" accept=".txt"> </p> <p> <input type="submit" value="submit"> </p> </form> note the difference in appearance between the example with multiple set and the other file input without. when the form is submitted,had we used method="get" each selected file's name would have been added to url parameters as?uploads=img1.jpg&uploads=img2.svg. however, since we are sumbitting multipart form data, we much use post. see the <form> element and sending form data for more information. select the multiple attribute on the <select> element represents a control for selecting zero or more options from the list of options. otherwise, the <select> element...
...he ctrl, command, or shift keys and then click multiple options to select/deselect them. keyboard users can select multiple contiguous items by focusing on the <select> element, selecting an item at the top or bottom of the range they want to select using the up and down cursor keys to go up and down the options. the selection of non-contiguous is not as well supported: items should be able to be selected and deselected by pressing space , but support varies between browsers. specifications specification status comment html living standardthe definition of 'multiple attribute' in that specification. living standard html5the definition of 'multiple attribute' in that specification. recommendation accessibility concerns provide instruction...
... ...

<input type="date"> - HTML: Hypertext Markup Language
tes you can use the min and max attributes to restrict the dates that can be chosen by the user. in the following example, we set a minimum date of 2017-04-01 and a maximum date of 2017-04-30: <form> <label for="party">choose your preferred party date: <input type="date" name="party" min="2017-04-01" max="2017-04-30"> </label> </form> the result is that only days in april 2017 can be selected — the month and year parts of the textbox will be uneditable, and dates outside april 2017 can't be selected in tte picker widget. note: you should be able to use the step attribute to vary the number of days jumped each time the date is incremented (e.g. to only make saturdays selectable). however, this does not seem to be in any implementation at the time of writing. controlling input siz...
...te" id="bday" name="bday"> <span class="validity"></span> </div> <p class="fallbacklabel">enter your birthday:</p> <div class="fallbackdatepicker"> <span> <label for="day">day:</label> <select id="day" name="day"> </select> </span> <span> <label for="month">month:</label> <select id="month" name="month"> <option selected>january</option> <option>february</option> <option>march</option> <option>april</option> <option>may</option> <option>june</option> <option>july</option> <option>august</option> <option>september</option> <option>october</option> <option>november</option> <option>december</option> ...
...ber</option> <option>november</option> <option>december</option> </select> </span> <span> <label for="year">year:</label> <select id="year" name="year"> </select> </span> </div> </form> the months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year (see the code comments below for detailed explanations of how these functions work.) span { padding-left: 5px; } input:invalid + span::after { content: '✖'; } input:valid + span::after { content: '✓'; } javascript the other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <input ...
...has already been set, set dayselect's value // to that day, to avoid the day jumping back to 1 when you // change the year if(previousday) { dayselect.value = previousday; // if the previous day was set to a high number, say 31, and then // you chose a month with less total days in it (e.g. ...

<input type="datetime-local"> - HTML: Hypertext Markup Language
the user. in the following example we are setting a minimum datetime of 2017-06-01t08:30 and a maximum datetime of 2017-06-30t16:30: <form> <label for="party">enter a date and time for your party booking:</label> <input id="party" type="datetime-local" name="partydate" min="2017-06-01t08:30" max="2017-06-30t16:30"> </form> the result here is that: only days in june 2017 can be selected — only the "days" part of the date value will be editable, and dates outside june can't be scrolled to in the datepicker widget. depending on what browser you are using, you might find that times outside the specified values might not be selectable in the time picker (e.g. edge), or invalid (see validation) but still available (e.g. chrome). note: you should be able to use the step attribut...
..."> <span class="validity"></span> </div> <p class="fallbacklabel">choose a date and time for your party:</p> <div class="fallbackdatetimepicker"> <div> <span> <label for="day">day:</label> <select id="day" name="day"> </select> </span> <span> <label for="month">month:</label> <select id="month" name="month"> <option selected>january</option> <option>february</option> <option>march</option> <option>april</option> <option>may</option> <option>june</option> <option>july</option> <option>august</option> <option>september</option> <option>october</option> <option>november</option> <option>december</option> ...
... div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { pos...
...has already been set, set dayselect's value // to that day, to avoid the day jumping back to 1 when you // change the year if(previousday) { dayselect.value = previousday; // if the previous day was set to a high number, say 31, and then // you chose a month with less total days in it (e.g. ...

<input type="range"> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. if the user's browser doesn't support type range, it will fall back and treat it as a text input. value a domstring containing the string representation of the selected numeric value; use valueasnumber to get the value as a number. events change and input supported common attributes autocomplete, list, max, min, and step idl attributes list, value, and valueasnumber methods stepdown() and stepup() validation there is no pattern validation available; however, the following forms of automatic validation are p...
...omething which can't be converted into a valid floating-point number, validation fails because the input is suffering from a bad input. the value won't be less than min. the default is 0. the value won't be greater than max. the default is 100. the value will be a multiple of step. the default is 1. value the value attribute contains a domstring which contains a string representation of the selected number. the value is never an empty string (""). the default value is halfway between the specified minimum and maximum—unless the maximum is actually less than the minimum, in which case the default is set to the value of the min attribute. the algorithm for determining the default value is: defaultvalue = (rangeelem.max < rangeelem.min) ? rangeelem.min : rangeelem.min + (range...
...h. 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 require that they enter a specific value. the range input type lets you ask the user for a value in cases where the user may not even care—or know—what the specific numeric value selected is. a few examples of situations in which range inputs are commonly used: audio controls such as volume and balance, or filter controls. color configuration controls such as color channels, transparency, brightness, etc. game configuration controls such as difficulty, visibility distance, world size, and so forth. password length for a password manager's generated passwords. as a rule, i...
...the value of step to 0.01: <input type="range" min="5" max="10" step="0.01"> if you want to accept any value regardless of how many decimal places it extends to, you can specify a value of any for the step attribute: <input type="range" min="0" max="3.14" step="any"> this example lets the user select any value between 0 and π without any restriction on the fractional part of the value selected. adding hash marks and labels the html specification gives browsers some flexibility on how to present the range control. nowhere is this flexibility more apparent than in the area of hash marks and, to a lesser degree, labels. the specification describes how to add custom points to the range control using the list attribute and a <datalist> element, but does not have any requirements or even ...

Loops and iteration - JavaScript
s. (if the condition expression is omitted entirely, the condition is assumed to be true.) the statement executes. to execute multiple statements, use a block statement ({ ... }) to group those statements. if present, the update expression incrementexpression is executed. control returns to step 2. example in the example below, the function contains a for statement that counts the number of selected options in a scrolling list (a <select> element that allows multiple selections). the for statement declares the variable i and initializes it to 0. it checks that i is less than the number of options in the <select> element, performs the succeeding if statement, and increments i by after each pass through the loop. <form name="selectform"> <p> <label for="musictypes">choose some music typ...
... i and initializes it to 0. it checks that i is less than the number of options in the <select> element, performs the succeeding if statement, and increments i by after each pass through the loop. ...
...tializes it to 0. it checks that i is less than the number of options in the <select> element, performs the succeeding if statement, and increments i by after each pass through the loop. ...
...oose some music types, then click the button below:</label> <select id="musictypes" name="musictypes" multiple="multiple"> <option selected="selected">r&b</option> <option>jazz</option> <option>blues</option> <option>new age</option> <option>classical</option> <option>opera</option> </select> </p> <p><input id="btn" type="button" value="how many are selected?" /></p> </form> <script> function howmany(selectobject) { let numberselected = 0; for (let i = 0; i < selectobject.options.length; i++) { if (selectobject.options[i].selected) { numberselected++; } } return numberselected; } let btn = document.getelementbyid('btn'); btn.addeventlistener('click', function() { alert('number of options selected: ' + howmany(document.select...

context-menu - Archive of obsolete content
xt first of all, you may not need to specify a context at all. when a top-level item does not specify a context, the page context applies. an item that is in a submenu is visible unless you specify a context. the page context occurs when the user invokes the context menu on a non-interactive portion of the page. try right-clicking a blank spot in this page, or on text. make sure that no text is selected. the menu that appears should contain the items "back", "forward", "reload", "stop", and so on. this is the page context. the page context is appropriate when your item acts on the page as a whole. it does not occur when the user invokes the context menu on a link, image, or other non-text node, or while a selection exists. declarative contexts you can specify some simple, declarative contexts...
...item = require("sdk/context-menu").item({ label: "click me: " + numclicks, contentscript: 'self.on("click", self.postmessage);', onmessage: function () { numclicks++; this.label = "click me: " + numclicks; // setting myitem.label is equivalent. } }); sometimes you might want to update the label based on the context. for instance, if your item performs a search with the user's selected text, it would be nice to display the text in the item to provide feedback to the user. in these cases you can use the second method. recall that your content scripts can listen for the "context" event and if your listeners return true, the items associated with the content scripts are shown in the menu. in addition to returning true, your "context" listeners can also return strings. when a "cont...
... ' text = text.substr(0, 20) + "...";' + ' return "search google for " + text;' + '});' }); the "context" listener gets the window's current selection, truncating it if it's too long, and includes it in the returned string. when the item is shown, its label will be "search google for text", where text is the truncated selection. you can also get the selected text using the high level selection api. var selection = require("sdk/selection"); and within the contentscript, reference the selected text as selection.text private windows if your add-on has not opted into private browsing, then any menus or menu items that you add will not appear in context menus belonging to private browser windows. to learn more about private windows, how to opt into p...

Add a Context Menu Item - Archive of obsolete content
to follow this tutorial you'll need to have learned the basics of jpm. to add items and submenus to the firefox context menu, use the context-menu module. here's an add-on that adds a new context menu item. the item is displayed whenever something in the page is selected. when it's clicked, the selection is sent to the main add-on code, which just logs it: var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text = window.getselection().tostring();' + ' self.postmessage(text);' + '});', onmessage: function (selectiontext) { console.log(selectiontext); } }); try it: run the add-...
...he constructor in this case takes four options: label, context, contentscript, and onmessage. label the label is just the string that's displayed. context the context describes the circumstances in which the item should be shown. the context-menu module provides a number of simple built-in contexts, including this selectioncontext(), which means: display the item when something on the page is selected. if these simple contexts aren't enough, you can define more sophisticated contexts using scripts. contentscript this attaches a script to the item. in this case the script listens for the user to click on the item, then sends a message to the add-on containing the selected text. onmessage the onmessage property provides a way for the add-on code to respond to messages from the script attach...
...ore sophisticated contexts using scripts. contentscript this attaches a script to the item. in this case the script listens for the user to click on the item, then sends a message to the add-on containing the selected text. onmessage the onmessage property provides a way for the add-on code to respond to messages from the script attached to the context menu item. in this case it just logs the selected text. so: the user clicks the item the content script's click event fires, and the content script retrieves the selected text and sends a message to the add-on the add-on's message event fires, and the add-on code's handler function is passed the selected text, which it logs more options adding an image you can add an image to a context menu item with the image option. this is a url poi...

Tree - Archive of obsolete content
treeview.rowcount; i++) { if (treeview.iscontainer(i) && !treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } to collapse all tree nodes just change the condition: var treeview = tree.treeboxobject.view; for (var i = 0; i < treeview.rowcount; i++) { if (treeview.iscontainer(i) && treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } getting the text from the selected row assuming the given <tree>: <tree id="my-tree" seltype="single" onselect="ontreeselected()"> use the following javascript: function ontreeselected(){ var tree = document.getelementbyid("my-tree"); var cellindex = 0; var celltext = tree.view.getcelltext(tree.currentindex, tree.columns.getcolumnat(cellindex)); alert(celltext); } getting the tree item from the focused row a...
... getting the cell from a mouse click your first choice is likely to try <treecell onclick="yourfunc();"/> or something similar. but this will not work. you can't add event handlers to <treecell>. instead, you can add the event handler to the <tree> element. you can then use the event and some utility methods to find the <treecell>. for example, assuming the gi...
...use the following javascript: function ontreeclicked(event){ var tree = document.getelementbyid("my-tree"); var tbo = tree.treeboxobject; // get the row, col and child element at the point var row = { }, col = { }, child = { }; tbo.getcellat(event.clientx, event.clienty, row, col, child); var celltext = tree.view.getcelltext(row.value, col.value); alert(celltext); } getting the selected indices of a multiselect tree var start = {}, end = {}, numranges = tree.view.selection.getrangecount(), selectedindices = []; for (var t = 0; t < numranges; t++){ tree.view.selection.getrangeat(t, start, end); for (var v = start.value; v <= end.value; v++) selectedindices.push(v); } other resources xul: tree documentation xul tutorial: tree selection ...

Adding sidebars - Archive of obsolete content
a tabbed view is simple: <tabbox id="xulschoolhello-tabbox"> <tabs> <tab label="&xulschoolhello.maintab.label;" /> <tab label="&xulschoolhello.advancedtab.label;" /> </tabs> <tabpanels> <tabpanel> <!-- content for the main panel. --> </tabpanel> <tabpanel> <!-- content for the advanced panel. --> </tabpanel> </tabpanels> </tabbox> the first tab is selected by default, but you can change the default selection by setting the selected attribute to true in the « xul reference « element. a tabpanel can hold any kind of content. you should take into account that the whole tab box is going to be as large as the tab strip on the top and the content of the largest panel. you should try to balance the content in the tab panels so that you don't end up wit...
...ometimes you'll need finer grained control than the one provided by a tabbox. in these cases the « xul reference « and « xul reference « elements are probably what you're looking for. they are extremely useful, and you'll find yourself using them in many situations besides sidebars. a deck is like a tabbbox without the tabs. it only displays one of its child nodes at a time, depending on its selectedindex value. in the following example, the second child will be displayed, not the first which would be the default. <deck selectedindex="2"> <hbox> <!-- content for the first child. --> </hbox> <hbox> <!-- content for the second child. --> </hbox> </deck> note how this is one of the few cases where an attribute of an element is named using camel case instead of all small c...
...ed for two different purposes, and the only difference between the two cases is a label that has a value in one case and something else in another. using a .properties file and a string bundle is a viable option, but it involves a lot of code for something so simple, specially if that's the only case where you need dynamic text. the alternative is to use a deck with the two labels, and change the selected index depending on the purpose of the window. this way you can still use dtd, and the code remains simple. a stack is like a deck, except that all of its children are always on display, one of top of the other. it allows you to decompose complex ui into individual layers, broadening the layout possibilities. one common use for a stack is to have an image background that stretches horizontally an...

Session store API - Archive of obsolete content
rovides a few simple examples of how to make use of the session store api. saving a value with a tab the following code will attach a key/value pair to a tab, so that when the tab is restored, that pair is still associated with it. var ss = components.classes["@mozilla.org/browser/sessionstore;1"] .getservice(components.interfaces.nsisessionstore); var currenttab = gbrowser.selectedtab; var datatoattach = "i want to attach this"; ss.settabvalue(currenttab, "key-name-here", datatoattach); this code sets the value of the key "key-name-here" to datatoattach. you may use any javascript object as the data. fetching a saved value you can fetch a value associated with a tab at any time (whether the tab is in the process of being restored or not), using code similar to the follow...
...ttach. you may use any javascript object as the data. fetching a saved value you can fetch a value associated with a tab at any time (whether the tab is in the process of being restored or not), using code similar to the following: var ss = components.classes["@mozilla.org/browser/sessionstore;1"] .getservice(components.interfaces.nsisessionstore); var currenttab = gbrowser.selectedtab; var retrieveddata = ss.gettabvalue(currenttab, "key-name-here"); after this code executes, the variable retrieveddata contains the value saved for the key "key-name-here". retrieveddata is undefined if there is no value saved for that key name. deleting a value associated with a tab to delete a value from a tab, you can use code similar to the following: var ss = components.classes["@mozi...
...s the value saved for the key "key-name-here". retrieveddata is undefined if there is no value saved for that key name. deleting a value associated with a tab to delete a value from a tab, you can use code similar to the following: var ss = components.classes["@mozilla.org/browser/sessionstore;1"] .getservice(components.interfaces.nsisessionstore); var currenttab = gbrowser.selectedtab; ss.deletetabvalue(currenttab, "key-name-here"); remarks the window value save and restore functions work exactly like the tab-based functions by similar names. starting in firefox 3.5, notifications are sent after reading session store data and before using it, as well as immediately before writing it back to disk. see the list in observer notifications. using the session store api in sea...

insertItemAt - Archive of obsolete content
insertitemat( index, label, value ) return type: element this method creates a new item and inserts it at the specified position. you may optionally set a value. the new item element is returned. ...
...: trying to insert an item at the end with element.getrowcount() + 1 example <!-- this example inserts at the selected item or appends, then selects the newly created item --> <script language="javascript"> function insertitemtolist(){ var mylistbox = document.getelementbyid('mylistbox'); // create a date to get some labels and values var somedate = new date(); if(mylistbox.selectedindex == -1){ // no item was selected in list so append to the end mylistbox.appenditem( somedate.tolocaletimestring(), somedate.gettime() ); var newindex = mylistbox.getrowcount() -1 }else{ // item was selected so insert at the selected item var newindex = mylistbox.selectedindex; mylistbox.insertitemat(newindex, somedate.tolocaletimestring(),...
... mylistbox.appenditem( somedate.tolocaletimestring(), somedate.gettime() ); var newindex = mylistbox.getrowcount() -1 }else{ // item was selected so insert at the selected item var newindex = mylistbox.selectedindex; mylistbox.insertitemat(newindex, somedate.tolocaletimestring(), somedate.gettime()); } // select the newly created item mylistbox.selectedindex = newindex; } </script> <button label="insert item at selected" oncommand="insertitemtolist()"/> <listbox id="mylistbox"> <listitem label="foo"/> </listbox> see also appenditem() removeitemat() ...

PopupEvents - Archive of obsolete content
efore it is made visible. this event is most commonly used to add or adjust items on the popup based on the context. popupshown this event is fired on a menupopup, panel or tooltip once it is visible on screen. popuphiding this event is fired on a menupopup, panel or tooltip once it is about to be hidden. this may happen because the user selected an item from the menu, or it may be because the popup was closed by clicking elsewhere. popuphidden this event is fired on a menupopup, panel or tooltip once it has been hidden. the popupshowing event just before a popup is about to be displayed, a popupshowing event will fired on the popup. this will occur regardless of how the popup is opened, either from user int...
...oth the outer menu and the inner menu. the popuphiding event when a popup is closed, the popuphiding event is fired on the popup just before it is removed from the screen. a listener for the popuphiding event can be used to remove or hide items on the popup again, the reverse of the popupshowing event. the popuphiding event is fired regardless of how the popup was hidden, whether because the user selected an item from a menu, or if the user clicked outside the popup, or if the user pressed escape to cancel the menu. the popupshowing and popuphiding event will also be fired as the user rolls the mouse around on a menu bar, showing and hiding different menus and submenus. in this example, the contents of a textbox are cleared whenever a popup is hidden. <panel onpopuphiding="document.getelementbyid(...
...alue was entered for instance, it is much better to rework the ui such that the code can handle no value being entered instead. otherwise, the user will be distracted with a popup that they cannot close. you also cannot cancel the hiding of a menupopup when a user has made a selection from a menu, as it is already too late to do so. in this situation the command event has already been sent to the selected menuitem and the operation already carried out. this is one special case in which the popuphiding event is fired after the popup has been removed from the screen. the reason for this is if, as is quite common, the menu item's action is to open a modal dialog. here, the menu would need to be removed first, before the dialog can be opened. otherwise, the user would have a menu for a parent window t...

PopupKeys - Archive of obsolete content
thin 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 first or last item. enter/return activate the currently highlighted item. if a menuitem is selected, this will close the menu and fire the menuitem's command event. if a menu is s...
...other keys are ignored by the menu key listener, however, the event does not propagate to the main window. ...
...other keys are ignored by the menu key listener, however, the event does not propagate to the main window. this is because the key listener is a capturing listener attached to the document. for a panel, the only key that is handled by default is the escape key to close the panel. ...

Creating a Skin - Archive of obsolete content
robably isn't the best way to do this. we should really change this to use a style class. let's do this. that way, we can modify the xul without needing to keep the box as the first child of the window. css: .findfilesbox { background-color: #0088cc; } xul: <vbox class="findfilesbox" orient="vertical" flex="100%"> <toolbox> rounding on the tabs next, let's modify the tabs. ...
...st child of the window. css: .findfilesbox { background-color: #0088cc; } xul: <vbox class="findfilesbox" orient="vertical" flex="100%"> <toolbox> rounding on the tabs next, let's modify the tabs. we will make the selected tab bold and change the rounding on the tabs. tab:first-child { -moz-border-radius: 4px 0px 0px 0px; } tab:last-child { -moz-border-radius: 0px 4px 0px 0px; } tab[selected="true"] { color: #000066; font-weight: bold; text-decoration: underline; } two rules change the normal tab appearance, the first sets the rounding on the first tab and the second sets the rounding on the last tab. used here is a special mozilla style rule, -moz-border-radius, that creates rounded border corners. the upper left border of the first tab and the upper right border of the se...
...-border-radius, that creates rounded border corners. the upper left border of the first tab and the upper right border of the second tab are rounded by four pixels and the other corners have a round corner of zero pixels, which is equivalent to no rounding. increase the values here for more rounding and decrease them for a more rectangular look. the last rule only applies to tabs that have their selected attribute set to true. it makes the text in the selected tab appear bold, underlined and dark blue. note in the image that this style has applied only to the first tab, because it's the selected one. adding toolbar icons it is somewhat difficult to distinguish the buttons on the toolbar from the commands on the menu. we could add some icons to the buttons to make them clearer. mozilla composer ...

Focus and Selection - Archive of obsolete content
if a letter key was pressed and there were already more characters than will fit in the textbox. the change event is similar in that it fires only when the field is changed. however it only fires once the textbox loses the focus, thus, only once per set of changes. text selection when working with a textbox, you may wish to retrieve not the entire contents of a field but only what the user has selected. or, you may wish to change the current selection. xul textboxes support a way to retrieve and modify the selection. the simplest one is to select all of the text in a textbox. this involves using the select method of the textbox. tbox.select(); however, you may wish to select only part of the text. to do this you can use the setselectionrange function. it takes two parameters, the first is the ...
...and modify the selection. the simplest one is to select all of the text in a textbox. this involves using the select method of the textbox. tbox.select(); however, you may wish to select only part of the text. to do this you can use the setselectionrange function. it takes two parameters, the first is the starting character and the second is the character after the last one that you want to have selected. values are zero-based, so the first character is 0, the second is 1 and so on. tbox.setselectionrange(4,8); this example will select the fifth character displayed, as well as the sixth, seventh and eighth. if there were only six characters entered into the field, only the fifth and sixth characters would be selected. no error would occur. if you use the same value for both parameters, the start...
...he cursor position within the textbox. for example, the line below can be used to move the cursor to the beginning of the text. tbox.setselectionrange(0,0); you can retrieve the current selection by using the selectionstart and selectionend properties. these properties are set to the starting and ending positions of the current selection respectively. if both are set to the same value no text is selected, and the cursor is moved to that position. once you have the start and end positions, you can pull out the substring from the whole text. you can retrieve and modify the contents of the textbox by using the value property. one additional useful property of textboxes is the textlength property, which holds the total number of characters in the field. next, we'll find out how to use commands. ...

Modifying a XUL Interface - Archive of obsolete content
ty 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 to do this manually of course. the radiogroup's selectedindex property may be used to do this. the selectedindex property may be used to retrieve the index of the selected radio button in the group and well as change it. changing a element dis...
...ular fields that don't apply in a given situation. for example, in a preferences dialog, one might have the choice of several possibilities, but one choice allows additional customization. here is an example of how to create this type of interface. example 7 : source view <script> function updatestate(){ var name = document.getelementbyid("name"); var sindex = document.getelementbyid("group").selectedindex; name.disabled = sindex == 0; } </script> <radiogroup id="group" onselect="updatestate();"> <radio label="random name" selected="true"/> <hbox> <radio label="specify a name:"/> <textbox id="name" value="jim" disabled="true"/> </hbox> </radiogroup> in this example a function updatestate() is called whenever a select event is fired on the radio group. this will happen wheneve...
...ed = sindex == 0; } </script> <radiogroup id="group" onselect="updatestate();"> <radio label="random name" selected="true"/> <hbox> <radio label="specify a name:"/> <textbox id="name" value="jim" disabled="true"/> </hbox> </radiogroup> in this example a function updatestate() is called whenever a select event is fired on the radio group. this will happen whenever a radio button is selected. this function will retrieve the currently selected radio element using the selectedindex property. note that even though one of the radio buttons is inside an hbox, it is still part of the radio group. if the first radio button is selected (index of 0), the textbox is enabled by setting its disabled property to true. if the second radio button is selected, the textbox is enabled. the next sectio...

Stacks and Decks - Archive of obsolete content
displayed in sequence. rather than create separate windows and add navigation buttons to each of them, you would create one window and use a deck where the content changes. like stacks, the direct children of the deck element form the pages of the deck. if there are three children of the deck element, the deck will have three children. ...
...ck. if there are three children of the deck element, the deck will have three children. the displayed page of the deck can be changed by setting an selectedindex attribute on the deck element. the index is a number that identifies which page to display. pages are numbered starting from zero. so, the first child of the deck is page 0, the second is page 1 and so on. example 3 : source view <deck selectedindex="2"> <description value="this is the first page"/> <button label="this is the second page"/> <box> <description value="this is the third page"/> <button label="this is also the third page"/> </box> </deck> three pages exist here, the default being the third one. the third page is a box with two elements inside it. both the box and the elements inside it make up the page. th...
...is is the third page"/> <button label="this is also the third page"/> </box> </deck> three pages exist here, the default being the third one. the third page is a box with two elements inside it. both the box and the elements inside it make up the page. the deck will be as large as the largest child, which here should be the third page. you can switch pages by using a script to modify the selectedindex attribute. more on this in the section on events and the dom. the next section describes how stacks can be used to position child elements. « previousnext » ...

Updating Commands - Archive of obsolete content
nd updater will receive notifications about all focus events on all elements, even if other event handlers respond to the event. essentially, a command updater is like a global event handler. command updaters have a number of events which they can respond to which are listed below. it is also possible to create your own. focus: occurs when the focused element changes. select: occurs when the selected text changes. undo: occurs when the undo buffer changes. clipboard: occurs when the contents of the clipboard changes. the following example shows the command updaters used in the mozilla browser to update the edit menu commands. the functions used can be found in the 'chrome://communicator/content/utilityoverlay.js' script. <commandset id="globaleditmenuitems" commandupdater="tr...
...board changes. the following example shows the command updaters used in the mozilla browser to update the edit menu commands. the functions used can be found in the 'chrome://communicator/content/utilityoverlay.js' script. ...
...mands. the functions used can be found in the 'chrome://communicator/content/utilityoverlay.js' script. <commandset id="globaleditmenuitems" commandupdater="true" events="focus" oncommandupdate="goupdateglobaleditmenuitems()"/> <commandset id="selecteditmenuitems" commandupdater="true" events="select" oncommandupdate="goupdateselecteditmenuitems()"/> <commandset id="undoeditmenuitems" commandupdater="true" events="undo" oncommandupdate="goupdateundoeditmenuitems()"/> <commandset id="clipboardeditmenuitems" commandupdater="true" events="clipboard" oncommandupdate="goupdatepastemenuitems()"/> next, we'll find out how to use observers. « previousnext ...

Using the standard theme - Archive of obsolete content
you do not have to specify a specific file; mozilla will determine by its own which files in the directory it needs to use. if you are only going to use these global style sheets, you of course do not need a <tt>skin</tt> directory in your extension package, and also do not have to register a style in the <tt>chrome.manifest</tt>. adding custom styles in order to provide custom sty...
...for this to work, you need to create an approriate directory structure, with directory names corresponding to the names of the themes you want to e...
...obal/skin/"); you then have to associate your xul file with your custom style sheet only: <?xml-stylesheet href="chrome://myextension/skin/custom.css" type="text/css"?> applying different custom style sheets depending on the selected theme mozilla is able to automatically pick your custom style sheet depending on the theme currently chosen by the user. that is, depending on the theme currently selected by the user, you can provide different custom style sheets for your extensions. for this to work, you need to create an approriate directory structure, with directory names corresponding to the names of the themes you want to extend, and of course, your adapted custom style sheets. for more information on how to do this, read about theming a custom toolbar button. note that both approaches descri...

deck - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element that displays only one of its children at a time. the selectedindex attribute determines which child is displayed. more information is available in the xul tutorial. attributes selectedindex properties selectedindex, selectedpanel examples <deck selectedindex="2"> <description value="this is the first page"/> <button label="this is the second page"/> <box> <description value="this is the third page"/> <button label="this is also the third page"/> </box> </deck> attributes selectedindex type: integer gets and sets the index of the currently selected panel. the first item is at index 0. inherited from xul element align, allowevents, allownegativ...
...qualsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties selectedindex type: integer returns the index of the currently selected item. you may select an item by assigning its index to this property. by assigning -1 to this property, all items will be deselected. returns -1 if no items are selected do not hide panels; the deck element only understands visible panels. selectedpanel type: element holds a reference to the cu...
... type: integer returns the index of the currently selected item. you may select an item by assigning its index to this property. by assigning -1 to this property, all items will be deselected. returns -1 if no items are selected do not hide panels; the deck element only understands visible panels. selectedpanel type: element holds a reference to the currently selected panel within a deck element. assigning a value to this property will modify the selected panel. inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , per...

tabpanels - Archive of obsolete content
hough some people like to use tabpanel elements. by clicking the first tab, the first panel will be displayed. by clicking the second tab, the second panel will be displayed and so on. there should be the same number of panels as there are tabs. panels should never be hidden; hiding the tab suffices to make the panel inaccessible. more information is available in the xul tutorial. attributes selectedindex properties selectedindex, selectedpanel examples (example needed) attributes selectedindex type: integer gets and sets the index of the currently selected panel. the first item is at index 0. inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, em...
...height, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible type: nsiaccessible returns the accessibility object for the element. selectedindex type: integer returns the index of the currently selected item. you may select an item by assigning its index to this property. by assigning -1 to this property, all items will be deselected. returns -1 if no items are selected selectedpanel type: element holds a reference to the currently selected panel within a <tabbox> element. assigning a value to this property will ...
... type: integer returns the index of the currently selected item. you may select an item by assigning its index to this property. by assigning -1 to this property, all items will be deselected. returns -1 if no items are selected selectedpanel type: element holds a reference to the currently selected panel within a <tabbox> element. assigning a value to this property will modify the selected panel. a select event will be sent when the selected panel is changed. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getel...

timepicker - Archive of obsolete content
e. value type: string the initial value of the timepicker in either the form hh:mm:ss or hh:mm. properties amindicator type: string the string value displayed for hours between midnight and noon, defaulting to am. this value is determined from the user's locale. datevalue type: date the date that is currently entered or selected in the datepicker as a date object. disabled type: boolean gets and sets the value of the disabled attribute. hideseconds type: boolean indicates whether the seconds field is visible or not. hour type: integer the currently selected hour from 0 to 23. set this property to change the selected hour. hourleadingzero ...
... read only value indicating whether a 12-hour or 24-hour clock is used to display times. with a 12-hour clock, an extra field allows the user to pick between am and pm. this value is determined from the user's locale. ispm type: boolean if false, the hour is between 0 and 11, and if true, the hour is 12 or greater. minute type: integer the currently selected minute from 0 to 59. set this property to change the selected minute. minuteleadingzero type: boolean a read only value indicating whether a leading zero should be displayed before the minute when it is less than 10. pmindicator type: string the string value displayed for hours between noon and midnight, defaulting to pm. this value is determined fr...
... before the minute when it is less than 10. pmindicator type: string the string value displayed for hours between noon and midnight, defaulting to pm. this value is determined from the user's locale. readonly type: boolean if set to true, then the user cannot modify the value of the element. second type: integer the currently selected second from 0 to 59. set this property to change the selected second. secondleadingzero type: boolean a read only value indicating whether a leading zero should be displayed before the second when it is less than 10. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string the currently ent...

calICalendarView - Archive of obsolete content
as implemented here, it corresponds to the calendar containing all of the calievents and calitodos that shoud be shown in the view. in the vast majority of cases, this is calicompositecalendar. notice that a calicalendarview does not contain any addite...
...as implemented here, it corresponds to the calendar containing all of the calievents and calitodos that shoud be shown in the view. in the vast majority of cases, this is calicompositecalendar. notice that a calicalendarview does not contain any additem or refresh methods. therefore, it mak...
... should check this attribute to determine whether or not the implementation allows for calls to setdatelist. if an implementation returns true for this attribute, it must allow for any arbitrary set of dates to be displayed. hasdisjointdates returns false if the dates being displayed represent a continuous list, and true if certain dates in between startdate and enddate may not be displayed. selecteditem returns a caliitembase corresponding to the currently active item in the view. other areas of the code may use this attribute for setting selection, editing purposes, or any other purpose. note: this will likely change to selecteditems and return an array of caliitembases in order to support selecting multiple items at once. selectedday the currently selected day in the display. other are...

WAI-ARIA basics - Learn web development
ings. it doesn't give you any idea of what the relationship is between the content. giving the user more clues as to the structure of the content is always good. to improve things, we've created a new version of the example called aria-tabbed-info-box.html (see it running live). we've updated the structure of the tabbed interface like so: <ul role="tablist"> <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">tab 1</li> <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">tab 2</li> <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">tab 3</li> </ul> <div class="panels"> <article class="active-panel" role="tabpanel" aria-hidden="false"> ... </article> <article role="tab...
... the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc. the new features are as follows: new roles — tablist, tab, tabpanel — these identify the important areas of the tabbed interface — the container for the tabs, the tabs themselves, and the corresponding tabpanels. aria-selected — defines which tab is currently selected. as different tabs are selected by the user, the value of this attribute on the different tabs is updated via javascript. aria-hidden — hides an element from being read out by a screenreader. as different tabs are selected by the user, the value of this attribute on the different tabs is updated via javascript. tabindex="0" — as we've removed the ...
...rovides a screenreader with enough information to tell you that you are currently on item "1 of 3", etc. in many cases, browsers should be able to infer this information from the element hierarchy, but it certainly helps to provide more clues. in our tests, this new structure did serve to improve things overall. the tabs are now recognised as tabs (e.g. "tab" is spoken by the screenreader), the selected tab is indicated by "selected" being read out with the tab name, and the screenreader also tells you which tab number you are currently on. in addition, because of the aria-hidden settings (only the non-hidden tab ever has aria-hidden="false" set), the non-hidden content is the only one you can navigate down to, meaning the selected content is easier to find. note: if there is anything you expl...

Fundamental text and font styling - Learn web development
had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. truly a wonder of nature this urban predator — tommy the cat had many a story to tell. but it was a rare occasion such as this that he did.</p> you can find the finished example on github (see also the source code.) color the color property sets the color of the foreground content of the selected elements (which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the text-decoration property). color can accept any css color unit, for example: p { color: red; } this will cause the paragraphs to become red, rather than the standard browser default black, like so: <h1>tommy the cat</h1> <p>well i remember it as tho...
...g point blank down the cavernous barrel of this awesome prowling machine. truly a wonder of nature this urban predator — tommy the cat had many a story to tell. but it was a rare occasion such as this that he did.</p> font families to set a different font on your text, you use the font-family property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. the browser will only apply a font if it is available on the machine the website is being accessed on; if not, it will just use a browser default font. a simple example looks like so: p { font-family: arial; } this would make all paragraphs on a page adopt the arial font, which is found on any computer. web safe fonts speaking of font availability, there are only a certain number ...
...upply a font stack so that the browser has multiple fonts it can choose from. this simply involves a font-family value consisting of multiple font names separated by commas, e.g. p { font-family: "trebuchet ms", verdana, sans-serif; } in such a case, the browser starts at the beginning of the list and looks to see if that font is available on the machine. if it is, it applies that font to the selected elements. if not, it moves on to the next font, and so on. it is a good idea to provide a suitable generic font name at the end of the stack so that if none of the listed fonts are available, the browser can at least provide something approximately suitable. to emphasise this point, paragraphs are given the browser's default serif font if no other option is available — which is usually times n...

Example 5 - Learn web development
states html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select" role="listbox"> <span class="value">cherry</span> <ul class="optlist hidden" role="presentation"> <li class="option" role="option" aria-selected="true">cherry</li> <li class="option" role="option">lemon</li> <li class="option" role="option">banana</li> <li class="option" role="option">strawberry</li> <li class="option" role="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------...
...ption'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; function updatevalue(select, index) { var nativewidget = select.previouselementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.setattribute('aria-selected', 'false'); }); optionlist[index].setattribute('aria-selected', 'true'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // ...
.../ // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.previouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, index) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); option.addeventlistener('click', function (event) { updatevalue(select, index); ...

Sending forms through JavaScript - Learn web development
if( file.dom.files[0] ) { reader.readasbinarystring( file.dom.files[0] ); } // if not, read the file once the user selects it. file.dom.addeventlistener( "change", function () { if( reader.readystate === filereader.loading ) { reader.abort(); } reader.readasbinarystring( file.dom.files[0] ); } ); // senddata is our main function function senddata()...
...m.files[0] ) { reader.readasbinarystring( file.dom.files[0] ); } // if not, read the file once the user selects it. ...
...ile.dom.files.length > 0 ) { settimeout( senddata, 10 ); return; } // to construct our multipart form data request, // we need an xmlhttprequest instance const xhr = new xmlhttprequest(); // we need a separator to define each part of the request const boundary = "blob"; // store our body request in a string. ...

Gecko info for Windows accessibility vendors
supported. role_row not supported. see the section intentional differences with ie role_cell html: <td> dhtml: role="wairole:gridcell" sets state_readonly in normal table. sets state_focusable in data grids and spreadsheets clears state_readonly in spreadsheets. sets state_selected in spreadsheets when a cell has selection. role_link xul: <label class="text-link"> -- this should be changed, we need a real <link> widget for xul html: <a> and <area> sets state_linked if it is pointing somewhere. sets state_traversed if link has been visited. sets state_selectable if it is an html named anchor accvalue...
...acter not supported. ...
... role_list xul: <listbox> html: <select size=""> where size > 1 -- state_readonly is off html: <ol> or <ul> -- state_readonly is on dhtml: role="wairole:list" role_listitem html: <li>, <option> or <optgroup> dhtml: role="wairole:listitem" xul: <listitem> sets state_selected if the current listitem is selected. role_outline dhtml: role="wairole:tree" role_outlineitem dhtml: role="wairole:treeitem" sets state_collapsed if has children that are not currently visible. sets state_expanded if has children that are currently visisted. sets state_selected if the current tree item is selected. fires event_state_change wh...

Displaying Places information using views
ternative to setting the tree's place property as described above. void load( array queries, nsinavhistoryqueryoptions options ); parameters queries an array of nsinavhistoryquery objects. options an nsinavhistoryqueryoptions object. selectitems() selects the first node in the tree that matches each given item id. ...
... tree that matches each given item id. it will open any parent nodes that it needs to in order to show the selected items. void selectitems( array aids, array aopencontainers ); parameters aids an array of item ids. aopencontainers if true or undefined, folders that are closed are also searched. they are not searched otherwise. optional. selectnode() causes a particular node to be selected in the tree, resulting in all containers above the node in the hierarchy to be opened so that the node is visible. void selectnode( nsinavhistorynode node ); parameters node the nsinavhistoryresultnode to select. selectplaceuri() causes a particular node represented by the specified placeuri to be selected in the tree. all containers above the node in the hierarchy will be opened so t...
... make it easier to use. if you write your own complex view, you might do something similar. but all places views should provide a minimal interface so that you and controllers have a consistent, general way to interact with them. for this reason views implement interface nsiplacesview. it allows you to do things like getting the nsinavhistoryresult instance that a view displays and examining its selected nodes. in fact the special place property described above is a property of this interface. creating custom views if you need greater flexibility than a built-in view provides, you can create a custom view. good reasons for needing a custom view might include (but are in no way limited to): displaying custom columns alongside those provided by the built-in tree view. changing the way a built...

Chrome-only CSS reference
al are also usable in chrome stylesheets: see the css documentation for a list of these. -moz-window-draggingthe -moz-window-dragging css property specifies whether a window is draggable or not. ...
...s draggable or not. ...
...htthemes attribute is true and a theme is selected.:-moz-lwtheme-brighttextthe :-moz-lwtheme-brighttext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a bright text color is selected.:-moz-lwtheme-darktextthe :-moz-lwtheme-darktext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a dark text color is selected.::-moz-tree-cellactivated by the properties attribute.::-moz-tree-cell-textactivated by the properties attribute.::-moz-tree-cell-text(hover)the :-moz-tree-cell-text(hover) css pseudo-class will match an element if the mouse cursor is presently hovering over text in a tree cell.::-moz-tree-columnactivated by the properties attribute.::-moz-tree-drop-feedbackactivated by the properties attribute.:...

PopupNotifications.jsm
refox code takes care of this automatically. void locationchange(); parameters none. getnotification() retrieve a notification object associated with the browser/id pair. notification getnotification( string id xulelement browser ); parameters id the notification id to search for. browser the xul <xul:browser> element whose notifications should be searched. if null, the currently selected <xul:browser>'s notifications will be searched. return value the corresponding notification object, or null if no such notification exists. remove() removes the specified notification. void remove( notification notification ); parameters notification the notification object representing the notification to remove. show() adds a new popup notification, displaying it to the user. ...
... notification object representing the notification to remove. show() adds a new popup notification, displaying it to the user. notification show( browser, id, message, anchorid, mainaction, secondaryactions, options ); parameters browser the xul <xul:browser> element with which the notification is associated. this must not be null; you can, however, simply specify gbrowser.selectedbrowser to associate it with the current tab. id a unique id string for the type of notification being displayed. for example, geolocation related notifications have the id "geolocation". only one notification for each id can be visible at a time; if one with the specified id already exists, it will be replaced with the newer notification. message a string to display in the notification panel.
...scribe the button presented in the notification panel, while secondary actions are displayed in the drop-down menu associated with the button. a notification action object must contain the following properties: label a text label describing the action. accesskey a string indicating the keystroke that will trigger the action. callback a javascript function to be invoked when the action is selected by the user. notification options the notification options object lets you further customize the notification panel. any combination of the following properties may be provided: persistence an integer value indicating the number of page loads for which the notification will persist; once this many page loads have occurred, the notification may dismiss automatically. timeout a timestamp (...

Preference reference
t to true to enable it, or false to disable it.browser.dom.window.dump.filebrowser.dom.window.dump.file redirects the ouput of window.dump() calls to a file whose address is specified in this preference if browser.dom.window.dump.enabled is set to true. changes require an application restart.browser.download.lastdir.savepersitebrowser.download.lastdir.savepersite controls whether the directory preselected in the file picker for saving a file download is being remembered on a per-website (host) base. if set to true, the data is stored as content preference.browser.pagethumbnails.capturing_disabledthe preference browser.pagethumbnails.capturing_disabled controls whether the application creates screenshots of visited pages which will be shown if the web page is shown in the grid of the "new tab page"...
...ing_disabled controls whether the application creates screenshots of visited pages which will be shown if the web page is shown in the grid of the "new tab page" (about:newtab) which offers the most often visited pages for fast navigation.browser.search.context.loadinbackgroundbrowser.search.context.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the background.browser.urlbar.formatting.enabledthe preference browser.urlbar.formatting.enabled controls whether the domain name including the top level domain is highlighted in the address bar by coloring it black and the other parts grey.browser.urlbar.trimurlsthe prefer...
...ar.trimurlsthe preference browser.urlbar.trimurls controls whether the protocol http and the trailing slash behind domain name (if the open page is exactly the domain name) are hidden.dom.event.clipboardevents.enableddom.event.clipboardevents.enabled lets websites get notifications if the user copies, pastes, or cuts something from a web page, and it lets them know which part of the page had been selected. the emitting of the oncopy, oncut and onpaste events are controlled by this preference. javascript.options.showinconsolethe preference javascript.options.showinconsole controls whether errors or warnings in chrome code are shown in the error console.javascript.options.stricttechnical review completed.mail.tabs.drawintitlebarstarting in thunderbird 17.0, the tabs are drawn in the title bar. t...

Gecko Roles
role_nothing used when the accessible item doesn't have a strongly defined role. role_titlebar represents a title or caption bar for a window. used by msaa only, this is supported automatically by microsoft windows. role_menubar represents the menu bar (positioned beneath the title bar of a window on most platforms or at the top of the screen on mac os x) from which menus are selected by the user. role_scrollbar represents a vertical or horizontal scroll bar, which is part of the client area or used in a control. role_grip represents a special mouse pointer, which allows a user to manipulate user interface elements such as windows. for example, a user clicks and drags a sizing grip in the lower-right corner of a window to resize it role_sound represents...
... menu item or a bar that divides split panes within a window. role_toolbar represents a toolbar, which is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features. role_statusbar represents a status bar, which is an area at the bottom of a window that displays information about the current operation, state of the application, or selected object. the status bar has multiple fields, which display different kinds of information. role_table represents a table that contains rows and columns of cells, and optionally, row headers and column headers. role_columnheader represents a column header, providing a visual label for a column in a table. role_rowheader represents a row header, which provides a visual label ...
...ge tab, it is a child of a page tab list. role_propertypage represents a property sheet. role_indicator represents an indicator, such as a pointer graphic, that points to the current item. role_graphic represents a picture. role_statictext represents read-only text, such as labels for other controls or instructions in a dialog box. static text cannot be modified or selected. role_text_leaf represents selectable text that allows edits or is designated read-only. role_pushbutton represents a push button control. role_checkbutton represents a check box control. role_radiobutton represents an option button, also called a radio button. it is one of a group of mutually exclusive options. all objects sharing a single parent that have this at...

Places utilities for JavaScript
be shown. [optional] atitle the default title for the new bookmark. [optional] adescription the default description for the new bookmark [optional] adefaultinsertionpoint the default insertion point for the new item. if set, the folder picker would be hidden unless ashowpicker is set to true, in which case the dialog only uses the folder identifier from the insertion point as the initially selected item in the folder picker. [optional] ashowpicker see above [optional] aloadinsidebar if true, the dialog will default to load the new item in the sidebar (as a web panel). [optional] akeyword the default keyword for the new bookmark. the keyword field will be shown in the dialog if this is used. [optional] apostdata post data for post-style keywords. return type returns true if any tr...
...] afeeduri the feed uri for which the dialog is to be shown (nsiuri). [optional] asiteuri the site uri for the new live-bookmark (nsiuri). [optional] adefaultinsertionpoint the default insertion point for the new item. if set, the folder picker would be hidden unless ashowpicker is set to true, in which case the dialog only uses the folder identifier from the insertion point as the initially selected item in the folder picker. [optional] ashowpicker see above return type return true if any transaction has been performed. note: the feeduri and description fields are visible only if there is no initial feed uri (afeeduri is null). note: when adefaultinsertionpoint is not set, the dialog defaults to the bookmarks root folder. showminimaladdlivemarkui() this opens the dialog with onl...
... adefaultinsertionpoint, ashowpicker) parameters [optional] atitle the default title for the new bookmark. [optional] adefaultinsertionpoint the default insertion point for the new item. if set, the folder picker would be hidden unless ashowpicker is set to true, in which case the dialog only uses the folder identifier from the insertion point as the initially selected item in the folder picker. [optional] ashowpicker see above return type return true if any transaction has been performed. annotations these are functions that simplify annotating pages. information like keywords, descriptions, and post data is already stored as annotations by firefox, but you can create additional ones. using the functions can save you some implementation work. for exampl...

nsIAccessibleEvent
9 0x0015 0x0012 numerous selection changes have occurred within a container object. event_alert 0x0002 0x0016 0x0013 an alert has been generated. server applications send this event when a user needs to know that a user interface element has changed. event_foreground 0x0003 0x0017 0x0014 the foreground window has changed. event_menu_start 0x0018 0x0015 a menu item on the menu bar has been selected. event_menu_end 0x0019 0x0016 a menu from the menu bar has been closed. event_menupopup_start 0x001a 0x0017 a pop-up menu has been displayed. event_menupopup_end 0x001b 0x0018 a pop-up menu has been closed. event_capture_start 0x001c 0x0019 a window has received mouse capture. event_capture_end 0x001d 0x001a a window has lost mouse capture. event_movesize_start 0x001e 0x00...
... event_window_minimize 0x004e 0x004a event_window_resize 0x004f 0x004b event_window_restore 0x0050 0x004c event_hyperlink_end_index_changed 0x0051 0x004d the ending index of this link within the containing string has changed. event_hyperlink_number_of_anchors_changed 0x0052 0x004e the number of anchors associated with this hyperlink object has changed. event_hyperlink_selected_link_changed 0x0053 0x004f the hyperlink selected state changed from selected to unselected or from unselected to selected. event_hypertext_link_activated 0x0054 0x0050 one of the links associated with the hypertext object has been activated. event_hypertext_link_selected 0x0055 0x0051 one of the links associated with the hypertext object has been selected. event_hyperlink_start_index...
... event_dom_destroy ...

nsIAccessibleHyperLink
accessible/public/nsiaccessiblehyperlink.idlscriptable a cross-platform interface that supports hyperlink-specific properties and methods. inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview nsiaccessible getanchor(in long index); note: renamed from getobject in gecko 1.9 nsiuri geturi(in long index); boolean isselected(); obsolete since gecko 1.9 boolean isvalid(); obsolete since gecko 1.9 attributes attribute type description anchorcount long the number of anchors within this hyperlink. is normally 1 for anchors. this anchor is, for example, the visible output of the html:a tag. with an image map, reflects the actual areas within the map. read only. note: renamed from anch...
.... the returned value is related to the nsiaccessiblehyperlink interface of the object that owns this hyperlink. read only. note: the link itself is represented by one embedded character within the parent text, so the endindex should be startindex + 1. exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree. selected boolean determines whether the element currently has the focus, for example after returning from the destination page. read only. note: aria links can only be focused if they have the tabindex attribute set. also, state_focused should then be set on the accessible for this link. exceptions thrown ns_error_failure indicates that the accessible is unattached fro...
...ed index. geturi() returns the uri at the given index. note: aria hyperlinks do not have an uri to point to, since clicks are processed via javascript. therefore this property does not work on aria links. nsiuri geturi( in long index ); parameters index the 0-based index of the uri to be returned. return value the nsiuri object containing the specifications for the uri. isselected() obsolete since gecko 1.9 (firefox 3) note: has been replaced by the selected attribute. boolean isselected(); parameters none. return value true if the element currently has the focus. isvalid() obsolete since gecko 1.9 (firefox 3) note: has been replaced by the valid attribute. boolean isvalid(); parameters none. return value true if th...

nsIAccessibleRole
cko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) constants constant value description role_nothing 0 used when accessible has no strong defined role. role_titlebar 1 represents a title or caption bar for a window. it is used by msaa only, supported automatically by ms windows. role_menubar 2 represents the menu bar (positioned beneath the title bar of a window) from which menus are selected by the user. the role is used by xul:menubar or role="menubar". role_scrollbar 3 represents a vertical or horizontal scroll bar, which is part of the client area or used in a control. role_grip 4 represents a special mouse pointer, which allows a user to manipulate user interface elements such as windows. for example, a user clicks and drags a sizing grip in the lower-right corner of a window...
...l:hr, role="separator". role_toolbar 22 represents a toolbar, which is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features. it is used for xul:toolbar, role="toolbar". role_statusbar 23 represents a status bar, which is an area at the bottom of a window that displays information about the current operation, state of the application, or selected object. the status bar has multiple fields, which display different kinds of information. it is used for xul:statusbar. role_table 24 represents a table that contains rows and columns of cells, and optionally, row headers and column headers. it is used for html:table, role="grid". also refer to the following roles: role_columnheader, role_rowheader, role_column, role_row, role_cell. role_colu...
...sents a property sheet. it is used for xul:tabpanel, role="tabpanel". role_indicator 39 represents an indicator, such as a pointer graphic, that points to the current item. role_graphic 40 represents a picture. is is used for xul:image, html:img. role_statictext 41 represents read-only text, such as labels for other controls or instructions in a dialog box. static text cannot be modified or selected. is is used for xul:label, xul:description, html:label, role="label", or xforms:output. role_text_leaf 42 represents selectable text that allows edits or is designated read-only. role_pushbutton 43 represents a push button control. it is used for xul:button, html:button, role="button", xforms:trigger, xforms:submit. role_checkbutton 44 represents a check box control. it is used for xul:chec...

nsIDOMWindowUtils
set the ime state. composition_attr_rawinput 0x02 synthesize a text event to the window. cannot be accessed from unprivileged context (not content-accessible) will throw a dom security error if called without universalxpconnect privileges. currently, this method doesn't support 4 or more clauses composition string. obsolete since gecko 38.0 composition_attr_selectedrawtext 0x03 obsolete since gecko 38.0 composition_attr_convertedtext 0x04 obsolete since gecko 38.0 composition_attr_selectedconvertedtext 0x05 obsolete since gecko 38.0 query_content_flag_use_native_line_break 0x0000 one of values of aadditionalflags of sendquerycontentevent(). this flag must not be set with query_content_flag_use_xp_line_bre...
... and string of result are also computed with xp line breaks. this is more useful for javascript in chrome. query_content_flag_selection_spellcheck 0x0002 one of values of aadditionalflags of sendquerycontentevent(). query_content_flag_selection_ime_rawinput 0x0008 one of values of aadditionalflags of sendquerycontentevent(). query_content_flag_selection_ime_selectedrawtext 0x0010 one of values of aadditionalflags of sendquerycontentevent(). query_content_flag_selection_ime_convertedtext 0x0020 one of values of aadditionalflags of sendquerycontentevent(). query_content_flag_selection_ime_selectedconvertedtext 0x0040 one of values of aadditionalflags of sendquerycontentevent(). query_content_flag_selection_accessibi...
... query_content_flag_selection_urlsecondary 0x0200 one of values of aadditionalflags of sendquerycontentevent(). query_content_flag_selection_urlstrikeout 0x0400 one of values of aadditionalflags of sendquerycontentevent(). query_content_flag_offset_relative_to_insertion_point 0x0800 one of values of aadditionalflags of sendquerycontentevent(). query_selected_text 3200 query_selected_text queries the first selection range's information. query_text_content 3201 query_text_content queries the text at the specified range. query_caret_rect 3203 query_caret_rect queries the (collapsed) caret rect of the offset. if the actual caret is there at the specified offset, this returns the actual caret rect. otherwise, this gue...

nsIMsgDBHdr
the nsimsgdbhdr interface describes headers for mail messages. inherits from: nsisupports this interface is usually given to you in return to a query from the message database. there are utility functions that also return it though. for instance, msghdrforcurrentmessage() will return the currently selected message's header. headers are backed by the database: a call to these functions directly modifies the state of the database, although it is not saved until the database is committed. in clear, if you want to do a persistent change to a message header, such as marking it as read, or replied to, or whatever, you must do it through its corresponding nsimsgfolder (msghdr.folder) or nsimsgdatabase (msghdr.folder.msgdatabase). it is also mandatory to set msghdr.folder.msgdatabase = null aft...
.... propertyenumerator nsiutf8stringenumerator readonly: enumerator for names of all database properties in the header. (new in 3.1?) methods getproperty() astring getproperty(in string propertyname); parameters propertyname the name of the property to retrieve. return value the value of the property. setproperty() sets a property on the header. for the currently selected message, thunderbird provides a utility function: setmsghdrpropertyandreload(aproperty, avalue); which duplicates this functionality without requiring you to grab the current header. void setproperty(in string propertyname, in astring propertystr); parameters propertyname the name of the property to set. propertystr the value of the property. setstringproperty() vo...
...t. return value the value of the property. setuint32property() void setuint32property(in string propertyname, in unsigned long propertyval); parameters propertyname the name of the property to set. propertyval the value of the property. markread() marks this header as read. thunderbird provides a utility function which performs this for the currently selected message: markcurrentmessageasread(). void markread(in boolean read); parameters read if true, mark as read. if false mark as undread. markflagged() void markflagged(in boolean flagged); parameters flagged if true, mark as flagged. if false remove flag. markhasattachments() void markhasattachments(in boolean hasattachments); parameters hasattachments if true, mark as ha...

nsIPlacesView
] getdragableselection(); nsinavhistoryresultnode[][] getremovableselectionranges(); nsinavhistoryresult getresult(); nsinavhistorycontainerresultnode getresultnode(); nsinavhistoryresultnode[] getselectionnodes(); void selectall(); attributes attribute type description hasselection boolean whether or not there are selected items. read only. insertionpoint insertionpoint the insertionpoint at which new items will be inserted upon drop, paste, or creation. read only. place string theuri (as a string) of the root place that the view displays. this may be modified dynamically to update the view. see displaying places information using views for examples. selectednode nsinavhist...
... insertionpoint insertionpoint the insertionpoint at which new items will be inserted upon drop, paste, or creation. read only. place string theuri (as a string) of the root place that the view displays. this may be modified dynamically to update the view. see displaying places information using views for examples. selectednode nsinavhistoryresultnode the selected node in the view. if there are multiple selected nodes, this is null. read only. methods getdragableselection() returns an array of selected nsinavhistoryresultnode objects that can be dragged from the view. nsinavhistoryresultnode[] getdragableselection(); parameters none. return value an array of nsinavhistoryresultnode objects. getremovableselectionranges() returns an array wh...
...parameters none. return value the nsinavhistoryresult object that the view displays. getresultnode() returns the root node, an nsinavhistorycontainerresultnode object, of the view's result. nsinavhistorycontainerresultnode getresultnode(); paramters none. return value the root nsinavhistorycontainerresultnode of the view's result. getselectionnodes() returns an array of all currently selected nsinavhistoryresultnode objects of the view. the nodes are not necessarily returned in the same order in which they occur in the model, or in the same container, or from the same provider. nsinavhistoryresultnode[] getselectionnodes(); parameters none. return value an array of nsinavhistoryresultnode objects that are selected. selectall() selects all the nodes displayed in the view. void...

nsIUpdate
toolkit/mozapps/update/nsiupdateservice.idlscriptable an interface that describes an object representing an available update to the current application - this update may have several available patches from which one must be selected to download and install, for example we might select a binary difference patch first and attempt to apply that, then if the application process fails fall back to downloading a complete file-replace patch. this object also contains information about the update that the front end and other application services can use to learn more about what is going on. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsiupdatepatch getpatchat(in uns...
...tall the update, and they must agree to it before the download begins. name astring the name of the update, in the form "application_name update_version" patchcount unsigned long the number of patches supplied by this update. read only. platformversion astring the toolkit version of this update. previousappversion astring the application version prior to the application being updated. selectedpatch nsiupdatepatch the currently selected patch for this update. read only. serviceurl astring the url to the update service that supplied this update. showneverforversion boolean whether to show the "no thanks" button in the update prompt. this allows the user to never receive a notification for that specific update version again. showprompt boolean whether to show the update prompt whic...
...showprompt boolean whether to show the update prompt which requires user confirmation when an update is found during a background update check. this overrides the default setting to download the update in the background. showsurvey boolean whether to show the survey link in the update prompt. the url must also be present in the app.update.surveyurl preference. state astring the state of the selected patch: "downloading" the update is being downloaded. "pending" the update is ready to be applied. "applying" the update is in the process of being applied. "succeeded" the update has been installed successfully. "download-failed" the update failed to be downloaded. "failed" installing the update failed. read only. statustext astring an optional message associated with the update. type astri...

nsIUserCertPicker
security/manager/ssl/public/nsiusercertpicker.idlscriptable please add a summary to this article. ...
...e please add a summary to this article. ...
...iinterfacerequestor ctx, in wstring selectednickname, in long certusage, in boolean allowinvalid, in boolean allowduplicatenicknames, out boolean canceled); methods pickbyusage() nsix509cert pickbyusage( in nsiinterfacerequestor ctx, in wstring selectednickname, in long certusage, in boolean allowinvalid, in boolean allowduplicatenicknames, out boolean canceled ); parameters ctx selectednickname certusage allowinvalid allowduplicatenicknames canceled return value ...

3D view - Firefox Developer Tools
tation of the dom hierarchy of your page to see it from different angles, to better examine its structure. off-screen elements become visible, so that you can see where your elements are located in relation to the visible content. you can click on elements to see their html in the html panel or the style panel. conversely, you can click on elements in the breadcrumb bar to change which element is selected in the 3d view. if you do not see the 3d button in the page inspector, it is possible that your graphics driver needs to be updated. see the blocklisted drivers page for more information. controlling the 3d view there are keyboard shortcuts and mouse controls available for the 3d view. function keyboard mouse zoom in/out + / - scroll wheel up/down rotate...
...w. ...
... zoom in/out + / - scroll wheel up/down rotate left/right a / d mouse left/right rotate up/down w / s mouse up/down pan left/right ← / → mouse left/right pan up/down ↑ / ↓ mouse up/down reset zoom level 0 resets the zoom level to the default focus on selected node f makes sure the currently selected node is visible reset view r resets zoom, rotation, and panning to the default hide current node x makes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured use cases for the 3d view there are a variety of ways the 3d view is useful: if you have broken html causing layout problems, looking at the 3d vi...

Accessibility Inspector - Firefox Developer Tools
r a default role provided by the browser, or a role given to it via a wai-aria role attribute. name — the name this item has on the page. the name depends on the element; for example, the name of most text elements is simply their textcontent, whereas form elements' names are the contents of their associated <label>. on the right-hand side, you can see further information about the currently selected item. the listed properties are as follows: name — the item's name, as described above. role — the item's role, as described above. actions — a list of actions that can be performed on the item, for example, a pushbutton would have "press" listed, while a link would have "jump" listed. value — the value of the item. this can mean different things depending on the type of the item; f...
...ing the up and down arrow keys, and use the left and right arrow keys to expand and collapse expandable rows (e.g., different hierarchy levels of the accessibility tree). print accessibility tree to json you can print the contents of the accessibility tree to json by right-clicking on an entry in the accessibility tab and selecting print to json: when you do, you will get a new tab with the selected accessibility tree loaded into the json viewer: once opened, you can save or copy the data as necessary. the json viewer can also show you the raw json data on a separate tab in the viewer. check for accessibility issues you can check for accessibility issues by clicking the drop-down menu next to: check for issues. the available menu items include: none — don't show the possible list o...
...ssues. the available menu items include: none — don't show the possible list of issues all issues — check for all types of issues contrast — check for issues with visual contrast keyboard — check for issues with navigating via a keyboard text labels — check for issues with missing text labels when you one of the menu items, firefox scans your document for the type of issues you selected. depending on the size and complexity of your document, this may take a few seconds. when the scan is complete, the left side of the accessibility inspector panel displays only the items that have that type of issue. in the right side of the panel, the checks subpanel lists the specific issue with the selected node. for each type of issue, there is a learn more link to further information on mdn ...

UI Tour - Firefox Developer Tools
it in place of its regular icon. download file opens a file dialog so you can save the file locally. for folders and groups, the following context menu options are available: collapse all collapses all subfolders of the item. expand all expands all subfolders of the item. set directory root changes the source list view so that only that item and its children are visible. the name of the selected directory is shown at the top of the source list pane; clicking this name reverts the pane to showing all source items. ignore (since firefox 76) ignore files in this directory causes all files within the selected directory to be skipped by the debugger. all child files acquired the eye icon, and the folder menu option changes to unignore files in this directory. ignore files outside th...
...all such files acquire the eye icon, and the menu option for that folder changes to unignore files outside this directory. ...
...e execution is paused: variable tooltip hover on a variable show a tooltip with its value inside: call stack when the debugger's paused, you'll see a call stack: each level of the call stack gets a line, with the name of the function and the filename and line number. clicking a line selects the corresponding line in the source pane. note: if you click step over (f10) after changing the selected line in the source pane, the debugger executes until reaching the line following the newly-selected line (disregarding whatever line the debugger originally stopped at). right-clicking in the call stack pane opens a context menu with the following items: restart frame restarts execution at the beginning of the current frame. enable framework grouping collects items belonging to a framework ...

Eyedropper - Firefox Developer Tools
the eyedropper is new in firefox 31. the eyedropper tool enables you to select colors in the current page. it works like a magnifying glass over the page, enabling you to select with pixel precision. ...
...ss over the page, enabling you to select with pixel precision. underneath the magnifying glass it shows the color value for the current pixel using whichever scheme you've selected in settings > inspector > default color unit: you can use it in one of two ways: to select a color from the page and copy it to the clipboard to change a color value in the inspector's rules view to a color you've selected from the page copying a color to the clipboard open the eyedropper in one of these two ways: select "eyedropper" under the "web developer" menu open the page inspector tab and click the eyedropper button in its toolbar as you move the mouse around the page you'll see the current color value in the eyedropper change. clicking copies the current color value to the clipboard. changing a ...
...t color value to the clipboard. changing a color value in the rules view color values appearing in the inspector's rules view have color samples next to them: clicking the sample shows a color picker popup. from firefox 31, the popup contains an eyedropper icon: click this icon to activate the eyedropper. now, when you click the eyedropper, the color in the rules view is set to the color you selected. keyboard shortcuts command windows macos linux select the current color enter return enter dismiss the eyedropper esc esc esc move by 1 pixel arrow keys arrow keys arrow keys move by 10 pixels shift + arrow keys shift + arrow keys shift + arrow keys ...

CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
a flex container: each navbar link is a flex item: the nav element within the header is both a flex item and a flex container which holds the navigation links: in the css pane in the css pane's rules view, any instance of a display: flex declaration gets a small flexbox icon next to the word flex. clicking the icon toggles the display of an overlay on the page, which appears over the selected flex container that displays an outline around each flex item: the overlay will still be shown when you select other elements from the inspector panel, so you can edit related css properties and see how the flex items are affected by your changes. the layout flex container section the css pane's layout view includes a collapsible "flex container" section. if you expand the section without se...
... the overlay on and off. flex item properties the flex items within the flex container are displayed as a numbered list in the flex items section. each entry displays the item's selector. hover over an element to highlight it on the page. ...
... ...

Web Console remoting - Firefox Developer Tools
issue if the server runs on devices with fewer resources. the onattachconsole callback receives a new instance of the webconsoleclient object. this object provides methods that abstract away protocol packets, things like startlisteners(), stoplisteners(), etc. protocol packets look as follows: { "to": "root", "type": "listtabs" } { "from": "root", "consoleactor": "conn0.console9", "selected": 2, "tabs": [ { "actor": "conn0.tab2", "consoleactor": "conn0.console7", "title": "", "url": "https://tbpl.mozilla.org/?tree=fx-team" }, // ... ] } notice that the consoleactor is also available as a global actor. when you attach to the global consoleactor you receive all of the network requests, page errors, and the other events from all of the tabs and win...
...lease look in the console api implementation: dom/base/consoleapi.js. javascript evaluation the evaluatejs request and response packets the web console client provides the evaluatejs(requestid, string, onresponse) method which sends the following packet: { "to": "conn0.console9", "type": "evaluatejs", "text": "document", "bindobjectactor": null, "frameactor": null, "url": null, "selectednodeactor": null, } the bindobjectactor property is an optional objectactor id that points to a debugger.object. this option allows you to bind _self to the debugger.object of the given object actor, during string evaluation. see evalinglobalwithbindings() for information about bindings. the variable view needs to update objects and it does so by binding _self to the debugger.object of the obj...
...w sends strings like these for evaluation: _self["prop"] = value; the frameactor property is an optional frameactor id. the fa holds a reference to a debugger.frame. this option allows you to evaluate the string in the frame of the given fa. the url property is an optional url to evaluate the script as (new in firefox 25). the default source url for evaluation is "debugger eval code". the selectednodeactor property is an optional nodeactor id, which is used to indicate which node is currently selected in the inspector, if any. this nodeactor can then be referred to by the $0 jsterm helper. the response packet: { "from": "conn0.console9", "input": "document", "result": { "type": "object", "classname": "htmldocument", "actor": "conn0.consoleobj20" "extensible": true, ...

HTMLInputElement.webkitEntries - Web APIs
the array can only contain directories if the webkitdirectory property is true. this means the <input> element was configured to let the user choose directories. ...
...ctory property is true. this means the <input> element was configured to let the user choose directories. this property is called webkitentries in the specification due to its origins as a google chrome-specific api. it's likely to be renamed someday. syntax var entries = htmlinputelement.webkitentries; value an array of objects based on filesystementry, each representing one file which is selected in the <input> element. more specifically, files are represented by filesystemfileentry objects, and, if they're allowed, directories are represented by filesystemdirectoryentry objects. example this example shows how to create a file selection <input> element and process the selected files. html <input id="files" type="file" multiple> javascript document.getelementbyid("files").addeventlis...
... specifications specification status comment file and directory entries apithe definition of 'webkitentries' in that specification. draft initial specification. ...

Drag Operations - Web APIs
le which allows a section of content to be dragged. <p draggable="true" ondragstart="event.datatransfer.setdata('text/plain', 'this text may be dragged')"> this text <strong>may</strong> be dragged. </p> the draggable attribute is set to "true", so this element becomes draggable. if this attribute were omitted or set to "false", the element would not be dragged, and instead the text would be selected. ...
...instead, the user must hold down the alt key to select text with the mouse, or use the keyboard. starting a drag operation in this example, a listener is added for the dragstart event by using the ondragstart attribute. ...
... which are described below. however, only the drag data is required. (the default image and drag effects are suitable in most situations.) drag data all drag events have a property called datatransfer which holds the drag data (datatransfer is a datatransfer object). when a drag occurs, data must be associated with the drag which identifies what is being dragged. for example, when dragging the selected text within a textbox, the data associated with the drag data item is the text itself. similarly, when dragging a link on a web page, the drag data item is the link's url. the drag data contains two pieces of information, the type (or format) of the data, and the data's value. the format is a type string (such as text/plain for text data), and the value is a string of text. when the drag begins,...

ParentNode.replaceChildren() - Web APIs
v> </main> it would make sense to use some simple css to lay out the two select lists in a line alongside one another, with the control buttons in between them: main { display: flex; } div { margin-right: 20px; } label, button { display: block; } .buttons { display: flex; flex-flow: column; justify-content: center; } select { width: 200px; } what we want to do is transfer any selected options in the "no" list over to the "yes" list when the "yes" button is pressed, and transfer any selected options in the "yes" list over to the "no" list when the "no" button is pressed. to do this, we give each of the buttons a click event handler, which collects together the selected options you want to transfer in one constant, and the existing options in the list you are transferring to in...
...t then calls replacechildren() on the list to transfer the options to, using the spread operator to pass in all the options contained in both constants. ...
...nt.getelementbyid('no'); const yesselect = document.getelementbyid('yes'); const nobtn = document.getelementbyid('to-no'); const yesbtn = document.getelementbyid('to-yes'); yesbtn.addeventlistener('click', () => { const selectedtransferoptions = document.queryselectorall('#no option:checked'); const existingyesoptions = document.queryselectorall('#yes option'); yesselect.replacechildren(...selectedtransferoptions, ...existingyesoptions); }); nobtn.addeventlistener('click', () => { const selectedtransferoptions = document.queryselectorall('#yes option:checked'); const existingnooptions = document.queryselectorall('#no option'); noselect.replacechildren(...selectedtransferoptions, ...existingnooptions); }); the end result looks like this: specification specification st...

RTCIceCandidatePair - Web APIs
the rtcicecandidatepair dictionary describes a pair of ice candidates which together comprise a description of a viable connection between two webrtc endpoints. it is used as the return value from rtcicetransport.getselectedcandidatepair() to identify the currently-selected candidate pair identified by the ice agent. properties local an rtcicecandidate describing the configuration of the local end of the connection. remote the rtcicecandidate describing the configuration of the remote end of the connection. example in this example, an event handler for selectedcandidatepairchange is set up to update an on-screen display showing the protocol used by the currently selected candidate pair. var icetransport = pc.getsenders()[0].transport.icetransport; var localproto = document.getelementby...
... connection. example in this example, an event handler for selectedcandidatepairchange is set up to update an on-screen display showing the protocol used by the currently selected candidate pair. ...
...tepairchange is set up to update an on-screen display showing the protocol used by the currently selected candidate pair. var icetransport = pc.getsenders()[0].transport.icetransport; var localproto = document.getelementbyid("local-protocol"); var remoteproto = document.getelementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = function(event) { var pair = icetransport.getselectedcandidatepair(); localprotocol.innertext = pair.local.protocol.touppercase(); remoteprotocol.innertext = pair.remote.protocol.touppercase(); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidatepair' in that specification. candidate recommendation initial specification. ...

RTCIceCandidatePairStats - Web APIs
n which versions. priority optional an integer value indicating the candidate pair's priority. readable optional a boolean value indicating whether or not data can be sent over the connection described by the candidate pair. writable optional a boolean value indicating whether or not data can be received on the connection described by the candidate pair. ...
...er the connection described by the candidate pair. writable optional a boolean value indicating whether or not data can be received on the connection described by the candidate pair. non-standard properties selected optional a firefox-specific boolean value which is true if the candidate pair described by this object is the one currently in use. the spec-compliant way to determine the selected candidate pair is to look for a stats object of type transport, which is an rtctransportstats object. ...
...e received on the connection described by the candidate pair. non-standard properties selected optional a firefox-specific boolean value which is true if the candidate pair described by this object is the one currently in use. the spec-compliant way to determine the selected candidate pair is to look for a stats object of type transport, which is an rtctransportstats object. that object's selectedcandidatepairid property indicates whether or not the specified transport is the one being used. usage notes the currently-active ice candidate pair—if any—can be obtained by calling the rtcicetransport method getselectedcandidatepair(), which returns an rtcicecandidatepair object, or null if there isn't a pair selected. the active candidate pair describes the current configuration of the t...

RTCRtpSender.replaceTrack() - Web APIs
ed state differs from that of the original track. the new track is an audio track with a different number of channels fom the original. media sources that have built-in encoders — such as hardware encoders — may not be able to provide the negotiated codec. software sources may not implement the negotiated codec. ...
... original track. the new track is an audio track with a different number of channels fom the original. media sources that have built-in encoders — such as hardware encoders — may not be able to provide the negotiated codec. software sources may not implement the negotiated codec. ...
... sources that have built-in encoders — such as hardware encoders — may not be able to provide the negotiated codec. software sources may not implement the negotiated codec. ...

Selection.deleteFromDocument() - Web APIs
the deletefromdocument() method of the selection interface deletes the selected text from the document's dom. syntax sel.deletefromdocument() parameters none. example this example lets you delete selected text by clicking a button. upon clicking the button, the window.getselection() method gets the selected text, and the deletefromdocument() method removes it. html <p>try highlighting some of the text in this paragraph. ...
... the selected text from the document's dom. syntax sel.deletefromdocument() parameters none. example this example lets you delete selected text by clicking a button. upon clicking the button, the window.getselection() method gets the selected text, and the deletefromdocument() method removes it. html <p>try highlighting some of the text in this paragraph. ...
...mdocument() parameters none. example this example lets you delete selected text by clicking a button. upon clicking the button, the window.getselection() method gets the selected text, and the deletefromdocument() method removes it. html <p>try highlighting some of the text in this paragraph. once you do, you can remove the selected content by clicking the button below.</p> <button>delete selected text</button> javascript let button = document.queryselector('button'); button.addeventlistener('click', deleteselection); function deleteselection() { let selection = window.getselection(); selection.deletefromdocument(); } result specifications specification status comment selection apithe definition of 'selection.deletefromdocument()' in that specification. ...

Selection API - Web APIs
the selection api provides functionality for reading and manipulating the range of text selected by the user. concepts and usage to retrieve the current text range the user has selected, you can use the window.getselection() or document.getselection() method, storing the return value — a selection object — in a variable for futher use. once your selection is in a variable, you perform a variety of operations on it, for example copying the selection to a text string using selection.tostring(), adding a range (as represented by a standard range object) to the selection (or removing one) with selection.addrange()/selection.removerange(), or changing the selection to be the entire contents of a dom node using selection.selectallchildren(). you can run code in response to the selection being...
...)/selection.removerange(), or changing the selection to be the entire contents of a dom node using selection.selectallchildren(). you can run code in response to the selection being changed, or a new selection being started, using the globaleventhandlers.onselectionchange and globaleventhandlers.onselectstart event handlers. selection api interfaces selection represents the range of text selected by the user or the current position of the caret. extensions to other interfaces window.getselection(), document.getselection() returns a selection object representing the range of text selected by the user or the current position of the caret. document.getselection() is basically an alias of window.getselection(). globaleventhandlers.onselectstart represents the event handler that is cal...
...(), document.getselection() returns a selection object representing the range of text selected by the user or the current position of the caret. document.getselection() is basically an alias of window.getselection(). globaleventhandlers.onselectstart represents the event handler that is called when a selectstart event is fired on the current object (i.e. when a new range of text is about to be selected by the user). globaleventhandlers.onselectionchange represents the event handler that is called when a selectionchange event is fired on the current object (i.e. when the selected text range changes). specifications specification status comment selection apithe definition of 'selection' in that specification. working draft the selection api specification is b...

SpeechSynthesisErrorEvent.error - Web APIs
e property was not valid. examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...xamples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...ument.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.error('an error has occurred with the speech synthesis: ' + event.error); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'error' in that specification. draft ...

SpeechSynthesisErrorEvent - Web APIs
s parent interface, event. examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...xamples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...ument.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'speechsynthesiserrorevent' in that specification. draft ...

SpeechSynthesisUtterance.onboundary - Web APIs
ary = function() { ... }; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...xamples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...ument.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onboundary = function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onboundary' in that specification. draft ...

SpeechSynthesisUtterance.onend - Web APIs
end = function() { ... }; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...xamples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...ument.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onend = function(event) { console.log('utterance has finished being spoken after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onend' in that specification. draft ...

SpeechSynthesisUtterance.onerror - Web APIs
ror = function() { ... }; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...xamples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...ument.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onerror' in that specification. draft ...

SpeechSynthesisUtterance.onmark - Web APIs
ark = function() { ... }; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...xamples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...ument.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onmark = function(event) { console.log('a mark was reached: ' + event.name); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onmark' in that specification. draft ...

SpeechSynthesisUtterance.onpause - Web APIs
use = function() { ... }; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...xamples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...ument.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onpause = function(event) { console.log('speech paused after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onpause' in that specification. draft ...

SpeechSynthesisUtterance.onresume - Web APIs
ume = function() { ... }; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...xamples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...ument.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onresume = function(event) { console.log('speech resumed after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onresume' in that specification. draft ...

SpeechSynthesisUtterance.onstart - Web APIs
art = function() { ... }; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...xamples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...ument.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onstart = function(event) { console.log('we have started uttering this speech: ' + event.utterance.text); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onstart' in that specification. draft ...

TextRange - Web APIs
to element.scrollintoview in the lower version of ie. textrange.select() select the current range (i.e. the blue selection seen by the user). textrange.setendpoint() sets the end point of the current range based on the bounds of other textrange. example the following example is valid under ie9. the example gets the textrange through document.selection, and sets the specified element to be selected. ...
...nt range based on the bounds of other textrange. example the following example is valid under ie9. the example gets the textrange through document.selection, and sets the specified element to be selected. ie9 supports the standard alternative range. var range = document.selection.createrange(); var element = document.getelementbyid("test"); range.movetoelementtext(element); range.select(); // selected "sometexttobeselected" <!doctype html> <html> <head> <title>textrange example</title> </head> <body> <p id="test">sometexttobeselected</p> </body> </html> notes use textrange to operate the selection valid only under ie9. the selection interface should be used first, if the browser allows it. document.selection property returns a non-standard selection object, and the selection.creater...
...on; var range = sel.createrange(); alert(range.text); // output plaintext of the selection note that the createrange method does not create a reference. if you want to select the modified range after modifying the selection, you need to call the textrange.select method. selection compatibility the document.selection object is the primary purpose of textrange. this object is used to process the selected ranges in the document, and is mainly implemented by using the textrange interface. according to the standard, a window / document may have multiple non adjacent selection, but only firefox can select multiple ranges through ctrl; generally, only one selected textrange is allowed in ie. however, in other browsers, document does not have a so-called selection attribute - they operate on the sele...

Example and tutorial: Simple synth keyboard - Web APIs
ashion; we provide names for the values 0.0 ("mute") and 1.0 ("100%"). the waveform picker on the right side of the settings bar, we place a label and a <select> element named "waveform" whose options correspond to the available waveforms. ...
...n as needed when handling events. making music playing a tone the playtone() function's job is to play a tone at the given frequency. this will be used by the handler for events triggering keys on the keyboard to start playing the appropriate notes. function playtone(freq) { let osc = audiocontext.createoscillator(); osc.connect(mastergainnode); let type = wavepicker.options[wavepicker.selectedindex].value; if (type == "custom") { osc.setperiodicwave(customwaveform); } else { osc.type = type; } osc.frequency.value = freq; osc.start(); return osc; } playtone() begins by creating a new oscillatornode by calling the audiocontext.createoscillator() method. we then connect it to the master gain node by calling the new oscillator's oscillatornode.connect() method;, wh...
... node will affect the volume of all tones being generated. then we get the type of waveform to use by checking the value of the waveform picker control in the settings bar. if the user has it set to "custom", we call oscillatornode.setperiodicwave() to configure the oscillator to use our custom waveform. doing this automatically sets the oscillator's type to custom. if any other waveform type is selected in the wave picker, we simply set the oscillator's type to the value of the picker; that value will be one of sine, square, triangle, and sawtooth. the oscillator's frequency is set to the value specified in the freq parameter by setting the value of the oscillator.frequency audioparam object. then, at last, the oscillator is started up so that it begins to produce sound by calling the oscillato...

Window.getSelection() - Web APIs
when called on an <iframe> that is not displayed (eg. where display: none is set) firefox will return null, whereas other browsers will return a selection object with selection.type set to none. ...
... when called on an <iframe> that is not displayed (eg. where display: none is set) firefox will return null, whereas other browsers will return a selection object with selection.type set to none. ...
...le, selobj.tostring() is automatically called when it is passed to window.alert(). however, attempting to use a javascript string property or method such as length or substr directly on a selection object will result in an error if it does not have that property or method and may return unexpected results if it does. to use a selection object as a string, call its tostring() method directly: var selectedtext = selobj.tostring(); selobj is a selection object. selectedtext is a string (selected text). related objects you can call document.getselection(), which works identically to window.getselection(). it is worth noting that currently getselection() doesn't work on the content of <textarea> and <input> elements in firefox, edge (legacy) and internet explorer. htmlinputelement.setselection...

:scope - CSS: Cascading Style Sheets
the element is its own scope as expected!"; } html <p id="para"> this is a paragraph. it is not an interesting paragraph. sorry about that. </p> <p id="output"></p> result direct children a situation where the :scope pseudo-class prove to be useful is when you need to get direct descendant of an already retrieved element. ...
...sorry about that. </p> <p id="output"></p> result direct children a situation where the :scope pseudo-class prove to be useful is when you need to get direct descendant of an already retrieved element. ...
... working draft initial definition. ...

Alternative style sheets - CSS: Cascading Style Sheets
et" type="text/css"> <link href="default.css" rel="stylesheet" type="text/css" title="default style"> <link href="fancy.css" rel="alternate stylesheet" type="text/css" title="fancy"> <link href="basic.css" rel="alternate stylesheet" type="text/css" title="basic"> in this example, the styles "default style", "fancy", and "basic" will be listed in the page style submenu, with "default style" pre-selected. when the user selects a different style, the page will immediately be re-rendered using that style sheet. no matter what style is selected, the rules from the reset.css stylesheet will always be applied. try it out click here for a working example you can try out. details any stylesheet in a document falls into one of the following categories: persistent (no rel="alternate", no title="")...
...the reset.css stylesheet will always be applied. try it out click here for a working example you can try out. details any stylesheet in a document falls into one of the following categories: persistent (no rel="alternate", no title=""): always applies to the document. preferred (no rel="alternate", with title="..." specified): applied by default, but disabled if an alternate stylesheet is selected. there can only be one preferred stylesheet, so providing stylesheets with different title attributes will cause some of them to be ignored. see correctly using titles with external stylesheets for a more detailed discussion. alternate (rel="alternate stylesheet", title="..." must be specified): disabled by default, can be selected. when style sheets are referenced with a title attribute on th...
...esheeet"> or <style> element, the title becomes one of the choices offered to the user. style sheets linked with the same title are part of the same choice. style sheets linked without a title attribute are always applied. use rel="stylesheet" to link to the default style, and rel="alternate stylesheet" to link to alternative style sheets. this tells the browser which style sheet title should be selected by default, and makes that default selection apply in browsers that do not support alternate style sheets. specifications specification status comment html living standardthe definition of 'link type "alternate"' in that specification. living standard html living standardthe definition of 'alternative stylesheet' in that specification. living stand...

Linear-gradient Generator - CSS: Cascading Style Sheets
utton"> delete point </div> </div> <div class="ui-color-picker" data-topic="picker"></div> </div> <div class="section"> <div class="title"> active axis </div> <div class="property"> <div class="name"> axis unit </div> <div class="ui-dropdown" data-topic="axis-unit" data-selected="1"> <div data-value='px'> pixels (px) </div> <div data-value='%'> percentage (%) </div> </div> <div id="delete-axis" class="button"> delete line </div> </div> <div class="property"> <div class="ui-slider" data-topic="axis-rotation" data-info="rotation" ...
...bscribe, setpickermode : setpickermode }; })(); /** * ui-dropdown select */ var dropdownmanager = (function dropdownmanager() { 'use strict'; var subscribers = {}; var dropdowns = []; var active = null; var visbility = ["hidden", "visible"]; var dropdown = function dropdown(node) { var topic = node.getattribute('data-topic'); var label = node.getattribute('data-label'); var selected = node.getattribute('data-selected') | 0; var select = document.createelement('div'); var list = document.createelement('div'); var uval = 0; var option = null; var option_value = null; list.classname = 'ui-dropdown-list'; select.classname = 'ui-dropdown-select'; while (node.firstelementchild !== null) { option = node.firstelementchild; option_value = option.getattribute(...
...0 : 1; else this.state = 1 ^ this.state; if (active !== this) { if (active) active.toggle(false); active = this; } if (this.state === 0) this.dropmenu.setattribute('data-hidden', 'true'); else this.dropmenu.r...

Rich-Text Editing in Mozilla - Developer guides
dding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <input type="hidden" name="mydoc"> <div id="toolbar1"> <select onchange="formatdoc('formatblock',this[this.selectedindex].value);this.selectedindex=0;"> <option selected>- formatting -</option> <option value="h1">title 1 &lt;h1&gt;</option> <option value="h2">title 2 &lt;h2&gt;</option> <option value="h3">title 3 &lt;h3&gt;</option> <option value="h4">title 4 &lt;h4&gt;</option> <option value="h5">title 5 &lt;h5&gt;</option> <option value="h6">subtitle &lt;h6&gt;</option> <option value="p">paragraph &lt;p&gt;<...
...on> <option value="h2">title 2 &lt;h2&gt;</option> <option value="h3">title 3 &lt;h3&gt;</option> <option value="h4">title 4 &lt;h4&gt;</option> <option value="h5">title 5 &lt;h5&gt;</option> <option value="h6">subtitle &lt;h6&gt;</option> <option value="p">paragraph &lt;p&gt;</option> <option value="pre">preformatted &lt;pre&gt;</option> </select> <select onchange="formatdoc('fontname',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- font -</option> <option>arial</option> <option>arial black</option> <option>courier new</option> <option>times new roman</option> </select> <select onchange="formatdoc('fontsize',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- size -</option> <option value="1">very small</option> <op...
...dex].value);this.selectedindex=0;"> <option class="heading" selected>- size -</option> <option value="1">very small</option> <option value="2">a bit small</option> <option value="3">normal</option> <option value="4">medium-large</option> <option value="5">big</option> <option value="6">very big</option> <option value="7">maximum</option> </select> <select onchange="formatdoc('forecolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- color -</option> <option value="red">red</option> <option value="blue">blue</option> <option value="green">green</option> <option value="black">black</option> </select> <select onchange="formatdoc('backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- background -</option> <opti...

Making content editable - Developer guides
dding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <input type="hidden" name="mydoc"> <div id="toolbar1"> <select onchange="formatdoc('formatblock',this[this.selectedindex].value);this.selectedindex=0;"> <option selected>- formatting -</option> <option value="h1">title 1 &lt;h1&gt;</option> <option value="h2">title 2 &lt;h2&gt;</option> <option value="h3">title 3 &lt;h3&gt;</option> <option value="h4">title 4 &lt;h4&gt;</option> <option value="h5">title 5 &lt;h5&gt;</option> <option value="h6">subtitle &lt;h6&gt;</option> <option value="p">paragraph &lt;p&gt;<...
...on> <option value="h2">title 2 &lt;h2&gt;</option> <option value="h3">title 3 &lt;h3&gt;</option> <option value="h4">title 4 &lt;h4&gt;</option> <option value="h5">title 5 &lt;h5&gt;</option> <option value="h6">subtitle &lt;h6&gt;</option> <option value="p">paragraph &lt;p&gt;</option> <option value="pre">preformatted &lt;pre&gt;</option> </select> <select onchange="formatdoc('fontname',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- font -</option> <option>arial</option> <option>arial black</option> <option>courier new</option> <option>times new roman</option> </select> <select onchange="formatdoc('fontsize',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- size -</option> <option value="1">very small</option> <op...
...dex].value);this.selectedindex=0;"> <option class="heading" selected>- size -</option> <option value="1">very small</option> <option value="2">a bit small</option> <option value="3">normal</option> <option value="4">medium-large</option> <option value="5">big</option> <option value="6">very big</option> <option value="7">maximum</option> </select> <select onchange="formatdoc('forecolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- color -</option> <option value="red">red</option> <option value="blue">blue</option> <option value="green">green</option> <option value="black">black</option> </select> <select onchange="formatdoc('backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- background -</option> <opti...

Protocol upgrade mechanism - HTTP
sions specifies one or more protocol-level websocket extensions to ask the server to use. using more than one sec-websocket-extension header in a request is permitted; the result is the same as if you included all of the listed extensions in one such header. sec-websocket-extensions: extensions extensions a comma-separated list of extensions to request (or agree to support). these should be selected from the iana websocket extension name registry. extensions which take parameters do so by using semicolon delineation. for example: sec-websocket-extensions: superspeed, colormode; depth=16 sec-websocket-key provides information to the server which is needed in order to confirm that the client is entitled to request an upgrade to websocket. this header can be used when insecure (http) clien...
... its own, which the client will validate before delivering the upgrade response to you. the server's response's sec-websocket-accept header will have a value computed based upon the specified key. sec-websocket-protocol the sec-websocket-protocol header specifies one or more websocket protocols that you wish to use, in order of preference. the first one that is supported by the server will be selected and returned by the server in a sec-websocket-protocol header included in the response. you can use this more than once in the header, as well; the result is the same as if you used a comma-delineated list of subprotocol identifiers in a single header. sec-websocket-protocol: subprotocols subprotocols a comma-separated list of subprotocol names, in the order of preference. the subprotocols m...
...eturned by the server in a sec-websocket-protocol header included in the response. you can use this more than once in the header, as well; the result is the same as if you used a comma-delineated list of subprotocol identifiers in a single header. sec-websocket-protocol: subprotocols subprotocols a comma-separated list of subprotocol names, in the order of preference. the subprotocols may be selected from the iana websocket subprotocol name registry or may be a custom name jointly understood by the client and the server. sec-websocket-version request header specifies the websocket protocol version the client wishes to use, so the server can confirm whether or not that version is supported on its end. sec-websocket-version: version version the websocket protocol version the client wis...

XUL Migration Guide - Archive of obsolete content
onclick: removeforwardbutton }); there are more useful examples of this technique in the jetpack wiki's collection of third party modules. accessing tabbrowser this example uses the action button api, which is only available from firefox 29 onwards. the tabs/utils module gives you direct access to the tabbrowser object and the xul tab objects it contains. ...
...ful examples of this technique in the jetpack wiki's collection of third party modules. accessing tabbrowser this example uses the action button api, which is only available from firefox 29 onwards. the tabs/utils module gives you direct access to the tabbrowser object and the xul tab objects it contains. ...

dev/panel - Archive of obsolete content
an.js. ...
...in the meantime, here's a quick guide. ...

Tabbox - Archive of obsolete content
is discouraged since it could be removed at any time. try to avoid using it. ...
...t.getelementbyid("tabbox"); var currentindex = tabbox.selectedindex; if(currentindex>=0){ var tabs=document.getelementbyid("tabs"); var tabpanels=document.getelementbyid("tabpanels"); tabpanels.removechild(tabpanels.childnodes[currentindex]); tabs.removeitemat(currentindex); /*work around if last tab is removed, widget fails to advance to next tab*/ if(-1 == tabbox.selectedindex && tabs.childnodes.length>0){ tabbox.selectedindex=0; } } creating a close tab button to have a tab close button, you must configure the style. examples: .tabs-closebutton { list-style-image: url(http://mozilla.org/favicon.ico); } .tabs-closebutton { list-style-image: url("chrome://global/skin/icons/close.gif"); } ...

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
y selecting the tools > dom inspector menu item. firefox 31 open the dom inspector by open menu>developer>dom inspector menu item. type chrome://browser/content/browser.xul into the url input field at the top, then click the inspect button. a browser pane will appear in the lower part of the window. click the spots numbered 1 and 2 in figure 5, in that order; the menu element (3) will then be selected. expand spot 3; this will disclose the area numbered 4, with several menuitem elements. the menupop element 4 contains the merge point where you’re going to be adding a new menu item; you can see that it has the id menu_toolspopup. look through the menuitem elements within this menupop element and determine where you want to add your new element. for the time being, let’s locate it in the s...
......

Creating reusable content with CSS and XBL - Archive of obsolete content
rmation: xbl bindings the structure provided by markup languages and css is not ideal for complex applications where parts need to be self-contained and reusable. you can place stylesheets in separate files, and you can place scripts in separate files. but you must link those files from the document as a whole. another structural limitation concerns content. ...
...ts need to be self-contained and reusable. you can place stylesheets in separate files, and you can place scripts in separate files. but you must link those files from the document as a whole. another structural limitation concerns content. you can use css to provide content for selected elements, but the content is limited to text and images, and its positioning is limited to before or after the selected element. mozilla provides a mechanism that overcomes these limitations: xbl (xml bindings language). you can use xbl to link selected elements to their own: stylesheets content properties and methods event handlers because you avoid linking everything at the document level, you can make self-contained parts that are easy to maintain and reuse. more details for more information ...

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
ig blue</span> mozilla (html): <font color="blue">big blue</font> internet explorer: <font color="blue">big blue</font> below is a list of commands that execcommand in mozilla supports: table 6. rich text editing commands command name description argument bold toggles the selection's bold attribute. --- createlink generates an html link from the selected text. the url to use for the link delete deletes the selection. --- fontname changes the font used in the selected text. the font name to use (arial, for example) fontsize changes the font size used in the selected text. the font size to use fontcolor changes the font color used in the selected text. the color to use indent ...
...ht justifies the content at the current line to the right. --- outdent outdents the block where the caret is. --- redo redoes the previous undo command. --- removeformat removes all formatting from the selection. --- selectall selects everything in the rich text editor. --- strikethrough toggles the strikethrough of the selected text. --- subscript converts the current selection into subscript. --- superscript converts the current selection into superscript. --- underline toggles the underline of the selected text. --- undo undoes the last executed command. --- unlink removes all link information from the selection. --- usecss toggl...

Tamarin build documentation - Archive of obsolete content
ile 6 sdk, you can build for windows mobile (arm) targets. apple xcode the project files are designed for xcode 3.0. see "platform/mac/avmplus/avmplus.xcodeproj/". xcode 2.2, 2.3, and 2.4 will not work. there are two targets in the xcode ide, 'avm' for 32-bit builds and 'avm64' for 64-bit builds. there is also an aggregate target that will build both targets. note that, whereas before when you selected the aggregate target you got a 'shell' 32-bit executable and a 'shell64' 64-bit executable in the same folder, now because of the fix to bug 478714 you will get an 'avm' executable in two separate folders, /debug and /debug64 respectively. the command to build from the terminal is: $ cd tamarin-redux $ xcodebuild archs=ppc -project platform/mac/avmshell/avmshell.xcodeproj for a debug bu...
...rce files have more than the eclipse standard threshold of 5000, they do not appear as indexed. the threshold can be adjusted in eclipse preferences >> c/c++ >> editor >> scalability. *important* project-specific settings for the cdt indexer do not appear to work (it looks like a bug in eclipse), so you have to set these manually/globally. what we want is to have the indexer track the currently selected build config (so the correct conditional compiles are highlighted in the editor). to enable this go to eclipse preferences >> c/c++ >> indexer, then select 'use active build configuration' in the 'build configuration for the indexer' section. importing the project into eclipse file >> import >> general >> existing projects into workspace click next the root directory should be the full pat...

Venkman Introduction - Archive of obsolete content
nu and from the console to stop at errors or at exceptions. the continue button to the right of the stop button dismisses the stop mode and specifies that scripts should be executed normally, without pausing as each statement is executed. the pretty print button toggles pretty print mode. while in pretty print mode, the contents of the source view will contain the decompiled source 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 lo...
... stack view is the one in which the debugger stopped, the function below it is the caller, below that is the caller's caller, and so on. these items are referred to as stack frames. double-clicking on a stack frame will change the "current" frame. this will cause the source of function to be displayed in the source code view, the local variables view will change to display variables local to the selected stack frame, and script evaluated in the interactive session view will be relative to the selected frame. if you would like to copy the current call stack to the clipboard, select "dump stack to interactive session" from the context menu, or type /where in the interactive session view. you may then copy the text from the interactive session view. if you would like to keep venkman from stopping ...

confirm - Archive of obsolete content
rs up to 8. previous gecko versions only support the first, one-parameter method and will throw an error on occuring the extended form. see the notes at the end of this document for a safe way to implement a fallback. atext the string to be displayed in the confirmation dialog. this string is typically in the form of a prompt for the user (e.g., "are you sure you want to delete the selected file(s)?"). adialogtitle the string to be used as the dialog title. defaults to "confirm" (or the localized equivalent). abuttonflags a set of flags defining the buttons that should appear in the dialog. the value is calculated by multiplying the corresponding button position constant with a button title constant for each button, then adding the results and any add...
...also: user closed the dialog window 1 'ok' or button 0 2 the third button previous versions of the xpinstall api stated the return value of confirm() to be a boolean. that is incorrect, confirm() always returned a plain integer (in pre-gecko-1.8 versions either 0 o...

current - Archive of obsolete content
...
... ...

XUL Events - Archive of obsolete content
ovide feedback to the user. attribute: onmouseover mouseup this event is sent when the mouse is released on an element. attribute: onmouseup select this event is sent to a listbox or tree when an item is selected. attribute: onselect unload this event is sent to a window when the window has closed. this is done after the close event. you should place this event handler on the window element. attribute: onunload mutation dom events ...
...ifies 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 checkboxstatechange event does not bubble. radiostatechange this event is sent when a radio button is selected, either by the user or a script. normally, you would use the command event to listen to radio button selection changes, however, the command event is only sent when the user changes the selected radio button, while the radiostatechange event is also sent when a script modifies the selection. for user changes, the radiostatechange event is sent before the command event. the radiostatechange event ...

Introduction to XUL - Archive of obsolete content
broadcast any change of state, which can be tied to the value of any attribute in another xul widget. for more complete documentation, see broadcasters and observers. an example window below is a complete sample xul document that describes a window with a menu bar and an html content area. the menu bar has a menu, file, with a single menu item that dumps "hello world!" to the debug console when selected. the content area will display the contents of the file contentframe.html. this code introduces several concepts useful for creating real world windows not explicitly covered in this document. follow the links for details. <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?> <!doctype window> <window id="main-window" xmlns:html="http://www.w3.org/1999/xhtm...
...e, the above style rule would apply to the main window and dictates that the window should consume the full width and height available to it in a content area. the next element in the example declares the menubar. the menubar contains a single menu called "file". this menu contains a single menu item that has a simple javascript onclick handler attached to it. this handler fires when the menu is selected by the user, and it dumps the text "hello world!" to the debug console. (see menu bars and menus for details.) finally there is an html iframe. note that the frame is qualified with the prefix html:, since it is an html object being used inside a default xul namespace. the frame also has a special attribute called flex, which indicates how much the frame is allowed to stretch to consume availabl...

moveByOffset - Archive of obsolete content
if isselectingrange is false, any existing selection is cleared. items that are hidden are skipped. ...
...home movebyoffset( offset , isselecting, isselectingrange) return type: no return value if offset is positive, adjusts the focused item forward by that many items. if offset is negative, adjusts the focused item backward by that many items. if isselecting is true, then the selection is also adjusted. if isselectingrange is also true, then the new item is selected in addition to any currently selected items. if isselectingrange is false, any existing selection is cleared. items that are hidden are skipped. ...

Methods - Archive of obsolete content
« xul reference home acceptdialog additemtoselection addpane addprogresslistener addsession addtab addtabsprogresslistener advance advanceselectedtab appendcustomtoolbar appendgroup appenditem appendnotification blur cancel canceldialog centerwindowonscreen checkadjacentelement clearresults clearselection click close collapsetoolbar contains decrease decreasepage docommand ensureelementisvisible ensureindexisvisible ensureselectedelementisvisible expandtoolbar extra1 extra2 focus getbrowseratindex getbrowserfordocument getbrowserfortab getbrowserindexfordocument getbutton getdefaultsession geteditor getelementsbyattribute getelementsbyattributens getformattedstring gethtmleditor getindexoffirstvis...
...nt getbutton getdefaultsession geteditor getelementsbyattribute getelementsbyattributens getformattedstring gethtmleditor getindexoffirstvisiblerow getindexofitem getitematindex getnextitem getnotificationbox getnotificationwithvalue getnumberofvisiblerows getpagebyid getpreviousitem getresultat getresultcount getresultvalueat getrowcount getsearchat getselecteditem getsession getsessionbyname getsessionresultat getsessionstatusat getsessionvalueat getstring goback gobackgroup godown goforward goforwardgroup gohome goto gotoindex goup hidepopup increase increasepage insertitem insertitemat invertselection loadgroup loadonetab loadtabs loaduri loaduriwithflags makeeditable movebyoffset moveto mov...

Extensions - Archive of obsolete content
xt menu associated with the browser area. normally, this menu displays menu items specific to what was context clicked or focused. for instance, opening a context menu for a link displays items to open the link in a new window or tab and to save or bookmark the link. an extension may modify the context menu to show additional items that either appear always, or appear only when certain content is selected. in firefox, the browser area that displays web pages has only one context menu. instead of having separate context menus depending on what type of element was the target of the context menu, only one context menu is used and items that don't apply to that type of element are hidden from the menu as needed. thus, you can add items to the firefox context menu by overlaying this single menu. this ...
...et or an ancestor has a background image. onmathml true if the target is a mathml element. onlink true if the target is a link. onmailtolink true if the target is a link to an email address (a mailto: link). linkurl the url of the link that was context clicked. inframe true if the context click occured from within a frame. istextselected true if text is selected. (note: was removed from thunderbird 3 - see bug 463003 for a replacement) iscontentselected true if anything, text or otherwise, is selected. in the following example, the menuitem is hidden unless the target is an image or a link. function thumbnailsshowhideitems(event) { var show = document.getelementbyid("thumbnail-show"); show.hidden = !(gc...

MenuButtons - Archive of obsolete content
open the menu and not execute a command directly. this works similarly to the menu tag, and would be used to present a set of commands to execute. to create a button of this type, set the type attribute of the button to 'menu'. for instance, in the following example, pressing the 'view' button will open a menu which allows the user to select from a set of radio menuitems. presumably, when one is selected, the application view would be changed accordingly. when using the keyboard, pressing the down key will open the menu while the button is focused. <button type="menu" label="view"> <menupopup> <menuitem label="icons" type="radio" name="view"/> <menuitem label="list" type="radio" name="view"/> <menuitem label="details" type="radio" name="view"/> </menupopup> </button> note t...
...board, pressing the down key will open the menu while the button is focused. <button type="menu" label="view"> <menupopup> <menuitem label="icons" type="radio" name="view"/> <menuitem label="list" type="radio" name="view"/> <menuitem label="details" type="radio" name="view"/> </menupopup> </button> note that when the menu is closed, the button doesn't indicate which view is selected. if you do want this indication, you should use a menulist instead. the same technique can be used for toolbarbuttons as well as buttons. in the example below a toolbarbutton with an image has a menu associated with it. <toolbarbutton type="menu" image="cookies.png"> <menupopup> <menuitem label="block cookies" type="checkbox"/> <menuitem label="clear cookies"/> </menupopup> </toolba...

date - Archive of obsolete content
...
... ...

hour - Archive of obsolete content
...
... ...

minute - Archive of obsolete content
...
... ...

month - Archive of obsolete content
...
... ...

pageIndex - Archive of obsolete content
...
... ...

second - Archive of obsolete content
...
... ...

year - Archive of obsolete content
...
... ...

Property - Archive of obsolete content
rmanentchild flex focused focuseditem forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label labelelement lastpermanentchild lastselected left linkedpanel listboxobject locked markupdocumentviewer max maxheight maxlength maxrows maxwidth menu menuboxobject menupopup min minheight minresultsforpopup minwidth minute minuteleadingzero mode month monthleadingzero name next nomatch notificationshidden object observes onfirstpage onlastpage open ordinal orient pack pag...
...ceholder pmindicator popup popupboxobject popupopen position predicate preferenceelements preferencepanes preferences priority radiogroup readonly readonly ref resource resultspopup scrollboxobject scrollincrement scrollheight scrollwidth searchbutton searchcount searchlabel searchparam searchsessions second secondleadingzero securityui selected selectedbrowser selectedcount selectedindex selecteditem selecteditems selectedpanel selectedtab selectionend selectionstart selstyle seltype sessioncount sessionhistory showcommentcolumn showpopup size smoothscroll spinbuttons src state statusbar statustext stringbundle strings style subject suppressonselect tabcontainer tabindex tabs ...

List Controls - Archive of obsolete content
xample has been changed to display only 3 rows at a time. values have also been added to each item in the list. list boxes have some additional features, which will be described later. multi-column list boxes the listbox also supports multiple columns. each cell may have arbitrary content within it, although usually only text is used. when the user selects an item in the list, the entire row is selected. you cannot have a single cell selected. two tags are used to specify the columns in the listbox. the listcols element is used to hold the column information, each of which is specified using a listcol element. you will need one listcol element for each column in the listbox. the listcell element may be used for each cell in a row. if you want to have three columns, you will need to add three lis...
... which creates the textbox with the button beside it. the second, menupopup, creates the popup window which appears when the button is clicked. the third, menuitem, creates the individual choices. its syntax is best described with the example below: example 5 : source view <menulist label="bus"> <menupopup> <menuitem label="car" /> <menuitem label="taxi" /> <menuitem label="bus" selected="true" /> <menuitem label="train" /> </menupopup> </menulist> this menulist will contain four choices, one for each menuitem element. to show the choices, click the arrow button on the menulist. when one is selected, it appears as the choice in the menulist. the selected attribute is used to indicate the value that is selected by default. editable menulist by default, you can only select...

Styling a Tree - Archive of obsolete content
as 'unread' are set. treechildren::-moz-tree-row(readonly) { border: 1px 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...
...-service;1"]. getservice(components.interfaces.nsiatomservice); props.appendelement(aserv.getatom("makeitblue")); } else { return "makeitblue"; } } } this function would be defined as part of a view object. it first checks to see which row is being requested and sets a property for cells in every fourth row. example style sheet treechildren::-moz-tree-row(selected) { background-color: #ffffaa; } treechildren::-moz-tree-row(odd) { background-color: #eeeeee; } treechildren::-moz-tree-row(odd, selected) { background-color: #ffffaa; } treechildren::-moz-tree-cell-text(selected) { color: #000000; } treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; } note that you can also style e.g. all rows, without the ...

Tabboxes - Archive of obsolete content
wo tabs have been added, the first labeled 'mail' and the other 'news'. when the user clicks on the mail tab, the contents of the first tab page will be displayed below the tabs. in this case, the page with the check box labeled 'automatically check for mail' will appear. when the second tab is clicked, the page containing the button labeled 'clear news buffer' will appear instead. the currently selected tab element is given an additional selected attribute which is set to true. this alters the appearance of the currently selected tab to make it look selected. only one tab will have a true value for this attribute at a time. position of the tabs finally, you can change the position of the tabs so that they appear on any side of the tab pages. there is no special syntax to do this. you simply se...
...(and select it by default) that will contain some options for searching. this may not be the best interface for doing this, but we'll use it to demonstrate tabs. the label across the top and the search criteria box will need to go on the first tab. we'll add some options on the second tab. the progress bar and the buttons can stay on the main dialog, outside of the tabs. <vbox flex="1"> <tabbox selectedindex="1"> <tabs> <tab label="search"/> <tab label="options"/> </tabs> <tabpanels> <tabpanel id="searchpanel" orient="vertical"> <description> enter your search criteria below and select the find button to begin the search. </description> <spacer style="height: 10px"/> <groupbox orient="horizontal"> <caption label="search criteria"/> <men...

The Chrome URL - Archive of obsolete content
be expecting arguments to be supplied from the window that opened them. you will also see chrome urls without specified filenames, such as: chrome://browser/content/ in this case, only the package name and part is specified. this type of reference will automatically select an appropriate file from that right directory. for content, a file with the same name of the package and a xul extension is selected. in the above example, the file browser.xul is selected. for messenger, messenger.xul would be selected. when creating your own applications, you will want to create a file for your main window with the same name as the package, so it can be referred to using this shorter form. this is convenient since all a user needs to know is the package name to be able to open the application. of course, for...
...your main window with the same name as the package, so it can be referred to using this shorter form. this is convenient since all a user needs to know is the package name to be able to open the application. of course, for extensions that modify the browser interface, the user will not need to know the url, as the extension will present itself in the ui. for a skin, the file <package name>.css is selected; for a locale, the file <package name>.dtd is selected. remember, the chrome url is not related to where it is located on disk. the first two pieces of the chrome url are the package name and the part (either content, skin, or locale). while it is common to put the content files in a directory called 'content', this is purely out of convention, and these files may be placed in an entirely differe...

XUL Changes for Firefox 1.5 - Archive of obsolete content
tal and vertical scrollbars. <richlistbox> and <richlistitem> the <richlistbox> and <richlistitem> elements are used for creating lists containing arbitrary content. this element works similarly to the <listbox> which is designed primarily for lists of textual items. the <richlistbox> supports much of the same api as the <listbox> and single items, created with the <richlistitem> element may be selected. see xul:richlistbox for more information. preferences system several elements have been added which may be used for creating preference windows. these windows are special types of dialogs which support several panels, each of which may be contained in the same file or a separate file. a set of icons will appear across the top of the dialog allowing the user to switch panels. along with the new...
...068). this has been fixed in firefox 1.5 and all code depending on this non zero-based behaviour should be changed. <stringbundle> the <stringbundle> element has a strings property which may be used to retrieve an enumeration of all of the strings in the bundle. draggable tabs the tabbrowser now allows the user to rearrange tabs by dragging them. <tabbox> the <tabbox> element now supports a selectedindex attribute to specify the tab to be selected by default. loading overlays dynamically xul now supports loading overlays dynamically with the document.loadoverlay function. original document information author(s): neil deakin ...

XUL Questions and Answers - Archive of obsolete content
alternatively it can send generic xml describing the attributes of the items in the menu and you generate the xul on client by applying an xslt transform.) can i change a xul tree cell/row/item background color with javascript? to set the background color you need to set the property for the cell/row and not for the item. ...
... of the items in the menu and you generate the xul on client by applying an xslt transform.) can i change a xul tree cell/row/item background color with javascript? to set the background color you need to set the property for the cell/row and not for the item. ...

XUL controls - Archive of obsolete content
menupopup> <menuitem label="lions" value="l"/> <menuitem label="tigers" value="t"/> <menuitem label="bears" value="b"/> </menupopup> </menulist> more information about the menulist element. menulist reference related elements: menupopup menuitem <menulist editable="true"> an editable menulist is like a standard menulist except that the selected value is displayed in a textbox where it may be modified directly or values not in the popup list may be entered. <menulist editable="true"> <menupopup> <menuitem label="elephants"/> <menuitem label="kangaroos"/> <menuitem label="bats" /> </menupopup> </menulist> more information about the editable menulist element. menulist reference related elements:...
... menulist reference related elements: menupopup menuitem <progressmeter> a progress meter is used to display the progress of a lengthy task. <progressmeter value="40"/> more information about the progressmeter element. progressmeter reference <radio> a radio button is used when only one of a set of options may be selected at a time. <radiogroup> <radio label="light" value="light"/> <radio label="heavy" value="heavy"/> <radio label="heay" value="hea"/> </radiogroup> more information about the radio element. radio reference related elements: radiogroup <richlistbox> the richlistbox displays a list of items where one or more may selected. unlike the listbox ...

XUL Event Propagation - Archive of obsolete content
up> </menu> </vbox> <spring flex="1" /> </vbox> </window> in this file, the lowest-down, or "leaf" elements are the menuitems. the hierarchy of the interface can be represented as follows: when one of these menuitems raises an event, any of the elements above it in the hierarchy can handle it. in the example above, when the menuitem raises the "command" event, indicating that it has been selected, the menupopup, the menu itself, the parent box, or the root window element itself can all take advantage of this. event bubbling this availability of events in places other than their element of origin is known as "event propagation" or event bubbling. event bubbling means you can handle events anywhere above the event-raising element in the hierarchy. if you cut and paste the source code fr...
... higher up, however, it is very often necessary to determine which element below the handler actually raised the event. for example, if an event handler at the menu is handling an event raised by one of the menu items, then the menu should be able to identify the raising element and take the appropriate action, as in the following example, where a javascript function determines which menuitem was selected and responds appropriately: <script> function docmd(el) { v = el.getattribute("value"); if (v == "new") alert("new clicked"); else if (v == "open") alert("open clicked"); else alert("close clicked"); } </script> ... <menu class="menu" value="file" oncommand="docmd(event.target)"> <menupopup> <menuitem oncommand="alert('new item alert')" value="new" /> <menuitem value="o...

commandset - Archive of obsolete content
"cmd_open" oncommand="alert('open!');"/> <command id="cmd_help" oncommand="alert('help!');"/> </commandset> attributes commandupdater type: boolean if true, the commandset is used for updating commands. typically, this is used to update menu commands such as undo and cut based on when an event occurs. for example, since the cut command is only valid when something is selected, a command updater might be used when the select event occurs. events type: comma-separated list a comma-separated list of event names that the command updater will update upon. if this attribute is not specified, or you set it to the value '*', all events are valid. valid events are listed below, or you can use your own events. you can send a custom event by calling the...
...ed list of event names that the command updater will update upon. if this attribute is not specified, or you set it to the value '*', all events are valid. valid events are listed below, or you can use your own events. you can send a custom event by calling the updatecommands method of the command dispatcher. focus: occurs when the focused element changes. select: occurs when the selected text changed. clipboard: occurs when the clipboard is changed. undo: occurs when the undo buffer is changed. oncommandupdate type: script code this event occurs when a command update occurs. you would use this to update the disabled status of items. targets type: comma-separated list of element ids a comma-separated list of e...

iframe - Archive of obsolete content
default is false. src type: uri the uri of the content to appear in the element. type type: one of the value...
...displays the web page. the window for the primary content can be retrieved more conveniently using window.content. content-targetable one browser among many for content. the content that is loaded inside the browser is not allowed to access the chrome above it. this is the preferred value for any browser element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment. chrome (default behaviour): a browser, intended to be used for loading privileged content using a chrome:// uri. don't use for content from web, as this may cause serious security problems! transparenttype: one of the values belowset the background of an iframe as transparent.transparentthis results in the iframe's background being transparent. this can be used to worka...

menu - Archive of obsolete content
l be displayed. this element is also used to create submenus. more information is available in the xul tutorial. ...
... the menu or menulist. this property is read-only. open type: boolean this property will be set to true when the menu is open. the menu may be opened by setting the open property to true and closed by setting it to false. parentcontainer type: menu element read only property that returns the containing menu element, or null if there isn't a containing menu. selected type: boolean this property's value is true if this element is selected, or false if it is not. this property is read only. this property is available for menuitem and menuseparator elements in firefox 3. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and...

wizard - Archive of obsolete content
ed on several pages. this element provides the header and buttons along the bottom, and also handles navigation between the pages. each page should be constructed using a wizardpage. the pages are displayed in the order that they are placed in the wizard, unless you use the next and pageid attributes on the pages to change the sequence. the wizard will rendered in a manner suitable for the user's selected theme and platform. in newer versions of mozilla, a statusbar may be placed directly inside the wizard element which will be shared among all pages. more information is available in the xul tutorial. attributes firstpage, lastpage, pagestep, title, windowtype properties canadvance, canrewind, currentpage, onfirstpage, onlastpage, pagecount, pageindex, pagestep, title, wizardpages me...
...ge type: boolean this property is set to true if the user is on the first page, which may or may not be the first index. onlastpage type: boolean this property is set to true if the user is on the last page of the wizard. pagecount type: integer this property holds the number of pages in the wizard. pageindex type: integer this property returns the index of the currently selected page. you can change the selected page by modifying this property. pagestep type: integer this property returns the number of pages that the user has navigated through so far, meaning that the user would press the back button this many times to go back to the beginning. this property is different than pageindex, because pages are not necessarily navigated in order. title type: stri...

CSS - Archive of obsolete content
ng the zoom behavior that occurs when a user hits the zoom limit during page manipulation.-ms-content-zoom-limitthe -ms-content-zoom-limit css shorthand property is a microsoft extension that specifies values for the -ms-content-zoom-limit-min and -ms-content-zoom-limit-max properties.-ms-content-zoom-limit-maxthe -ms-content-zoom-limit-max css property is a microsoft extension that specifies the selected elements' maximum zoom factor.-ms-content-zoom-limit-minthe -ms-content-zoom-limit-min css property is a microsoft extension that specifies the minimum zoom factor.-ms-content-zoom-snapthe -ms-content-zoom-snap css shorthand property is a microsoft extension that specifies values for the -ms-content-zoom-snap-type and -ms-content-zoom-snap-points properties.-ms-content-zoom-snap-pointsthe -ms-con...
...ens or closes the drop-down menu. typically it is a triangle that points downward.::-ms-fillthe ::-ms-fill css pseudo-element is a microsoft extension that represents a progress bar displayed by <progress>.::-ms-fill-lowerthe ::-ms-fill-lower css pseudo-element represents the lower portion of the track of a slider control; that is, the portion corresponding to values less than the value currently selected by the thumb. a slider control is one possible representation of <input type="range">.::-ms-fill-upperthe ::-ms-fill-upper css pseudo-element is a microsoft extension that represents the upper portion of the track of a slider control; that is, the portion corresponding to values greater than the value currently selected by the thumb. a slider control is one possible representation of <input type=...

Mozilla XForms User Interface - Archive of obsolete content
o select a file (see the spec). range allows the user to choose a value from within a specific range of values. it is represented by a slider widget (see the spec). trigger allows the user to initiate actions (see the spec). it can have the following representations: button - default representation. link/clickable text - used when appearance = 'minimal'. submit invokes the submission of the selected instance data to its target destination, which could be local or remote (see the spec). it can have the following representations: button - default representation. link/clickable text - used when appearance = 'minimal'. select list control. allows the user to choose one or multiple values from a list of pre-defined values (see the spec). it can have the following representations: listbox...
...ill be displayed in the form. that node will serve as the context node for any relative xpath expressions in that set of repeated markup. for example, if a repeat is bound to a nodeset that contains 5 nodes and the repeat contains an output element that echoes the current node, then the user will see 5 outputs in the form. combined together, these outputs would echo the value of every node in the selected nodeset. ...

Correctly Using Titles With External Stylesheets - Archive of obsolete content
lesheet that includes a title attribute cannot be persistent, and is likely to be ignored by the web browser. any link element referring to a stylesheet with a title attribute must be either preferred or alternate, depending on the value of the rel attribute. in a document that refers to alternate stylesheets, the preferred stylesheet will be used so long as none of the alternate stylesheets are selected by the user. thus, when the document is loaded, the browser will use all of the persistent stylesheets and one preferred stylesheet (but remember, there should only be one preferred stylesheet). once the user selects one of the alternate stylesheets, the preferred stylesheet will no longer be used, although the user can always re-select the preferred stylesheet. the primary use for preferred sty...
... should only be one preferred stylesheet). once the user selects one of the alternate stylesheets, the preferred stylesheet will no longer be used, although the user can always re-select the preferred stylesheet. the primary use for preferred stylesheets is to designate one stylesheet as preferred for the document display; that is, it is the "default" presentation. if any alternate stylesheet is selected, then the preferred stylesheet is dropped in favor of the user-selected alternate stylesheet. this is different than persistent stylesheets, which are always applied to a document, whether an alternate stylesheet has been selected or not. recommendations authors should make sure that any stylesheet which should always be applied is persistent instead of preferred. to quote from html 4.01 specif...

Building up a basic demo with PlayCanvas editor - Game development
ake sure that the new shape appears in the root, and not as a child of the box) then click on the big add entity (plus) button and select cylinder from the dropdown list — it will add a new cylinder shape to the scene. now follow the same steps as we did before when coloring the cube: create a new material using the add asset (plus) button. make sure the new material in the assets panel is selected, to bring up the entity inspector. give the material a new name, along the lines of cylindermaterial. click diffuse, then click the color picker — give it an orange color (we used ff9500.) drag and drop the cylindermaterial icon onto the cylinder object on the sceene to apply that color. follow the same approach again to add a cone to the scene, giving it a grayish color (we used eaeff2.
...his.entity refers to the object to which the script will be attached (the box); using the dt variable, which contains the delta time passed since the previous frame, we can rotate the box by a different amount around all three axes. save the changes using the save button in the top right of the code editor, then return to the main editor tab. here, follow these steps: be sure you have the box selected on the scene. click on add component, then script in the entity inspector. at the bottom of the screen you can see the list of scripts available — for now there's only boxanimation.js — clicking it will add the animation script to the box object. the cylinder now we'll do the same steps for cylinder. first: create a new script asset. name it cylinderanimation.js. double click the ...

Debugging CSS - Learn web development
erty is causing the problem. the following video provides some useful tips on debugging css using the firefox devtools: editing values in addition to turning properties on and off, you can edit their values. perhaps you want to see if another color looks better, or wish to tweak the size of something? devtools can save you a lot of time editing a stylesheet and reloading the page. with box1 selected, click on the swatch (the small colored circle) that shows the color applied to the border. a color picker will open up and you can try out some different colors; these will update in real time on the page. in a similar fashion, you could change the width or style of the border. adding a new property you can add properties using the devtools. perhaps you have realised that you don't want your...
... understanding the box model in previous lessons we have discussed the box model, and the fact that we have an alternate box model that changes how the size of elements are calculated based on the size you give them, plus the padding and borders. devtools can really help you to understand how the size of an element is being calculated. the layout view shows you a diagram of the box model on the selected element, along with a description of the properties and values that change how the element is laid out. this includes a description of properties that you may not have explicitly used on the element, but which do have initial values set. in this panel, one of the detailed properties is the box-sizing property, which controls what box model the element uses. compare the two boxes with classes bo...

Combinators - Learn web development
ith files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the different combinator selectors that can be used in css. descendant combinator the descendant combinator — typically represented by a single space ( ) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc) element matching the first selector. selectors that utilize a descendant combinator are called descendant selectors. body article p in the example below, we are matching only the <p> element which is inside an element with a class of .box. child combinator the child combinator (>) is placed between two css se...
...if you want to select siblings of an element even if they are not directly adjacent, then you can use the general sibling combinator (~). to select all <img> elements that come anywhere after <p> elements, we'd do this: p ~ img in the example below we are selecting all <p> elements that come after the <h1>, and even though there is a <div> in the document as well, the <p> that comes after it is selected. using combinators you can combine any of the selectors that we discovered in previous lessons with combinators in order to pick out part of your document. for example if we want to select list items with a class of "a", which are direct children of a <ul>, i could use the following. ul > li[class="a"] { } take care however when creating big lists of selectors that select very specific pa...

Pseudo-classes and pseudo-elements - Learn web development
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 property). :disabled matches user interface elem...
... first letter of the element. ::first-line matches the first line of the containing element. ::grammar-error matches a portion of the document containing a grammar error as flagged by the browser. ::marker matches the marker box of a list item, which typically contains a bullet or number. ::selection matches the portion of the document that has been selected. ::spelling-error matches a portion of the document containing a spelling error as flagged by the browser. previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling ...

CSS selectors - Learn web development
knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn how css selectors work in detail. what is a selector? you have met selectors already. a css selector is the first part of a css rule. it is a pattern of elements and other terms that tell the browser which html elements should be selected to have the css property values inside the rule applied to them. the element or elements which are selected by the selector are referred to as the subject of the selector. in earlier articles you met some different selectors, and learned that there are selectors that target the document in different ways — for example by selecting an element such as h1, or a class such as .special. in css, ...
...class for example selects an element only when it is being hovered over by the mouse pointer: a:hover { } it also includes pseudo-elements, which select a certain part of an element rather than the element itself. for example, ::first-line always selects the first line of text inside an element (a <p> in the below case), acting as if a <span> was wrapped around the first formatted line and then selected. p::first-line { } combinators the final group of selectors combine other selectors in order to target elements within our documents. the following for example selects paragraphs that are direct children of <article> elements using the child combinator (>): article > p { } next steps you can take a look at the reference table of selectors below for direct links to the various types of selec...

Example 4 - Learn web development
tion) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; function updatevalue(select, index) { var nativewidget = select.previouselementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.option'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.clas...
...stener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); }); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.previouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, index) { option.addeventlistener('click', function (event) { updatevalue(select, index); }); }); select.addeventlistener('keyup', function (event) { var length = optionlist.length, ...

Fetching data from the server - Learn web development
invented by microsoft in the late '90s, and has been standardized across browsers for quite a long time. to begin this example, make a local copy of ajax-start.html and the four text files — verse1.txt, verse2.txt, verse3.txt, and verse4.txt — in a new directory on your computer. in this example, we will load a different verse of the poem (which you may well recognize) via xhr when it's selected in the drop-down menu. just inside the <script> element, add the following code. this stores a reference to the <select> and <pre> elements in constants and defines an onchange event handler function so that when the select's value is changed, its value is passed to an invoked function updatedisplay() as a parameter. const versechoose = document.queryselector('select'); const poemdisplay...
...e following beneath your previous code block — this is the empty shell of the function. note: steps 4 - 9 will all be performed within this function. function updatedisplay(verse) { } we'll start our function by constructing a relative url pointing to the text file we want to load, as we'll need it later. the value of the <select> element at any time is the same as the text inside the selected <option> (unless you specify a different value in a value attribute) — so for example "verse 1". the corresponding verse text file is "verse1.txt", and is in the same directory as the html file, therefore just the file name will do. however, web servers tend to be case sensitive, and the file name doesn't have a space in it. to convert "verse 1" to "verse1.txt" we need to convert the v to lo...

React interactivity: Editing, filtering, conditional rendering - Learn web development
er(props.name)} > <span classname="visually-hidden">show </span> <span>{props.name}</span> <span classname="visually-hidden"> tasks</span> </button> ); } visit your browser again. you should see that the different buttons have been given their respective names. when you press a filter button, you should see its text take on a new outline — this tells you it has been selected. and if you look at your devtool’s page inspector while clicking the buttons, you'll see the aria-pressed attribute values change accordingly. however, our buttons still don't actually filter the todos in the ui! let's finish this off. filtering tasks in the ui right now, our tasklist constant in app() maps over the tasks state and returns a new <todo /> component for all of them. this is ...
...he aria-pressed attribute values change accordingly. however, our buttons still don't actually filter the todos in the ui! let's finish this off. filtering tasks in the ui right now, our tasklist constant in app() maps over the tasks state and returns a new <todo /> component for all of them. this is not what we want! a task should only render if it is included in the results of applying the selected filter. before we map over the tasks state, we should filter it (with array.prototype.filter()) to eliminate objects we don't want to render. update your tasklist like so: const tasklist = tasks .filter(filter_map[filter]) .map(task => ( <todo id={task.id} name={task.name} completed={task.completed} key={task.id} toggletaskcompleted={toggletaskcompleted} ...

Componentizing our Svelte app - Learn web development
filter as a prop — the below line is all you need: <filterbutton {filter} /> note: remember that when the html attribute name and variable matches, they can be replaced with {variable}, that's why we could replace <filterbutton filter={filter} /> with <filterbutton {filter} />. so far so good! let's try out the app now. you'll notice that when you click on the filter buttons, they are selected and the style updates appropriately. but! we have a problem — the todos aren't filtered. that's because the filter variable flows down from the todos component to the filterbutton component through the prop, but changes occurring in the filterbutton component don't flow back up to its parent — the data binding is one-way by default. let's look at a way to solve this. sharing data between com...
... notify their parents of any changes is to pass a handler as a prop. the child component will execute the handler, passing the needed information as a parameter, and the handler will modify the parent's state. in our case, the filterbutton component will receive an onclick handler from its parent. whenever the user clicks on any filter button, the child will call the onclick handler, passing the selected filter as a parameter, back up to its parent. we will just declare the onclick prop assigning a dummy handler to prevent errors, like this: export let onclick = (clicked) => {} and we'll declare the following reactive statement — $: onclick(filter) — to call the onclick handler whenever the filter variable is updated. the <script> section of our filterbutton component should end up l...

Mozilla’s UAAG evaluation report
p1) vg mozilla implements standard keyboard bindings there are a few missing pieces, such as support in xul comboboxes (menulist) for selecting items by typing alphanumeric keystrokes 7.3 operating environment conventions. (p2) g mozilla uses non-native controls. it does, however, support the look and feel of widgets on various operating systems, when the classic theme is selected (on by default). 7.4 input configuration indications. (p2) g menus indicate accesskey and accelerator configurations accelerators not show in button tooltips guideline 8. implement specifications that benefit accessibility. checkpoint title status notes/plans 8.1 implement accessibility features. (p1) vg html: caption element (table):...
... 10.1 table orientation. (p1) ni we don't make use of scope, headers, axis, or any other table accessibility features we have nothing under properties, or anywhere else, to orient users reading a table 10.2 highlight selection and content focus. ...

Debugging on Mac OS X
nformation, see debugging mozilla with lldb. debugging e10s child processes using xcode to debug child processes created by an e10s-enabled browser is a little trickier than debugging a single-process browser, but it can be done. these directions were written using xcode 6.3.1 complete all the steps above under "creating the project" from the "product" menu, ensure the scheme you created is selected under "scheme", then choose "scheme > edit scheme" in the resulting popup, click "duplicate scheme" give the resulting scheme a more descriptive name than "copy of scheme" select "run" on the left-hand side of the settings window, then select the "info" tab. set the executable by clicking on the "executable" drop-down, and selecting the plugin-container.app that is inside the app bundle of the...
...y clicking on the "executable" drop-down, and selecting the plugin-container.app that is inside the app bundle of the copy of firefox you want to debug. on the same tab, under "launch" select "wait for executable to be launched" on the "arguments" tab, remove all arguments passed on launch. now you're ready to start debugging: from the "product" menu, ensure the scheme you created above is selected under "scheme" click the "run" button. the information area at the top of the window will show "waiting for plugin-container to launch" from a command line, run your build of firefox. when that launches a child process (for example, when you start to load a webpage), xcode will notice and attach to that child process. you can then debug the child process like you would any other process. when ...

Eclipse CDT Manual Setup
d, and disable the clean checkbox. if you can't untick "use default build command", you must change the current builder by clicking on "tool chain editor" (in c/c++ build) and choosing another builder (e.g., "gnu make builder"). if you will not be using eclipse for debugging, select "c/c++ build > settings" on the left, select the "binary parsers" tab, and make sure that all the parsers are deselected. this prevents the (useless if not debugging) "searching for binaries" action from constantly interrupting everything. if you will be using eclipse for debugging, select "c/c++ general > paths and symbols" and select the "output location" tab. you should now add the folder containing your firefox binary (note on mac this is inside the .app - so "{your-obj-dir}/dist/nightlydebug.app/contents/maco...
...ink to folder in the file system" checkbox. once you've added this folder, delete the existing output folder that was set to the root of the project. doing this prevents the "searching for binaries" which eclipse constantly starts from taking too long. select "c/c++ general > preprocessor include paths, macros, and so on." select the providers tab. make sure that "cdt gcc build output parser" is selected, and that "cdt managed build settings entries" is not selected. highlight (select) "cdt gcc build output parser", then in the "language settings provider options" that appear below, make sure that "share setting entries between projects (global provider)" is not ticked. if the main object directory for your source tree is a fennec build: in the "cdt gcc build output parser", change the compiler...

Limitations of chrome scripts
sts and what kind of behavior it provides how to update your add-on so you don't need the shim gbrowser.contentwindow, window.content... without the shim all apis in the chrome process that provide direct access to content objects will no longer work. ...
... in some situations, the content process may not be initialized when an add-on asks for access to its content. ...

mozbrowsercaretstatechanged
senddocommandmsg a method allowing you to issue a command via an anonymouse function, i.e. function(command). possible values are cut, copy, paste and selectall. examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercaretstatechanged", function( event ) { // do stuff with event.d...
...collapsed (true) or not (false.) caretvisible a boolean indicating whether the caret is currently visible (true) or not (false.) selectionvisible a boolean indicating whether the current selection is visible (true) or not (false.) selectioneditable a boolean indicating whether the current selection is editable (true) or not (false.) selectedtextcontext a domstring containing the currently-selected text content. senddocommandmsg a method allowing you to issue a command via an anonymouse function, i.e. function(command). possible values are cut, copy, paste and selectall. examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercaretstatechanged", function( event ) { // do stuff with event.details }); related events mozbrowserclose mozbrowserc...

mozbrowsercontextmenu
xample, if the user clicked on an image nested in an <a> tag, two menus are available — one with information related to the image, and one for the link. contextmenu a menu object (see the menu object, below) representing a custom menu defined via <menu> / <menuitem> elements and pointed to via a contextmenu attribute on the dom element clicked on, which contains the menu's id. contextmenuitemselected an anonymous function that fires when a menu item is selected. the menusystem object an object defining a standard context menu that will be displayed. its properties are as follows: documenturi a domstring representing the url of the document the menu is associated with. uri a domstring. in the case of an image or video context menu, this is the src of the image or video clicked on to ...
...resenting the type of context menu displayed. it can be menu (a full menu) or menuitem (a single menu item.) label a domstring equal to the label attribute of the dom node the context menu is accessed on. icon the menu item's icon, if the context menu being accessed is a menu item. id the menu item's id, if the context menu being accessed is a menu item. this is passed to the contextmenuitemselected() function, to indicate which item has been selected. items an array of further menu objects, which indicate the menu options available in a menu, if the context menu being accessed is a menu. example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercontextmenu", function(event) { console.log("asking for menu:" + json.stringify(event.details)); }); rela...

Browser API
ame> triggers a web activity, and that web activity's message is consumed by the receiving app. mozbrowserasyncscroll sent when the browser <iframe> content scrolls (the apcz version.) see also mozbrowserscroll. note that this is obsolete. mozbrowseraudioplaybackchange sent when audio starts or stops playing within the browser <iframe> content. mozbrowsercaretstatechanged sent when the text selected inside the browser <iframe> content changes. mozbrowserclose sent when window.close() is called within a browser <iframe>. mozbrowsercontextmenu sent when a browser <iframe> tries to open a context menu. this allows handling of the <menuitem> element available within the browser <iframe>'s content. mozbrowserdocumentfirstpaint sent when a new paint occurs on any document in the browser <if...
...areachanged sent when the available scrolling area in the browser <iframe> changes. this can occur on resize and when the page size changes (while loading for example.) mozbrowserscrollviewchange sent when asynchronous scrolling (i.e. apcz) starts or stops. mozbrowsersecuritychange sent when the ssl state changes within a browser <iframe>. mozbrowserselectionstatechanged sent when the text selected inside the browser <iframe> content changes. note that this is obsolete, and newer implementations use mozbrowsercaretstatechanged instead. mozbrowsershowmodalprompt sent when alert(), confirm(), or prompt() are called within a browser <iframe>. mozbrowsertitlechange sent when the document title changes within a browser <iframe>. mozbrowserusernameandpasswordrequired sent when an http authe...

How to implement a custom autocomplete search component
* * @return {number} the result code of this result object, either: * result_ignored (invalid searchstring) * result_failure (failure) * result_nomatch (no matches found) * result_success (matches found) */ get searchresult() { return this._searchresult; }, /** * @return {number} the index of the default item that should be entered if * none is selected */ get defaultindex() { return this._defaultindex; }, /** * @return {string} description of the cause of a search failure */ get errordescription() { return this._errordescription; }, /** * @return {number} the number of matches */ get matchcount() { return this._results.length; }, /** * @return {string} the value of the result at the given index...
...rchstring; }, /** * the result code of this result object, either: * result_ignored (invalid searchstring) * result_failure (failure) * result_nomatch (no matches found) * result_success (matches found) */ get searchresult() { return this._searchresult; }, /** * index of the default item that should be entered if none is selected */ get defaultindex() { return this._defaultindex; }, /** * a string describing the cause of a search failure */ get errordescription() { return this._errordescription; }, /** * the number of matches */ get matchcount() { return this._results.length; }, /** * get the value of the result at the given index */ getvalueat: function(index) { ...

browser.download.lastDir.savePerSite
browser.download.lastdir.savepersite controls whether the directory preselected in the file picker for saving a file download is being remembered on a per-website (host) base. if set to true, the data is stored as content preference. type:boolean default value:true exists by default: no application support:firefox 11.0 status: active; last updated 2012-02-15 introduction: pushed to nightly on 2011-12-11 bugs: bug 702748 values true (default) the last used directory for the website (host) serving the file for download will be preselected in the file picker. if no download directory for the current website has been stored, browser.download.lastdir will be used. ...
...shed to nightly on 2011-12-11 bugs: bug 702748 values true (default) the last used directory for the website (host) serving the file for download will be preselected in the file picker. if no download directory for the current website has been stored, browser.download.lastdir will be used. false the last used directory for any download (stored in browser.download.lastdir) will be the preselected directory in the file picker. related browser.download.lastdir ...

NSS 3.37 release notes
alpn handling callbacks to select a protocol. nss supports opening sql databases in read-only mode. nss now requires the sqlite apis of version 3.5.0 or newer. starting with nss version 3.31, an alternative implementation for rng seeding on the linux/unix platform was available (bug 1346735), which performed seeding exclusively based on /dev/urandom. ...
... with nss 3.37, this alternative implementation for linux has been enhanced to use the glibc function getentropy(), instead of reading from /dev/urandom directly, if the build and runtime linux platform supports it. ...

Rhino Debugger
dow maintains a history of the commands you have entered. you may move backward and forward through the history list by pressing the up/down arrow keys on the keyboard. opening scripts you may select the file->open menu item on the menu bar to load javascript scripts contained in files. this action will display a file-selection dialog box prompting you for the location of a script to load. the selected file will be compiled and displayed in a new window. running scripts you may select the file->run menu item on the menu bar to execute javascript scripts contained in files. this action will display a file-selection dialog box prompting you for the location of a script to execute. the loaded script will be run in a new thread and control will be given to the debugger on its first instruction. ...
... the contents of each script you are debugging. you may set a breakpoint in a script by doing one of the following: place the cursor on the line at which you want to set a breakpoint and right-click with the mouse. this action will display a pop-up menu. select the set breakpoint menu item. simply single-click on the line number of the line at which you want to set a breakpoint. if the selected line contains executable code a red dot will appear next to the line number and a breakpoint will be set at that location. you may clear breakpoint in a script by doing one of the following: place the cursor on the line at which you want to clear a breakpoint and right-click with the mouse. this action will display a pop-up menu. select the clear breakpoint menu item. simply single-clic...

Hacking Tips
smc-check=all-non-file --vex-iropt-register-updates=allregs-at-mem-access ./js ./run.js the output file can then be use with kcachegrind which provides a graphical view of the call graph. using ionmonkey spew (js shell) ionmonkey spew is extremely verbose (not as much as the infer spew), but you can filter it to focus on the list of compiled scripts or channels, ionmonkey spew channels can be selected with the ionflags environment variable, and compilation spew can be filtered with ionfilter. ionflags contains the names of each channel separated by commas. the logs channel produces 2 files in /tmp/, one (/tmp/ion.json) made to be used with iongraph (made by sean stangl) and another one (/tmp/ion.cfg) made to be used with c1visualizer. these tools will show the mir & lir steps done by ionmonke...
...ess(obj) // $1 = (uintptr_t *) 0x7fa56d5fe360 // (gdb) p/x $mask = js::debug::getmarkmask(obj, js::gc::gray) // $2 = 0x200000000 // (gdb) watch *$word // hardware watchpoint 7: *$word // (gdb) cond 7 *$word & $mask // (gdb) cont // // note that this is *not* a watchpoint on a single bit. it is a watchpoint on // the whole word, which will trigger whenever the word changes and the // selected bit is set after the change. // // so if the bit changing is the desired one, this is exactly what you want. // but if a different bit changes (either set or cleared), you may still stop // execution if the $mask bit happened to already be set. gdb does not expose // enough information to restrict the watchpoint to just a single bit. most of the time, you will want js::gc::black (or you can jus...

Gecko events
nt_selection_within numerous selection changes have occurred within a container object. is supported: yes event_alert an alert has been generated. server applications send this event when a user needs to know that a user interface element has changed. is supported: yes event_foreground the foreground window has changed. is supported: no event_menu_start a menu item on the menu bar has been selected. is supported: yes event_menu_end a menu from the menu bar has been closed. is supported: yes event_menupopup_start a pop-up menu has been displayed. is supported: yes event_menupopup_end a pop-up menu has been closed. is supported: yes event_capture_start a window has received mouse capture. is supported: no event_capture_end a window has lost mouse capture. is supported: no event_mov...
..._activate event_window_deactivate event_window_destroy event_window_maximize event_window_minimize event_window_resize event_window_restore event_hyperlink_end_index_changed the ending index of this link within the containing string has changed. event_hyperlink_number_of_anchors_changed the number of anchors assoicated with this hyperlink object has changed. event_hyperlink_selected_link_changed the hyperlink selected state changed from selected to unselected or from unselected to selected. event_hypertext_link_activated one of the links associated with the hypertext object has been activated. event_hypertext_link_selected one of the links associated with the hypertext object has been selected. event_hyperlink_start_index_changed the starting index of this link within th...

Gecko states
« at apis support page introduction below you will find a list of supported states by gecko. state constants are defined in nsiaccessiblestates. states list state_unavailable the object is unavailable, i.e. disabled. applied to: all roles. state_selected the object is selected, i.e. 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. 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 ...
... object or child uses text-to-speech (tts) technology for description purposes. a speech-based accessibility aid does not announce information when an object with this state has the focus because the object automatically announces information. isn't used state_focusable the object can be focused. applied to: events: concomitant state: state_focused state_selectable the object can be selected. applied to: events: concomitant state: state_selected state_linked indicates that the object is formatted as a hyperlink. the object role will usually be role_text_leaf. state_traversed the object is a hyperlink that has been visited (previously clicked) by a user. state_multiselectable supports multiple selection state_extselectable supports extended selection state_required ind...

Components.utils.Sandbox
roperty as a string uri like "http://www.example.com/" (discouraged) when possible, specify a window or an nsiprincipal object instead of using a string uri. window objects and nsiprincipal carry additional information such as origin attributes and same-origin privilege changes caused by setting document.domain. example of obtaining content principal from the window: var principal = gbrowser.selectedtab.linkedbrowser.contentprincipal; var sandbox = components.utils.sandbox(principal); expanded principal an expanded principal is specified as an array of the principals it subsumes. each item in the array should be an nsiprincipal, a dom window, or a uri. so this can be simply an array with a single element. for example the content principal above can be made expanded/extended like so: var p...
...tentprincipal; var sandbox = components.utils.sandbox(principal); expanded principal an expanded principal is specified as an array of the principals it subsumes. each item in the array should be an nsiprincipal, a dom window, or a uri. so this can be simply an array with a single element. for example the content principal above can be made expanded/extended like so: var principal = [gbrowser.selectedtab.linkedbrowser.contentprincipal]; // this is now an expanded (aka extended) principal var sandbox = components.utils.sandbox(principal); null principal you can create a null principal using code like: cc["@mozilla.org/nullprincipal;1"].createinstance(ci.nsiprincipal); from firefox 37 onwards, you can also specify the null principal by simply passing null as the principal argument. options ...

Observer Notifications
tification in firefox 4 and later. see xpcom changes in gecko 2.0 for details. general event for application startup. to receive this notification you have to register with nsicategorymanager. prepend "service," to the contract id in the category registration to be invoked via getservice() instead of createinstance(). profile-do-change this is fired after the profile has been selected. you will not be able to access user preferences, bookmarks, or anything that uses the profile folder until this event occurs. this occurs after any profile migration. profile-after-change this is fired after all the observers for profile-do-change have been notified. you can register with nsicategorymanager to receive this notification. prior to firefox 3.5, this was availa...
...son sent to indicate that the user has chosen a new theme in the add-ons manager, but before the change takes effect. lightweight-theme-changed - sent after the current theme is changed. lightweight-theme-styling-update json sent when the current theme being used is changed; this is sent even when the user is previewing a theme, not just when the theme is actually selected. lightweight-theme-list-changed - the list of available lightweight themes has changed. developer tools these topics let you know about things that have happened related to firefox's built-in developer tools. topic data description highlighter-ready - sent when the highlighter component is initialized. note: this is used by the inspe...

nsIAccessible
for more information. you can get related accessibles by methods nsiaccessible.getaccessiblerelated() nsiaccessible.getrelations() nsiaccessible.getrelation() and nsiaccessible.relationscount. focus and selection in order to focus an accessible or get focused child accessible use nsiaccessible.takefocus() and nsiaccessible.focusedchild. to select an accessible you can use nsiaccessible.setselected(), nsiaccessible.takeselection() and nsiaccessible.extendselection(). actions you can prepare actions on some accessibles (for example on button accessible). the following methods are intended for this nsiaccessible.actioncount, nsiaccessible.getactionname(), nsiaccessible.getactiondescription() and nsiaccessible.doaction(). descriptions nsiaccessible.description and nsiaccessible.help provides a...
...s an accessible related to this one by the given relation type. getrelation this method returns one accessible relation for this object. getrelations this method returns multiple accessible relations for this object. getbounds this method returns accessible's (x and y) coordinates relative to the screen and accessible's width and height. setselected this method adds or remove this accessible to the current selection. extendselection this method extends the current selection from its current accessible anchor node to this accessible. takeselection this method selects this accessible node only. takefocus this method focuses this accessible node. getactionname this method r...

nsIAccessibleHyperText
cument, typically a text document, that are used to reference other documents. a typical implementation is to implement this interface on the small text object such as a paragraph of text. inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview nsiaccessiblehyperlink getlink(in long linkindex); long getlinkindex(in long charindex); long getselectedlinkindex(); obsolete since gecko 1.9 attributes attribute type description linkcount long the number of links contained within this hypertext object. read only. note: renamed from links in gecko 1.9 methods getlink() retrieves the nsiaccessiblehyperlink object at the given link index. nsiaccessiblehyperlink getlink( in long linkindex ); paramete...
...lid. getlinkindex() the link index at the given offset (character index). long getlinkindex( in long charindex ); parameters charindex the 0-based character index. return value the index of the link if it's presented on the given character index, otherwise -1. exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree. getselectedlinkindex() obsolete since gecko 1.9 (firefox 3) long getselectedlinkindex(); parameters none. return value missing description exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree. see also nsiaccessiblehyperlink ...

nsIAccessibleStates
this article. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) prior to gecko 1.9, these constants were implemented in nsiaccessible. constants state constants msaa state flags - used for bitfield. more than 1 allowed. constant value description state_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 st...
... state_selfvoicing 0x00080000 the object or child uses text-to-speech (tts) technology for description purposes. a speech-based accessibility aid does not announce information when an object with this state has the focus because the object automatically announces information. currently unused. state_focusable 0x00100000 the object can be focused. state_selectable 0x00200000 the object can be selected. state_linked 0x00400000 the object is formatted as a hyperlink. the object role will usually be role_text_leaf. (see nsiaccessiblerole.constants). state_traversed 0x00800000 the object is a hyperlink that has been visited (previously clicked) by a user. state_multiselectable 0x01000000 supports multiple selection. state_extselectable 0x02000000 supports extended selection. state_alert_...

nsIAccessibleTableCell
the result differs from 1 if the specified cell spans multiple columns. read only. ...
...ell. read only. rowextent long return the number of rows occupied by this accessible cell. the result differs from 1 if the specified cell spans multiple rows. read only. rowheadercells nsiarray return an array of row header cells for this cell. read only. rowindex long return row index of this cell. read only. table nsiaccessibletable return host table accessible. read only. methods isselected() boolean isselected(); parameters none. return value a boolean value indicating whether this cell is selected. ...

nsIAuthPrompt
x. passwordrealm the password realm. for example, ldap://localhost/dc=test. if a username is specified (http://user@site.com) it will be used when matching existing logins or saving new ones. if no username is specified, only password-only logins will be matched or saved. savepassword saving password option. one of the save_password_* constants pwd the password entered by the user if ok was selected. return value true for ok, false for cancel. promptusernameandpassword() this method puts up a username/password dialog with ok and cancel buttons. boolean promptusernameandpassword( in wstring dialogtitle, in wstring text, in wstring passwordrealm, in pruint32 savepassword, inout wstring user, inout wstring pwd ); parameters dialogtitle the title of the dialog. text the...
... return value true for ok, false for cancel. ...

nsIClipboardCommands
olean cancutselection(); boolean canpaste(); void copyimagecontents(); void copyimagelocation(); void copylinklocation(); void copyselection(); void cutselection(); void paste(); void selectall(); void selectnone(); methods cancopyimagecontents() returns whether we can copy an image's contents. boolean cancopyimagecontents(); parameters none. return value true if an image is selected, false otherwise. cancopyimagelocation() returns whether we can copy an image location. boolean cancopyimagelocation(); parameters none. return value true if an image is selected, false otherwise. cancopylinklocation() returns whether we can copy a link location. boolean cancopylinklocation(); parameters none. return value true if a link is selected, false otherwise. cancopyselection() returns ...
...urn value true if the current selection can be cut, false otherwise. canpaste() returns whether the current contents of the clipboard can be pasted and if the current selection is not read-only. boolean canpaste(); parameters none. return value true if there is data to paste on the clipboard and the current selection is not read-only, false otherwise. copyimagecontents() copy the contents of the selected image. void copyimagecontents(); parameters none. copyimagelocation() copy the location of the selected image. void copyimagelocation(); parameters none. copylinklocation() copy the link location of the current selection (for example the |href| attribute of a selected |a| tag). void copylinklocation(); parameters none. copyselection() copy the current selection onto the clipboard. void copysel...

nsIDOMXULSelectControlElement
ng value); long getindexofitem(in nsidomxulselectcontrolitemelement item); nsidomxulselectcontrolitemelement getitematindex(in long index); nsidomxulselectcontrolitemelement insertitemat(in long index, in domstring label, in domstring value); nsidomxulselectcontrolitemelement removeitemat(in long index); attributes attribute type description itemcount unsigned long read only. ...
...dexofitem(in nsidomxulselectcontrolitemelement item); nsidomxulselectcontrolitemelement getitematindex(in long index); nsidomxulselectcontrolitemelement insertitemat(in long index, in domstring label, in domstring value); nsidomxulselectcontrolitemelement removeitemat(in long index); attributes attribute type description itemcount unsigned long read only. ...

nsIEditorSpellCheck
if true, all occurrences of misspelledword are replaced with replaceword. if false, only the first occurrence is replaced. savedefaultdictionary() obsolete since gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6)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. saves the currently selected dictionary as the default. the function uninitspellchecker() will also do this, but that function may not be called in some situations. this function allows the caller to force the default immediately. note: this method was removed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6). since spelling dictionaries can now be selected per-site, this method is no longer needed. void savedef...
...before calling initspellchecker(); calling it after initialization will have no effect. void setfilter( in nsitextservicesfilter filter ); parameters filter an nsitextservicesfilter describing the filter to apply. this filter lets you avoid spell checking specific parts of the document. uninitspellchecker() call this to release the spell checking object. it will also save the current selected language as the default for future use. if you have called canspellcheck() but not initspellchecker(), you can still call this function to clear the cached spell check object, and no preferences are saved. void uninitspellchecker(); parameters none. updatecurrentdictionary() updates the dictionary in use to be sure it corresponds to what the editor needs. void updatecurrentdictionary(); paramet...

nsIFilePicker
lt. this should be set before calling open() or show(). exceptions thrown ns_error_failure if you try to read this attribute. displaydirectory nsilocalfile the directory that the file picker dialog should initially display. this should be set this before calling open() or show() to specify a starting point. file nsilocalfile the currently selected file or directory. read only. files nsisimpleenumerator an enumerator of the currently selected files. read only. note: only works with modeopenmultiple mode. fileurl nsiuri the uri of the currently selected file or directory. read only. filterindex long the (0-based) index of the filter which is currently selected in the file picker dialog. s...
... constants mode constants these constants are used to specify the type of file picker to create when calling init(). constant value description modeopen 0 load a file. modesave 1 save a file. modegetfolder 2 select a folder/directory. ...

nsIMsgMessageService
ng. amsgwindow nsimsgwindow for progress and status feedback. aurllistener an nsiurllistener that is notified when url starts and stops. aconvertdata if aconvertdata is true, it will create a stream converter from message rfc2822 to */*. aadditionalheader header added to the uri. ...
...ified when url starts and stops. aconvertdata if aconvertdata is true, it will create a stream converter from message rfc2822 to */*. aadditionalheader header added to the uri. ...

nsIPromptService
; 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. acount length of the aselectlist array parameter. aselectlist list of strings to display. aoutselection contains the index of the selected item in the list when this method returns true. if you call this method from javascript, this argument is wrapped in an object with an attribute named 'value' which holds the selected index. return value true for ok, false for cancel example code alert example alert displays a simple dialog. var prompts = components.classes["@mozilla.org/embedcomp/prompt-service;1"] ...
...alse if cancel was pressed. password.value is // set if ok was pressed. the checkbox is not displayed. select example select displays a dialog with a listbox of choices. var prompts = components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice); var items = ["hello", "welcome", "howdy", "hi", ":)"]; // list items var selected = {}; var result = prompts.select(null, "title", "what greeting do you want?", items.length, items, selected); // result is true if ok was pressed, false if cancel. selected is the index of the item array // that was selected. get the item using items[selected.value]. see also nsiprompt working with out parameters ...

nsIProtocolProxyFilter
use nsiprotocolproxyservice.registerfilter() to hook up instances of this interface. ...
...use nsiprotocolproxyservice.registerfilter() to hook up instances of this interface. ...

nsIZipWriter
ly add all contents of a directory to zip file this example below can be copied and pasted into your scratchpad, set the environment to "browser" and can run. what it does is shows a file picker dialog and asks you to pick a folder. once you pick a folder, it will create a zip file inside this folder with the same name as the folder. it will then recursively go through all contents in the folder selected and add them into this zip file. this example is also a good of example of the in autf8string azipentry argument of addentryfile and how it is used, this entry is very important, it is basically what to save the file as in the zip, you can take a file "blah.exe" and make it save in the zip as "hi and no extension". var {cc: classes, ci: interfaces, cu: utils} = components; var zw = cc['@mozilla.
...but note that if dir doesnt exist zw.open throws problems //var path = fp.file.path; //returns c:\users\3k2kyc1\documents\prefs\prefs var xpi = fu.file(dir.path + '\\' + dir.leafname + '.zip'); zw.open(xpi, pr.pr_rdwr | pr.pr_create_file | pr.pr_truncate); //pr_truncate overwrites if file exists //pr_create_file creates file if it dne //pr_rdwr opens for reading and writing ...

Add to iPhoto
xtual menu an option to "add image to iphoto". choose it, and iphoto will start up (if it's not already running) and import the image. declaring the apis the first thing we have to do is declare the mac os x apis we'll be using. this extension uses a number of methods and data types, as well as constants, from three system frameworks. since a lot of this stuff is repetitive, we'll only look at selected parts of the code to get an idea how things work. you can download the extension and poke through the code inside it if you'd like to see all of it. for the sake of organization, i chose to implement each system framework (and, mind you, i only declare the apis i actually use, not all of them) as a javascript object containing all the types and methods that framework's api. note: in a few cases...
...it gets the filename of the file being download by slicing it off the end of the specified image url, then obt...

Debugger keyboard shortcuts - Firefox Developer Tools
by default, on some macs, the function key is remapped to use a special feature: for example, to change the screen brightness or the volume. see this guide to using these keys as standard function keys. to use a remapped...
... ctrl + p cmd + p ctrl + p resume execution when at a breakpoint f8 f8 1 f8 step over f10 f10 1 f10 step into f11 f11 1 f11 step out shift + f11 shift + f11 1 shift + f11 toggle breakpoint on the currently selected line ctrl + b cmd + b ctrl + b toggle conditional breakpoint on the currently selected line ctrl + shift + b cmd + shift + b ctrl + shift + b 1. by default, on some macs, the function key is remapped to use a special feature: for example, to change the screen brightness or the volume. see this guide to using these keys as standard function keys. to use a remapped key as a standard function key, hold the function key down as well (so to open the profiler, use shift +...

Edit Shape Paths in CSS - Firefox Developer Tools
pe path editor is a tool that helps you see and edit shapes created using clip-path and also the css shape-outside property and <basic-shape> values. this guide walks you through all of the available options. activate / deactivate the shape path editor the shape path editor is accessed via the css rules panel, which can be opened as described in the guide to opening the inspector. once you have selected your element, you should see the shape icon alongside any valid value, e.g. one for shape-outside. clicking the icon will cause the editor to highlight the shape. to deactivate the shape path editor click on the icon again, or select another element or a different editor. note that the shape path editor does not persist between page reloads — if you reload your page you will need to selec...
...for shape-outside. clicking the icon will cause the editor to highlight the shape. to deactivate the shape path editor click on the icon again, or select another element or a different editor. note that the shape path editor does not persist between page reloads — if you reload your page you will need to select the element again. understanding the lines drawn by the editor once you have selected a shape on your page, the shape path editor will draw lines to help you understand the path that is being created. a solid line shows the outline of the shape that is wrapping the text. this is your shape. if the shape is clipped by the margin box then the margin box will make up part of this line. a dashed line demonstrates the outline of the shape which extends past the margin box reference...

Select an element - Firefox Developer Tools
the highlighted element is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page. ...
... keys to move around the dom with the keyboard. with the node picker to select an element in the page itself, activate the "node picker" by clicking its icon: (also called the select element icon). after that, as you move the mouse around the page, the element under the mouse is highlighted. click the element to select it: starting in firefox 52, if you shift + click the element, then it is selected but the picker stays active. this lets you see the rules for the element in the css pane, but conveniently select another element in the page. ...

Use the Inspector from the Web Console - Firefox Developer Tools
the element that's currently selected in the page inspector can be referenced in the web console using the variable $0. dom elements in the web console output get a target next to them. ...
... the element that's currently selected in the page inspector can be referenced in the web console using the variable $0. dom elements in the web console output get a target next to them. ...

Animation inspector example: CSS transitions - Firefox Developer Tools
: middle; line-height: normal; } .icon { width: 50px; height: 50px; filter: grayscale(100%); transition: transform 750ms ease-in, filter 750ms ease-in-out; } .note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#selected { filter: grayscale(0%); transform: scale(1.5); } .icon#selected+span { opacity: 1; width: 300px; } javascript content function toggleselection(e) { if (e.button != 0) { return; } if (e.target.classlist.contains("icon")) { var wasselected = (e.target.getattribute("id") == "selected"); clearselection(); if (!wasselected) { e.target.setattribute("id", "select...
...} .icon#selected+span { opacity: 1; width: 300px; } javascript content function toggleselection(e) { if (e.button != 0) { return; } if (e.target.classlist.contains("icon")) { var wasselected = (e.target.getattribute("id") == "selected"); clearselection(); if (!wasselected) { e.target.setattribute("id", "selected"); } } } function clearselection() { var selected = document.getelementbyid("selected"); if (selected) { selected.removeattribute("id"); } } document.addeventlistener("click", toggleselection); ...

Work with animations - Firefox Developer Tools
a grayscale icon, representing firefox developer edition. if you click the icon, it enlarges and changes to color, and the name of the browser appears. click the icon again to reverse the effect. these animations are made using the web animations api. let's use the animation inspector to see what's going on in this example. right-click in the box and select "inspect element" make sure the selected element is the <div class="channel"> switch over to the "animations" tab play the animation let's take a closer look at the contents of the animation inspector here: it shows a synchronized timeline for every animation applied to the selected element or its children. the timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with marker...
... if you improved your code, are now given a dotted underline — see transform in the screenshot below. hovering over this gives you a tooltip that explains why. in this case, the message is "animations of 'transform' cannot be run on the compositor when geometric properties are animated on the same element at the same time." edit @keyframes any @keyframes rules associated with the currently selected element are displayed in the rules view and are editable: edit timing functions when you create a css animation you can specify a timing function: this determines the rate at which the animation progresses. one way to specify the timing function is with a cubic bézier curve. timing functions defined as cubic bézier curves get an icon in the rules view. if you click the icon you get a visua...

Call Tree - Firefox Developer Tools
ple was taken, and the rows are ordered by the number of samples taken while in that function, highest to lowest. samples is the number of samples that were taken when we were executing this particular function, including its children (the other functions called by this particular function). total time is that number translated into milliseconds, based on the total amount of time covered by the selected portion of the recording. these numbers should roughly be the same as the number of samples. total cost is that number as a percentage of the total number of samples in the selected portion of the recording. self time is calculated as the time spent in that particular function, excluding its children. this comes from the captured stacks where this function is the leafmost function. self cost i...
... in the current version of the call tree, these are the most important columns. functions with a relatively high self cost are good candidates for optimization, either because they take a long time to run, or because they are called very often. ...

Flame Chart - Firefox Developer Tools
r program is spending most time in aggregate across the recording, the flame chart uses it to show you when in the recording particular functions are executing. essentially it shows you the state of the call stack at any given point during the recording. here's a screenshot showing the flame chart for a section of a profile: first of all, you'll see that, in the recording overview pane, we've selected a small slice of the recording to view in the flame chart. the flame chart displays a lot of data, so to get readable results, it's usually necessary to zoom in. in the flame chart view itself, along the x-axis is time. the screenshot above covers the period from 1435ms to a little past 1465ms. along the y-axis are the functions on the call stack at that point in time, with the top-level at the ...
... to make them easier to distinguish. this gives you a way to know exactly which function was executing at any point during the recording, how long it ran for, and where it was called from. zooming and panning to work effectively with the flame chart, you'll need to be able to navigate it. there are two main controls you can use to navigate the flame chart: zoom: increase/decrease the selected portion of the complete profile that's displayed in the flame chart 1) mouse wheel up/down in the flame chart. 2) trackpad 2 fingers up/down in the flame chart. pan: move the selected portion of the complete profile left and right 1) click and drag the selected portion in the recording overview pane. 2) click and drag anywhere in the flame chart. ...

UI Tour - Firefox Developer Tools
ne. note that if you do this, you lose any recordings you have not saved. filter the markers that are displayed in the waterfall view switch the active tool in the details pane. access the settings popup recordings pane the recordings pane lists all the recordings you have loaded, including any you have made in this session and any you have imported. at any given time, one recording is selected, and that recording is displayed in the rest of the tool. to select a different recording, click its entry in the pane. to save the recording as a json file click "save". recording overview this displays an overview of the entire recording, with the x-axis representing time. it contains two elements: an overview of the waterfall and a frame rate graph. waterfall overview this presents a co...
...you can correlate events in one element with events in another. for example, in the screenshot below a long-running paint operation (shown as a green bar in the waterfall overview) corresponds to a drop in the frame rate: zooming in you can use the overview to select a slice of the recording to examine in more detail. select a slice, and the main view will be updated to contain just the part selected. in the screenshot below we've selected that drop in the frame rate, and can see the long-running paint operation in more detail: details pane the details pane shows whichever tool is currently selected. to switch to a different tool, use the buttons in the toolbar. waterfall the waterfall presents a view of the work the browser is doing during the recording: executing javascript, updating ...

Shader Editor - Firefox Developer Tools
ck it and the shader editor opens. at first you'll just see a blank window with a button asking you to reload the page: to get started, load a page which creates a webgl context and loads a program into it. the screenshots below are from the unreal engine demo. you'll now see a window divided into three panes: a list of all the glsl programs on the left, the vertex shader for the currently selected program in the middle, and the fragment shader for the currently selected program on the right: managing programs the left hand pane lists all programs currently in use by a webgl context. if you hover over an entry in the list, the geometry drawn by that program is highlighted in red: if you click the eyeball icon just left of the program's entry, that program is disabled. this is useful fo...
...ed in red: if you click the eyeball icon just left of the program's entry, that program is disabled. this is useful for focusing on certain shaders or hiding overlapping geometry: if you click the entry, its vertex and fragment shaders are shown in the other two panes, and you can edit them. editing shaders the middle and right hand panes show the vertex and fragment shaders for the currently selected program. you can edit these programs and see the results the next time the webgl context redraws (for example, in the next animation frame). for example, you can modify the colors: the editor highlights syntax errors in your code: if you hover over the cross shown next to a line containing an error, you'll see more details about the problem: ...

IndexedDB - Firefox Developer Tools
ase is a snapshot of the data as it was when you opened the storage inspector tool. databases have the following details: database name — the name of the database. storage — the storage type specified for the database. origin — the origin of the database. version — the database version. object stores — the number of object stores in the database. when an indexeddb database is selected in the storage tree, details about all the object stores are listed in the table. any object store has the following details: object store name — the name of the object store. key — the keypath property of the object store. auto increment — is automatic incrementation of the keys enabled? indexes — array of indexes present in the object store as shown below. when an object store...
...the storage tree, details about all the object stores are listed in the table. any object store has the following details: object store name — the name of the object store. key — the keypath property of the object store. auto increment — is automatic incrementation of the keys enabled? indexes — array of indexes present in the object store as shown below. when an object store is selected in the storage tree, all the items in that object store are listed in the table. all items have a key and a value associated with them. you can delete an indexeddb database using the context menu in the storage tree: if the database cannot be deleted (most commonly because there are still active connections to the database), a warning message will be displayed in the storage inspector: you c...

Storage Inspector - Firefox Developer Tools
rame, for example), it will be added to each storage type automatically. clicking on a tree item will display detailed information about that item in the table widget on the right. for example, clicking on an origin which is a child of the cookies storage type will show all the cookies belonging to that domain. table widget the table widget displays a list of all the items corresponding to the selected tree item (be it an origin, or database) are listed. depending on the storage type and tree item, the number of columns in the table might differ. all the columns in a table widget are resizable. you can hide and show columns by context-clicking on the table header and selecting the columns you want to see: search there's a search box at the top of the table widget: this filters the table...
...use ctrl + f (cmd + f on a mac) to focus the search box. add and refresh storage you'll also have buttons available to add a new storage entry or refresh the view of the currently viewed storage type where applicable (you can't add new entries to indexeddb or cache): sidebar when you select any row in the storage table widget, the sidebar is shown with details about that row. if a cookie is selected, it will list all the details about that cookie. the sidebar can parse the value of the cookie or local storage item or an indexeddb item and convert it into a meaningful object instead of just a string. for example: a stringified json like '{"foo": "bar"}' is shown as the origin json: {foo: "bar"}. a string containing a key separated value, like "1~2~3~4" or "1=2=3=4" is shown like an array...

Style Editor - Firefox Developer Tools
document. you can quickly toggle the use of a given sheet on and off by clicking the eyeball icon to the left of the sheet's name. you can save any changes you've made to the style sheet to your local computer by clicking the save button in the bottom-right corner of each sheet's entry in the list. from firefox 40 onwards, the style sheet pane also includes a context menu that lets you open the selected style sheet in a new tab. the editor pane on the right is the editor pane. this is where the source for the selected style sheet is available for you to read and edit. any changes you make are immediately applied to the page. this makes it easy to experiment with, revise, and test changes. once you're satisfied with your changes, you can save a copy locally by clicking the save button on the sh...
...d shortcuts source editor shortcuts this table lists the default shortcuts for the source editor. in the editor preferences section of the developer tools settings, you can choose to use vim, emacs, or sublime text key bindings instead. to select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to that setting. if you do this, the selected bindings will be used for all the developer tools that use the source editor. you need to reopen the editor for the change to take effect. from firefox 33 onwards, the key binding preference is exposed in the editor preferences section of the developer tools settings, and you can set it there instead of about:config. command windows macos linux go to line ctrl + j,...

Toolbox - Firefox Developer Tools
w between attached to the bottom of the browser window, and attached to the side of the browser window toggle the window between standalone and attached to the browser window access developer tool settings settings see the separate page on the developer tools settings. main pane the content of the main pane in the window is entirely controlled by, and specific to, the hosted tool currently selected. keyboard shortcuts these shortcuts work whenever the toolbox is open, no matter which tool is active. command windows macos linux cycle through tools left to right ctrl + ] cmd + ] ctrl + ] cycle through tools right to left ctrl + [ cmd + [ ctrl + [ toggle between active tool and settings. f1 f1 f1 toggle to...
...through tools left to right ctrl + ] cmd + ] ctrl + ] cycle through tools right to left ctrl + [ cmd + [ ctrl + [ toggle between active tool and settings. f1 f1 f1 toggle toolbox between the last 2 docking modes ctrl + shift + d cmd + shift + d ctrl + shift + d toggle split console (except if console is the currently selected tool) esc esc esc these shortcuts work in all tools that are hosted in the toolbox. command windows macos linux increase font size ctrl + + cmd + + ctrl + + decrease font size ctrl + - cmd + - ctrl + - reset font size ctrl + 0 cmd + 0 ctrl + 0 ...

Console messages - Firefox Developer Tools
by default, the console is cleared each time you navigate to a new page or reload the current page. to override this behavior, enable persist logs in the console settings menu (gear icon). the context menu options listed below are available on all message categories. additional context menu options are described in the subsection for the message category they apply to. copy message copies the selected message to the clipboard. select all selects all messages available in the message display pane. export visible messages to clipboard copies all messages available in the display pane to the clipboard. file opens a file dialog box so you can save an export of all messages available in the display pane. message categories network network log messages are not shown by default. ...
...hem. to find a suitable library for your server code, see the chrome logger documentation. interpreter input/output commands sent to the browser using the web console's javascript interpreter, and the corresponding responses, are logged in the console messages. for responses that contain objects or variables, the following context menu options are available: reveal in inspector shows the selected dom node in the inspector pane. store as global variable creates a global variable (with a name like temp0, temp1, etc.) whose value is the selected object. the name of the variable appears as an input to the interpreter, and its value appears as a response. copy object copies the selected object to the clipboard. filtering and searching filtering by category you can use the toolbar along...

DisplayMediaStreamConstraints.video - Web APIs
in the video content of the {domxref("mediastream"), unless the mouse has moved outside the area of the content. motion the mouse cursor is always included in the video if it's moving, and for a short time after it stops moving. never the mouse cursor is never included in the shared video. displaysurface a constraindomstring which specifies the types of display surface that may be selected by the user. this may be a single one of the following strings, or a list of them to allow multiple source surfaces: application the stream contains all of the windows of the application chosen by the user rendered into the one video track. browser the stream contains the contents of a single browser tab selected by the user. monitor the stream's video track contains the entire con...
... multiple source surfaces: application the stream contains all of the windows of the application chosen by the user rendered into the one video track. browser the stream contains the contents of a single browser tab selected by the user. monitor the stream's video track contains the entire contents of one or more of the user's screens. window the stream contains a single window selected by the user for sharing. logicalsurface a constrainboolean value which may contain a single boolean value or a set of them, indicating whether or not to allow the user to choose source surfaces which do not directly correspond to display areas. these may include backing buffers for windows to allow capture of window contents that are hidden by other windows in front of them, or buffers cont...

Document.lastStyleSheetSet - Web APIs
note: this value doesn't change when document.enablestylesheetsforset() is called. ...
... note: this value doesn't change when document.enablestylesheetsforset() is called. ...

Document.queryCommandState() - Web APIs
state() can return a boolean value or null if the state is unknown. ...
...wn. ...

DocumentOrShadowRoot.getSelection() - Web APIs
syntax var selection = documentorshadowrootinstance.getselection() parameters none. returns a selection object. ...
...xample, selobj.tostring() is automatically called when it is passed to window.alert(). however, attempting to use a javascript string property or method such as length or substr directly on a selection object results in an error if it does not have that property or method and may return unexpected results if it does. to use a selection object as a string, call its tostring() method directly: var selectedtext = selobj.tostring(); selobj is a selection object. selectedtext is a string (selected text). related objects you can call window.getselection(), which works identically to document.getselection(). it is worth noting that currently getselection() doesn't work on the content of <input> elements in firefox. htmlinputelement.setselectionrange()) could be used to work around this. notice ...

Introduction to the DOM - Web APIs
ments as necessary. ...
...ody> <div style="margin: .5in; height: 400px;"> <p><b><tt>text</tt></b></p> <form> <select onchange="setbodyattr('text', this.options[this.selectedindex].value);"> <option value="black">black</option> <option value="red">red</option> </select> <p><b><tt>bgcolor</tt></b></p> <select onchange="setbodyattr('bgcolor', this.options[this.selectedindex].value);"> <option value="white">white</option> <option value="lightgrey">gray</option> </select> <p><b><tt>link</tt></b></p> <select onchange="setbodyattr('link', this.options[this.selectedindex].value);"> <option value="blue">blue</option> <option value="green">green</option> </select> <small> <a href="http://som...

Element.insertAdjacentElement() - Web APIs
specification specification status comment domthe definition of 'insertadjacentelement()' in that specification. living standard ...
...ctiveelem) { activeelem.insertadjacentelement('afterend',tempdiv); } setlistener(tempdiv); }); have a look at our insertadjacentelement.html demo on github (see the source code too.) here we have a sequence of <div> elements inside a container. when one is clicked, it becomes selected and you can then press the insert before and insert after buttons to insert new divs before or after the selected element using insertadjacentelement(). specification specification status comment domthe definition of 'insertadjacentelement()' in that specification. living standard ...

Element: select event - Web APIs
the select event fires when some text has been selected. bubbles yes cancelable no interface uievent if generated from a user interface, event otherwise event handler property onselect the event is not available for all elements in all languages. for example, in html, select events can be dispatched only on form <input type="text"> and <textarea> elements. ...
...lect events can be dispatched only on form <input type="text"> and <textarea> elements. examples selection logger <input value="try selecting some text in this element."> <p id="log"></p> function logselection(event) { const log = document.getelementbyid('log'); const selection = event.target.value.substring(event.target.selectionstart, event.target.selectionend); log.textcontent = `you selected: ${selection}`; } const input = document.queryselector('input'); input.addeventlistener('select', logselection); onselect equivalent you can also set up the event handler using the onselect property: input.onselect = logselection; specifications specification status ui eventsthe definition of 'select' in that specification. working draft ...

Element - Web APIs
a given position relative to the element it is invoked upon. element.insertadjacenthtml() parses the text as html or xml and inserts the resulting nodes into the tree in the position given. element.insertadjacenttext() inserts a given text node at a given position relative to the element it is invoked upon. element.matches() returns a boolean indicating whether or not the element would be selected by the specified selector string. element.pseudo() returns a csspseudoelement representing the child pseudo-element matched by the specified pseudo-element selector. element.queryselector() returns the first node which matches the specified selector string relative to the element. element.queryselectorall() returns a nodelist of nodes which match the specified selector string relative to ...
...r's ui. also available via the oncancel property. error fired when a resource failed to load, or can't be used. for example, if a script has an execution error or an image can't be found or is invalid. also available via the onerror property. scroll fired when the document view or an element has been scrolled. also available via the onscroll property. select fired when some text has been selected. also available via the onselect property. show fired when a contextmenu event was fired on/bubbled to an element that has a contextmenu attribute. also available via the onshow property. wheel fired when the user rotates a wheel button on a pointing device (typically a mouse). also available via the onwheel property. clipboard events copy fired when the user initiates a copy actio...

File and Directory Entries API - Web APIs
ed inside a worker and will return the values you desire. the asynchronous api will not block and functions and the api will not return values; instead, you will need to supply a callback function to handle the response whenever it arrives. the firefox implementation of the file and directory entries api is very limited; there is no support for creating files. only for accessing files which are selected by the user in a file <input> element (see htmlinputelement as well) or when a file or directory is provided to the web site or app using drag and drop. firefox also does not implement the synchronous api. check the browser compatibility for any part of the api you use carefully, and see file and directory entries api support in firefox for more details. getting access to a file system there a...
...urrent specification draft: when handling a drop event for drag and drop, you can call datatransferitem.webkitgetasentry() to get the filesystementry for a dropped item. if the result isn't null, then it's a dropped file or directory, and you can use file system calls to work with it. the htmlinputelement.webkitentries property lets you access the filesystemfileentry objects for the currently selected files, but only if they are dragged-and-dropped onto the file chooser (bug 1326031). if htmlinputelement.webkitdirectory is true, the <input> element is instead a directory picker, and you get filesystemdirectoryentry objects for each selected directory. asynchronous api the asynchronous api should be used for most operations, to prevent file system accesses from blocking the entire browser if...

GlobalEventHandlers.onselect - Web APIs
the onselect property of the globaleventhandlers mixin is an eventhandler that processes select events. the select event only fires after text inside an <input type="text"> or <textarea> is selected. syntax target.onselect = functionref; value functionref is a function name or a function expression. the function receives a uievent object as its sole argument. examples this example logs the text you select inside a <textarea> element. ...
...sole argument. examples this example logs the text you select inside a <textarea> element. html <textarea>try selecting some text in this element.</textarea> <p id="log"></p> javascript function logselection(event) { const log = document.getelementbyid('log'); const selection = event.target.value.substring(event.target.selectionstart, event.target.selectionend); log.textcontent = `you selected: ${selection}`; } const textarea = document.queryselector('textarea'); textarea.onselect = logselection; result specification specification status comment html living standardthe definition of 'onselect' in that specification. living standard ...

HTMLImageElement.srcset - Web APIs
wrap the string within the width available regardless of where in the string the wrap must occur. .box { width: 200px; border: 2px solid rgba(150, 150, 150, 255); padding: 0.5em; word-break: break-all; } .box img { width: 200px; } javascript the following code is run within a handler for the window's load event. ...
...if you happen to have both standard and high density displays, try moving this window between them and reloading the page to see the results change. ...

HTMLInputElement.setSelectionRange() - Web APIs
the htmlinputelement.setselectionrange() method sets the start and end positions of the current text selection in an <input> or <textarea> element. optionally, in newer browser versions, you can specify the direction in which selection should be considered to have occurred. this lets you indicate, for example, that the selection was set by the user clicking and dragging from the end of the selected text toward the beginning. this method updates the htmlinputelement.selectionstart, selectionend, and selectiondirection properties in one call. note that accordingly to the whatwg forms spec selectionstart, selectionend properties and setselectionrange method apply only to inputs of types text, search, url, tel and password. chrome, starting from version 33, throws an exception while accessing thos...
...'number') does not support selection". if you wish to select all text of an input element, you can use the htmlinputelement.select() method instead. syntax element.setselectionrange(selectionstart, selectionend [, selectiondirection]); parameters if selectionend is less than selectionstart, then both are treated as the value of selectionend. selectionstart the 0-based index of the first selected character. an index greater than the length of the element's value is treated as pointing to the end of the value. selectionend the 0-based index of the character after the last selected character. an index greater than the length of the element's value is treated as pointing to the end of the value. selectiondirection optional a string indicating the direction in which the selection is consi...

HTMLInputElement.webkitdirectory - Web APIs
the htmlinputelement.webkitdirectory is a property that reflects the webkitdirectory html attribute and indicates that the <input> element should let the user select directories instead 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. syntax htmlinputelement.webkitdirectory = boolvalue value a boolean; true if the <input> element should allow picking only directories or false if only files should be selectable. understanding the results after the user makes a selection, each file object in files has its file.webkitrelativepath property set to the relative path within the selected directory at which the file is located. for...
...'s 40th birthday/pic2343.jpg. this makes it possible to know the hierarchy even though the filelist is flat. note: the behavior of webkitrelativepath is different in chromium < 72. see this bug for further details. example in this example, a directory picker is presented which lets the user choose one or more directories. when the change event occurs, a list of all files contained within the selected directory hierarchies is generated and displayed. html content <input type="file" id="filepicker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { ...

Using IndexedDB - Web APIs
d(s) missing"); return; } var year = $('#pub-year').val(); if (year != '') { // better use number.isinteger if the engine has ecmascript 6 if (isnan(year)) { displayactionfailure("invalid year"); return; } year = number(year); } else { year = null; } var file_input = $('#pub-file'); var selected_file = file_input.get(0).files[0]; console.log("selected_file:", selected_file); // keeping a reference on how to reset the file input in the ui once we // have its value, but instead of doing that we rather use a "reset" type // input in the html form. //file_input.val(null); var file_url = $('#pub-file-url').val(); if (selected_file) { addpublic...
...es[0]; console.log("selected_file:", selected_file); // keeping a reference on how to reset the file input in the ui once we // have its value, but instead of doing that we rather use a "reset" type // input in the html form. ...

Timing element visibility with the Intersection Observer API - Web APIs
e, then use the intersection observer api to track how much time each ad is visible to the user. when an ad exceeds one minute of visible time, it will be replaced with a new one. although many aspects of this example will not match real world usage (in particular, the articles all have the same text and aren't loaded from a database, and there are just a handful of simple text-only ads that are selected from an array), this should provide enough understanding of the api to quickly learn how to apply the intersection observer api to your own site. there's a good reason why the notion of tracking visibility of ads is being used in this example. it turns out that one of the most common uses of flash or other script in advertising on the web is to record how long each ad is visible, for the purpose...
...ads being appended to the page, this is created using document.createelement(). when replacing an existing ad, this is set to the specified ad element (replacebox). title will hold the <h2> element representing the ad's title. body will hold the <p> representing the ad's body text. timerelem will hold the <div> element which contains the time the ad has been visible so far. a random ad is selected by computing math.floor(math.random() * ads.length); the result is a value between 0 and one less than the number of ads. the corresponding ad is now known as adbox. if a value is specified for replacebox, we use that as the ad element. to do so, we begin by ending observation of the element by calling intersectionobserver.unobserve(). then the local variables for each of the elements that compr...

MediaDevices.getDisplayMedia() - Web APIs
arameters constraints optional an optional mediastreamconstraints object specifying requirements for the returned mediastream. since getdisplaymedia() requires a video track, the returned stream will have one even if no video track is expressly requested by the constraints object. return value a promise that resolves to a mediastream containing a video track whose contents come from a user-selected screen area, as well as an optional audio track. note: browser support for audio tracks varies, both in terms of whether or not they're supported at all by the media recorder and in terms of the which audio source or sourcoes are supported. check the compatibility table for details for each browser. exceptions rejections of the returned promise are made by passing a domexception error object...
...se for this event: the document in whose context getdisplaymedia() was called is not fully active; for example, perhaps it is not the frontmost tab. notallowederror permission to access a screen area was denied by the user, or the current browsing instance is not permitted access to screen sharing. notfounderror no sources of screen video are available for capture. notreadableerror the user selected a screen, window, tab, or other source of screen data, but a hardware or operating system level error or lockout occurred, preventing the sharing of the selected source. overconstrainederror after creating the stream, applying the specified constraints fails because no compatible stream could be generated. typeerror the specified constraints include constraints which are not permitted when ca...

MediaSource.activeSourceBuffers - Web APIs
syntax var myactivesourcebuffers = mediasource.activesourcebuffers; value a sourcebufferlist containing the sourcebuffer objects for each of the active tracks. ...
... specifications specification status comment media source extensionsthe definition of 'activesourcebuffers' in that specification. recommendation initial definition. ...

MediaTrackConstraints.logicalSurface - Web APIs
tax var constraintsobject = { logicalsurface: constraint }; constraintsobject.logicalsurface = constraint; value a constrainboolean which is true if logical surfaces should be permitted among the selections available to the user. see how constraints are defined in capabilities, constraints, and settings for an explanation of how to define constraints. ...
...d settings for an explanation of how to define constraints. usage notes you can check the setting selected by the user agent after the display media has been created by getdisplaymedia() by calling getsettings() on the display media's video mediastreamtrack, then checking the value of the returned mediatracksettings object's logicalsurface object. for example, if your app needs to know if the selected display surface is a logical one: let islogicalsurface = displaystream.getvideotracks()[0].getsettings().logicalsurface; following this code, islogicalsurface is true if the display surface contained in the stream is a logical surface; that is, one which may not be entirely onscreen, or may even be entirely offscreen. specifications specification status comment s...

MediaTrackConstraints - Web APIs
in the video content of the {domxref("mediastream"), unless the mouse has moved outside the area of the content. motion the mouse cursor is always included in the video if it's moving, and for a short time after it stops moving. never the mouse cursor is never included in the shared video. displaysurface a constraindomstring which specifies the types of display surface that may be selected by the user. this may be a single one of the following strings, or a list of them to allow multiple source surfaces: application the stream contains all of the windows of the application chosen by the user rendered into the one video track. browser the stream contains the contents of a single browser tab selected by the user. monitor the stream's video track contains the entire con...
... multiple source surfaces: application the stream contains all of the windows of the application chosen by the user rendered into the one video track. browser the stream contains the contents of a single browser tab selected by the user. monitor the stream's video track contains the entire contents of one or more of the user's screens. window the stream contains a single window selected by the user for sharing. logicalsurface a constrainboolean value which may contain a single boolean value or a set of them, indicating whether or not to allow the user to choose source surfaces which do not directly correspond to display areas. these may include backing buffers for windows to allow capture of window contents that are hidden by other windows in front of them, or buffers cont...

MediaTrackSettings.displaySurface - Web APIs
ksettings.displaysurface; value the value of displaysurface is a string that comes from the displaycapturesurfacetype enumerated type, and is one of the following: application the stream's video track contains all of the windows belonging to the application chosen by the user. the windows are aggragated into a single video track, with any empty space filled with a backdrop; that backdrop is selected by the user agent. browser the stream's video track presents the entire contents of a single browser tab which the user selected during the getdisplaymedia() call. monitor the video track in the stream presents the complete contents of one or more of the user's screens. any empty space (if the displays are of different dimensions) is filled with a backdrop chosen by the user agent. window t...
...the window may be from any application, not necessarily just from within the user agent. not all user agents support all of these surface types. ...

PaymentMethodChangeEvent.methodName - Web APIs
the read-only methodname property of the paymentmethodchangeevent interface is a string which uniquely identifies the payment handler currently selected by the user. the payment handler may be a payment technology, such as apple pay or android pay, and each payment handler may support multiple payment methods; changes to the payment method within the payment handler are described by the paymentmethodchangeevent. syntax var methodname = paymentmethodchangeevent.methodname; value a domstring which uniquely identifies the currently-selected payment handler. this may be a string chosen from the list of standardized payment method identifiers, or a url used by the payment processing service. see payment method identifiers in payment request api for more information. the default value i...
...ies the currently-selected payment handler. this may be a string chosen from the list of standardized payment method identifiers, or a url used by the payment processing service. see payment method identifiers in payment request api for more information. the default value is the empty string, "". example this example uses the paymentmethodchange event to watch for changes to the payment method selected for apple pay, in order to compute a discount if the user chooses to use a visa card as their payment method. request.onpaymentmethodchange = function(ev) { const { type: cardtype } = ev.methoddetails; const newstuff = {}; if (ev.methodname === "https://apple.com/apple-pay") { switch (cardtype) { case "visa": // do apple pay specific handling for visa card... // m...

PaymentRequest.PaymentRequest() - Web APIs
ollowing fields: supportedmethods for early implementations of the spec, this was a sequence of identifiers for payment methods that the merchant website accepts. starting with more recent browsers, this parameter is more generic than credit cards, it is a single domstring, and the meaning of the data parameter changes with the supportedmethods. for example, the basic card payment method is selected by specifying the string basic-card here. data a json-serializable object that provides optional information that might be needed by the supported payment methods. this has to conform to the type expected by the payment handler indicated by supportedmethods. for basic credit card services, this structure should match the basiccardrequest dictionary. details provides information about th...
... // call show() to trigger the browser's payment flow. request.show().then(function(instrumentresponse) { // do something with the response from the ui. }) .catch(function(err) { // do something with the error f...

PaymentRequest: shippingoptionchange event - Web APIs
for payment requests that request shipping information, and for which shipping options are offered, the shippingoptionchange event is sent to the paymentrequest whenever the user chooses a shipping option from the list of available options. the string identifying the currently-selected shipping option can be found in the shippingoption property. bubbles no cancelable no interface paymentrequestupdateevent event handler property onshippingoptionchange examples this code snippet sets up a handler for the shippingoptionchange event. the code recalculates the total charge for the payment based on the selected shipping option. for example, if there are three options (such as "free ground shipping", "2-day air", and "next day"), each time the u...
...tal based on the changed shipping option. paymentrequest.addeventlistener("shippingoptionchange", event => { const value = calculatenewtotal(paymentrequest.shippingoption); const total = { currency: "eur", label: "total due", value, }; event.updatewith({ total }); }, false); after caling a custom function, calculatenewtotal(), to compute the updated total based on the newly-selected shipping option as specified by the shippingoption. the revised total is submitted back to the payment request by calling the event's updatewith() method. you can also create an event handler for shippingoptionchange using its corresponding event handler property, onshippingoptionchange: paymentrequest.onshippingoptionchange = event => { const value = calculatenewtotal(paymentrequest.shipping...

PaymentResponse - Web APIs
ess the transaction and determine successful fund transfer. the contents of the object depend on the payment method being used; for example, if the basic card payment method is used, this object must conform to the structure defined in the basiccardresponse dictionary. paymentresponse.methodname read only secure context returns the payment method identifier for the payment method that the user selected, for example, visa, mastercard, paypal, etc.. paymentresponse.payeremail read only secure context returns the email address supplied by the user. this option is only present when the requestpayeremail option is set to true in the options parameter of the paymentrequest() constructor. paymentresponse.payername read only secure context returns the name supplied by the user. this option is on...
... paymentrequest() constructor by details.id. paymentresponse.shippingaddress read only secure context returns the shipping address supplied by the user. this option is only present when the requestshipping option is set to true in the options parameter of the paymentrequest() constructor. paymentresponse.shippingoption read only secure context returns the id attribute of the shipping option selected by the user. this option is only present when the requestshipping option is set to true in the options parameter of the paymentrequest() constructor. methods paymentresponse.retry() secure context if something is wrong with the payment response's data (and there is a recoverable error), this method allows a merchant to request that the user retry the payment. the method takes an object as a...

RTCIceTransport.state - Web APIs
received, and the rtcicetransport has begun examining pairings of remote and local candidates in order to attempt to identify viable pairs that could be used to establish a connection. keep in mind that gathering of local candidates may still be underway, and, similarly, the remote device also may still be gathering candidates of its own. ...
... a viable candidate pair has been found and selected, and the rtcicetransport has connected the two peers together using that pair. however, there are still candidates pairings to consider, and there may still be gathering underway on one or both of the two devices. the transport may revert from the "connected" state to the "checking" state if either peer decides to cancel consent to use the selected candidate pair, and may revert to "disconnected" if there are no candidates left to check but one or both clients are still gathering candidates. "completed" the transport has finished gathering local candidates and has received a notification from the remote peer that no more candidates will be sent. in addition, all candidate pairs have been considered and a pair has been selected for use. ...

RTCIceTransport - Web APIs
emote device's ice candidates that have been received by the local end of the rtcpeerconnection and delivered to ice by calling addicecandidate(). getremoteparameters() returns a rtciceparameters object containing the ice parameters for the remote device, as set by a call to rtcpeerconnection.setremotedescription(). if setremotedescription() hasn't been called yet, the return value is null. getselectedcandidatepair() returns a rtcicecandidatepair object that identifies the two candidates—one for each end of the connection—that have been selected so far. it's possible that a better pair will be found and selected later; if you need to keep up with this, watch for the selectedcandidatepairchange event. if no candidate pair has been selected yet, the return value is null. events listen to ...
...hese events using addeventlistener() or by assigning an event listener to the oneventname property of this interface. gatheringstatechange sent to the rtcicetransport object to indicate that the value of the gatheringstate property has changed, indicating a change in this transport's ice candidate negotiation process. also available through the ongatheringstatechange event handler property. selectedcandidatepairchange sent to the rtcicetransport when a new, better pair of candidates has been selected to describe the connectivity between the two peers. this occurs during negotiation or renegotiation, including after an ice restart, which reuses the existing rtcicetransport objects. the current candidate pair can be obtained using getselectedcandidatepair(). also available using the onselect...

RTCIceTransportState - Web APIs
received, and the rtcicetransport has begun examining pairings of remote and local candidates in order to attempt to identify viable pairs that could be used to establish a connection. keep in mind that gathering of local candidates may still be underway, and, similarly, the remote device also may still be gathering candidates of its own. ...
... a viable candidate pair has been found and selected, and the rtcicetransport has connected the two peers together using that pair. however, there are still candidates pairings to consider, and there may still be gathering underway on one or both of the two devices. the transport may revert from the "connected" state to the "checking" state if either peer decides to cancel consent to use the selected candidate pair, and may revert to "disconnected" if there are no candidates left to check but one or both clients are still gathering candidates. "completed" the transport has finished gathering local candidates and has received a notification from the remote peer that no more candidates will be sent. in addition, all candidate pairs have been considered and a pair has been selected for use. ...

Range.extractContents() - Web APIs
the range.extractcontents() method moves contents of the range from the document tree into a documentfragment. event listeners added using dom events are not retained during extraction. html attribute events are retained or duplicated as they are for the node.clonenode() method. html id attributes are also cloned, which can lead to an invalid document if a partially-selected node is extracted and appended to the document. partially selected nodes are cloned to include the parent tags necessary to make the document fragment valid. syntax documentfragment = range.extractcontents(); example basic example var range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); var documentfragment = range.extractcontents(); document.body.appendchild(documentfragment...
...range(); range.selectnode(document.getelementsbytagname("div").item(0)); var documentfragment = range.extractcontents(); document.body.appendchild(documentfragment); moving items between containers this example lets you move items between two containers. select one or more item, and then click "swap" to move them to the opposite container. ...

Selection.toString() - Web APIs
in javascript, this method is called automatically when a function the selection object is passed to requires a string: alert(window.getselection()) // what is called alert(window.getselection().tostring()) // what is actually being effectively called. ...
... in javascript, this method is called automatically when a function the selection object is passed to requires a string: alert(window.getselection()) // what is called alert(window.getselection().tostring()) // what is actually being effectively called. ...

SpeechSynthesis - Web APIs
ecessary variables, we retrieve a list of the voices available using speechsynthesis.getvoices() and populate a select menu with them so the user can choose what voice they want. inside the inputform.onsubmit handler, we stop the form submitting with preventdefault(), create a new speechsynthesisutterance instance containing the text from the text <input>, set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the speechsynthesis.speak() method. var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('.txt'); var voiceselect = document.queryselector('select'); var pitch = document.queryselector('#pitch'); var pitchvalue = document.queryselector('.pitch-value'); var rate = d...
...ute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe defi...

SpeechSynthesisUtterance.lang - Web APIs
ing a bcp 47 language tag. examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...xamples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.lang = 'en-us'; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'lang' in that specification. draft ...

SpeechSynthesisUtterance.pitch - Web APIs
rosody tags in the markup. examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...xamples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = 1.5; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'pitch' in that specification. draft ...

SpeechSynthesisUtterance.text - Web APIs
ance is 32,767 characters. examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...xamples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } console.log(utterthis.text); synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'text' in that specification. draft ...

SpeechSynthesisUtterance.volume - Web APIs
rosody tags in the markup. examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... ...
...xamples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.volume = 0.5; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'volume' in that specification. draft ...

USBDevice.selectAlternateInterface() - Web APIs
return value a promise. ...
... return value a promise. ...

USBDevice - Web APIs
usbdevice.configurations read only an array of device-specific interfaces for controlling a paired usb device. usbdevice.deviceclass read only one of three properties that identify usb devices for the purpose of loading a usb driver that will work with that device. ...
...ice session has started. usbdevice.releaseinterface() returns a promise that resolves when a cliamed interface is released from exclusive access. usbdevice.reset() returns a promise that resolves when the device is reset and all app operations canceled and their promises rejected. usbdevice.selectalternateinterface() returns a promise that resolves when the specified alternative endpoint is selected. usbdevice.selectconfiguration() returns a promise that resolves when the specified configuration is selected. usbdevice.transferin() returns a promise that resolves with a usbtransferinresult when bulk or interrupt data is received from the usb device. usbdevice.transferout() returns a promise that resolves with a usbtransferoutresult when bulk or interrupt data is sent to the usb device. ...

VideoTrack - Web APIs
only a single video track can be active at any given time, so setting this property to true for one track while another track is active will make that other track inactive. id read only a domstring which uniquely identifies the track within the media. ...
...r functions such as foreach(). this first example gets the first video track on the media: var firsttrack = tracks[0]; the next example scans through all of the media's video tracks, activating the first video track that is in the user's preferred language (taken from a variable userlanguage). for (var i = 0; i < tracks.length; i++) { if (tracks[i].language === userlanguage) { tracks[i].selected = true; break; } }); the language is in standard (rfc 5646) format. for us english, this would be "en-us", for example. specifications specification status comment html living standardthe definition of 'videotrack' in that specification. living standard ...

VideoTrackList.onchange - Web APIs
the videotracklist property onchange is an event handler which is called when the change event occurs, indicating that a videotrack in the videotracklist has been made active. the event is passed into the event handler in the form of an event object; the event doesn't provide any additional information. to determine the new state of media's tracks, you'll have to look at their videotrack.selected flags. note: you can also add a handler for the change event using addeventlistener(). syntax videotracklist.onchange = eventhandler; value set onchange to a function that should be called whenever a track is made active. example this snippet establishes a handler for the change event that looks at each of the tracks in the list, calling a function to update the state of a user interface contro...
...ck is made active. example this snippet establishes a handler for the change event that looks at each of the tracks in the list, calling a function to update the state of a user interface control that indicates the current state of the track. var tracklist = document.queryselector("video").videotracks; tracklist.onchange = function(event) { tracklist.foreach(function(track) { updatetrackselectedbutton(track.id, track.selected); }); }; the updatetrackselectedbutton(), in this example, should be a function that finds a user interface control using the track's id (perhaps the app uses the track id as the control element's id) and the track's selected flag to determine which state the control should be in now. specifications specification status comment html...

VideoTrackList - Web APIs
nt, with each track represented by a separate videotrack object in the list. retrieve an instance of this object with htmlmediaelement.videotracks. the individual tracks can be accessed using array syntax or functions such as foreach() for example. properties this interface also inherits properties from its parent interface, eventtarget. length read only the number of tracks in the list. ...
...ack object in the list. retrieve an instance of this object with htmlmediaelement.videotracks. the individual tracks can be accessed using array syntax or functions such as foreach() for example. properties this interface also inherits properties from its parent interface, eventtarget. length read only the number of tracks in the list. selectedindex read only the index of the currently selected track, if any, or −1 otherwise. event handlers onaddtrack an event handler to be called when the addtrack event is fired, indicating that a new video track has been added to the media element. onchange an event handler to be called when the change event occurs — that is, when the value of the selected property for a track has changed, due to the track being made active or inactive. o...

Signaling and video calling - Web APIs
them from their local ice layer; there is no taking turns or batching of candidates. as soon as the two peers agree upon one candidate that they can both use to exchange the media, media begins to flow. each peer continues to send candidates until it runs out of options, even after the media has already begun to flow. this is done in hopes of identifying even better options than the one initially selected. if conditions change—for example the network connection deteriorates—one or both peers might suggest switching to a lower-bandwidth media resolution, or to an alternative codec. this triggers a new exchange of candidates, after which a another media format and/or codec change may take place. you can learn more about the codecs which webrtc requires browsers to support, which additional code...
...s executed. it receives, as input, a mediastream object representing the stream with audio from the user's microphone and video from their webcam. note: we could restrict the set of permitted media inputs to a specific device or set of devices by calling navigator.mediadevices.enumeratedevices() to get a list of devices, filtering the resulting list based on our desired criteria, then using the selected devices' deviceid values in the deviceid field of the the mediaconstraints object passed into getusermedia(). in practice, this is rarely if ever necessary, since most of that work is done for you by getusermedia(). we attach the incoming stream to the local preview <video> element by setting the element's srcobject property. since the element is configured to automatically play incoming video,...

Inputs and input sources - Web APIs
urces[0]; for (let i=0; i < xrsession.inputsources.length; i++) { if (xrsession.inputsources[i].handedness === user.handedness) { primaryinputsource = inputsources[i]; break; } } this snippet of code starts by assuming that the first input source is the primary, but then looks for one whose handedness matches the one specified in the user object. if it matches, that input source is selected as the primary. first-used another option is to use the first input the user triggers the select action on. the code below starts by assuming the first input source is the primary, then establishes a handler for the select event that records the event's source as the primary input source. then the select event handler is replaced with the function realselecthandler(), which will be used for han...
...t.inputsource; xrsession.onselect = realselecthandler; return realselecthandler(event); }; the effect is that we set the primary input source the first time a select event is received, regardless of which input source it comes from, handle the event as normal from there, and from then on simply handle the events as usual without any further worries about which input source is primary. user-selected the most complex way to determine a primary input source is highly flexible but can require a great deal of work to implement. in this scenario, you iterate over the list of input sources and their profiles to gather information about each input source, then present a user interface describing each input, allowing the user to assign uses to each of them. doing this well could be a big job, but i...

Window - Web APIs
window.focus() sets focus on the current window. window.getcomputedstyle() gets computed style for the specified element. computed style indicates the computed values of all css properties of the element. window.getdefaultcomputedstyle() gets default computed style for the specified element, ignoring author stylesheets. window.getselection() returns the selection object representing the selected item(s). window.matchmedia() returns a mediaquerylist object representing the specified media query string. window.maximize() fixme: needscontents window.minimize() (top-level xul windows only) minimizes the window. window.moveby() moves the current window by a specified amount. window.moveto() moves the window to the specified coordinates. window.open() opens a new window. window.po...
...set globaleventhandlers.onresize called continuously as you are resizing the window. globaleventhandlers.onscroll called when the scroll bar is moved via any means. if the resource fully fits in the window, then this event cannot be invoked globaleventhandlers.onwheel called when the mouse wheel is rotated around any axis globaleventhandlers.onselect called after text in an input field is selected globaleventhandlers.onselectionchange is an eventhandler representing the code to be called when the selectionchange event is raised. windoweventhandlers.onstorage called when there is a change in session storage or local storage. see storage event globaleventhandlers.onsubmit called when a form is submitted windoweventhandlers.onunhandledrejection an event handler for unhandled promise...

Using the slider role - Accessibility
more information. keyboard and focus the slider should be keyboard focusable and operable. when the user tabs focus to the slider, it should land on the thumb: the control a mouse user would drag. arrow keys should operate as follows (localization for right-to-left languages should reverse the direction of the arrows): key(s) action right and up arrows increase the selected value left and down arrows decrease the selected value page up and page down optionally increase and decrease the value by a set amount (e.g. by 10 on a range from 0 to 100) possible effects on user agents and assistive technology note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those op...
.../output> the following code snippet allows you to return the output as it is updated by user input: function outputupdate(vol) { document.queryselector('#volume').value = vol; } example 2: text values sometimes, a slider is used to choose a value that is not, semantically, a number. in these cases, the aria-valuetext attribute is used to provide the appropriate text name for the currently selected value. in the example below, the slider is used to select a day of the week. <label id="day-label">days</label> <div class="day-slider"> <div id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="day-label" aria-valuemin="1" aria-valuemax="7" aria-valuenow="2" aria-valuetext="monday"> </div> </div> the code snippet below shows a function that responds ...

ARIA: grid role - Accessibility
roles treegrid (subclass) if a grid has columns that can expanded or collapsed, a treegrid can be used. row a row inside the grid. rowgroup a group containing one or multiple rows. states and properties aria-level indicates the hierarchical level of the grid within other structures. aria-multiselectable if aria-multiselectable is set to true, multiple items in the grid can be selected. the default value is false. aria-readonly if the user can navigate the grid but not change the value or values of the grid, the aria-readonly should be set to true. the default value is false. for many use cases, an html table element is sufficient as it and its elements already include many aria roles. keyboard interactions when a keyboard user encounters a grid, they navigate the rows ...
...f focus is in the first row of the grid, focus does not move. home moves focus to the first cell in the row that contains focus. end moves focus to the last cell in the row that contains focus. ctrl + home moves focus to the first cell in the first row. ctrl + end moves focus to the last cell in the last row. if cells, rows, or columns can be selected, the following key combination are commonly used: key combination action ctrl + space select the column that contains the focus. shift + space selects the row that contains the focus. if the grid includes a column with checkboxes to select rows, this key combination can be used to check that box even if the focus is not on the checkbox. ctrl + a ...

ARIA: row role - Accessibility
group of rows can be nested within a grid, table or treegrid directly, or within a rowgroup in one of those containers. each row contains child cells. these cells can be of different types, depending on whether they are column or row headers, or grid or regular cells. a row can contain a number of attributes clarifying the row's role, including aria-colindex, aria-level, aria-rowindex, and aria-selected. if the row is within a treegrid, rows can include the aria-expanded attribute, using the attribute to indicate the present status. this is not the case for an ordinary table or grid, in which the aria-expanded attribute is not present. to create an interactive widget that has a tabular structure, use the grid pattern instead. if the interaction provides for the selection state of individual ce...
...tly expanded. aria-expanded="false": row is currently collapsed. aria-expended="undefined" or the attribute is missing: the row is neither expandable nor collapsible. if the element with the aria-expanded attribute controls the expansion of another grouping container that is not 'owned by' the element, the author should reference the container by using the aria-controls attribute. aria-selected state only relevant if the row is in an interactive container, such as a grid or treegrid, but not relevant if the row is in a table. the aria-selected attribute can take one of three values, or be omitted: aria-selected="true: row is currently selected aria-selected="false": row is not currently selected. aria-selected="undefined" or the attribute is missing: the row is not selectable. ...

HTML To MSAA - Accessibility
el_for (0x1002), points to caption element n/a n/a li and others role_system_ listitem n/a n/a state_system_ readonly n/a n/a n/a contains child accessible for list bullet ol, ul and others role_system_ list n/a n/a state_system_ readonly n/a n/a n/a optgroup bstr role n/a n/a n/a n/a n/a n/a option role_system_ listitem from @label attribute, from child text nodes n/a state_system_ selected if option is selected n/a "select" event_object_ selectionwithin event_object_ selectionadd if selected event_object_ selectionremove if unselected select @size > 1 role_system_ list n/a n/a state_system_ multiselectable if multiselectable n/a n/a n/a select @size = 1 role_system_ combobox n/a name of focused option state_system_ expanded if combobox open state_system_ collapsed if com...
...f unselected select @size > 1 role_system_ list n/a n/a state_system_ multiselectable if multiselectable n/a n/a n/a select @size = 1 role_system_ combobox n/a name of focused option state_system_ expanded if combobox open state_system_ collapsed if combobox is collapsed state_system_ haspopup state_system_ focusable n/a "open"/"close" depending on state event_object_ valuechange when selected option is changed table role_system_ table from @summary attribute n/a described_by (0x100e) points to caption element n/a n/a td, th role_system_ cell n/a n/a n/a n/a n/a n/a thead role_system_ columnheader n/a n/a n/a n/a n/a n/a abbr, acronym, blockquote, form, frame, h1-h6, iframe bstr role n/a n/a n/a n/a n/a n/a ...

::selection - CSS: Cascading Style Sheets
in particular, background-image is ignored. syntax /* legacy firefox syntax (version 61 and below) */ ::-moz-selection ::selection examples html this text has special styles when you highlight it. <p>also try selecting text in this paragraph.</p> css ::-moz-selection { color: gold; background-color: red; } p::-moz-selection { color: white; background-color: blue; } /* make selected text gold on a red background */ ::selection { color: gold; background-color: red; } /* make selected text in a paragraph white on a blue background */ p::selection { color: white; background-color: blue; } result accessibility concerns don't override selected text styles for purely aesthetic reasons — users can customize them to suit their needs. for people experiencing cognitive...
...erns or who are less technologically literate, unexpected changes to selection styles may hurt their understanding of the functionality. if overridden, it is important to ensure that the contrast ratio between the text and background colors of the selection is high enough that people experiencing low vision conditions can read it. color contrast ratio is found by comparing the luminosity of the selected text and the selected text background colors. to meet current web content accessibility guidelines (wcag), text content must have a contrast ratio of 4.5:1, or 3:1 for larger text such as headings. (wcag defines large text as between 18.66px and 24px and bold, or 24px or larger.) webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion...

:checked - CSS: Cascading Style Sheets
the :checked css pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select>) element that is checked or toggled to an on state. /* matches any checked/selected radio, checkbox, or option */ :checked { margin-left: 25px; border: 1px solid blue; } the user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element. note: because browsers often treat <option>s as replaced elements, the extent to which they can be styled with the :checked pseudo-class varies from browser to browser. syntax :checked examples basic example html <div> <input type="radio" name="my-input" id="yes"> <label for="yes">yes</label> <input type="radio" name="my-input" id="no"> ...
... html <input type="checkbox" id="expand-toggle" /> <table> <thead> <tr><th>column #1</th><th>column #2</th><th>column #3</th></t...

Introducing the CSS Cascade - CSS: Cascading Style Sheets
tified by its font-family descriptor. if several @font-face rules with the same descriptor are defined, only the most appropriate @font-face, as a whole, is considered. while the declarations contained in most at-rules — such as those in @media, @document, or @supports — participate in the cascade, declarations contained in @keyframes don't. as with @font-face, only the at-rule as a whole is selected via the cascade algorithm. finally, note that @import and @charset obey specific algorithms and aren't affected by the cascade algorithm. origin of css declarations the css cascade algorithm's job is to select css declarations in order to determine the correct values for css properties. css declarations originate from different origins: the user-agent stylesheets, the author stylesheets, and t...
...should apply. no declaration is marked as !important, so the precedence order is author style sheets before user style sheets or user-agent stylesheet. so three declarations are in competition: margin-left: 0 margin-left: 3px margin-left: 1px the last one is ignored (on a screen), and the first two have the same selector, hence the same specificity. therefore, it is the last one that is then selected: margin-left: 3px note that the declaration defined in the user css, though having a greater specificity, is not chosen as the cascade algorithm is applied before the specificity algorithm. specifications specification status comment css cascading and inheritance level 4 candidate recommendation added the revert keyword, which allows rolling a property back a...

background-blend-mode - CSS: Cascading Style Sheets
ednocomputed valueas specifiedanimation typediscrete formal syntax <blend-mode>#where <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity examples <div id="div"></div> <select id="select"> <option>normal</option> <option>multiply</option> <option selected>screen</option> <option>overlay</option> <option>darken</option> <option>lighten</option> <option>color-dodge</option> <option>color-burn</option> <option>hard-light</option> <option>soft-light</option> <option>difference</option> <option>exclusion</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosit...
... candidate recommendation initial definition ...

<color> - CSS: Cascading Style Sheets
y. activetext text of active links buttonface background of push buttons buttontext text of push buttons canvas background of application content or documents canvastext text in application content or documents field background of input fields fieldtext text in input fields graytext text that is disabled highlight background of items that are selected in a control highlighttext text of items that are selected in a control linktext text of non-active, non-visited links visitedtext text of visited links deprecated system color keywords the following keywords were defined in earlier versions of the css color module. they are now deprecated. for use on public web pages. activeborder active window border. activeca...
...h would be threedface or buttonface when the mouse pointer is not over it). should be used with the -moz-buttonhovertext foreground color. -moz-buttonhovertext the text color of a button that the mouse pointer is over (which would be buttontext when the mouse pointer is not over it). should be used with the -moz-buttonhoverface background color. -moz-cellhighlight background color for selected item in a tree widget. should be used with the -moz-cellhighlighttext foreground color. see also -moz-html-cellhighlight. -moz-cellhighlighttext text color for a selected item in a tree. should be used with the -moz-cellhighlight background color. see also -moz-html-cellhighlighttext. -moz-combobox background color for combo-boxes. should be used with the -moz-comboboxtext foreground...

user-select - CSS: Cascading Style Sheets
contain enables selection to start within the element; however, the sele...
... element is an editable element, the used value is contain otherwise, if the used value of user-select on the parent of this element is all, the used value is all otherwise, if the used value of user-select on the parent of this element is none, the used value is none otherwise, the used value is text text the text can be selected by the user. all the content of the element shall be selected atomically: if a selection would contain part of the element, then the selection must contain the entire element including all its descendants. if a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected. contain enables selection to start within the element; however, the selection will be contained by the bounds of that element. element ...

Constraint validation - Developer guides
ploaded. checking this on the client side before the file is transmitted to the server requires combining the constraint validation api, and especially the field.setcustomvalidity() method, with another javascript api, here the file api. ...
...han 75 kb : </label> <input type="file" id="fs"> this displays: the javascript reads the file selected, uses the file.size() method to get its size, compares it to the (hard coded) limit, and calls the constraint api to inform the browser if there is a violation: function checkfilesize() { var fs = document.getelementbyid("fs"); var files = fs.files; // if there is (at least) one file selected if (files.length > 0) { if (files[0].size > 75 * 1024) { // check the constraint fs.setcustomvalidity("the selected file must not be larger than 75 kb"); return; } } // no custom constraint violation fs.setcustomvalidity(""); } finally we hook the method with the correct event: window.onload = function () { document.getelementbyid("fs").onchange = checkfilesize...

HTML attribute: accept - HTML: Hypertext Markup Language
it is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types. because of this, you should make sure that expected requirement is validated server-side. examples ...
...pe="file" id="videofile" accept="video/*"> </p> <p> <label for="imagefile">select some images:</label> <input type="file" id="imagefile" accept="image/*" multiple> </p> note the last example allows you to select multiple iamges. see the multiple attribute for more information. unique file type specifiers a unique file type specifier is a string that describes a type of file that may be selected by the user in an <input> element of type file. each unique file type specifier may take one of the following forms: a valid case-insensitive filename extension, starting with a period (".") character. for example: .jpg, .pdf, or .doc. a valid mime type string, with no extensions. the string audio/* meaning "any audio file". the string video/* meaning "any video file". the string image/* m...

<input type="color"> - HTML: Hypertext Markup Language
abel> <input type="color" value="#ff0000" id="colorwell"> <p>watch the paragraph colors change when you adjust the color picker. as you make changes in the color picker, the first paragraph's color changes, as a preview (this uses the <code>input</code> event). when you close the color picker, the <code>change</code> event fires, and we detect that to change every paragraph to the selected color.</p> javascript first, there's some setup. here we establish some variables, setting up a variable that contains the color we'll set the color well to when we first load up, and then setting up a load handler to do the main startup work once the page is fully loaded. var colorwell; var defaultcolor = "#0000ff"; window.addeventlistener("load", startup, false); initialization once the ...
... function updatefirst(event) { var p = document.queryselector("p"); if (p) { p.style.color = event.target.value; } } when the color picker is dismissed, indicating that the value will not be changing again (unless the user re-opens the color picker), a change event is sent to the element. we handle that event using the updateall() function, using event.target.value to obtain the final selected color: function updateall(event) { document.queryselectorall("p").foreach(function(p) { p.style.color = event.target.value; }); } this sets the color of every <p> block so that its color attribute matches the current value of the color input, which is referred to using event.target. result the final result looks like this: specifications specification status commen...

<input type="month"> - HTML: Hypertext Markup Language
ange of dates that the user can choose. in the following example we specify a minimum month of 1900-01 and a maximum month of 1999-12: <form> <label for="bday-month">what month were you born in?</label> <input id="bday-month" type="month" name="bday-month" min="1900-01" max="1999-12"> </form> the result here is that: only months between in january 1900 and december 1999 can be selected; months outside that range can't be scrolled to in the control. depending on what browser you are using, you might find that months outside the specified range might not be selectable in the month picker (e.g. edge), or invalid (see validation) but still available (e.g. chrome). controlling input size <input type="month"> doesn't support form sizing attributes such as size. you'll have to res...
... for="month-visit">what month would you like to visit us?</label> <input type="month" id="month-visit" name="month-visit"> <span class="validity"></span> </div> <p class="fallbacklabel">what month would you like to visit us?</p> <div class="fallbackdatepicker"> <div> <span> <label for="month">month:</label> <select id="month" name="month"> <option selected>january</option> <option>february</option> <option>march</option> <option>april</option> <option>may</option> <option>june</option> <option>july</option> <option>august</option> <option>september</option> <option>october</option> <option>november</option> <option>december</option> ...

<input type="password"> - HTML: Hypertext Markup Language
is attribute is ignored completely. tip: use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. you should also include other explanatory text nearby. use of a pattern is strongly recommended for password inputs, in order to help ensure that valid passwords using a wide assortment of character classes are selected and used by your users. with a pattern, you can mandate case rules, require the use of some number of digits and/or punctuation characters, and so forth. see the section validation for details and an example. placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. it should be a word or short phrase that d...
...however, given that the text is obscured, the usefulness of these is somewhat limited. validation if your application has character set restrictions or any other requirement for the actual content of the entered password, you can u...

<input type="time"> - HTML: Hypertext Markup Language
epository. 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. appearance chrome and opera in chrome/opera the time control is simple, with slots to enter hours and minutes in 12 or 24-hour format depending on operating system locale, and up and down arrows to increment and decrement the currently selected component. in some versions, an "x" button is provided to clear the control's value. 12-hour 24-hour chrome 83 in chrome 83, the ui controls have been updated with a new look and feel. the new element is functionally identical to the old one, but has a similar ui to edge. 24-hour firefox firefox's time control is very similar to chrome's, except that it doesn't have the up and down arr...
...if the time includes seconds (see using the step attribute), the format is always hh:mm:ss. you can learn more about the format of the time value used by this input type in time strings in date and time formats used in html. in this example, you can see the time input's value by entering a time and seeing how it changes afterward. first, a look...

<menuitem> - HTML: Hypertext Markup Language
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 the same command as the menu's subject element (such as a button or...
...the disabled attribute is appropriate in any context where a change in circumstances might render the command relevant. icon image url, used to provide a picture to represent the command. label the name of the command as shown to the user. required when a command attribute is not present. radiogroup this attribute specifies the name of a group of commands to be toggled as radio buttons when selected. may only be used where the type attribute is radio. type this attribute indicates the kind of command, and can be one of three values. command: a regular command with an associated action. this is the missing value default. checkbox: 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 radi...

Digest - HTTP
the digest is calculated over the entire representation. the representation itself may be: fully contained in the response message body not at all contained in the message body (for example, in a response to a head request) partially contained in the message body (for example, in a response to a range request). ...
...le sha-256 uses base64 encoding. examples digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe=,unixsum=30637 specifications specification title draft-ietf-httpbis-digest-headers-latest resource digests for http this header was originally defined in rfc 3230, but the definition of "selected representation" in rfc 7231 made the original definition inconsistent with current http specifications. when released, the "resource digests for http" draft therefore will obsolete rfc 3230 and will update the standard to be consistent. ...

Web audio codec guide - Web media technologies
the important information out of imperfect or noisy audio. they strip away audio frequencies that aren't used much, tolerate loss of precision in the decoded output, and use other methods to lose audio content, quality, and fidelity to produce smaller encoded media. upon decoding, the output is, to varying degrees, still understandable. the specific codec used—and the compression configuration selected—determine how close to the original, uncompressed audio signal the output seems to be when heard by the human ear. because of the differences in how lossy codecs work compared to lossless ones, especially the fact that lossless ones have to be much more conservative with their compression, lossy codecs nearly always result in significantly smaller compressed audio than lossless codecs do. gen...
...r bit rates, which results in larger files but with less loss of fidelity. or you can choose a lossless format. the choice depends largely on the union of your application's requirements and the preferences of your users. for an actual music download service, you might offer songs for download as 128 kbps mp3 files, 256 kbps aac files (in mp4 containers), or flac files, depending on a preference selected by the user. if you need to choose just one format, select one that makes sense given your requirements and the type of audio content being downloaded. generally, of course, mp3 is the most common format used for music; choose a bit rate of at least 192 kbps if possible. the itunes store, on the other hand, distributes music in 256 kbps aac format. example: voice recording and playback the spe...

simple-prefs - Archive of obsolete content
monstername", "value": "kraken", "title": "monster name" } color displayed as a colorpicker and stores a string in the #123456 format. { "type": "color", "name": "highlightcolor", "value": "#6a5acd", "title": "highlight color" } file displayed as a "browse" button that opens a file picker and stores the full path and name of the file selected. { "type": "file", "name": "myfile", "title": "select a file" } directory displayed as a "browse" button that opens a directory picker and stores the full path and name of the directory selected. { "type": "directory", "name": "mydirectory", "title": "select a directory" } menulist displayed as a drop-down list. the type...

ui/frame - Archive of obsolete content
// city-info.js var cityselector = window.document.getelementbyid("city-selector"); cityselector.addeventlistener("change", citychanged); function citychanged() { window.parent.postmessage(cityselector.value, "*"); } to listen for these messages in the main add-on code, you can assign a listener to the frame's message event. the data property of the event is the message payload. va...

cfx - Archive of obsolete content
le, as the value of updateurl. --no-strip-xpi will force the packager to include all files into the output xpi. if your extension works unpacked, but breaks after you cfx xpi it, you should try using this option. experimental options --harness-option=key=value extra properties added to harness-options.json. --manifest-overload add fields to, or override selected fields in, package.json. this option takes an argument which is a path to a file containing json, and overloads any property of package.json with the properties found in the specified file. --output-file=output_file where to put the finished xpi file. --templatedir=templatedir the cfx xpi command constructs the add-on using a extension template which you can find unde...

Creating annotations - Archive of obsolete content
verview-amo-review-process/, post-2249,when you submit a new add-on, you will have to choose between 2 review tracks: full review and preliminary review. annotation editor panel so far we have a page-mod that can highlight elements and send information about them to the main add-on code. next we will create the editor panel, which enables the user to enter an annotation associated with the selected element. we will supply the panel's content as an html file, and will also supply a content script to execute in the panel's context. so create a subdirectory under data called editor. this will contain two files: the html content, and the content script. annotation editor html the html is very simple: <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/...

Progress Listeners - Archive of obsolete content
listener interface. note that if you just want to execute your code each time a page loads, you can use an an easier method, onpageload(). note that onpageload does not fire for back button clicks. in the examples below the progress listener is attached to the tabbrowser, which means you don't get any notifications for inactive tabs. firefox 3.5 includes a way to set up a listener for all tabs, selected and not: listening to events on all tabs. example create an object which implements nsiwebprogresslistener: const state_start = ci.nsiwebprogresslistener.state_start; const state_stop = ci.nsiwebprogresslistener.state_stop; var mylistener = { queryinterface: xpcomutils.generateqi(["nsiwebprogresslistener", "nsisupportsweakreference"]), on...

Install Manifests - Archive of obsolete content
//myaddon/content/options.html</em:optionsurl> this section here contains an example of localized html page as an option panel in a new tab: bootstrapped extensions :: localization (l10n) (example linked to is: github :: l10n-html-options). optionsurl the chrome:// url of the extension's options dialog box. this is only useful to extensions. if this property is specified, when the extension is selected in the extensions list, the options button is enabled and will show this. <em:optionsurl>chrome://myext/content/options.xul</em:optionsurl> gecko 7 note in firefox 7 you can also simply include your options xul as a file named options.xul, in the base directory of the add-on. skinnable a true or false value property that tells the application whether the (complete) theme can be skinned by ...

Supporting search suggestions in search plugins - Archive of obsolete content
if you want to offer a map link instead of just a search result page for a given suggestion, you can return an url to a map in this array. if you don't specify a query url, the default query is used based on the search described by the <url> element in the search plugin's xml description. query urls are not supported in firefox, and are ignored. this enhancement request - the handling of a selected suggestion, namely calling of a full specified url as proposed in the opensearch standard - is tracked in bug 386591. for example, if the search term is "fir", and you don't need to return descriptions or alternate query urls, you might return the following json: ["fir", ["firefox", "first choice", "mozilla firefox"]] note that in this example, only the query string and completion array are s...

CSS3 - Archive of obsolete content
downloadable fonts via the css @font-face at-rule. the control of the contextual inter-glyph spacing via the css font-kerning property. the choice of language-specific glyphs via the css font-language-override property. the choice of glyphs with specific opentype features via the css font-feature-settings property. the control of the aspect ratio to use when fallback fonts are selected via the css font-size-adjust property. the choice of alternative font faces using the css font-stretch, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, and font-variant-position properties. it also extends the related css font-variant shorthand property and introduces the @font-feature-values at-rule. the control of the ...

Creating a Web based tone generator - Archive of obsolete content
e data was written, saving the tail. tail = sounddata.slice(written); } currentwriteposition += written; } }, 100); } // control and generate the sound. ...

Autodial for Windows NT - Archive of obsolete content
fix is for those users. we try to mimic the autodial system service if it is not running and the user has the autodial feature turned on in control panel | internet options | connections. if an address can't be reached, we trigger the autodial features from inside mozilla. if a default dialup connection is configured, we use that one. if more than one dialup connection is configured, and none is selected as the default, we display a list of dialup connections and let the user choose one. how to configure autodial on nt-based systems first, you will need to configure a dialup connection and make sure it works when triggered manually. if you are using a system with just a modem, the best approach is to configure the remote access auto connection service to automatically start. then enable autodi...

Getting Started - Archive of obsolete content
o display the buttons and other controls, where to put the images, what border and padding it should put around them, and so on. as an example, let's change the standard button. go into the global directory and open button.css in your favorite text editor. scroll down to button {. this section defines the normal button in its basic state (there is no mouse over it, it's not disabled, and it's not selected). change the background-color: to darkblue and the color: to white, and save the file. more after i get done with some tests repackaging jar now all you need to do is repackage a jar file with the following directory structure, using your favorite archive manager to create a zip archive: /chrome/my_theme.jar!/communicator/* /chrome/my_theme.jar!/editor/* /chrome/my_theme.jar!/global/* /chrome/my_...

Getting Started - Archive of obsolete content
nd other controls, where to put the images, what border and padding it should put around them, etc. for this next part, let's modify the standard button. go into \mozilla\chrome\classic\skin\classic\global and open button.css in your favourite text editor. scroll down to button {. this section defines the normal button in its basic state (there is no mouse over it, it's not disabled, and it's not selected). change the background-color: to darkblue and the color: to white. save the file and run mozilla. when the browser pops up, you probably won't be able to see much. open the preferences dialog box and take a look at all of the buttons in there. they should all be blue with white text. changing images the images used on buttons in the interface are located in the same directories as the css files.

In-Depth - Archive of obsolete content
appears in a tree view below is the actual code for the interface. using this, we can figure out what objects are where, what classes/id's they have applied to them, and most importantly, which file the style is located in. click on the inspect icon and then click on the back button in the browser window. what this will do is find the code for the back button and display it in the dom inspector. selected in the tree view will be xul:toolbarbutton. this is the portion of the icon with only the image. but the back button is made up of two parts (the back portion and the history portion), so if we move one level up in the tree we'll see toolbarbutton. this is what we want. on the right hand side of the dom inspector, what will be listed is the dom node information. but what we're interested in is t...

Creating a Skin for Firefox/Getting Started - Archive of obsolete content
he buttons and other controls, where to put the images, what border and padding it should put around them, and so on. as an example, let's change the standard button. go into the global global directory and open button.css in your favorite text editor. scroll down to "button {". this section defines the normal button in its basic state (there is no mouse over it, it's not disabled, and it's not selected). change the background-color: to darkblue and the color: to white, and save the file. repackaging jar now all you need to do is repackage a jar file with the following directory structure, using your favorite archive manager to create a zip archive: /browser/* /communicator/* /global/* /help/* /mozapps/* /contents.rdf /install.rdf /icon.png /preview.png make sure not to just zip up the m...

Download Manager preferences - Archive of obsolete content
if a preference is not set when the download manager looks it up, the download manager assumes the default value but doesn't necessarily add the missing preference. the following table however, includes preferences which must be included in any product for the download manager to function. preference description browser.download.dir a local folder the user may have selected for downloaded files to be saved. migration of other browser settings may also set this path. this folder is enabled when browser.download.folderlist equals 2. browser.download.folderlist indicates the default folder to download a file to. 0 indicates the desktop; 1 indicates the systems default downloads location; 2 indicates a custom (see: browser.download.dir) folder. in ...

Block and Line Layout Cheat Sheet - Archive of obsolete content
is flag is set if the combined area of a frame's children extend past the frame's bounding box. (what is a frame's "bounding box"?) if this flag is set, then <code>moverflowarea</code> will contain the total area of the frame, including the overflow. ns_frame_external_reference ns_frame_replaced_element ns_frame_generated_content ns_frame_has_loaded_images ns_frame_out_of_flow ns_frame_selected_content ns_frame_is_dirty ns_frame_is_unflowable an unflowable frame is an error condition; for example, due to system limitations. currently, the only way to get an unflowable frame is to have a frame tree that is "too deep". (see nsframe::isframetreetoodeep().) ns_frame_has_dirty_children ns_frame_has_view ns_frame_independent_selection ns_frame_is_special nsblockframe mflags ...

slideBar - Archive of obsolete content
about status: in development instantiation: jetpack.future.import('slidebar') last update: v0.6 summary: slidebar is a reinvention of the old sidebar feature of browsers. they allow quick access to a wide range of both temporary and permanent information at the side of your browser window. when a slidebar feature is selected, its contents will be revealed from behind the current web page. creating a slidebar and adding options to implement a new slidebar within your jetpack code, use the method jetpack.slidebar.append(options) ...

UI - Archive of obsolete content
e toolbar panel a movable, expandable, and custom styled content element to display jetpack content tabs adding events and interacting with browser tabs and their contained documents statusbar low-level functions and basic calls notifications a system for alerting users via provided ui mechanisms selection interacting with user-selected content window mitigates and eases interactions between different browser windows ...

New Skin Notes - Archive of obsolete content
o a new item) on the contrary, the list of categories current page belongs to, should be near the footer (see mdc:policies_and_guidelines page) (dria: fix catlinks style) the arrows that appear if you select "enhanced recent changes" in your preferences have an ugly border around them. --nickolay 04:43, 25 aug 2005 (pdt) the radio buttons on history page are jumping in a weird way because the selected row becomes bold. --nickolay 04:46, 25 aug 2005 (pdt) the sidebar overrides content on diff pages --nickolay turns out this was fixed for 1.5 already. --dria the buttons in the upper-right of the horizontal nav-bar don't really feel like buttons; maybe add a pseudo-class for onhover that gives them an underline? --beltzner the "+" item under the "views" menu of a discussion page looks re...

Writing textual data - Archive of obsolete content
passes 0 as the third argument, which disables buffering (note: the implementation of the converter stream might not support buffering). passing 0 ensures that data will be immediately written to the underlying stream; however, for better perfomance you should pass a value like 4096 instead. unsupported characters you can specify what should happen with characters that are not supported by the selected character encoding. the last argument to init specifies that: 0x0000 means that writing unsupported characters throws an exception (with an error code of ns_error_loss_of_significant_data), and no data will be written. to instead write a replacement character in such cases, specify the character instead of 0x00: os.init(fos, charset, 0, "?".charcodeat(0)); you can, of course, replace the "?" ...

Install Wizards (aka: Stub Installers) - Archive of obsolete content
n by stub installer? the install wizards used to install mozilla are lightweight stubs targeted to be around 200 kb disk footprint. users download the stub installers, choose which packages to install, choose the destination directory for the installation, and select from various other options. subsequently, when users click the "install" button the install wizard downloads and installs only the selected software packages. this saves low-bandwidth users considerable time since they do not need to download software packages they may not be interested in. (the stub installer accomplishes this by downloading the xpinstall engine along with the selected software packages. it then proceeds to extract the xpinstall engine and feed it the downloaded software packages to install.) the stub installer cod...

A XUL Bestiary - Archive of obsolete content
this xulnote presents some of the key concepts and terms in the xul development environment. the purpose of this article is not to describe these items in any great detail but to define what they are in simple terms. i selected items for this group because they seemed to be either shrouded in mystery, misused as concepts or terms, or underestimated according to their role in xul and cross-platform development. in contrast to the mozilla jargon file, this article describes items of specific interest to the web or content developer looking to establish a context for understanding mozilla's new technologies -- and in particular mozilla's xml-based user interface language, xul. chrome some of the most powerful and frequently misunderstood features of xul and the mozilla browser have to do wi...

browser.type - Archive of obsolete content
displays the web page. the window for the primary content can be retrieved more conveniently using window.content. content-targetable one browser among many for content. the content that is loaded inside the browser is not allowed to access the chrome above it. this is the preferred value for any browser element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment. chrome (default behaviour): a browser, intended to be used for loading privileged content using a chrome:// uri. don't use for content from web, as this may cause serious security problems! see also more information in the xul tutorial and iframe ...

color - Archive of obsolete content
« xul reference home color type: color string the currently selected color. this is modified when the user selects a color. you can assign a string of the form #rrggbb to this property to change the selected color. ...

commandupdater - Archive of obsolete content
...

completedefaultindex - Archive of obsolete content
...

disableautoselect - Archive of obsolete content
if the text does not match any of the items in the list, the menu selection is cleared. ...

events - Archive of obsolete content
ed list of event names that the command updater will update upon. if this attribute is not specified, or you set it to the value '*', all events are valid. valid events are listed below, or you can use your own events. you can send a custom event by calling the updatecommands method of the command dispatcher. focus: occurs when the focused element changes. select: occurs when the selected text changed. clipboard: occurs when the clipboard is changed. undo: occurs when the undo buffer is changed. ...

linkedpanel - Archive of obsolete content
if this attribute is not used, the tab will be connected to the panel at the corresponding index in the tabpanels element that the tab is in its tabs container. however, if this attribute is used, this behavior is overridden, and the tab will always be linked to a specific panel. ...

onchange - Archive of obsolete content
« xul reference home overview an onchange attribute is an event listener to the object for the event change. a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizont...

ontextcommand - Archive of obsolete content
as of gecko 1.9.1, this attribute is superseded by the ontextentered attribute. ...

ontextentered - Archive of obsolete content
...

pending - Archive of obsolete content
...

seltype - Archive of obsolete content
« xul reference home seltype type: one of the values below used to indicate whether multiple selection is allowed. single only one row may be selected at a time. (default in listbox and richlistbox.) multiple multiple rows may be selected at once. (default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column. for richlistbox, this is new in firefox 3.5. ...

suppressonselect - Archive of obsolete content
if set to true, the select event is never fired. ...

tree.onselect - Archive of obsolete content
the user can select multiple rows by holding down shift or control and clicking on a row. ...

unread - Archive of obsolete content
« xul reference home unread type: boolean this attribute is set to true if the tab is unread; that is, either it has not yet been selected during the current session, or has changed since the last time it was selected. this attribute is not present if the tab is not unread. see also selected ...

Menus - Archive of obsolete content
age views a background image context-undo undo editable text context-cut cuts to clipboard editable text context-copy copies to clipboard context-paste pastes from clipboard editable text context-delete deletes selection editable text context-selectall selects all context-searchselect selected text is searched context-viewpartialsource-selection views the selection source selection context-viewpartialsource-mathml views the mathml source mathml context-viewsource views the source context-viewinfo views the page info context-metadata views the properties context-spell-check-enabled spell ch...

addItemToSelection - Archive of obsolete content
...

appendItem - Archive of obsolete content
the end of the existing list of items. you may optionally set a value. the function returns the newly created element. ...

checkAdjacentElement - Archive of obsolete content
« xul reference home checkadjacentelement( dir ) return type: no return value deselects the currently selected radio button in the group and selects the one adjacent to it. if the argument dir is true, the next radio button is selected. if it is false, the previous radio button is selected. ...

clearSelection - Archive of obsolete content
...

invertSelection - Archive of obsolete content
« xul reference home invertselection() return type: no return value reverses the selected state of all items. selected items become deselected, and deselected items become selected. ...

loadOneTab - Archive of obsolete content
the rest of the parameters are optional. this method works the same as addtab except for the loadinbackground parameter which allows you to choose whether to open the new tab in foreground or background. there's also no owner parameter as the owner tab is specified automatically. parameters inbackground if true the tab will be loaded in the background, if false the tab will be the newly selected tab. and if null or not specified, this parameter will default to the browser.tabs.loadinbackground preference. firefox 3.6 note the second form of this method was added in firefox 3.6; it adds the relatedtocurrent parameter, and allows the parameters to be specified by name, in any order. ...

selectItem - Archive of obsolete content
a select event is sent after the selection is made. ...

selectItemRange - Archive of obsolete content
this method does nothing for single-selection list boxes. a select event is sent after the selection is made. ...

setSelectionRange - Archive of obsolete content
« xul reference home setselectionrange( start, end ) return type: no return value sets the selected portion of the textbox, where the start argument is the index of the first character to select and the end argument is the index of the character after the selection. set both arguments to the same value to move the cursor to the corresponding position without selecting text. ...

timedSelect - Archive of obsolete content
...

toggleItemSelection - Archive of obsolete content
« xul reference home toggleitemselection( item ) return type: no return value if the specified item is selected, it is deselected. if it is not selected, it is selected. other items in the list box that are selected are not affected, and retain their selected state. ...

OpenClose - Archive of obsolete content
popupshown event for an example of how to do this. a menu in an unprivileged content window (such as a web page) can only open a popup while its window is focused, and it is in the currently active tab. that means that a document in a background tab cannot open a menu or popup. closing menus menus will close automatically once the user has made a selection from the menu. when an menu item is selected, it fires a command event so that code may be used to perform an action. the user may cancel selecting a command from a menu by pressing the escape key. this will close a single menu, but if this menu has a parent menu, the parent menu will remain open. a user may also cancel selecting from a menu by clicking outside the menu. in this case, not only will that menu close, but all parent menus will...

Positioning - Archive of obsolete content
er left corner (or upper right corner in right to left locales) at the position where the mouse was clicked. context menus will appear offset down and to the right a couple of pixels so that the menu can be dismissed again just by clicking in the same place. if a context menu was opened via the keyboard only, the menu will appear at the top left corner of the document, or underneath the currently selected item if a list is focused. context menus will always appear in this location, and not respect any position attribute value. tooltips will always appear near the current mouse position, offset vertically by a small amount. the position attribute the position of all types of popups can be controlled in two ways. first, the position can be specified when using the popup's openpopup method. this ...

Popup Guide - Archive of obsolete content
ver the existing ui. for example, a popup search field could be used to allow searching and will disappear when a search term has been entered. a panel is created using the panel element. floating panels a floating popup is a type of panel with a titlebar and acts like an auxiliary window. usually it would contain tools related to the main window, or an inspector which displays properties of a selected element. tooltips when the mouse is positioned over a ui control, a tooltip provides a small box with descriptive help about that control. when the mouse is moved away from the control, the tooltip automatically disappears. a tooltip can be created by setting the tooltiptext attribute on an element or by using the tooltip element. working with popups the following additional information is ...

clickSelectsAll - Archive of obsolete content
...

color - Archive of obsolete content
« xul reference color type: color string the currently selected color. this is modified when the user selects a color. you can assign a string of the form #rrggbb to this property to change the selected color. ...

controllers - Archive of obsolete content
="controller-example" title="controller example" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function init() { var list = document.getelementbyid("thelist"); var listcontroller = { supportscommand : function(cmd){ return (cmd == "cmd_delete"); }, iscommandenabled : function(cmd){ if (cmd == "cmd_delete") return (list.selecteditem != null); return false; }, docommand : function(cmd){ list.removeitemat(list.selectedindex); }, onevent : function(evt){ } }; list.controllers.appendcontroller(listcontroller); } </script> <listbox id="thelist"> <listitem label="ocean"/> <listitem label="desert"/> <listitem label="jungle"/> <listitem label="swamp"/> </listbox> </window> ...

dateValue - Archive of obsolete content
...

datepicker.value - Archive of obsolete content
« xul reference value type: string the currently selected date in the form yyyy-mm-dd. unlike the month property, months in this value range from 01 to 12. set this property to change the selected date. ...

description - Archive of obsolete content
...

focusedItem - Archive of obsolete content
you can change the focused item by setting this property. ...

listbox.currentIndex - Archive of obsolete content
« xul reference currentindex type: integer set to the index of the currently focused item in the list. if no item is focused, the value will be -1. (or, on some platforms, typeof(listboxcurrentindex) will be undefined) in a single selection list, the current index will always be the same as the selected index. in a multiple selection list, the currently focused row may be modified by the user without changing the selection by pressing the control key and pressing the cursor keys to navigate. ...

menulist.image - Archive of obsolete content
...

selectionEnd - Archive of obsolete content
« xul reference selectionend type: integer get or set the end of the selected portion of the field's text. use in conjuction with the selectionstart property. the value specifies the index of the character after the selection. if this value is equal to the value of the selectionstart property, no text is selected, but the value indicates the position of the caret (cursor) within the textbox. ...

selectionStart - Archive of obsolete content
« xul reference selectionstart type: integer get or set the beginning of the selected portion of the field's text. use in conjuction with the selectionend property. the value specifies the index of the first selected character. ...

selstyle - Archive of obsolete content
« xul reference selstyle type: string if set to the value primary, only the label of the primary column will be highlighted when an item in the tree is selected. otherwise, the entire row will be highlighted. to see the difference, compare the selection style in the folder list and the message list in mozilla mail. ...

Result Generation - Archive of obsolete content
esource="http://www.xulplanet.com/rdf/c"/> <rel:relateditem rdf:resource="http://www.xulplanet.com/rdf/d"/> </rdf:description> <rdf:description rdf:about="http://www.xulplanet.com/rdf/c"> <rel:relateditem rdf:resource="http://www.xulplanet.com/rdf/d"/> </rdf:description> </rdf:rdf> for a xul template query, you first need to select a starting point in the rdf graph. once you have selected a starting point, you use a number of statements which indicate where to go next when navigating the graph. eventually, you will end up with a set of nodes you consider the endpoints of your query. these become the results and content would be generated for each of these results. say you start at a. you could navigate to b, c and d and generate three blocks of output by following the arrows forwa...

Static Content - Archive of obsolete content
c content example let's look at another example, involving radio buttons. actually, this example is similar, it just uses a radiogroup instead of a menulist to display the list of countries. ...

Template and Tree Listeners - Archive of obsolete content
since the content goes away during a rebuild, the selection is lost, so it is restored here during the didrebuild method. the firefox bookmarks window uses this technique. if you try an example using the code above, you will notice that the first tree will maintain the selection when the rebuild button is pressed, whereas in the second tree does not. this is because the lis...

Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
ndlers have been added, one for cut, one for copy and the other for paste. each has its own keystroke that invokes it. the first handler is the cut operation and is invoked when the control key is pressed along with the x key. the script within the action attribute is used to cut the text from the textbox and put it into the clipboard field. for simplicity, the entire text is cut and not just the selected text. the code works as follows: this.clipboard=document.getanonymousnodes(this)[0].value; the first element of the anonymous content array is retrieved which gives a reference to the textbox element, which happens to be the first (and only) element within the content element. the value property is retrieved which will provide the text within the textbox. this is then assigned to the...

Creating Dialogs - Archive of obsolete content
next, we'll see how to open ...

Creating a Window - Archive of obsolete content
"chrome://global/skin/" type="text/css"?> this line is used to specify the style sheets to use for the file. this is the syntax that xml files use to import style sheets. in this case, we import the styles found in the global part of a skin package. we didn't specify a specific file so mozilla will determine which files in the directory to use. in this case, the all-important global.css file is selected. this file contains all the default declarations for all of the xul elements. because xml does not have any knowledge of how elements should be displayed, the file indicates how. generally, you will put this line at the top of every xul file. you can also import other style sheets using a similar syntax. note that you would normally import the global style sheet from within your own style sheet f...

Introduction - Archive of obsolete content
don't want to have the larger size of a complete xulrunner application, but don't mind requiring a mozilla browser to be installed to be able to run the application. remote xul application you could also just place xul code on a web server and open it in firefox, as you would any other web page, however this is discouraged and was disabled in firefox 8. it is still possible to enable this for selected sites to let legacy apps to continue working, but for new remote applications you should use html to create your user interface instead; most of the features you used to have to use xul for are available in html5. the first three types all require an installation to be performed on the user's machine. however, these types of applications do not have security restrictions placed on them, so they...

Introduction to RDF - Archive of obsolete content
ve been described, one for each animal. each rdf:description tag describes a single record. within each record, three fields are described, name, species and class. it isn't necessary for all records to have the same fields but it makes more sense to have them all the same. each of three fields have been given a namespace of animals, the url of which has been declared on the rdf tag. the name was selected because it has meaning in this case, but we could have selected something else. the namespace feature is useful because the class field might conflict with that used for styles. the seq and li elements are used to specify that the records are in a list. this is much like how html lists are declared. the seq element is used to indicate that the elements are ordered, or in sequence. instead of the ...

Localization - Archive of obsolete content
label="&pastecmd.label;" accesskey="&pastecmd.accesskey;" key="paste_cmd" disabled="true"/> </menupopup> </menu> </menubar> <toolbar id="findfiles-toolbar"> <toolbarbutton id="opensearch" label="&opencmdtoolbar.label;"/> <toolbarbutton id="savesearch" label="&savecmdtoolbar.label;"/> </toolbar> </toolbox> <tabbox> <tabs> <tab label="&searchtab;" selected="true"/> <tab label="&optionstab;"/> </tabs> <tabpanels> <tabpanel id="searchpanel" orient="vertical" context="editpopup"> <description> &finddescription; </description> <spacer class="titlespace"/> <groupbox orient="horizontal"> <caption label="&findcriteria;"/> <menulist id="searchtype"> <menupopup> <menuitem label="&type.name;"/> ...

More Menu Features - Archive of obsolete content
able. 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 used when you want a group of menu items where only one item can be checked at once. an example might be a font menu where only one font can be selected at a time. when another item is selected, the previously selected item is unchecked. in order to group a set of menu items together, you need to put a name attribute on each one to group. set the value to the same string. the example below demonstrates this: example 3 : source view <toolbox> <menubar id="planets-menubar"> <menu id="planet-menu" label="planet"> <menupopup> <men...

Templates - Archive of obsolete content
<rule rdf:type="http://home.netscape.com/nc-rdf#bookmarkseparator"> <spacer uri="rdf:*" height="16"/> </rule> <rule> <button uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </rule> </template> </vbox> </window> by using two rules, we have allowed the contents of the template to be selectively generated. in the first rule, bookmark separators are selected, as can be seen by the rdf:type attribute. the second rule does not have any attributes so all data matches it. all of the attributes placed on the rule tag are used as match criteria. in this case, the bookmarks datasource supplies a rdf:type property to distinguish separators. this attribute is set to a special value for separators in the rdf bookmarks datasource. this is how we can distinguis...

Trees - Archive of obsolete content
l tags, there happens to be a built-in tree view which gets its data from xul tags. this may be a bit confusing, but essentially, one of the built-in tree views uses a set of tags which can be used to specify information about the data in the tree. the following tags are used: treeitem this contains a single parent row and all its descendants. this element also serves as the item which can be selected by the user. the treeitem tag would go around the entire row so that it is selectable as a whole. treerow a single row in the tree, which should be placed inside a treeitem tag. treecell a single cell in a tree. this element would go inside a treerow element. conveniently, these tags may be placed directly inside the treechildren tag, nested in the order above. the tags define the data to b...

XPCOM Examples - Archive of obsolete content
the function switchfocus(): first gets a reference to a component which implements the window mediator interface. next, we get the id attribute for the element. we can use the value of the id attribute as the resource. the function getwindowforresource() takes the resource and returns a window that matches it. this window, stored in the switchwindow variable, is the same as ...

Using the Editor from XUL - Archive of obsolete content
serting text differs between the different rules (plain text vs. html, for example), it is handled entirely by the rules code, in the willdoaction()call. in composer, we are using nshtmleditrules, so we end up in nshtmleditrules::willdoaction(). for text insertion, this drops into nshtmleditrules::willinserttext(). this code first deletes the selection if there is one (e.g. you are typing over selected text), then calls a generic pre-insertion call willinsert(), which sets up inline styles for the inserted text, and moves the selection to an appropriate place where the text is to be inserted. now we are ready to actually insert the text. recall that we're going through a generic inserttext() call, so this code deals with pasting long strings, as well as inserting single characters. the code ...

XUL accessibility guidelines - Archive of obsolete content
rm field. users who are used to navigating form fields themselves often end up repeating the jump operation and thereby skipping ahead one form field. initial dialog focus the initial focus in a xul dialog (i.e., the focus when the dialog is first opened) should always be on a specific control, not on the dialog itself. in a tabbed dialog, focus should normally start on the first control in the selected tab. in all other dialogs, focus should just start on the first control (although it can be on any other control if there is a good reason for, just not on the dialog itself). testing keyboard access to test keyboard accessibility, simply unplug or disable your mouse and attempt to use your application with only your keyboard. verify that the tab order is logical. make sure you have access to a...

browser - Archive of obsolete content
displays the web page. the window for the primary content can be retrieved more conveniently using window.content. content-targetable one browser among many for content. the content that is loaded inside the browser is not allowed to access the chrome above it. this is the preferred value for any browser element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment. chrome (default behaviour): a browser, intended to be used for loading privileged content using a chrome:// uri. don't use for content from web, as this may cause serious security problems! properties accessibletype type: integer a value indicating the type of accessibility object for the element. cangoback type: boolean ...

dialog - Archive of obsolete content
moreover this hides separator between titlebar and window contents. this only affects mac os x. buttonaccesskeyaccept type: stri...

grid - Archive of obsolete content
column --> <groupbox> <caption label="details"/> <grid> <columns> <column flex="1"/> <column flex="2"/> </columns> <rows> <row> <label value="user name"/> <textbox id="user"/> </row> <row> <label value="group"/> <menulist> <menupopup> <menuitem label="accounts"/> <menuitem label="sales" selected="true"/> <menuitem label="support"/> </menupopup> </menulist> </row> </rows> </grid> </groupbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, i...

label - Archive of obsolete content
te(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes the following classes may be used to style the element. these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme. header a class used for headings. typically, this will cause the text to appear bold. indent this class causes the text to be indented on its left side. monospace this class causes the text to be displayed in a monospace font. plain this class causes the element to be displayed with no border or margin. small-margin this class causes the text to be displayed with a sma...

preference - Archive of obsolete content
with the preference browser.startup.homepage. overview an onchange attribute is an event listener to the object for the event change. a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files...

scrollbar - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] when a container's contents which are larger that the size of the container, scroll bars may be placed at the side of the container to allow the user to scroll around in the container. the scroll bar may also be used independently when a numeric value or percentage needs to be selected by the user. the user can adjust the position of the scroll bar by clicking arrows on either end of the scroll bar or by dragging the scroll bar thumb around. more information is available in the xul tutorial. attributes curpos, increment, maxpos, pageincrement examples <scrollbar curpos="5" maxpos="50"/> attributes curpos type: integer the current position of the scrollbar, which ranges from 0 to ...

separator - Archive of obsolete content
(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes the following classes may be used to style the element. these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme. groove a grooved separator. groove-thin a thin grooved separator. thin a thinner separator, which is usually 0.5 ems. related elements spacer, splitter, menuseparator, toolbarseparator, treeseparator. ...

splitter - Archive of obsolete content
(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes the following classes may be used to style the element. these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme. tree-splitter this splitter is intended to be used in tree columns (in-between treecol elements). the splitter will be drawn with no width so that it isn't visible, however, the columns may still be resized. <tree id="tree1" flex="1" height="300" enablecolumndrag="true"> <treecols> <treecol id="name" label="name" flex="1"/> <splitter class="tree-splitter"/> <treecol id=...

<statusbarpanel> - Archive of obsolete content
(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes the following classes may be used to style the element. these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme. « xul reference home statusbarpanel-iconic use this class to have an image appear on the statusbarpanel. specify the image using the src attribute. the image will appear instead of the label. statusbarpanel-iconic-text use this class to have an image appear on the statusbarpanel as well as a text label. specify the image using the src attribute. specify the text using the label at...

toolbaritem - Archive of obsolete content
oolbaritem element. the element is used, for example, to hold the location bar's textbox in firefox. it is also used to group buttons together so they can be added and removed all at once like firefox's unified-back-forward-button. ...

treecol - Archive of obsolete content
tribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes the following class may be used to style the element. this class should be used instead of changing the style of the element directly since it will fit more naturally with the user's selected theme. treecol-image use this class to have an image appear on the tree column header. specify the image using the src attribute. related elements tree, treecols, treechildren, treeitem, treerow, treecell and treeseparator. interfaces nsiaccessibleprovider ...

Dialogs in XULRunner - Archive of obsolete content
here is the code needed to open a dialog: function opendialog() { window.opendialog("chrome://basicapp/content/dialog.xul", "newdlg", "modal"); } the res...

XULRunner tips - Archive of obsolete content
ss.type.skin", "extension:manager-themes"); pref("xpinstall.dialog.progress.type.chrome", "extension:manager-extensions"); pref("extensions.update.enabled", true); pref("extensions.update.interval", 86400); pref("extensions.dss.enabled", false); pref("extensions.dss.switchpending", false); pref("extensions.ignoremtimechanges", false); pref("extensions.logging.enabled", false); pref("general.skins.selectedskin", "classic/1.0"); // nb these point at amo pref("extensions.update.url", "chrome://mozapps/locale/extensions/extensions.properties"); pref("extensions.getmoreextensionsurl", "chrome://mozapps/locale/extensions/extensions.properties"); pref("extensions.getmorethemesurl", "chrome://mozapps/locale/extensions/extensions.properties"); if your application is based on gecko 2.0, you need to regist...

2006-10-13 - Archive of obsolete content
gi?id=347230 installer for 2.0rc2 ehume gives the developers a thumbs up for the new installer for 2.0rc2 having a textfield where you can type in the installation directory. a way to recover the toolbars from popup windows that hide it a suggestion for a way to recover toolbars from a popup window that disables it. user suggests 3 ways, and suggests a default. (no responses as of yet) selected tab looks too close to unselected tab discussion about how to change the colour of a selected tab and an unselected tab. it's suggested that its a os problem in the desktop theme, as opposed to problem with firefox. nsapprunner.o compile error: some_const not declared in scope compile error while compiling first build. user was conservative on what libraries they used, but now they have a co...

Extentsions FAQ - Archive of obsolete content
my needs. what is the valid location and things needed to to release a mozilla extension on mozallia site? you must remove updateurl from the install.rdf and use a known to amo minversion/maxversion. no confirmation that the answer given worked yet. is it possible to open the url in a new tab? var tab = gbrowser.addtab( url ); // and if you want it to load in the foreground: gbrowser.selectedtab = tab; is it possible to read the html-code of the current url/site? yes, this is possible. use the dom api (http://www.w3schools.com/dom/default.asp has a good tutorial). not the best answer but a good starting point for the question asker to do some research towards the answer. why does his extension not able to read the contents of a folder and then produce a segmentation fault after...

Atomic RSS - Archive of obsolete content
should be populated with another feature article or tutorial, should one exist. otherwise, just comment it out getting started a guided tutorial that will help you get started with atomic rss. atomic rss uses atom as an rss module. it brings in atom elements into rss, adding the advantages of atom to rss while maintaining backwards compatibility. documentation selected articles atomic rss tim bray talks about using atom 1.0 as a micro format and extension module for rss 2.0; keeping rss 2.0 as your sydication format but bringing in and using selected atom 1.0 elements. references atomic rss element list examples none available at this t...

Content - Archive of obsolete content
arted" article yet written, should be populated with another feature article or tutorial, should one exist. otherwise, just comment it out getting started a guided tutorial that will help you get started with the rss content module. the rss content module provides facilities to include content for an <item>. but doing this in more efficient ways. documentation selected articles why rss content module is popular - including html contents charles iliya krempeaux talks about the rss content module, why it is popular among some, and how it is used to include html contents. references rss content module element list examples none available a...

Slash - Archive of obsolete content
getting started a guided tutorial that will help you get started with the rss slash module. the rss slash module is popular among slash based blogs and blogs imitating the feel for slashdot. slash is the engine behind the famous slashdot. documentation selected articles up to 10 why rss slash is popular: counting your comments charles iliya krempeaux talks about the rss slash module, why it is popular among some, and how it is used to give a count for your comments (2005-08-22). references rss slash module element list examples none available at this time community none available at this time tools none available at this time other resources ...

Well-Formed Web - Archive of obsolete content
getting started a guided tutorial that will help you get started with the well-formed web rss module. the well-formed web rss module provides facilities for <item> level commenting: for linking to comments contained in an external rss feed, and for posting new comments. documentation selected articles why well-formed web rss module is popular - syndicating your comments charles iliya krempeaux talks about the rss well-formed web module, why it is popular among some, and how it is used to link to your comments (2005-08-22). references rss well-formed web module element list examples none available at this time community none available at this time tools none availa...

RSS - Archive of obsolete content
why well-formed web rss module is popular - syndicating your comments charles iliya krempeaux talks about the rss well-formed web module, why it is popular among some, and how it is used to link to your comments. atomic rss tim bray talks about using atom 1.0 as a micro format and extension module for rss 2.0; keeping rss 2.0 as your sydication format but bringing in and using selected atom 1.0 elements. view all... community view mozilla xml forums... mailing list newsgroup rss feed related topics rdf, xml ...

Building a Theme - Archive of obsolete content
me/global/ skin mozapps sample chrome/mozapps/ don't forget the trailing slash, "/"! without it, the package won't be registered. the third column needs to match your theme's internalname value from the install manifest above. this maps skin directories to locations within your theme. for example, the line skin browser sample skin/browser/ means "when the user has the sample theme selected, use the directory browser/ to look up skins for the browser package." more concisely, this means that the url chrome://browser/skin/some/path/file.css will look for a file browser/some/path/file.css in your theme's root directory. save the file. test first, we need to tell firefox about your theme. during the development phase for firefox versions 2.0 and higher, you can point firefox to th...

Common Firefox theme issues and solutions - Archive of obsolete content
enu-toolbar-button in browser.css. toolbars and menus firefox application button application button doesn't change styling for private browsing mode when in private browsing mode there needs to be a visual difference to the firefox app button that is displayed when tabs are on top and the menu bar is disabled. text only toolbar buttons not aligned properly when text only toolbar buttons are selected in customize toolbars, text labels in toolbar buttons may not align properly. the common cause of this is style rules that reference [iconsize="small"] without excluding [mode="text"]. the solution usually is to append :not ([mode="text"]) to those style rules. for instance use toolbar[iconsize="small"]:not ([mode="text"]). a little experimenting may be required to fully address this issue with y...

-ms-content-zoom-limit-max - Archive of obsolete content
initial value400%applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednopercentagesthe largest allowed zoom factor. a zoom factor of 100% corresponds to no zooming. larger values zoom in. smaller values zoom out.computed valueas specifiedanimation typediscrete syntax values <percentage> the maximum zoom factor. formal syntax <percentage> specifications not part of any specification. remarks this property constrains the limit for touch zooming as well as values of the mscontentzoomfactor property. ...

-ms-content-zoom-snap-type - Archive of obsolete content
at the motion of the content after the contact is picked up may be adjusted if the content would normally stop "close enough" to a snap-point. this implies that it is possible for the content zoom factor to end up between snap-points. mandatory indicates that the motion of the content after the contact is picked up is always adjusted so that it lands on a snap-point. the snap-point that is selected is the one that is closest to where the content zoom factor would normally stop. formal syntax none | proximity | mandatory specifications not part of any specification. remarks this property has no effect on non-zoomable elements. see -ms-content-zooming for details on zoomable elements. when a user pans or scrolls and then lifts his or her contact (for instance, a finger), the cont...

::-ms-fill-lower - Archive of obsolete content
a slider control is one possible representation of <input type="range">. allowable properties only the following css properties can be used in a rule with ::-ms-fill-lower in its selector. other properties are ignored. ...

::-ms-fill-upper - Archive of obsolete content
a slider control is one possible representation of <input type="range">. allowable properties only the following css properties can be used in a rule with ::-ms-fill-upper in its selector. other properties are ignored. ...

::-ms-fill - Archive of obsolete content
displayed by <progress>. this pseudo-element is available only in internet explorer 10, internet explorer 11, and microsoft edge. all allowable properties except animation-name apply to a determinate progress bar. only animation-name applies to an indeterminate one. (a progress bar is determinate if it has a value attribute set; otherwise it is indeterminate. an indeterminate progress bar can be selected with the :indeterminate pseudo-class.) by default, internet explorer and edge display a moving dots animation for an indeterminate progress bar. by setting animation-name on ::-ms-fill, you can change the animation, as shown in this table: value description none turns off the animation so that no dots are displayed. -ms-bar shows animated dots that flow in a ...

Implementation Status - Archive of obsolete content
artial problems with hints in xul-hosted documents and ephemeral message positioning 349667; 8.3.6 alert supported 9. ...

XForms Upload Element - Archive of obsolete content
ing this control. single-node binding special mediatype - supported. incremental - isn't supported. type restrictions the upload element can be bound to a node of type xsd:anyuri, xsd:base64binary or xsd:hexbinary or any type derived from one of these. representations the xforms upload element is represented by visually combining three widgets: a text field that shows the uri of the selected file, a button to open the file picker dialog which allows the user to select a file, and a button to clear the text field and the reference to the file from the bound node (xhtml only). characteristics analogous widget is <xhtml:input type="file"/> ...

Visual-js game engine - Game development
direct with project files , no need for build . add->new game object (form dialog for define type of new game object ) add->quick code (make your work faster - add usually code blocks) resources - explorer view for images and audios , you can drag or edit also need to execute node build_resources for creating resources object for engine. inserting new code will be always at current line selected intro editor . save on drop menu or better with ctrl+s before testing in browsers. adding new script explanation : after adding new script and save script if you have extra changes , open starter/run.js and you will found line : sys.script.load("scripts/new_script.js") ctrl+s use from menu run->choose browser for testing . - important safari not working at the moment chrome , firefox ...

CSS - MDN Web Docs Glossary: Definitions of Web-related terms
a style declaration contains the properties and their values, which determine how a webpage looks. css is one of the three core web technologies, along with html and javascript. css usually styles html elements, but can be also used with other markup languages like svg or xml. a css rule is a set of properties associated with a selector. ...

Semantics - MDN Web Docs Glossary: Definitions of Web-related terms
er a function that takes a string parameter, and returns an <li> element with that string as its textcontent. would you need to look at the code to understand what the function did if it was called build('peach'), or createliwithcontent('peach')? semantics in css in css, consider styling a list with li elements representing different types of fruits. ...

Cascade and inheritance - Learn web development
our list, every single list and list item would gain a border — probably not an effect we would ever want! which properties are inherited by default and which aren't is largely down to common sense. controlling inheritance css provides four special universal property values for controlling inheritance. every css property accepts these values. inherit sets the property value applied to a selected element to be the same as that of its parent element. effectively, this "turns on inheritance". initial sets the property value applied to a selected element to the initial value of that property. unset resets the property to its natural value, which means that if the property is naturally inherited it acts like inherit, otherwise it acts like initial. note: there is also a newer value, re...

Styling tables - Learn web development
fixed is generally a good idea to set on your table, as it makes the table behave a bit more predictably by default. normally, table columns tend to be sized according to how much content they contain, which produces some strange results. with table-layout: fixed, you can size your columns according to the width of their headings, and then deal with their content as appropriate. this is why we've selected the four different headings with the thead th:nth-child(n) (:nth-child) selector ("select the nth child that is a <th> element in a sequence, inside a <thead> element") and given them set percentage widths. the entire column width follows the width of its heading, making for a nice way to size your table columns. chris coyier discusses this technique in more detail in fixed table layouts. we...

How CSS is structured - Learn web development
be styled by the selectors. if any of the syntax above is not familiar, try searching mdn. note: you will learn more about selectors in the next module: css selectors. specificity you may encounter scenarios where two selectors select the same html element. consider the stylesheet below, with a p selector that sets paragraph text to blue. however, there is also a class that sets the text of selected elements to red. .special { color: red; } p { color: blue; } suppose that in our html document, we have a paragraph with a class of special. both rules apply. which selector prevails? do you expect to see blue or red paragraph text? <p class="special">what color am i?</p> the css language has rules to control which selector is stronger in the event of a conflict. these rules are called c...

Styling lists - Learn web development
set the list-style-type to none, so that no bullet appears by default. we're going to use background properties to handle the bullets instead. inserted a bullet onto each unordered list item. the relevant properties are as follows: background-image: this references the path to the image file you want to use as the bullet. background-position: this defines where in the background of the selected element the image will appear — in this case we are saying 0 0, which means the bullet will appear in the very top left of each list item. background-size: this sets the size of the background image. we ideally want the bullets to be the same size as the list items (or very slightly smaller or larger). we are using a size of 1.6rem (16px), which fits very nicely with the 20px padding we've a...

Web fonts - Learn web development
e fonts, so you can get the idea. again, use copies of web-font-start.html and web-font-start.css as your starting point. go to google fonts. use the filters on the left-hand side to display the kinds of fonts you want to choose and choose a couple of fonts you like. to select a font family, press the ⊕ button alongside it. when you've chosen the font families, press the [number] families selected bar at the bottom of the page. in the resulting screen, you first need to copy the line of html code shown and paste it into the head of your html file. put it above the existing <link> element, so that the font is imported before you try to use it in your css. you then need to copy the css declarations listed into your css as appropriate, to apply the custom fonts to your html. note: you ca...

Advanced form styling - Learn web development
t[type="color"], select { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } label { margin-bottom: 5px; } button { width: 60%; margin: 0 auto; } note: if you want to test these examples across a number of browsers simultaneously, you can find it live here (also see here for the source code). also bear in mind that we've added some javascript to the page that lists the files selected by the file picker, below the control itself. this is a simplified version of the example found on the <input type="file"> reference page. as you can see, we've done fairly well at getting these to look uniform across modern browsers. we've applied some global normalizing css to all the controls and their labels, to get them to size in the same way, adopt their parent font, etc., as mentioned ...

Client-side form validation - Learn web development
s to 1. this means that floats, like 3.2, will also show as invalid. full example here is a full example to show usage of html's built-in validation features. ...

How to structure a web form - Learn web development
orresponding widget. this is useful for controls like text inputs, where you can click the label as well as the input to focus it, but it is especially useful for radio buttons and checkboxes — the hit area of such a control can be very small, so it is useful to make it as easy to activate as possible. ...

Test your skills: Advanced styling - Learn web development
ld upon. first of all, get rid of their default styling. next, give the radio buttons a reasonable base style — the style they have when the page first loads. this can be anything you like, but you probably want to set a width and height (of somewhere between about 18 and 24 pixels), and a subtle border and/or background color. now give the radio buttons a different style for when they are selected. align the radio buttons nicely with the labels. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. advanced form styling 3 in our final task for this assessment series, we provide you with a feedback form that is already nicely-styled — you've already seen something similar if...

Test your skills: Basic controls - Learn web development
load the starting point for this task to work in your own editor or in an online editor. basic controls 2 the next task requires you to create working sets of checkboxes and radio buttons, from the provided text labels. turn the first <fieldset>'s contents into a set of radio buttons — you should only be able to select one pony character at once. make it so that the first radio button is selected upon page load. turn the second <fieldset>'s content into a set of checkboxes. add a couple more hotdog choices of your own. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. basic controls 3 the final task in this set requires you to create a file picker. create a basic fil...

What will your website look like? - Learn web development
lick on the tools button, then on the resulting usage rights option that appears below. you should choose an option such as labeled for reuse. font to choose a font: go to google fonts and scroll down the list until you find one you like. you can also use the controls on the right to further filter the results. click the "plus" (add to) icon next to the font you want. click the "* family selected" button in the panel at the bottom of the page ("*" depends on how many fonts you selected). in the popup box, you can see and copy the lines of code google gives you into your text editor to save for later. previous overview: getting started with the web next in this module installing basic software what will your website look like? dealing with files html basics css basic...

Graceful asynchronous programming with Promises - Learn web development
e browser's main thread, the entire browser is blocked until getusermedia() returns! obviously, that's not an acceptable option; without promises, everything in the browser becomes unusable until the user decides what to do about the camera and microphone. so instead of waiting for the user, getting the chosen devices enabled, and directly returning the mediastream for the stream created from the selected sources, getusermedia() returns a promise which is resolved with the mediastream once it's available. the code that the video chat application would use might look something like this: function handlecallbutton(evt) { setstatusmessage("calling..."); navigator.mediadevices.getusermedia({video: true, audio: true}) .then(chatstream => { selfviewelem.srcobject = chatstream; chat...

Looping code - Learn web development
ill crash. this is called an infinite loop. active learning: launch countdown! in this exercise, we want you to print out a simple launch countdown to the output box, from 10 down to blastoff. specifically, we want you to: loop from 10 down to 0. we've provided you with an initializer — let i = 10;. for each iteration, create a new paragraph and append it to the output <div>, which we've selected using const output = document.queryselector('.output');. in comments, we've provided you with three code lines that need to be used somewhere inside the loop: const para = document.createelement('p'); — creates a new paragraph. output.appendchild(para); — appends the paragraph to the output <div>. para.textcontent = — makes the text inside the paragraph equal to whatever you put...

Manipulating documents - Learn web development
nipulation — element.setattribute() — this takes two arguments, the attribute you want to set on the element, and the value you want to set it to. in this case we will set a class name of highlight on our paragraph: para.setattribute('class', 'highlight'); refresh your page, and you'll see no change — the css is still applied to the paragraph, but this time by giving it a class that is selected by our css rule, not as inline css styles. which method you choose is up to you; both have their advantages and disadvantages. the first method takes less setup and is good for simple uses, whereas the second method is more purist (no mixing css and javascript, no inline styles, which are seen as a bad practice). as you start building larger and more involved apps, you will probably start using...

A first splash into JavaScript - Learn web development
see if you can guess it in 10 turns or fewer. we'll tell you if your guess was too high or too low.</p> <div class="form"> <label for="guessfield">enter a guess: </label><input type="text" id="guessfield" class="guessfield"> <input type="submit" value="submit guess" class="guesssubmit"> </div> <div class="resultparas"> <p class="guesses"></p> ...

Basic math in JavaScript — numbers and operators - Learn web development
ime we want to make a choice of some kind. for example, booleans can be used to: display the correct text label on a button depending on whether a feature is turned on or off display a game over message if a game is over or a victory message if the game has been won display the correct seasonal greeting depending what holiday season it is zoom a map in or out depending on what zoom level is selected we'll look at how to code such logic when we look at conditional statements in a future article. for now, let's look at a quick example: <button>start machine</button> <p>the machine is stopped.</p> const btn = document.queryselector('button'); const txt = document.queryselector('p'); btn.addeventlistener('click', updatebtn); function updatebtn() { if (btn.textcontent === 'start machine'...

Silly story generator - Learn web development
ake one of the calls twice. inside the first if block, add another string replacement method call to replace the name 'bob' found in the newstory string with the name variable. in this block we are saying "if a value has been entered into the customname text input, replace bob in the story with that custom name." inside the second if block, we are checking to see if the uk radio button has been selected. if so, we want to convert the weight and temperature values in the story from pounds and fahrenheit into stones and centigrade. what you need to do is as follows: look up the formulae for converting pounds to stone, and fahrenheit to centigrade. inside the line that defines the weight variable, replace 300 with a calculation that converts 300 pounds into stones. concatenate ' stone' ont...

Working with JSON - Learn web development
[1]['powers'][2] first we have the variable name — superheroes. inside that we want to access the members property, so we use ["members"]. members contains an array populated by objects. we want to access the second object inside the array, so we use [1]. inside this object, we want to access the powers property, so we use ["powers"]. inside the powers property is an array containing the selected hero's superpowers. we want the third one, so we use [2]. note: we've made the json seen above available inside a variable in our jsontest.html example (see the source code). try loading this up and then accessing data inside the variable via your browser's javascript console. arrays as json above we mentioned that json text basically looks like a javascript object, and this is mostly right...

Getting started with Svelte - Learn web development
#ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> we are applying a style to our <h1> element. what will happen other components with <h1> elements in them? in svelte, css inside a component's <style> block will be scoped only to that component. this works by adding a class to selected elements, which is based on a hash of the component styles. you can see this in action by opening localhost:5000 in a new browser tab, right/ctrl-clicking on the hello world! label, and choosing inspect: when compiling the app, svelte changes our h1 styles definition to h1.svelte-1tky8bj, and then modifies every <h1> element in our component to <h1 class="svelte-1tky8bj">, so that it picks up...

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
<label for="todo-{todo.id}" class="todo-label">new name for '{todo.name}'</label> <input bind:value={name} bind:this={nameel} use:selectonfocus type="text" id="todo-{todo.id}" autocomplete="off" class="todo-text" /> let's try it out. go to your app, press a todo's edit button, then tab to take focus away from the <input>. now click on the <input> — you'll see that the entire input text is selected. making the action reusable now let's make this function truly reusable across components. selectonfocus() is just a function without any dependency on the todo.svelte component, so we can just extract it to a file and use it from there. create a new file, actions.js, inside the src folder. give it the following content: export function selectonfocus(node) { if (node && type...

Working with Svelte stores - Learn web development
ing with our app state we have already seen how our components can communicate with each other using props, two-way data binding, and events. in all these cases we were dealing with communication between parent and child components. but not all application state belongs inside your application's component hierarchy. for example, information about the logged in user, or whether the dark theme is selected or not. sometimes, your app state will need to be accessed by multiple components that are not hierarchically related, or by a regular javascript module. moreover, when your app becomes complicated and your component hierarchy gets complex, it might become too difficult for components to relay data between each other. in that case, moving to a global data store might be a good option. if you’...

Getting started with Vue - Learn web development
ework to build our app into. follow the steps below: in terminal, cd to where you'd like to create your sample app, then run vue create moz-todo-vue. use the arrow keys and enter to select the "manually select features" option. the first menu you’ll be presented with allows you to choose which features you want to include in your project. make sure that "babel" and "linter / formatter" are selected. if they are not, use the arrow keys and the space bar to toggle them on. once they are selected, press enter to proceed. next you’ll select a config for the linter / formatter. navigate to "eslint with error prevention only" and hit enter again. this will help us catch common errors, but not be overly opinionated. next you are asked to configure what kind of automated linting we want. select...

Handling common HTML and CSS problems - Learn web development
and you need to support older ie versions, a good move is to use keith clark's selectivizr library — this is a small javascript library that works on top of an existing javascript library like jquery or mootools. to try this example, make a local copy of selectivizr-example-start.html. if you look at this running live, you'll see that it contains two paragraphs, one of which is styled. we've selected the paragraph with p:first-child, which won't work in old versions of ie. now download mootools and selectivizr, and save them in the same directory as your sample html. put the following code into the head of your html document, just before the opening <style> tag: <script type="text/javascript" src="mootools-core-1.6.0.js"></script> <!--[if (gte ie 6)&(lte ie 8)]> <script type="te...

Handling common JavaScript problems - Learn web development
wser developer tools: the javascript debugger as it is called in firefox. note: similar tools are available in other browsers; the sources tab in chrome, debugger in safari (see safari web development tools), etc. in firefox, the debugger tab looks as follows: on the left, you can select the script you want to debug (in this case we have only one). the center panel shows the code in the selected script. the right-hand panel shows useful details pertaining to the current environment — breakpoints, callstack and currently active scopes. the main feature of such tools is the ability to add breakpoints to code — these are points where the execution of the code stops, and at that point you can examine the environment in its current state and see what is going on. let's get to work. th...

Setting up your own test automation environment - Learn web development
round information at test design considerations. in general, you should make sure that your tests are: using good locator strategies: when you are interacting with the document, make sure that you use locators and page objects that are unlikely to change — if you have a testable element that you want to perform a test on, make sure that it has a stable id, or position on the page that can be selected using a css selector, which isn't going to just change with the next site iteration. you want to make your tests as non-brittle as possible, i.e. they won't just break when something changes. write atomic tests: each test should test one thing only, making it easy to keep track of what test file is testing which criterion. as an example, the google_test.js test we looked at above is pretty good,...

Accessibility API cross-reference
or passwords protected n/a passwd_text password role slated for aria 2.0 a portion of quoted content which is brief enough to appear 'inline'. (compare with blockquote). n/a <q> <quote> note the reversed logic in some apis readonly editable editable aria-readonly=true this object can be selected selectable selectable selectable this object is selected selected selected selected aria-selected=true selected (boolean attribute) for a button that is "consistent". the button is inconsistent when it will act on a group of objects (such as a list of mail messages) that are not in the same state. n/a n/a sensitive...

Accessibility Features in Firefox
lows users knowledgeable about cascading style sheets to customize the appearance of all pages that are displayed. finally, bookmarks.html contains all your bookmarks, and is easy to move around from computer to computer. view selection source (techies only): when you select some text and right click or press shift+f10, you can "view selection source". this will show the html source for only the selected text, which is useful for understanding accessibility problems in some web sites. customize your experience! many users are finding the true greatness of firefox lies in support for third party extensions. extensions are small add-ons which can change your browser experience as you see fit. extensions can easily be installed or removed with the extension manager in the tools menu. here are so...

Mozilla's Section 508 Compliance
ng text. the minimum information that shall be made available is text content, text input caret location, and text attributes. complete. caret location and text attributes are exposed via msaa (windows) and atk (linux/unix) incomplete. no development efforts have made made to utilize cocoa or carbon accessibility apis. (g) applications shall not override user selected contrast and color selections and other individual display attributes. complete. the default theme, classic, uses the operating system's font and color contrast settings. when the windows "high contrast theme" is used classic, and thus the system look and feel, is automatically selected. complete when run in the gnome desktop. the default theme, classic, uses gnome's font and colo...

Frequently Asked Questions for Lightweight themes
e. you can either: visit the gallery, choose your favorite theme, and click on your choice to instantly change the look of your browser. once a theme is installed, it is saved in the add-ons manager, where you can enable or disable them as you wish. simply go to the tools > add-ons menu and click on the appearance tab. how do i undo a lightweight theme? to undo the design you most recently selected, go to tools > add-ons in the menu bar and select the themes tab. next to the theme you want to undo, click the disable button. how do i provide feedback? we're always looking for ways to improve themes, and would love to hear what you think. visit the themes forum to send us your feedback. creating your own themes can i create my own theme? absolutely! all you need to do is create two graph...

Adding phishing protection data providers
service. browser.safebrowsing.provider.idnum.reporterrorurl an url to which the user is directed in order to report a safe page that is incorrectly being reported as a phishing site. browser.safebrowsing.provider.idnum.reportphishurl an url to which the user is directed in order to report a phishing site that isn't detected by the phishing protection system. determining the currently-selected data provider if you need to determine the id number of the currently selected anti-phishing data provider, you can look at the current value of the preference browser.safebrowsing.dataprovider. ...

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

Creating a Language Pack
j-firefox-build/browser/locales. $ make langpack-x-testing locale_mergedir=$(pwd)/mergedir now go to the dist directory to find your langpack ready to use! $ cd ../../dist the xpi file can be found in the directory win32/xpi on windows, linux-i686/xpi or linux-x86_64 on linux or mac/xpi on mac. open the xpi file contained in this directory with firefox to see your work. you have to set your selected language still. you can either use the locale switcher extension, or set it in about:config. add the preference intl.locale.requested and set it to your language code, in this case, x-testing, or add it in front of the current setting, seperated with a comma. before gecko 59 you had to set the preference general.useragent.locale to your language code. l10n binary repack for apps currently in de...

Debugging a hang on OS X (Archived)
parsing the data, click the "show text report" button; a new window will open with a couple of rows with stacktraces for all the threads in the sampled application. if you need to upload the sample to bugzilla, select all the sample text, copy it into your favorite text editor, and save as a plain-text file. for a more detailed view of the sample data, make sure the sample you just recorded is selected in the “detected hangs” window and click on the “open…” button. creating the sample on mac os x 10.4 when the application is still hung, open up sampler.app (it’s in your <tt>/developer/applications/performance tools/</tt> folder; if it is missing, install the latest computer hardware understanding development (chud) tools from apple.). choose file > attach... select "firefox-b...

Configuring Build Options
u use, we refer to this file as the mozconfig file in the examples below. setting the mozconfig path: export mozconfig=$home/mozilla/mozconfig-firefox calling the file .mozconfig (with a leading dot) is also supported, but this is not recommended because it may make the file harder to find. this will also help when troubleshooting because people will want to know which build options you have selected and will assume that you have put them in your mozconfig file. mozconfig contains two types of options: options prefixed with mk_add_options are passed to client.mk. the most important of these is moz_objdir, which controls where your application gets built (also known as the object directory). options prefixed with ac_add_options are passed to configure, and affect the build process. bu...

Windows SDK versions
e "c:\windows" instead of "%systemroot%". older sdks these are no longer supported, further information is available at obsolete build caveats and tips [en-us] under the windows sdk article. troubleshooting help! i know i have the correct sdk, but configure.in's still failing! try the following things in order: run the windows sdk configuration tool (if available) and make sure the right sdk is selected. restart the msys console. delete your entire object directory and start over. ...

The Firefox codebase: CSS Guidelines
le 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 overriding css before overriding any css rules, check whether overriding is really needed. sometimes, when copy-pasting older code, it happens that the code in question contains unnecessary overrides. this could be because the css that it was overriding got removed in the meanti...

Eclipse CDT
uickly switch to a recently viewed document use cmd-f6/ctrl-f6. if you want to change this awkward key binding, the command you need to rebind is "next editor". to show a filterable list of open documents (similar to the way emacs gives you a list of open buffers), use cmd-e/ctrl-e. if you click the yellow, double arrow button at the top of the project explorer tab on the left, it will keep the selected file in the project explorer tab in sync with the file that you're currently editing. organizing views use ctrl-m to toggle maximization of the current editor view (the editor must be focused first). to tab to another view, use cmd-f7/ctrl-f7. this is useful if you have maximized the editor using ctrl-m and you want to quickly see your search results. for example, without un-maximizing the edi...

Obsolete Build Caveats and Tips
cvars32.bat manually"). sdks older than the server 2003 r2 platform sdk aren't supported either. from windows build prerequisites [en-us] microsoft visual c++ (msvc) depending on what you're building, you will need to use one of several available versions of microsoft visual c++ (msvc) and/or microsoft visual studio. see the chart at the top of this page to ensure that the version you've selected is compatible with the branch you want to build. if you want to enable jemalloc, you must be using visual studio 2012, visual studio 2010 sp1, visual studio 2010, visual studio 2008 sp1, or visual studio 2005 sp1. other versions of visual studio will not work. visual studio 2017a> is available free from microsoft. visual c++ 10 is available from microsoft as part of the free visual ...

Developer guide
versions of firefox, it's often helpful to have multiple firefox profiles, such as one for each channel, or for different kinds of testing. getting documentation updated how to ensure that documentation is kept up to date as you develop. mozilla modules and module ownership this article provides information about mozilla's modules, what the role of a module owner is, and how module owners are selected. code snippets useful code samples for a wide variety of things you might need to figure out how to do. mozilla development strategies tips for how to make the most of your time working on the mozilla project. debugging find helpful tips and guides for debugging mozilla code. performance performance guides and utilities to help you make your code perform well (and to play nicely with othe...

Multiple Firefox profiles
les will be deleted. this action cannot be undone. cancel interrupts the profile deletion. renaming a profile in the profile manager, select the profile you want to rename, and then click "rename profile". enter a new name for the profile and click on ok. note: the folder containing the files for the profile is not renamed. options work offline choosing this option loads the selected profile, and starts firefox offline. you can view previously viewed web pages, and experiment with your profile. don't ask at startup if you have multiple profiles, firefox prompts you for the profile to use each time you start firefox. select this option to allow firefox to load the selected profile, without prompting at startup. note: to access other profiles after selecting this option, yo...

Cross Process Object Wrappers
lves multiprocess compatible are set up with a number of compatibility shims. one of these shims provides the following behavior: whenever chrome code tries to access content directly (for example, through window.content or browser.contentdocument), it is given back a cpow that wraps the content object. this means that examples like this will actually work, even in multiprocess firefox: gbrowser.selectedbrowser.contentdocument.body.innerhtml = "replaced by chrome code"; it's still important to keep in mind, though, that this is access through a cpow and not direct access to content. bidirectional cpows a common pattern is for chrome code to access content objects and add event listeners to them. to deal with this, cpows are bidirectional. this means that if content passes a cpow to the chrome ...

Communicating with frame scripts
ation to know when the message manager has disconnected from the other end of the conversation, so you can stop sending it messages or expecting to receive messages. for example, suppose we load a script into the current <browser> on some event, and keep the browser message manager in an array, so we can send it messages: var messagemanagers = []; ... ...

Frame script loading and lifetime
loading frame scripts to load a frame script use the loadframescript() function. this line of code loads a frame script into the currently selected tab. the script just writes "foo" to the command line: // chrome script var mm = gbrowser.selectedbrowser.messagemanager; mm.loadframescript('data:,dump("foo\\n")', true); loadframescript() takes two mandatory parameters: a url that points to the frame script you want to load a boolean flag, allowdelayedload note: if the message manager is a global frame message manager or a window message manager, loadframescript() may load the script multiple times, once in each applicable frame. chrome: urls extension developers usually use a chrome:// url to refer to the frame scripts. to define the mapping between a chrome:// url and a frame s...

Message manager overview
it's the content-side end of frame message manager conversations. frame scripts are loaded into the content frame message manager scope, and messages from chrome message managers end up here. the content frame message ...

Message manager overview
message to the script instance loaded into a specific <browser> using the browser message manager. it's a chromemessagesender object, which implements the following interfaces: nsiprocesschecker nsiframescriptloader nsimessagelistenermanager nsimessagesender the browser message manager can be accessed as a property of the xul <browser> element: // chrome script let browsermm = gbrowser.selectedbrowser.messagemanager; process message managers process message managers correspond to process boundaries, and enable code running in different processes to communicate. multiprocess firefox has the concept of: a "parent process" "child processes" which are processes spawned by the parent process. for practical purposes, in multiprocess firefox the parent process is the chrome process, an...

Performance best practices for Firefox front-end engineers
at needs to be repainted, the longer it takes. similarly, the more things that need to be repainted, the longer it takes. our graphics team has added a handy feature to help you detect when and where paints are occurring. this feature is called “paint flashing,” and it can be activated for both web content and the browser chrome. paint flashing tints each region being painted with a randomly selected color so that it’s more easy to see what on the screen is being painted. you can activate paint flashing for browser chrome by setting nglayout.debug.paint_flashing_chrome to true. you can activate paint flashing for web content by setting nglayout.debug.paint_flashing to true. after enabling these, exercise your function and see what’s painting. see a lot of flashing / colors? that mea...

mozbrowserselectionstatechanged
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserselectionstatechanged event is fired when the text selected inside the browser <iframe> content changes. note that this is deprecated, and current implementations should use mozbrowsercaretstatechanged instead. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only d...

:-moz-lwtheme-brighttext
...

:-moz-lwtheme-darktext
...

:-moz-lwtheme
...

Embedding Tips
description of the docshell may be found here. how do i implement context menus? make your chrome object implement the nsicontextmenulistener or nsicontextmenulistener2. the nsicontextmenulistener::onshowcontextmenu() method will be called with the dom node that the context applies, the dom event plus some flag combinations that assist in determining what menu to display (document, link, image, selected text etc.) how do i implement tool tips? make your chrome object implement the nsitooltiplistener interface. methods to hide or show the tool tips will automatically be called upon it when the user hovers over an item with title text. the contract id is defined here. for an example, see browserimpl.cpp in mfcembed and its simple cbrowsertooltip class implemented in mfc. how do i disable drag/...

Gecko Keypress Event
9638, bug 429510 and the bugs on which they depend). the changes were risky so late in the release schedule, but they were necessary for fixing the many key handling bugs. charcode of dom keypress event if a keypress event is fired without any modifier keys (ctrl/alt(option)/meta(win/command)), then the properties of the event are the same as they were in gecko1.8.1. that is, when the currently selected keyboard layout produces a unicode character (according to the current state of capslock and numlock), the charcode property contains that character. when the keypress event includes modifier keys, sometimes the charcode value is replaced with an ascii character according to the following rules. the accel key depends on the platform. ctrl is the accel key on windows and linux, while meta (i.e. ...

How to Report a Hung Firefox
p listing. create a new bug report at bugzilla.mozilla.org using this link. another way to trigger a crash in a hung tab is to run the following script in the browser console (opened after selecting the hung tab): let wm = cc["@mozilla.org/appshell/window-mediator;1"]. ...

Interfacing with the Add-on Repository
stall object that can be used with the add-on manager api to install the add-on. ...

Bootstrapping a new locale
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. now we can actually create the language pack, make -c browser/locales langpack-en-x-dude you should find your newly created language pack in dist/install. ls dist/install you can open that file in firefox and check it out. you have to set your selected language still. you can either use the locale switcher extension, or set it in about:config. set the general.useragent.locale to your language code, in this case, en-x-dude, and restart firefox once more. ...

Index
you want to make sure it's accurate! if you don't have a lot of experience with code, you might even be concerned that you've broken something (oops!). now we'll walk you through performing some quality assurance testing on your work to make sure you're on the right track. 15 release phase localization you've made it! you've setup up your local and remote environments, you've selected your l10n tools and projects, done some localization and even some testing! now you're ready for the final phase: becoming an official l10n release. here, we'll continue to stay true to the original intent of this guide and only present you with the technical information you need to become an official release. we'll primarily focus on getting your release repository setup and the mercurial comman...

Localizing XLIFF files for iOS
ke to translation strings within an xliff file. string repository for firefox on ios the firefox-ios.xliff file is located in svn. decide where on your local computer you will store your copy of the github repo and navigate there in your terminal. enter the command git clone https://github.com/mozilla-l10n/firefoxios-l10n/your-locale-code/ you should now see the firefox-ios project in your selected directoy with the firefox-ios.xliff file in it. translating the xliff file open the firefox-ios.xliff file in your favorite text editor. in the <file> tag, add the target-language attribute with your locale code as the value (e.g., target-language="xx-xx"). be aware that there may be many <file> tags within one xliff document. each <file> tag requires the target-language attribute with your...

Localizing extension metadata on addons.mozilla.org
sion, and doesn't necessarily change with each revision (but it can). the localizable data fields of an extension are: name homepage summary description eula privacy policy version notes developer comments when you submit a new extension to amo, the process is divided into several steps. in step 2, you'll be asked to provide the attributes listed above in the add-on's default locale (selected in step 1). the values you provide here are used as fallback values if someone requests a language that doesn't exist. step 4 allows you to translate any of the above fields into any other language amo supports. remember, all fields are optional when localizing. any field that is blank will just show up in the default locale. getting translation help you are kindly advised not to use any autom...

Localizing with Koala
ap.label entity, add the other one from this file, i.e. cmd_enginemanager.label. you can right-click it and choose "add entity" as you did previously, or just double-click the entity name to add it to the file. note how koala is smart enough to insert this entity before searchendcap.label. this is helpful for keeping the localization files clean and tidy at all times. the string to translated is selected so that you can translate it without any further clicking. when you are done with translating the cmd_enginemanager.label entity, save the file. now let's create the other file. double-click on search.properties and click "ok" when koala asks if you want to create this file. from the sidebar, add the cmd_addfoundengine string to the newly-created search.properties file in your locale file struct...

Localizing with Mozilla Translator
rt partial glossaries in each link point of the ''old'' product and import them in the corresponding link point of the ''new'' point. your keep original and fuzzy flags will be honored for each string. there will be some exceptions. files hanging directly from the platform neutral platform can't be part of a partial glossary (because they are not components), and platform neutral itself can't be selected either, since it is not a component, but a platform. for these few files, you will have to export them individually and reimport them. if you are a ''not so good'' mt user, however, you can just create a new product (or several ones; see next recipe to know why), run file -> update on them (you'll get a list of all the strings) and then run edit -> autotranslate. most of the strings will be auto...

Patching a Localization
fied patch's files. these modifications are printed to stdout (standard output). visually inspect your modifications. a good patch only contains those changes that you intended to make. if it contains more, you'll likely regress something else. alternatively, you can select specific files for diff to evaluate and print (see below). the command will only print the differences found in the selected files. hg diff browser/chrome/browser/browser.dtd attach the patch to an existing bug for reference or review or create a new one if one doesn't currently exist. hg diff > path/to/patchfile ...

Release phase
here, we'll continue to stay true to the original intent of this guide and only present you with the technical information you need to become an official release. we'll primarily focus on getting your release repository setup and the mercurial commands you'll need to know to use that repository. for more information on the release part of the l10n process, visit the mozilla wiki here. ...

Creating localizable web applications
_locales = array('ar', 'fa', 'he'); return in_array($locale, $rtl_locales); } ?> <html lang="<?= $locale?>" dir="<?= isrtl($locale) ? 'rtl' : 'ltr' ?>" > <body class="<?= $locale?> <?= isrtl($locale) ? 'rtl' : 'ltr' ?>"> </body> </html> notice that <body/> is given a class equal to the current locale. this is useful to add minor corrective rules to the css that apply only for selected locales. for example, for locales that tend to have longer words than english, you may want to make an element slightly wider. snippet 3. good: body.de foo, body.fr foo, body.pl foo { /* locale-specific rules for the foo element */ width: 10em; /* originally 8em */ } adapt the interaction to rtl locales right-to-left locales not only require good images handling (see images), but also sho...

MathML Torture Test
mathml torture test html content <p> render mathematics with: <select name="mathfont" id="mathfont"> <option value="default" selected="selected">default fonts</option> <option value="asana">asana</option> <option value="cambria">cambria</option> <option value="dejavu">dejavu</option> <option value="latinmodern">latin modern</option> <option value="libertinus">libertinus</option> <option value="lucidabright">lucida bright</option> <option value="minion">minion</option> <option value="stixtwo">stix two</option> <option value="texgyrebonum">tex gyre bonum</option> <option value="texgyrepagella">tex gyre pagella</option> <option value="texgyreschola">tex gyre schola</option> <option value="texgyretermes">tex gyre termes</option> <o...

MathML Screenshots
in combination with other web features such as background images at a desired opacity. screen captures of mtable, showing typesetting mathematical constructs in 2d. screenshot of roots and physics equations (maxwell's equations and einstein's field equations). this screen capture demonstrates advanced layout with mtable and stretchy operators. you can get the mathml source of a formula or a selected expression. the choice is yours! mathml in blog posts and emails. ...

Profiling with Xperf
can do "xperf -on base -stackwalk profile". in the viewer, when summary data is viewed for heap events (heap allocations outstanding, etc. all lead to the same summary graphs), 3 types of allocations are listed -- aifi, aifo, aofi. this is shorthand for "allocated inside, freed inside", "allocated inside, freed outside", "allocated outside, freed inside". these refer to the time range that was selected for the summary graph; for example, something that's in the aofi category was allocated before the start of the selected time range, but the free event happened inside. tips in the summary views, the yellow bar can be dragged left and right to change the grouping -- for example, drag it to the left of the module column to have grouping happen only by process (stuff that's to the left), so that ...

browser.search.context.loadInBackground
browser.search.context.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the background. type:boolean default value:false exists by default: yes application support: firefox 13.0 status: active; last updated 2012-02-17 introduction: pushed to nightly on 2012-02-15 bugs: bug 727131 values true new tab with search results will be opened in the background, focus stays on the current tab. false (default) new tab with search results will be opened in the foreground. ...

dom.event.clipboardevents.enabled
the emitting of the oncopy, oncut and onpaste events are controlled by this preference. ...

mail.tabs.drawInTitlebar
...

Preferences system
c overlay. you should be careful to read the higs for the platforms you are targeting and use the xul preprocessor if necessary to set different window titles as appropriate. you should also be careful to specify the width of the window (in em) as appropriate using the preprocessor for each targeted platform, as well as the height (in em) for platforms where the window size does not change as the selected panel is changed (e.g. windows). usage in xulrunner applications when calling opendialog() to open a preferences dialog, "toolbar" should be included in the features string. not using "toolbar" will cause the preferences dialog to only display one preference pane. example: var features = "chrome,titlebar,toolbar,centerscreen,modal"; window.opendialog(url, "preferences", features); bugzilla the ...

Profile Manager
different lists: one of user profiles, and the other of application versions that can be used with the profiles. by default, this means it tracks a list of firefox applications that are installed on your system, and a list of profiles for use by firefox. an individual profile can be linked to a specific installation of firefox, so that version of firefox will be launched when that profile is selected. for example, profilea might be linked with a copy of firefox 3.6.10, while profileb might be linked with a copy of firefox 3.5.3. when launched, profile manager will look in some default locations for installed versions of firefox (or other application you're using profile manager with). additionally, you can manually add firefox versions by clicking the "manage firefox versions..." button: ...

A guide to searching crash reports
common search criteria: product, version, platform, and process type. the product field is pre-populated with "firefox" because that is a common case. as the fine print says, the default date range is the past week. the default search: signature facet if you click on the "search" button, you will get results like the ones in the following screenshot. by default, the "signature facet" tab is selected. ("facet" is a term that means "group".) in these results, the found crash reports are grouped according to crash signature and ranked by group size. the columns show each group's rank, signature, size (both a count and a proportion of matching crash reports), and finally a list of bugs that have been marked as relating to this signature. the numbers are large because this search matched all fir...

NSS Certificate Download Specification
tificate decoder encounters one of these collections of multiple certificates they are handled in the following way: the first certificate is processed in a context specific manner, depending upon how it is being imported. for mozilla browsers, this handling will depend upon the mime content-type that is used on the object being downloaded. for nss-based servers it will depend upon the options selected in the server's administration interface. subsequent certificates are all treated the same. if the certificates contain a basicconstraints certificate extension that indicates they are ca certificates, and do not already exist in the local certificate database, they are added as untrusted cas. in this way they may be used for certificate chain validation, as long as there is a trusted ca some...

Index
5 password based encryption with md2 and des cbc o pkcs #5 password based encryption with md5 and des cbc o pkcs #5 password based encryption with sha1 and des cbc with pkcs#12, the crypto provider may be the soft token module or an external hardware module. if the cryptographic module does not support the requested algorithm, then the next best fit will be selected (usually the default). if no suitable replacement for the desired algorithm can be found, the tool returns the error no security module can perform the requested operation. nss database types nss originally used berkeleydb databases to store security information. the last versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o se...

NSS Key Log Format
t form supported by wireshark 1.6.0. it has been superseded by client_random which also works with other key-agreement algorithms (such as those based on diffie-hellman) and is supported since wireshark 1.8.0. the tls 1.3 lines are supported since nss 3.34 (bug 1287711) and wireshark 2.4 (early_exporter_secret exists since nss 3.35, bug 1417331). the size of the hex-encoded secret depends on the selected cipher suite. it is 64, 96 or 128 characters for sha256, sha384 or sha512 respectively. for wireshark usage, see ssl - wireshark wiki. ...

NSS 3.21 release notes
sing after having been negotiated ssl_error_unexpected_extended_master_secret - error code for receiving an extended master secret when previously not negotiated in sslt.h ssl_enable_extended_master_secret - configuration to enable the tls extended master secret extension (rfc 7627) ssl_preinfo_version - used with sslpreliminarychannelinfo to indicate that a tls version has been selected ssl_preinfo_cipher_suite - used with sslpreliminarychannelinfo to indicate that a tls cipher suite has been selected ssl_preinfo_all - used with sslpreliminarychannelinfo to indicate that all preliminary information has been set notable changes in nss 3.21 nss now builds with elliptic curve ciphers enabled by default (bug 1205688) nss now builds with warnings as errors (bug 11826...

NSS 3.25.1 release notes
lity no new functionality is introduced in this release. this is a patch release to address a tls compatibility issue that some client applications experienced with nss 3.25. notable changes in nss 3.25.1 md5 signature algorithms sent by the server in certificaterequest messages are now properly ignored. previously, with rare server configurations, an md5 signature algorithm might have been selected for client authentication and caused the client to abort the connection soon after. bugs fixed in nss 3.25.1 the following bug has been fixed in nss 3.25.1: ignore md5 signature algorithms in certificate requests compatibility nss 3.25.1 shared libraries are backwards compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss...

NSS 3.26.2 release notes
ty no new functionality is introduced in this release. this is a patch release to address a tls compatibility issue that some client applications experienced with nss 3.26.1. notable changes in nss 3.26.2 md5 signature algorithms sent by the server in certificaterequest messages are now properly ignored. previously, with rare server configurations, an md5 signature algorithm might have been selected for client authentication and caused the client to abort the connection soon after. bugs fixed in nss 3.26.2 the following bug has been fixed in nss 3.26.2: ignore md5 signature algorithms in certificate requests compatibility nss 3.26.2 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss ...

NSS 3.35 release notes
apis may be removed from future nss versions. applications must not rely on these apis to be present. if an application is linked at runtime to a later version of nss, which no longer provides any of these apis, the application must handle the scenario gracefully. in order to ease transitions, experimental functions return secfailure and set the ssl_error_unsupported_experimental_api code if the selected api is not available. experimental functions will always return this result if they are disabled or removed from a later nss release. if these experimental functions are made permanent in a later nss release, no change to code is necessary. (only apis exported in *.def files are stable apis.) new experimental functionality provided below are descriptions of experimental functionality, which mi...

NSS API Guidelines
a default random number generator. nss_shutdown() closes these databases, to prevent further access by an application. above high cert, high key lib/nss nss.h pk11wrap provides access to pkcs #11 modules, through a unified interface. the pkcs11wrap library provides functions for selecting/finding pkcs #11 modules and slots. it also provides functions that invoke operations in selected modules and slots, such as key selection and generation, signing, encryption and decryption, etc. crypto wrapper lib/pk11wrap pk11func.h, secmod.h, secmodt.h pkcs12 provides functions and types for encoding and decoding pkcs #12 data. pkcs #12 can be used to to encode keys, and certificates, for export or import into other applications. pkcs #12 lib/pkcs12 pkcs12t.h,...

Overview of NSS
ation of diffie-hellman key agreement. pkcs #5. rsa standard that governs password-based cryptography, for example to encrypt private keys for storage. pkcs #7. rsa standard that governs the application of cryptography to data, for example digital signatures and digital envelopes. pkcs #8. rsa standard that governs the storage and encryption of private keys. pkcs #9. rsa standard that governs selected attribute types, including those used with pkcs #7, pkcs #8, and pkcs #10. pkcs #10. rsa standard that governs the syntax for certificate requests. pkcs #11. rsa standard that governs communication with cryptographic tokens (such as hardware accelerators and smart cards) and permits application independence from specific algorithms and implementations. pkcs #12. rsa standard that governs the f...

Python binding for NSS
_cache_with_opt() nss.ssl.get_max_server_cache_locks() nss.ssl.set_max_server_cache_locks() nss.ssl.shutdown_server_session_id_cache() the following constants were added nss.nss.int.pk11_dis_could_not_init_token nss.nss.int.pk11_dis_none nss.nss.int.pk11_dis_token_not_present nss.nss.int.pk11_dis_token_verify_failed nss.nss.int.pk11_dis_user_selected nss.nss.int.pkcs12_des_56 nss.nss.int.pkcs12_des_ede3_168 nss.nss.int.pkcs12_rc2_cbc_128 nss.nss.int.pkcs12_rc2_cbc_40 nss.nss.int.pkcs12_rc4_128 nss.nss.int.pkcs12_rc4_40 the following files were added test/run_tests test/test_cipher.py (replaces cipher_test.py) test/test_client_server.py test/test_digest.py (replaces digest_test.

NSS tools : pk12util
2 cbc pkcs#5 pbe ciphers o pkcs #5 password based encryption with md2 and des cbc o pkcs #5 password based encryption with md5 and des cbc o pkcs #5 password based encryption with sha1 and des cbc with pkcs#12, the crypto provider may be the soft token module or an external hardware module. if the cryptographic module does not support the requested algorithm, then the next best fit will be selected (usually the default). if no suitable replacement for the desired algorithm can be found, the tool returns the error no security module can perform the requested operation. nss database types nss originally used berkeleydb databases to store security information. the last versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o secmod.db for pkcs #11 modul...

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

OLD SSL Reference
additional types are described with the functions that use them or in the header files. types and structures certcertdbhandle ...

ssltyp.html
this page is part of the ssl reference that we are migrating into the format described in the mdn style guide. if you are inclined to help with this migration, your help would be very much appreciated. upgraded documentation may be found in the current nss reference selected ssl types and structures chapter 3 selected ssl types and structures this chapter describes some of the most important types and structures used with the functions described in the rest of this document, and how to manage the memory used for them. additional types are described with the functions that use them or in the header files. types and structures managing secitem memory types and structures these types and structures are described here: certcertdbhandle certcertifi...

NSS Tools pk12util
s: "pkcs #5 password based encryption with md2 and des cbc" "pkcs #5 password based encryption with md5 and des cbc" "pkcs #5 password based encryption with sha1 and des cbc" it should be noted that the the crypto provider may be the softtoken module or an external hardware module. it may be the case that the cryptographic module does not support the requested algorithm and a best fit will be selected, likely to be the default. if no suitable replacement for the desired algorithm can be found a "no security module can perform the requested operation" will appear on the error message. error codes pk12util can return the following values: 0 - no error 1 - user cancelled 2 - usage error 6 - nls init error 8 - certificate db open error 9 - key db open error 10 - file initialization error 11 ...

NSS tools : pk12util
5 password based encryption with md2 and des cbc o pkcs #5 password based encryption with md5 and des cbc o pkcs #5 password based encryption with sha1 and des cbc with pkcs#12, the crypto provider may be the soft token module or an external hardware module. if the cryptographic module does not support the requested algorithm, then the next best fit will be selected (usually the default). if no suitable replacement for the desired algorithm can be found, the tool returns the error no security module can perform the requested operation. nss database types nss originally used berkeleydb databases to store security information. the last versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o se...

Installing Pork
will probably want a separate gcc for this so you don't have to modify your standard system gcc. you can install gcc in the normal way in a special directory. build and install mcpp mcpp generates macro expansion comments that allow pork's elsa to undo macros, which is necessary in order to get exact position information. to tell mcpp which gcc installation to integrate itself with, place the selected gcc bin dir as the first element of your path: path=/bindir/of/my/gcc:$path if you want to use a gcc that has binaries named something other than "gcc" and "g++", or you use "ccache" for you main gcc installation and want mcpp to override a separate installation, you need to pass the options "cc=gccxxx cxx=g++xxx" to "./configure". but don't give absolute paths there: mcpp won't build right. in...

Rhino overview
rted by the javascript engine are by default retrieved from the property file org/mozilla/javascript/resources/messages.properties. if other properties files with extensions corresponding to the current locale exist, they will be used instead. javascript language versions some behavior in the javascript engine is dependent on the language version. in browser embeddings, this language version is selected using the language attribute of the script tag with values such as "javascript1.2". version 1.3 and greater are ecma conformant. operators == and != version 1.2 only uses strict equality for the == and != operators. in version 1.3 and greater, == and != have the same meanings as ecma. the operators === and !== use strict equality in all versions. toboolean boolean(new boolean(false)) is fals...

Tracing JIT
ned from the list of free registers. when all registers are in use, the least-often-used register currently in use is spilled. nanojit/native*.* the files nativei386.h, nativei386.cpp, nativearm.h, nativearm.cpp, etc. each define architecture-specific methods within the assembler class. only one architecture-specific variant is included into any given build of the assembler; the architecture is selected and fixed when the build is configured. the architecture-specific methods found in these files are the only functions within nanojit or tracemonkey that emit raw bytes of machine-code into memory. spidermonkey-specific high level component: jstracer.* the files jstracer.cpp and jstracer.h contain a the mechanisms of monitoring and recording the activity of the interpreter. each spidermonkey j...

JS_GetParent
efunction, js_definefunction, js_definefunctions, and js_initclass). some of these functions allow the application to specify a parent object. if the jsapi function creating the object has a parent parameter, and the application passes a non-null value to it, then that object becomes the new object's parent. otherwise, if the context is running any scripts or functions, a default parent object is selected based on those. otherwise, if the context has a global object, it is used. otherwise the new object has no parent. this is often the case for the global object, which is typically the first object created in a new context. the preferred way to set an object's parent is by using the parent parameter to js_newobject or js_constructobject. an application can also use js_setparent, but see the c...

JS_GetScopeChain
describes execution contexts and scope chains. a scope chain is a sequence of objects whose properties are searched whenever a script or function refers to a variable. these objects represent the lexical scope of the currently executing statement or expression, not the call stack, so they include: the variable objects of any enclosing functions or let statements or expressions, and any objects selected by enclosing with statements, in order from the most-nested scope outward; lastly the global object against which the function was created. note that cx's current global object, as set by js_setglobalobject, is not guaranteed to be on the scope chain. if the currently executing function was created in the scope of a different global object, then that object will be the last object in the curre...

Running Automated JavaScript Tests
path_to_js_shell test_path_substring [ test_path_substring_2 ... ] this runs all the tests whose paths contain test_path_substring. thus, you can run one test by giving its filename, or any substring that is a substring of that test filename only. you can run all tests in a directory by giving the directory path. you can run three specific tests by giving the three names. or you can run all but selected tests with the --exclude option. now that the full set of test262 tests is included in the tree, jstests take a long time to complete. for a smoke test or if you are not changing language-level functionality, you may wish to use jstests.py path_to_js_shell --exclude=test262 other options allow you to show the test command lines being run, command output and return codes, run tests named in a gi...

Gecko object attributes
to: any widget that accepts input exposed via aria: aria-datatype exposed in xforms: from boud instance node datatype draggable true when the accessible object can be grabbed. dropeffect indicates what functions can be performed when the dragged object is released on the drop target. refer to aria-dropeffect for the list of possible values. grabbed true when the accessible object has been selected for dragging. haspopup true when the object displays a pop-up menu or window when invoked. applied to: state_haspopup exposed in aria: aria-haspopup note: this is only supported on atk/at-spi. on msaa, state_system_haspopup is used. sort if "ascending" or "descending", then child items within the container are currently sorted as indicated. applied to: any container exposed in aria: aria...

XForms Accessibility
s for the user to select a file (see the spec, the docs). this element is represented by upload. range allows the user to choose a value from within a specific range of values (see the spec, the docs). currently it is represented by a slider only. trigger allows the user to initiate actions (see the spec, the docs). this element is represented by button. submit invokes the submission of the selected instance data to its target destination (see the spec, the docs). this element is represented by button. select allows the user to choose one or multiple values from a list of pre-defined values (see the spec, the docs). it can have the following representations: listbox checkboxes group select1 allows the user to choose a single value from a list of pre-defined values (see the spec, the...

Using the Places history service
"session id" allows these paths to be reconstructed more easily. when the user starts browsing (for example, by typing in a link or following a bookmark), a new session id is created. new visits get the same session id as their referrer. this means that one "session" is comprised of going to a new page, and following a bunch of links or redirects. a session is ended when a new url is typed in or selected from bookmarks. these session ids allow the dotted lines separating related pages in the history view to be easily computed. creating the history service the places history service's contract id is "@mozilla.org/browser/nav-history-service;1": var historyservice = components.classes["@mozilla.org/browser/nav-history-service;1"] .getservice(components.interfaces.n...

Using the Places keywords API
ent an alias for the given url in the autocomplete (aka awesomebar) field, with smart replacement of query terms. a keyword can only be associated to a given url, it's not possible to associate the same keyword with multiple urls (doing so will just update the url it's pointing to). each keyword can be associated with post data, in such a case a post action will be executed when the given url is selected from the awesomebar. different keywords can reference the same url, if their post data differ. keywords in firefox are currently created through the add keyword for this search contextual menu option in form text fields. note this is the same feature previously known as bookmark keywords, the key difference is that keywords are not bound to a specific bookmark, but to a specific url. using the...

Building the WebLock UI
e that locks and unlocks the browser. one of the most efficient ways to expose this is to use radio buttons, which allow the user to toggle a particulart state, as the figure above illustrates. in xul individual <radio/> elements are contained within a parent element called <radiogroup/>. grouping radio elements together creates the toggling ui by requiring that one or another of the elements be selected, but not both. the xul that defines the radiogroup in the web lock manager dialog is this: <radiogroup> <radio label="lock"/> <radio label="unlock" selected="true"/> </radiogroup> since the weblock component always starts up in the unlocked position, you can add the selected="true" attribute and value on the unlock radio button and reset it dynamically as the user takes action. site ad...

Using XPCOM Components
ed to stay the same even if the underlying implementation changes. the interfaces are public, in other words, and the implementations are private[private-xpcom-interfaces]. when a user selects one of the cookies displayed in the list and then clicks the remove button, the remove method in the nsicookiemanager interface is called. the function is carried out by the cookiemanager component, and the selected cookie is deleted from disk and removed from the displayed list. the snippet in getting the cookiemanager component in javascript shows how the remove() method from the xpcom cookiemanager component can be called from javascript: getting the cookiemanager component in javascript // xpconnect to cookiemanager // get the cookie manager component in javascript var cmgr = components.classes["@mozi...

IAccessibleText
ordinate. return value e_invalidarg if bad [in] passed. s_false if the object is already at the specified location. s_ok. selection() returns the character offsets of nth active text() selection. [propget] hresult selection( [in] long selectionindex, [out] long startoffset, [out] long endoffset ); parameters selectionindex index of selection (0 based). startoffset 0 based offset of first selected character. endoffset 0 based offset of one past the last selected character. return value e_invalidarg if bad [in] passed, [out] values are 0s. s_false if there is nothing to return, [out] values are 0s. s_ok. setcaretoffset() sets the position of the caret. the caret position/offset is that of the character logically following it, for example to the right of it in a left to right language. sett...

mozISpellCheckingEngine
ttribute type description copyright wstring a string indicating the copyright of the engine. not currently used. read only. dictionary wstring the name of the current dictionary used by check() and suggest(). this will be either element from the array returned by getdictionarylist() or an empty string if no dictionary is selected. note: setting this value to a value that doesn't match an existing dictionary throws a ns_error_file_not_found exception. when this attribute's value is changed, a "spellcheck-dictionary-update" notification is sent. if the dictionary was set to "no dictionary" (that is, by specifying an empty string), the observer may select another dictionary before returning. ...

ExtendSelection
« nsiaccessible page summary this method extends the current selection from its current accessible anchor node to this accessible. void extendselection(); exceptions thrown ns_error_not_implemented always. this method isn't implemented. see also nsiaccessible.setselected() nsiaccessible.takeselection() ...

TakeSelection
« nsiaccessible page summary this method selects this accessible node only. void takeselection(); exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree. see also nsiaccessible.setselected() nsiaccessible.extendselection() ...