Menus - Archive of obsolete content
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 'file'. <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menuitem label="new"/> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> </menubar> there are five tags used in this example, described briefly here: menubar a row of menus that appears along the top of the window or screen. it should contain menu elements. menu a label of a menu on a menubar, for insta...
...ow of menus that appears along the top of the window or screen. it should contain menu elements. menu a label of a menu on a menubar, for instance 'file' or 'tools'. a menu can also be used as the label of a submenu. menupopup a popup containing items to appear on a menu. the menupopup in the example above is a child of the 'file' menu and will appear when the menu label is clicked. menuitem a single item to appear on a menu. when the user moves the mouse over a menuitem, it will highlight the item. the cursor keys can also be used to adjust which menuitem is the current item. a menuitem is associated with a command to carry out. menuseparator a separator between items in a menu. in the example above, the 'file' menu has four menuitems and one menuseparator on it. the menu an...
... other types of tags should not appear on a menupopup. if you want to create a general purpose popup that isn't a menu, use a panel instead. for this, see panels. the menubar element a menu bar is created by using the xul menubar tag. ...
...And 11 more matches

Adding menus and submenus - Archive of obsolete content
systems. if your extension involves menus in any way, you should test it on mac os x to make sure everything works adequately. ...
...ox should be positioned near the top of the xul document, and the code should be similar to this: <toolbox> <menubar id="xulschoolhello-menubar"> <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;"> <menupopup> <menuitem label="&xulschoolhello.greet.short.label;" oncommand="xulschoolchrome.greetingdialog.greetingshort(event);" /> <menuitem label="&xulschoolhello.greet.medium.label;" oncommand="xulschoolchrome.greetingdialog.greetingmedium(event);" /> <menuitem label="&xulschoolhello.greet.long.label;" oncommand="xulschoolchrome.greetingdialog.greetinglong(event);" /> <menuseparator /> <menuitem label="&xulschoolhello.greet.custom.label;" oncommand="xulschoolchrome.greetingdialog...
... oncommand="xulschoolchrome.greetingdialog.greetingcustom(event);" /> </menupopup> </menu> </menubar> </toolbox> this code displays a simple menu with options for 3 different types of greetings, a menuseparator, and finally an option to show a custom greeting. ...
...And 9 more matches

menulist - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element that can be used for drop-down choice lists. the user may select one of the elements displayed in the menulist. the currently selected choice is displayed on the menulist element. 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. attributes accesskey, crop, disableautoselect, disabled, editable, focused, image, label, oncommand, open, preference, readonly, sizetopopup, tabindex, value properties accessibletype, crop, description, disableautoselect, disabled, editable, editor, image, inputfie...
...this should be one of the characters that appears in the label attribute for the element. ...
...this should be one of the characters that appears in the label attribute for the element. crop type: one of the value...
...And 9 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
ions in an application or web service. in the past, a combination of html and javascript was used to produce this sort of complex ui structure, but in xul, it can be handled easily just by writing tags. creating the menu listing 9 shows how the menu element and its related elements are combined. this produces the output seen in figure 6. ...
...vice. in the past, a combination of html and javascript was used to produce this sort of complex ui structure, but in xul, it can be handled easily just by writing tags. creating the menu listing 9 shows how the menu element and its related elements are combined. this produces the output seen in figure 6. <menubar> <menu label="menu 1"> <menupopup> <menuitem label="item 1"/> <menuitem label="item 2"/> <menuseparator/> <menuitem label="item 3"/> <menu label="submenu"> <menupopup> <menuitem label="item 4"/> <menuitem label="item 5"/> </menupopup> </menu> </menupopup> </menu> </menubar> listing 9: a menu definition figure 6: output from listing 9 each item in a menu is marked up with the menuitem tag. use the...
...="submenu"> <menupopup> <menuitem label="item 4"/> <menuitem label="item 5"/> </menupopup> </menu> </menupopup> </menu> </menubar> listing 9: a menu definition figure 6: output from listing 9 each item in a menu is marked up with the menuitem tag. use the menuseparator element to insert a separator bar that groups items together. both menu and menuitem elements take the label attribute to set their labels. insert menu elements into a menubar element to create multiple menus. you can easily create hierarchical menus by inserting 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 dis...
...And 8 more matches

nsIMacDockSupport
this can be done like this: var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); console.log('docksupport:', docksupport); var win = services.wm.getmostrecentwindow('navigator:browser'); var macmenu = win.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menupopup'); macmenu.setattribute('id', 'mymacmenu'); var macmenuitem = win.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.addeventlistener('command', function(){ var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplicat...
....only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.addeventlistener('command', function(){ var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplication(true); services.wm.getmostrecentwindow(null).focus() }) macmenu.appendchild(macmenuitem); var mainpopupset = win.document.getelementbyid('mainpopupset'); mainpopupset.appendchild(macmenu); let dockmenuelement = macmenu; //document.getelementbyid("menu_mac_dockmenu");66 let nativemenu = cc["@mozilla.org/widget/standalonenativemenu;1"].createinstance(ci.nsistandalonenativemenu); console.log('dockmenuelement:', dockmenuelement); nativemenu.init(dockmenuelement); docksupport.dockmenu...
...therefore, if you would like to add or remove items to the menu it is recommended to manipulate the default menu item which is on the hidden window of...
...And 8 more matches

More Menu Features - Archive of obsolete content
however, you can create submenus by simply placing the menu element inside the menupopup element. ...
...orks because the menu element is valid even when it isn't directly placed inside a menu bar. the example below creates a simple submenu inside the file menu example 1 : source view <toolbox flex="1"> <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menu id="new-menu" label="new"> <menupopup id="new-popup"> <menuitem label="window"/> <menuitem label="message"/> </menupopup> </menu> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> </menubar> </toolbox> adding a menu to our find files example let's add a menu to the find files dialog. we'll just add a few simple command...
...l="exit"/> </menupopup> </menu> </menubar> </toolbox> adding a menu to our find files example let's add a menu to the find files dialog. we'll just add a few simple commands to a file menu and an edit menu. this is similar to the example above. ...
...And 7 more matches

Using Remote XUL - Archive of obsolete content
desktop applications. the menu element defines a pull-down menu, and the button element defines a pressable button. both menus and buttons take a label attribute whose value is the text to display in the element. source | rendered step 4: menu items menus aren't terribly useful unless they contain selectable items. ...
...s aren't terribly useful unless they contain selectable items. to add items to a menu, we need to first add a menupopup element and then put menuitem elements within it for each item we want to appear on the menu. ...
... need to first add a menupopup element and then put menuitem elements within it for each item we want to appear on the menu. ...
...And 7 more matches

Building Menus With Templates - Archive of obsolete content
te set to menu. this allows for better performance as the entire content of a complex menu does not need to be created until the user needs to use the menu. it is very simple to create a menu using a template. here is an example using an xml source: <button type="menu" datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <menupopup> <menuitem uri="?" label="?name"/> </menupopup> </action> </template> </button> <button label="children" oncommand="alert(this.previoussibling.childnodes.length);"/> in this example, the datasources attribute has been placed on a menu-type button. the query generates a list of the person tags within the datasource and outputs the action body for each one. the uri attribute has not been placed o...
...oncommand="alert(this.previoussibling.childnodes.length);"/> in this example, the datasources attribute has been placed on a menu-type button. the query generates a list of the person tags within the datasource and outputs the action body for each one. the uri attribute has not been placed on the menupopup element which is the direct child of the action element but has instead been placed on the menuitem element. this causes the menupopup to only be created once. the menuitem elements however will be repeated for each result from the query. this makes sense, as we only want one menupopup to be created but multiple menuitem elements. the second button in the example displays an alert with the number of children the template-driven button has. if you press this button before opening the menu, there...
...e entire content will be generated right away. the special feature of menus to not generate content immediately applies only to the menu itself. generating a recursive menu menus are often generated from a template recursively. when creating recursive menus, you will need to use multiple rules, since leaf items will need to be created differently than non-leaf items. leaf items will need to use a menuitem element whereas non-leaf items will need to use a menu element. this will involve at least two rules, although you might use other rules if you had other differences to handle. here is an rdf example: <button label="houses in my neighbourhood" type="menu" datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood" xmlns:rdf="http://www.w3.or...
...And 6 more matches

XUL controls - Archive of obsolete content
e the xul reference. <button> a button that can be pressed by the user. <button label="save" accesskey="s"/> more information about the button element. button reference <button type="menu"> a button that has a drop down menu attached to it. pressing the button opens the menu. <button type="menu" label="view"> <menupopup> <menuitem label="list"/> <menuitem label="details"/> </menupopup> </button> more information about this type of menu button element. button reference related elements: menupopup menuitem <button type="menu-button"> a button that that has a separate arrow button with a menu attached to it. unlike with the 'menu' type, a separate action may be performed w...
...his type of menu button element. button reference related elements: menupopup menuitem <button type="menu-button"> a button that that has a separate arrow button with a menu attached to it. unlike with the 'menu' type, a separate action may be performed when the main part of the button is pressed. <button type="menu-button" label="new"> <menupopup> <menuitem label="new document"/> <menuitem label="new image"/> </menupopup> </button> more information about this type of menu button element. button reference related elements: menupopup menuitem <checkbox> a control that may be turned on and off, typically used to create options which may be enabled or disabled. <checkbox label="show toolbar lab...
...ox> <listitem label="chocolate"/> <listitem label="jelly beans"/> </listbox> more information about the listbox element. listbox reference related elements: listcell listcols listcol listhead listheader listitem <menulist> a menulist (or combobox) is used to create a control with a drop down to select a value. ...
...And 6 more matches

menupopup - Archive of obsolete content
norekeys, left, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, top properties accessibletype, anchornode, popupboxobject, position, state, triggernode methods hidepopup, moveto, openpopup, openpopupatscreen, setconsumerollupevent, showpopup, sizeto examples the following example shows how a menupopup may be attached to a menulist. <menulist> <menupopup> <menuitem label="mozilla" value="http://mozilla.org"/> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net"/> <menuitem label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menulist> the following example shows how a menupopup can be used as a context menu for an element. when the label is right-clicked, the menu will be dis...
... left type: integer overrides the horizontal position of the popup specified by the showpopup method. ...
... left type: integer overrides the horizontal position of the popup specified by the showpopup method. ...
...And 6 more matches

ContextMenus - Archive of obsolete content
load event for example. attaching context menus a context menu may be attached to an element using the context attribute, which may be applied to any xul element. the value of the context attribute should be the id of a context menu within the same document. in the example, a context menu is attached to a grid. <window id="main-window"> <popupset> <menupopup id="ins-del-menu"> <menuitem label="insert"/> <menuitem label="delete"/> </menupopup> </popupset> </window> <grid context="ins-del-menu"> <columns> <column/> <column flex="1"/> </columns> <rows id="rows"> <row align="center"> <label value="name:"/> <textbox/> </row> </rows> </grid> the same context menu can be attached to multiple elements. just set the context attribute on ...
...ox browser applies a single context menu to the browser area which displays web pages. for example, the following will attach a context menu with the id 'contentareacontextmenu' to a browser element: <browser context="contentareacontextmenu"> indicating the default item on some platforms, one of the items in a context menu is marked as being a default operation. ...
...rked as being a default operation. typically, this will cause the menuitem's label to appear in the context menu in bold. what constitutes the default item isn't specified, but is usually the operation carried out when the item was left-clicked or pressed normally, as opposed to context clicked. you can indicate this item, if it applies, using the default attribute. <menupopup id="link-menu"> <menuitem label="open link" default="true"/> <menuitem label="open in new window"/> <menuitem label="properties"/> </menupopup> the default attribute has been set to true on the first menu item ('open link'). on platforms that support it, it will be marked as a default item. on other platforms, the attribute will just be ignored and the menuitem will be displayed normally. naturally, it only makes se...
...And 5 more matches

XUL Overlays
he browser, these elements should be defined in overlay files. the installation of a media plug-in, for example, may add new icons and menu items to the interface: in the navigatoroverlay.xul file or in a separate navigatorsspoverlay.xul file (where navigator.xul defines the basic ui for the navigator package), these new plug-in elements would be defined as a collection of elements or subtrees: <menuitem name="super stream player"/> <menupopup name="ss favorites"> <menuitem name="wave" src="mavericks.ssp"/> <menuitem name="soccer" src="brazil_soccer.ssp"/> </menupopup> <titledbutton id="ssp" crop="right" flex="1" value="&ssbutton.label;" onclick="firessp()"/> overlays and id attributes bases and overlays are merged when they share the same id attribute. thus, given the following...
...item name="wave" src="mavericks.ssp"/> <menuitem name="soccer" src="brazil_soccer.ssp"/> </menupopup> <titledbutton id="ssp" crop="right" flex="1" value="&ssbutton.label;" onclick="firessp()"/> overlays and id attributes bases and overlays are merged when they share the same id attribute. thus, given the following base: ... <menu id="file-menu"> <menupopup id="menu_filepopup"> <menuitem name="new"/> <menuitem name="open"/> <menuitem name="save"/> <menuitem name="close"/> </menupopup> </menu> ... and given the following overlay: <?xml version="1.0"?> <overlay id="singleitemex" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="menu_filepopup"> <menu id="file_menu"> <menuite...
...ay: <?xml version="1.0"?> <overlay id="singleitemex" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="menu_filepopup"> <menu id="file_menu"> <menuitem name="super stream player"/> </menu> </menupopup> </overlay> the result will be: ... <menu id="file-menu"> <menupopup id="menu_filepopup"> <menuitem name="new"/> <menuitem name="open"/> <menuitem name="save"/> <menuitem name="close"/> <menuitem name="super stream player"/> </menupopup> </menu> ... if you are developing a mozilla extension, note that the id namespace is shared by all the extensions. so, in order to avoid unpredicted behaviors you will probably benefit from using a unique prefix for the ids of the xul elements of your ...
...And 5 more matches

Index - Archive of obsolete content
summary! 933 maxrows xul attributes, xul reference no summary! 934 maxwidth xul attributes, xul reference no summary! 935 member xul attributes, xul reference no summary! 936 menu xul attributes, xul reference no summary! 937 menuactive xul attributes, xul reference no summary! 938 menuitem.key xul attributes, xul reference no summary! 939 menuitem.name xul attributes, xul reference no summary! 940 menuitem.type xul attributes, xul reference more information on adding checkmarks to menus in the xul tutorial 941 min xul attributes, xul reference no summary! 942 minheight xul attributes, xul refere...
...use to move the panel around on the screen. a floating panel can be created using the panel element with at least two additional attributes as in the following example: 1332 menubuttons xul, xul popup guide menus may be attached to buttons in several ways. both the button and the toolbar button elements support two special types used for creating menu buttons. 1333 menuitems xul, xul popup guide the menuitem element has a number of features beyond just being a label for a menu command. 1334 menumodification xul, xul popup guide menus have a number of methods which may be used to add and remove items. 1335 menus xul, xul popup guide a menu provides a list of commands that the user can carry out. 1336 move...
... 1480 maxrows xul properties, xul reference no summary! 1481 maxwidth xul properties, xul reference no summary! 1482 menu xul properties, xul reference no summary! 1483 menu.open xul properties, xul reference no summary! 1484 menuboxobject xul properties, xul reference no summary! 1485 menuitem.control xul properties, xul reference no summary! 1486 menulist.image xul properties, xul reference no summary! 1487 menulist.inputfield xul properties, xul reference no summary! 1488 menupopup xul properties, xul reference no summary! 1490 min xul properties, xul reference no summary! 1491 mi...
...And 4 more matches

XUL Events - Archive of obsolete content
state of a <checkbox> element has changed.closethe close event is executed when a request has been made to close the window when the user presses the close button.commandthe command event is executed when an element is activated.commandupdatethe commandupdate event is executed when a command update occurs on a <commandset>. ...
... element has changed.closethe close event is executed when a request has been made to close the window when the user presses the close button.commandthe command event is executed when an element is activated.commandupdatethe commandupdate event is executed when a command update occurs on a <commandset>. ...
... when a request has been made to close the window when the user presses the close button.commandthe command event is executed when an element is activated.commandupdatethe commandupdate event is executed when a command update occurs on a <commandset>. ...
...And 4 more matches

