Search completed in 1.16 seconds.
220 results for "menuitem":
Your results are loading. Please wait...
MenuItems - Archive of obsolete content
features of the menuitem element the menuitem element has a number of features beyond just being a label for a menu command.
... <keyset> <key id="open-key" modifiers="accel" key="o"/> <key id="close-key" modifiers="accel" key="c"/> </keyset> <menubar> <menu label="view"> <menupopup> <menuitem label="open" key="open-key"/> <menuitem label="close" key="close-key"/> </menupopup> </menu> </menubar> the two menuitems are associated with a key using the key attribute.
... <menuitem label="first window" acceltext="1"/> here the keyboard shortcut label will be '1', however you will need to write code to handle the key as well.
...And 35 more matches
menuitem - Archive of obsolete content
attributes acceltext, accesskey, allowevents, autocheck, checked, closemenu, command, crop, description, disabled, image, key, label, name, selected, tabindex, type, validate, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value style classes menuitem-iconic, menuitem-non-iconic examples <menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option 3" value="3"/> <menuitem label="option 4" value="4"/> </menupopup> </menulist> attributes acceltext type: string text that appears beside the menu label to indicate the shortcut key (ac...
... note: if the checked attribute is set to true, and you persist its value via the persist attribute, mozilla will fail to persist its value when the menuitem is unchecked because of bug 15232.
...do menuitem.setattribute("checked", "false") instead of menuitem.removeattribute("checked")) when the user unchecks the menuitem, as a value of false will both correctly hide the checkmark and persist its hidden state.
...And 18 more matches
menuitem.type - Archive of obsolete content
« xul reference home type type: one of the values below can be used to create checkable menuitems or for radio button menuitems.
... checkbox the menuitem is checked.
... the checked attribute determines whether the menuitem is checked or not.
...And 3 more matches
<menuitem> - HTML: Hypertext Markup Language
WebHTMLElementmenuitem
the html <menuitem> element represents a command that a user is able to invoke through a popup menu.
...(if specified, the type attribute of the <menu> element must be popup; if missing, the parent element of the <menu> must itself be a <menu> in the popup menu state.) permitted aria roles none dom interface htmlmenuitemelement attributes this element includes the global attributes; in particular title can be used to describe the command, or provide usage hints.
... example html content <!-- a <div> element with a context menu --> <div contextmenu="popup-menu"> right-click to see the adjusted context menu </div> <menu type="context" id="popup-menu"> <menuitem type="checkbox" checked>checkbox</menuitem> <hr> <menuitem type="command" label="this command does nothing" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png"> commands don't render their contents.
...And 3 more matches
menuitem.name - Archive of obsolete content
« xul reference home name type: string name radio menuitems with the same name as put into a group.
... only one menuitem in each radio group can be checked at a time.
... example <toolbox> <menubar id="planets-menubar"> <menu id="planet-menu" label="planet"> <menupopup> <menuitem id="jupiter" label="jupiter" type="radio" name="planet"/> <menuitem id="saturn" label="saturn" type="radio" name="planet" checked="true"/> <menuitem id="uranus" label="uranus" type="radio" name="planet"/> </menupopup> </menu> </menubar> </toolbox> see also name and menus in the xul tutorial ...
HTMLMenuItemElement - Web APIs
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.
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmenuitemelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmenuitemelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesthis inte...
...rface has no properties, but inherits properties from: htmlelementmethodsthis interface has no methods, but inherits methods from: htmlelement specifications specification status comment html 5.1the definition of 'htmlmenuitemelement' in that specification.
menuitem-non-iconic - Archive of obsolete content
« xul reference home menuitem-non-iconic normally, menuitems have a margin to the left for an image or checkmark.
... this class may be used to remove this margin so that the menuitem appears on the left edge of the menupopup.
menuitem.key - Archive of obsolete content
« xul reference home key type: id set to the id of a key element whose key shortcut is displayed in the menuitem.
DOMMenuItemActive - Archive of obsolete content
the dommenuitemactive event is executed when a <menu> or a <menuitem> has been hovered or highlighted.
DOMMenuItemInactive - Archive of obsolete content
the dommenuiteminactive event is executed when a <menu> or a <menuitem> in no longer hovered or highlighted.
menuitem-iconic - Archive of obsolete content
« xul reference home menuitem-iconic use this class to have an image appear on the menuitem.
ROLE_MENUITEM
mapped to at-spi: role_menu_item atk: atk_role_menu_item ua: nsaccessibilitymenuitemrole msaa/ ia2: role_system_menuitem used by aria: menuitem xul: <menuitem/> ...
Menu - Archive of obsolete content
ArchiveMozillaJetpackUIMenu
jetpack.menu(menuitems) creates a menu with the given items.
... parameters menuitems an array of menuitems.
...the items property may be used to define an array of menuitems.
...And 30 more matches
Menus - Archive of obsolete content
<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.
... menuitem a single item to appear on a menu.
... when the user moves the mouse over a menuitem, it will highlight the item.
...And 19 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
<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.
...both menu and menuitem elements take the label attribute to set their labels.
...And 10 more matches
XUL controls - Archive of obsolete content
<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.
... <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.
...And 9 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
expand spot 3; this will disclose the area numbered 4, with several menuitem elements.
... look through the menuitem elements within this menupop element and determine where you want to add your new element.
... listing 3: additional content for overlay.xul <?xml version="1.0"?> <overlay id="helloworldoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="menu_toolspopup"> <menuitem id="helloworldmenuitem" label="hello, world!" insertbefore="sanitizeseparator" oncommand="window.opendialog('chrome://helloworld/content/clock.xul','clock','chrome,centerscreen,modal');"/> </menupopup> </overlay> phase 2: adding a function to display the time in phase 2, we will make it so that selecting the hello world menu item we created in phase 1 will display a window with the ti...
...And 8 more matches
Adding menus and submenus - Archive of obsolete content
the toolbox 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.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.
... the separator is usually displayed as a horizontal line that creates a logical division between different types of menuitem elements, keeping everything more organized.
...And 8 more matches
Index - Archive of obsolete content
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!
...And 8 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
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!
...And 8 more matches
Extensions - Archive of obsolete content
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.
... adding a new menuitem you might wish to add a new item to one of the 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.
...And 7 more matches
Building Menus With Templates - Archive of obsolete content
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 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.
...the menuitem elements however will be repeated for each result from the query.
...And 7 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" /> <...
.../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.
...And 7 more matches
ContextMenus - Archive of obsolete content
<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.
...typically, this will cause the menuitem's label to appear in the context menu in bold.
... <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').
...And 6 more matches
Simple Menu Bars - Archive of obsolete content
menuitem an individual command on a menu.
... 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...
...the commands themselves are created using the menuitem element.
...And 6 more matches
menulist - Archive of obsolete content
to create the drop-down, put a menupopup inside the menulist containing the choices as menuitem elements.
...etopopup, tabindex, value properties accessibletype, crop, description, disableautoselect, disabled, editable, editor, image, inputfield, itemcount, label, menuboxobject, menupopup, open, selectedindex, selecteditem, tabindex, value methods appenditem, contains, getindexofitem, getitematindex, insertitemat, removeallitems, removeitemat, select examples <menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option 3" value="3"/> <menuitem label="option 4" value="4"/> </menupopup> </menulist> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...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; } disableautoselect type: boolean if this attribute is true or omitted, the selected item on the menu will update to match what the user entered in the textbox.
...And 6 more matches
DOM Inspector internals - Firefox Developer Tools
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).
...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.
...And 5 more matches
Using third-party modules (jpm) - Archive of obsolete content
to install menuitem you'll need to have git command.
...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".
...And 4 more matches
MenuModification - Archive of obsolete content
this method will create a new menuitem element and insert it into the popup.
...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.
...And 4 more matches
menu - Archive of obsolete content
ArchiveMozillaXULmenu
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...
...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.
... 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.
...And 4 more matches
A XUL Bestiary - Archive of obsolete content
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.
...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.
... <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.
...And 3 more matches
MenuButtons - Archive of obsolete content
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.
... <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.
... <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.
...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.
... <menulist datasources="template-guide-photos4.rdf" ref="http://www.daml.org/2001/09/countries/country-ont#country" oncommand="applyfilter(event.target.value);"> <menupopup> <menuitem label="all"/> </menupopup> <template> <query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" object="?start"/> <triple subject="?country" predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> </query> <action> <menupop...
...up> <menuitem uri="?country" label="?countrytitle" value="?country"/> </menupopup> </action> </template> </menulist> the only difference between the previous example and this one is that the menulist element has some additional content added before the template.
...And 3 more matches
Localization - Archive of obsolete content
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.
...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...
...ey 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="&editmenu.label;" accesskey="&editmenu.acc...
...And 3 more matches
menuseparator - Archive of obsolete content
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.
...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.
... 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.
...And 3 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...
...ion(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 = nativemenu; this replaces the default menu with this one menuitem that says "show most recent window".
... notice how the "new window" and "new private window" menuitem's are missing.
...And 3 more matches
XUL Overlays
MozillaTechXULOverlays
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.
...<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"> <menuitem name="super stream player"/> </menu> </menupopup> </overlay> the result will be: ...
...And 3 more matches
<menu> - HTML: Hypertext Markup Language
WebHTMLElementmenu
(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>.
... 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.
... 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.
...And 3 more matches
Keyboard Shortcuts - Archive of obsolete content
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.
...to do this, also add a key attribute on the menuitem.
... example 2 : source view <keyset> <key id="paste-key" modifiers="accel" key="v" oncommand="alert('paste invoked')"/> </keyset> <menubar id="sample-menubar"> <menu id="edit-menu" label="edit" accesskey="e"> <menupopup id="edit-popup"> <menuitem id="paste-command" accesskey="p" key="paste-key" label="paste" oncommand="alert('paste invoked')"/> </menupopup> </menu> </menubar> the menuitem's key attribute, which here is paste-key is equal to the id of the defined key.
...And 2 more matches
More Menu Features - Archive of obsolete content
we've looked at placing menuitems and menuseparators in menupopups.
...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.
... <toolbox> <menubar id="findfiles-menubar"> <menu id="file-menu" label="file" accesskey="f"> <menupopup id="file-popup"> <menuitem label="open search..." accesskey="o"/> <menuitem label="save search..." accesskey="s"/> <menuseparator/> <menuitem label="close" accesskey="c"/> </menupopup> </menu> <menu id="edit-menu" label="edit" accesskey="e"> <menupopup id="edit-popup"> <menuitem label="cut" accesskey="t"/> <menuitem label="copy" accesskey="c"/> <menuitem label="paste" accesskey="p" disabled="true"/> </menupopup> </menu> </menubar> <toolbar id="findfiles-toolbar> here we have added two menus with various comm...
...And 2 more matches
Popup Menus - Archive of obsolete content
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.
...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.
...And 2 more matches
Using Remote XUL - Archive of obsolete content
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.
... <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu label="the mozilla organization"> <menupopup> <menuitem label="at a glance" value="https://www.mozilla.org/mozorg.html" /> <menuitem label="feedback" value="https://www.mozilla.org/feedback.html" /> <menuitem label="get involved" value="https://www.mozilla.org/get-involved.html" /> <menuitem label="newsgroups" value="https://www.mozilla.org/community.html" /> <menuitem label="license terms" value="https://www.mozilla.org/mpl/" /> <menuitem label="newsbot" value="https://www.mozilla.org/newsbot/" /> </menupopup> </menu> <menu label="developer docs"> <menupopup> <men...
...uitem label="roadmap" value="https://www.mozilla.org/roadmap.html" /> <menuitem label="projects" value="https://www.mozilla.org/projects/" /> <menuitem label="ports" value="https://www.mozilla.org/ports/" /> <menuitem label="module owners" value="https://www.mozilla.org/owners.html" /> <menuitem label="hacking" value="https://www.mozilla.org/hacking/" /> <menuitem label="get the source" value="https://www.mozilla.org/source.html" /> <menuitem label="build it" value="https://www.mozilla.org/build/" /> </menupopup> </menu> <menu label="testing"> <menupopup> <menuitem label="download" value="https://www.mozilla.org/releases/" /> <menuitem label="report a bug" value=...
...And 2 more matches
menupopup - Archive of obsolete content
<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.
... <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> <label value="right click for popup" context="clipmenu"/> attributes ignorekeys type: boolean if true, keyboard navigation between items in the popup is disabled.
... 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"/> ...
...And 2 more matches
mozbrowsercontextmenu
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 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.
...And 2 more matches
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...
... 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.
... <?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="htmltip3" label="foo3" tooltip="mytip3html" /> </popup> <popupset id="mainpopupset"> <tooltip id="mytip3html"> <html:div type="content"> <html:b>bold foo</html:b> </html:div> </tooltip> </popupset> </overlay> ...
PopupEvents - Archive of obsolete content
<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.
...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.
....getelementbyid("file-menupopup")) return; var filemenu = document.getelementbyid("file-menu"); filemenu.removeeventlistener("popupshown", filemenuopened, false); var openmenu = document.getelementbyid("open-menu"); openmenu.open = true; } </script> <menu id="file-menu" label="file"> <menupopup id="file-menupopup"> <menu id="open-menu" label="open"> <menupopup> <menuitem label="file..."/> <menuitem label="page"/> </menupopup> </menu> </menupopup> </menu> <button label="open" oncommand="openfilemenu();"/> when the button is pressed, the openfilemenu function is called.
...in this situation the command event has already been sent to the selected menuitem and the operation already carried out.
listitem - Archive of obsolete content
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.
... 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.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
...this property is available for menuitem and menuseparator elements in firefox 3.
radio - Archive of obsolete content
ArchiveMozillaXULradio
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.
... 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.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
...this property is available for menuitem and menuseparator elements in firefox 3.
tab - Archive of obsolete content
ArchiveMozillaXULtab
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.
... 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.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
...this property is available for menuitem and menuseparator elements in firefox 3.
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"...
...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.
... 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.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
tooltip - Archive of obsolete content
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.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
... 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.
The JavaScript input interpreter - Firefox Developer Tools
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.
...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.
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
checkbox-label div { color: black; -moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; } <div>lorem</div> firefox checkmenuitem div { color: black; height: 20px; -moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; } <div>lorem</div> firefox color-well div{ color: black; -moz-appearance: color-well; -webkit-appearance: color-well; } <div>lorem</div> safari input type=color continuous-capacity-level-indicator ...
... firefox removed in firefox 64 dualbutton firefox removed in firefox 64 groupbox firefox removed in firefox 64 menuarrow firefox removed in firefox 64 menubar firefox removed in firefox 64 menucheckbox firefox removed in firefox 64 menuimage firefox removed in firefox 64 menuitem firefox removed in firefox 64.
... menuitemtext firefox removed in firefox 64 menupopup firefox removed in firefox 64 menuradio firefox removed in firefox 64 menuseparator firefox removed in firefox 64 meterchunk firefox removed in firefox 64.
... radiomenuitem firefox removed in firefox 64.
Add a Context Menu Item - Archive of obsolete content
when it's clicked, the selection is sent to the main add-on code, which just logs it: var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text = window.getselection().tostring();' + ' self.postmessage(text);' + '});', onmessage: function (selectiontext) { console.log(selectiontext); } }); try it: run the add-on, load a web pa...
...typically you'd store the image in your add-on's "data" directory, and construct the url using self.data.url(): var self = require("sdk/self"); var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text = window.getselection().tostring();' + ' self.postmessage(text);' + '});', image: self.data.url("icon-16.png"), onmessage: function (selectiontext) { console.log(selectiontext); } });...
...pressing the key selects the option when the context menu is open: var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text = window.getselection().tostring();' + ' self.postmessage(text);' + '});', accesskey: "l", onmessage: function (selectiontext) { console.log(selectiontext); } }); learning more to learn more about the context-menu module, see the context-menu api reference.
The Essentials of an Extension - Archive of obsolete content
we'll skip some code that is covered in the locale section, moving on to the most important part of the content: <menubar id="main-menubar"> <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertafter="helpmenu"> <menupopup> <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> </menupopup> </menu> </menubar> <vbox id="appmenusecondarypane"> <menu id="xulschoolhello-hello-menu-2" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu...
....accesskey;" insertafter="appmenu_addons"> <menupopup> <menuitem id="xulschoolhello-hello-menu-item-2" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> </menupopup> </menu> </vbox> this is the code that adds the hello world menu to the browser window.
... one recommended location for menus in the classic menu vase is under the tools menu, so the code should really look like this: <menupopup id="menu_toolspopup"> <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertbefore="devtoolsendseparator"> <menupopup> <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> </menupopup> </menu> </menupopup> we're overlaying the menu that is deeper into the xul tree, but it doesn't matter because all we need is the id of the element we want to overlay.
Creating a Firefox sidebar extension - Archive of obsolete content
chrome/content/firefoxoverlay.xul <?xml version="1.0"?> <!doctype overlay system "chrome://emptysidebar/locale/emptysidebar.dtd"> <overlay id="emptysidebaroverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="viewsidebarmenu"> <menuitem key="key_openemptysidebar" observes="viewemptysidebar" /> </menupopup> <keyset id="mainkeyset"> <key id="key_openemptysidebar" command="viewemptysidebar" key="&openemptysidebar.commandkey;" modifiers="&openemptysidebar.modifierskey;" /> </keyset> <broadcasterset id="mainbroadcasterset"> <broadcaster id="viewemptysidebar" label="&emptysidebar.t...
...the second is it provides attributes to the menuitem, some of which are changed automatically when togglesidebar is called.
...one must then set the key attribute of the menuitem to "".
XUL Events - Archive of obsolete content
this event would be used to update the disabled status of its commands.dommenuitemactivethe dommenuitemactive event is executed when a <menu> or a <menuitem> has been hovered or highlighted.dommenuiteminactivethe dommenuiteminactive event is executed when a <menu> or a <menuitem> in no longer hovered or highlighted.popuphiddenthe popuphidden event is executed when a <menupopup>, <panel> or <tooltip> has become hidden.popuphidingthe popuphiding event is executed when a <menupopu...
... attribute: onunderflow dommenuitemactive this event is sent when a menu or menuitem is hovered over, or highlighted.
... dommenuiteminactive this event is sent when a menu or menuitem is no longer being hovered over, or highlighted.
List Controls - Archive of obsolete content
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 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.
XPCOM Examples - Archive of obsolete content
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.
...the template generates an id attribute on each menuitem element.
... the example below shows how we might do this: <toolbox> <menubar id="windowlist-menubar"> <menu label="window" oncommand="switchfocus(event.target);"> <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> <script> function switchfocus(elem) { var mediator = components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"].getservice(); mediator.queryinterface(components.interfaces.nsiwindowdatasource); var resource = elem.getattribute('id'); ...
button - Archive of obsolete content
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.
... 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.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
checkbox - Archive of obsolete content
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.
... 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.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
key - Archive of obsolete content
ArchiveMozillaXULkey
to display the shortcut defined with the key element in the ui, you can use <menuitem key="key element's id" command="command id" .../>.
... 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.
...this text would appear next to a menuitem label if that menuitem is associated with the key element via its key attribute.
listcell - Archive of obsolete content
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.
... 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.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
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"> ...
... <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> ...
...<menuitem command="cmd_open"/> <menuitem command="cmd_save"/> ...
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...
...irefox 2: #search-container[chromedir="rtl"] .search-go-button #search-container[chromedir="rtl"] .searchbar-engine-button .search-go-button .search-go-button:hover .search-go-button:hover:active .search-go-button[disabled="true"] .searchbar-engine-button .searchbar-engine-button:hover .searchbar-engine-button[addengines="true"] .searchbar-engine-button[open="true"] .searchbar-engine-menuitem[selected="true"] > .menu-iconic-text .searchbar-left 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.
Accessibility API cross-reference
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.
... menuitemcheckbox a checkable menuitem in a set of elements with the same role, only one of which can be checked at a time.
... menuitemradio any menu other than the menu bar java: menu is for pull-downs, popup_menu for all others menupopup popup_menu, menu popup_menu, menu menu a collection of navigational elements (usually links) for navigating the document or related documents.
Gecko info for Windows accessibility vendors
rrent_item == start_item, return null (no item found) if the end has been reached, go back to the start if wrapping is desired, otherwise return null (no item found) go to step 2 checkable, required and invalid states are supported gecko defines three state constants using previously unused states: const unsigned long state_checkable = state_marqueed; // useful on menuitem, listitem // and treeitem.
... 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.
... dhtml: role="wairole:alert" fires event_alert role_window supported automatically by ms windows role_client xul: <browser> html: <frame> or <iframe> role_menupopup dhtml: role="wairole:menu" fires event_menupopupstart, event_menupopupend role_menuitem xul: menuitem dhtml: role="wairole:menuitem" sets state_checked for radio or checkbox menuitem types accelerator key comes in accname after a \t (tab) character.
Gecko Roles
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_parent_menuitem represents a menu item, which is an entry in a menu that a user can choose to display another menu.
...it looks like role_menuitem.
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...
... getmostrecentbookmarkforuri(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) ...
nsIAccessibleRole
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_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.
nsIDOMWindowUtils
to get this interface, use: var domwindowutils = window.windowutils; method overview void activatenativemenuitemat(in astring indexstring); void clearmozafterpaintevents(); pruint32 comparecanvases(in nsidomhtmlcanvaselement acanvas1, in nsidomhtmlcanvaselement acanvas2, out unsigned long amaxdifference); double computeanimationdistance(in nsidomelement element, in astring property, in astring value1, in astring value2); nsicompositionstringsynthesizer createcompositi...
... methods activatenativemenuitemat() see nsiwidget.activatenativemenuitemat().
... void activatenativemenuitemat( in astring indexstring ); parameters indexstring clearmozafterpaintevents() void clearmozafterpaintevents(); parameters none.
Event reference
svg events svgabort svgerror svgload svgresize svgscroll svgunload svgzoom database events abort blocked complete error success upgradeneeded versionchange script events afterscriptexecute beforescriptexecute menu events dommenuitemactive dommenuiteminactive window events close popup events popuphidden popuphiding popupshowing popupshown tab events visibilitychange battery events chargingchange chargingtimechange dischargingtimechange levelchange call events alerting busy callschanged cfstatechange connecting dialing disconnected disconnecting error held, holding incoming resuming statechange voicechange sensor...
... dommenuitemactive xul a menu or menuitem has been hovered or highlighted.
... dommenuiteminactive xul a menu or menuitem is no longer hovered or highlighted.
Adding Events and Commands - Archive of obsolete content
then you need to identify which of your xul elements will be linked to this broadcaster, using the observes attribute: <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" observes="xulschoolhello-online-broadcaster" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> the attribute value is set to be the id of the broadcaster element, indicating that this element will observe all attribute changes that happen in the broadcas...
...--> <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.
Tabbed browser - Archive of obsolete content
the code given is for a menuitem, but will work equally well for other xul elements.
... xul: <menuitem oncommand="myextension.foo(event)" onclick="checkformiddleclick(this, event)" label="click me"/> js: var myextension = { foo: function(event) { openuilink("http://www.example.com", event, false, true); } } opening a url in an on demand tab cu.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.definelazyservicegetter(this, "gsessionstore", "@mozilla.org/browser/sessionstore;1", "nsisessionstore"); // create new tab, but don't load the content.
Simple Storage - Archive of obsolete content
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 ?
... if there's// a selection, add a note menuitem that makes a new note.
Simple Storage - Archive of obsolete content
if there are no notes, we'll show a // disabled "(empty)" menuitem.
... if there's // a selection, add a note menuitem that makes a new note.
Positioning - Archive of obsolete content
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.
... <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.
Popup Guide - Archive of obsolete content
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.
... using popups in extensions extensions may add additional menuitems either to a menu on the menu bar or to the context menu.
Filtering - Archive of obsolete content
<query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" object="?start"/> <triple subject="?country" predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> </query> the action body will need to generate a <menuitem> for each result.
... <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.
textbox (Toolkit autocomplete) - Archive of obsolete content
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.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
Textbox (XPFE autocomplete) - Archive of obsolete content
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.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
Accesskey display rules - Archive of obsolete content
xul elements check "intl.menuitems.alwaysappendaccesskeys" pref value whether they should append accesskey text always.
...this is controled by "intl.menuitems.insertseparatorbeforeaccesskeys" pref value.
Adding more elements - Archive of obsolete content
<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...
...<spacer style="height: 10px"/> <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> <spacer...
Anonymous Content - Archive of obsolete content
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 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.
Updating Commands - Archive of obsolete content
<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" oncomm...
...andupdate="goupdateundoeditmenuitems()"/> <commandset id="clipboardeditmenuitems" commandupdater="true" events="clipboard" oncommandupdate="goupdatepastemenuitems()"/> next, we'll find out how to use observers.
XUL Questions and Answers - Archive of obsolete content
instead of <menulist id="abpopup"> <menupopup id="abpopup-menupopup" ref="moz-abdirectory://" datasources="rdf:addressdirectory" sortactive="true" 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 sh...
...ould be written as follows: <menulist id="abpopup22"> <menupopup id="abpopup-menupopup" ref="moz-abmdbdirectory://abook.mab" datasources="rdf:addressdirectory" sortactive="true" sortdirection="ascending" sortresource="http://home.netscape.com/nc-rdf#dirtreenamesort"> <template> <rule nc:iswriteable="false"/> <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> drawwindow with transparent background possible?
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...
Accessibility/XUL Accessibility Reference - Archive of obsolete content
items are read per line as in "pearl female gray" listitem 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.
caption - Archive of obsolete content
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.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
command - Archive of obsolete content
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.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
description - Archive of obsolete content
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.
... 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 - Archive of obsolete content
ArchiveMozillaXULlabel
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.
... 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.
listheader - Archive of obsolete content
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.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
menubar - Archive of obsolete content
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: b...
... 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
ArchiveMozillaXULpanel
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.
prefpane - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
...this property is available for menuitem and menuseparator elements in firefox 3.
richlistitem - Archive of obsolete content
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.
...this property is available for menuitem and menuseparator elements in firefox 3.
<statusbarpanel> - Archive of obsolete content
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.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
treecol - Archive of obsolete content
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.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
Introduction to DOM Inspector - Firefox Developer Tools
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.
...the javascript object viewer also allows javascript to be evaluated by selecting the appropriate menuitem in the context menu.
Network request list - Firefox Developer Tools
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.
...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.
ARIA Test Cases - Accessibility
(al) as focus moves within the menu, the screen reader should read the current menuitem.
... markup used: role="menubar", role="menu", role="menuitem", role="menuitemcheckbox", role="menuitemradio" aria-haspopup="true" aria-disabled="true" notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pa...
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...
...ed -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 statusbarpanel tab tabpanels tab-scroll-arrow-back tab-scroll-arrow-forward textfield textfield-multiline toolbar toolbarbutton-dropdown toolbox toolti...
Adding captions and subtitles to HTML5 video - Developer guides
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.
... the creation of each list item and button is done by the createmenuitem() function, which is defined as follows: var subtitlemenubuttons = []; var createmenuitem = function(id, lang, label) { var listitem = document.createelement('li'); var button = listitem.appendchild(document.createelement('button')); button.setattribute('id', id); button.classname = 'subtitles-button'; if (lang.length > 0) button.setattribute('lang', lang); button.value = label; button.setattribute('data-state', 'inactive'); button.appendchild(document.createtextnode(label)); button.addeventlistener('click', function(e) { ...
contextmenu - HTML: Hypertext Markup Language
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 can change the size of the text by using the "increase/decrease font" actions from your context menu </li> <menu type="context" id="changefont"> <menuitem label="increase font" onclick="incfont()"></menuitem> <menuitem label="decrease font" onclick="decfont()"></menuitem> </menu> <li contextmenu="changeimage" id="changeimage"> on the image below, you can fire the "change image" action in your context menu.<br /> <img src="https://udn.realityripple.com/samples/a2/b601bdfc0c.png" contextmenu="changeimage" id="promobutton" /> <menu type="context" id="changeimage"> <menuitem label="change image" onclick="changeimage()"></menui...
context-menu - Archive of obsolete content
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.
Sidebar - Archive of obsolete content
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).
Extension Etiquette - Archive of obsolete content
ideally, the location would be below the add-ons item, grouped with the other extension-related commands (menuitem:insertafter="javascriptconsole,devtoolsseparator").
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
<menupopup id="viewsidebarmenu"> <menuitem id="xulschoolhello-sidebar" label="&xulschoolhello.sidebar.title;" accesskey="&xulschoolhello.sidebar.accesskey;" type="checkbox" autocheck="false" group="sidebar" sidebarurl="chrome://xulschoolhello/content/sidebar.xul" sidebartitle="&xulschoolhello.sidebar.title;" oncommand="togglesidebar('xulschoolhello-sidebar');" /> </menupopup> the example in the mdc page includes...
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
<menuitem id="mymenu" oncommand="executesomething(); executesomethingelse();"/> <label id="mylabel" onclick="executesomething(); executesomethingelse();"/> add-on authors commonly use eval to trigger the handlers.
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...
Adding preferences to an extension - Archive of obsolete content
all we need to do is add a popupset describing the menu to the statusbar, as follows: <popupset> <menupopup id="stockmenu"> <menuitem label="refresh now" default="true" oncommand="stockwatcher.refreshinformation()"/> <menuseparator/> <menuitem label="apple (aapl)" oncommand="stockwatcher.watchstock('aapl')"/> <menuitem label="google (goog)" oncommand="stockwatcher.watchstock('goog')"/> <menuitem label="microsoft (msft)" oncommand="stockwatcher.watchstock('msft')"/> <menuitem label="yahoo!
Localizing an extension - Archive of obsolete content
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.
Venkman Introduction - Archive of obsolete content
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.
Elements - Archive of obsolete content
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.
accesskey - Archive of obsolete content
« xul reference home attribute of: button, checkbox, caption, description, label, listitem, menu, menuitem, menulist, tab, radio, toolbarbutton, textbox accesskey type: character this should be set to a character that is used as a shortcut key.
allowevents - Archive of obsolete content
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.
closemenu - Archive of obsolete content
« xul reference home closemenu type: one of the values below indicates if the menu closes when the menuitem is activated.
crop - Archive of obsolete content
ArchiveMozillaXULAttributecrop
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 - Archive of obsolete content
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 - Archive of obsolete content
example <menuitem label="foo" class="menuitem-iconic" image="something.png"/> see also image element ...
keytext - Archive of obsolete content
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
for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
menuactive - Archive of obsolete content
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
ArchiveMozillaXULAttributename
« xul reference home see also menuitem.name preference.name query.name ...
onpopuphidden - Archive of obsolete content
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 ite...
statustext - Archive of obsolete content
in firefox, this text is automatically placed in the statusbar for menuitems on the menu bar.
type - Archive of obsolete content
ArchiveMozillaXULAttributetype
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 ...
Dynamically modifying XUL-based user interface - Archive of obsolete content
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.ins...
command - Archive of obsolete content
ArchiveMozillaXULEventscommand
example menuitem.oncommand = function() { console.log("the menu item has been activated"); }; ...
How to Quit a XUL Application - Archive of obsolete content
components.interfaces.nsiappstartup.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);"/> ...
Introduction to XUL - Archive of obsolete content
<?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.
contains - Archive of obsolete content
« xul reference home contains( item ) return type: boolean returns true if the menulist contains the specified menuitem as one of its items.
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.
OpenClose - Archive of obsolete content
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.
Special per-platform menu considerations - Archive of obsolete content
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.
PopupKeys - Archive of obsolete content
if a menuitem is selected, this will close the menu and fire the menuitem's command event.
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
see also menuitem.control radio.control tab.control ...
description - Archive of obsolete content
« xul reference description type: string set to the description of the currently selected menuitem.
selected - Archive of obsolete content
this property is available for menuitem and menuseparator elements in firefox 3.
Style classes - Archive of obsolete content
ArchiveMozillaXULStyle
« 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
<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.
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
<menuitem label="close" accesskey="c" oncommand="window.close();"/> ...
Adding Style Sheets - Archive of obsolete content
<spacer class="titlespace"/> <groupbox orient="horizontal"> <caption label="search criteria"/> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer class="springspace"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer class="springspace"/> <menulist id="find-text" ...
Broadcasters and Observers - Archive of obsolete content
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.
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
for instance the selecteditem of a menulist will be the menuitem that is selected.
Modifying the Default Skin - Archive of obsolete content
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.
More Button Features - Archive of obsolete content
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.
More Event Handlers - Archive of obsolete content
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.
RDF Datasources - Archive of obsolete content
title="history list" xmlns:animals="http://www.some-fictitious-zoo.com/rdf#" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button label="click here to see the mammals the zoo has" type="menu" datasources="animals.rdf" ref="http://www.some-fictitious-zoo.com/mammals"> <template> <rule animals:specimens="0"></rule> <rule> <menupopup> <menuitem uri="rdf:*" label="rdf:http://www.some-fictitious-zoo.com/rdf#name"/> </menupopup> </rule> </template> </button> </window> in this case only the mammals are desired, so we select the uri of the mammals list.
Skinning XUL Files by Hand - Archive of obsolete content
r more info); css2 also provides some new ways to group elements for styling, which we summarize briefly here, because they appear in mozilla with some frequency, but reserve for another article: pseudo-class parent-child element:pseudo-class { attribute: value; } parent > child { attribute: value; } button:hover { border: 1px; } menu#file > menuitem { font-weight: bold; } pseudo-classes reflect states of the element: when the mouse moves over a button, for example, the appropriate pseudo-class stylesheet rules are applied.
Tabboxes - Archive of obsolete content
</description> <spacer style="height: 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"...
Templates - Archive of obsolete content
usually, elements such as treeitems and menuitems will be populated with data.
Widget Cheatsheet - Archive of obsolete content
menu <menu value="menu widget"> <menupopup> <menuitem value="foo" /> <menuitem value="shoo" /> <menu value="sub"> <menupopup> <menuitem value="subitem" /> </menupopup> </menu> </menupopup> </menu> <menulist value="menulist element"> <menupopup> <menuitem value="foo" /> <menuitem value="shoo" /> <menuitem value="boo" /> </menupopup> </menulist> <menubutton src="back.gif"> <menupopup> <menuitem value="foo" /> <menuitem value="shoo" /> <menuitem value="boo" /> </menupopup> </menubutton> ...
XUL element attributes - Archive of obsolete content
in firefox, this text is automatically placed in the statusbar for menuitems on the menu bar.
The Implementation of the Application Object Model - Archive of obsolete content
examples of tags that can reference local data are menu, menuitem, menubar, toolbox, toolbar, treebody, and treeitem.
arrowscrollbox - Archive of obsolete content
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.
broadcaster - Archive of obsolete content
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.
colorpicker - Archive of obsolete content
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.
datepicker - Archive of obsolete content
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.
dialogheader - Archive of obsolete content
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.
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...
grid - Archive of obsolete content
ArchiveMozillaXULgrid
the second column is twice 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, e...
iframe - Archive of obsolete content
attributes showcaret, 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...
keyset - Archive of obsolete content
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.
listbox - Archive of obsolete content
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.
listhead - Archive of obsolete content
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.
notification - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
popupset - Archive of obsolete content
examples <popupset> <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> <label value="right click for popup" context="clipmenu"/> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, ...
preference - Archive of obsolete content
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.
radiogroup - Archive of obsolete content
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.
richlistbox - Archive of obsolete content
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.
scale - Archive of obsolete content
ArchiveMozillaXULscale
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.
tabs - Archive of obsolete content
ArchiveMozillaXULtabs
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.
textbox - Archive of obsolete content
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.
timepicker - Archive of obsolete content
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.
toolbaritem - Archive of obsolete content
examples <toolbaritem> <menulist label="bus"> <menupopup> <menuitem label="car"/> <menuitem label="taxi"/> <menuitem label="bus" selected="true"/> <menuitem label="train"/> </menupopup> </menulist> </toolbaritem> <toolbaritem id="sample-toolbutton-unified"> <toolbarbutton id="myext-button1" class="toolbarbutton-1" label="label1" /> <toolbarbutton id="myext-button2" class="toolbarbutton-1" label="labe2l" /> ...
tree - Archive of obsolete content
ArchiveMozillaXULtree
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.
treecell - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
wizardpage - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
XULRunner tips - Archive of obsolete content
you'll probably also want to create menuitems that let you open the js shell and other tools provided by the extension.
Mozilla accessibility architecture
gecko events (or callback) event type accessibility event focus, select standard html dom event event_focus dommenuitemactive, dommenubaractive mozilla dom event_focus domnodeinserted w3c dom mutation event event_create (atk) event_reorder (msaa) domsubtreemodified w3c dom mutation event event_reorder domnoderemoved w3c dom mutation event event_destroy (atk) event_reorder (msaa) checkboxstatechange, radi...
Performance best practices for Firefox front-end engineers
for example, when using xul <xul:menupopup>s, you often have script which dynamically inserts <xul:menuitem>s.
Browser API
this allows handling of the <menuitem> element available within the browser <iframe>'s content.
Localization technical reviews
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.
Gecko states
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.
nsIAccessibleProvider
x00001002 xulcheckbox 0x00001003 xulcolorpicker 0x00001004 xulcolorpickertile 0x00001005 xulcombobox 0x00001006 xuldropmarker 0x00001007 xulgroupbox 0x00001008 xulimage 0x00001009 xullink 0x0000100a xullistbox 0x0000100b xullistcell 0x00001026 xullisthead 0x00001024 xullistheader 0x00001025 xullistitem 0x0000100c xulmenubar 0x0000100d xulmenuitem 0x0000100e xulmenupopup 0x0000100f xulmenuseparator 0x00001010 xulpane 0x00001011 xulprogressmeter 0x00001012 xulscale 0x00001013 xulstatusbar 0x00001014 xulradiobutton 0x00001015 xulradiogroup 0x00001016 xultab 0x00001017 the single tab in a dialog or tabbrowser/editor interface.
nsIMenuBoxObject
to the box object for a given menu, use code like this: var boxobject = xulmenu.boxobject.queryinterface(components.interfaces.nsimenuboxobject); method overview boolean handlekeypress(in nsidomkeyevent keyevent); void openmenu(in boolean openflag); attributes attribute type description activechild nsidomelement the currently active menu or menuitem child of the menu box.
Add Option to Context Menu
for thunderbird 2 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.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...
Add to iPhoto
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.
Accessibility Inspector - Firefox Developer Tools
the check for issues menuitems are a quick way to view all and only those items that have issues.
Browser Console - Firefox Developer Tools
on windows, the following code will add a new item to the browser's main menu: var parent = window.document.getelementbyid("appmenuprimarypane"); 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); 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.setattr...
DevTools API - Firefox Developer Tools
accesskey for the developer menu <xul:menuitem>.
Index - Firefox Developer Tools
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).
Document.popupNode - Web APIs
<menuitem oncommand="mailnewscore.deletebutton(document.popupnode)"> ...
Element: show event - Web APIs
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.
Event.explicitOriginalTarget - Web APIs
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.
The HTML DOM API - Web APIs
owelement htmltablesectionelement htmltemplateelement htmltextareaelement htmltimeelement htmltitleelement htmltrackelement htmlulistelement htmlunknownelement htmlvideoelement deprecated html element interfaces htmlmarqueeelement obsolete html element interfaces htmlbasefontelement htmlfontelement htmlframeelement htmlframesetelement htmlisindexelement htmlmenuitemelement web app and browser integration interfaces these interfaces offer access to the browser window and document that contain the html, as well as to the browser's state, available plugins (if any), and various configuration options.
Index - Web APIs
WebAPIIndex
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.
Web APIs
WebAPI
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 the aria-labelledby attribute - Accessibility
ciation : cursor</dd> <dt id="homily">homily</dt> <dd role="definition" aria-labelledby="homily">a usually short sermon</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> ...
Using the group role - Accessibility
<div role="menu"> <ul role="group"> <li role="menuitem">inbox</li> <li role="menuitem">archive</li> <li role="menuitem">trash</li> </ul> <ul role="group"> <li role="menuitem">custom folder 1</li> <li role="menuitem">custom folder 2</li> <li role="menuitem">custom folder 3</li> </ul> <ul role="group"> <li role="menuitem">new folder</li> </ul> </div> working examples: file directory treeview example using comput...
Using ARIA: Roles, states, and properties - Accessibility
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.
WAI-ARIA Roles - Accessibility
alertdialog banner combobox command columnheader (estelle) complementary composite definition directory feed gridcell (eric e) group input landmark link - old page listbox log - old page marquee math menu menubar menuitem menuitemcheckbox menuitemradio none note option presentation progressbar - old page radio - old page radiogroup range region roletype rowheader(estelle) scrollbar searchbox section sectionhead select separator slider - old page spinbutton status - old page structure tab tablist (michiel) tabpanel (michiel) term timer toolbar tooltip tree treegrid treeitem widget...
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
role_titlebar [inserted by system] role_menubar [important if you don't use native menus] role_scrollbar role_grip role_sound role_cursor role_caret role_alert role_window [inserted by system] role_client [important] role_menupopup [important] role_menuitem [important] role_tooltip role_application role_document role_pane [important] role_chart role_dialog [semi-important, not currently used by all at's] role_border role_grouping role_separator [important] role_toolbar role_statusbar [important] role_table [important] role_columnheader role_rowheader role_column role_row role_cell [...
<a>: The Anchor element - HTML: Hypertext Markup Language
WebHTMLElementa
implicit aria role link when href attribute is present, otherwise no corresponding role permitted aria roles when href attribute is present: button checkbox menuitem menuitemcheckbox menuitemradio option radio switch tab treeitem when href attribute is not present: any dom interface htmlanchorelement examples linking to an absolute url html <a href="https://www.mozilla.com"> mozilla </a> result linking to relative urls html <a href="//example.com">scheme-relative ur...
<button>: The Button element - HTML: Hypertext Markup Language
WebHTMLElementbutton
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.
<command>: The HTML Command element - HTML: Hypertext Markup Language
WebHTMLElementcommand
you should use the <menuitem> element instead, although that element is non-standard and only supported in edge and firefox.
<img>: The Image Embed element - HTML: Hypertext Markup Language
WebHTMLElementimg
implicit aria role with non-empty alt attribute or no alt attribute: img with empty alt attribute: no corresponding role permitted aria roles with non-empty alt attribute: button checkbox link menuitem menuitemcheckbox menuitemradio option progressbar scrollbar separator slider switch tab treeitem with empty alt attribute, none or presentation with no alt attribute, no role permitted dom interface htmlimageelement specifications specification status comment referrer policy...
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
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
WebHTMLElementli
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.
HTML elements reference - HTML: Hypertext Markup Language
WebHTMLElement
<menuitem> the html <menuitem> element represents a command that a user is able to invoke through a popup menu.
title - HTML: Hypertext Markup Language
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.
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
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.