Index - Archive of obsolete content
summary! 186 maxrows xul attributes, xul reference no summary! 187 maxwidth xul attributes, xul reference no summary! 188 member xul attributes, xul reference no summary! 189 menu xul attributes, xul reference no summary! 190 menuactive xul attributes, xul reference no summary! 191 menuitem.key xul attributes, xul reference no summary! 192 menuitem.name xul attributes, xul reference no summary! 193 menuitem.type xul attributes, xul reference more information on adding checkmarks to menus in the xul tutorial 194 min xul attributes, xul reference no summary! 195 minheight xul attributes, xul refere...
...y use to move the panel around on the screen. a floating panel can be created using the panel element with at least two additional attributes as in the following example: 601 menubuttons xul, xul popup guide menus may be attached to buttons in several ways. both the button and the toolbar button elements support two special types used for creating menu buttons. 602 menuitems xul, xul popup guide the menuitem element has a number of features beyond just being a label for a menu command. 603 menumodification xul, xul popup guide menus have a number of methods which may be used to add and remove items. 604 menus xul, xul popup guide a menu provides a list of commands that the user can carry out. 605 moveres...
...ry! 749 maxrows xul properties, xul reference no summary! 750 maxwidth xul properties, xul reference no summary! 751 menu xul properties, xul reference no summary! 752 menu.open xul properties, xul reference no summary! 753 menuboxobject xul properties, xul reference no summary! 754 menuitem.control xul properties, xul reference no summary! 755 menulist.image xul properties, xul reference no summary! 756 menulist.inputfield xul properties, xul reference no summary! 757 menupopup xul properties, xul reference no summary! 759 min xul properties, xul reference no summary! 760 minheig...
...And 4 more matches

Extensions - Archive of obsolete content
adding a new menu the main menu bar in firefox has the id 'main-menubar'. to add a new menu onto the main application menubar, you will need to overlay this menubar. for instance: <menubar id="main-menubar"> <menu label="search" insertbefore="tools-menu"> <menupopup> <menuitem label="web"/> <menuitem label="mail"/> </menupopup> </menu> </menubar> this menu is added to the main menu bar just before the tools menu. the insertbefore attribute is set to 'tools-menu' to ensure that the new menu is added at the right place. note that the menu will not appear until it has a <menupopup>. adding a new menuitem you might wish to add a new item to one of the menus. this can be done by overlaying the popup to append the item to. for a list of the ids of the menus for fire...
... right place. note that the menu will not appear until it has a <menupopup>. adding a new menuitem you might wish to add a new item to one of the menus. this can be done by overlaying the popup to append the item to. for a list of the ids of the menus for firefox, see firefox menus. for example, to add an item to the end of the tools menu, use the following: <menupopup id="menu_toolspopup"> <menuitem label="thesaurus"/> </menupopup> note that other extensions may be adding their own items into the same menus. because of this, the new item might not appear at the end of the menu but before a menuitem added by another extension, depending on the order in which the overlays are applied. ...
... modifying the context menu an extension may wish to modify the context menu associated with the browser area. normally, this menu displays menu items specific to what was context clicked or focused. ...
...And 4 more matches

Adding more elements - Archive of obsolete content
« previousnext » we will conclude the discussion of boxes by adding some boxes to the find files dialog. adding elements to our find files example we will add some more elements to the find files dialog now. first, we will add the capability to search for other information such as the file size and date. ...
...« previousnext » we will conclude the discussion of boxes by adding some boxes to the find files dialog. adding elements to our find files example we will add some more elements to the find files dialog now. first, we will add the capability to search for other information such as the file size and date. ...
...nclude the discussion of boxes by adding some boxes to the find files dialog. adding elements to our find files example we will add some more elements to the find files dialog now. first, we will add the capability to search for other information such as the file size and date. <hbox> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> two drop down boxes have been added to the dialog. a spacer has be...
...And 4 more matches

Widget Cheatsheet - Archive of obsolete content
see the periodic table of xul for more examples. ...
... see the periodic table of xul for more examples. ...
... see the periodic table of xul for more examples. ...
...And 4 more matches

XUL Event Propagation - Archive of obsolete content
f="chrome://global/skin/" type="text/css"?> <window id="events" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" oncommand="alert('window handler')"> <vbox> <vbox style="background-color: lightgrey;" oncommand="alert('box handler')"> <menu class="menu" label="file" oncommand="alert('menu handler')"> <menupopup> <menuitem oncommand="alert('new item alert')" label="new" /> <menuitem label="open" /> <menuitem oncommand="alert('close handler')" label="close" /> </menupopup> </menu> <menu class="menu" label="edit"> <menupopup> <menuitem oncommand="alert('edit source handler')" label="edit source" /> <menuitem label="reload" /> <menuitem label="view source" /> <...
...ndler')" label="close" /> </menupopup> </menu> <menu class="menu" label="edit"> <menupopup> <menuitem oncommand="alert('edit source handler')" label="edit source" /> <menuitem label="reload" /> <menuitem label="view source" /> </menupopup> </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. eve...
...nt 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 from the example above into a separate file, you can see that the effect of these event handlers is to display as many as four different alert dialogs as the event bubbles up the hierarchy. for example, when you click the new menuitem from the file menu, the event handlers display alerts for "new item alert", "menu handler", "box handler", and "window handler." any or all of these event handler locations might be useful in your interface development. (see it happen.) for an event to be useful somewhere higher up, however, it is very often necessary to determine which element below the handler actually raised the event. for ex...
...And 4 more matches

menu - Archive of obsolete content
roperties accessibletype, accesskey, command, control, crop, disabled, image, itemcount, label, labelelement, menupopup, open, parentcontainer, selected, tabindex, value methods appenditem, getindexofitem, getitematindex, insertitemat, removeitemat style classes menu-iconic example <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menuitem label="new"/> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> <menuitem label="undo"/> <menuitem label="redo"/> </menupopup> </menu> </menubar> attributes acceltext type: string text that ap...
... the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) 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; } 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 ...
...suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. 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. menuactive type: boolean this attribute is set o...
...And 4 more matches

Using the group role - Accessibility
se" role="treeitem"> <span tabindex="-1">siamese</span> </div> <div id="tabby" role="treeitem"> <span tabindex="-1">tabby</span> </div> </div> </div> </div> example 2: using the group role with a html drop-down menu the snippet below shows how the group role is added directly into the html source code. ...
...tabindex="-1">siamese</span> </div> <div id="tabby" role="treeitem"> <span tabindex="-1">tabby</span> </div> </div> </div> </div> example 2: using the group role with a html drop-down menu the snippet below shows how the group role is added directly into the html source code. ...
...div> <div id="tabby" role="treeitem"> <span tabindex="-1">tabby</span> </div> </div> </div> </div> example 2: using the group role with a html drop-down menu the snippet below shows how the group role is added directly into the html source code. ...
...And 4 more matches

<menu> - HTML: Hypertext Markup Language
permitted content if the element is in the list menu state: flow content, or alternatively, zero or more occurrences of <li>, <script>, and <template>. (list menu is the default state, unless the parent element is a <menu> in the context menu state.) if the element is in the context menu state: zero or more occurrences, in any order, of <menu> (context menu state only), <menuitem>, <hr>, <script>, and <template>. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts flow content. implicit aria role list permitted aria roles directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar or tree dom interface htmlmenuelement ...
... usage notes the <menu> and <ul> elements both represent an unordered list of items. the key difference is that <ul> primarily contains items for display, whilst <menu> is intended for interactive items, to act on. an html menu can be used to create context menus (typically activated by right-clicking another element) or toolbars. context menus consist of a <menu> element which contains <menuitem> elements for each selectable option in the menu, <menu> elements for submenus within the menu, and <hr> elements for separator lines to break up the menu's content into sections. context menus are then attached to the element they're activated from using either the associated element's contextmenu attribute or, for button-activated menus attached to <button> elements, the menu attribute. toolba...
...n html4, but reintroduced in html5.1 and the html living standard. this document describes the current firefox implementation. type 'list' is likely to change to 'toolbar' according to html5.1. examples context menu html <!-- a <div> element with a context menu --> <div contextmenu="popup-menu"> right-click to see the adjusted context menu </div> <menu type="context" id="popup-menu"> <menuitem>action</menuitem> <menuitem>another action</menuitem> <hr/> <menuitem>separated action</menuitem> </menu> css div { width: 300px; height: 80px; background-color: lightgreen; } result menu button menu buttons haven't been implemented in any known browsers yet. the type attribute on the <menu> element is now obsolete. <menuitem> element is obsolete. html <!-- a button, w...
...And 4 more matches

MenuButtons - Archive of obsolete content
ssing the button alone should just 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'. ...
...tton 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 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 bu...
...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> </toolbarbutton> the 'menu-button' button the 'menu-button' type of button is used when you want to attach a menu to a button but want to have a default action carried out when the button is pressed by itself. this is accomplished by dividing the button into two parts, one with the label and image to c...
...And 3 more matches

MenuModification - Archive of obsolete content
modifying a menu menus have a number of methods which may be used to add and remove items. adding items to a menu the appenditem method may be used to append a new item to the end of the popup associated with a menu. this method will create a new menuitem element and insert it into the popup. this method may only be used with the menu element. ...
...tion addtomenu() { var menu = document.getelementbyid("edit-menu"); menu.appenditem("insert", "insert"); } </script> <menu id="edit-menu"/> <button label="add" oncommand="addtomenu()"/> in this example, the addtomenu function is called when the button is pressed. this function appends a new item to the menu's popup with the label insert. ...
..."insert"); } </script> <menu id="edit-menu"/> <button label="add" oncommand="addtomenu()"/> in this example, the addtomenu function is called when the button is pressed. this function appends a new item to the menu's popup with the label insert. the first argument to appenditem is the label of the menuitem, and the second argument is a value to associate with the item. this value be set as the menuitem's value attribute and can be used for whatever purpose is desired. note how in this example, the menu does not have a child menupopup. the appenditem method will create a menupopup element if it doesn't already exist. if the menu already has a menupopup, the new menuitem will be appended to this existing one. while the appenditem method always adds the new item to the end of the menu, the insert...
...And 3 more matches

Static Content - Archive of obsolete content
« previousnext » creating a menuitem in the filter list to show all items is fairly easy. this item doesn't need to be generated from the datasource. instead it will be what is called static content in a template. the static content is any content that is a sibling of the template element. this content is displayed as is without affecting the generated content from the template. ...
... static content in a template. the static content is any content that is a sibling of the template element. this content is displayed as is without affecting the generated content from the template. ...
...the content will be displayed just like it would be as if the template wasn't present. that is, before the template is examined, the menu...
...And 3 more matches

Keyboard Shortcuts - Archive of obsolete content
s 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> </menubar> you can also use the accesskey attribute on buttons. when the key is pressed in this case, the button is selected. 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 wi...
...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 attribute on the menuitem. ...
...you can use this for additional keys as well to define keyboard shortcuts for any number of menu items. ...
...And 3 more matches

Localization - Archive of obsolete content
anese version: <description value="検索"/> you would declare an entity for each label or string of text that you use in your interface. you should not have any directly displayed text in the xul file at all. in addition to using entities for text labels, you should use them for any value that could be different in a different language. access keys and keyboard shortcuts for example. xul <menuitem label="&undo.label;" accesskey="&undo.key;"/> dtd <!entity undo.label "undo"> <!entity undo.key "u"> the example above uses two entities, one for the label on the undo menu item and the second for the access key. changing the find files example let's take a look at how we would put all of this together by modifying the find files dialog so that it uses a dtd file for all of its text str...
...findfile.css" type="text/css"?> <!doctype window system "chrome://findfile/locale/findfile.dtd"> <window id="findfile-window" title="&findwindow.title;" persist="screenx screeny width height" orient="horizontal" onload="initsearchlist()" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="findfile.js"/> <popupset> <menupopup id="editpopup"> <menuitem label="&cutcmd.label;" accesskey="&cutcmd.accesskey;"/> <menuitem label="&copycmd.label;" accesskey="&copycmd.accesskey;"/> <menuitem label="&pastecmd.label;" accesskey="&pastecmd.accesskey;" disabled="true"/> </menupopup> </popupset> <keyset> <key id="cut_cmd" modifiers="accel" key="&cutcmd.commandkey;"/> <key id="copy_cmd" modifiers="accel" key="&copycmd.commandkey;"/> <k...
...odifiers="accel" key="&copycmd.commandkey;"/> <key id="paste_cmd" modifiers="accel" key="&pastecmd.commandkey;"/> <key id="close_cmd" keycode="vk_escape" oncommand="window.close();"/> </keyset> <vbox flex="1"> <toolbox> <menubar id="findfiles-menubar"> <menu id="file-menu" label="&filemenu.label;" accesskey="&filemenu.accesskey;"> <menupopup id="file-popup"> <menuitem label="&opencmd.label;" accesskey="&opencmd.accesskey;"/> <menuitem label="&savecmd.label;" accesskey="&savecmd.accesskey;"/> <menuseparator/> <menuitem label="&closecmd.label;" accesskey="&closecmd.accesskey;" key="close_cmd" oncommand="window.close();"/> </menupopup> </menu> <menu id="edit-menu" label="&...
...And 3 more matches

Popup Menus - Archive of obsolete content
pup is described using the menupopup element. it has no special attributes and is a type of box. when invoked, it will display a window containing whatever you put inside the menupopup. however, you should always put an id attribute on the menupopup as it is used to associate the popup with an element. we'll see what this means soon. first, an example: <popupset> <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> as can be seen here, a simple popup menu with three commands on it has been created. the menupopup element surrounds the three menuitem elements. you will also notice that the id has been set on the menupopup element itself. the popupset element surrounds the entire popup menu declaration. this ...
...must put the id on the popup. that way it's easy to have multiple menupopups in one file. in the example above, we want to make the popup a context menu. that means that we need to use the context attribute and add it to the element which we want to have the popup associated with. the sample below shows how we might do this: example 1 : source view <popupset> <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> <box context="clipmenu"> <label value="context click for menu"/> </box> here, the menupopup has been associated with a box. whenever you context-click (right-click) anywhere inside the box, the popup menu will appear. the popup will also appear even if you click on the children of the box, so ...
...up element, you can specify precisely where the popup appears. you cannot specify an exact pixel position. the position attribute can be used with all three popup types, although you probably would not change the value for tooltips. ...
...And 3 more matches

Simple Menu Bars - Archive of obsolete content
its menus, which are explained briefly here and in detail afterwards: menubar the container for the row of menus. menu despite the name, this is actually only the title of the menu on the menubar. this element can be placed on a menubar or can be placed separately. menupopup the popup box that appears when you click on the menu title. this box contains the list of menu commands. menuitem an individual command on a menu. this would be placed in a menupopup. menuseparator a separator bar on a menu. this would be placed in a menupopup. you can customize the menus on the menubar to have whatever you want on them on all platforms except the macintosh. this is because the macintosh has its own special menu along the top of the screen controlled by the system. although you can ...
...een controlled by the system. although you can create custom menus, any special style rules or non-menu elements that you place on a menu may not be applied. you should keep this is mind when creating menus. ...
...though you can create custom menus, any special style rules or non-menu elements that you place on a menu may not be applied. you should keep this is mind when creating menus. example of a simple menu bar example 1 : source view <toolbox flex="1"> <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menuitem label="new"/> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> <menuitem label="undo"/> <menuitem label="redo"/> </menupopup> </menu> </menubar> </toolbox> here, a simple menu bar is created using the menubar element. it w...
...And 3 more matches

menuseparator - Archive of obsolete content
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, it overrides an assigned key set in the key attribute. this attribute does not...
... the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) 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; } 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...
...suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no t...
...And 3 more matches

tooltip - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) 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; } default type: boolean if true, the tooltip is used as the default popup for displaying tooltips in the window. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable men...
..., menupopup > menu { max-width: none; } default type: boolean if true, the tooltip is used as the default popup for displaying tooltips in the window. 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. noautohide type: boolean if this attribute is set to false or omitted, the tooltip will automatically disappear after a few seconds. if this attribute is set to true, this will not happen and the tooltip will only hide when the user moves the mouse to another element. onpopuphidden type: script code this event is sent to a popup after it has been hidden. this event may also be...
...only hide when the user moves the mouse to another element. onpopuphidden type: script code this event is sent to a popup after it has been hidden. this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden. ...
...And 3 more matches

Gecko info for Windows accessibility vendors
indicates that the absence of state_checked should be spoken as // "unchecked", and that event_state_change will be fired in the event that the // checkbox is toggled. const unsigned long state_required = state_alert_low; // used on form controls // to indicate that this field must be filled out to submit the form const unsigned long state_invalid = state_alert_high;...
...role_list with state_readonly and role_listitem are used to expose the list structure. this makes it important to check the state_readonly flag when encountering a role_list, because the html list form element also uses role_list, but without state_readonly set. positional descriptions are supported the accdescription field is overriden for the following roles: role_listitem, role_menuitem, role_radiobutton, role_pagetab and role_outlineitem for everything other than outline item, the positional description is in the form "n of m" where n is an integer indicating the position within other similar objects in a group, and m represents the number of objects in that group. for example, "3 of 5" indicates the 3rd object out of 5. for outline item, more information is provided, i...
...for example, "open\tctrl+o" role_tooltip xul: <tooltip> or tooltiptext attribute role_application default role of ...
...And 3 more matches

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
/div> firefox the element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. normally it would contain a label and a checkbox. ...
...box, which may include a prelighting background effect under certain platforms. normally it would contain a label and a checkbox. ...
...g background effect under certain platforms. normally it would contain a label and a checkbox. ...
...And 3 more matches

contextmenu - HTML: Hypertext Markup Language
ontextmenu global attribute is the id of a <menu> to use as the contextual menu for this element. a context menu is a menu that appears upon user interaction, such as a right-click. html5 now allows us to customize this menu. here are some implementation examples, including nested menus. example html <body contextmenu="share"> <menu type="context" id="share"> <menu label="share"> <menuitem label="twitter" onclick="shareviatwitter()"></menuitem> <menuitem label="facebook" onclick="shareviafacebook()"></menuitem> </menu> </menu> <ol> <li> anywhere in the example you can share the page on twitter and facebook using the share menu from your context menu. </li> <li contextmenu="changefont" id="fontsizing"> on this specific list element, you ca...
...<li> anywhere in the example you can share the page on twitter and facebook using the share menu from your context menu. ...
...page on twitter and facebook using the share menu from your context menu. ...
...And 3 more matches

Using third-party modules (jpm) - Archive of obsolete content
includes a command-line tool that you use to initialize, run, test, and package add-ons. the current tool is called jpm, and is based on node.js. it replaces the old cfx tool. you can use jpm from firefox 38 onwards. this article describes how you can use third-party modules with jpm. to follow this tutorial you'll need to have installed jpm and learned the basic jpm commands. to install menuitem you'll need to have git command. if you have error related to git, check you have latest git command installed. the add-on sdk is extensible by design: you can use the modules that ship inside firefox, but you can also create your own modules and make them available for anyone else to use. before the jpm tool was available, there wasn't any package manager for these community-developed modules,...
...us where to find community-developed modules, or how to install and update them. with jpm, we use npm as the package manager for sdk modules that don't ship inside firefox. module developers can publish sdk modules to npm, and add-on developers can install them from npm and build them into their add-ons. this article explains how to use npm-hosted third-party sdk modules with jpm. we'll use the menuitem package to add a new menu item to firefox. summary first, while in the root of your add-on, install the package that contains the modules you want to use: npm install menuitem --save now you'll see a new directory in your add-on root called "node_modules" that contains a directory "menuitem". in your add-on code, you can require() modules by passing a path to the module starting from, but not...
...to firefox. summary first, while in the root of your add-on, install the package that contains the modules you want to use: npm install menuitem --save now you'll see a new directory in your add-on root called "node_modules" that contains a directory "menuitem". in your add-on code, you can require() modules by passing a path to the module starting from, but not including "node_modules": var menuitems = require("menuitem"); details create a new directory called, for example, "my-menuitem", navigate to it, type "jpm init" and accept all the defaults: mkdir my-menuitem cd my-menuitem jpm init install the menuitem package from npm: npm install menuitem --save this will install the package in the current directory, under a directory called "node_modules". the --save argument instructs npm ...
...And 2 more matches

Adding preferences to an extension - Archive of obsolete content
context="stockmenu" onclick="stockwatcher.refreshinformation()" /> </statusbar> now when the user clicks on the status bar panel, the stock information refreshes, but when they right-click on it, a context menu pops up. defining the menu is also easy. ...
...panel, the stock information refreshes, but when they right-click on it, a context menu pops up. defining the menu is also easy. ...
... menu pops up. defining the menu is also easy. ...
...And 2 more matches

A XUL Bestiary - Archive of obsolete content
hrome url, which appears in place of the http url in pointers like the following global skin processing instruction: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> specifies a chrome to be loaded by the gecko rendering engine. in the example above, the chrome is simply a skin file to be loaded into the xul file, but the chrome can also be used to load whole chromes, as when a <menuitem> in one window brings up a new chrome: <menuitem value="mozilla help" oncommand="window.opendialog('chrome://help/content/help.xul', '_blank', 'chrome,all,dialog=no')" /> in this example, the chrome url is being used to point to a chrome within the package hierarchy of the mozilla application. a help chrome defined in mozilla/bi...
...mic html were not, the term "dom" is used as a synonym for or instead of terms like "dynamic html" or "dhtml." the aom stands for the application object model, and is an extension of the dom up into the interface defined in xul. just as html is reflected in the dom as nodes like link, layer, and img, xul is reflected in the application object model in the hierarchy of xul widgets: browser, menu, menuitem, and so on. the dom and the aom form a kind of continuum, the whole of which is manipulable from the standards upon which xul is based. near synonyms for xul there is much confusion about the words that begin with "x" in the mozilla open source project. the mozilla xparchitecture section below describes xpcom, xpidl, and xpconnect, three somewhat related technologies for getting access to appli...
...toolkit, and xpfe are to one another what html, the actual html tags, and an html web page are to one another, respectively. xul parts people sometimes get confused about the syntax for describing the parts of a widget. for a widget like the menu that appears in the following example, menu is the element and both value and the id are attributes. <menu id="file" label="file"> <menupopup> <menuitem label="new" oncommand="createnewdoc()" /> <menuitem label="open" oncommand="opendoc()" /> <menuitem label="close" oncommand="closedoc()" /> </menupopup> </menu> element names the item, the widget, while attributes describes features of that element, such as its name, its style, and so on. in object-oriented parlance, the element is analogous to the object itself while the attribute is...
...And 2 more matches

onpopuphidden - Archive of obsolete content
« xul reference home onpopuphidden type: script code this event is sent to a popup after it has been hidden. this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden. ...
... « xul reference home onpopuphidden type: script code this event is sent to a popup after it has been hidden. this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden. ...
...n. this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden. ...
...And 2 more matches

PopupEvents - Archive of obsolete content
can prevent a menu or popup from appearing by calling the preventdefault method of the event from within a popupshowing listener. the default operation of the popupshowing event is to continue showing the popup. the preventdefault method will stop this from happening and the popup will not be opened. <menu label="edit"> <menupopup onpopupshowing="if (gdisallowed) event.preventdefault();"> <menuitem label="undo"/> <menuitem label="redo"/> </menupopup> </menu> in this example, a global variable gdisallowed is checked and the preventdefault method is called. if you want to prevent a context menu from opening it is better to call preventdefault with a handler for the contextmenu event instead, to avoid the extra steps necessary to fire the popupshowing event if it isn't needed. when usin...
...submenus, make sure to check in the popupshowing event that the event corresponds to the right popup. this is because the popup events bubble so the parent menu will receieve a popupshowing event whenever it opens, or any submenus open. for example: <menu label="file"> <menupopup onpopupshowing="if (event.target == this) adjustfilemenu(this);"> <menu label="open"> <menupopup> <menuitem label="file..."/> <menuitem label="page"/> </menupopup> </menu> </menupopup> </menu> the target of the event is examined to ensure that the event is for the desired menupopup. otherwise, the adjustfilemenu function would be called whenever the outer menupopup is opened and when the inner menupopup is opened. the bubbling of events applies to all popup events. the popupshown e...
...within this function, a popupshown event listener is attached to the 'file' menu using the addeventlistener method. this will cause the filemenuopened function to be called whe...
...And 2 more matches

Adding Style Sheets - Archive of obsolete content
files dialog so that its style comes from a separate style file. first, the modifed lines of findfile.xul: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="findfile.css" type="text/css"?> ... ...
...s from a separate style file. first, the modifed lines of findfile.xul: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="findfile.css" type="text/css"?> ... ...
..., the modifed lines of findfile.xul: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="findfile.css" type="text/css"?> ... ...
...And 2 more matches

Accessibility API cross-reference
ntent of a document, distinct from complementary info, headers, footers, navigation, asides etc. main <main> a type of live region where non-essential information changes frequently. ...
...entary info, headers, footers, navigation, asides etc. main <main> a type of live region where non-essential information changes frequently. ...
...avigation, asides etc. main <main> a type of live region where non-essential information changes frequently. marquee the main menu bar below the app's title bar menubar menu_bar menu_bar menubar a menu item menuitem menu_item menu_item menuitem a menuitem with a checkable state whose possible values are true, false, or mixed. ...
...And 2 more matches

Tabboxes - Archive of obsolete content
label="options"/> </tabs> <tabpanels> <tabpanel id="searchpanel" orient="vertical"> <description> enter your search criteria below and select the find button to begin the search. ...
...bpanels> <tabpanel id="searchpanel" orient="vertical"> <description> enter your search criteria below and select the find button to begin the search. ...
...el" orient="vertical"> <description> enter your search criteria below and select the find button to begin the search. ...
...eight: 10px"/> <groupbox orient="horizontal"> <caption label="search criteria"/> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="height: 10px"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </groupbox> </tabpanel> <tabpanel id="optionspanel" orient="vertical"> <checkbox id="casecheck" label="case sensitive search"/> <checkbox id="wordscheck" label="match entire filename"/> ...

Updating Commands - Archive of obsolete content
anges. 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. ...
...s 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. ...
...ges. 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. ...
... 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 » ...

listitem - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) 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 sele...
...suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no tex...
... use of the attribute, as it may need to update additional state. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a prefwindow. more information is available in the preferences system article. selected type: boolean indicates whether the element is selected...
... of the disabled attribute. image type: image url gets and sets the value of the image attribute. label type: string gets and sets the value of the label 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. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherite...

menubar - Archive of obsolete content
s inside the menubar will be ignored. to look native (at least on windows), the menubar element needs to be placed inside a toolbox element. more information is available in the xul tutorial. ...
...gnored. to look native (at least on windows), the menubar element needs to be placed inside a toolbox element. more information is available in the xul tutorial. ...
...he menubar element needs to be placed inside a toolbox element. more information is available in the xul tutorial. attributes grippyhidden, statusbar properties accessibletype, statusbar examples <menubar id="sample-menubar"> <menu id="action-menu" label="action"> <menupopup id="action-popup"> <menuitem label="new"/> <menuitem label="save" disabled="true"/> <menuitem label="close"/> <menuseparator/> <menuitem label="quit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> <menuitem label="undo"/> <menuitem label="redo"/> </menupopup> </menu> </menubar> attributes grippyhidden seamonkey only type: boolean when set to true, the grippy will be hidden. when set to false, the d...
... insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements menu, menuitem, menulist, menupopup, menuseparator interfaces nsiaccessibleprovider ...

panel - Archive of obsolete content
hough it will be cleared if the focus is within the panel. onpopuphidden type: script code this event is sent to a popup after it has been hidden. this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden. ...
... focus is within the panel. onpopuphidden type: script code this event is sent to a popup after it has been hidden. this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden. ...
...n. this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden. ...
...pup is still open, but when sub-menus contained within this popup are hidden. example: <menupopup id="top" onpopuphidden="console.log('the onpopuphidden method of id=top was called.');"> <menuitem label="item 1"/> <menuitem label="item 2"/> <menu id="submenu1" label="submenu 1"> <menupopup id="submenu1-popup"> <menuitem label="submenu1 item 1"/> <menuitem label="submenu1 item 2"/> </menupopup> </menu> <menu id="submenu2" label="submenu 1"> <menupopup id="submenu2-popup"> <menuitem label="submenu2 item 1"/> <menuitem label="submenu2 item 2"/> </menupopup> </menu> <menupopup/> onpopuphiding type: script code this event is sent to a popup when it is about to be hidden. onpo...

radio - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) 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; } 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...
...suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. focused type: boolean this attribute is true if the element is focused. group type: string group name buttons with type="radio" and the same value for their group attribute are put into the same group. only one button from each group can be checked at a time. if the user selects one th...
...r selects one the buttons, the others in the group are unchecked. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text 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 ta...
...d sets the value of the image attribute. label type: string gets and sets the value of the label attribute. radiogroup type: radiogroup element equivalent to the control property. 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. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inheri...

tab - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) 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; } 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...
...suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. fadein type: boolean this attribute is set to true if the tab is fading in or out. this typically means that the tab is in the process of appearing or disappearing. first-tab type: boolean this attribute will be set to true for the first tab. this attribute should not be set manually, but...
... useful in a theme if the first tab should be styled differently. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. last-tab type: boolean this attribute will be set to true for the last tab. this attribute should not be set manually, but is useful in a theme if the last tab should be styled differently. linkedpanel type: id the id of the linked tabpanel element that will be dis...
...mage attribute. label type: string gets and sets the value of the label attribute. linkedpanel type: id of a tabpanel element gets and sets the value of the linkedpanel 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. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inheri...

toolbarbutton - Archive of obsolete content
accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <toolbar id="test-toolbar"> <toolbarbutton accesskey="p" label="plain"/> <toolbarbutton accesskey="c" label="checkbox" type="checkbox"/> <toolbarbutton accesskey="b" label="menu-button" type="menu-button"> <menupopup> <menuitem label="menu item 1"/> <menuitem label="menu item 2"/> </menupopup> </toolbarbutton> <toolbarbutton accesskey="m" label="menu" type="menu"> <menupopup> <menuitem label="menu item 1"/> <menuitem label="menu item 2"/> </menupopup> </toolbarbutton> </toolbar> <toolbar id="radio-toolbar"> <toolbarbutton accesskey="1" label="radio 1" type="radio" group="radiogroup"...
... the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) 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; } dir type: one of the values below the direction in which the child elements of the element are placed. normal for scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical ...
...suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. dlgtype type: one of the values below the dialog type of the button, used only when the button is in a dialog box. you can use this feature to replace the standard dialog box buttons with custom buttons, yet the dialog event methods will still function. for example, if the dlgtype is set to accep...
...ser selects one the buttons, the others in the group are unchecked. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. oncommand type: script code this event handler is called when the command is activated. this occurs when a user selects a menu item or presses a keyboard shortcut attached to the command. open type: boolean for the menu type buttons, the open attribute is set to tr...

toolbaritem - Archive of obsolete content
ing you're placing in the toolbar to be customized then it doesn't need to be in a toolbaritem 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. ...
...ar to be customized then it doesn't need to be in a toolbaritem 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. ...
...n't need to be in a toolbaritem 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. ...
...lement 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. ...

Windows and menus in XULRunner - Archive of obsolete content
-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?> <!doctype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> <toolbox> <menubar id="menubar"> <menu id="file-menu" label="&file;"> <menupopup id="file-popup"> <menuitem label="&file.new;" oncommand="dofilenew();"/> <menuitem label="&file.open;" oncommand="dofileopen();"/> <menuitem label="&file.save;" oncommand="dofilesave();"/> <menuseparator/> <menuitem label="&file.exit;" oncommand="dofileexit();"/> </menupopup> </menu> <menu id="edit-menu" label="&edit;"> <menupopup id="edit-popup"> ...
...</window> ...
...l="&file.open;" oncommand="dofileopen();"/> <menuitem label="&file.save;" oncommand="dofilesave();"/> <menuseparator/> <menuitem label="&file.exit;" oncommand="dofileexit();"/> </menupopup> </menu> <menu id="edit-menu" label="&edit;"> <menupopup id="edit-popup"> <menuitem label="&edit.undo;" oncommand="doeditundo();"/> <menuitem label="&edit.redo;" oncommand="doeditredo();"/> </menupopup> </menu> </menubar> <toolbar id="main-toolbar"> <toolbarbutton id="open" label="&file.open;" oncommand="dofileopen();"/> <toolbarbutton id="save" label="&file.save;" oncommand="dofilesave();"/> </toolbar> </toolbox> ... </window> notice that i used entity-references for the menu and toolbar label...
...e main.js file. xul has a way to centralize commands and event handlers for menus and toolbars that do the same thing, like open and save in the above example. you can add a <commandset> and <command> elements like this: <commandset> <command id="cmd_open" label="&file.open;" oncommand="dofileopen();"/> <command id="cmd_save" label="&file.save;" oncommand="dofilesave();"/> </commandset> ... <menuitem command="cmd_open"/> <menuitem command="cmd_save"/> ... <toolbarbutton id="open" command="cmd_open"/> <toolbarbutton id="save" command="cmd_save"/> ... we can add images to the toolbar buttons through the css file. we could hard-code the images in the xul file itself, but css is a better practice. here’s the css file: /* global skin --------------------------------------------------- */ @im...

DOM Inspector internals - Firefox Developer Tools
there are three main facets to dom inspector. the one you are likely to be most familiar with is its inspector.xul-based primary ui. this is the two-pane inspector that appears when ctrl+shift+i (or cmd+shift+i) is pressed from one of the applications for which dom inspector has explicit support (i.e., menuitems placed via overlay). besides the dom inspector's primary ui, there are a couple other top-level inspectors which differ slightly (the object inspector and dom inspector sidebar used in seamonkey). initially, we will begin by focusing on inspector.xul and its entry point, and then expand our focus later to explain how these other inspectors differ. dom inspector from a high-level perspective the dom inspector primary ui consists of some toolbars and a panelset. the panelset con...
....xul this overlay defines most of the static structure of the menus in the menubar, with some exceptions. for obvious reasons, the contents of dynamic menus are not defined here. the dynamic menus include the inspect menus' ("inspect content document" and "inspect chrome document") popups from the file menu, and the "document viewer" and "object viewer" menus from the view menu. the preference menuitems in the view menu that affect only the dom nodes viewer ("blink selected element", et cetera) are added by that viewer's popup overlay (resources/content/viewers/dom/popupoverlay.xul). the same is true for the find menuitems and the "select element by click" menuitem in the edit menu, since no other viewers besides the dom nodes viewer support these features. the other edit menu items are also ...
...ected element", et cetera) are added by that viewer's popup overlay (resources/content/viewers/dom/popupoverlay.xul). the same is true for the find menuitems and the "select element by click" menuitem in the edit menu, since no other viewers besides the dom nodes viewer support these features. the other edit menu items are also used in several viewers' context menus. for that reason, only those menuitems' ids are referenced here, and the complete definitions are imported from editingoverlay.xul. viewers which include one or more of these menuitems in their context menus follow the same practice. the tooltip used for the inspect menus—the one used to show a document's title (if any) and its uri for a given menuitem—is also defined here. commandoverlay.xul the popupoverlay.xul-provided m...
...as of this writing, all of the keys that correspond to edit menu items live in editingoverlay for no good reason. statusbaroverlay.xul this defines the contents of the dom inspector's status bar. dom inspector doesn't have a status bar, so this is entirely useless. ...

ARIA Test Cases - Accessibility
orca - - - - menubar and menu yui menubar menubar 1 dojo nightly build - popup menu expected at behavior: (mz) as focus is placed inside a menu or menubar, a screen reader should announce the name (if any) of the menu, the role of the menu, and then read the current menu item. (al) as focus moves within the menu, the screen reader should read the current menuitem. (al) to read a menu item, the screen reader should announce the name. if it is a radio or checkbox menu item, the screen reader should indicate that it's checkable. if it has a submenu (aria-haspopup), the screen reader should indicate that as well. (mz) if a menu is dropped down, the activation of the new menu should be indicated and the focus tracked as it moves through the items. (mz) when...
...nu is closed, screen reader should indicate this along with the newly focused item. (mz) this may be the menu bar or higher level menu item, or a control that gains focus after the menu was closed after executing a command. (mz) if the menu caused a dialog to open, the dialog context should be given, just as with regular desktop applications. ...
...een reader should indicate this along with the newly focused item. (mz) this may be the menu bar or higher level menu item, or a control that gains focus after the menu was closed after executing a command. (mz) if the menu caused a dialog to open, the dialog context should be given, just as with regular desktop applications. ...
...e this along with the newly focused item. (mz) this may be the menu bar or higher level menu item, or a control that gains focus after the menu was closed after executing a command. (mz) if the menu caused a dialog to open, the dialog context should be given, just as with regular desktop applications. ...

Add a Context Menu Item - Archive of obsolete content
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. ...
...ogs more options adding an image you can add an image to a context menu item with the image option. this is a url pointing to a 16x16 icon that's displayed at the left side of the context menu item. ...
...', image: self.data.url("icon-16.png"), onmessage: function (selectiontext) { console.log(selectiontext); } }); adding an access key new in firefox 35. from firefox 35 you can specify an access key using the accesskey option. this must be a single-character string. ...

HTML in XUL for rich tooltips - Archive of obsolete content
example is what the final xul overlay could look like, assuming a javascript overlay titled overlay.js: <?xml version="1.0" encoding="utf-8"?> <overlay id="htmltip-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <script type="application/x-javascript" src="overlay.js"/> <popup id="contentareacontextmenu"> <menuitem id="htmltip1" label="foo1" onmouseover="htmltip.onmousetooltip(event)" tooltip="myhtmltip" /> <menuitem id="htmltip2" label="foo2" onmouseover="htmltip.onmousetooltip(event)" tooltip="myhtmltip" /> </popup> <popupset id="mainpopupset"> <tooltip id="myhtmltip"> <html:div id="myhtmltipdiv" type="content"/> </toolti...
...the xul overlay, xmlns:html is used to enable html tags to be used inside the xul. our enhanced xul tooltip is an element that is written ahead of time, and it contains an html div element whose type attribute lowers its privileges to being that content element, although it is an element of chrome. this is recommended for security reasons, especially if remote html is to be inserted. a number of menuitems have a tooltip attribute pointing to the same tooltip. that tooltip is empty now, but we will use the mouseover event to dynamically populate the tooltip (which is about to be shown) with a different message for each menuitem. this is done by calling the onmousetooltip function, which will take the tooltiphtml attribute of the element that is being hovered over and safely convert that into dom a...
...ach element that you wish to have a rich tooltip with. you should write the html straight into the xul. ...

The Essentials of an Extension - Archive of obsolete content
r coding standards are based on mozilla's or other known and used standards. ...
... there are two similar code blocks, because in modern versions of firefox, par...
...the root menu might be your only recourse. ...

Filtering - Archive of obsolete content
ies. a second triple is used to get the title for the country. ...
...the value attribute is assigned the ?country variable so that the applyfilter function can use this value easily for filtering. the complete example shows this working. ...
...of the items. since we only want to generate a single menupopup, it should go outside of the element with the uri attribute. only the contents at the element with the uri attribute and below are copied for each result. the elements above are not. <action> <menupopup> <menuitem uri="?country" label="?countrytitle" value="?country"/> </menupopup> </action> the result will be two generated menuitems, one for each country, inside a menupopup. the value attribute is assigned the ?country variable so that the applyfilter function can use this value easily for filtering. the complete example shows this working. note that due to a bug with template generation in menulists when the datasource hasn't loaded yet, you may have to load the example twice to get it work. this issue only affects the men...

XPCOM Examples - Archive of obsolete content
you to create a window menu with a list of the currently open windows in the application. the datasource for this is rdf:window-mediator. we can use this as in the following example: example 1 : source <toolbox> <menubar id="windowlist-menubar"> <menu label="window"> <menupopup id="window-menu" datasources="rdf:window-mediator" ref="nc:windowmediatorroot"> <template> <rule> <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </rule> </template> </menupopup> </menu> </menubar> </toolbox> a window menu will be created with a list of all the open windows. try this example by opening a number of browser windows and you'll see that they are all listed on the menu. window mediator component this is fine for displaying a list of open windows, but...
...tor rdf datasource. you can also get this component through the rdf service, which is another service that manages rdf datasources. the nsiwindowdatasource interface has a function getwindowforresource, which can be used to get the window given a resource. in the earlier example, we generated the list of windows and added it to a menu via a template. the template generates an id attribute on each menuitem element. the value of this attribute can be used as the resource. that means that in order to switch the window focus, we need to do the following: determine the element that the user clicked on. get the value of the id attribute from the element. pass this value to getwindowforresource() to get a window object. switch the focus to this window. the example below shows how we might do th...
... the element. pass this value to getwindowforresource() to get a window object. switch the focus to this window. ...

XUL Questions and Answers - Archive of obsolete content
he ability to easily select from the list. ...
...rue" sortdirection="ascending" sortresource="http://home.netscape.com/nc-rdf#dirtreenamesort"> <template> <rule nc:iswriteable="false"/> <rule nc:ismaillist="false"> <menuitem uri="..." label="rdf:http://home.netscape.com/nc-rdf#dirname" value="rdf:http://home.netscape.com/nc-rdf#diruri"/> </rule> <rule nc:ismaillist="true"> <menuitem uri="..." label="rdf:http://home.netscape.com/nc-rdf#dirname" value="rdf:http://home.netscape.com/nc-rdf#diruri"/> </rule> </template> </menupopup> </menulist> it should be written as follows: <menulist id="abpopup22"> <menupopup id="abpopup-menupopup" ref="moz-abmdbdirectory://abook.mab" datasources="rdf:addressdirectory" sortactive="true" sort...
... with mozilla trunk --------------------------------------------------------- nsidomcanvasrenderingcontext2d* c2d = //coming from <canvas> nsidomwindow* w...

Accessibility/XUL Accessibility Reference - Archive of obsolete content
r label="sex" /> <listheader label="color" /> </listhead> <listitem> <label value="<!--pearl-->" /> <label value="<!--female-->" /> <label value="<!--gray-->" /> </listitem> </listbox> i don't seem to be able to find a straightforward way to read the header labels in jaws. ...
...<label value="<!--gray-->" /> </listitem> </listbox> i don't seem to be able to find a straightforward way to read the header labels in jaws. ...
...see listbox menuitem see menulist and menubar menubar <menubar hidden="false"> <menu label="file" accesskey="f"> <menupopup> <menuitem label="new" accesskey="n" key="file-new-key"/> </menupopup> </menu> </menubar> menulist <label value="<!--label text-->" control="comboid" /> <menulist id="comboid"> <menupopup> <menuitem label="<!--option1-->" /> <menuitem label="<!--option2-->" selected="true" /> <menuitem label="<!--option3-->" /> </menupopup> </menulist> menupopup see menulist and menubar popup see popupset popupset be careful regarding keyboard access of popups. i don't see a means of accessing a popup brought up via the popup attribute. us...

button - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) 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; } dir type: one of the values below the direction in which the child elements of the element are placed. normal for scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical...
...suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. dlgtype type: one of the values below the dialog type of the button, used only when the button is in a dialog box. you can use this feature to replace the standard dialog box buttons with custom buttons, yet the dialog event methods will still function. for example, if the dlgtype is set to acce...
...he appearance of the different icons on some available platforms. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open. the open attribute is not present if the menu is closed. orient type: one of the values below used to specify whether the children of the element are oriented hor...

caption - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) 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; } image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label...
... 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 the tab sequence. ...
... tabindex type: integer the tab order of the element. ...

checkbox - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) 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; } 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...
...suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. src type: uri set this to an uri pointing to an image to appear in the checkbox. if this attribute is left out, no image appears. you can have both an image and a label. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable...
..., is normally preferred to use of the attribute, as it may need to update additional state. src type: uri set this to an uri pointing to an image to appear in the checkbox. if this attribute is left out, no image appears. you can have both an image and a label. 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. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a prefwindow. more information is available in the preferences system article. tabindex type: integer the tab order of the element. the tab o...

iframe - Archive of obsolete content
in an extension without security issues. more information is available in the xul tutorial. ...
... is available in the xul tutorial. ...
...src, type, transparent properties accessibletype, contentdocument, contentwindow, docshell, webnavigation examples <iframe src="table.php" flex="2" id="browsertable" name="table_frame"/> selecting an url from a menu <menulist oncommand="donav(this);"> <menupopup> <menuitem label="mozilla" value="http://mozilla.org" /> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net" /> <menuitem label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menulist> <iframe id="myframe" flex="1"/> <script> function donav(obj) { var url = obj.selecteditem.value; // note the firstchild is the menupopup element document.getelementbyid('myframe').setattribute('src', url); } </script> attributes showcaret type: b...

key - Archive of obsolete content
ill be fired on the key element. the key pressed must match the key attribute (or keycode attribute) as well as the modifiers attribute in order for the key element to be activated. for the shortcut defined using the key element to work, you must specify a command attribute (or an oncommand handler) on the key element. to display the shortcut defined with the key element in the ui, you can use <menuitem key="key element's id" command="command id" .../>. in order to use (non-default) key commands within specific elements, you will need to listen for key events. more information is available in the xul tutorial. attributes command, disabled, key, keycode, keytext, modifiers, oncommand, phase examples (example needed) attributes command type: id set to the id of a command element...
...suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. key type: character the character that must be pressed. this should be set to a displayable character. keycode type: string key code for keys that do not have displayable characters, such as the enter key or function keys, use this attribute instead of the key attribute. valid keys are ...
...character that must be pressed. this should be set to a displayable character. keycode type: string key code for keys that do not have displayable characters, such as the enter key or function keys, use this attribute instead of the key attribute. valid keys are listed at keyboard shortcuts. keytext type: string a label for the keyboard shortcut. this text would appear next to a menuitem label if that menuitem is associated with the key element via its key attribute. modifiers type: space-separated list of the values below a list of modifier keys that should be pressed to invoke the keyboard shortcut. multiple keys may be separated by spaces or commas. keys will map to other keys on platforms that do not have them. shift: the shift key. alt: the alt key. on the maci...

listcell - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) 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; } 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...
...suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no t...
...se of the attribute, as it may need to update additional state. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. type type: string this attribute is reserved for use by anonymous children of listitem; do not use. properties disabled type: boolean gets and sets the value of the disabled attribute. inherited properties align, , allowevents, , boxobject,...

popupset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container for menupopup, panel and tooltip elements. this element is optional; the given elements need not appear in a popupset container. more information is available in the xul tutorial. ...
... « xul reference home [ examples | attributes | properties | methods | related ] a container for menupopup, panel and tooltip elements. this element is optional; the given elements need not appear in a popupset container. more information is available in the xul tutorial. ...
... « xul reference home [ examples | attributes | properties | methods | related ] a container for menupopup, panel and tooltip elements. this element is optional; the given elements need not appear in a popupset container. more information is available in the xul tutorial. ...

<statusbarpanel> - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) 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; } image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label t...
... properties image type: image url gets and sets the value of the image attribute. label type: string gets and sets the value of the label attribute. ...
... properties image type: image url gets and sets the value of the image attribute. ...

Theme changes in Firefox 2 - Archive of obsolete content
ock-icon:active #urlbar[level="high"] #lock-icon:hover #urlbar[level="low"] #lock-icon:active #urlbar[level="low"] #lock-icon:hover .autocomplete-treebody::-moz-tree-cell(suggesthint) .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolautocompletecomment) .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolautocompletecomment) .bookmark-item[livemark] .openintabs-menuitem .toolbarbutton-icon .toolbarbutton-menubutton-dropmarker toolbar[iconsize="small"] #back-button .toolbarbutton-menubutton-dropmarker toolbar[iconsize="small"] #back-button:hover toolbar[iconsize="small"] #back-button:hover .toolbarbutton-menubutton-dropmarker toolbar[iconsize="small"] #back-button:hover:active toolbar[iconsize="small"] #back-button:hover:active .toolbarbutton-menubutton-dr...
... 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=panedownload...
...e"]) > .tab-image-middle tab:hover:not([selected="true"]) > .tab-image-right tab:not([selected="true"]) > .tab-image-left tab:not([selected="true"]) > .tab-image-middle tab[selected="true"] .tab-image-middle > .tab-text you may of course wish to make changes to other styles as well. menu.css the following style is no longer used in firefox 2 and has been removed: menulist > menupopup > menuitem[_moz-menuactive="true"] the firefox 2 theme also adds the following new styles: .menu-iconic-icon menubar > menu menubar > menu[_moz-menuactive="true"][open="true"] menuitem[type="checkbox"] > .menu-iconic-left menuitem[type="radio"] > .menu-iconic-left you may wish to change the definitions of other styles as well. notification.css this is a new file in firefox 2. it is used for the...

mozbrowsercontextmenu
ing one or more menusystem objects (see the menusystem object, below), containing details of the standard menu(s) that will be shown. for example, 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...
...tadata and is bigger than 0 x 0, or false if not. action a domstring representing the action of a form, in the case of a form context menu. method a domstring representing the method of a form, in the case of a form context menu. name a domstring representing the name of a form, in the case of a form context menu. the menu object an object 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. its properties are as follows: type a domstring representing 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 ...
... 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. ...

Gecko Roles
c. role_window represents the window frame, which contains child objects such as a title bar, client, and other objects contained in a window. the role is supported automatically by microsoft windows. role_internal_frame a sub-document. role_menupopup represents a menu, which presents a list of options from which the user can make a selection to perform an action. role_menuitem represents a menu item, which is an entry in a menu that a user can choose to carry out a command, select an option. role_tooltip represents a tooltip that provides helpful hints; this is generally displayed at the mouse cursor position. role_application represents a main window for an application. role_document represents a document window. a document window is always...
... role_redundant_object an object which is redundant with another object in the accessible hierarchy. ats typically ignore objects with this role. role_form a container of form controls. role_ime an object which is used to allow input of characters not found on a keyboard, such as the input of chinese characters on a western keyboard. role_app_root ??? role_parent_menuitem represents a menu item, which is an entry in a menu that a user can choose to display another menu. role_calendar a calendar that allows the user to select a date. role_combobox_list a list of items that is shown by combobox. role_combobox_option a item of list that is shown by combobox role_image_map an image map -- has child links representing the areas r...
... ...

Places utilities for JavaScript
entbookmarkforuri(nsiuri auri); nsinavhistoryresultnode getmostrecentfolderforfeeduri(nsiuri auri); nsinavhistoryresultnode geturlsforcontainernode(nsinavhistoryresultnode anode); void opencontainernodeintabs(nsinavhistoryresultnode anode, nsidomevent aevent); void openurinodesintabs(array nsinavhistoryresultnode anodes, nsidomevent aevent); void createmenuitemfornode(nsinavhistoryresultnode anode, acontainersmap); constants mimetypes type_x_moz_place_container type_x_moz_place_separator: "text/x-moz-place-separator", type_x_moz_place: "text/x-moz-place", type_x_moz_url: "text/x-moz-url", type_html: "text/html", type_unicode: "text/unicode", services there's easy access to some of the common services used in bookmarks or history navig...
...livemark containers. -1 is returned if no item is found. ...
...recentbookmarkforuri(auri) getmostrecentfolderforfeeduri() getmostrecentfolderforfeeduri(auri) geturlsforcontainernode() geturlsforcontainernode(anode) opencontainernodeintabs() opencontainerintabs(anode, aevent) openurinodesintabs() openurinodesintabs(anodes, aevent) createmenuitemfornode() helper for the toolbar and menu views. createmenuitemfornode(anode, acontainersmap) ...

WAI-ARIA Roles - Accessibility
om https://developer.mozilla.org/docs/web/accessibility/aria/aria_techniques). ones for which the first draft is completed have been removed from the below list. ...
.../developer.mozilla.org/docs/web/accessibility/aria/aria_techniques). ones for which the first draft is completed have been removed from the below list. ...
....org/docs/web/accessibility/aria/aria_techniques). ones for which the first draft is completed have been removed from the below list. ...

Event reference
on-standard events abortable fetch events event name fired when abort a dom request is aborted, i.e. using abortcontroller.abort(). ...
... abortable fetch events event name fired when abort a dom request is aborted, i.e. using abortcontroller.abort(). ...
...dcaster. checkboxstatechange xul the state of a checkbox has been changed either by a user action or by a script (useful for accessibility). close xul the close button of the window has been clicked. command xul an element has been activated. commandupdate xul a command update occurred on a commandset element. dommenuitemactive xul a menu or menuitem has been hovered or highlighted. dommenuiteminactive xul a menu or menuitem is no longer hovered or highlighted. popuphidden popupevent xul a menupopup, panel, or tooltip has been hidden. popuphiding popupevent xul a menupopup, panel, or tooltip is about to be hidden. popupshowing popupevent ...

Adding captions and subtitles to HTML5 video - Developer guides
elements within the video's markup. all we need to do is to go through the video's texttracks, reading their properties and building the menu up from there: var subtitlesmenu; if (video.texttracks) { var df = document.createdocumentfragment(); var subtitlesmenu = df.appendchild(document.createelement('ul')); subtitlesmenu.classname = 'subtitles-menu'; subtitlesmenu.appendchild(createmenuitem('subtitles-off', '', 'off')); for (var i = 0; i < video.texttracks.length; i++) { subtitlesmenu.appendchild(createmenuitem('subtitles-' + video.texttracks[i].language, video.texttracks[i].language, video.texttracks[i].label)); } videocontainer.appendchild(subtitlesmenu); } this code creates a documentfragment, which is used to hold an unordered list containing our subtitles menu. ...
... } videocontainer.appendchild(subtitlesmenu); } this code creates a documentfragment, which is used to hold an unordered list containing our subtitles menu. first of all an option is added to allow the user to switch all subtitles off, and then buttons are added for each text track, reading the language and label from each one. ...
... which is used to hold an unordered list containing our subtitles menu. first of all an option is added to allow the user to switch all subtitles off, and then buttons are added for each text track, reading the language and label from each one. ...

<a>: The Anchor element - HTML: Hypertext Markup Language
, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content, or any element that accepts flow content, but not other <a> elements. ...
...rting and ending tag are mandatory. permitted parents any element that accepts phrasing content, or any element that accepts flow content, but not other <a> elements. ...
...re mandatory. permitted parents any element that accepts phrasing content, or any element that accepts flow content, but not other <a> elements. ...

<img>: The Image Embed element - HTML: Hypertext Markup Language
must have a start tag and must not have an end tag. permitted parents any element that accepts embedded content. ...
... start tag and must not have an end tag. permitted parents any element that accepts embedded content. ...
...t have an end tag. permitted parents any element that accepts embedded content. ...

Adding Events and Commands - Archive of obsolete content
hello-online-broadcaster" /> </broadcasterset> these elements are completely invisible, so you can put them anywhere. it is recommended that you have them at the top of the xul code, along with script declarations and other invisible elements with as popupset and commandset. ...
...ehavior is identical as broadcaster elements, but they should be used when oncommand is one of the shared attributes. our menu example is in fact better suited for a command. <commandset id="xulschoolhello-commandset"> <command id="xulschoolhello-hello-command" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> <!-- more commands. --> </commandset> <!-- more code here... --> <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" command="xulschoolhello-hello-command" /> commands allow you to keep your javascript calls in a single place, avoiding code repetition and possible bugs. your ui can easily scale this way. you can create an extension that adds toolbar buttons, statusbar buttons and men...

Tabbed browser - Archive of obsolete content
to select new tabs, and vice versa "window" new window "save" save to disk (with no filename hint!) openuilink( url, e, ignorebutton, ignorealt, allowkeywordfixup, postdata, referrerurl ) the following code will open a url in a new tab, an existing tab, or an existing window based on which mouse button was pressed and which hotkeys (ex: ctrl) are being held. ...
...( url, e, ignorebutton, ignorealt, allowkeywordfixup, postdata, referrerurl ) the following code will open a url in a new tab, an existing tab, or an existing window based on which mouse button was pressed and which hotkeys (ex: ctrl) are being held. the code given is for a menuitem, but will work equally well for other xul elements. this will only work in an overlay of browser.xul. ...

Creating a Firefox sidebar extension - Archive of obsolete content
ems. the sidebar here is added to the view | sidebar menu. the overlay file is listed in example 4. example 4. ...
...idebartitle="&emptysidebar.title;" oncommand="togglesidebar('viewemptysidebar');" /> </broadcasterset> </overlay> the overlay file consists of three entries, the menu definition, shortcut keys and the broadcaster. the broadcaster serves two purposes. the first is it indirectly provides the arguments for the togglesidebar function. the second is it provides attributes to the menuitem, some of which are changed automatically when togglesidebar is called. see code_snippets/sidebar for more information. if the sidebar is not going to have a command-key, one can remove the openemptysidebar.commandkey and openemptysidebar.modifierskey keys from the dtd, remove the <keyset> from the firefoxoverlay.xul file. one must then set the key attribute of the menuitem to "". the extension ...

crop - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. ...
...me elements will have set a maximum width so they will always appear cropped. ...

image - Archive of obsolete content
« xul reference home image type: uri the uri of the image to appear on the element. ...
... « xul reference home image type: uri the uri of the image to appear on the element. ...

Dynamically modifying XUL-based user interface - Archive of obsolete content
ents within the document. note: document.createelementns() creates an element, but does not put it anywhere in the document. you need to use other dom methods, such as appendchild() to insert the newly created element in the document. appendchild() appends the node after all other nodes, while insertbefore() inserts the node before the node referenced by its second parameter. ...
...r dom methods, such as appendchild() to insert the newly created element in the document. appendchild() appends the node after all other nodes, while insertbefore() inserts the node before the node referenced by its second parameter. function createmenuitem(alabel) { const xul_ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var item = document.createelementns(xul_ns, "menuitem"); // create a new xul menuitem item.setattribute("label", alabel); return item; } var popup = document.getelementbyid("mypopup"); // a <menupopup> element var first = createmenuitem("first item"); var last = createmenuitem("last item"); popup.insertbefore(first, popup.firstchild); popup.appendchild(last); you can also use appendchild() and insertbefore() to move existing elements. for examp...

How to Quit a XUL Application - Archive of obsolete content
er what. ...
...pstartup.eforcequit : components.interfaces.nsiappstartup.eattemptquit; appstartup.quit(quitseverity); } </script> calling this function if there is an uncaught exception, to force the application to quit: <script> try { dosomething(); } catch (e) { quit(true); } </script> the "quit" menuitem should typically prompt the user if there is unsaved data: <menuitem label="quit" oncommand="quit(false);"/> ...

Positioning - Archive of obsolete content
nu just by clicking in the same location. for a tooltip, the position attribute controls how the tooltip is anchored to the element with the tooltip attribute. you wouldn't normally use the position attribute on a tooltip; instead you would just want the tooltip to appear at its default position which is near the mouse pointer. for instance: <menupopup id="edititems" position="end_before"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> <label value="clipboard" popup="edititems"/> in this example, a menupopup is attached to a label via the popup attribute, which will cause the popup to appear when the label is left-clicked. the position attribute is used to specify that the popup should appear at the 'end_before' location, which will cause the p...
...popup, panel or tooltip has a margin specified in a style sheet or using the inline style attribute, this margin will be applied around the outside of the popup. in the following example, the menupopup has a 2ex margin above it, so when opened, the popup will be placed a distance of 2ex below the bottom of the button. <button label="popup" type="menu"> <menupopup style="margin-top: 2ex;"> <menuitem label="cat"/> <menuitem label="dog"/> </menupopup> </button> this technique is used internally for tooltips. if you notice in the firefox browser when a tooltip is opened it appears not at the mouse position, but slightly below it. this is because the default theme has a 21 pixel top margin on tooltips that moves them down by that much. this is used so that the tooltip doesn't cover up wh...

Popup Guide - Archive of obsolete content
a popup popups may be moved using the moveto method. see moving a popup. resizing a popup the size of a popup may be adjusted using the sizeto method. see resizing a popup. attaching menus to a button to learn about how to open a menu when a button is pressed, see menu buttons. features of items on a menu to learn about the various features of items on a menu, see features of the menuitem element modifying the items on a menu to append, insert and remove elements from a menu, see modifying a menu. events when popups are opened or closed the popupshowing and popupshown events are fired when a menu or popup is opened. the popuphiding and the popuphidden events are fired when a menu or popup is closed. for information about these events, see popup events. handling keys ...
... handling keys within popups for information about how keys are handled within menus and panels, see handling keys within popups. platform specific menu considerations see special per-platform menu considerations for some notes about handling menus on certain platforms, for instance creating the application menu on a macintosh. using popups in extensions extensions may add additional menuitems either to a menu on the menu bar or to the context menu. in addition, an extension may add an entirely new menu. for example, an extension might wish to add a new command on the tools menu to open a dialog specific to the extension. another common task is to create an extension which adds an item to the browser's context menu. see using menus and popups in extensions for details. ...

textbox (Toolkit autocomplete) - Archive of obsolete content
suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. disablekeynavigation type: boolean if this attribute is not used, the user can navigate to specific items within the element by pressing keys corresponding to letters in the item's label. this is done incrementally, so typing more letters with select more specific items. this feature may be disa...
... ignoreblurwhilesearching new in thunderbird 3requires seamonkey 2.0 type: boolean if true, blur events are ignored while searching, which means that the autocomplete popup will not disappear. inputtooltiptext type: string the tooltip text for the textbox. 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. maxlength type: integer the maximum number of characters that the textbox allows to be entered. maxrows type: integer the number of rows to show in the results list at a time. a scrollbar will appear so the user can scroll through the remaining items. m...

Textbox (XPFE autocomplete) - Archive of obsolete content
suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. disablehistory obsolete since gecko 2.0 type: boolean note: applies to: thunderbird and seamonkeyif false, an arrow button will appear on the end of the textbox which will open a dropdown menu of all available results. the default value is true, hiding the dropdown button. this attribute only wo...
... ignoreblurwhilesearching new in thunderbird 3requires seamonkey 2.0 type: boolean if true, blur events are ignored while searching, which means that the autocomplete popup will not disappear. inputtooltiptext type: string the tooltip text for the textbox. 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. maxlength type: integer the maximum number of characters that the textbox allows to be entered. maxrows type: integer the number of rows to show in the results list at a time. a scrollbar will appear so the user can scroll through the remaining items. m...

Accesskey display rules - Archive of obsolete content
alphabets but alphabets are used to accesskey. for coherence of the labels on such localized builds, the accesskey text is always appended even if the labels have their accesskey characters. e.g., when an accesskey of "ok" is 'o' and an accesskey of "キャンセル" (means "cancel") is 'c', the labels will be "ok(o)" and "キャンセル(c)" on japanese localized build. xul elements check "intl.menuitems.alwaysappendaccesskeys" pref value whether they should append accesskey text always. if the value is "true" (string), the accesskey text will be appended always. don't change the pref value from your xul applications. and also note that there are no spaces between the original labels and accesskey text in the above japanese example. because typically, japanese language doesn't use spaces as word...
...ether they should append accesskey text always. if the value is "true" (string), the accesskey text will be appended always. don't change the pref value from your xul applications. and also note that there are no spaces between the original labels and accesskey text in the above japanese example. because typically, japanese language doesn't use spaces as word separator. this is controled by "intl.menuitems.insertseparatorbeforeaccesskeys" pref value. if the value is "true" (string), a spece will be inserted before accesskey text. don't change the pref value from your xul applications too. don't include accesskey text in labels xul applications should use dtd for localizable ui resource. at that time, accesskeys are specified by independent entity from their label. be aware, this is very important ...

Anonymous Content - Archive of obsolete content
u want both the xbl content and the content provided by the xul file to be displayed. you can do this by using the children element. the children added in the xul are added in place of the children element. this is handy when creating custom menu widgets. for example, a simplified version of an editable menulist element, might be created as follows: xul: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> </menu> css: menu.dropbox { -moz-binding: url('chrome://example/skin/example.xml#dropbox'); } xbl: <binding id="dropbox"> <content> <children/> <xul:textbox flex="1"/> <xul:button src="chrome://global/skin/images/dropbox.jpg"/> </content> </binding> this example creates an input field with a button beside it. the...
...tton beside it. the menupopup will be added to the content in the location specified by the children element. note that to dom functions, the content will appear as it was in the xul file, so the menupopup will be a child of the menu. the xbl content is hidden away so the xul developer doesn't need to even know it is there. the resulting content would be: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> <textbox flex="1"/> <button src="chrome://global/skin/images/dropbox.jpg"/> </menu> includes attribute in some cases, you may wish to only include specific types of content and not others. or, you may wish to place different types of content in different places. the includes attribute can be used to allow only certain elements to app...

List Controls - Archive of obsolete content
hich can be used for this purpose. it is made from a textbox with a button beside it. its name was chosen because it pops up a menu with the choices in it. three elements are needed to describe a drop-down box. the first is the menulist element, 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 c...
...m the list. you cannot enter your own text by typing it in. a variant of the menulist allows editing the text in the field. for example, the url field in the browser has a drop-down for selecting previously typed urls, but you can also type them in yourself. to create an editable menulist, add the editable attribute as follows: example 6 : source view <menulist editable="true"> <menupopup> <menuitem label="www.mozilla.org" /> <menuitem label="www.xulplanet.com" /> <menuitem label="www.dmoz.org" /> </menupopup> </menulist> the url field created here has three pre-populated choices that the user can select or they can enter one of their own by typing it into the field. the text the user enters is not added as a new choice. because the label attribute was not used in this example, t...

XUL Reference - Archive of obsolete content
bindings box broadcaster broadcasterset button browser checkbox caption clicktoscroll colorpicker column columns commandset command conditions content datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script scrollbar scrollbox scrollcorner separator spacer spinbuttons splitter stack statusbar statusbarpanel stri...
... label caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker datepicker menulist progressmeter radio radiogroup scale splitter textbox textbox (firefox a...

description - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) 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; } 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...
...suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. 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 the tab sequence. value type: string the string attribute allows you to associate a data value wi...

grid - Archive of obsolete content
ing a grid. ...
...ce as big as the first 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, hid...

label - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) 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; } 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...
...suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. href type: string defines a url to open when this element is clicked. requires the class attribute to include text-link. value type: string the text to be used for the label. properties accesskey type: character gets and sets the value of the accesskey attr...

prefpane - Archive of obsolete content
ll be opened using the help viewer when the help button is pressed. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text 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 t...
... 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) preferenceforelement( uielement ) return type: preference element returns the preference element to which a user interface element is attached. void userchangedvalue(in domel...

richlistitem - Archive of obsolete content
suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. 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 ind...
...ext 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. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inheri...

treecol - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) 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; } cycler type: boolean if true, then the column is a cycler column. in the case, clicking on a cell in the column will alternate its state between on and off. this is used, for example, in a mail window, for a column that indicates that the...
...dicate that the tree column header should be displayed without any column header styling. if you don't set a label for that column either, the header is not displayed at all. ignoreincolumnpicker type: boolean if true, the column does not appear in the column picker. 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. primary type: boolean if set to true, the treecol will have indentation and twisties drawn to the left of it to indicate the hierarchy level of the rows. if no column has the primary attribute set to true, the tree may still contain nested rows, although no indication will b...

nsIAccessibleRole
represents the window frame, which contains child objects such as a title bar, client, and other objects contained in a window. the role is supported automatically by ms windows. role_internal_frame 10 a sub-document or iframe. role_menupopup 11 represents a menu, which presents a list of options from which the user can make a selection to perform an action. it is used for role="menu". role_menuitem 12 represents a menu item, which is an entry in a menu that a user can choose to carry out a command, select an option. it is used for xul:menuitem, role="menuitem". role_tooltip 13 represents a tooltip that provides helpful hints. role_application 14 represents a main window for an application. it is used for role="application". also refer to role_app_root. role_document 15 represents a do...
...nt with another object in the accessible hierarchy. ats typically ignore objects with this role. role_form 109 a container of form controls. an example of the use of this role is to represent an html:form. role_ime 110 an object which is used to allow input of characters not found on a keyboard, such as the input of chinese characters on a western keyboard. role_app_root 111 role_parent_menuitem 112 represents a menu item, which is an entry in a menu that a user can choose to display another menu. role_calendar 113 a calendar that allows the user to select a date. role_combobox_list 114 a list of items that is shown by combobox. role_combobox_option 115 a item of list that is shown by combobox; role_image_map 116 an image map -- has child links representing the areas. role_opti...

nsIDOMWindowUtils
le this interface is a dom utility interface that provides useful dom methods and attributes. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 49.0 (firefox 49.0 / thunderbird 49.0 / seamonkey 2.46) implemented by: window. ...
.../removed with loadsheet()/removesheet(). see css2 specification for details. user_sheet 1 a possible type of a style sheet loaded/removed with loadsheet()/removesheet(). see css2 specification for details. author_sheet 2 a possible type of a style sheet loaded/removed with loadsheet()/removesheet(). see css2 specification for details. methods activatenativemenuitemat() see nsiwidget.activatenativemenuitemat(). cannot be accessed from unprivileged context (not content-accessible) will throw a dom security error if called without universalxpconnect privileges. void activatenativemenuitemat( in astring indexstring ); parameters indexstring clearmozafterpaintevents() void clearmozafterpaintevents(); parameters none. comparecanvases() compar...

Add Option to Context Menu
assuming this on chrome.manifest: overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myext/content/thunderbird-overlay.xul add the next in thunderbird-overlay.xul. ...
...<menupopup id="messagepanecontext"> <menuitem id="my_option" label="my option concise and cool label" oncommand="alert('hi')"/> </menupopup> </overlay> for thunderbird 3 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <popup id="mailcontext"> <menuitem id="my_option" label="my option concise and cool label" oncommand="alert('hi')"/> </popup> </overlay> for thunderbird 2 and 3 in the same xpi if our extension needs to support thunderbird 2 and 3 we need to make custom overlays for each version. this can be reached by adding these lines to the chrome.manifest file: overlay chrome://messenger/content/mailwindowover...

Introduction to DOM Inspector - Firefox Developer Tools
likely be already open and displayed in this list. the dom inspector keeps track of all the windows that are open, so to inspect the dom of a particular window in the dom inspector, simply access that window as you would normally and then choose its title from this dynamically updated menulist. inspecting arbitrary urls you may also inspect the dom of arbitrary urls by using the inspect a url menuitem in the file menu, or by just entering a url into the dom inspector's address bar and clicking inspect or pressing enter. for example, you can enter http://www.mozilla.org in the address bar and see the dom structure of the mozilla.org home page. you should not use this approach to inspect chrome documents. instead, ensure that the document loads via normal means and use the inspect chrome docume...
...hen used in conjunction with the style sheets viewer, the css rules viewer lists all recognized rules from that style sheet in order. properties may be also be edited. rules applying to pseudo-elements do not appear. the javascript object viewer gives a hierarchical tree of the object pane's subject. the javascript object viewer also allows javascript to be evaluated by selecting the appropriate menuitem in the context menu. basic actions of the dom nodes viewer selecting elements by click another powerful interactive feature of the dom inspector is that when you have the dom inspector open and have enabled this functionality by choosing edit > select element by click or by clicking the little magnifying glass icon in the upper left portion of the dom inspector application, you can click anywh...

Browser Console - Firefox Developer Tools
ce the global window object is the browser's chrome window, you can also modify the browser's user interface. ...
.../there.is.only.xul", "menuitem"); makethetea.setattribute("label", "a nice cup of tea?"); parent.appendchild(makethetea); on macos, this similar code will add a new item to the "tools" menu: var parent = window.document.getelementbyid("menu_toolspopup"); var makethetea = gbrowser.ownerdocument.defaultview.document.createelementns("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem"); makethetea.setattribute("label", "a nice cup of tea?"); parent.appendchild(makethetea); ...

Network request list - Firefox Developer Tools
n in the search field. to make the search case sensitive: click the case sensitive (aa) icon next to the search field. to close the search panel, do one of the following: click the x icon next to the search field. click the search icon in the network monitor toolbar. context menu context-clicking on a row in the list displays a context menu with the following options: menuitem description copy > copy url copies the url. copy > copy as curl copies the network request to the clipboard as a curl command, so you can execute it from a command line. see copy as curl, below. copy > copy as fetch copies the request as a call to the fetch() method, including the url and any settings object. copy > copy request headers copie...
...obbing (wildcard matching) feature if the copied url includes square bracket characters ([ or ]). (starting in firefox 76) managing har data the har format enables you to export detailed information about network requests. in addition to the copy and save menu items for har in the context menu, similar menu items are available in the har dropdown menu in the toolbar, as well as an import menuitem. network monitor features the following articles cover different aspects of using the network monitor: toolbar network request details network traffic recording performance analysis throttling ...

The JavaScript input interpreter - Firefox Developer Tools
tions are case-insensitive. the console suggests completions from the scope of the currently executing stack frame. this means that if you've hit a breakpoint in a function you get autocomplete for objects local to the function. you get autocomplete suggestions for array elements, as well: you can enable or disable autocompletion via the settings ("gear") menu in the web console toolbar. the menuitem enable autocompletion has a checkmark next to it when the feature is enabled, which is missing when it is disabled. select the menuitem to change the state. instant evaluation this feature is available in firefox nightly, in versions labeled 74 and later. when the "instant evaluation" feature is enabled, the interpreter displays results of expressions as you're typing them in single-line mod...
...ox nightly, in versions labeled 74 and later. when the "instant evaluation" feature is enabled, the interpreter displays results of expressions as you're typing them in single-line mode. note that the result might be an error message. expressions that have side effects are not evaluated. you can enable or disable instant evaluation via the settings ("gear") menu in the web console toolbar. the menuitem instant evaluation has a checkmark next to it when the feature is enabled, which is missing when it is disabled. select the menuitem to change the state. execution context code that you have executed becomes part of the execution context, regardless of what editing mode you were in when you executed it. for example, if you type a function definition in the multi-line editor, and click run, you ...

Using the aria-labelledby attribute - Accessibility
</div> ... </div> notes the most common accessibility api mapping for a label is the accessible name property used by aria roles all elements of the b...
...rmon</dd> <dd role="definition" aria-labelledby="homily">a lecture or discourse on or of a moral theme</dd> </dl> example 7: menus in the example below, a popup menu is associated with its label using the aria-labelledby attribute: <div role="menubar"> <div role="menuitem" aria-haspopup="true" id="filemenu">file</div> <div role="menu" aria-labelledby="filemenu"> <div role="menuitem">open</div> <div role="menuitem">save</div> <div role="menuitem">save as ...</div> ... </div> ... </div> notes the most common accessibility api mapping for a label is the accessible name property used by aria roles all elements of the base markup related aria techniques using the aria-label attribute using the aria-describedby attribute compatibility...

Mozilla CSS extensions - CSS: Cascading Style Sheets
prefixed version still accepted] -moz-transition-property [prefixed version still accepted] -moz-transition-timing-function [prefixed version still accepted] -moz-user-select values global values -moz-initial -moz-appearance button button-arrow-down button-arrow-next button-arrow-previous button-arrow-up button-bevel checkbox checkbox-container checkbox-label checkmenuitem dialog groupbox listbox menuarrow menucheckbox menuimage menuitem menuitemtext menulist menulist-button menulist-text menulist-textfield menupopup menuradio menuseparator -moz-mac-unified-toolbar -moz-win-borderless-glass -moz-win-browsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-button-box-maximiz...
... -moz-win-browsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-button-box-maximized -moz-window-button-close -moz-window-button-maximize -moz-window-button-minimize -moz-window-button-restore -moz-window-titlebar -moz-window-titlebar-maximized progressbar progresschunk radio radio-container radio-label radiomenuitem resizer resizerpanel scale-horizontal scalethumb-horizontal scalethumb-vertical scale-vertical scrollbarbutton-down scrollbarbutton-left scrollbarbutton-right scrollbarbutton-up scrollbar-small scrollbarthumb-horizontal scrollbarthumb-vertical scrollbartrack-horizontal scrollbartrack-vertical separator spinner spinner-downbutton spinner-textfield spinner-upbutton statusbar s...

context-menu - Archive of obsolete content
unction is passed an object with properties describing the menu invocaton context. array an array of any of the other types. this context occurs when all contexts in the array occur. menu items also have a context property that can be used to add and remove declarative contexts after construction. for example: var context = require("sdk/context-menu").selectorcontext("img"); mymenuitem.context.add(context); mymenuitem.context.remove(context); when a menu item is bound to more than one context, it appears in the menu when all of those contexts occur. in content scripts the declarative contexts are handy but not very powerful. for instance, you might want your menu item to appear for any page that has at least one image, but declarative contexts won't help you there. when you...

Sidebar - Archive of obsolete content
ng". web panels sidebar content such as web pages can be safely loaded as sidebar in the "viewwebpanelssidebar". bookmarks with "load this bookmark in sidebar" checked in the properties open in the "viewwebpanelssidebar". a web page can use window.sidebar to create bookmark with that property. to open a page in the "viewwebpanelssidebar" from chrome code (browser/addon/extension) such as from menuitem, it can call: openwebpanel(atitle, auri); accessing the sidebar from a browser.xul script the sidebar content is always in a document separate from the main browser document (the sidebar is actually implemented as a xul browser element). this means you can't directly access the sidebar content from a script referenced from a browser.xul overlay. to access your sidebar's window or document obj...

Extension Etiquette - Archive of obsolete content
at you are already familiar with building an extension. user interface tools menu items using the tool menu option gives the author the maximum amount of choices. whether the extensions should go at the top, bottom, or somewhere in between on the tools menu, the author always has a choice. ideally, the location would be below the add-ons item, grouped with the other extension-related commands (menuitem:insertafter="javascriptconsole,devtoolsseparator"). sub-menus should be used for single extensions needing multiple menu items, and a tools menu item should not be created for options and preferences (for options and preferences, see the add-on manager). if possible, create a menu item in the menu where it is most applicable; for instance, a bookmark sharing extension should be called from the bo...

Inline options - Archive of obsolete content
type="color" title="color"/> <!-- file and directory examples --> <setting pref="extensions.myaddon.file" type="file" title="file"/> <setting pref="extensions.myaddon.directory" type="directory" title="directory"/> <!-- list example (this example would be stored as an integer) --> <setting pref="extensions.myaddon.options1" type="menulist" title="options 1"> <menulist> <menupopup> <menuitem value="500" label="small"/> <menuitem value="800" label="medium"/> <menuitem value="1200" label="large"/> </menupopup> </menulist> </setting> <!-- radio button example (this example would be stored as a boolean) --> <setting pref="extensions.myaddon.options2" type="radio" title="options 2"> <radiogroup> <radio value="false" label="disabled"/> <radio value="true" label...

Adding sidebars - Archive of obsolete content
obably familiar with the bookmarks and history sidebars. if not, you can open either one from the view > sidebar menu. they also have shortcuts to open or close them using the keyboard. the code required to add a sidebar is very simple, as explained in creating a firefox sidebar. it's even simpler than that. all you need is to overlay the view sidebar menu. ...

Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
lternative: proxy if you cannot override objects or properties easily, e.g. because the object is frozen or sealed, then creating a proxy around the object might be a viable approach. triggering event handlers sometimes scripts might want to manually trigger an event handler that is defined directly in the xul document. consider the following xul fragment throughout the rest of this section. <menuitem id="mymenu" oncommand="executesomething(); executesomethingelse();"/> <label id="mylabel" onclick="executesomething(); executesomethingelse();"/> add-on authors commonly use eval to trigger the handlers. // do not use eval(document.getelementbyid("mymenu").getattribute("oncommand")); eval(document.getelementbyid("mylabel").getattribute("onclick")); alternative: dispatch real events dispatch...

Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
dom(["xul:hbox", {}, ["div", {}, ["a", { href: href, key: "link", onclick: function (event) { alert(event.target.href); } }, text], ["span", { class: "stuff" }, "stuff"]]], document, nodes)); alert(nodes.link); function addentrytopopup(menupopup, doc, chromewindow) { var newitem = doc.createelement("menuitem"); newitem.setattribute("value", "testvalue"); newitem.setattribute("label", "another popup menu item"); menupopup.appendchild(newitem); }; var jsontemplatebtn = ["xul:toolbarbutton", { id: "mytestbutton", class: "toolbarbutton-1", type: "menu", label: "test button label", tooltiptext: "test button tooltip", ...

Extensions support in SeaMonkey 2 - Archive of obsolete content
window menu popup menu_helppopup helppopup helppopup help menu popup urlbar icons to display a button with a menupopup in the urlbar-icons for both firefox and seamonkey 2.0, use this code: <hbox id="urlbar-icons"> <image popup="myext-menu"/> </hbox> <window id="main-window"> <menupopup id="myext-menu"> <menuitem label="menuitem"/> <menuitem label="menuitem"/> </menupopup> </window> instead of <hbox id="urlbar-icons"> <button type="menu"> <menupopup> <menuitem label="menuitem"/> <menuitem label="menuitem"/> <menuitem label="menuitem"/> </menupopup> </button> </hbox> technica...

Localizing an extension - Archive of obsolete content
ds describes how to do it. note that the urls of the dtd files don't actually include the name of the localization to use. the chrome registry resolves the uris based on the user's current locale setting and the data you provide in your chrome manifest. then we simply replace each text string in our xul files with the corresponding entity. for example, in stockwatcher2.xul, we change this line: <menuitem label="refresh now" oncommand="stockwatcher.refreshinformation()"/> to <menuitem label="&menu_refresh_now.label;" oncommand="stockwatcher.refreshinformation()"/> do this for every string used in each xul file. update the chrome manifest to let firefox know about the locale files, we need to make a revision to our chrome.manifest file, adding one line for each localization: locale stockwatcher...

Simple Storage - Archive of obsolete content
ection");jetpack.future.import("storage.simple");// create the persistent notes array if it doesn't already exist.jetpack.storage.simple.notes = jetpack.storage.simple.notes || [];var notes = jetpack.storage.simple.notes;// updates the jetpack menu with the current notes. we'll add a notes menu with// a submenu, which lists all the notes. if there are no notes, we'll show a// disabled "(empty)" menuitem.function updatejetpackmenu() { jetpack.menu.set({ label: "notes", menu: new jetpack.menu(notes.length > 0 ? notes : [{ label: "(empty)", disabled: true }]) });}// modify the page's context menu by sneaking in before it's shown. if there's// a selection, add a note menuitem that makes a new note. otherwise, don't// modify the menu at al...

Simple Storage - Archive of obsolete content
jetpack.future.import("storage.simple"); // create the persistent notes array if it doesn't already exist. jetpack.storage.simple.notes = jetpack.storage.simple.notes || []; var notes = jetpack.storage.simple.notes; // updates the jetpack menu with the current notes. we'll add a notes menu with // a submenu, which lists all the notes. if there are no notes, we'll show a // disabled "(empty)" menuitem. function updatejetpackmenu() { jetpack.menu.set({ label: "notes", menu: new jetpack.menu(notes.length > 0 ? notes : [{ label: "(empty)", disabled: true }]) }); } // modify the page's context menu by sneaking in before it's shown. if there's // a selection, add a note menuitem that makes a new note. otherwise, don't // modify th...

Venkman Introduction - Archive of obsolete content
add-ons. the installation process is two steps. first, from within the browser you want to host the debugger application, visit the firefox add-ons page and click on the "install" link for the most recent version. when the download is complete, restart your browser (some windows users may also need to restart their computer as well). you can then access the debugger via a new, dynamically created menuitem in the tools menu of that browser, or else restart the browser with a special debugger option. to see which version of venkman you have, type /version in the interactive session view. for more information about the latest improvements and versions, see the venkman development page. there are two ways to start the debugger: from firefox, you can start it by selecting javascript debugger from ...

Elements - Archive of obsolete content
characteristics of an existing element. for example, use the value 'xul:button' to create an element that is displayed like a button. the part before the colon is a namespace prefix so you must declare the xul namespace as well. not all tags have a unique display type. the following xul display types may be used: browser, button, checkbox, description, editor, grippy, iframe, image, label, menu, menuitem, menubar, progressmeter, radio, resizer, scrollbar, scrollbox, spacer, splitter, titlebar, treechildren and treecol. you may also use a number of html, mathml and svg tags. the 'display' attribute does not work unless the extends attribute is set, see bug bug 119389. in that case, put the value of the display attribute into the extends attribute. inheritstyle - the inheritstyle attribute indicat...

accesskey - Archive of obsolete content
this should be one of the characters that appears in the label attribute for the element. on non-macintosh platforms, the character on the element's label matching the accesskey is underlined. for example, when a menu labeled 'file' has an accesskey of 'f', the generated label will be 'file'. ...

allowevents - Archive of obsolete content
eir children; instead they are retargeted to the listitem and titlebar element itself. this means that elements placed inside a listitem do not respond to events, and instead clicking the mouse simply selects that item within the list. by setting the allowevents attribute to true, this special behavior is disabled, and the events are targeted the same as other elements. for menu, menuseparator, menuitem and treecol elements, as well as menu buttons, and the popup datepicker, mouse events are also retargeted to the element itself. however, the allowevents attribute is handled in a different way. instead, the allowevents may be set to true on a descendant instead. this does the same thing in that it allows events to be targeted normally, but allows this to be different for each descendant. this ...

closemenu - Archive of obsolete content
auto this, the default value if the closemenu attribute is not specified, closes up the menu and all parent menus. ...

disabled - Archive of obsolete content
suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. // disabling an element document.getelementbyid('buttonremove').setattribute("disabled", "disabled"); // enabling back an element by removing the "disabled" attribute document.getelementbyid('buttonremove').removeattribute("disabled"); firefox 3.5 note for keyset elements, support for this a...

keytext - Archive of obsolete content
« xul reference home keytext type: string a label for the keyboard shortcut. this text would appear next to a menuitem label if that menuitem is associated with the key element via its key attribute. ...

label - Archive of obsolete content
« xul reference home 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. see also treeitem.label, <label> element examples in javascript <label value="whaw" id="the-big-label" command="the-big-button"/> <button id="the-big-button" label="click me" oncommand="alert(document.getelementbyid('the-big-label').value)"/> <label id="mylabel" value="my label"/> <button label="click me" oncommand="document.getelementbyid('mylabel').setattribute('value','value changed');" /> <checkbox label="my checkbox" id="mycheckbox"/> <button label="another click" oncommand="document.getelementbyid('mycheckbox...

menuactive - Archive of obsolete content
« xul reference home menuactive type: boolean this attribute is set on an item in a menu when it is being hovered over. typcially, the theme will use this to highlight the item. a dommenuitemactive event will be sent to the item when the item is hovered over, and a dommenuiteminactive event will be sent to the item when the selection moves away. ...

name - Archive of obsolete content
« xul reference home see also menuitem.name preference.name query.name ...

statustext - Archive of obsolete content
« xul reference home statustext type: string used to set the text that appears on the status bar when the user moves the mouse over the element. mozilla doesn't adjust the status bar automatically however. this attribute serves only as a place to keep the text. in firefox, this text is automatically placed in the statusbar for menuitems on the menu bar. example <!-- sets the status message when mouse is over buttons --> <button label="connect" statustext="connect to remote server" onmouseover="setstatusmessage(this)" onmouseout="clearstatusmessage()"/> <button label="ping" statustext="ping the server" onmouseover="setstatusmessage(this)" onmouseout="clearstatusmessage()"/> <statusbar> <statusbarpanel id="mystatuspanel" label="" flex="1"/> <spacer flex="1"/> </st...

type - Archive of obsolete content
see button.type browser.type colorpicker.type datepicker.type editor.type listcell.type listitem.type menuitem.type notification.type prefwindow.type query.type script.type textbox.type toolbarbutton.type treecol.type ...

command - Archive of obsolete content
the event was fired. false otherwise. ...

Introduction to XUL - Archive of obsolete content
ndows 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/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu label="file"> <menupopup> <menuitem label="hello world!" onclick="alert('hello world!\n');"/> </menupopup> </menu> </menubar> <html:iframe id="content-frame" src="contentframe.html" flex="100%"/> </window> the beginning of this example, down through the window tag, is the standard preamble. notice that the example window tag has an id attached to it. strictly speaking, that is unnecessary for this example. however...

contains - Archive of obsolete content
...

menulist.appendItem - Archive of obsolete content
« xul reference home appenditem( label, value, description ) return type: element creates a new menuitem element and adds it to the end of the menulist. you may optionally set a value and description. the function returns the new item. see also appenditem ...

OpenClose - Archive of obsolete content
omemenu.open = true; this single line of code will open a menu referenced by the variable 'somemenu'. note that the open property applies to the menu or button, not to the menupopup. here is a complete example which uses a button to open a menu: <button label="open menu" oncommand="document.getelementbyid('editmenu').open = true;"/> <menu id="editmenu" label="edit"> <menupopup> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </menu> this technique may be used for both menupopups that use the menu tag, the button tag and the toolbarbutton tag. for menupopups attached to other elements using the popup or context attributes, see opening a popup below. as with other ways of opening a menu, the popupshowing event will be fired to pr...

Special per-platform menu considerations - Archive of obsolete content
l selecting this item will show the windows for all applications. checkforupdates the item that opens the update dialog for the application, for applications that have one (such as seamonkey; firefox does not have this item). the last five items aren't normally used but are listed for completeness. here is an example: <menubar> <menu label="tools"> <menupopup> <menuitem label="spell check"/> <menuitem id="menu_preferences" label="preferences" oncommand="window.opendialog('options.xul', '_new', 'chrome');"/> </menupopup> </menu> </menubar> this menu item will be placed on the application menu on the macintosh but left in the tools menu on other platforms. when moved to the application menu, the label and shortcut keys are overridde...

PopupKeys - Archive of obsolete content
enu 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 selected, the menu will open. escape closes the menu. if a chain of submenus is open, only one level of menus is closed. tab/f10 closes all menus in a chain of submenus. when letter keys are pressed, the accesskeys within the menu are selected. if an access key is a pressed that does not correspond to an it...

accessibleType - Archive of obsolete content
1008 xulimage 1009 xullink 100a xullistbox 100b xullistcell 1026 xullisthead 1024 xullistheader 1025 xullistitem 100c xulmenubar 100d xulmenuitem 100e xulmenupopup 100f xulmenuseparator 1010 xulpane 1011 xulprogressmeter 1012 xulscale 1013 xulstatusbar 1014 xulradiobutton 1015 xulradiogroup 1016 ...

control - Archive of obsolete content
« xul reference control type: element id gets and sets the value of the control attribute. see also menuitem.control radio.control tab.control ...

description - Archive of obsolete content
...

selected - Archive of obsolete content
...

Style classes - Archive of obsolete content
« xul reference home alert-icon chromeclass-toolbar error-icon groove header indent listcell-iconic listitem-iconic menuitem-iconic menuitem-non-iconic message-icon monospace plain question-icon small-margin statusbarpanel-iconic statusbarpanel-iconic-text statusbarpanel-menu-iconic text-link thin tree-splitter treecol-image ...

Special Condition Tests - Archive of obsolete content
ontainer attribute instead. <button label="houses in my neighbourhood" type="menu" datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood"> <template> <rule iscontainer="true"> <menupopup> <menu uri="rdf:*" label="rdf:http://purl.org/dc/elements/1.1/title"/> </menupopup> </rule> <rule> <menupopup> <menuitem uri="rdf:*" label="rdf:http://www.xulplanet.com/rdf/address"/> </menupopup> </rule> </template> </button> the only difference in the code in this example is that the order of the rules has been switched around, the condition check for house has been removed and the iscontainer attribute has been added. since the iscontainer attribute is set to true, the rule will match as long as the...

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
sition="8"/> </hbox> </toolbar> <!-- mail, message --> <hbox id="toolbar_button_box"> <toolbarbutton id="custom-button-1" position="15"/> </hbox> <!-- composer --> <toolbar id="edittoolbar"> <toolbarbutton id="custom-button-1" position="18"/> </toolbar> <!-- chat --> <menubar id="mainmenu"> <menu id="custom-menu" position="4" label="custom" accesskey="c"> <menupopup> <menuitem id="custom-item-1" label="custom item 1" accesskey="1" tooltiptext="my custom menu item" oncommand="custombutton[1]()" /> </menupopup> </menu> </menubar> <!-- calendar --> <toolbar id="calendar-bar"> <toolbarbutton id="custom-button-1" position="10"/> </toolbar> <!-- button details --> <toolbarbutton id="custom-button-1" label="custom" ...

Adding Event Handlers - Archive of obsolete content
iles example a command handler can be placed on the find and cancel buttons in the find files dialog. pressing the find button should start the search. because we aren't going to implement this part yet, we'll leave it out for now. however, pressing the cancel button should close the window. the code below shows how to do this. while we're at it, let's add the same code to the close menu item. <menuitem label="close" accesskey="c" oncommand="window.close();"/> ... <button id="cancel-button" label="cancel" oncommand="window.close();"/> two handlers have been added here. the oncommand attribute was added to the close menu item. by using this handler, the user will be able to close the window by clicking the menu item with the mouse or by selecting it with the keyboard. the oncommand handle...

Broadcasters and Observers - Archive of obsolete content
ce the main reason for using broadcasters is to have attributes forwarded to multiple places. you should only use broadcasters when you need multiple elements that observe an attribute. below, some additional observers are defined: <broadcaster id="offline_command" label="offline" accesskey="f"/> <keyset> <key id="goonline_key" observes="offline_command" modifiers="accel" key="o"/> </keyset> <menuitem id="offline_menuitem" observes="offline_command"/> <toolbarbutton id="offline_toolbarbutton" observes="offline_command"/> in this example, both the label and the accesskey will be forwarded from the broadcaster to the key, menu item and the toolbar button. the key won't use any of the received attributes for anything, but it will be disabled when the broadcaster is disabled. you can use a broa...

Creating a Wizard - Archive of obsolete content
sheet href="chrome://global/skin/" type="text/css"?> <wizard id="example-window" title="select a dog wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <wizardpage> <description> this wizard will help you select the type of dog that is best for you." </description> <label value="why do you want a dog?"/> <menulist> <menupopup> <menuitem label="to scare people away"/> <menuitem label="to get rid of a cat"/> <menuitem label="i need a best friend"/> </menupopup> </menulist> </wizardpage> <wizardpage description="dog details"> <label value="provide additional details about the dog you would like:"/> <radiogroup> <caption label="size"/> <radio value="small" label="small"/> <rad...

Manipulating Lists - Archive of obsolete content
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. for instance the selecteditem of a menulist will be the menuitem that is selected. if no item is selected, selectedindex will return -1, while selecteditem will return null. getting the selected item these two properties are commonly inspected during a select event, as in the following example: example 2 : source view <listbox id="thelist" onselect="alert(this.selecteditem.label);"> <listitem label="short"/> <listitem label="medium"/> <listitem label...

Modifying the Default Skin - Archive of obsolete content
means that the browser menu bar, the bookmarks menu bar and even the find files menu bar will be red. skin packages to have the change affect only one window, change the style sheet associated with that xul file. for example, to add a red border around the menu commands in the bookmarks manager window, add the following to bookmarksmanager.css in the classic.jar or your favorite skin archive. menuitem { border: 1px solid red; } if you look in one of the skin archives, you will notice that each contain a number of style sheets and a number of images. the style sheets refer to the images. you should avoid putting references to images directly in xul files if you want your content to be skinnable. this is because a particular skin's design might not use images and it may need some more comple...

More Button Features - Archive of obsolete content
pecify the label attribute on the button, it will override any content placed inside the button. button with menupopup you can place a menupopup inside the button to cause a menu to drop down when the button is pressed, much like the menulist. however, in this case you must set the type attribute to the value menu. example 5 : source view <button type="menu" label="device"> <menupopup> <menuitem label="printer"/> <menuitem label="mouse"/> <menuitem label="keyboard"/> </menupopup> </button> in this example, the user may click the button to pop up a menu containing three items. note that selecting one of these menu items does not change the label on the button, unlike a menulist. this type of button is intended to be used like a menu, with scripts attached to each item to perfor...

More Event Handlers - Archive of obsolete content
wing' event is sent to a popup just before it is displayed. the default action is to display the popup. if the default action is prevented, the popup will not be displayed. the default action can be prevented with the event object's preventdefault method, as in the example below. example 3 : source view <button label="types" type="menu"> <menupopup onpopupshowing="event.preventdefault();"> <menuitem label="glass"/> <menuitem label="plastic"/> </menupopup> </button> alternatively, for attribute event listeners, you can just return false from the code. note that preventing the default action is not the same as stopping event propagation with the stoppropagation method. even if the default action has been prevented, the event will still continue to propagate. similarly, calling the stopp...

RDF Datasources - Archive of obsolete content
you will notice that the value of the ref attribute in the example is http://www.some-fictitious-zoo.com/mammals which corresponds to one of the seq elements in the rdf file. th...

Skinning XUL Files by Hand - Archive of obsolete content
the parent-child relationship is more economical than the aforementioned contextual subgrouping, which searches the entire subtree of an element for the subelement. finally, mozilla provides some ...

Templates - Archive of obsolete content
e'll find out how to populate elements with data. populating elements xul provides a method in which we create elements from data supplied by rdf, either from an rdf file or from an internal datasource. numerous datasources are provided with mozilla such as bookmarks, history and mail messages. more details on these will be provided in the later section. usually, elements such as treeitems and menuitems will be populated with data. however, you can use other elements if you want although they are more useful for specialized cases. nevertheless, we'll start with these other elements because trees and menus require more code. to allow the creation of elements based on rdf data, you need to provide a simple template which will be duplicated for each element that is created. essentially, you provi...

XUL element attributes - Archive of obsolete content
is the uri of an rdf predicate that serves as a secondary key for sorted content. statustext type: string used to set the text that appears on the status bar when the user moves the mouse over the element. mozilla doesn't adjust the status bar automatically however. this attribute serves only as a place to keep the text. in firefox, this text is automatically placed in the statusbar for menuitems on the menu bar. style type: css inline style css style rules to be applied to the element. syntax is as in the html style attribute. it is preferred to put style rules in style sheets. template type: id for template generated elements, this attribute may optionally be placed on the root node (the element with the datasources attribute) to refer to a template that exists else...

The Implementation of the Application Object Model - Archive of obsolete content
e the xul and write over the original file (thus allowing local changes to a local file to be reflected right in the xul). referencing local data: the localdata attribute a tag that references local rdf data does so by using the localdata attribute, which gives the uri of the local data that should be merged in with the xul content tree. examples of tags that can reference local data are menu, menuitem, menubar, toolbox, toolbar, treebody, and treeitem. todo: outline the naming scheme for local data. give an example once i actually know what the naming scheme will be. talk to john mcmullen about 5.0 preferences and figure out where localdata will need to be used (likely on every form element control) talk to steve elmer. it's likely that this might be the desirable solution for buttons that...

arrowscrollbox - Archive of obsolete content
suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. smoothscroll type: boolean true initially enables smooth scrolling for the corresponding arrowscrollbox, false disables it. currently, smooth scrolling supports horizontal arrowscrollboxes only. tabindex type: integer the tab order of the element. the tab order is the ...

broadcaster - Archive of obsolete content
hen you want elements to respond to a state change. any elements that are observing the broadcaster will share the attributes placed on the broadcaster. for instance, if the broadcaster has a label attribute, the observers will use that label. if the label changes, the labels of the observers will update automatically. an onbroadcast event will be sent to the observers when a change is made. for menuitems or buttons that just want to have their disabled status set when the feature should be disabled, you should use a command element instead. more information is available in the broadcasters and observers xul tutorial. examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment...

colorpicker - Archive of obsolete content
suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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...

command - Archive of obsolete content
suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. 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. oncommand type: script code this event handler i...

datepicker - Archive of obsolete content
suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. firstdayofweek type: integer which day of the week to display as the first day in the grid. the values range from 0 to 6, where 0 is sunday and 6 is saturday. the default value is determined by the locale, so only use this attribute if you want to override it. readonly type: boolean if ...

dialogheader - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) 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; } description type: string descriptive text to appear in addition to the dialog title. title type: string the text to appear in the title bar of the window. properties inherited properties align, , allowevents, , boxobject,...

elements - Archive of obsolete content
broadcasterset button browser c checkbox caption colorpicker column columns commandset command conditions content d deck description dialog dialogheader e editor grid grippy groupbox h hbox i iframe image k key keyset l label listbox listcell listcol listcols listhead listheader listitem m member menu menubar menuitem menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane prefwindow progressmeter r radio radiogroup resizer richlistbox richlistitem resizer row rows rule s script scrollbar scrollbox scrollcorner separator spacer splitter stack statusbar statusbarpanel stringbundle string...

keyset - Archive of obsolete content
suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. properties 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, ,...

listbox - Archive of obsolete content
suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. disablekeynavigation type: boolean if this attribute is not used, the user can navigate to specific items within the element by pressing keys corresponding to letters in the item's label. this is done incrementally, so typing more letters with select more specific items. this feature may be disab...

listhead - Archive of obsolete content
suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, ...

listheader - Archive of obsolete content
suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. 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. inherited from xul element align, allowevents, al...

notification - Archive of obsolete content
examples <notification label="this is a warning"/> attributes image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. persistence type: integer the persistence may be set to a non-zero value so that the notificationbox's removetransientnotifications method does not remove them. this may be used to close a set of notifications as a group without affecting other notifications. priorit...

preference - Archive of obsolete content
suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. instantapply type: boolean if true, the preference will be changed as soon as the user interface is modified. inverted type: boolean for boolean preferences, if this attribute is set to true, it indicates that the value of the preference is the reverse of the user interface element atta...

radiogroup - Archive of obsolete content
suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. focused type: boolean this attribute is true if the element is focused. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a prefwindow. more information is available in the preferences system article. tabin...

richlistbox - Archive of obsolete content
suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. disablekeynavigation type: boolean if this attribute is not used, the user can navigate to specific items within the element by pressing keys corresponding to letters in the item's label. this is done incrementally, so typing more letters with select more specific items. this feature may be disa...

scale - Archive of obsolete content
suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged). the default value is 1. min type: integer the minimum value the control'...

tabs - Archive of obsolete content
suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. onclosetab type: script code this script will be called when the close tab button is clicked. onnewtab not in firefox type: script code this script will be called when the new tab button is clicked. onselect type: script code this event is sent to the tabs element when this ta...

textbox - Archive of obsolete content
suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. focused type: boolean this attribute is true if the element is focused. emptytext deprecated since gecko 2 type: string a string that appears in the textbox when it has no value. this is superseded by the placeholder attribute in gecko 2.0. the old name is retained for compatibility, but...

timepicker - Archive of obsolete content
suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. hideseconds type: boolean indicates whether to show the seconds field. readonly type: boolean if set to true, then the user cannot change the value of the element. however, the value may still be modified by a script. increment type: integer in...

tree - Archive of obsolete content
suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it 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. disablekeynavigation type: boolean if this attribute is not used, the user can navigate to specific items within the element by pressing keys corresponding to letters in the item's label. this is done incrementally, so typing more letters with select more specific items. this feature may be disab...

treecell - Archive of obsolete content
ecells. when the user double-clicks an editable cell, a text field appears in which the user can edit the contents of the cell. the tree and treecol must also be marked as editable in order for this to work. the tree must be a content tree for this to work on treecells. 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. mode type: one of the values below for columns that are progress meters, this determines the type of progress meter to use. none no progress meter is displayed. the cell text is displayed instead. normal the cell uses its value attribute to determine the amount ...

wizardpage - Archive of obsolete content
be placed inside the wizardpage element. more information is available in the xul tutorial. attributes description, label, next, pageid properties next, pageid attributes description type: string descriptive text to appear in addition to the dialog title. 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. next type: id set to the pageid of the next wizardpage after this one. when set, the page with this pageid is displayed when the next button is pressed. this can be used to create wizards that do not have a linear sequence. if one of the pages has a next attribute, all of the ...

XULRunner tips - Archive of obsolete content
(i keep them in source control to be sure i can maintain compatibility) component viewer need custom build, first of all. what else? extension developer's extension extension developer's extension is a useful tool, featuring live xul editor and javascript shell. to install the extension into your application you'll need to hack its install.rdf (see above). you'll probably also want to create menuitems that let you open the js shell and other tools provided by the extension. branding branding is a chrome package containing product-specific information (e.g. the product name, vendor, and logo). some xulrunner components (in particular, the extension manager) depend on branding, in the sense that they expect to find certain strings in chrome://branding/locale/brand.dtd and chrome://branding/l...

Mozilla accessibility architecture
events on nodes within them, and consequently fire the appropriate accessible event. this happens in the handleevent() method. note: this chart is not complete, consult the handleevent() method to see the rest. ...

Performance best practices for Firefox front-end engineers
e graphics team members are in the us eastern time zone (utc-5 or utc-4 during daylight saving time), so let that information guide your timing when you ask questions in the gfx room . adding nodes using documentfragments sometimes you need to add several dom nodes as part of an existing dom tree. for example, when using xul <xul:menupopup>s, you often have script which dynamically inserts <xul:menuitem>s. inserting items into the dom has a cost. if you're adding a number of children to a dom node in a loop, it's often more efficient to batch them into a single insertion by creating a documentfragment, adding the new nodes to that, then inserting the documentfragment as a child of the desired node. a documentfragment is maintained in memory outside the dom itself, so changes don't cause reflow.

Browser API
rowseraudioplaybackchange 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 <iframe>. mozbrowsererror sent when an error occurs while trying to load content within a browser <iframe>. mozbrowserfindchange sent when a search operation is performed on the browser <iframe> content (see htmliframeelement search methods.) mo...

Localization technical reviews
not be any utf-7 encodings in the file toolkit/chrome/global/intl.properties. for more info about utf-7 in firefox, see bug 441876. more intl.properties checkpoints, cont we also check the plural rule for the locale, that the general.useragent.locale is set to the locale code, that accept-lang shows the locale code(s) (like ab, ab-cd,...) and is followed by en and en-us, and finally that intl.menuitems.insertseparatorbeforeaccesskeys = true, where "true" should be left untranslated. inspect firefox-l10n.js we ensure that there are no odd preferences, or #filter substitutions for general.useragent.locale. most locales should have the following: #filter substitution pref("general.useragent.locale", "@ab_cd@") how it all works a large part of the review process takes place before you even...

Gecko states
ed 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 the state of a three-state check box or toolbar button is not determined. the check ...

nsIAccessibleProvider
xultabbox 0x00001018 a combination of a tabs object and a tabpanels object. x...

nsIMenuBoxObject
openedwithkey boolean true if the menubar was opened using the keyboard; otherwise false. note: for gecko 2.0, the openedwithkey attribute exists on the nsimenuboxobject_mozilla_2_0_branch interface. subsequent gecko versions will have the attribute on the nsimenuboxobject interface. methods handlekeypress() boolean handlekeypress( in nsidomkeyeven...

Add to iPhoto
image. if (document.getelementbyid("contentareacontextmenu")) { document.getelementbyid("contentareacontextmenu").addeventlistener("popupshowing", iphoto.onpopup, false); } responding when the context menu is clicked when the user right-clicks an image, our handler gets called: onpopup: function() { var node = iphoto.getcurrentnode(); var item = document.getelementbyid("add-to-iphoto_menuitem"); if (item) { item.hidden = (node == null); // hide it if we're not on an image } } this code finds the image node the user right-clicked in by calling our getcurrentnode() method, then sets the hidden state of the "add image to iphoto" menu item based on whether or not an image node was found. the code to identify the node looks like this: getcurrentnode: function() { var node = ...

Accessibility Inspector - Firefox Developer Tools
sue with the selected node. for each type of issue, there is a learn more link to further information on mdn web docs about the issue. the menu items act as toggles. select the item to view that type of issue; select the item again to clear the display of issues of that type. issues with a particular item are always displayed in the checks subpanel as you browse the tree. the check for issues menuitems are a quick way to view all and only those items that have issues. simulate the accessibility inspector offers (as of firefox 70), a simulator that lets you see what a web page would look like to users with various forms of color vision deficiency (better known as "color blindness"), as well as contrast sensitivity loss. notable related features when the accessibility features are turned on,...

DevTools API - Firefox Developer Tools
preventclosingonkey boolean, optional. if true the tool won't close if its keybinding is pressed while it is active. default: false inmenu boolean, optional. if true the tool will be shown in the developer menu. default: false menulabel string, optional. a label for the developer menu item. default: {label} accesskey string, optional. accesskey for the developer menu <xul:menuitem>. example here's a minimal definition for a tool. let def = { id: "my-tool", label: "my tool", icon: "chrome://browser/skin/devtools/tool-webconsole.svg", url: "about:blank", istargetsupported: target => true, build: (window, toolbox) => new mytoolpanel(window, toolbox) }; // register it. gdevtools.registertool(def); targettype fixme: hosttype fixme toolpanel the toolpanel...

Index - Firefox Developer Tools
nt. 8 dom inspector internals code, tools, internals, organisation, source there are three main facets to dom inspector. the one you are likely to be most familiar with is its inspector.xul-based primary ui. this is the two-pane inspector that appears when ctrl+shift+i (or cmd+shift+i) is pressed from one of the applications for which dom inspector has explicit support (i.e., menuitems placed via overlay). 9 introduction to dom inspector dom_inspector the dom inspector is a mozilla extension that you can access from the tools > web development menu in seamonkey, or by selecting the dom inspector menu item from the tools menu in firefox and thunderbird, or by using ctrl/cmd+shift+i in either application. dom inspector is standalone; it supports all toolkit ...

Document.popupNode - Web APIs
ly set for popups attached via the popup or context attributes. for other types of popups, the value is not changed. in these other cases, for example when calling the popup's showpopup method, you may wish to set the popupnode property directly beforehand. this property applies only to xul documents. syntax var node = document.popupnode; example <menupopup id="toolbarcontextmenu"> ... <menuitem oncommand="mailnewscore.deletebutton(document.popupnode)"> ... </menupopup> ...

Element: show event - Web APIs
the show event is fired when a contextmenu event was fired on/bubbled to an element that has a contextmenu attribute. bubbles no cancelable no interface event event handler property onshow examples <div contextmenu="test"></div> <menu type="context" id="test"> <menuitem label="alert" onclick="alert('the alert label has been clicked')" /> </menu> <script> document.getelementbyid("test").addeventlistener("show", function(e){ alert("the context menu will be displayed"); }, false); </script> specifications specification status html5the definition of 'show event' in that specification. recommendation ...

Event.explicitOriginalTarget - Web APIs
hat case currenttarget will show the parent and explicitoriginaltarget will show the text node. explicitoriginaltarget differs from originaltarget in that it will never contain anonymous content. example this property can be used with <command> to get the event details of the original object calling the command. function mycommand(ev) { alert(ev.explicitoriginaltarget.nodename); // returns 'menuitem' } <xul:command id="my-cmd-anaction" oncommand="mycommand(event);"/> <xul:menulist> <xul:menupopup> <xul:menuitem label="get my element name!" command="my-cmd-anaction"/> </xul:menupopup> </menulist> specifications this is a mozilla-specific property. defined in /dom/public/idl/events/nsidomnsevent.idl this event property is not defined in the w3.org dom level 2 events ...

The HTML DOM API - Web APIs
barprop navigator window deprecated web app and browser integration interfaces external obsolete web app and browser integration interfaces...

Index - Web APIs
ext tracks 1832 mscleareffects mscleareffects no summary! 1833 htmlmenuelement api, draft, experimental, htmlmenuelement, interface, reference the htmlmenuelement interface provides special properties (beyond those defined on the regular htmlelement interface it also has available to it by inheritance) for manipulating <menu> elements. 1834 htmlmenuitemelement api, deprecated, draft, htmlmenuitemelement, interface, reference the htmlmenuitemelement interface provides special properties (beyond those defined on the regular htmlelement interface it also has available to it by inheritance) for manipulating <menuitem> elements. 1835 htmlmetaelement api, html dom, interface, reference the htmlmetaelement interface conta...

Web APIs
telement htmlformcontrolscollection htmlformelement htmlframesetelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmlhyperlinkelementutils htmliframeelement htmlimageelement htmlinputelement htmlisindexelement htmlkeygenelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement htmlmarqueeelement htmlmediaelement htmlmenuelement htmlmenuitemelement htmlmetaelement htmlmeterelement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloptionscollection htmlorforeignelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement htmlshadowelement htmlslotelement htmlsourceelement htmlspa...

Using ARIA: Roles, states, and properties - Accessibility
e. authors must assign an aria role and the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate aria semantics (via use of an appropriate html element). addition of aria semantics only exposes extra information to a browser's accessibility api, and does not affect a page's dom. roles widget roles button checkbox gridcell link menuitem menuitemcheckbox menuitemradio option progressbar radio scrollbar searchbox separator (when focusable) slider spinbutton switch tab tabpanel textbox treeitem composite roles the techniques below describe each composite role as well as their required and optional child roles. combobox grid (including row, gridcell, rowheader, columnheader roles) listbox (including option ...

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
e objects marked [inserted by system]. windows will add those objects to your hierarchy for you. ...

<button>: The Button element - HTML: Hypertext Markup Language
d, labelable, and submittable form-associated element, palpable content. permitted content phrasing content but there must be no interactive content tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role button permitted aria roles checkbox, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab dom interface htmlbuttonelement attributes this element's attributes include the global attributes. autofocus html5 this boolean attribute specifies that the button should have input focus when the page loads. only one element in a document can have this attribute. autocomplete this attribute on a <button> is...

<command>: The HTML Command element - HTML: Hypertext Markup Language
the html command element (<command>) represents a command which the user can invoke. commands are often used as part of a context menu or toolbar. however, they can be used anywhere on the page. the <command> element is included in the w3c specification, but not in the whatwg specification, and browser support is nonexistent. you should use the <menuitem> element instead, although that element is non-standard and only supported in edge and firefox. content categories flow content, phrasing content, metadata content. permitted content none, it is an empty element. tag omission the start tag is mandatory, but, as it is a void element, the use of an end tag is forbidden. permitted parent elements <colgroup> only, though it can be implicitly defin...

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
list attribute: combobox type=text with no list attribute: textbox with list attribute: combobox type=url with no list attribute: textbox with list attribute: combobox type=color|date|datetime-local|file|hidden|month|password|time|week: no corresponding role permitted aria roles type=button: link, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab type=checkbox: button when used with aria-pressed, menuitemcheckbox, option, switch type=image: link, menuitem, menuitemcheckbox, menuitemradio, radio, switch type=radio: menuitemradio type=text with no list attribute: combobox, searchbox, spinbutton type=color|date|datetime|datetime-local|email|file|hidden|month|num...

<li> - HTML: Hypertext Markup Language
omission the end tag can be omitted if the list item is immediately followed by another <li> element, or if there is no more content in its parent element. permitted parents an <ul>, <ol>, or <menu> element. though not a conforming usage, the obsolete <dir> can also be a parent. implicit aria role listitem when child of an ol, ul or menu permitted aria roles menuitem, menuitemcheckbox, menuitemradio, option, none, presentation, radio, separator, tab, treeitem dom interface htmllielement attributes this element includes the global attributes. value this integer attribute indicates the current ordinal value of the list item as defined by the <ol> element. the only allowed value for this attribute is a number, even if the list is displaye...

HTML elements reference - HTML: Hypertext Markup Language
start and end tags without interpreting the html in between and using a monospaced font. the html 2 standard recommended that lines shouldn't be broken when not greater than 132 characters. <marquee> the html <marquee> element is used to insert a scrolling area of text. you can control what happens when the text reaches the edges of its content area using its attributes. <menuitem> the html <menuitem> element represents a command that a user is able to invoke through a popup menu. this includes context menus, as well as menus that might be attached to a menu button. <multicol> the html multi-column layout element (<multicol>) was an experimental element designed to allow multi-column layouts and must not be used. <nextid> <nextid> is an obsol...

title - HTML: Hypertext Markup Language
ect, please clone https://github.com/mdn/interactive-examples and send us a pull request. some typical uses: labeling <iframe> elements for assistive technology providing a programmatically associated label for an <input> element as a fallback for a real <label> labeling controls in data tables additional semantics are attached to the title attributes of the <link>, <abbr>, <input>, and <menuitem> elements. multiline titles the title attribute may contain several lines. each u+000a line feed (lf) character represents a line break. some caution must be taken, as this means the following renders across two lines: html <p>newlines in <code>title</code> should be taken into account, like <abbr title="this is a multiline title">example</abbr>.</p> result title attribute inheritance if...

HTML documentation index - HTML: Hypertext Markup Language
nts, navigation, reference, site navigation, ui, ux, user interface, user experience, web, menu, menus the html <menu> element represents a group of commands that a user can perform or activate. this includes both list menus, which might appear across the top of a screen, as well as context menus, such as those that might appear underneath a button after it has been clicked. 156 <menuitem> deprecated, element, html, html5, navigation, navigation menus, reference, ui, ux, user interface, user experience, web, menuitem the html <menuitem> element represents a command that a user is able to invoke through a popup menu. this includes context menus, as well as menus that might be attached to a menu button. 157 <meta>: the document-level metadata element documen...