<menuitem> - HTML: Hypertext Markup Language
permitted content none, it is an empty element. ...
... permitted content none, it is an empty element. ...
... permitted content none, it is an empty element. ...
...And 18 more matches

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

Popup Menus - Archive of obsolete content
« previousnext » in the last section, we looked at creating a menu on a menu bar. xul also has the capability of creating popup menus. popup menus are typically displayed when the user presses the right mouse button. creating a popup menu xul has three different types of popups, described below. the main difference is the way in which they appear. plain popups the plain popup is a popup window which appears when the user presses the left mouse button on an element. they are much like the menus on the menu bar, except that they can be placed anywhere and can contain any content. a good example is the drop down menu that appears when you click on the little down arrows next to the back and forward buttons in a browser window. context popups the context popup is a popup ...
...e left mouse button on an element. they are much like the menus on the menu bar, except that they can be placed anywhere and can contain any content. a good example is the drop down menu that appears when you click on the little down arrows next to the back and forward buttons in a browser window. context popups the context popup is a popup window which appears when the user presses the context menu button, which is usually the right mouse button. the exact way that a context menu is opened varies on each platform. on the macintosh for example, the user can either press the control key and click the mouse button, or hold the mouse button down for a moment. also note that it is possible to open context menus without using the mouse, for example by pressing the menu key on a keyboard. tooltip...
...ow will appear when the user hovers over an element with the mouse. this type of popup is usually used to provide a description of a button in more detail than can be provided on the button itself. all three types of popups differ in the way that the user invokes them. the type of popup is determined by the element that invokes the popup. ...
...And 13 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. ...
... « 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. ...
... « 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. ...
...And 10 more matches

menubar - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container that usually contains menu elements. on the macintosh, the menubar is displayed along the top of the screen, and all non-menu related elements inside the menubar will be ignored. to look native (at least on windows), the menubar element needs to be placed inside a toolbox element. more information is available in the xul tutorial. ...
...ments. on the macintosh, the menubar is displayed along the top of the screen, and all non-menu related elements inside the menubar will be ignored. to look native (at least on windows), the menubar element needs to be placed inside a toolbox element. more information is available in the xul tutorial. ...
...tosh, the menubar is displayed along the top of the screen, and all non-menu related elements inside the menubar will be ignored. to look native (at least on windows), the menubar element needs to be placed inside a toolbox element. more information is available in the xul tutorial. ...
...And 10 more matches

mozbrowsercontextmenu
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsercontextmenu event is fired when the user tried to access a context menu over a browser <iframe>. this event can be used to control what will appear in the menu. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. ...
...details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: clientx the x value of the coordinate that was clicked inside the browser <iframe>'s viewport. clienty the y value of the coordinate that was clicked inside the browser <iframe>'s viewport. ...
... a custom object. details the details property returns an anonymous javascript object with the following properties: clientx the x value of the coordinate that was clicked inside the browser <iframe>'s viewport. clienty the y value of the coordinate that was clicked inside the browser <iframe>'s viewport. ...
...And 10 more matches

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

MenuButtons - Archive of obsolete content
menu buttons menus may be attached to buttons in several ways. both the button and the toolbar button elements support two special types used for creating menu buttons. a button or toolbarbutton with a type attribute set to 'menu' creates a button that will open a menu when pressed. an arrow appears on the button next to the label or image indicating to the user that a menu is present. a button or toolbarbutton with a type attribute set to 'menu-button' creates a button that can be pressed normally. however a segment of the button displays an arrow which, when pressed, opens a menu. in either case, a menupopup element should be placed as a direct child of the button. ...
...n arrow appears on the button next to the label or image indicating to the user that a menu is present. a button or toolbarbutton with a type attribute set to 'menu-button' creates a button that can be pressed normally. however a segment of the button displays an arrow which, when pressed, opens a menu. in either case, a menupopup element should be placed as a direct child of the button. the 'menu' button the 'menu' type of button is used when pressing the button alone should just open the menu and not execute a command directly. this works similarly to the menu tag, and would be used to present a set of commands to execute. to create a button of this type, set the type attribute of the button to 'menu'. ...
...'menu' button the 'menu' type of button is used when pressing the button alone should just open the menu and not execute a command directly. this works similarly to the menu tag, and would be used to present a set of commands to execute. to create a button of this type, set the type attribute of the button to 'menu'. for instance, in the following example, pressing the 'view' button will open a menu which allows the user to select from a set of radio menuitems. presumably, when one is selected, the application view would be changed accordingly. when using the keyboard, pressing the down key will open the menu while the button is focused. ...
...And 9 more matches

menuseparator - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] used to create a separator between menu items. typically drawn as a thin line. more information is available in the xul tutorial. ...
...reate a separator between menu items. typically drawn as a thin line. more information is available in the xul tutorial. attributes acceltext, accesskey, allowevents, command, crop, disabled, image, label, selected, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value examples <menu label="menu"> <menupopup> <menuitem label="item1"/> <menuseparator/> <menuitem label="item2"/> <menuitem label="item3"/> </menupopup> </menu> attributes acceltext type: string text that appears beside the menu label to indicate the shortcut key (accelerator key) to use to invoke the command. if this value is set, it overrides an assigned key set in ...
... accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. allowevents type: boolean if true, events are passed to children of the element. otherwise, events are passed to the element only. ...
...And 9 more matches

Windows and menus in XULRunner - Archive of obsolete content
« previousnext » our quest to build a basic desktop application using xulrunner continues. last time i installed xulrunner and built a very simple, bare-bones test application. this time i want to add some of the things common to a desktop application user interface: windows and dialogs menus and toolbars os common dialogs controls or widgets windows each window or dialog should be created in its own xul file. the xul file may also contain other top-level declarations for css and dtd, which i will discuss in a moment. <window> is the basic windowing element in xul. it has attributes to set the title/caption as well as to control its width and height. although i have not seen it mentioned yet, i am assuming that you can only have one <window> element per xul file. her...
...nt which is used to include the window’s javascript into the xul file. keeping css, dtd and javascript out of the xul file is considered a best practice. when you launch your xul application, you’ll notice that xulrunner gives your windows a default icon (top left corner on windows). you’ll most likely want to specify your own icons. you can learn how to do it in the article window icons. ...
... and javascript out of the xul file is considered a best practice. when you launch your xul application, you’ll notice that xulrunner gives your windows a default icon (top left corner on windows). you’ll most likely want to specify your own icons. you can learn how to do it in the article window icons. menus and toolbars most desktop applications are complex enough to require some sort of menu and/or toolbar to structure the application’s available commands. ...
...And 8 more matches

Special per-platform menu considerations - Archive of obsolete content
for many menu commands, convention dictates where these items will be placed. for instance, the edit menu always starts with the undo command if such a feature is available in the application, followed by redo, cut, copy, paste, and so forth. some menu items have specific common labels or locations where certain menu items would go that differ on each platform. for instance, on windows, the menu item which exits the application is labeled "exit" and is normally placed at the end of the file menu. the mac application menu on the macintosh, an extra menu exists beside the file menu; its name is the same as the name of the application. this menu contains a number of items that pertain to the application. ...
... for instance, on windows, the menu item which exits the application is labeled "exit" and is normally placed at the end of the file menu. the mac application menu on the macintosh, an extra menu exists beside the file menu; its name is the same as the name of the application. this menu contains a number of items that pertain to the application. for instance, this is the proper place to put the menu items which open the application preferences and which quit the application. this can be accomplished by ensuring that certain common ids are set for the menu items that need to be placed on the application menu. on the mac, these menu items will be moved onto the application menu, but on other platforms, they will be left in their original locations. this makes it easier to write the same xul c...
... and which quit the application. this can be accomplished by ensuring that certain common ids are set for the menu items that need to be placed on the application menu. on the mac, these menu items will be moved onto the application menu, but on other platforms, they will be left in their original locations. this makes it easier to write the same xul code for all platforms. here is a list of the menu item ids which are automatically handled. menu_filequitseparator the separator just before the quit/exit item. menu_filequititem the item which exits the application. menu_prefsseparator the separator just before the preferences/options item. menu_preferences the item which opens the application preferences. aboutseparator the separator...
...And 4 more matches

Activity Monitor, Battery Status Menu and top
note: the power profiling overview is worth reading at this point if you haven't already. it may make parts of this document easier to understand. activity monitor this is a built-in os x tool that shows real-time process measurements. it is well-known and its "energy impact" measure is likely to be consulted by users to compare the power consumption of different programs. (apple support documentation specifically recommends it for troubleshooting battery life problems.) unfortunately "energy impact" is not a good measure for either users or software developers and it should be avoided. ...
...iodically measures, among other things, cpu usage and idle wakeups for each running process. tests indicate that it is almost certainly using the same "energy impact" formula to compute the "average energy impact", using measurements from the past 8 hours of wake time (i.e. ...
... idle wakeups for each running process. tests indicate that it is almost certainly using the same "energy impact" formula to compute the "average energy impact", using measurements from the past 8 hours of wake time (i.e. ...
...And 4 more matches

ROLE_MENUITEM
« gecko roles page represents a menu item, which is an entry in a menu that a user can choose to carry out a command, select an option. interfaces nsiaccessnode nsiaccessible children no children. ...
... « gecko roles page represents a menu item, which is an entry in a menu that a user can choose to carry out a command, select an option. interfaces nsiaccessnode nsiaccessible children no children. ...
... « gecko roles page represents a menu item, which is an entry in a menu that a user can choose to carry out a command, select an option. interfaces nsiaccessnode nsiaccessible children no children. ...
...And 4 more matches

HTMLElement.contextMenu - Web APIs
the htmlelement.contextmenu property refers to the context menu assigned to an element using the contextmenu attribute. the menu itself is created using the <menu> element. ...
... the htmlelement.contextmenu property refers to the context menu assigned to an element using the contextmenu attribute. the menu itself is created using the <menu> element. ...
... the htmlelement.contextmenu property refers to the context menu assigned to an element using the contextmenu attribute. the menu itself is created using the <menu> element. ...
...And 4 more matches

Offering a context menu for form controls - Archive of obsolete content
firefox 3 changed the behavior of right-click on form controls to no longer display a context menu by default. this article describes how an extension can override this change in a particular window, enabling context menus to work on form controls. this article presents information based on ehsan akhgari's form control context menu extension, which was created specifically to demonstrate how to do this. there is ongoing discussion about this topic; please see bug 433168 for the latest information. overlay the content the first thing to do is to establish an overlay over the chrome for the window in which you want to allow context menus on form controls. ...
... akhgari's form control context menu extension, which was created specifically to demonstrate how to do this. there is ongoing discussion about this topic; please see bug 433168 for the latest information. overlay the content the first thing to do is to establish an overlay over the chrome for the window in which you want to allow context menus on form controls. <overlay id="formcontrolcontextmenu-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://formcontrolcontextmenu/content/overlay.js"/> </overlay> change the right-click behavior the overlaid code is responsible for adjusting the behavior of right-clicking on form controls. window.addeventlistener("load", function() { let settargetorigin...
... xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://formcontrolcontextmenu/content/overlay.js"/> </overlay> change the right-click behavior the overlaid code is responsible for adjusting the behavior of right-clicking on form controls. ...
...And 2 more matches

menupopup - Archive of obsolete content
this property is read-only. ...
...this property is read-only. ...
...this property is read-only. ...
...And 2 more matches

nsIMenuBoxObject
layout/xul/base/public/nsimenuboxobject.idlscriptable represents the box object for a xul menu. inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) to get access 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. openedwithkey boolean true if the menubar was opened using the keyboard; otherwise false. note: for gecko 2.0, the openedwi...
...t keyevent); void openmenu(in boolean openflag); attributes attribute type description activechild nsidomelement the currently active menu or menuitem child of the menu box. openedwithkey boolean true if the menubar was opened using the keyboard; otherwise false. note: for gecko 2.0, the openedwithkey attribute exists on the nsimenuboxobject_mozilla_2_0_branch interface. subsequent gecko versions will have the attribute on the nsimenuboxobject interface. methods handlekeypress() boolean handlekeypress( in nsidomkeyevent keyevent ); parameters keyevent the key event to handle for the menu. return value true if the event was handled, false if not. ...
...or gecko 2.0, the openedwithkey attribute exists on the nsimenuboxobject_mozilla_2_0_branch interface. subsequent gecko versions will have the attribute on the nsimenuboxobject interface. methods handlekeypress() boolean handlekeypress( in nsidomkeyevent keyevent ); parameters keyevent the key event to handle for the menu. return value true if the event was handled, false if not. openmenu() void openmenu( in boolean openflag ); parameters openflag true to open the menu or false to close it. ...
...ibute on the nsimenuboxobject interface. methods handlekeypress() boolean handlekeypress( in nsidomkeyevent keyevent ); parameters keyevent the key event to handle for the menu. return value true if the event was handled, false if not. openmenu() void openmenu( in boolean openflag ); parameters openflag true to open the menu or false to close it. ...

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

The Web Developer Menu - Firefox Developer Tools
the web developer menu is the main way to access the developer tools that are built into firefox. ...
... the web developer menu is the main way to access the developer tools that are built into firefox. ...
... the web developer menu is the main way to access the developer tools that are built into firefox. ...
... the web developer menu is the main way to access the developer tools that are built into firefox. ...

Element: contextmenu event - Web APIs
the contextmenu event fires when the user attempts to open a context menu. this event is typically triggered by clicking the right mouse button, or by pressing the context menu key. in the latter case, the context menu is displayed at the bottom left of the focused element, unless the element is a tree, in which case the context menu is displayed at the bottom left of the current row. any right-click event that is not disabled (by calling the event's preventdefault() method) will result in a contextmenu event being fired at the targeted element. ...
...the element is a tree, in which case the context menu is displayed at the bottom left of the current row. any right-click event that is not disabled (by calling the event's preventdefault() method) will result in a contextmenu event being fired at the targeted element. bubbles yes cancelable yes interface mouseevent event handler property oncontextmenu examples in this example, the default action of the contextmenu event is canceled using preventdefault() when the contextmenu event is fired at the first paragraph. as a result, the first paragraph will do nothing when right-clicked, while the second paragraph will show the standard context menu offered by your browser. ...
... event handler property oncontextmenu examples in this example, the default action of the contextmenu event is canceled using preventdefault() when the contextmenu event is fired at the first paragraph. as a result, the first paragraph will do nothing when right-clicked, while the second paragraph will show the standard context menu offered by your browser. ...
...er property oncontextmenu examples in this example, the default action of the contextmenu event is canceled using preventdefault() when the contextmenu event is fired at the first paragraph. as a result, the first paragraph will do nothing when right-clicked, while the second paragraph will show the standard context menu offered by your browser. html <p id="nocontextmenu">the context menu has been disabled on this paragraph.</p> <p>but it has not been disabled on this one.</p> javascript nocontext = document.getelementbyid('nocontextmenu'); nocontext.addeventlistener('contextmenu', e => { e.preventdefault(); }); result specifications specification status comment html living standardthe definition of 'contextmenu' in that specification. liv...

GlobalEventHandlers.oncontextmenu - Web APIs
the oncontextmenu property of the globaleventhandlers mixin is an eventhandler that processes contextmenu events. the contextmenu event typically fires when the right mouse button is clicked on the window. unless the default behavior is prevented, the browser context menu will activate. syntax target.oncontextmenu = functionref; value functionref is a function name or a function expression. the function receives an event object as its sole argument. only one oncontextmenu handler can be assigned to an object at a time. you may prefer to use the eventtarget.addeventlistener() method instead, since it's more flexible. examples disabling context menus this snippet prevents context menus from opening in the window. the context menu typically appears upon a right click. html <p>try ope...
...s an event object as its sole argument. only one oncontextmenu handler can be assigned to an object at a time. you may prefer to use the eventtarget.addeventlistener() method instead, since it's more flexible. examples disabling context menus this snippet prevents context menus from opening in the window. the context menu typically appears upon a right click. html <p>try opening the context menu. is it disabled?<p> javascript window.oncontextmenu = (e) => { e.preventdefault(); } result pausing an animation this example pauses a spinning shape whenever you open the context menu. html <div class="shape">spinning</div> <p class="note" hidden>click to unpause.</p> css @keyframes spin { from { transform: rotate(0); } to { transform: rotate(1turn); } } .shape { ...
... living standard ...
... living standard ...

contentcontextmenu - Archive of obsolete content
...
... ...
... ...

Menus - Archive of obsolete content
an extension will often wish to attach a new command to a menu. to do this, the new menu will need to be laid over the existing menu which the item should be displayed upon. for more information about how to use an overlay to modify a menu, see using menus and popups in extensions the following tables list the ids of menus in firefox that are commonly overlaid upon. firefox menus element id description main-menubar the menubar element. menu_filepopup the menupopup associated with the 'file' menu. menu_editpopup the menupopup associated with the 'edit' menu. menu_viewpopup the menupopup associated with the 'view' menu. ...
...of menus in firefox that are commonly overlaid upon. firefox menus element id description main-menubar the menubar element. menu_filepopup the menupopup associated with the 'file' menu. menu_editpopup the menupopup associated with the 'edit' menu. menu_viewpopup the menupopup associated with the 'view' menu. gopopup the menupopup associated with the 'go/history' menu. menu_toolspopup the menupopup associated with the 'tools' menu. menu_helppopup the menupopup associated with the 'help' menu. menu_viewsidebarmenu the menupopup for the 'sidebar' submenu on the 'view' menu. menuwebdeveloperpopup the menupopup for the 'web developer' submenu on the 'tools' menu. fire...
...ated with the 'go/history' menu. menu_toolspopup the menupopup associated with the 'tools' menu. menu_helppopup the menupopup associated with the 'help' menu. menu_viewsidebarmenu the menupopup for the 'sidebar' submenu on the 'view' menu. menuwebdeveloperpopup the menupopup for the 'web developer' submenu on the 'tools' menu. firefox context menu element id description relevant context contentareacontextmenu the popup for the context menu when a web page is displayed in the browser area. spell-no-suggestions the no spelling suggestions item - notable as it is the first item on the context menu. editable text context-openlink opens a link in a new window links cont...

menuitem.control - Archive of obsolete content
...
... ...
... ...

Scrolling Menus - Archive of obsolete content
« previousnext » this section will describe scrolling menus and how to use the mechanism with other elements. creating a large menu you might wonder what happens if you create a menu with a lot of commands on it, such that all the items won't fit on the screen at once. mozilla will provide a scrolling mechanism that will allow you to scroll through the items. if the available space is too small, arrows will appear on each end of the menu. if you move the mouse over the arrows, the menu will scroll up and down. if the available space is large enough, the arrows will not appear. note that the exact behavior of the scrolling will depend on the current theme. this behavior is automatic. ...
...e items. if the available space is too small, arrows will appear on each end of the menu. if you move the mouse over the arrows, the menu will scroll up and down. if the available space is large enough, the arrows will not appear. note that the exact behavior of the scrolling will depend on the current theme. this behavior is automatic. you do not have to do anything in order to get scrolling menus. it will apply to menus on menubars, in popups or menulists. it is implemented using an arrowscrollbox element. this element can be used to create a scrolling box with arrows. the arrowscrollbox can be used anywhere a regular box can be used. you don't have to use it in menus. it is always a vertical box and may contain any elements inside it. you could use it to implement a list when you don't ...
...crollbox> if you try this example, it will first open at full size. however, if you shrink the height of the window, the scroll arrows will appear. making the window larger again will cause the arrows to disappear. you can set a css max-height property on the arrowscrollbox to limit the size of the scrolling box and thus make the arrows appear all the time. the arrowscrollbox is mainly useful in menus and popups however. next, we'll see how to add some event handlers to xul elements. « previousnext » ...

HTMLMenuElement - Web APIs
the htmlmenuelement interface provides special properties (beyond those defined on the regular htmlelement interface it also has available to it by inheritance) for manipulating <menu> elements. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget...
...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/htmlmenuelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmenuelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesthis interfac...
...t-baseline="middle">htmlmenuelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesthis interface has no properties, but inherits properties from: htmlelementmethodsthis interface has no methods, but inherits methods from: htmlelement specifications specification status comment html living standardthe definition of 'htmlmenuelement' in that specification. living standard no change from latest snapshot, unknown html 5.2the definition of 'htmlmenuelement' in that specification. recommendation snapshot of the html living standard. removed the context type. html 5.1the definition of 'htmlmenuelement' in that specification. recommendation snapshot of the html living standard. in...

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. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eve...
...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 ...
... recommendation snapshot of the html living standard. ...

contextmenu - Archive of obsolete content
...
... ...

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

menu - Archive of obsolete content
...
... ...

menu-iconic - Archive of obsolete content
specify the image using the image attribute. ...
...specify the image using the image attribute. ...

menuitem-iconic - Archive of obsolete content
specify the image using the image attribute. ...
...specify the image using the image attribute. ...

Add a Menu Item to Firefox - Archive of obsolete content
the sdk doesn't provide a built-in api to add new menu items to firefox. but it's extensible by design, so anyone can build and publish modules for add-on developers to use. to see how to use third-party modules to add a new menu item, see the tutorial on using third-party modules with jpm. ...

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. auto this, the default value if the closemenu attribute is not specified, closes up the menu and all parent menus. single the menu the item is contained within is closed, but the parent menus remain open. none no menus are closed. ...

menu - Archive of obsolete content
« xul reference home menu type: id alternate name for the popup attribute, but also has a corresponding script property 'menu'. ...

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

menuitem.key - Archive of obsolete content
...

DOMMenuItemActive - Archive of obsolete content
general info specification xul interface event bubbles yes cancelable yes target element default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...

DOMMenuItemInactive - Archive of obsolete content
general info specification xul interface event bubbles yes cancelable yes target element default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...

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

menulist.select - Archive of obsolete content
« xul reference home select() return type: no return value select all the text in the menulist's textbox. this method applies to editable menulists only. see also select ...

contextMenu - Archive of obsolete content
« xul reference contextmenu type: popup element id gets and sets the value of the contextmenu attribute. note that the value of this property does not reflect the value of the context attribute, which is otherwise identical to the contextmenu attribute. ...

menu.open - Archive of obsolete content
« xul reference open type: boolean this property will be set to true when the menu is open. the menu may be opened by setting the open property to true and closed by setting it to false. ...

menuBoxObject - Archive of obsolete content
« xul reference menuboxobject type: nsimenuboxobject a reference to the nsimenuboxobject which implements the menu. ...

menulist.inputField - Archive of obsolete content
« xul reference inputfield type: textbox element a reference to the textbox element used for editable menu lists. this property is read only and applies to editable menulists only. see also inputfield ...

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. ...

statusbarpanel-menu-iconic - Archive of obsolete content
« xul reference home statusbarpanel-menu-iconic use this class to have an image appear on the statusbarpanel, and also allow a popup menu. specify the image using the src attribute, and place a menupopup element inside the statusbarpanel. the image will appear instead of the label. ...

:-moz-system-metric(images-in-menus) - Archive of obsolete content
this selector is intended for use mainly by theme developers. note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g. ...

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

Index - Archive of obsolete content
40 high-level apis add-on sdk no summary! 41 addon-page add-on sdk, add-ons, extensions, obsolete, reference create a page that does not contain navigational elements. 42 base64 add-on sdk no summary! 43 clipboard add-on sdk interact with the system clipboard, setting and getting its contents. 44 context-menu add-on sdk, add-ons, extensions, firefox, sdk adds items, submenus, and menu separators to the page's context menu. 45 hotkeys add-on sdk assign hotkey combinations to functions in your add-on. 46 indexed-db add-on sdk exposes the indexeddb api to add-ons. 47 l10n add-on sdk localize strings appearing in the add-on's javascr...
...nore jpm no summary! 140 package.json commonjs, jpm, sdk, add-on, package.json the package.json file contains manifest data for your add-on, providing not only descriptive information about the add-on for presentation in the add-ons manager, but other metadata required of add-ons. ...
...k, add-on, package.json the package.json file contains manifest data for your add-on, providing not only descriptive information about the add-on for presentation in the add-ons manager, but other metadata required of add-ons. ...
...And 68 more matches

Index - Archive of obsolete content
te, xul reference no summary! 55 class xul attributes, xul reference no summary! 56 clicktoscroll clicktoscroll, if true, the arrows must be clicked to scroll the scrollbox content. ...
... commandupdater xul attributes, xul reference no summary! 68 completedefaultindex xul attributes, xul reference no summary! 69 completeselectedindex no summary! 70 container xul attributes, xul reference no summary! 71 containment xul attributes, xul reference no summary! 72 contentcontextmenu xul attributes, xul reference no summary! 73 contenttooltip xul attributes, xul reference no summary! 74 context xul attributes, xul reference no summary! 75 contextmenu xul attributes, xul reference no summary! 76 control xul attributes, xul reference no summary! 77 crop xul attributes, x...
...summary! 184 maxlength xul attributes, xul reference no summary! 185 maxpos xul attributes, xul reference no summary! 186 maxrows xul attributes, xul reference no summary! 187 maxwidth xul attributes, xul reference no summary! 188 member xul attributes, xul reference no summary! ...
...And 49 more matches

PopupEvents - Archive of obsolete content
popup events there are several events related to popups and menus. an overview of these is listed below: contextmenu this event is fired when a request is made to open a context menu, whether by the keyboard or mouse. this event will be fired even for elements that don't have a context menu associated with them. for more information about how to use this event, see context menu events. popupshowing this event is fired on a menupopup, panel or tooltip just before it is made visible. this event is most commonly used to add or adjust items on the popup based on the context. popupshown this event is fired on a menupopup, panel or tooltip once it is visible on screen. popuphiding this even...
... popupshowing this event is fired on a menupopup, panel or tooltip just before it is made visible. this event is most commonly used to add or adjust items on the popup based on the context. popupshown this event is fired on a menupopup, panel or tooltip once it is visible on screen. popuphiding this event is fired on a menupopup, panel or tooltip once it is about to be hidden. this may happen because the user selected an item from the menu, or it may be because the popup was closed by clicking elsewhere. popuphidden this event is fired on a menupopup, panel or tooltip once it has been hidden. the popupshowing event just before a popup is about to be displayed, a popupshowing event will...
...e displayed, a popupshowing event will fired on the popup. this will occur regardless of how the popup is opened, either from user interaction or from a script calling the openpopup or openpopupatscreen methods. the typical usage of a listener of the popupshowing event is to adjust the content of the popup based on context. for instance, right clicking on an image might display items on a context menu pertaining to images, whereas clicking on a link would display only those items pertaining to links. within the listener for the popupshowing event, you can append to or modify the menu as needed before it is displayed. for examples of the use of the popupshowing event when used with context menus, see hiding and showing menu items based on context. however, this technique can be applied to any t...
...And 40 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
ss-package overlays the “overlay” technique introduced in chapter 3 required the use of the xul-overlay instruction in the xul document that is the overlay target. it is also possible to coerce an overlay without using the xul-overlay instruction in the xul document—this is called a “cross-package overlay” (figure 2). in fact, you need to use cross-package overlays to append buttons or menus to the firefox browser window. use the chrome manifest to invoke a cross-package overlay. normal overlay: adding the xul-overlay instruction to the target xul document overlays it with another xul document cross-package overlay: adding a cross manifest permits one xul file to overlay another without any xul-overlay instruction. figure 2: invoking a cross-package overlay (fixme: not really expl...
...oduction to chrome that probably leaves a lot of unanswered questions. if you keep in mind the following three points at the very least, the next section, developing a simple extension, should help flesh out your understanding. an extension’s gui, or chrome, can consist of three kinds of package: content, locale, and skin. use a cross-package overlay on top of browser.xul to add a button or menu item to the firefox browser window. the chrome manifest plays two important roles: it registers the contents of the chrome packages, and invokes the cross-package overlay. developing a simple extension: hello world in this section, we will write an extremely simple “hello world” extension that only displays the time.3 phase 1: test install our first step will be to perform a test inst...
...ays two important roles: it registers the contents of the chrome packages, and invokes the cross-package overlay. developing a simple extension: hello world in this section, we will write an extremely simple “hello world” extension that only displays the time.3 phase 1: test install our first step will be to perform a test installation consisting of the minimum code needed to add a new menu item to the tools menu (figure 3). fixme: figure 3: menu after phase 1 complete source file structure first set up the work folders you’ll use to organize your extension’s source files. the folder can be wherever you want, but for the purposes of this guide, we’ll assume it’s at c:\extensions\helloworld . create folders and files in your work folder as shown in figure 4. the purpose of...
...And 38 more matches

The Essentials of an Extension - Archive of obsolete content
recommended, though. this is the information firefox and other mozilla applications need to install an add-on. any errors or missing information will cause the installation process to fail, or the extension to be installed in a disabled state. the chrome.manifest file chrome is the set of user interface elements of the application window that are outside of a window's content area. toolbars, menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome. taken from chrome registration. in other words, the chrome is everything you see in firefox. all firefox windows can be seen as having two parts: (1) the chrome and (2) possibly a content area, like the one that displays web pages in a firefox tab. windows like the downloads window ar...
...heir lines at 80 characters. the tabulation is very straightforward: 2 blank space indents. we never use actual tab characters, with the exception of makefiles, which will be covered later on. most of our coding standards are based on mozilla's or other known and used standards. ...
...characters. the tabulation is very straightforward: 2 blank space indents. we never use actual tab characters, with the exception of makefiles, which will be covered later on. most of our coding standards are based on mozilla's or other known and used standards. ...
...And 37 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
0em;"/> listing 7: setting the size of a button using css markup hidden and collapsed the hidden and collapsed attributes act as switches to turn off the display of elements. setting hidden="true" disables display of that element. this has the same effect as setting display: none in css. you would use this to set a hidden or absent state, for example items that aren't displayed in contextual menus. setting collapsed="true" sets an element's height and width to 0, but the element is treated as being present. this is equivalent to setting visibility: collapse in css. use this to "roll up" sidebars that aren't currently in use. disabled while not appropriate for all elements, you can use the disabled attribute to temporarily disable input to an element that is normally operable by the use...
...g> listing 8: a dialog figure 5: output from listing 8 note: the functions behind the dialog elements discussed here require "xpconnect privileges," which are discussed in chapter 4, so this example will only run correctly if it can run as firefox code itself or installed extension code. please be aware that if you attempt to open this sample directly in firefox, it will not run correctly. ...
...ut from listing 8 note: the functions behind the dialog elements discussed here require "xpconnect privileges," which are discussed in chapter 4, so this example will only run correctly if it can run as firefox code itself or installed extension code. please be aware that if you attempt to open this sample directly in firefox, it will not run correctly. menus hierarchically structured dropdown menus are the part of the user interface used for frequently accessed functions in an application or web service. in the past, a combination of html and javascript was used to produce this sort of complex ui structure, but in xul, it can be handled easily just by writing tags. creating the menu listing 9 shows how the menu element and its related elements are combined. this produces the output seen ...
...And 34 more matches

Adding captions and subtitles to HTML5 video - Developer guides
rclang indicates what language each subtitle files' contents are in. the default attribute is set on the english <track> element, indicating to the browser that this is the default subtitle file definition to use when subtitles have been turned on and the user has not made a specific selection. in addition to adding the <track> elements, we have also added a new button to control the subtitles menu that we will build. as a consequence, the video controls now look as follows: <div id="video-controls" class="controls" data-state="hidden"> <button id="playpause" type="button" data-state="play">play/pause</button> <button id="stop" type="button" data-state="stop">stop</button> <div class="progress"> <progress id="progress" value="0" min="0"> <span id="progress-bar"></sp...
... by default: for (var i = 0; i < video.texttracks.length; i++) { video.texttracks[i].mode = 'hidden'; } the video.texttracks property contains an array of all the text tracks attached to the video. we loop through each one and set its mode to hidden. note: the webvtt api gives us access to all the text tracks that are defined for an html5 video using the <track> element. ...
...texttracks[i].mode = 'hidden'; } the video.texttracks property contains an array of all the text tracks attached to the video. we loop through each one and set its mode to hidden. note: the webvtt api gives us access to all the text tracks that are defined for an html5 video using the <track> element. building a caption menu our aim is to use the subtitles button we added earlier to display a menu that allows users to choose which language they want the subtitles displayed in, or to turn them off entirely. we have added the button, but before we make it do anything, we need to build the menu that goes with it. this menu is built dynamically, so that languages can be added or removed later by simply editing the <track> elements within the video's markup. all we need to do is to go throu...
...And 28 more matches

Using Remote XUL - Archive of obsolete content
: components.classes["@mozilla.org/permissionmanager;1"] .getservice(components.interfaces.nsipermissionmanager) .add(uri, 'allowxulxbl', components.interfaces.nsipermissionmanager.allow_action); xul (pronounced like "zool"), which is short for xml-based user interface language, is an xml-based language for describing application interfaces. it contains elements for all common ui widgets (menus, buttons, toolbars, etc.) and many sophisticated ones (trees, browsers, color pickers). xul is often used by desktop applications like mozilla but can also be loaded from a web server and rendered inside the content pane of a compatible browser. xul loaded and rendered in this way is called remote xul and can be used for basic functions like web site navigation as well as to build sophisticated...
...e entire site). it is difficult to discern the site's basic structure and available resources, which makes it hard to locate a particular page or find the one with the information you want. part of the problem is that html has limited features for navigation. its primary mechanism--the hyperlink--was designed to be interspersed in content. html-based navigation bars take up too much space, dhtml menus are slow and buggy, and site maps make you go to an intermediate page to find the information you want. xul's navigation-oriented widgets, like toolbars, menus, and trees, are a better way to provide web site navigation because they can fit a lot of navigation into a small space, render quickly, and work well. note: the downside to using xul is that it only works with browsers that understand ...
...will be the only flexible element in our document, so we don't have to worry about its value and give it a standard value of 1. [optionally add something about how flex only applies to one axis] note that for remote xul documents you can see changes you make to the ui by reloading the document with your browser's "reload" function, just as with a typical html page. ...
...And 25 more matches

XUL controls - Archive of obsolete content
table lists the xul user interface controls. for a step-by-step guide on how to use these controls, see the xul tutorial. for more reference information, see the xul reference. <button> a button that can be pressed by the user. <button label="save" accesskey="s"/> more information about the button element. ...
...ols. for a step-by-step guide on how to use these controls, see the xul tutorial. for more reference information, see the xul reference. <button> a button that can be pressed by the user. <button label="save" accesskey="s"/> more information about the button element. button reference <button type="menu"> a button that has a drop down menu attached to it. ...
...ontrols, see the xul tutorial. for more reference information, see the xul reference. <button> a button that can be pressed by the user. <button label="save" accesskey="s"/> more information about the button element. button reference <button type="menu"> a button that has a drop down menu attached to it. pressing the button opens the menu. ...
...And 25 more matches

OpenClose - Archive of obsolete content
opening and closing popups popups and menus may be opened and closed by a script. opening menus menus will display themselves automatically when needed without extra work. for instance, a menu's popup will open when the menu label is clicked, and a submenu will open when the mouse is hovered over the parent menu element. however, there may be situations when you wish to open a menu manually. the menu element has an open property which may be set to true to open the menu, or false to close the menu. a simple example: somemenu.open = true; this single line of code will open a menu referenced by the variable 'somemenu'. note that the open property applies to the menu or button, not to the menupopup. ...
...ish to open a menu manually. the menu element has an open property which may be set to true to open the menu, or false to close the menu. a simple example: somemenu.open = true; this single line of code will open a menu referenced by the variable 'somemenu'. note that the open property applies to the menu or button, not to the menupopup. here is a complete example which uses a button to open a menu: <button label="open menu" oncommand="document.getelementbyid('editmenu').open = true;"/> <menu id="editmenu" label="edit"> <menupopup> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </menu> this technique may be used for both menupopups that use the menu tag, the button tag and the toolbarbutton tag. ...
...a button to open a menu: <button label="open menu" oncommand="document.getelementbyid('editmenu').open = true;"/> <menu id="editmenu" label="edit"> <menupopup> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </menu> this technique may be used for both menupopups that use the menu tag, the button tag and the toolbarbutton tag. for menupopups attached to other elements using the popup or context attributes, see opening a popup below. as with other ways of opening a menu, the popupshowing event will be fired to provide an opportunity to customize the commands that appear on the menu. there are several situations when opening a menu is not allowed. ...
...And 21 more matches

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

XPCOM Examples - Archive of obsolete content
« previousnext » this section provides some examples of using xpcom along with some additional interfaces. window management this example contains rdf datasource that will be seen in the later section. you might skip this example for the time being, except when you have already had that knowledge. creating a window menu the list of currently open mozilla windows can be used as an rdf datasource. ...
... some examples of using xpcom along with some additional interfaces. window management this example contains rdf datasource that will be seen in the later section. you might skip this example for the time being, except when you have already had that knowledge. creating a window menu the list of currently open mozilla windows can be used as an rdf datasource. this allows you to create a window menu with a list of the currently open windows in the application. the datasource for this is rdf:window-mediator. ...
...ple for the time being, except when you have already had that knowledge. creating a window menu the list of currently open mozilla windows can be used as an rdf datasource. this allows you to create a window menu with a list of the currently open windows in the application. the datasource for this is rdf:window-mediator. we can use this as in the following example: example 1 : source <toolbox> <menubar id="windowlist-menubar"> <menu label="window"> <menupopup id="window-menu" datasources="rdf:window-mediator" ref="nc:windowmediatorroot"> <template> <rule> <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </rule> </template> </menupopup> </menu> </menubar> </toolbox> a window menu will be created with a list of all the open windows. t...
...And 20 more matches

Extensions - Archive of obsolete content
adding a new menu the main menu bar in firefox has the id 'main-menubar'. to add a new menu onto the main application menubar, you will need to overlay this menubar. for instance: <menubar id="main-menubar"> <menu label="search" insertbefore="tools-menu"> <menupopup> <menuitem label="web"/> <menuitem label="mail"/> </menupopup> </menu> </menubar> this menu is added to the main menu bar just before the tools menu. the insertbefore attribute is set to 'tools-menu' to ensure that the new menu is added at the right place. note that the menu will not appear until it has a <menupopup>. adding a new menuitem you might wish to add a new item to one of the menus. this can be done by overlaying the popup to append the item to. ...
... is added to the main menu bar just before the tools menu. the insertbefore attribute is set to 'tools-menu' to ensure that the new menu is added at the right place. note that the menu will not appear until it has a <menupopup>. adding a new menuitem you might wish to add a new item to one of the menus. this can be done by overlaying the popup to append the item to. for a list of the ids of the menus for firefox, see firefox menus. for example, to add an item to the end of the tools menu, use the following: <menupopup id="menu_toolspopup"> <menuitem label="thesaurus"/> </menupopup> note that other extensions may be adding their own items into the same menus. ...
...he popup to append the item to. for a list of the ids of the menus for firefox, see firefox menus. for example, to add an item to the end of the tools menu, use the following: <menupopup id="menu_toolspopup"> <menuitem label="thesaurus"/> </menupopup> note that other extensions may be adding their own items into the same menus. because of this, the new item might not appear at the end of the menu but before a menuitem added by another extension, depending on the order in which the overlays are applied. as you cannot predict this order, you should not rely on any menuitems being in particular positions in the presence of other extensions. ...
...And 19 more matches

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

Gecko info for Windows accessibility vendors
re that we are adding accessibility to, in order to support basic accessibility in all applications that are based on it. embedded clients (support msaa) embedded clients use gecko only in the content window, at the moment for html and generic xml only. they typically use standard windows controls for their user interface -- the area outside of the client content window, plus the context menu. mfcembed testing client: this is a very simple package, great for testing basic html accessibility with your products and the gecko rendering engine. k-meleon: a light, ultra-fast and more advanced (fully configurable) gecko-based web browser available on the windows platform xul-based clients (support msaa) xul-based clients make full use of the gecko architect...
... very simple package, great for testing basic html accessibility with your products and the gecko rendering engine. k-meleon: a light, ultra-fast and more advanced (fully configurable) gecko-based web browser available on the windows platform xul-based clients (support msaa) xul-based clients make full use of the gecko architecture, not only for html content, as well as for menus, dialogs and the entire user interface via an xml language called xul (extensible user-interface language). none of the user interface contains standard windows controls -- not even the menus! this is done to ensure a common look and feel across all supported platforms, and to allow for different skins (appearances). firefox (please use version 1.1 alpha builds or later) thunder...
...content. event_scrollingend is used to indicate when a document has scrolled, even if only 1 line. gecko fires this event when the scrolling is finished, rather than fire excessive events. event_scrollingstart is fired when the user has jumped to a named anchor within the page. the event is fired on the first accessible object in the part of the document that has been jumped to. event_menupopupstart and event_menupopupend are fired when xul menus are opened or closed. event_menustart and event_menuend are fired when the xul menubar is activated or deactivated. event_valuechange is fired for sliders, progress meters and other objects who's get_accvalue() may change. event_show, event_hide and event_locationchange are fired for the caret object. event_reorder is fired...
...And 19 more matches

tooltip - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } default type: boolean if true, the tooltip is used as the default popup for displaying tooltips in the window. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable...
... noautohide type: boolean if this attribute is set to false or omitted, the tooltip will automatically disappear after a few seconds. ...
... noautohide type: boolean if this attribute is set to false or omitted, the tooltip will automatically disappear after a few seconds. if this attribute is set to true, this will not happen and the tooltip will only hide when the user moves the mouse to another element. ...
...And 17 more matches

nsIMacDockSupport
orking with the mac os x dock for details and examples. method summary void activateapplication(in boolean aignoreotherapplications); attributes attribute type description badgetext astring text to display in a badge on the application's dock icon. this can be used, for example, to display the number of unread messages in an email client. dockmenu nsistandalonemenu the menu to display when the user right-clicks on the application's icon in the dock. methods activateapplication() activates the application, making it the frontmost application. the application should call this to activate itself when one of its dock menu items are selected, since doing so does not automatically activate the application. void activateapplication( ...
... its dock menu items are selected, since doing so does not automatically activate the application. void activateapplication( in boolean aignoreotherapplications ); parameters aignoreotherapplications if true, the application is activated regardless of the state of other applications. if false, the application is only activated if other applications are not currently active. about dockmenu by default firefox adds two menu items to the dock menu. the menu items are "new window" and "new private window". if permanent private browsing mode is enabled then the "new private window" menu item is hidden. ...
...regardless of the state of other applications. if false, the application is only activated if other applications are not currently active. about dockmenu by default firefox adds two menu items to the dock menu. the menu items are "new window" and "new private window". if permanent private browsing mode is enabled then the "new private window" menu item is hidden. this is created by using the dockmenu attribute of nsimacdocksupport here: http://mxr.mozilla.org/mozilla-release/source/browser/base/content/browser.js#1562 this is seen here: if you were to copy and follow that example you would replace the default native menu. this can be done like this: var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); console.log('docksupport:', docksupport); var w...
...And 17 more matches

:is() (:matches(), :any()) - CSS: Cascading Style Sheets
ditems.foreach(applyhandler); function applyhandler(elem) { elem.addeventlistener('click', function(e) { alert('this paragraph is inside a ' + e.target.parentnode.nodename); }); } simplifying list selectors the :is() pseudo-class can greatly simplify your css selectors. ...
... function applyhandler(elem) { elem.addeventlistener('click', function(e) { alert('this paragraph is inside a ' + e.target.parentnode.nodename); }); } simplifying list selectors the :is() pseudo-class can greatly simplify your css selectors. ...
...yhandler(elem) { elem.addeventlistener('click', function(e) { alert('this paragraph is inside a ' + e.target.parentnode.nodename); }); } simplifying list selectors the :is() pseudo-class can greatly simplify your css selectors. ...
...And 17 more matches

Theme changes in Firefox 2 - Archive of obsolete content
uring out the changes you need to make. file description of change browser/bookmarks/addbookmark.css updated to include microsummary-related css changes. browser/bookmarks/bookmarksproperties.css new file; includes microsummary-related css. browser/browser.css needs to be updated to include new css for microsummaries, search fields, iconic bookmark menu items, and more. browser/dropmark-nav-small.png new file; used as the drop-down menu arrow on the navigation buttons, when using small icons. browser/dropmark-nav.png new file; used as the drop-down menu arrow on the navigation buttons. browser/enginemanager.css new file; css used for the search engine manager. browser/feeds/addfeedreader.css new fi...
...der icon when it's located at the left end of the search bar. browser/search-provider-bkgnd.png new file; the background drawn behind the search provider icon when it's located at the right end of the search bar. global/about.css new file; css used in the application's about box. global/alltabs-box-bkgnd.png new file; the background for the "all tabs" drop-down menu at the right side of the tab bar. global/alltabs-box-overflow-bkgnd.png new file; the background for the "all tabs" drop-down menu when there are enough tabs to activate tab bar scrolling. global/browser.css revised to support new styles for the main browser window. global/globalbindings.xml updated to support changes to the tab bar, including per-tab close but...
... revised to support new styles for the main browser window. global/globalbindings.xml updated to support changes to the tab bar, including per-tab close buttons. global/icons/alltabs.png not actually used; left over from earlier drafts of the theme. global/inactivetab-left.png removed file. global/inactivetab-right.png removed file. global/menu.css updated to include new styles. global/notification.css new file; defines styles used by the notification strip that appears at the top of browser windows to present notices such as "a popup was blocked." global/scrollbox/autorepeat-arrow-dn-dis.gif new file; icon displayed for a disabled autorepeat down arrow in a scroll box. global/scrollbox/autorepeat-arr...
...And 16 more matches

imgIContainer
in pruint32 aflags); native code only! void decodingcomplete(); obsolete since gecko 2.0 void draw(in gfxcontext acontext, in gfxgraphicsfilter afilter, [const] in gfxmatrix auserspacetoimagespace, [const] in gfxrect afill, [const] in nsintrect asubimage, [const] in nsintsize aviewportsize, in pruint32 aflags); native code only! void endframedecode(in unsigned long framenumber); obsolete since gecko 2.0 void ensurecleanframe(in unsigned long aframenum, in print32 ax, in print32 ay, in print32 awidth, in print32 aheight, in gfximageformat aformat, [array, size_is(imagelength)] out pruint8 imagedata, out unsigned long imagelength); native code only! obsolete since gecko 2.0 imgicontainer extractcurrentframe([const] in nsintrect arect); native code ...
...length)] out pruint8 imagedata, out unsigned long imagelength); native code only! obsolete since gecko 2.0 imgicontainer extractcurrentframe([const] in nsintrect arect); native code only! obsolete since gecko 2.0 imgicontainer extractframe(in pruint32 awhichframe, [const] in nsintrect arect, in pruint32 aflags); native code only! void frameupdated(in unsigned long framenum, in nsintrect anewrect); native code only! obsolete since gecko 2.0 void getcurrentframerect(in nsintrect aframerect); native code only! obsolete since gecko 2.0 gfxasurface getframe(in pruint32 awhichframe, in pruint32 aflags); native code only! gfxiimageframe getframeat(in unsigned long index); obsolete since gecko 1.9.2 void getframecolormap(in unsigned ...
...intrect anewrect); native code only! obsolete since gecko 2.0 void getcurrentframerect(in nsintrect aframerect); native code only! obsolete since gecko 2.0 gfxasurface getframe(in pruint32 awhichframe, in pruint32 aflags); native code only! gfxiimageframe getframeat(in unsigned long index); obsolete since gecko 1.9.2 void getframecolormap(in unsigned long framenumber, [array, size_is(palettelength)] out pruint32 palettedata, out unsigned long palettelength); obsolete since gecko 2.0 unsigned long getframeimagedatalength(in unsigned long framenumber); obsolete since gecko 2.0 imagecontainer getimagecontainer(); native code only! nsiframe getrootlayoutframe(); violates the xpcom interface guidelines pruint16 gettype()...
...And 16 more matches

Extensions support in SeaMonkey 2 - Archive of obsolete content
tent/bookmarks/bookmarkspanel.xul chrome://communicator/content/bookmarks/bm-panel.xul chrome://browser/content/places/places.xul chrome://communicator/content/bookma...rksmanager.xul thunderbird uses mostly the same chrome urls for overlaying as seamonkey. there are exceptions, but these are few and far between. ...
...el.xul chrome://communicator/content/bookmarks/bm-panel.xul chrome://browser/content/places/places.xul chrome://communicator/content/bookma...rksmanager.xul thunderbird uses mostly the same chrome urls for overlaying as seamonkey. there are exceptions, but these are few and far between. seamonkey also uses different ids for the menu items. ...
...icator/content/bookmarks/bm-panel.xul chrome://browser/content/places/places.xul chrome://communicator/content/bookma...rksmanager.xul thunderbird uses mostly the same chrome urls for overlaying as seamonkey. there are exceptions, but these are few and far between. seamonkey also uses different ids for the menu items. ...
...And 15 more matches

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

panel - Archive of obsolete content
the default is none. nonethe panels doesn't automatically fade away.slowthe panels slowly fades away after a short time.fastthe panels quickly fades away after a short time. flip type: string normally, when a popup opens near the edge of the screen, it flips over to open on the opposite side of the anchor, so that it doesn't extend off the screen. for example, if the menu doesn't have room to open downward, it flips to open upward instead; this is a vertical flip. horizontal flipping doesn't normally happen, since this would cause menus to open in strange places. for arrow popups, however, being able to flip horizontally makes sense. this attribute, set to both, permits that behavior. you will not normally have to use this attribute, since it's automatically appli...
...ue, then when the panel is hidden, the keyboard focus will be restored to whatever had the focus before the panel was opened. if true, the focus will not be reset, although it will be cleared if the focus is within the panel. onpopuphidden type: script code this event is sent to a popup after it has been hidden. ...
...estored to whatever had the focus before the panel was opened. if true, the focus will not be reset, although it will be cleared if the focus is within the panel. onpopuphidden type: script code this event is sent to a popup after it has been hidden. this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden. ...
...And 14 more matches

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
lthough it is supported in most modern browsers, its implementation varies widely. in older browsers, even the keyword none does not have the same effect on all form elements across different browsers, and some do not support it at all. the differences are smaller in the newest browsers. ...
...ic user interface module level 4 values */ appearance: none; appearance: auto; appearance: menulist-button; appearance: textfield; /* "compat-auto" values, which have the same effect as 'auto' */ appearance: button; appearance: searchfield; appearance: textarea; appearance: push-button; appearance: slider-horizontal; appearance: checkbox; appearance: radio; appearance: square-button; appearance: menulist; appearance: listbox; appearance: meter; appearance: progress-bar; /* partial list of available values in gecko */ -moz-appearance: scrollbarbutton-up; -moz-appearance: button-bevel; /* partial list of available values in webkit/blink (as well as gecko and edge) */ -webkit-appearance: media-mute-button; -webkit-appearance: caret; values standard keywords value demo browse...
...m</div> firefox chrome safari edge no special styling is applied. this is the default. auto div{ color: black; -moz-appearance: auto; -webkit-appearance: auto; appearance:auto; } <div>lorem</div> none the user agent selects the appropriate special styling based on the element. acts as none on elements with no special styling. menulist-button div { color: black; -moz-appearance: menulist-button; -webkit-appearance: menulist-button; } <div>lorem</div> firefox chrome safari edge the element is styled as a button that would indicate a menulist can be opened. textfield div { color: black; -moz-appearance: textfield; -webkit-appearance: textfield; } <div>lorem</div...
...And 14 more matches

Adding preferences to an extension - Archive of obsolete content
as before, concepts covered in the previous articles in this series won't be rehashed here, so if you haven't already seen them: creating a status bar extension creating a dynamic status bar extension also, for reference, you may want to take a look at preferences system and the preferences api. ...
... as before, concepts covered in the previous articles in this series won't be rehashed here, so if you haven't already seen them: creating a status bar extension creating a dynamic status bar extension also, for reference, you may want to take a look at preferences system and the preferences api. ...
...in our tickersymbol variable. once we've gotten the updated preference, we call refreshinformation() to immediately update the display with the new stock's information. watchstock() while we're at it, let's add a method that sets which stock we want to be watching, changing the preference and immediately requesting a refresh of the display. this method will be used when the user uses the popup menu we'll be adding to change what stock they're watching. watchstock: function(newsymbol) { this.prefs.setcharpref("symbol", newsymbol); }, the only new information for us here is the call to the preference object's setcharpref() function, which sets the value of the "symbol" preference. note that this call results in our stockwatcher.observe() method being invoked and displayed stock infor...
...And 13 more matches

Keyboard Shortcuts - Archive of obsolete content
« previousnext » you could use keyboard event handlers to respond to the keyboard. however, it would be tedious to do that for every button and menu item (though it could be necessary when one's key commands are only triggered when the user is focused on a particular element). creating a keyboard shortcut xul provides methods in which you can define keyboard shortcuts. we've already seen in the section on menus that we can define an attribute called accesskey which specifies the key which a user can press to activate the menu or menu item. in the example below, the file menu can be selected by pressing alt + f together (or some other key combination for a specific platform). once the file menu is open, the close menu item can be selected by pressing c. example 1 : source v...
...when the key is pressed in this case, the button is selected. ...
...when the key is pressed in this case, the button is selected. you might want to set up more general keyboard shortcuts however. ...
...And 13 more matches

Accessibility/XUL Accessibility Reference - Archive of obsolete content
r label="sex" /> <listheader label="color" /> </listhead> <listitem> <label value="<!--pearl-->" /> <label value="<!--female-->" /> <label value="<!--gray-->" /> </listitem> </listbox> i don't seem to be able to find a straightforward way to read the header labels in jaws. ...
...<listheader label="color" /> </listhead> <listitem> <label value="<!--pearl-->" /> <label value="<!--female-->" /> <label value="<!--gray-->" /> </listitem> </listbox> i don't seem to be able to find a straightforward way to read the header labels in jaws. ...
...abel="color" /> </listhead> <listitem> <label value="<!--pearl-->" /> <label value="<!--female-->" /> <label value="<!--gray-->" /> </listitem> </listbox> i don't seem to be able to find a straightforward way to read the header labels in jaws. ...
...And 13 more matches

ARIA Test Cases - Accessibility
essed. fail in v pc mode. no indication is given that a button is pressed, or that it is pressed after activating it. ...
... - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - menu button dojo nightly build expected at behavior: screen readers should indicate that this button has an associated menu. screen magnifiers should give indication (if this is not done visually anyway). when the button is pressed, the menu should be tracked like any other menu. when closing the menu, this should be indicated, and focus should be repeated for the menu button the menu was opened from, or the new focus location if the activated menu item results in that. markup used: notes: results: at...
...ny other menu. when closing the menu, this should be indicated, and focus should be repeated for the menu button the menu was opened from, or the new focus location if the activated menu item results in that. markup used: notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 pass in non-v-pc-mode. buttons are indicated as menu buttons. menus are tracked, closing menus also results in correct focus tracking. partial fail in v-pc-mode. the fact that a button is a menu button is not indicated with the virtual cursor. menus and focus are properly tracked upon activation. - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - ...
...And 13 more matches

Positioning - Archive of obsolete content
positioning popups there are several ways in which the location of a popup on screen may be controlled. default positioning of popups a top level menu popup is, by default, placed with the upper edge of the popup flush with the lower edge of the menu or button it is associated with. horizontally, the left edge of the menu popup is aligned with the left edge of the menu or button. a submenu, however, is placed by default to the right of the parent menu item, such that the top edge of the menu is aligned with the top edge of the parent menu item. however, the submenu will appear to the left instead for right to left locales. ...
...r button it is associated with. horizontally, the left edge of the menu popup is aligned with the left edge of the menu or button. a submenu, however, is placed by default to the right of the parent menu item, such that the top edge of the menu is aligned with the top edge of the parent menu item. however, the submenu will appear to the left instead for right to left locales. for both top level menus and submenus, they may appear above or to the left instead of their usual placement if there is not enough room to display the menu at full size below or to the right. if there is not enough room on either side, the menu will be shrunk down to fit. for popups attached using the popup or context attributes, the default position to appear is with the upper left corner (or upper right corner in ri...
...l placement if there is not enough room to display the menu at full size below or to the right. if there is not enough room on either side, the menu will be shrunk down to fit. for popups attached using the popup or context attributes, the default position to appear is with the upper left corner (or upper right corner in right to left locales) at the position where the mouse was clicked. context menus will appear offset down and to the right a couple of pixels so that the menu can be dismissed again just by clicking in the same place. if a context menu was opened via the keyboard only, the menu will appear at the top left corner of the document, or underneath the currently selected item if a list is focused. ...
...And 12 more matches

Adding more elements - Archive of obsolete content
« previousnext » we will conclude the discussion of boxes by adding some boxes to the find files dialog. adding elements to our find files example we will add some more elements to the find files dialog now. first, we will add the capability to search for other information such as the file size and date. ...
... « previousnext » we will conclude the discussion of boxes by adding some boxes to the find files dialog. adding elements to our find files example we will add some more elements to the find files dialog now. first, we will add the capability to search for other information such as the file size and date. ...
... « previousnext » we will conclude the discussion of boxes by adding some boxes to the find files dialog. adding elements to our find files example we will add some more elements to the find files dialog now. first, we will add the capability to search for other information such as the file size and date. ...
...And 11 more matches

Introduction to DOM Inspector - Firefox Developer Tools
dom inspector is standalone; it supports all toolkit applications, and it's possible to embed it in your own xulrunner app. dom inspector can serve as a sanity check to verify the state of the dom, or it can be used to manipulate the dom by hand, if desired. note: starting with firefox 3, the dom inspector is not included in firefox by default; instead, you must download and install it from the mozilla add-ons web site. ...
...ox 3, the dom inspector is not included in firefox by default; instead, you must download and install it from the mozilla add-ons web site. (note: this is now a dead link.) when you first start the dom inspector, you are presented with a two-pane application window that looks a little like the main mozilla browser. like the browser, the dom inspector includes an address bar, and some of the same menus. in seamonkey additional global menus will be available. inspecting a document when the dom inspector opens, it may or may not load an associated document, depending on the host application. if the dom inspector doesn't automatically load a document or loads a document other than the one you'd like to inspect, you can select the desired document a few different ways. inspecting content docu...
...nus will be available. inspecting a document when the dom inspector opens, it may or may not load an associated document, depending on the host application. if the dom inspector doesn't automatically load a document or loads a document other than the one you'd like to inspect, you can select the desired document a few different ways. ...
...And 11 more matches

Box-shadow generator - CSS: Cascading Style Sheets
<div id="layer_manager"> <div class="group section"> <div class="button" data-type="add"> </div> <div class="button" data-type="move-up"> </div> <div class="button" data-type="move-down"> </div> </div> <div id="stack_container"></div> </div> <div id="preview_zone"> <div id="layer_menu" class="col span_12"> <div class="button" id="element" data-type="subject" data-title="element"> element </div> <div class="button" id="before" data-type="subject" data-title=":before"> :before <span class="delete" data-type="disable"></span> </div> <div class="button" id="after" data-type="sub...
..." data-step="1" data-value="200"> </div> <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div> <div class="ui-slider-input" data-topic="height" data-unit="px"></div> </div> </div> </div> <div id="output" class="category"> <div id="menu" class="menu"></div> <div class="title"> css code </div> <div class="group" style="border-top-left-radius: 0;"> <div class="output" data-topic="element" data-name="element" data-prop="width height background-color position=[relative] box-shadow"> </div> <div class="output" data-t...
... center center; background-repeat: no-repeat; position: absolute; top: 0; right: 10px; display: none; } #layer_manager .delete:hover { background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png"); } #layer_manager .node:hover .delete { display: block; } #layer_manager .stack { padding: 0 5px; max-height: 90%; overflow: auto; overflow-x: hidden; } /* * layer menu */ #layer_menu { margin: 0 0 10px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #layer_menu .button { width: 100px; margin: 0 5px 0 0; padding: 2.5px; color: #333; background-color: #eee; border: 1px solid #ccc; border-radius: 3px; text-align: center; font-size: 0.75em; line-height: 1.5em; position: relative; display: block; float: ...
...And 11 more matches

Venkman Introduction - Archive of obsolete content
add-ons. the installation process is two steps. first, from within the browser you want to host the debugger application, visit the firefox add-ons page and click on the "install" link for the most recent version. when the download is complete, restart your browser (some windows users may also need to restart their computer as well). you can then access the debugger via a new, dynamically created menuitem in the tools menu of that browser, or else restart the browser with a special debugger option. to see which version of venkman you have, type /version in the interactive session view. for more information about the latest improvements and versions, see the venkman development page. there are two ways to start the debugger: from firefox, you can start it by selecting javascript debugger f...
... you can also start the browser with the -venkman command line option, which launches venkman initially instead of an application front end. (note that venkman displays usage data when it starts up: "recorded local startup x, global yyy." this data comes from a counter built in to the application. ...
...else restart the browser with a special debugger option. to see which version of venkman you have, type /version in the interactive session view. for more information about the latest improvements and versions, see the venkman development page. there are two ways to start the debugger: from firefox, you can start it by selecting javascript debugger from the tools menu (tools->web development menu in mozilla 1.x and netscape). you can also start the browser with the -venkman command line option, which launches venkman initially instead of an application front end. (note that venkman displays usage data when it starts up: "recorded local startup x, global yyy." this data comes from a counter built in to the application. for more information about this counter and the data, see item 2.2 i...
...And 10 more matches

XUL Questions and Answers - Archive of obsolete content
e values include: accept, cancel, help, open, save, find, clear, yes, no, apply, close, print, add, remove, refresh, go-forward, go-back, properties, select-font, select-color, network. if you are using a button that matches one of these common usages, use the icon attribute to indicate this. how to use dynamic objects in toolbar there may be a few ways to implement this: by building your menupopup from an rdf datasource, which could be generated on the server. by getting data (e.g. json string) from the server, parsing it on client, and building the menupopup using dom methods (such as document.createelementns). by getting data as xml from the server. (server can just send the xul code to use for popup - alternatively it can send generic xml describing the attributes of the items in...
... from an rdf datasource, which could be generated on the server. by getting data (e.g. json string) from the server, parsing it on client, and building the menupopup using dom methods (such as document.createelementns). by getting data as xml from the server. (server can just send the xul code to use for popup - alternatively it can send generic xml describing the attributes of the items in the menu and you generate the xul on client by applying an xslt transform.) can i change a xul tree cell/row/item background color with javascript? to set the background color you need to set the property for the cell/row and not for the item. an example of this is: var tree = document.getelementbyid('treeid'); selectedtreeitem = tree.view.getitematindex(tree.currentindex); selectedtreeitem.firstchi...
...ged. for more information please look at the following link: nsextensionmanager.js is nsivariant fully supported using python? python has full support for variants. pass a python string/int/etc to the method requiring an nsivariant. a python object is convered when implmenting an interface taking an nsivariant. how do i close the "showpopup" which is automatically opened when the "oncontextmenu" event is called? if you have a similar code base as the following: onbookmarkcontextmenu: function(event, id) { document.getelementbyid("bookmarkpopup").showpopup(document.getelementbyid(id), event.screenx + 6, event.screeny + 6, "popup", "bottomright", "bottomright"); } use the hidepopup() function to solve this issue. what is an example of addprogresslistener? an example of this ...
...And 10 more matches

XUL Event Propagation - Archive of obsolete content
et hierarchy consider the following xul file: <?xml version="1.0"?> <?xml-stylesheet href="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...
...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. in the example abo...
... event bubbling this availability of events in places other than their element of origin is known as "event propagation" or event bubbling. ...
...And 10 more matches

2D maze game with device orientation - Game development
ng content. ...
....js"></script> <script src="src/preloader.js"></script> <script src="src/mainmenu.js"></script> <script src="src/howto.js"></script> <script src="src/game.js"></script> </head> <body> <script> (function() { var game = new phaser.game(320, 480, phaser.canvas, 'game'); game.state.add('boot', ball.boot); game.state.add('preloader', ball.preloader); game.state.add('mainmenu', ball.mainmenu); game.state.add('howto', ball.howto); game.state.add('game', ball.game); game.state.start('boot'); })(); </script> </body> </html> so far we have a simple html website with some basic content in the <head> section: charset, title, css styling and the inclusion of the javascript files. the <body> contains initialization of the phaser framework and the definitions of t...
... the second one is the object we want to assign to it. the start method is starting the given state and making it active. let's see what the states are actually. managing game states the states in phaser are separate parts of the game logic; in our case we’re loading them from independent javascript files for better maintainability. the basic states used in this game are: boot, preloader, mainmenu, howto and game. boot will take care of initializing a few settings, preloader will load all of the assets like graphics and audio, mainmenu is the menu with the start button, howto shows the "how to play" instructions and the game state lets you actually play the game. let's quickly go though the content of those states. boot.js the boot state is the first one in the game. var ball = { _w...
...And 10 more matches

Mobile accessibility - Learn web development
in much the same way as desktop screenreaders, except they are largely operated using touch gestures rather than key combinations. let's look at the main two: talkback on android and voiceover on ios. android talkback the talkback screen reader is built into the android operating system. to turn it on, look up what phone model and android version you have, and then look up where the talkback menu is. it tends to differ widely between android versions and even between different phone models. some phone manufacturers (e.g. samsung) don't even have talkback in newer phones, and instead opted for their own screen reader. when you've found the talkback menu, press the slider switch to turn talkback on. follow any additional on-screen prompts that you are presented with. when talkback is turn...
...ve between apps, or buttons/controls if you are in a control bar. the device will read out each option. double-tapping anywhere will open the app/select the option. you can also "explore by touch" — hold your finger down on the screen and drag it around, and your device will read out the different apps/items you move across. if you want to turn talkback off: navigate back to the talkback menu screen (using the different gestures that are currently enabled.) navigate to the slider switch and activate it to turn it off. note: you can get to your home screen at any time by swiping up and left in a smooth motion. if you have more than one home screen, you can move between them by swiping two fingers left and right. for a more complete list of talkback gestures, see use talkback gest...
... when talkback is turned on, unlocking the phone is a bit different. you can do a two-finger swipe up from the bottom of the lock screen. if you've set a passcode or pattern for unlocking your device, you will then be taken to the relevant entry screen to enter it. you can also explore by touch to find the unlock button at the bottom middle of the screen, and then double-tap. ...
...And 10 more matches

CustomizableUI.jsm
specific ui used by users to make customizations. this is handled by customizemode.jsm, which interacts with customizableui through a listener mechanism. areas areas are parts of the user interface in which customizable widgets can be placed. customizableui assumes that each area it is told about is present in every browser window. customizableui is aware of two types of areas: toolbars and the menu panel. areas are registered using the registerarea method and unregistered using the unregisterarea method. when a customizable toolbar's xbl binding is constructed (generally, that is when a <toolbar customizable="true"/> node is appended to the document and isn't invisible), the binding will call into customizableui and register the toolbar's node as being one of the concrete instances of its ...
...o a window; api-style widgets, which are the new widgets customizableui can create and manage for you. these come in 3 types themselves: button which are simple toolbar buttons which do something when clicked view which are toolbar buttons with a 'view' of further options. the view can be shown as its own panel when such a widget is in the toolbar, or as a sliding 'subview' of the menu panel when such a widget is in the menu panel. custom which are widgets that are custom-created by some js supplied by the consumer for more details, see api-provided widgets. 'special' widgets: these are the representations of xul <toolbarseparator>, <toolbarspring> and <toolbarspacer> elements. customizableui provides apis to add, move and remove all these different widgets, and m...
...indowopened(awindow) fired when a new customizable (ie browser) window is opened. onwindowclosed(awindow) fired when a customizable (ie browser) window is closed. ...
...And 10 more matches

Gecko Roles
« at apis support page this page offers a list of accessible roles used in gecko. role constants are defined in the nsiaccessiblerole interface. role_nothing used when the accessible item doesn't have a strongly defined role. role_titlebar represents a title or caption bar for a window. used by msaa only, this is supported automatically by microsoft windows. role_menubar represents the menu bar (positioned beneath the title bar of a window on most platforms or at the top of the screen on mac os x) from which menus are selected by the user. role_scrollbar represents a vertical or horizontal scroll bar, which is part of the client area or used in a control. role_grip represents a special mouse pointer, which allows a user to manipulate user inter...
...ly respond to the role by reading the entire onscreen contents of containers advertising this role. should be used for warning dialogs, etc. role_window represents the window frame, which contains child objects such as a title bar, client, and other objects contained in a window. the role is supported automatically by microsoft windows. role_internal_frame a sub-document. role_menupopup represents a menu, which presents a list of options from which the user can make a selection to perform an action. role_menuitem represents a menu item, which is an entry in a menu that a user can choose to carry out a command, select an option. role_tooltip represents a tooltip that provides helpful hints; this is generally displayed at the mouse cursor position. rol...
...ng lower than frame windows or documents, but above individual controls. role_chart represents a graphical image used to represent data. role_dialog represents a dialog box or message box. role_border represents a window border. role_grouping logically groups other objects. role_separator used to visually divide a space into two regions, such as a separator menu item or a bar that divides split panes within a window. role_toolbar represents a toolbar, which is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features. role_statusbar represents a status bar, which is an area at the bottom of a window that displays information about the current operation, state of the application, or selec...
...And 10 more matches

nsIAccessibleRole
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) constants constant value description role_nothing 0 used when accessible has no strong defined role. role_titlebar 1 represents a title or caption bar for a window. it is used by msaa only, supported automatically by ms windows. role_menubar 2 represents the menu bar (positioned beneath the title bar of a window) from which menus are selected by the user. the role is used by xul:menubar or role="menubar". role_scrollbar 3 represents a vertical or horizontal scroll bar, which is part of the client area or used in a control. role_grip 4 represents a special mouse pointer, which allows a user to manipulate user interface elements...
...f containers advertising this role. should be used for warning dialogs, etc. the role is used by xul:browsermessage, role="alert", xforms:message. role_window 9 represents the window frame, which contains child objects such as a title bar, client, and other objects contained in a window. the role is supported automatically by ms windows. role_internal_frame 10 a sub-document or iframe. role_menupopup 11 represents a menu, which presents a list of options from which the user can make a selection to perform an action. it is used for role="menu". role_menuitem 12 represents a menu item, which is an entry in a menu that a user can choose to carry out a command, select an option. it is used for xul:menuitem, role="menuitem". role_tooltip 13 represents a tooltip that provides helpful hints...
...ge box. it is used for xul:dialog, role="dialog". role_border 19 represents a window border. role_grouping 20 logically groups other objects. there is not always a parent-child relationship between the grouping object and the objects it contains. it is used for html:textfield, xul:groupbox, role="group". role_separator 21 used to visually divide a space into two regions, such as a separator menu item or a bar that divides split panes within a window. it is used for xul:separator, html:hr, role="separator". role_toolbar 22 represents a toolbar, which is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features. it is used for xul:toolbar, role="toolbar". role_statusbar 23 represents a status bar, which is an area at the bottom of a w...
...And 10 more matches

Content Scripts - Archive of obsolete content
page-mod: enables you to attach content scripts to web pages that match a specific url pattern. tabs: exports a tab object for working with a browser tab. the tab object includes an attach() function to attach a content script to the tab. page-worker: lets you retrieve a web page without displaying it. you can attach content scripts to the page, to access and manipulate the page's dom. context-menu: use a content script to interact with the page in which the menu is invoked. additionally, some sdk user interface components - panel, sidebar, frame - are specified using html, and use separate scripts to interact with this content. in many ways these are like content scripts, but they're not the focus of this article. to learn about how to interact with the content for a given user interface...
... accessing port in the content script in the content script the port object is available as a property of the global self object. so to emit a message from a content script: self.port.emit("mycontentscriptmessage", myconten...
...ontentscriptfile: self.data.url("content-script.js") }); worker.port.emit("alert", "message from the add-on"); }); tabs.open("http://www.mozilla.org"); // content-script.js self.port.on("alert", function(message) { window.alert(message); }); the context-menu module doesn't use the communication model described here. to learn about communicating with content scripts loaded using context-menu, see the context-menu documentation. accessing port in the content script in the content script the port object is available as a property of the global self object. so to emit a message from a content script: self.port.emit("mycontentscriptmessage", mycontentscriptmessagepayload); to receive a message from the add-on code: self.port.on("myaddonmessage", function(myaddonmessagepayload) { ...
...And 9 more matches

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

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

toolbarbutton - Archive of obsolete content
o a regular button except that it may be rendered differently. typically, it is expected to have an image. more information is available in the xul tutorial. relevant accessbility guidelines all toolbar functionality should be duplicated elsewhere in the application where possible, provide keyboard alternatives. where possible, duplicate functionality in a menu item or context menu. where not possible, make all toolbarbuttons focusable by -moz-user-focus: normal. attributes accesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, oncommand, open, orient, tabindex, title, type, validate properties accesskey, accessibletype, autocheck, checkstate, checked, ...
...rient, tabindex, title, type, validate properties 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 a...
... the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } dir type: one of the values below the direction in which the child elements of the element are placed. normal for scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for verti...
...And 9 more matches

Accessibility API cross-reference
they also define a list of possible object states, such as focused, read-only, checked, etc. an interesting problem is that mozilla, safari/khtml, opera, staroffice and other apps are cross-platform, but there is currently no cross-platform accessibility api. ...
.... the ipc mechanisms used by current generation api's are also not cross-platform, although communication for some cross-platform accessibility api of the future could be done through sockets. these tables describe how various accessibility apis define possible roles of an object, and states. all accessibility apis to date define a list of possible object roles, or general types, such as button, menu item, text, etc. they also define a list of possible object states, such as focused, read-only, checked, etc. this table is the start of a cross-reference, so we can spot the differences and similarities in the apis. aria is a standard developed as part of the web accessibility initiative, which uses markup syntax quite familiar to users of html, xml, sgml and others. the roles it specifies have...
...in tagged pdf n/a n/a expressed with aria-labelledby if visible on screen or aria-label otherwise <caption> (fo...
...And 9 more matches

Eclipse CDT
workspace preferences, selecting "c/c++ > indexer", and reenabling "automatically update the index". however, you may find this too disruptive, since re-indexing will then happen very frequently and code assistance can be broken while the index is rebuilding. the alternative is to leave that option disabled and update the index manually as necessary. to update the index manually, use the context menu in the project explorer tab on the left side of the window. to rebuild for changes in an individual directory (for example, to take account of some changes that you yourself made) select "index > freshen all files" on that directory. to rebuild the entire index (for example when you pull from mozilla-central) select "index > rebuild" on the project root. usage tips below are some of the more us...
...aximization of the current editor view (the editor must be focused first). to tab to another view, use cmd-f7/ctrl-f7. this is useful if you have maximized the editor using ctrl-m and you want to quickly see your search results. for example, without un-maximizing the editor. to side-by-side edit the same file in two different tabs, select the tab of the file that you want to edit, then from the menu bar select "window > new editor". this will open another tab containing the same file. now simply drag that tab to position it beside, above, or below the original. changes you make in one editor will be immediately reflected in the other. note that the search, call hierarchy, and other tabs have a "pin" button that allows you to open multiple tabs of these type. this is useful if you want to ke...
...of a symbol (or the declaration of a symbol if already at the definition), hover over the symbol, hold down the ctrl/cmd key, move the mouse slightly to linkify the symbol, then click on it. (having to move the mouse slightly is eclipse bug 26873). alternately, you can jump to the definition of the symbol under the cursor by pressing f3. to do a c++ symbol search select "search > c/c++" from the menubar, or use ctrl-h and select the "c/c++" search tab. to quickly find the definition of an enum, class, method, etc. use ctrl-shift-t/cmd-shift-t. to get a list of autocomplete options in an editor tab, start typing the name of an identifier and then type ctrl-space. unfortunately, the autocomplete list cannot (currently) be configured to appear automatically as soon as you start typing a charac...
...And 9 more matches

DOM Inspector internals - Firefox Developer Tools
there are three main facets to dom inspector. the one you are likely to be most familiar with is its inspector.xul-based primary ui. this is the two-pane inspector that appears when ctrl+shift+i (or cmd+shift+i) is pressed from one of the applications for which dom inspector has explicit support (i.e., menuitems placed via overlay). besides the dom inspector's primary ui, there are a couple other top-level inspectors which differ slightly (the object inspector and dom inspector sidebar used in seamonkey). initially, we will begin by focusing on inspector.xul and its entry point, and then expand our focus later to explain how these other inspectors differ. dom inspector from a high-level perspective the dom inspector primary ui consists of some toolbars and a panelset. the panelset...
...to changes to the inspected document, and the other panel reacts to changes to the selection in the first panel. these are the document panel and the object panel, respectively. (internally, a panel may be loosely referred to as a "pane", but a panelset is always referred to as a "panelset".) a panel's purpose is to manage available viewers. at the top of each panel is a toolbar which contains a menu button allowing you to choose which viewer to display from the viewer list, a label displaying the name of the currently active viewer, and another menu button allowing you to issue viewer-specific commands. viewers are dynamically loaded; when the panel is made to switch from one viewer to another, the old viewer is destroyed, and the new viewer is loaded in its place. in this way, the panelset...
...e a lot of overlays. some overlays can be described as host-integration overlays, and others as shared structure overlays. host-integration overlays dom inspector is a general-purpose extension, suitable for use with any mozilla toolkit host application. in order for dom inspector to be useful with its host application, though, there should be a way to launch dom inspector within it, e.g., by a menu item and an optional keyboard shortcut such as ctrl+shift+i (or cmd+shift+i). either the host applications must provide these themselves (usually bundling dom inspector with the application, too), or dom inspector must explicitly support them by providing its own menu items and keyboard shortcuts with host-integration overlays. dom inspector explicitly supports several mozilla project applicatio...
...And 9 more matches

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
methods supported in iaccessible - a minimal implementation would contain those marked "[important]": get_accparent: get the parent of an iaccessible. [important] get_accchildcount: get the number of children of an iaccessible. [important] get_accchild: get the child of an iaccessible. [important] get_accname: get the "name" of the iaccessible, for example the name of a button, checkbox or menu item. try to use unique names for each item in a dialog so that voice dictation software doesn't have to deal with extra ambiguity.[important] get_accvalue: get the "value" of the iaccessible, for example a number in a slider, a url for a link, the text a user entered in a field. [important] get_accdescription: get a long description of the current iaccessible. this is not really too useful. g...
...ach event does, see the msdn event constants page. check with your assistive technology partners to find out what events you need to support. ...
...stants page. check with your assistive technology partners to find out what events you need to support. ...
...And 9 more matches

Simple Storage - Archive of obsolete content
te a mystorage variable to emphasize the fact that jetpack.storage.simple is just a normal javascript object. they could have simply used jetpack.storage.simple directly. here's a complete real-world example. it's a simple note-taking jetpack. select some text on the page, right-click, and select note. the text will be remembered across browser restarts as a note. all notes are shown in the tools menu. you can install this example from the jetpack gallery. jetpack.future.import("menu");jetpack.future.import("selection");jetpack.future.import("storage.simple");// create the persistent notes array if it doesn't already exist.jetpack.storage.simple.notes = jetpack.storage.simple.notes || [];var notes = jetpack.storage.simple.notes;// updates the jetpack menu with the current notes. we'll add a n...
... can install this example from the jetpack gallery. jetpack.future.import("menu");jetpack.future.import("selection");jetpack.future.import("storage.simple");// create the persistent notes array if it doesn't already exist.jetpack.storage.simple.notes = jetpack.storage.simple.notes || [];var notes = jetpack.storage.simple.notes;// updates the jetpack menu with the current notes. we'll add a notes menu with// a submenu, which lists all the notes. ...
...ection");jetpack.future.import("storage.simple");// create the persistent notes array if it doesn't already exist.jetpack.storage.simple.notes = jetpack.storage.simple.notes || [];var notes = jetpack.storage.simple.notes;// updates the jetpack menu with the current notes. we'll add a notes menu with// a submenu, which lists all the notes. ...
...And 8 more matches

A XUL Bestiary - Archive of obsolete content
hrome url, which appears in place of the http url in pointers like the following global skin processing instruction: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> specifies a chrome to be loaded by the gecko rendering engine. in the example above, the chrome is simply a skin file to be loaded into the xul file, but the chrome can also be used to load whole chromes, as when a <menuitem> in one window brings up a new chrome: <menuitem value="mozilla help" oncommand="window.opendialog('chrome://help/content/help.xul', '_blank', 'chrome,all,dialog=no')" /> in this example, the chrome url is being used to point to a chrome within the package hierarchy of the mozilla application. a help chrome defined in mozill...
...item value="mozilla help" oncommand="window.opendialog('chrome://help/content/help.xul', '_blank', 'chrome,all,dialog=no')" /> in this example, the chrome url is being used to point to a chrome within the package hierarchy of the mozilla application. a help chrome defined in mozilla/bin/chrome/help/ is being invoked from the help menu. note that when no file name is specified after the chrome directory path, a file name with the same name as the package is assumed. in other words, a chrome url like the global pointer above picks up a file called global.css, and the help pointer above could also be written as chrome://help/content, because the name of the package itself is "help." viewing chromes other than mozilla's there is...
...ok of a whole application dynamically, but only to the extent that the skin is actually defined in the main global.css, or global skin. when you create styles in <style> tags, as style attributes for individual elements, or in custom css files, you break the ability of gecko to skin the application to which your xul belongs. widgets widgets are the pieces that you assemble to make an interface. menus, toolbars, buttons, and scrollbars are widgets, and so are such general purpose pieces as boxes and springs. these widgets can be created and placed within a xul file as simple elements: <menu>, <toolbar>, and so on. the syntax for these elements is based for the most part on xml. collectively, these widgets are also known as the xptoolkit. object models: dom and aom the document object model ...
...And 8 more matches

Popup Guide - Archive of obsolete content
a brief overview of each type is listed here; more details for each type can be found by following the corresponding links. a popup is not created as a separate window or file, instead it is included inside another window or dialog. ...
...a brief overview of each type is listed here; more details for each type can be found by following the corresponding links. a popup is not created as a separate window or file, instead it is included inside another window or dialog. ...
...er in which they are attached to an element and the manner in which they are opened. a brief overview of each type is listed here; more details for each type can be found by following the corresponding links. a popup is not created as a separate window or file, instead it is included inside another window or dialog. in this guide, the term 'popup' refers to all types of popups, whereas the term 'menu' refers to a specific type of popup. specifically, the first two types in the list below are menus. menus a menu is used when you wish to have a series of commands that can be activated by the user, but don't want to use the extra space for a button for each command. a menu is normally hidden, and when activated, a popup appears containing the list of commands. the user may select a command a...
...And 8 more matches

Anonymous Content - Archive of obsolete content
of xbl are still available whether the content is from xbl or whether the xul provides its own content. using the children element there may be times when you want both the xbl content and the content provided by the xul file to be displayed. you can do this by using the children element. the children added in the xul are added in place of the children element. ...
...whether the xul provides its own content. using the children element there may be times when you want both the xbl content and the content provided by the xul file to be displayed. you can do this by using the children element. the children added in the xul are added in place of the children element. this is handy when creating custom menu widgets. ...
...ildren element there may be times when you want both the xbl content and the content provided by the xul file to be displayed. you can do this by using the children element. the children added in the xul are added in place of the children element. this is handy when creating custom menu widgets. ...
...And 8 more matches

Localization - Archive of obsolete content
anese version: <description value="検索"/> you would declare an entity for each label or string of text that you use in your interface. you should not have any directly displayed text in the xul file at all. in addition to using entities for text labels, you should use them for any value that could be different in a different language. access keys and keyboard shortcuts for example. xul <menuitem label="&undo.label;" accesskey="&undo.key;"/> dtd <!entity undo.label "undo"> <!entity undo.key "u"> the example above uses two entities, one for the label on the undo menu item and the second for the access key. changing the find files example let's take a look at how we would put all of this together by modifying the find files dialog so that it uses a dtd file for all of its text...
...t/css"?> <?xml-stylesheet href="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...
...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;"/> <key id="paste_cmd" modifiers="accel" key="&pastecmd.commandkey;"/> <key id="close_cmd" keycode="vk_escape" oncommand="window.close();"/> </keyset> <vbox flex="1"> <toolbox> <menubar id="findfiles-menubar"> <menu id="file-menu" label="&filemenu.label;" accesskey="&filemenu.accesskey;"> <menupopup id="file-popup"> <menuitem label="&opencmd.label;" accesskey="&opencmd.accesskey;"/> <menuitem label="&savecmd.label;" accesskey="&savecmd.accesskey;"/> <menuseparator/> <menuitem label="&closecm...
...And 8 more matches

XUL accessibility guidelines - Archive of obsolete content
the navigation order should be logical, generally left to right, top to bottom. navigation order may vary depending on the nature of the application or the reading direction of the language. ensure that tab order is logical and all interactive elements can be accessed simply without the use of a mouse. you should be able to perform all functionality either directly in the application or through menu items or the context menu. trees provide alternative functionality for inaccessible operations. the column picker and column headers in xul trees are not keyboard accessible, consistent with the standard tree behavior on most contemporary operating systems. it is therefore necessary to provide a keyboard accessible alternative for accessing this functionality. the firefox "bookmarks manager"...
... an example of how to make trees more accessible. the bookmark manager allows users to sort bookmarks by a particular column of information and choose which columns to display. because column headers and the column picker, in the upper right hand corner of the tree, can not receive focus, they are not operable with a keyboard. ...
...ot receive focus, they are not operable with a keyboard. in the bookmark manager this functionality is available under the view menu which is accessible to a keyboard user. toolbarbuttons by default, toolbar buttons cannot receive focus with a keyboard. the recommended way of fixing this is that all functionality associated with a toolbar be duplicated elsewhere in the application, such as in a menu item or context menu. in cases where duplication of functionality is not possible (such as a window without a menu bar), toolbar buttons can be made focusable by adding the special css rule -moz-user-focus: normal. (firefox's "print preview" window uses this fallback technique.) this should only be used as a last resort, and it should be consistent throughout a window (that is either all toolbar ...
...And 8 more matches

XUL Overlays
"base" xul files and what kind should be put in overlays, xul overlays generally define items that are not present in the basic versions of the ui, such as additional components. when plug-ins, browser extensions, or other applications provide new ui elements to the browser, these elements should be defined in overlay files. ...
...he browser, these elements should be defined in overlay files. the installation of a media plug-in, for example, may add new icons and menu items to the interface: in the navigatoroverlay.xul file or in a separate navigatorsspoverlay.xul file (where navigator.xul defines the basic ui for the navigator package), these new plug-in elements would be defined as a collection of elements or subtrees: <menuitem name="super stream player"/> <menupopup name="ss favorites"> <menuitem name="wave" src="mavericks.ssp"/> <menuitem name="soccer" src="brazil_soccer.ssp"/> </menupopup> <titledbutton id="ssp" crop="right" flex="1" value="&ssbutton.label;" onclick="firessp()"/> overlays and id attributes bases and overlays are merged when they share the same id attribute. thus, given the follo...
... stream player"/> <menupopup name="ss favorites"> <menuitem name="wave" src="mavericks.ssp"/> <menuitem name="soccer" src="brazil_soccer.ssp"/> </menupopup> <titledbutton id="ssp" crop="right" flex="1" value="&ssbutton.label;" onclick="firessp()"/> overlays and id attributes bases and overlays are merged when they share the same id attribute. thus, given the following base: ... <menu id="file-menu"> <menupopup id="menu_filepopup"> <menuitem name="new"/> <menuitem name="open"/> <menuitem name="save"/> <menuitem name="close"/> </menupopup> </menu> ... ...
...And 8 more matches

Migrating from Firebug - Firefox Developer Tools
via ctrl+shift+s / cmd+opt+s. web console the web console is the equivalent of firebug's console panel. it shows log information associated with a web page and allows you to execute javascript expressions via its command line. the display between both is somewhat different. this may be changed in bug 1269730. filter log messages firebug offers two ways to filter log messages, via the options menu and via the filter buttons within the toolbar. the developer tools console offers similar functionality via the filter buttons inside its toolbar — centralized at one place. command line api the command line api in firebug provides some special functions for your convenience. the developer tools command line has some functions in common, but also has some other functions and misses others. c...
...onsole shows those structures directly under the "response" tab. multi-line command line firebug's console has a multi-line command line called command editor. the devtools do not have a side panel like the command editor (which is requested in bug 1133849), but therefore has a separate tool called scratchpad, which can be added as panel to the toolbox or opened in a separate window via firefox menu > developer > scratchpad or shift + f4. also, the normal command line smartly enters a line break when it recognizes an unfinished command like document. and you hit enter. you can also manually enter a line break by pressing shift + enter. response preview there is a preview tab when a network request logged to the console is expanded in firebug. the web console displays a preview within the r...
.../svg and the css related to it. within the devtools this functionality is served by the page inspector. edit html within the page inspector the tag attributes and the contents can be edited inline just like in firebug. beyond that it allows to edit the tag names inline. you can also edit the html directly. in firebug you do this by right-clicking a node and clicking edit html... in the context menu. in the devtools this option is also available via the context menu. there the option is called edit as html. only the live preview of changes is currently missing, which is tracked in bug 1067318 and bug 815464. copy html and related information firebug's html panel allows to copy the inner and outer html of an element as well as the css and xpath to it via the context menu of an element. the ...
...And 8 more matches

<color> - CSS: Cascading Style Sheets
uld be used with the inactivecaptiontext foreground color. inactivecaptiontext color of text in an inactive caption. should be used with the inactivecaption background color. infobackground background color for tooltip controls. should be used with the infotext foreground color. infotext text color for tooltip controls. should be used with the infobackground background color. menu menu background. should be used with the menutext or -moz-menubartext foreground color. menutext text in menus. should be used with the menu background color. scrollbar background color of scroll bars. threeddarkshadow the color of the darker (generally outer) of the two borders away from the light source for 3-d elements that appear 3-d due to two concentric layers of surrou...
... used with the -moz-html-cellhighlight background color. prior to gecko 1.9, use -moz-cellhighlighttext. ...
...tml-cellhighlight background color. prior to gecko 1.9, use -moz-cellhighlighttext. ...
...And 8 more matches

Event reference
ed position (fired continuously). keyup any key is released mouse events event name fired when auxclick a pointing device button (any non-primary button) has been pressed and released on an element. click a pointing device button (any button; soon to be primary button only) has been pressed and released on an element. contextmenu the right button of the mouse is clicked (before the context menu is displayed). dblclick a pointing device button is clicked twice on an element. mousedown a pointing device button is pressed on an element. mouseenter a pointing device is moved onto the element that has the listener attached. mouseleave a pointing device is moved off the element...
...ess common and non-standard events abortable fetch events event name fired when abort a dom request is aborted, i.e. using abortcontroller.abort(). ...
...on-standard events abortable fetch events event name fired when abort a dom request is aborted, i.e. using abortcontroller.abort(). ...
...And 8 more matches

ui/sidebar - Archive of obsolete content
dow is opened from a window that has a sidebar visible, the new window gets a sidebar, too. you can hide the sidebar by calling its hide() method. called with no arguments, show() and hide() will operate on the currently active window. from firefox 33 onwards you can pass a browserwindow into these methods, and they will then operate on the specified window. alternatively, the view->sidebar submenu in firefox will contain a new item which the user can use to show or hide the sidebar: the sidebar generates a show event when it is shown and a hide event when it is hidden. once you've finished using the sidebar you can destroy it by calling its dispose() method. to show what a sidebar looks like, here's a sidebar that displays the results of running the w3c validator on the current page: ...
...you should see console output like: console.log: add-on: add-on script got the message console.log: add-on: sidebar script got the reply using ready the ready event is emitted when the dom for the sidebar's content is ready. it is equivalent to the domcontentloaded event. at this point the sidebar script is initialized, so you can send messages to the sidebar script and be confident th...
...you should see console output like: console.log: add-on: sidebar script got the message console.log: add-on: add-on script got the reply globals constructors sidebar(options) creates a sidebar. var sidebar = require("sdk/ui/sidebar").sidebar({ id: 'my-sidebar', title: 'my sidebar', url: require("sdk/self").data.url("sidebar.html"), onattach: function (worker) { console.
...And 7 more matches

Creating a Firefox sidebar extension - Archive of obsolete content
er document is available: creating a firefox sidebar this article describes how to create a registered sidebar for firefox 2 or greater. see the references section for information on creating extension in earlier browsers. introduction this article is a quick start for the creation of a new sidebar for firefox. what we will do is create a sidebar and register it so it will be available in the menu. the goal is creating an empty sidebar that can be used as start for new sidebar applications. creating a sidebar requires some gui creation and registration in the destination application. first a simple xul page is created. then the registration files are made and finally the sidebar is packed into an installable xpi file. pre-requisites this article is a quick start, it won't explain all el...
...the overlay file is listed in example 4. example 4. chrome/content/firefoxoverlay.xul <?xml version="1.0"?> <!doctype overlay system "chrome://emptysidebar/locale/emptysidebar.dtd"> <overlay id="emptysidebaroverlay...
...s" ?> <!doctype page system "chrome://emptysidebar/locale/emptysidebar.dtd"> <page id="sbemptysidebar" title="&emptysidebar.title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > <vbox flex="1"> <label id="atest" value="&emptysidebar.title;" /> </vbox> </page> new extensions can be registered in the menus or popups, firefox uses overlays for extending menus. this is an separate xul file that specifies the location of menu items. the sidebar here is added to the view | sidebar menu. the overlay file is listed in example 4. example 4. 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/ga...
...And 7 more matches

toolbaritem - Archive of obsolete content
nces of toolbarbutton). if you don't need the thing you're placing in the toolbar to be customized then it doesn't need to be in a toolbaritem element. the element is used, for example, to hold the location bar's textbox in firefox. it is also used to group buttons together so they can be added and removed all at once like firefox's unified-back-forward-button. ...
...u don't need the thing you're placing in the toolbar to be customized then it doesn't need to be in a toolbaritem element. the element is used, for example, to hold the location bar's textbox in firefox. it is also used to group buttons together so they can be added and removed all at once like firefox's unified-back-forward-button. ...
...ing you're placing in the toolbar to be customized then it doesn't need to be in a toolbaritem element. the element is used, for example, to hold the location bar's textbox in firefox. it is also used to group buttons together so they can be added and removed all at once like firefox's unified-back-forward-button. ...
...And 7 more matches

Rhino Debugger
the rhino javascript debugger is a gui that allows debugging of interpreted javascript scripts run in rhino. note that this debugger will not work with javascript scripts run in the mozilla browser since rhino is not the engine used in such environments. current limitations: no breakpoint menu using the rhino javascript debugger the mozilla rhino javascript engine includes a source-level debugger for debugging javascript scripts. the debugger is itself a java program which you may run as java org.mozilla.javascript.tools.debugger.main [options] [filename.js] [script-arguments] where the options are the same as the shell. the rhino javascript debugger can debug scripts running in multiple threads and provides facilities to set and clear breakpoints, control execution, view...
...m.in, and system.err streams to an internal javascript console window which provides an editable command line for you to enter javascript code and view system output. the console window maintains a history of the commands you have entered. you may move backward and forward through the history list by pressing the up/down arrow keys on the keyboard. opening scripts you may select the file->open menu item on the menu bar to load javascript scripts contained in files. this action will display a file-selection dialog box prompting you for the location of a script to load. the selected file will be compiled and displayed in a new window. running scripts you may select the file->run menu item on the menu bar to execute javascript scripts contained in files. this action will display a file-sele...
...ion of a script to execute. the loaded script will be run in a new thread and control will be given to the debugger on its first instruction. controlling execution the debugger provides the following facilities for you to control the execution of scripts you are debugging: step into to single step entering any function calls, you may do any of the following: select the debug->step into menu item on the menu bar press the step into button on the toolbar press the f11 key on the keyboard execution will resume. if the current line in the script contains a function call control will return to the debugger upon entry into the function. otherwise control will return to the debugger at the next line in the current function. step over to single step to the next line in the curr...
...And 7 more matches

Index - Web APIs
reference when a popup attached via the popup or context attributes is opened, the xul document's popupnode property is set to the node that was clicked on. this will be the target of the mouse event that activated the popup. if the popup was opened via the keyboard, the popup node may be set to null. typically, this property will be checked during a popupshowing event handler for a context menu to initialize the menu based on the context. 950 document.preferredstylesheetset api, cssom, dom, document, property, reference, stylesheets the preferredstylesheetset property returns the preferred style sheet set as set by the page author. 951 document.querycommandenabled() css, document, method, reference the document.querycommandenabled() method repor...
...is fired when a text composition system such as an input method editor starts a new composition session. 1189 element: compositionupdate event event, reference the compositionupdate event is fired when a new character is received in the context of a text composition session controlled by a text composition system such as an input method editor. 1190 element: contextmenu event api, context, dom, element, event, interface, mouseevent, reference, right click, right-click, button, contextmenu, events, menu, mouse the contextmenu event fires when the user attempts to open a context menu. this event is typically triggered by clicking the right mouse button, or by pressing the context menu key. 1191 element: copy event clipboard api, event, ref...
... element, reference, scroll, events the scroll event fires an element has been scrolled. 1218 element: select event element, event, event handler, needscompattable, reference, uievent the select event fires when some text has been selected. 1219 element: show event api, deprecated, event, reference, events, show the show event is fired when a contextmenu event was fired on/bubbled to an element that has a contextmenu attribute. 1220 element: touchcancel event event, touch events, touchevent, ui, ui events, ux, touch the touchcancel event is fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created). 1221 element: touchend event ...
...And 7 more matches

Key Values - Web APIs
s modifiers are special keys which are used to generate special characters or cause special actions when used in combination with other keys. examples include the shift and control keys, and lock keys such as caps lock and numlock. keyboardevent.key value description virtual keycode windows mac linux android "alt" [5] the alt (alternative) key. vk_menu (0x12) vk_lmenu (0xa4) vk_rmenu (0xa5) kvk_option (0x3a) kvk_rightoption (0x3d) gdk_key_alt_l (0xffe9) gdk_key_alt_r (0xffea) qt::key_alt (0x01000023) keycode_alt_left (57) keycode_alt_right (58) "altgraph" [5] the altgr or altgraph (alternate graphics) key. enables the iso level 3 shift modifier (where shift is the level 2 modifier). gdk_ke...
... method sequence conversion. vk_accept (0x1e) keycode_dpad_center (23) "again" the again key. redoes or repeats a previous action. gdk_key_redo (0xff66) "attn" [4] the attn (attention) key. vk_oem_attn (0xf0) gdk_key_3270_attn (0xfd0e) "cancel" [1] the cancel key. gdk_key_cancel (0xff69) "contextmenu" [3] shows the context menu. typically found between the windows (or os) key and the control key on the right side of the keyboard. vk_apps (0x5d) kvk_pc_contextmenu (0x6e) gdk_key_menu (0xff67) qt::key_menu (0x01000055) keycode_menu (82) "escape" [2] the esc (escape) key. typically used as an exit, cancel, or "escape this operation" button. historically, the escape...
...69) [1] in google chrome 52, the cancel key incorrectly returns the key code "pause". this is fixed in chrome 53. (see chrome bug 612749 for details.) [2] in internet explorer (tested on release 9 and 11) and firefox 36 and earlier, the esc key returns "esc" instead of "escape". [3] internet explorer (tested on release 9 and 11) and firefox 36 and earlier report "apps" instead of "contextmenu" for the context menu key. [4] the attn key generates the key code "unidentified" on internet explorer (tested on release 9 and 11). firefox and google chrome report the same, unless the japanese keyboard layout is in effect, in which case it generates "kanamode" instead. [5] the finish key gemerates the key code "unidentified" on internet explorer (tested on release 9 and 11). firefox reports ...
...And 7 more matches

Using the aria-labelledby attribute - Accessibility
</div> ...
... </div> ... </div> notes the most common ...
... </div> ... </div> notes the most common accessibility api mapping for a label is the accessible name property used by aria...
...And 7 more matches

Mobile first - Progressive web apps (PWAs)
r users will be concentrating on what they're doing, but they are likely to be in a car with bad lighting, or in a noisy bar with the sport on tv in the background! you need to consider this, and again make sure your content/functionality is simple, legible and distraction-free as much as possible. mobile navigation when developing mobile app layouts, you often run into problems with navigation menus. the concept is the same regardless of the target device — you want to provide a mechanism for users to search for things and get to different views/pages of the application — but because mobile screens are so much smaller, a reasonable desktop navigation can spoil the experience by filling up most of the initial view of the app, covering up the content. there several ways to solve the prob...
...w of the app, covering up the content. there several ways to solve the problem of navigation getting in the way on mobile, a few of which i'll discuss here. the main objective is to put the content first and to hide away the navigation until the user really needs it. first of all, you can consider a different navigation mechanism on mobile. so, if you were planning to have a vertical navigation menu on desktop, you might replace this on mobile with a select menu containing the options, or even a single button that when pressed brings the navigation options up in an overlay. second, a popular option is to put the navigation menu down at the bottom of the page rather than up at the top as the expectation would commonly be. this puts the content first at the top of the page and means that when...
...he bottom of the page rather than up at the top as the expectation would commonly be. this puts the content first at the top of the page and means that when the user has reached the end of a page, they have a signpost giving them an idea of where to go next. third, combining the two is also a good option — why not have a single button at the top of the page, which links to an anchor on the nav menu at bottom of the page? you could then also provide a link to get back up to the top of the article. conditional resource loading to actually implement responsive/adaptive designs, you will need to enlist a certain amount of conditional resource loading, again so that different devices can receive an optimal experience without having to shoulder the burden of many resources that they don't need.
...And 7 more matches

Responsive Navigation Patterns - Progressive web apps (PWAs)
need some help designing your app's navigation? these patterns are a great place to start. the following present several ways to handle navigation on large and small screens. top and left navigation menus are common on larger screens, but are often not the optimal way to present information on small screens because of the reduced screen real estate. therefore, it is necessary to consider the presentation of content and ease of navigation for all screen sizes. note: html/css for the corresponding patterns will be available soon. pattern 1: top toggle menu in this pattern, as the screen width is reduced, the top navigation items rearrange until there is not enough space. at that point, some items move from the top navigation to a drop-down menu. in the smallest screen, all...
... you could rank the item priorities to ensure the most important items always appear in the top navigation. ...
... you could rank the item priorities to ensure the most important items always appear in the top navigation. ...
...And 7 more matches

Filtering - Archive of obsolete content
ved, the template must be rebuilt by calling the rebuild method. this method will remove all of the existing generated content, delete all of the internal information pertaining to the results, and start again as if the template were just being examined for the first time. the template will be parsed again and the data examined for new results. you can view a complete example of this in action. a menulist is used to allow one to select either a specific country, or select all to show all of the photos. when a choice is made, the applyfilter function as shown above is called and the template content gets rebuilt with the desired filter applied. in this example, the menulist is hard-coded to contain the items that we know are in the datasource. next, we'll look at also generating this list using...
... either a specific country, or select all to show all of the photos. when a choice is made, the applyfilter function as shown above is called and the template content gets rebuilt with the desired filter applied. in this example, the menulist is hard-coded to contain the items that we know are in the datasource. next, we'll look at also generating this list using a template. generating a filter menu templates may be used to generate any type of content. it is common to use a template to generate the items on a menu or in a listbox or tree. the syntax is the same regardless of what type of content is being created. in the previous example, we hard-coded a menulist with the list of countries, but we could also generate this list from the datasource. the same datasource may used for both the p...
...even though the same datasource is used, it will only be loaded once and both templates will be notified when the data has loaded. we will need to add some information to the datasource in order to specify the list of countries that are available. there are two possibilities. ...
...And 6 more matches

Textbox (XPFE autocomplete) - Archive of obsolete content
ue will not be filled in until the user selects an item. completedefaultindex new in thunderbird 3 requires seamonkey 2.0 type: boolean if true, the best match value will be filled into the textbox as the user types. if set to false or omitted, the value must be selected from the list. crop type: boolean this attribute is not used and is only provided for compatibility with the menulist element. disableautocomplete obsolete since gecko 1.9.1 type: boolean if true, the autocomplete behavior will be disabled. you might use a script to change this attribute. if false, the default, autocomplete is enabled. as of gecko 1.9.1, this attribute is now always specified in lower case. disableautocomplete new in thunderbird 3requires seamonkey 2.0 ...
...this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. disablehistory obsolete since gecko 2.0 type: boolean note: applies to: thunderbird and seamonkeyif false, an arrow button will appear on the end of the textbox which will open a dropdown menu of all available results. the default value is true, hiding the dropdown button. this att...
...attribute; as of gecko 2.0 this attribute is completely superseded by it. note: for seamonkey 2.0 and all versions of thunderbird prior to 3.0 you also need to provide the disablehistory attribute. enablehistory new in thunderbird 1requires seamonkey 2.0 type: boolean if true, an arrow button will appear on the end of the textbox which, when pressed, will open a dropdown menu of all available results. focused type: boolean this attribute is true if the element is focused. forcecomplete obsolete since gecko 1.9.1 type: boolean if true, the textbox will be filled in with the best match when it loses the focus. if false, it will only be filled in when the user selects an item. as of gecko 1.9.1, this attribute is now always specified in...
...And 6 more matches

More Button Features - Archive of obsolete content
<button> <description value="this is a"/> <description value="rather strange" style="color: red;"/> <description value="button"/> </button> any xul element may be placed inside the button. html elements will be ignored, so you need to wrap them inside a description element. if you specify the label attribute on the button, it will override any content placed inside the button. ...
...alue="this is a"/> <description value="rather strange" style="color: red;"/> <description value="button"/> </button> any xul element may be placed inside the button. html elements will be ignored, so you need to wrap them inside a description element. if you specify the label attribute on the button, it will override any content placed inside the button. ...
...="rather strange" style="color: red;"/> <description value="button"/> </button> any xul element may be placed inside the button. html elements will be ignored, so you need to wrap them inside a description element. if you specify the label attribute on the button, it will override any content placed inside the button. button with menupopup you can place a menupopup inside the button to cause a menu to drop down when the button is pressed, much like the menulist. ...
...And 6 more matches

Tabboxes - Archive of obsolete content
tedindex="1"> <tabs> <tab label="search"/> <tab label="options"/> </tabs> <tabpanels> <tabpanel id="searchpanel" orient="vertical"> <description> enter your search criteria below and select the find button to begin the search. ...
...el="search"/> <tab label="options"/> </tabs> <tabpanels> <tabpanel id="searchpanel" orient="vertical"> <description> enter your search criteria below and select the find button to begin the search. ...
... label="options"/> </tabs> <tabpanels> <tabpanel id="searchpanel" orient="vertical"> <description> enter your search criteria below and select the find button to begin the search. ...
...And 6 more matches

Accessible Toolkit Checklist
ld be expanded to include information about linux and os x. it is maintained by the mozilla accessibility community. contributions are welcome. general dialogs/windows/general escape key cancels dialogs and refocuses the previously focused on the parent window. alt+f4 closes windows, similar to escape but even works on dialogs without cancel button alt+space opens window menu with restore, move, size, minimize, maximize, close the move and size options must be usable with the arrow keys on the keyboard in windows, initial focus goes to first focusable widget that is not a clickable tabbed property sheet label making tab order definable. default tab order should be in document order. tab order must wrap, not have invisible items in tab order ...
...ent order. tab order must wrap, not have invisible items in tab order dynamically added items must not corrupt the tab cycle or make it disorderly tab cycle must be identical backwards and forwards the f6 and shift+f6 key combinations should cycle through panes in a window making focus visible on any widget, and focus must always be visible shift+f10 or context menu key should work like right click on focused item, and context menu should show just under and to the right of the current focus. on mac os x, ctrl+space is used to bring up the context menu. most widgets (like checkboxes) can have a label outside of themselves, which should focus the widget when clicked on, or when its mnemonic is pressed. the system should require these labels to be create...
...be required for each tree item supporting the most important basic iaccessible events get_accparent: get the parent of an iaccessible. get_accchildcount: get the number of children of an iaccessible. get_accchild: get the child of an iaccessible. get_accname: get the "name" of the iaccessible, for example the name of a button, checkbox or menu item. this is one reason why a label must be created together with each widget, rather than separately. get_accvalue: get the "value" of the iaccessible, for example a number in a slider, a url for a link, the text a user entered in a field. get_accrole: get an enumerated value representing what this iaccessible is used for, for example. is it a link, static text, editable tex...
...And 6 more matches

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 n...
...nservice microsummaries nsimicrosummaryservice tagging nsitaggingservice rdf nsirdfservice ptm nsiplacestransactionsservice clipboard nsiclipboard urifixup nsiurifixup special places these are essentially references to the id's of special folders within places. they can save you time calling the service and searching for a particular folder on your own. placesrootid bookmarksmenufolderid the bookmarks menu. toolbarfolderid the bookmarks toolbar. tagsfolderid the folder that tags are stored in. unfiledbookmarksfolderid other other attributes stored in placesutils. localstore warning: local store provided access to the local-store rdf data source, which stores persisted information about the browser. its functionality has been replaced by xulstore. uritypes...
...not a resultnode is a host folder or not boolean nodeiscontainer(anode) determines whether or not a resultnode is a container item or not boolean nodeisdynamiccontainer(anode) determines whether or not a result-node is a dynamic-container item. the dynamic container result node type is for dynamically created containers (e.g. for the file browser service where you get your folders in bookmark menus). boolean nodeislivemarkcontainer(anode) determines whether a result node is a remote container registered by the livemark service. boolean nodeislivemarkitem(anode) determines whether a result node is a live-bookmark item parameters anode the node to check. return type returns a boolean. isreadonlyfolder() determines whether or not a node is a readonly folder. boolean isreadonl...
...And 6 more matches

Add to iPhoto
bon, core foundation, and other system frameworks from an extension written entirely in javascript. note: this extension uses carbon routines, which can no longer be used in firefox add-ons now that firefox is a 64-bit application. you can download an installable version of this extension on amo. once installed, when you right-click on an image, you'll see among the options in the contextual menu an option to "add image to iphoto". choose it, and iphoto will start up (if it's not already running) and import the image. declaring the apis the first thing we have to do is declare the mac os x apis we'll be using. this extension uses a number of methods and data types, as well as constants, from three system frameworks. since a lot of this stuff is repetitive, we'll only look at selected p...
...ts used for the flags field in the lsapplicationparameters structure: this.klsrolesnone = 1; this.klsrolesviewer = 2; this.klsroleseditor = 4; this.klsrolesall = 0xffffffff; implementing the extension now that the mac os x apis we'll be using have been declared, we can write the core of the extension itself. this is done in the iphoto object in the extension's code. ...
...eters structure: this.klsrolesnone = 1; this.klsrolesviewer = 2; this.klsroleseditor = 4; this.klsrolesall = 0xffffffff; implementing the extension now that the mac os x apis we'll be using have been declared, we can write the core of the extension itself. this is done in the iphoto object in the extension's code. ...
...And 6 more matches

Accessibility Inspector - Firefox Developer Tools
ics from other panels such as memory and performance as well as overall browser performance. for this reason, you should keep it turned off when you aren't specifically using it. when first implemented, the accessibility engine had to be explicitly turned on. starting in firefox 79, it is automatically enabled when you do one of the following: choose accessibility in the tools > web developer menu. select the accessibility tab in the developer tools toolbox. right-click in the main browser window, and choose inspect accessibility properties in the context menu. right-click an item in the html pane of the page inspector, and choose show accessibility properties in the context menu. once activated, the accessibility engine remains running until you close the developer tools toolbox. if...
... the accessibility tab and selecting print to json: when you do, you will get a new tab with the selected accessibility tree loaded into the json viewer: once opened, you can save or copy the data as necessary. the json viewer can also show you the raw json data on a separate tab in the viewer. ...
...json: when you do, you will get a new tab with the selected accessibility tree loaded into the json viewer: once opened, you can save or copy the data as necessary. the json viewer can also show you the raw json data on a separate tab in the viewer. check for accessibility issues you can check for accessibility issues by clicking the drop-down menu next to: check for issues. the available menu items include: none — don't show the possible list of issues all issues — check for all types of issues contrast — check for issues with visual contrast keyboard — check for issues with navigating via a keyboard text labels — check for issues with missing text labels when you one of the menu items, firefox scans your document for the type of issues you selected. depending on th...
...And 6 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
0 : 1; else this.state = 1 ^ this.state; ...
...content = label; else this.setnodevalue(list.children[selected]); dropdowns[topic] = this; }; dropdown.prototype.toggle = function toggle(state) { if (typeof(state) === 'boolean') this.state = state === false ? ...
...lected]); dropdowns[topic] = this; }; dropdown.prototype.toggle = function toggle(state) { if (typeof(state) === 'boolean') this.state = state === false ? ...
...And 6 more matches

HTML documentation index - HTML: Hypertext Markup Language
nctions like the dom method document.getelementsbyclassname. 11 contenteditable editing, global attributes, html, reference, text editing, contenteditable, text entry, text input the contenteditable global attribute is an enumerated attribute indicating if the element should be editable by the user. if so, the browser modifies its widget to allow editing. 12 contextmenu deprecated, global attributes, html, reference, contextmenu the contextmenu global attribute is the id of a <menu> to use as the contextual menu for this element. 13 data-* global attributes, html, reference the data-* global attributes form a class of attributes called custom data attributes, that allow proprietary information to be exchanged between the html and i...
... html, html tabular data, reference, tables, web the html <colgroup> element defines a group of columns within a table. 83 <command>: the html command element command, html, html commands, html5, html:element, html:element reference, obsolete the html command element (<command>) represents a command which the user can invoke. commands are often used as part of a context menu or toolbar. 84 <content>: the shadow dom content placeholder element (obsolete) content, dom, deprecated, element, html, html web components, placeholder, reference, web, web components, shadow dom the html <content> element—an obsolete part of the web components suite of technologies—was used inside of shadow dom as an insertion point, and wasn't meant to be used in ordi...
...ation purposes, due to the marked passage's relevance or importance in the enclosing context. 154 <marquee>: the marquee element (obsolete) element, html, obsolete, reference, web, marquee the html <marquee> element is used to insert a scrolling area of text. you can control what happens when the text reaches the edges of its content area using its attributes. ...
...And 6 more matches

Simple Storage - Archive of obsolete content
te a mystorage variable to emphasize the fact that jetpack.storage.simple is just a normal javascript object. they could have simply used jetpack.storage.simple directly. here's a complete real-world example. it's a simple note-taking jetpack. select some text on the page, right-click, and select note. the text will be remembered across browser restarts as a note. all notes are shown in the tools menu. you can install this example from the jetpack gallery. jetpack.future.import("menu"); jetpack.future.import("selection"); jetpack.future.import("storage.simple"); // create the persistent notes array if it doesn't already exist. jetpack.storage.simple.notes = jetpack.storage.simple.notes || []; var notes = jetpack.storage.simple.notes; // updates the jetpack menu with the current notes. we'll...
...tall this example from the jetpack gallery. jetpack.future.import("menu"); jetpack.future.import("selection"); jetpack.future.import("storage.simple"); // create the persistent notes array if it doesn't already exist. jetpack.storage.simple.notes = jetpack.storage.simple.notes || []; var notes = jetpack.storage.simple.notes; // updates the jetpack menu with the current notes. we'll add a notes menu with // a submenu, which lists all the notes. if there are no notes, we'll show a // disabled "(empty)" menuitem. ...
...simple"); // create the persistent notes array if it doesn't already exist. jetpack.storage.simple.notes = jetpack.storage.simple.notes || []; var notes = jetpack.storage.simple.notes; // updates the jetpack menu with the current notes. we'll add a notes menu with // a submenu, which lists all the notes. if there are no notes, we'll show a // disabled "(empty)" menuitem. function updatejetpackmenu() { jetpack.menu.set({ label: "notes", menu: new jetpack.menu(notes.length > 0 ? notes : [{ label: "(empty)", disabled: true }]) }); } // modify the page's context menu by sneaking in before it's shown. if there's // a selection, add a note menuitem that makes a new note. otherwise, don't // modify the menu at all. we'll limit ...
...And 5 more matches

Special Condition Tests - Archive of obsolete content
« previousnext » there are several additional types of conditional tests that may be performed. parent tag tests sometimes you want to simply generate one block of content at the top level and different content at the recurisive level. for example, the bookmarks toolbar in a web browser might display buttons at the first level, but menus and submenus for content below that. templates have a means of allowing a rule to match only if the generated content would be inserted inside an element with a particular tag name. for instance, if the container was a <vbox>, a rule could be created that would only match a <vbox> element. this is useful for recursive templates, since the inner iterations may use different content. it's most useful to distinguish between the outer and inner ...
...r was a <vbox>, a rule could be created that would only match a <vbox> element. this is useful for recursive templates, since the inner iterations may use different content. it's most useful to distinguish between the outer and inner levels during template generation. for the bookmarks toolbar, the outer content is inserted into an <hbox>, but at lower levels, the content will be inserted into a <menu> in case you aren't clear, the tag that must match for the outer iteration is the root element, the one with the datasources attribute on it. for inner iterations, it will be the element with the uri attribute from the previous iteration. here is a previous example, rewritten to use the parent matching syntax: <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="*...
...want to match non-containers. a container is an rdf container such as a seq. the iscontainer attribute makes it easier to handle recursive content since you can have one rule for all containers and another rule for all non-containers. you don't need to match by type or some other predicate. this allows you to recurse down to larger levels without needing additional rules. ...
...And 5 more matches

textbox (Toolkit autocomplete) - Archive of obsolete content
if true, the best match value will be filled into the textbox as the user types. if set to false or omitted, the value must be selected from the list. completeselectedindex type: boolean if true, the text in the text field will be autocompleted as the user selects from the popup list. crop type: boolean this attribute is not used and is only provided for compatibility with the menulist element. disableautocomplete new in thunderbird 3requires seamonkey 2.0 type: boolean if true, the autocomplete behavior will be disabled. you might use a script to change this attribute. if false, the default, autocomplete is enabled. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. ...
...this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. disablekeynavigation type: boolean if this attribute is not used, the user can navigate to specific items within the element by pressing keys corresponding to letters in the item's label. this is done incrementally, so typing more letters with select more specific items. this featu...
...ic items. this feature may be disabled by setting this attribute to true. note: for seamonkey 2.0 and all versions of thunderbird prior to 3.0 you also need to provide the disablehistory attribute. enablehistory new in thunderbird 1requires seamonkey 2.0 type: boolean if true, an arrow button will appear on the end of the textbox which, when pressed, will open a dropdown menu of all available results. focused type: boolean this attribute is true if the element is focused. forcecomplete new in thunderbird 3requires seamonkey 2.0 type: boolean if true, the textbox will be filled in with the best match when it loses the focus. if false, it will only be filled in when the user selects an item. highlightnonmatches new in thunderbi...
...And 5 more matches

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

Commands - Archive of obsolete content
use commands, since you can just call a script to handle things. however, a command has the advantage that it can be disabled when needed and can be invoked without needing to know about the details of its implementation. commands provide a suitable way to abstract operations from the code. commands are especially useful for larger applications. ...
...s provide a suitable way to abstract operations from the code. commands are especially useful for larger applications. for instance, in order to implement the clipboard menu commands, cut, copy and paste, you can use commands. if you did not use commands, you would need to figure out which field has the focus, then check to ensure that the operation is suitable for that element. in addition, the menu commands would need to be enabled and disabled depending on whether the focused element had selected text or not, and for paste operations, whether there is something suitable on the clipboard to paste. as you can see, this becomes complicated. by using commands, much of the work is handled for you. you can use a command for any operation. mozilla uses them for almost every menu command. in addi...
...elp' is invoked. there are two advantages to using this approach. first, it moves all your operations onto commands which can all be grouped together in one section of the xul file. this means that code is all together and not scattered throughout the ui code. the other advantage is that several buttons or other ui elements can be hooked up to the same command. ...
...And 5 more matches

List Controls - Archive of obsolete content
« previousnext » xul has a number of types of elements for creating list boxes. list boxes a list box is used to display a number of items in a list. the user may select an item from the list. xul provides two types of elements to create lists, a listbox element to create multi-row list boxes, and a menulist element to create drop-down list boxes. they work similar to the html select element, which performs both functions, but the xul elements have additional features. the simplest list box uses the listbox element for the box itself, and the listitem element for each item. for example, this list box will have four rows, one for each item. example 1 : source view <listbox> <listitem label="butter pecan" /> <listitem label="chocolate chip" /> <listitem label="ra...
...lipsis. you can use the crop attribute on the cells or items set to the value none to disable the ellipsis. drop-down lists drop-down lists can be created in html using the select element. the user can see a single choice in a textbox and may click the arrow or some similar such button next to the textbox to make a different selection. the other choices will appear in a pop-up window. ...
... be created in html using the select element. the user can see a single choice in a textbox and may click the arrow or some similar such button next to the textbox to make a different selection. the other choices will appear in a pop-up window. xul has a menulist element which can be used for this purpose. it is made from a textbox with a button beside it. its name was chosen because it pops up a menu with the choices in it. three elements are needed to describe a drop-down box. ...
...And 5 more matches

iframe - Archive of obsolete content
.". when used in this case, please see displaying web content in an extension without security issues. more information is available in the xul tutorial. ...
...n used in this case, please see displaying web content in an extension without security issues. more information is available in the xul tutorial. ...
...ying web content in an extension without security issues. more information is available in the xul tutorial. ...
...And 5 more matches

Mozilla’s UAAG evaluation report
rmats. does not contradict current specifications for html and css rendering. 2.2 provide text view. (p1) c also known as view source. 2.3 render conditional content. (p1) vg alt for img: rendered when images turned off. see meta bug 41924 for open issues with the alt attribute. title for *any* element: rendered as tooltip longdesc for img element: in context menu - properties content of object element: ? alt for area element: ? alt for input element: ? acronym element: supported abbr element: supported abbr attribute for td/th: not supported summary for table: supported title for frame: ? longdesc for frame: not supported, see bug 3658 noframe for frame: must use user style sheets to render this. a ui for this would...
... we consider this to be a very difficult problem. 2.8 no repair text. (p3) p we have no repair strategy in 2.7 we have no way to configure that alt="" still needs to be repaired 2.9 render conditional content automatically. (p3) g alt for img: rendered when images turned off title for *any* element: rendered as tooltip longdesc for img element: in context menu - properties content of object element: ? alt for area element: ? alt for input element: ? acronym element: supported abbr element: supported abbr attribute for td/th: not supported summary for table: supported title for frame: ? longdesc for frame: not supported, see bug 3658 noframe for frame: must use user style sheets to render this. a ui for this would...
...12 configure synthesized speech rate. (p1) na 4.13 configure synthesized speech volume. (p1) na 4.14 configure synthesized speech characteristics. (p1) na 4.15 specific synthesized speech characteristics. (p2) na 4.16 configure synthesized speech features. (p2) na 4.17 choose style sheets. (p1) c under view menu, use style sheet -- allows one user style sheet to be applied at a time guideline 5. ensure user control of user interface behavior. checkpoint title status notes/plans 5.1 no automatic content focus change. (p2) c preferences, advanced, scripts & windows - allow scripts to "open unrequested windows" 5.2 keep viewport on top. (p2) c windo...
...And 5 more matches

Displaying Places information using views
toryresultnode objects contained therein. the built-in views if you need to show the contents of bookmarks or history in your extension or application, you may want to use the built-in places views, which are generic and will save you a lot of time writing basic functionality so that you can focus on building your extension or application. places provides the following built-in views: tree menu toolbar instantiating the three built-in views are simply standard xul elements with a special type attribute whose value is "places". every xul document containing a built-in view must import the stylesheet browser/components/places/content/places.css and overlay the file browser/components/places/content/placesoverlay.xul: <?xml-stylesheet href="chrome://browser/content/places/places.css"...
...e file browser/components/places/content/placesoverlay.xul: <?xml-stylesheet href="chrome://browser/content/places/places.css" ?> <?xul-overlay href="chrome://browser/content/places/placesoverlay.xul" ?> it's this stylesheet that binds elements with the special type attribute to one of the views. the overlay contains javascript required by the views. it also contains the built-in places context menu and commands, which you may want to take advantage of in your own uses of the views. connecting a view to its data to hook up a built-in view to its data, use the view's special place attribute. note: starting in gecko 2.0, you can't use the place attribute with menus. see menu view for details. you may specify the attribute directly in the xul or set its corresponding property via javascri...
...illa"; query.onlybookmarked = true; var opts = histserv.getnewqueryoptions(); opts.querytype = opts.query_type_bookmarks; var uri = histserv.queriestoquerystring([query], 1, opts); var tree = document.getelementbyid("mytree"); tree.place = uri; these two examples use the built-in tree view, but the point is to demonstrate the use of the place attribute and property. in this regard the built-in menu and toolbar views are no different. when a view's underlying data changes, the view will automatically update itself so that it displays the new data. this update is handled by logic between the view and its results. all places views implement or own an instance of interface nsinavhistoryresultviewer, which is the point of interaction between a view and its results. results themselves observe pl...
...And 5 more matches

source-editor.jsm
value description sourceeditor.themes.mozilla "mozilla" the default mozilla syntax highlighter theme. configuration defaults constants these constants represent the default values for each of the available configuration options. see the editor configuration object for details on configuring the editor. ...
... sourceeditor.themes.mozilla "mozilla" the default mozilla syntax highlighter theme. configuration defaults constants these constants represent the default values for each of the available configuration options. see the editor configuration object for details on configuring the editor. ...
... constant value description sourceeditor.events.blur "blur" fired when the editor loses focus. sourceeditor.events.breakpoint_change "breakpointchange" fired when a new breakpoint is added, or when an existing breakpoint is removed. this happens both when the api is used to make the change or when the ui is used to do it. sourceeditor.events.context_menu "contextmenu" fired when the editor's context menu is invoked, but before it's opened. sourceeditor.events.dirty_changed "dirtychanged" fired when the dirty state of the editor is changed. the dirty state indicates whether or not there are unsaved changes to the text. sourceeditor.events.focus "focus" fired when the editor gains focus. sourceeditor.e...
...And 5 more matches

WebIDL bindings
ow for the dom window the constructor function is attached to. if a jscontext* is also needed due to some of the argument types, it will come after the global. the return value of the constructor for myinterface is exactly the same as that of a method returning an instance of myinterface. constructors are always allowed to throw. ...
... unless stated otherwise, a type only has one representation. also, unless stated other...
...faulting to ereportexceptions. if areportexceptions is set to ereportexceptions, the methods will report js exceptions before returning. if areportexceptions is set to erethrowexceptions, js exceptions will be stashed in the errorresult and will be reported when the stack unwinds to wherever the errorresult was set up. ...
...And 5 more matches

DOM Inspector FAQ - Firefox Developer Tools
inspect content document inspect content, e.g., unprivileged web pages loaded in a browser tab. inspect chrome document inspect application chrome, including open xul windows, e.g., the browser window. inspect a url this just focuses the dom inspector's address bar, which allow you to inspect arbitrary documents which can be accessed via a url. this causes the document to be loaded in the browser pane. ...
...cting them via url, since some behavior may rely on the document being contained in another xul document, or the converse, where it won't behave correctly because it doesn't expect to be loaded as a framed document. instead, get the xul document to load as you normally would (e.g., by invoking commands or opening windows via standard application use), then locate it in the inspect chrome document menu. why do some nodes in the document dom nodes viewer appear in red? these nodes are anonymous content nodes, meaning they are not in the dom generated by the original document. okay, what if i don't want to see those anonymous nodes? you can hide anonymous nodes in inspector by unchecking the view > show anonymous content menu item. i see a lot of empty #text nodes that i don't see in the or...
...e a lot of empty #text nodes that i don't see in the original document. what are they, why are they there, and how can i get rid of them? those text nodes are actually the newlines and spacing between the elements. please see bug 26179 for a lengthy discussion of why they are there. the good news is, you can hide these whitespace nodes in inspector by unchecking the view > show whitespace nodes menu item. note that not all empty text nodes will be hidden. those nodes whose white-space css property value prevents the user-agent from collapsing sequences of whitespace will not be hidden. i'm having trouble finding a specific node in the dom tree. isn't there is a faster way to find it than navigating the tree? sure. you can do a search via the node's name, id, or an attribute/value pair. cho...
...And 5 more matches

Keyboard-navigable JavaScript widgets - Accessibility
these widgets are typically composed of <div> and <span> elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do. this document describes techniques to make javascript widgets accessible with the keyboard. using tabindex by default, when people use the tab key to browse a webpage, only interactive elements (like links, form controls) get focused. with the tabindex global attribute, authors can make other elements focusable, too. when set to 0, the element becomes focusable by keyboard and script. ...
...nteractive, like <a>, <input> and <select>, are already accessible by keyboards, so to use one of them is the fastest path to make components work with keyboards. authors can also make a <div> or <span> keyboard accessible by adding a tabindex of 0. this is particularly useful for components that use interactive elements that do not exist in html. grouping controls for grouping widgets such as menus, tablists, grids, or tree views, the parent element should be in the tab order (tabindex="0"), and each descendent choice/tab/cell/row should be removed from the tab order (tabindex="-1"). users should be able to navigate the descendent elements using arrow keys. (for a full description of the keyboard support that is normally expected for typical widgets, see the wai-aria authoring practices.) ...
...d be in the tab order (tabindex="0"), and each descendent choice/tab/cell/row should be removed from the tab order (tabindex="-1"). users should be able to navigate the descendent elements using arrow keys. ...
...And 5 more matches

Index of archived content - Archive of obsolete content
program id sdk api lifecycle sdk and xul comparison testing the add-on sdk two types of scripts working with events xul migration guide high-level apis addon-page base64 clipboard context-menu hotkeys indexed-db l10n notifications page-mod page-worker panel passwords private-browsing querystring request selection self simple-prefs simple-storage system ...
...util/uuid window/utils release notes tools cfx cfx to jpm console jpm jpm-mobile jpmignore package.json tutorials add a context menu item add a menu item to firefox adding a button to the toolbar annotator creating annotations displaying annotations implementing the widget overview storing annotations chrome authority ...
...abs helperapps.jsm home.jsm banner panels homeprovider.jsm homestorage nativewindow contextmenus doorhanger menu toast notifications.jsm pageactions.jsm prompt.jsm runtimepermissions.jsm snackbars.jsm sound.jsm tab addons developer guide code snippets cre...
...And 4 more matches

Introduction to XUL - Archive of obsolete content
ript whose structure is defined in this and related documents. widgets are pieces of the application largely self-contained, generally corresponding to a rectangle of window real estate. widgets will generally live grouped in separate, dynamically loaded libraries. a widget may expect to own a piece of a window (a toolbar or toolbar set), or it may be expected to work within or without a window (menubars, depending on the platform). it may not be a part of the application ui at all. widgets will have predefined behaviour, set at compilation. buttons will respond to the mouse; toolbars will act as containers for buttons. the effect a widget will have on its application will be defined as a combination of predefined application behaviour and linkage between the widgets. this linkage can be acc...
... real application will use some combination of the two. applications, for instance, will have preconceived notions of what to do when they receive an "open file" command. an "open" button is simply a button. it will send its command to the application for processing, generally using some simple javascript for linkage. ...
... processing, generally using some simple javascript for linkage. we are at first primarily concerned with the obvious ui components: toolbars, menus and dialogs. ...
...And 4 more matches

Updating Commands - Archive of obsolete content
ommands. invoking commands if a command has an oncommand attribute, you can invoke it just by using the docommand method of the command or an element which links to it. for other commands, you will need to use a couple of additional lines of code. you will need to use these extra steps when invoking commands implemented by a controller. in addition, you will need to do this when creating your own menu commands, for instance to implement the edit menu commands in your own application. fortunately, the extra code is fairly simple. all we need to do is get the needed controller and call the command. a simple way of doing this is the following: var controller = document.commanddispatcher.getcontrollerforcommand("cmd_paste"); if (controller && controller.iscommandenabled("cmd_paste")){ controller...
... command updater listens for the focus event. this causes commands to be updated when an element receives the focus. when a focus event occurs, the code in the oncommandupdate attribute is called. in the example, the goupdatecommand method is called which is a function provided by the globaloverlay.js script described earlier. it will update the command and enable or disable necessary buttons and menu items. the code behind it is fairly simple. it just gets the necessary controller, calls its iscommandenabled method, and then enables or disables the command. if you have several commands to update, call the goupdatecommand method once for each command. note that the command updater will receive notifications about all focus events on all elements, even if other event handlers respond to the eve...
...nts which they can respond to which are listed below. it is also possible to create your own. focus: occurs when the focused element changes. select: occurs when the selected text changes. undo: occurs when the undo buffer changes. clipboard: occurs when the contents of the clipboard changes. ...
...And 4 more matches

<statusbarpanel> - Archive of obsolete content
s drawn differently. unlike normal buttons, a statusbarpanel can only have a label or an image but not both. this element is often used with a short label or icon to indicate status, for instance whether the user is online or whether there are new messages. attributes crop, image, label properties image, label style classes statusbarpanel-iconic, statusbarpanel-iconic-text, statusbarpanel-menu-iconic examples <statusbar> <statusbarpanel label="left panel"/> <spacer flex="1"/> <progressmeter mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. ...
... the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the lab...
... properties image type: image url gets and sets the value of the image attribute. label type: string gets and sets the value of the label attribute. ...
...And 4 more matches

Examine and edit HTML - Firefox Developer Tools
al" link will highlight the element with the slot attribute as it exists outside the shadow dom this is very useful when you've got a <slot> element and you can't find the source of its content. note: shadow dom inspection was implemented in firefox 61, but was hidden behind the dom.webcomponents.shadowdom.enabled pref until firefox 63. it is now turned on by default. ...
... shadow dom this is very useful when you've got a <slot> element and you can't find the source of its content. note: shadow dom inspection was implemented in firefox 61, but was hidden behind the dom.webcomponents.shadowdom.enabled pref until firefox 63. it is now turned on by default. element popup context menu you can perform certain common tasks on a specific node using a popup context menu. to activate this menu, context-click the element. the menu contains the following items — click on the links to find the description of each command in the context menu reference: edit as html create new node duplicate node delete node attributes add attribute copy attribute value edit attribute remove attribute break on ... subtree modification attribute m...
... inner html outer html before after as first child as last child expand all collapse all open link in new tab * open file in debugger * open file in style-editor * copy link address * * these options only appear in certain contexts, for example the "open file in style-editor" option only appears when you context-click over the top of a link to a css file. context menu reference edit as html edit the element's html. (copy) inner html copy the inner html for the element. (copy) outer html copy the outer html for the element. pressing ctrl + c (or cmd + c on a mac) also performs this action. (copy) unique selector/css selector copy a css selector that uniquely selects the element. (copy) css ...
...And 4 more matches

Border-image generator - CSS: Cascading Style Sheets
age { height: 80px; float: left; margin: 10px; opacity: 0.5; background-color: #fff; box-shadow: 0px 0px 3px 1px #bababa; } #image-gallery .image[selected="true"] { box-shadow: 0px 0px 3px 1px #3bba52; opacity: 1; } #image-gallery .image:hover { cursor: pointer; box-shadow: 0px 0px 3px 1px #30ace5; opacity: 1; } #image-gallery[data-collapsed='true'] { margin-top: -100px; } /* load menu */ #load-actions { margin: 10px 0; } #toggle-gallery { width: 30px; height: 25px; margin: 10px; color: #fff; background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png'); background-repeat: no-repeat; background-position: top 4px center; background-color: #888888 !important; border-radius: 2px; float: left; } #toggle-gallery:hover { cursor: pointer; } #tog...
...: 2px; border-image-width: 20px; border-image-repeat: round; border-style: solid; box-shadow: 0 0 3px 0 #bababa; } #preview .resize-handle { width: 10px; height: 10px; background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat; position: absolute; bottom: 0; right: 0; } #preview .resize-handle:hover { cursor: nw-resize; } /* * general controls menu */ #general-controls { padding: 10px 30px; background-color: #fff; opacity: 0.95; color: #888; /*border-radius: 2px;*/ box-shadow: 0 0 3px 0 #bababa; } #general-controls .property { width: 130px; float: left; } #general-controls .name { height: 20px; margin: 0 10px 0 0; line-height: 100%; text-align: right; float: left; } #general-controls .right { width: 200px; float: right; ...
...0 : 1; else this.state = 1 ^ this.state; ...
...And 4 more matches

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

Adding Events and Commands - Archive of obsolete content
and which you use depend on the situation. elements only implement the events that are relevant to them, but there are several events that are implemented for most elements. these are some notable events you should keep in mind: oncommand. this is one of the most important and commonly used events in xul. it's very useful because it represents the most common action for input controls such as menu items, buttons and checkboxes. for a button, it represents the action of the user clicking on it, or focusing it with the keyboard and then pressing the enter key. it's an abstraction of the main way to interact with a control element. onselect. fired when the selection in a tree or listbox changes. onclick. triggered when the user clicks on the element, including right clicks. you shouldn't no...
...hello-online-broadcaster" /> </broadcasterset> these elements are completely invisible, so you can put them anywhere. it is recommended that you have them at the top of the xul code, along with script declarations and other invisible elements with as popupset and commandset. ...
...adcasterset> these elements are completely invisible, so you can put them anywhere. it is recommended that you have them at the top of the xul code, along with script declarations and other invisible elements with as popupset and commandset. 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 broadcaster. you can have as many elem...
...And 3 more matches

Adding sidebars - Archive of obsolete content
usnext » the sidebar in firefox is a relatively large and flexible space to add rich interfaces without requiring new windows or complicated overlays. sidebars take as much space as the user wants them to, and provide a frame where you can add elaborate data and controls. you're probably familiar with the bookmarks and history sidebars. if not, you can open either one from the view > sidebar menu. ...
...an add elaborate data and controls. you're probably familiar with the bookmarks and history sidebars. if not, you can open either one from the view > sidebar menu. they also have shortcuts to open or close them using the keyboard. the code required to add a sidebar is very simple, as explained in creating a firefox sidebar. it's even simpler than that. all you need is to overlay the view sidebar menu. ...
...borate data and controls. you're probably familiar with the bookmarks and history sidebars. if not, you can open either one from the view > sidebar menu. they also have shortcuts to open or close them using the keyboard. the code required to add a sidebar is very simple, as explained in creating a firefox sidebar. it's even simpler than that. all you need is to overlay the view sidebar menu. ...
...And 3 more matches

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

PopupKeys - Archive of obsolete content
handling keys within menus when using a menupopup element, a keyboard listener is attached to the window that will handle keypresses for the menu. this allows items within the menu to be navigated with the cursor keys. the following table lists the keys that are checked, and what the menu keyboard listener does in response: cursor up/down move the highlight within the menu up or down, wrapping around if necessary. on linux and the macintosh, disabled items within the menu are skipped over when navigating with the cursor keys. cursor left/right when a menu is selected, cursor right opens the menu, while a cursor left closes a menu. in a menubar, cursor left and right will cycle between top level menus. ...
...u up or down, wrapping around if necessary. on linux and the macintosh, disabled items within the menu are skipped over when navigating with the cursor keys. cursor left/right when a menu is selected, cursor right opens the menu, while a cursor left closes a menu. in a menubar, cursor left and right will cycle between top level menus. home/end move the highlight to the beginning or the end of the menu, selecting the first or last item. enter/return activate the currently highlighted item. if a menuitem is selected, this will close the menu and fire the menuitem's command event. if a menu is selected, the menu will open. escape closes the menu. if a chain of submenus is open, only one level of menus is closed. tab/f10 closes all menus in a chain of submenus. when letter keys are pressed, the a...
... or last item. enter/return activate the currently highlighted item. if a menuitem is selected, this will close the menu and fire the menuitem's command event. if a menu is selected, the menu will open. escape closes the menu. if a chain of submenus is open, only one level of menus is closed. tab/f10 closes all menus in a chain of submenus. when letter keys are pressed, the accesskeys within the menu are selected. if an access key is a pressed that does not correspond to an item within the menu, items that don't have access keys can be selected if the key pressed corresponds to the first letter of the label. other keys are ignored by the menu key listener, however, the event does not propagate to the main window. this is because the key listener is a capturing listener attached to the documen...
...And 3 more matches

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
od starting point. in particular, the articles creating toolbar buttons and building an extension explain the process in more detail. supported applications you can use the steps on this page only with seamonkey 1.x versions. seamonkey 2 is being reworked to support the same process as firefox, thunderbird and others. this tutorial adds a customizable button to all seamonkey's toolbars. it adds a menu choice to chatzilla's menu bar (because chatzilla has no toolbar). note: for a similar tutorial that applies to seamonkey 2, firefox, thunderbird and sunbird, see: custom toolbar button earlier versions and other mozilla applications also support extensions, but some parts of this tutorial are not appropriate for them. required tools you will need two tools. your operating system normally ...
...or other non-latin characters, set your text editor to save files using the utf-8 encoding. to check your text editor, create a plain text file named test.txt. in the file, type some of the special characters that your language uses. save the file. open the file in seamonkey (for example, by dragging it and dropping it in the navigator window, or by choosing file – open file... from seamonkey's menu bar). from seamonkey's menu bar, choose view – character encoding – unicode (utf-8). check that the text you typed looks ok with this setting. if your text editor does not support utf-8, search the internet for a better one that you can download. optional tools you can optionally use any image editor to customize the images. you can optionally use a jar tool or zip tool to package your button...
...ructure like this in the directory where you installed seamonkey: 1. go to the directory where you installed seamonkey, then go to the chrome directory there. note: for information about how to find the directory where you installed seamonkey, see: installation directory if you cannot easily find the directory, you can use the following method to find it. from seamonkey's menu bar, choose tools – web development – javascript console. copy the following code. it is one very long line ending in path—make sure that you get all of it: components.classes["@mozilla.org/file/directory_service;1"].getservice( components.interfaces.nsiproperties).get("achrom", components.interfaces.nsifile).path in the javascript console window, paste the code in the field near the to...
...And 3 more matches

Skinning XUL Files by Hand - Archive of obsolete content
what is a skin? the skin of a xul file is its look or overall style. in xul, skins are created with cascading style sheets and images. to skin a xul file means to change the overall look of that file by changing its style information. in the very near future, it will be possible to skin xul files dynamically and completely -- by pressing a button, selecting a skin from a menu, or by accepting a skin from over the web. when this day comes, skins defined in a global skin file will be applied to a whole application -- like the mozilla browser -- so that all the various windows and parts will look consistent. in the meantime, however, skinning a file requires some manual interaction. this article can help you get started understanding skins and creating skins for xul. it presumes you have at lea...
...lobal skin, open up the text file called global.css in the chrome/classic.jar!/skin/classic/global directory of the mozilla application. in a cascading stylesheet, the style definitions have the following basic form: element { style-attribute1: value; style-attribute2: value; style-attribute3: value; } for example, the following definition -- were it not in serious conflict with the many menu style definitions in the global skin -- makes all xul menus appear with a one pixel border, a light blue background, and 10 point fonts: menu { border: 1px; background-color: lightblue; font-size: 10pt; } in addition to these basic element style rules, css also provides for the application of style information to classes of elements, and element ids. the following table shows the basic f...
...-color: lightblue; font-size: 10pt; } in addition to these basic element style rules, css also provides for the application of style information to classes of elements, and element ids. ...
...And 3 more matches

button - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } dir type: one of the values below the direction in which the child elements of the element are placed. normal for scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vert...
...this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. dlgtype type: one of the values below the dialog type of the button, used only when the button is in a dialog box. you can use this feature to replace the standard dialog box buttons with custom buttons, yet the dialog event methods will still function. for example, if the dlgtype ...
...he appearance of the different icons on some available platforms. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open. the open attribute is not present if the menu is closed. orient type: one of the values below used to specify whether the children of the element are oriented...
...And 3 more matches

grid - Archive of obsolete content
l tutorial. example <!-- groupbox containing a grid. ...
... <!-- groupbox containing a grid. ...
...ing a grid. ...
...And 3 more matches

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

keyset - Archive of obsolete content
nt for key elements. the keyset and its descendants are not displayed. more information is available in the xul tutorial. ...
...if this attribute is set, the element is di...
...this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. ...
...And 3 more matches

listhead - Archive of obsolete content
this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. ...
...suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. ...
...vents. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. ...
...And 3 more matches

progressmeter - Archive of obsolete content
eger ranging from 0 to the maximum value that indicates the progress. for instance, if no maximum value has been set, setting the value to "0" shows an empty bar, "100" shows a bar at full length and "25" shows the first quarter of the bar. ...
... value to "0" shows an empty bar, "100" shows a bar at full length and "25" shows the first quarter of the bar. ...
...rties accessibletype type: integer a value indicating the type of accessibility object for the element. max type: integer gets and sets the value of the max attribute. mode type: string gets and sets the value of the mode attribute. value type: string gets and sets the value of the value attribute. ...
...And 3 more matches

What are browser developer tools? - Learn web development
ith the web article series. you should have this open as you follow the steps below. ...
.... you should have this open as you follow the steps below. ...
...hat browser you are using: how do you pull it up? three ways: keyboard: ctrl + shift + i, except internet explorer and edge: f12 macos: ⌘ + ⌥ + i menu bar: firefox: menu ➤ web developer ➤ toggle tools, or tools ➤ web developer ➤ toggle tools chrome: more tools ➤ developer tools safari: develop ➤ show web inspector. if you can't see the develop menu, go to safari ➤ preferences ➤ advanced, and check the show develop menu in menu bar checkbox. opera: developer ➤ developer tools context menu: press-and-hold/right-click an item on a webpage (ctrl-click on the mac), and choose inspect element from the context menu that appears. (an added bonus: this method straight-away highlights the code of the element you right-clicked.) th...
...And 3 more matches

Aprender y obtener ayuda - Learn web development
nd it seems really hard to get your head around, you should try to break it down into multiple smaller problems, or chunks. ...
...ler problems, or chunks. for example, if you are looking at a task of "build a simple two-column website", you could break it down as follows: create the html structure work out basic site typography work out a basic color scheme implement a high-level layout — header, horizontal navigation menu, main content area with main and side columns, and footer. implement a horizontal navigation menu etc. ...
... website", you could break it down as follows: create the html structure work out basic site typography work out a basic color scheme implement a high-level layout — header, horizontal navigation menu, main content area with main and side columns, and footer. implement a horizontal navigation menu etc. then you could break it down further, for example, "implement horizontal navigation menu" could be written out as: make a list of menu items sit horizontally in a line. remove unneeded defaults, like list spacing and bullet points. style hover/focus/active states of menu items appropriately. make the menu items equally spaced along the line. give the menu items enough vertical spacing. make sure the text is centered inside each menu item etc. each of these problems doesn't...
...And 3 more matches

Introduction to automated testing - Learn web development
testing. the basics: manual tests once you sign in to lambdatest, you will be routed to the lambdatest dashboard. the dashboard will provide you details related to how many minutes you have consumed, how many concurrent sessions are running, your total number of tests to date, and more. to start off with manual testing you need to select the "real time testing" tab from the left navigation menu. as you click on the real time testing you will be directed to a screen where you can choose the browser configuration, browser version, os, and screen resolution with which you want to test your website. as you click on the start button, a loading screen will appear, providing you with a vm (virtual machine) based on your configurations. once loaded, you can perform live, interactive cro...
...s you'll see! when you click start session, a loading screen will then appear, which spins up a virtual machine running the combination you chose. when loading has finished, you can then start to remotely test the web site running in the chosen browser. from here you can see the layout as it would look in the browser you are testing, move the mouse around and try clicking buttons, etc. the top menu allows you to: stop the session give someone else a url so they can observe the test remotely. copy text/notes to a remote clipboard. take a screenshot. test in full screen mode. once you stop the session, you'll return to the manual tests tab, where you'll see an entry for each of the previous manual sessions you started. clicking on one of these entries shows more data ...
...we'll cover actually running automated sauce lab tests in the next article. browserstack getting started with browserstack let's get started with a browserstack trial. create a browserstack trial account. sign in. this should happen automatically after you verify your e-mail address. when you first sign in, you should be on the live testing page; if not, click the live link in the top nav menu. if you are on firefox or chrome, you'll be prompted to install a browser extension in a dialog titled "enable local testing" — click the install button to proceed. on other browsers you'll still be able to use some of the features (generally via flash), but you might not get the full experience. the basics: manual tests the browserstack live dashboard allows you to choose what device and b...
...And 3 more matches

UI Tour - Firefox Developer Tools
the javascript source files loaded into the page, and enables you to select one to debug. at the top level sources are organized by origin, and under that they're organized by the directory structure from which they are served. you can search for a file using ctrl + p (cmd + p on a mac). web extensions are listed in the source list pane using the extension's name. there are several context menu options available for individual files and folders or groups; typically viewed by right-clicking on the item. for files, the following context menu options are available: copy source uri copies the full identifier of the file to the clipboard. ignore source causes the debugger to skip the file when "stepping into" functions; this can be helpful for avoiding stepping into libraries used by ...
...ier of the file to the clipboard. ignore source causes the debugger to skip the file when "stepping into" functions; this can be helpful for avoiding stepping into libraries used by your code. when a file is ignored, it has a small eye icon next to it in place of its regular icon. download file opens a file dialog so you can save the file locally. for folders and groups, the following context menu options are available: collapse all collapses all subfolders of the item. expand all expands all subfolders of the item. set directory root changes the source list view so that only that item and its children are visible. the name of the selected directory is shown at the top of the source list pane; clicking this name reverts the pane to showing all source items. ignore (since firefox 76...
... view so that only that item and its children are visible. the name of the selected directory is shown at the top of the source list pane; clicking this name reverts the pane to showing all source items. ignore (since firefox 76) ignore files in this directory causes all files within the selected directory to be skipped by the debugger. all child files acquired the eye icon, and the folder menu option changes to unignore files in this directory. ignore files outside this directory causes all files other than those within the selected directory to be skipped by the debugger. all such files acquire the eye icon, and the menu option for that folder changes to unignore files outside this directory. outline view the outline view shows a tree for navigating the currently open file.
...And 3 more matches

Index - Firefox Developer Tools
:tools, xul, xul:tools the dom inspector (also known as domi) is a developer tool used to inspect, browse, and edit the document object model of documents - usually web pages or xul windows. the dom hierarchy can be navigated using a two-paned window that allows a variety of different views on the document and all nodes within. 7 dom inspector faq dom_inspector the file menu contains approaches which will allow you to inspect a document. 8 dom inspector internals code, tools, internals, organisation, source there are three main facets to dom inspector. the one you are likely to be most familiar with is its inspector.xul-based primary ui. this is the two-pane inspector that appears when ctrl+shift+i (or cmd+shift+i) is pressed from one of the appl...
...nt. 8 dom inspector internals code, tools, internals, organisation, source there are three main facets to dom inspector. the one you are likely to be most familiar with is its inspector.xul-based primary ui. this is the two-pane inspector that appears when ctrl+shift+i (or cmd+shift+i) is pressed from one of the applications for which dom inspector has explicit support (i.e., menuitems placed via overlay). 9 introduction to dom inspector dom_inspector the dom inspector is a mozilla extension that you can access from the tools > web development menu in seamonkey, or by selecting the dom inspector menu item from the tools menu in firefox and thunderbird, or by using ctrl/cmd+shift+i in either application. dom inspector is standalone; it supports all tool...
...website so it looks and works properly on a range of different devices — particularly mobile phones and tablets as well as desktops and laptops. 102 rulers devtools, firefox, rulers, tools you can overlay horizontal and vertical rulers on a web page: 103 settings beginning with firefox 62, the icon to open developer tools settings has been moved into a menu accessed by clicking/touching ... (the elipsis) on the right of the tab. 104 shader editor the shader editor enables you to see and edit the vertex and fragment shaders used by webgl. 105 storage inspector cookies, dev tools, firefox, guide, indexeddb, local storage, session storage, storage, tools the storage inspector enables you to inspect various typ...
...And 3 more matches

Document.popupNode - Web APIs
this property is only set for popups attached via the popup or context attributes. for other types of popups, the value is not changed. ...
...rnode instead. when a popup attached via the popup or context attributes is opened, the xul document's popupnode property is set to the node that was clicked on. this will be the target of the mouse event that activated the popup. if the popup was opened via the keyboard, the popup node may be set to null. typically, this property will be checked during a popupshowing event handler for a context menu to initialize the menu based on the context. this property is only set for popups attached via the popup or context attributes. for other types of popups, the value is not changed. in these other cases, for example when calling the popup's showpopup method, you may wish to set the popupnode property directly beforehand. this property applies only to xul documents. syntax var node = document.p...
...u based on the context. this property is only set for popups attached via the popup or context attributes. ...
...And 3 more matches

<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
t as a portion of a larger input. see representing keystrokes within an input below. nesting a <kbd> element inside a <samp> element represents input that has been echoed back to the user by the system. see echoed input, below, for an example. nesting a <samp> element inside a <kbd> element, on the other hand, represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen. see the example under representing onscreen input options below. you can define a custom style to override the browser's default font selection for the <kbd> element, although the user's preferences may potentially override your css. examples basic example <p>use the command <kbd>help mycommand</kbd> to view documentation fo...
...n echoed back to the user by the system. ...
...ack to the user by the system. ...
...And 3 more matches

HTML elements reference - HTML: Hypertext Markup Language
a document. the main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. <nav> the html <nav> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. common examples of navigation sections are menus, tables of contents, and indexes. <section> the html <section> element represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an html document. text content use html text content elements to organize blocks or sections of content placed between the opening <body> and closing </body> tags. important for a...
... <meter> the html <meter> element represents either a scalar value within a known range or a fractional value. <optgroup> the html <optgroup> element creates a grouping of options within a <select> element. <option> the html <option> element is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element. as such, <option> can represent menu items in popups and other lists of items in an html document. <output> the html output element (<output>) is a container element into which a site or app can inject the results of a calculation or the outcome of a user action. <progress> the html <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar. ...
... the html output element (<output>) is a container element into which a site or app can inject the results of a calculation or the outcome of a user action. <progress> the html <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar. <select> the html <select> element represents a control that provides a menu of options <textarea> the html <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form. interactive elements html offers a selection of elements which help to create interactive user interface objects. element desc...
...And 3 more matches

ui/button/action - Archive of obsolete content
you can add a "badge" to a button using its badge property. this can be a number or a string, and you can update it at any time. by default the badge's color is red, but you can set your own color using the badgecolor property, specified as a css <color> value: var { togglebutton } = require("sdk/ui/button/to...
...aa"; } } specifying multiple icons you can specify just one icon, or multiple icons in different sizes. if you specify multiple icons, firefox will select the best-fitting icon based on the device screen resolution and the place the icon appears. for example, in the screenshots above, firefox uses the small icon when the button is in the toolbar and the large icon when the button is in the menu panel. read more about specifying icons in the reference documentation for the actionbutton constructor. responding to click events you can respond to click events by assigning a listener to the button's click event. you can do this in the button's constructor, by assigning the listener to the onclick option. you can also add, or change, the listener afterwards: var { actionbutton } = require(...
...ion button. parameters options : object required options: name type id string the button's id. this is used internally to keep track of this button. the id must be unique within your add-on. label string the button's human-readable label. when the button is in the toolbar, this appears in a tooltip, and when the button is in the menu, it appears underneath the button as a legend. icon url, string, object one or more icons for the button. you can specify this in one of three ways: as a resource:// url pointing at an icon file in your add-on's "data" directory, typically constructed using self.data.url(iconfile) as a relative path: a string in the form "./iconfile", where "iconfile" is a...
...And 2 more matches

ui/button/toggle - Archive of obsolete content
you can add a "badge" to a button using its badge property. this can contain a number or a string, and you can update it at any time. by default the badge's color is red, but you can set your own color using the badgecolor property, specified as a css <color> value: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton(...
...aa"; } } specifying multiple icons you can specify just one icon, or multiple icons in different sizes. if you specify multiple icons, firefox will select the best-fitting icon based on the device screen resolution and the place the icon appears. for example, in the screenshots above, firefox uses the small icon when the button is in the toolbar and the large icon when the button is in the menu panel. read more about specifying icons in the reference documentation for the togglebutton constructor. responding to click events you can respond to click events by assigning a listener to the button's click or change events. you can do this in the button's constructor, by assigning the listener to the onclick or onchange option. you can also add, or change, the listener afterwards: var { to...
...gle button. parameters options : object required options: name type id string the button's id. this is used internally to keep track of this button. the id must be unique within your add-on. label string the button's human-readable label. when the button is in the toolbar, this appears in a tooltip, and when the button is in the menu, it appears underneath the button as a legend. icon url, string, object one or more icons for the button. you can specify this in one of three ways: as a resource:// url pointing at an icon file in your add-on's "data" directory, typically constructed using self.data.url(iconfile) as a relative path: a string in the form "./iconfile", where "iconfile" is a...
...And 2 more matches

HTML in XUL for rich tooltips - Archive of obsolete content
erlay. ...
...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"/> </to...
...the xul overlay, xmlns:html is used to enable html tags to be used inside the xul. our enhanced xul tooltip is an element that is written ahead of time, and it contains an html div element whose type attribute lowers its privileges to being that content element, although it is an element of chrome. this is recommended for security reasons, especially if remote html is to be inserted. a number of menuitems have a tooltip attribute pointing to the same tooltip. that tooltip is empty now, but we will use the mouseover event to dynamically populate the tooltip (which is about to be shown) with a different message for each menuitem. this is done by calling the onmousetooltip function, which will take the tooltiphtml attribute of the element that is being hovered over and safely convert that into d...
...And 2 more matches

Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
lternative: proxy if you cannot override objects or properties easily, e.g. because the object is frozen or sealed, then creating a proxy around the object might be a viable approach. triggering event handlers sometimes scripts might want to manually trigger an event handler that is defined directly in the xul document. consider the following xul fragment throughout the rest of this section. ...
...xy if you cannot override objects or properties easily, e.g. because the object is frozen or sealed, then creating a proxy around the object might be a viable approach. triggering event handlers sometimes scripts might want to manually trigger an event handler that is defined directly in the xul document. consider the following xul fragment throughout the rest of this section. ...
...an event handler that is defined directly in the xul document. consider the following xul fragment throughout the rest of this section. <menuitem id="mymenu" oncommand="executesomething(); executesomethingelse();"/> <label id="mylabel" onclick="executesomething(); executesomethingelse();"/> add-on authors commonly use eval to trigger the handlers. // do not use eval(document.getelementbyid("mymenu").getattribute("oncommand")); eval(document.getelementbyid("mylabel").getattribute("onclick")); alternative: dispatch real events dispatching real events has the added bonus that all other event listeners for that element (and the corresponding bubbling/capturing chain) will fire as well, so this method will have the closed resemblance to a real user event. // fake a command event var event =...
...And 2 more matches

In-Depth - Archive of obsolete content
26.03.13 -moz-appearance makes a widget look like it's from your operating system. possible are (this is probably an incomplete list): none - (!important may be needed) will override the operating system default. use this when you want one or two controls to look different from the operating systems defaults. ...
...13 -moz-appearance makes a widget look like it's from your operating system. possible are (this is probably an incomplete list): none - (!important may be needed) will override the operating system default. use this when you want one or two controls to look different from the operating systems defaults. ...
...makes a widget look like it's from your operating system. possible are (this is probably an incomplete list): none - (!important may be needed) will override the operating system default. use this when you want one or two controls to look different from the operating systems defaults. ...
...And 2 more matches

Deprecated and defunct markup - Archive of obsolete content
low may be out of date, but is provided here for historical reference and to help anyone who comes across them in old code or documentation. ...
...button> (action occurs repeatedly on mouse hover--used to construct other elements; used in <arrowscrollbox> and large drop-down menus) so, not deprecated? ...
...-used to construct other elements; used in <arrowscrollbox> and large drop-down menus) so, not deprecated? ...
...And 2 more matches

MoveResize - Archive of obsolete content
moving and resizing a popup menus and popups have methods which may be used to move and resize them. moving a popup once a popup is open, it can be moved using the popup's moveto method. void moveto(in long left, in long top); the left argument is the horizontal screen position and the top argument is the vertical screen position. this method will change the left and top attributes to match the supplied arguments, so if these attributes are persisted the values will be restored when the window is displayed again. for instance, the following example will move a popup to the upper left corner of the screen: popup.moveto(0, 0); the position may be shifted so as not to cover user interface elements provided by the operating system, such as the menu bar or the task bar. resizing a popup...
...ain. for instance, the following example will move a popup to the upper left corner of the screen: popup.moveto(0, 0); the position may be shifted so as not to cover user interface elements provided by the operating system, such as the menu bar or the task bar. resizing a popup the size of a popup is determined automatically based on the content inside the popup. for instance, the size of a menu will be large enough to fit all of the items within the menu. sometimes, a menu will be larger than the available space on the screen; in this situation, the menu may be moved such that it will fit on screen. for instance, instead of appearing below the menu label, the menu popup might appear above the label. you can see this effect in a xul application by moving a window near the bottom of the s...
... a popup can be resized manually using the popup's sizeto method. ...
...And 2 more matches

Custom toolbar button - Archive of obsolete content
e uses accents or other non-latin characters, set your text editor to save files using the utf-8 encoding. to check your text editor, create a plain text file named test.txt. in the file, type some of the special characters that your language uses. save the file. open the file in firefox (for example, by dragging it and dropping it in firefox, or by choosing file – open file... from firefox's menu bar). from firefox's menu bar, choose view – character encoding – unicode (utf-8). check that the text you typed looks ok with this setting. if your text editor does not support utf-8, search the internet for a better one that you can download. optional tools you can optionally use any image editor to customize the images. you can optionally use a jar tool or zip tool to package your but...
...}, } there is nothing to customize for now. save the file. the next section in this tutorial contains examples of code that you can use to make your button do something useful. explanation: this file specifies what happens when you press the button. it uses the javascript programming language, together with features provided by the application. 9. download the button image. get a context menu for the image that you see here (for example, by right-clicking it). choose save image as... from the context menu, and save it in the same chrome directory as the files you have just created. ensure that the name of the saved file is: button-1.png explanation: the image is in four parts. the normal button is at the top left. underneath it is a darker version, used when the mouse pointer is o...
...me directory as the files you have just created. ensure that the name of the saved file is: button-1.png explanation: the image is in four parts. the normal button is at the top left. underneath it is a darker version, used when the mouse pointer is over the button. the parts on the right are used when you set the toolbar to use small buttons. 10. download the extension image. get a context menu for the image that you see here (for example, by right-clicking it). choose save image as... from the context menu, and save it in the same directory as the files you have just created. ensure that the name of the saved file is: icon.png explanation: this image is displayed in the application's extension manager window. testing your new button restart the application. either get a context...
...And 2 more matches

Creating a Skin - Archive of obsolete content
to add a slash at the end. copy the original findfile.css into the new directory. we'll use this as a basis for the new skin. we can then refer to it using the url 'chrome://findfile/skin/findfile.css'. adding style rules first, let's decide what kind of changes we want to make. we'll make some simple color changes, modify the button styles, and modify the spacing a bit. ...
...ile.css'. adding style rules first, let's decide what kind of changes we want to make. we'll make some simple color changes, modify the button styles, and modify the spacing a bit. let's start with the menus, toolbars and the overall tab panel. the following style rules added to findfile.css will cause the changes shown in the accompanying image. window > box { background-color: #0088cc; } menubar,menupopup,toolbar,tabpanels { background-color: lightblue; border-top: 1px solid white; border-bottom: 1px solid #666666; border-left: 1px solid white; border-right: 1px solid #666666; } caption { background-color: lightblue; } the inner box of the window (which actually surrounds all of the window content) has been changed to have a medium blue color. you can see this blue...
... 1px solid white; border-bottom: 1px solid #666666; border-left: 1px solid white; border-right: 1px solid #666666; } caption { background-color: lightblue; } the inner box of the window (which actually surrounds all of the window content) has been changed to have a medium blue color. you can see this blue behind the tab strip and along the bottom of the window. four elements, the menubar, the menupopup, the toolbar and the tabpanels appear in light blue. the border around these four elements has been changed to give a heavier 3d appearance. you can see this if you look closely. the background color of the caption has also been changed to match the background. the first rule above (for 'window > box') specifies that the child box of the window has a different color. this pr...
...And 2 more matches

RDF Datasources - Archive of obsolete content
attribute example the example below shows how to display a particular piece of an rdf datasource by setting the ref attribute. ...
...you will notice that the value of the ref attribute in the example is http://www.some-fictitious-zoo.com/mammals which corresponds to one of the seq elem...
...you will notice that the value of the ref attribute in the example is http://www.some-fictitious-zoo.com/mammals which corresponds to one of the seq elements in the rdf file...
...And 2 more matches

XUL element attributes - Archive of obsolete content
he datasources and the ref attribute is on. it may be set to a space-separated list of rdf properties or resources. context type: id should be set to the value of the id of the popup element that should appear when the user context-clicks on the element. a context-click varies on each platform. usually it will be a right click. you can use the special value '_child' to indicate the first menupopup child of the element. contextmenu type: id alternate name for the context attribute, but also has a corresponding script property contextmenu. datasources type: space separated list of datasource uris a space-separated list of datasources that an element's template will use for content generation. these can be either internal datasources such as rdf:bookmarks or a url. the ...
...the element should have a template element as a child. for rdf templates, the specified datasources are combined into a single composite datasource which holds the data from all of the datasources. this composite datasource is accesssible via a script through the database property. ...
...n a stack, specifies the pixel position of the left edge of the element relative to the left edge of the stack. maxheight type: string (representing an integer) the maximum height of the element. this corresponds to the max-height css property. maxwidth type: string (representing an integer) the maximum width of the element. this corresponds to the max-width css property. menu type: id alternate name for the popup attribute, but also has a corresponding script property 'menu'. minheight type: string (representing an integer) the minimum height of the element. this corresponds to the min-height css property. minwidth type: string (representing an integer) the minimum width of the element. this corresponds to the min-width css property. mouseth...
...And 2 more matches

command - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a command element can be used to invoke an operation that can come from multiple sources. for example, a clipboard paste operation can be invoked from the edit menu, a context menu and by pressing a keyboard shortcut. you attach the code to the command using the oncommand attribute. it will be called no matter how it is invoked by the user. in addition, disabling the command will automatically disable the menu items and keyboard shortcuts. commands are identified by their id. if you include the script chrome://global/content/globaloverlay.js in your window, you can use the function godocommand function to invoke the command. using this function has the advantage that the command will be sent t...
...this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. oncommand type: script code this e...
... reserved type: string this attribute applies to a command element. ...
...And 2 more matches

dropmarker - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a dropmarker is a button with an arrow which will reveal more details when pressed. a dropmarker is not intended to be used as a separate element, but as part of another element. for instance the menulist and the popup type of datepicker use a dropmarker, that when pressed, will reveal a popup menu. ...
...be used as a separate element, but as part of another element. for instance the menulist and the popup type of datepicker use a dropmarker, that when pressed, will reveal a popup menu. ...
...ropmarker, that when pressed, will reveal a popup menu. ...
...And 2 more matches

listcell - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to ...
...this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is ...
...se of the attribute, as it may need to update additional state. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. type type: string this attribute is reserved for use by anonymous children of listitem; do not use. properties disabled type: boolean gets and sets the value of the disabled attribute. inherited properties align, , allowevents, , boxobj...
...And 2 more matches

listheader - Archive of obsolete content
this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. inherited from xul element align, a...
...bel type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. ...
...ent the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. ...
...And 2 more matches

listitem - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } current type: boolean this attribute will be set to true if the listitem is the current item. this is typically used by a theme to customize the focus ring. to change the currently selected item in a listbox, use the listbox property ...
...this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is le...
... use of the attribute, as it may need to update additional state. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a prefwindow. more information is available in the preferences system article. selected type: boolean indicates whether the element is sele...
...And 2 more matches

radio - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to ...
...this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. focused type: boolean this attribute is true if the element is focused. group type: string group name buttons with type="radio" and the same value for their group attribute are put into the same group. only one button from each group can be checked at a time. if the user ...
...r selects one the buttons, the others in the group are unchecked. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the element. th...
...And 2 more matches

tab - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to ...
...this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. fadein type: boolean this attribute is set to true if the tab is fading in or out. this typically means that the tab is in the process of appearing or disappearing. first-tab type: boolean this attribute will be set to true for the first tab. this attribute should not be set...
... useful in a theme if the first tab should be styled differently. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. last-tab type: boolean this attribute will be set to true for the last tab. this attribute should not be set manually, but is useful in a theme if the last tab should be styled differently. linkedpanel type: id the id of the linked tabpanel element that will be...
...And 2 more matches

treecell - Archive of obsolete content
ecells. when the user double-clicks an editable cell, a text field appears in which the user can edit the contents of the cell. the tree and treecol must also be marked as editable in order for this to work. the tree must be a content tree for this to work on treecells. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. mode type: one of the values below for columns that are progress meters, this determines the type of progress meter to use. none no progress meter is displayed. the cell text is displayed instead. normal the cell uses its value attribute to determine the amo...
... so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). ...
...ibute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. ...
...And 2 more matches

Scratchpad - Archive of obsolete content
of using scratchpad with a page run by a local web server. it is also possible to use scratchpad over pages opened from a local file system, if permission policies allow that. but even with possible limitations present, the html code can be either manually entered or copied from the source and pasted into the "about:blank" page (a new empty tab) with the use page inspector's edit as html context menu command. usage opening scratchpad in its own window there are several different ways to open scratchpad in its own window: press shift + f4, or go to the web developer menu (which is a submenu in the tools menu on macos and linux), then select scratchpad click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "scratchpad". this will open up scr...
...ault firefox developer tools" section of the settings page. now scratchpad will be available in the toolbox, alongside other tools like the page inspector and the web console. this is especially useful in split console mode: you can use scratchpad for a persistent, multiline editor, and the console to interact with the page. editing the scratchpad window looks something like this (on macos the menu bar is at the top of the screen): the file menu offers options to save and load javascript code snippets, so you can reuse code later if you like. code completion scratchpad integrates the tern code analysis engine, and uses that to provide autocomplete suggestions and popups containing information on the current symbol. to list autocomplete suggestions, press ctrl + space. for example, try...
...u'll see a popup that shows a summary of the function's syntax and a short description: the "[docs]" link takes you to the mdn documentation for the symbol. executing once you've written your code, select the code you want to run. if you don't select anything, all the code in the window will be run. then choose the way you want the code to run using the buttons along the top, using the execute menu, or using the context menu. the code is executed in the scope of the currently selected tab. any variables you declare outside of a function will be added to the global object for that tab. there are four execution options available. run when you choose the run option, the selected code is executed. this is what you'd use to execute a function or other code that manipulates the content of you...
...And 2 more matches

Browser Detection and Cross Browser Support - Archive of obsolete content
their browser. users of netscape 6, netscape 7, compuserve 7, mozilla, opera will not be able to view the site properly. misidentifying browsers a common mistake web authors make is to assume that if a browser is not netscape navigator 4, it must be internet explorer and vice versa. for example: // wrong approach - do not use! if (document.all) { // internet explorer 4+ elm = document.all['menu']; } else { // assume navigator 4 elm = document.layers['menu']; } note how the above example assumed that any browser that was not internet explorer was navigator 4 and attempted to use layers. this is a common source of problems when using browsers based upon gecko as well as opera. a similar error can be seen in the following example: // wrong approach - do not use! if (document.layers)...
...due to a lack of communication and understanding, many sites have created inappropriate detection strategies based upon the netscape 6 user agent string. ...
... browser that was not internet explorer was navigator 4 and attempted to use layers. this is a common source of problems when using browsers based upon gecko as well as opera. a similar error can be seen in the following example: // wrong approach - do not use! if (document.layers) { // navigator 4 elm = document.layers['menu']; } else { // assume internet explorer 4+ elm = document.all['menu']; } netscape 6 was the first commercial browser released based upon gecko. due to a lack of communication and understanding, many sites have created inappropriate detection strategies based upon the netscape 6 user agent string. netscape 6's user agent string follows the http standards for specifying the version of the user agent. (see mozilla user-agent strings and gecko user agent strings) ...
...And 2 more matches

Application Translation with Mercurial
a and german (language code 'de'), it is http://hg.mozilla.org/releases/l10n/mozilla-aurora/de/ copy that url to the clipboard. copy the repository to your computer by running the following command: hg clone http://hg.mozilla.org/releases/l10n/mozilla-aurora/de/ de-mozilla-aurora this should proceed pretty fast. on windows, you can paste the url by calling the paste command from the window menu in the upper left corner of the window. configuring your mercurial user settings still in the command prompt, go to your home directory in the file system, e.g. for a windows user, it looks like c:\users\myname , depending on your windows version: cd /c/users/myname now list all the files here: ls -a if there is no file called .hgrc , create it with > .hgrc this file stores your general ...
...you translate more than a few strings, you usually want to keep track of what has already been translated (and later if the text has been tested in the product as fitting into the available area and suiting the functionality it describes). this guide achieves this with the firefox extension scrapbook. you installed scrapbook earlier, now open it in firefox either by calling it from the firefox menu bar (press the alt key to show it if necessary) using "view" > "sidebar" > "scrapbook" or by clicking its toolbar button which you likely have to add by toolbar customization if you didn't do this before. drag the tab with the localization error showing missing and obsolete strings to the sidebar. after scrapbook has saved the web page to your local disk, click with the right mouse button on th...
... "sidebar" > "scrapbook" or by clicking its toolbar button which you likely have to add by toolbar customization if you didn't do this before. drag the tab with the localization error showing missing and obsolete strings to the sidebar. after scrapbook has saved the web page to your local disk, click with the right mouse button on the page in the sidebar and choose "properties" from the context menu which gets opened. rename it something meaningful, e.g. "firefox <version number> translation". after you saved the dialog, click with the left mouse button on the page in the sidebar to open the locally saved copy. opening english files and the target locale side-by-side the localization report shows the ids of added or removed texts, but the english text itself is still unknown. we get this...
...And 2 more matches

nsIAccessibleEvent
been removed from the selection. event_selection_within 0x8009 0x0015 0x0012 numerous selection changes have occurred within a container object. event_alert 0x0002 0x0016 0x0013 an alert has been generated. server applications send this event when a user needs to know that a user interface element has changed. event_foreground 0x0003 0x0017 0x0014 the foreground window has changed. event_menu_start 0x0018 0x0015 a menu item on the menu bar has been selected. event_menu_end 0x0019 0x0016 a menu from the menu bar has been closed. event_menupopup_start 0x001a 0x0017 a pop-up menu has been displayed. event_menupopup_end 0x001b 0x0018 a pop-up menu has been closed. event_capture_start 0x001c 0x0019 a window has received mouse capture. event_capture_end 0x001d 0x001a a...
...esentation document or a page boundary was crossed in a word processing document. event_last_entry 0x005d 0x0057 help make sure event map does not get out-of-line. ...
... boundary was crossed in a word processing document. event_last_entry 0x005d 0x0057 help make sure event map does not get out-of-line. ...
...And 2 more matches

nsIDOMWindowUtils
le this interface is a dom utility interface that provides useful dom methods and attributes. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 49.0 (firefox 49.0 / thunderbird 49.0 / seamonkey 2.46) implemented by: window. ...
...atchdomeventviapresshell(in nsidomnode atarget, in nsidomevent aevent, in boolean atrusted); nsidomelement elementfrompoint(in float ax, in float ay, in boolean aignorerootscrollframe, in boolean aflushlayout); void entermodalstate(); nsidomelement findelementwithviewid(in nsviewid aid); void focus(in nsidomelement aelement); void forceupdatenativemenuat(in astring indexstring); void garbagecollect([optional] in nsicyclecollectorlistener alistener); short getcursortype(); astring getdocumentmetadata(in astring aname); nsidomwindow getouterwindowwithid(in unsigned long long aouterwindowid); long getpccountscriptcount(); astring getpccountscriptsummary(in long ascript); astr...
.../removed with loadsheet()/removesheet(). see css2 specification for details. user_sheet 1 a possible type of a style sheet loaded/removed with loadsheet()/removesheet(). see css2 specification for details. author_sheet 2 a possible type of a style sheet loaded/removed with loadsheet()/removesheet(). see css2 specification for details. methods activatenativemenuitemat() see nsiwidget.activatenativemenuitemat(). cannot be accessed from unprivileged context (not content-accessible) will throw a dom security error if called without universalxpconnect privileges. void activatenativemenuitemat( in astring indexstring ); parameters indexstring clearmozafterpaintevents() void clearmozafterpaintevents(); parameters none. comparecanvases() co...
...And 2 more matches

getFile
s ns_os_system_dir "sysd" available on mac os x only these locations are supported only on mac os x versions of gecko. ...
..._os_system_dir "sysd" available on mac os x only these locations are supported only on mac os x versions of gecko. ...
...se locations are supported only on microsoft windows builds of gecko. ...
...And 2 more matches

Using popup notifications
r not to share their location when it's convenient to do so, instead of being compelled to do it at once. in addition, notifications can be dismissed and recalled by clicking anywhere outside the notification, then clicking on the notification icon to bring it back again. a popup notification can include a text message, a button action, and zero or more additional actions provided in a drop-down menu accessed through the notification's button. creating a popup notification popup notifications can be created using the popupnotifications.jsm javascript code module. this code module is imported by the browser, so you don't need to do it explicitly yourself. then you can create the popup notification at the appropriate time like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-...
...a sample popup notification.", null, /* anchor id */ { label: "do something", accesskey: "d", callback: function() { alert("doing something awesome!"); } }, null /* secondary action */ ); in this case, we aren't providing any secondary actions; that is, actions provided to the user through the drop-down menu. this notification looks like this: that's not very pretty; where's the icon? adding an icon to your notification adding an icon to a notification is simple. you just need to provide the appropriate css. the popupnotifications.jsm code module adds a popupid attribute to the notification object's icon element. you can use this to style the icon, like this: .popup-notification-icon[popupid="...
...popupnotifications.jsm code module adds a popupid attribute to the notification object's icon element. ...
...And 2 more matches

Browser Console - Firefox Developer Tools
the browser console command line (to execute javascript expressions) is disabled by default. to enable it set the devtools.chrome.enabled preference to true in about:config, or set the "enable browser chrome and add-on debugging toolboxes" (firefox 40 and later) option in the developer tool settings. opening the browser console you can open the browser console in one of two ways: from the menu: select "browser console" from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on macos). from the keyboard: press ctrl+shift+j (or cmd+shift+j on a mac). you can also start the browser console by launching firefox from the command line and passing the -jsconsole argument: /applications/firefoxaurora.app/contents/macos/firefox-bin -jsconsole th...
...ote: you can restart the browser with the command ctrl + alt + r (windows, linux) or cmd + alt + r (mac) this command restarts the browser with the same tabs open as before the restart. modifying the browser ui since the global window object is the browser's chrome window, you can also modify the browser's user interface. ...
...+ alt + r (windows, linux) or cmd + alt + r (mac) this command restarts the browser with the same tabs open as before the restart. modifying the browser ui since the global window object is the browser's chrome window, you can also modify the browser's user interface. ...
...And 2 more matches

Set a breakpoint - Firefox Developer Tools
ional) breakpoints and conditional breakpoints. breakpoints in brief breakpoints are very useful when debugging javascript — you basically set a point in your code where you would like execution of the code to pause. at this point you can do useful things like studying the value of different variables at that point, allowing you to work out why a problem is occurring. the source pane context menu in the source pane, you can handle setting breakpoints by bringing up the context menu over a line number. there are a few options available here: add breakpoint: add a standard unconditional breakpoint at this line number (see below). add condition: add a condition and create a conditional breakpoint (see below). add log: add a log point, which logs a value to your console rather than p...
...nt, which logs a value to your console rather than pausing execution as a breakpoint does. continue to here: when stepping through code, this option tells the debugging to continue execution through to this point. unconditional breakpoints an unconditional breakpoint is one where the code will always pause execution when it is reached. you can set an unconditional breakpoint using the context menu (see above), or by: clicking on the line number for the line you want to break at in the source pane. highlighting the line you want to break at in the source pane and pressing ctrl + b (windows/linux) or cmd + b (macos). the line number is highlighted in blue: in addition, if the line contains multiple function calls, each one will be given a small blue arrow icon to the left of it. the...
...ou to set the breakpoint to happen exactly on any one of the function calls in the line (or multiple calls), by clicking on each relevant one. conditional breakpoints a conditional breakpoint is one where the code will pause execution when it is reached, only if a certain condition is met, such a variable having a certain value at the time. you can set a conditional breakpoint using the context menu (see above), or by highlighting the line you want to break at in the source pane and pressing ctrl + shift + b (windows/linux) or cmd + shift + b (macos). when you first choose to set a conditional breakpoint, a text entry line will appear into which you add the condition you want it to break on: once you've entered your condition and pressed enter/return, the line number will be highlighted ...
...And 2 more matches

Network request list - Firefox Developer Tools
ading the page. each request is displayed in its own row: by default, the network monitor is cleared each time you navigate to a new page or reload the current page. you can override this behavior by checking "enable persistent logs" in the settings. network request columns you can toggle columns on and off by right-clicking on the table header and choosing the specific column from the context menu. a reset columns command is available on the context menu to reset the columns to their initial configuration. you can also change the width of the columns to help make the information you are looking for easier to view. the mouse pointer changes to a resize icon when you move it over the border of a column. you can drag to manually set the size of column. starting in firefox 76 you can double-c...
...o change the width of the columns to help make the information you are looking for easier to view. the mouse pointer changes to a resize icon when you move it over the border of a column. you can drag to manually set the size of column. starting in firefox 76 you can double-click a column divider to resize the column to the left of it to fit its contents. the reset columns command on the context menu also resets the width of the columns to the default values. clicking the column header label sorts the request list by that column. you can reset the sort to the default by selecting "reset sorting" from the context menu. here is a list of all available columns: status: the http status code returned. the numeric code is displayed on a colored background, to help unusual ones stand out. i...
...ked. other actions you can take with request blocking: to turn all request blocking off or on: toggle the checkbox next to enable request blocking. to turn a specific block off or on: toggle the checkbox next to that item. to delete a blocked item, click the x icon that appears when you focus the item. (starting with firefox 77) right-click any item in the list and choose from the context menu: enable all enables blocking of all items in the list. disable all disables blocking of all items in the list. remove all deletes all items in the list. blocking a specific url from the request list you can also block a url from the request list: hover over the item you want to block in the request list. select block url from the context menu. when you refresh the page,...
...And 2 more matches

Examine and edit CSS - Firefox Developer Tools
if you enable one of these pseudo-classes for a node, an orange dot appears in the markup view next to all nodes to which the pseudo-class has been applied. in addition, the information that appears on the page itself show you what pseudo-class you are examining. for example: viewing and changing classes on an element with an element selected in the html pane, you can click...
...nd the default choice is "color": if you enter an invalid value for a property when editing it, or an unknown property name, a yellow alert icon appears besides the declaration. edits that you make in the rules view are reflected in the style editor, and vice versa. any changes you make are temporary: reloading the page will restore the original styling. while you're editing css, the context menu you'll see is the normal one for working with editable text: css variable autocompletion css variable names will auto-complete depending on the variables defined in the css. if you enter var( into a property value and then type a dash (-), any variables you have declared in your css will then appear in an autocomplete list, which shows a color swatch so you can see exactly what color each var...
...g the style editor, the changes will not be shown in the changes pane. also remember, as noted above, that changes you make to the css rules are temporary and will be reset if you reload the page. if you are satisfied with the changes you have made, you can copy the new settings to page the edited rule into your stylesheet. right-click on the changes panel and select copy rule from the context menu. the copy rule command copies the entire element, class, or id definition, including any unchanged rules and the rules that describe your changes. for example, copying the changes in the preceding image, you get the following: .text-content p { box-sizing:border-box; max-width:24rem; text-decoration: underline; color: cadetblue; font-weight: bold; } add rules you can add new rules in t...
...And 2 more matches

Privileged features - Web APIs
the parent window. dependent windows are not implemented on macos x, this option will be ignored. the dependent feature is currently under revision to be removed (bug 214867) in msie 6, the nearest equivalent to this feature is the showmodelessdialog() method. chrome if on, the page is loaded as window's only content, without any of the browser's interface elements. there will be no context menu defined by default and none of the standard keyboard shortcuts will work. the page is supposed to provide a user interface of its own, usually this feature is used to open xul documents (standard dialogs like the javascript console are opened this way). dialog the dialog feature removes all icons (restore, minimize, maximize) from the window's titlebar, leaving only the close button. mozilla ...
... keyboard shortcuts will work. the page is supposed to provide a user interface of its own, usually this feature is used to open xul documents (standard dialogs like the javascript console are opened this way). dialog the dialog feature removes all icons (restore, minimize, maximize) from the window's titlebar, leaving only the close button. mozilla 1.2+ and netscape 7.1 will render the other menu system commands (in ff 1.0 and in ns 7.0x, the command system menu is not identified with the firefox/ns 7.0x icon on the left end of the titlebar: that's probably a bug. you can access the command system menu with a right-click on the titlebar). dialog windows are windows which have no minimize system command icon and no maximize/restore down system command icon on the titlebar nor in correspond...
...they are said to be dialog because their normal, usual purpose is to only notify info and to be dismissed, closed. on mac systems, dialog windows have a different window border and they may get turned into a sheet. modal if on, the new window is said to be modal. ...
...And 2 more matches

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

Mozilla CSS extensions - CSS: Cascading Style Sheets
ext-properties -moz-float-edge -moz-force-broken-image-icon -moz-image-region o -moz-orient -moz-osx-font-smoothing -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright overflow-clip-box overflow-clip-box-block overflow-clip-box-inline s–z -moz-stack-sizing :-moz-system-metric(images-in-menus) :-moz-system-metric(mac-graphite-theme) :-moz-system-metric(scrollbar-end-backward) :-moz-system-metric(scrollbar-end-forward) :-moz-system-metric(scrollbar-start-backward) :-moz-system-metric(scrollbar-start-forward) :-moz-system-metric(scrollbar-thumb-proportional) :-moz-system-metric(touch-enabled) :-moz-system-metric(windows-default-theme) -moz-user-focus -moz-us...
...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-max...
... -moz-win-browsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-button-box-maximized -moz-window-button-close -moz-window-button-maximize -moz-window-button-minimize -moz-window-button-restore -moz-window-titlebar -moz-window-titlebar-maximized progressbar progresschunk radio radio-container radio-label radiomenuitem resizer resizerpanel scale-horizontal scalethumb-horizontal scalethumb-vertical scale-vertical scrollbarbutton-down scrollbarbutton-left scrollbarbutton-right scrollbarbutton-up scrollbar-small scrollbarthumb-horizontal scrollbarthumb-vertical scrollbartrack-horizontal scrollbartrack-vertical separator spinner spinner-downbutton spinner-textfield spinner-upbutton statusba...
...And 2 more matches

ui/toolbar - Archive of obsolete content
owing and hiding toolbars by default, a toolbar is shown when it is created, although you can specify that a toolbar should be hidden initially by passing hidden:true as an option in its constructor. after that, though, you can't show or hide the toolbar programmatically. toolbars get a close button at the right-hand side, and users can show or hide the toolbar using the firefox "view/toolbars" menu, alongside built-in toolbars like the bookmarks toolbar. hidden state persists even over create/destroy cycles: if a toolbar is created, then hidden, then destroyed, and another toolbar with the same title is then created, the new toolbar will be in the hidden state. toolbar events toolbars get attach and detach events when their content is loaded and unloaded, and show and hide events when th...
...rame], hidden: true, onshow: showing, onhide: hiding }); function showing(e) { console.log("showing"); console.log(e); } function hiding(e) { console.log("hiding"); console.log(e); } parameters options : object required options: name type title string the toolbar's title. this appears as the name of the toolbar in the firefox "toolbars" menu. it must be unique. optional options: name type items array adding buttons to toolbars is only supported from firefox 30 onwards. in firefox 29, you can only add frames. an array of items to appear in the toolbar. each item in items must be an action button, a toggle button, or a frame instance. buttons each take up a fixed width...
...unction the listener to remove. off(event, listener) this function is an alias for removelistener(). parameters event : string the event the listener is listening for. toolbar supports the following events: attach, detach, show, and hide. listener : function the listener to remove. destroy() destroys the toolbar. after calling this function, the toolbar will no longer be visible and its menu item will no longer appear in the firefox "toolbars" menu. calling this function also causes the detach event to be emitted. properties title the toolbar's title. this is read-only and must be unique. it's also not available until after the attach event is emitted. items the array of frames hosted by this toolbar. this property is read-only and is not available until after the attach event i...
..." }); var toolbar = toolbar({ title: "my toolbar", items: [frame] }); toolbar.on("show", showing); function showing(e) { console.log("showing"); console.log(e.title); console.log(e.items[0]); console.log(e.hidden); } arguments toolbar : the toolbar that was shown. hide this event is emitted when the user hides the toolbar, either using the "close" button or using the "toolbars" menu. the listener is passed the toolbar instance that was hidden: var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var frame = new frame({ url: "./frame.html" }); var toolbar = toolbar({ title: "my toolbar", items: [frame] }); toolbar.on("hide", hiding); function hiding(e) { console.log("hiding"); console.log(e.title); console.log(e.items[0]); c...

Inline options - Archive of obsolete content
the title attribute is used as a label for the controls. to set a description, either use the desc attribute, or a text node as a child of the <setting>...
...the title attribute is used as a label for the controls. to set a description, either use the desc attribute, or a text node as a child of the <setting> tag. setti...
...the title attribute is used as a label for the controls. to set a description, either use the desc attribute, or a text node as a child of the <setting> tag. settings are tied to actual prefer...
... <!-- color example --> <setting pref="extensions.myaddon.color" 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> ...

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
mind most users don't know how to customize toolbars in firefox. let's add our own toolbar. this is done in the overlay as well. <window id="main-window"> <toolbox id="navigator-toolbox"> <toolbar id="xulschoolhello-toolbar" toolbarname="&xulschoolhello.toolbarname.label;" accesskey="&xulschoolhello.toolbar.accesskey;" customizable="true" mode="icons" context="toolbar-context-menu" defaultset="xulschoolhello-hello-world-button" insertbefore="personaltoolbar" /> </toolbox> </window> (note for mac os x: <window id="main-window"> and </window> are not required) our toolbar is added as a child of the toolbox element in the main browser window. the toolbox is the collection of toolbars in firefox, including the main menu bar. let's look at the attributes we us...
...personaltoolbar" /> </toolbox> </window> (note for mac os x: <window id="main-window"> and </window> are not required) our toolbar is added as a child of the toolbox element in the main browser window. the toolbox is the collection of toolbars in firefox, including the main menu bar. let's look at the attributes we used: the toolbarname is the name that will appear on the view > toolbars menulist. this menu allows hiding and showing any toolbar. the customizable attribute determines if the user can customize the toolbar. you should normally set this to true, unless you have strong reasons not to want users changing your toolbar. the mode attribute is set to icons, which is the usual value. this can be changed in the customize dialog by the user. the context attribute should also be...
... able to create simple toolbars and toolbar buttons you can add to firefox. now we'll look deeper into the details of toolbars so that you can make great toolbars. toolbar buttons there are several types of buttons and elements you can add to a toolbar depending on your needs. the toolbarbutton element has the type attribute that allows you to change the behavior of the button in many ways. the menu and menu-button types allow you to create buttons that open popup menus beneath them. see the back/forward buttons in the main firefox toolbar for an example. menu toolbar buttons are handy when you want to include many options in your toolbar and you don't want it to be too cluttered. the other types, checkbox and radio are useful when you have buttons that change state when the user clicks on t...
...matter as long as the contents are 16x16 and they are centered in the frame. mac os x lion has icons with a lighter shade. on linux, icons are 24x24 pixels by default. since firefox is a gtk application, it uses gtk icons whenever possible. the icons in the image are the ones that aren't provided by gtk. gtk icons are accessed using special urls, like this one: moz-icon://stock/gtk-go-back?size=menu. you can enter this url in firefox on linux, and the corresponding icon will be displayed. this is also the reason this is the only theme that still has colorful icons for its buttons. now let's look at the css work involved in a toolbar that works on the aforementioned systems. if you want your toolbar to look right on all systems, you should consider having different icon sets for each. you s...

Setting up an extension development environment - Archive of obsolete content
lication activity, thus making debugging easier. however, these preferences can degrade performance, so you may want to use a separate development profile when you enable these preferences. accessing firefox development preferences to change preference settings in firefox or seamonkey, type about:config in the location bar. you can also use the extension developer's extension, which provides a menu interface for firefox settings. accessing thunderbird development preferences to change preference settings in thunderbird, open the "preferences" (unix) or "options" (windows) interface. on the "advanced" page, select the "general" tab then click the "config editor" button. recommended development preferences not all preferences are defined by default, and are therefore not listed by default...
... strict javascript warnings in the error console. note that since many people have this setting turned off when developing, you will see lots of warnings for problems with their code in addition to warnings for your own extension. you can filter those with console2. devtools.chrome.enabled = true. this enables to run javascript code snippets in the chrome context of the scratchpad from the tools menu. don't forget to switch from content to browser as context. devtools.debugger.remote-enabled = true. this adds a "browser debugger" entry to the "web developer" submenu of the "tools" menu. the browser debugger can be used to debug the javascript code of extensions. the devtools.chrome.enabled preference must also be set to true for the browser debugger to be enabled. devtools.debugger.prompt-...
...tension a suite of tools for extension development (firefox) extension test an add-on which makes it easier to detect problems which will lead to rejection by addons.mozilla.org console² enhanced javascript console (firefox version, thunderbird version) javascript command for writing/testing javascript on firefox windows inspect context open dom inspector at this node from inspect on context menu. chrome list navigate and view files in chrome:// (firefox version, thunderbird version) chrome edit plus a user file editor (firefox and thunderbird) firebug a variety of development tools (firefox) pentadactyl, a general purpose extension with builtin tools for extension development, including a command line with chrome javascript evaluation (including property and function argument complet...
...useful for testing debug symbols and the crash reporting system (firefox and thunderbird) javascript object examiner displays javascript object methods and properties for any available scope developer profile and devprefs sets up the development environment described above when installed (firefox and fennec) firefox extension proxy file ...

New Skin Notes - Archive of obsolete content
n a weird way because the selected row becomes bold. --nickolay 04:46, 25 aug 2005 (pdt) the sidebar overrides content on diff pages --nickolay turns out this was fixed for 1.5 already. --dria the buttons in the upper-right of the horizontal nav-bar don't really feel like buttons; maybe add a pseudo-class for onhover that gives them an underline? --beltzner the "+" item under the "views" menu of a discussion page looks really out of place. can we replace it with "add section" or something? --beltzner i'll look into it, but i think this is one of those "don't hold your breath" things because that's not managed by the skin. i could probably just eliminate it entirely. that'd work, too; you'd mentioned that it was very rarely used --beltzner the category template must be improved, ...
...ction. minor-nit. --callek i couldn't find a quick "logout" link accessible from everywhere. --mmondor 12:25, 26 aug 2005 (pdt) what pages can you not find a logout link from, i see it on nearly all devmo wiki pages in the "upper right: along with "my talk" "preferences" etc. ...
... with "my talk" "preferences" etc. oh, i went back to login page, logged in and then from there went to the /test/ pages and it's like the old look (with menu bar at the left), where indeed, the logout link is as it should be on the left in personal tools. --mmondor 12:49, 26 aug 2005 (pdt) the logout link is exactly where the login link is. this makes sense as-is. not changing. --dria the menu column seems larger than before in the current test theme, so as to cause some reference pages to look ugly when browser set in 800x* resolution, using the default firefox 1.0.6 fonts settings on xfree86. a few examples: , .these work fine with the old theme, and i expect that this affects a lot of reference articles. that our screen resolutions are now wider than 800 pixels width does not mean t...
... ua's text size off of the base, for 100% page specified text. and when done, verify that the designer did not break the page with a "normal" font setting, by using a default profile. and no, break in that sense does not mean "font is too big" it means, still useable for the target audience. --callek 12:02, 26 aug 2005 (pdt) the font size isn't the problem, and we indeed shouldn't change it. the menu bar at the right, however, is too large in the new system, but is fine on the current (non-test) system. --mmondor 12:25, 26 aug 2005 (pdt) hmm, note that when logged-in, the theme is all fine like the old one, it's when a user doesn't login and reads the docs through the test site that the menu bar then is at the right and is slightly too large... --mmondor 12:52, 26 aug 2005 (pdt) will revisi...

appendItem - Archive of obsolete content
« xul reference home appenditem( label, value ) return type: element creates a new item and adds it to the end of the existing list of items. you may optionally set a value. the function returns the newly created element. ...
...ns the newly created element. ...
...eated element. ...
... example <script language="javascript"> function additemstolist(){ var list = document.getelementbyid('mymenulist'); // add item with just the label list.appenditem('one'); // add item with label and value list.appenditem('two', 999); // select the first item list.selectedindex = 0; } </script> <button label="add items" oncommand="additemstolist()"/> <menulist id="mymenulist"> <menupopup/> </menulist> see also insertitemat() removeitemat() ...

Introduction - Archive of obsolete content
, text displayed with xul is easily localizable, which means that it can be translated into other languages with little effort. what kinds of user interfaces can be made with xul? xul provides the ability to create most elements found in modern graphical interfaces. ...
...layed with xul is easily localizable, which means that it can be translated into other languages with little effort. what kinds of user interfaces can be made with xul? xul provides the ability to create most elements found in modern graphical interfaces. ...
...asily localizable, which means that it can be translated into other languages with little effort. what kinds of user interfaces can be made with xul? xul provides the ability to create most elements found in modern graphical interfaces. ...
...h as textboxes and checkboxes toolbars with buttons or other content menus on a menu bar or pop up menus tabbed dialogs trees for hierarchical or tabular information keyboard shortcuts the displayed content can be created from the contents of a xul file or with data from a datasource. in mozilla, such datasources include a user's mailbox, their bookmarks and search results. the contents of menus, trees and other elements can be populated with this data, or with your own data supplied in an rdf file. there are several ways you can use xul: firefox extension an extension adds functionality to the browser itself, often in the form of extra toolbars, context menus, or customizations to the browser's user interface. this is done using a feature of xul called an overlay, which allows the...

Manipulating Lists - Archive of obsolete content
will now be at position 4. remember that the first item is 0. the removeitemat() function will remove the item at a specific index. these three methods are also available for several other xul elements and work in the same manner. in fact, these methods are part of the nsidomxulselectcontrolelement interface so any xul elements which implement this interface have these methods. this includes the menulist, radiogroup and tabs elements. for example, to add a new item to a menulist, you can use the same syntax as for a listbox. the right kind of element will be appended in each situation. list selection the nsidomxulselectcontrolelement interface provides two additonal properties, selectedindex and selecteditem. the former returns the index of the selected item while the latter returns the sel...
...if no item is selected, selectedindex will return -1, while selecteditem will return null. ...
...if no item is selected, selectedindex will return -1, while selecteditem will return null. ...
.... the select handler here displays an alert containing the label of the selected item in the list. since the select event fired we can assume that an item is selected. in other cases, you may wish to check to ensure that selecteditem is not null before continuing. the select event is also fired when a radio button in a radiogroup is selected and when a tab is selected in a tabs element. however, menulists do not fire the select event; instead you can listen to the command event to handle when an item is selected. for the tabs element, it is often more convenient to use functions of the tabbox element instead. it also has a selectedindex function which will return the index of the selected tab. however, to get the selected item, use the tabbox's selectedtab property instead. or, use the selec...

arrowscrollbox - Archive of obsolete content
hovering the mouse over one of the (active) arrows triggers a scroll event. more information is available in the xul tutorial. ...
...ton label="orange"/> <button label="silver"/> <button label="lavender"/> <button label="gold"/> <button label="turquoise"/> <button label="peach"/> <button label="maroon"/> <button label="black"/> </arrowscrollbox> 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, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width...
...this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. smoothscroll type: boolean true initially enables smooth scrolling for the corresponding arrowscrollbox, false disables it. currently, smooth scrolling supports horizontal arrowscrollboxes only. tabindex type: integer the tab order of the element. the tab...
...h scrolling supports horizontal arrowscrollboxes only. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width disabled type: boolean gets and sets the value of the disabled attribute. scrollboxobject t...

binding - Archive of obsolete content
n be used to bind a particular property of a matched node to a particular variable name. that name can then be used within the action of a rule. ...
...tion of a rule. properties object, predicate, subject examples fixme: (example needed) 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, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties object type: string the object of the element. it can be a variable reference, an rdf resource uri, or an ...
... can be a variable reference, an rdf resource uri, or an rdf literal value. predicate type: uri the predicate or property to match. this must be a uri of the property. subject type: string the subject of the element. it can be a variable reference or an rdf resource uri. ...
...dicate or property to match. this must be a uri of the property. subject type: string the subject of the element. it can be a variable reference or an rdf resource uri. ...

bindings - Archive of obsolete content
ing elements. this element is optional in firefox 3/mozilla 1.9 and later; instead binding elements may be placed directly inside the rule element. more information is available in the template guide. ...
... the rule element. more information is available in the template guide. examples (example needed) 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, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width object type: string the object of the element. it can be a variable reference, an rdf resource uri, or an rdf litera...
...e reference, an rdf resource uri, or an rdf literal value. predicate type: uri the predicate or property to match. this must be a uri of the property. subject type: string the subject of the element. it can be a variable reference or an rdf resource uri. ...
...rty to match. this must be a uri of the property. subject type: string the subject of the element. it can be a variable reference or an rdf resource uri. ...

broadcaster - Archive of obsolete content
hen you want elements to respond to a state change. any elements that are observing the broadcaster will share the attributes placed on the broadcaster. for instance, if the broadcaster has a label attribute, the observers will use that label. if the label changes, the labels of the observers will update automatically. an onbroadcast event will be sent to the observers when a change is made. for menuitems or buttons that just want to have their disabled status set when the feature should be disabled, you should use a command element instead. more information is available in the broadcasters and observers xul tutorial. examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, contain...
...just want to have their disabled status set when the feature should be disabled, you should use a command element instead. more information is available in the broadcasters and observers xul tutorial. ...
...information is available in the broadcasters and observers xul tutorial. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

commandset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is not displayed and serves as a container for command elements. in addition, this element can hold a command updater which is used to update commands when certain events occur. a common use of the command updater is to update cut, copy, and paste menu items. more information is available in the xul tutorial. ...
...available in the xul tutorial. attributes commandupdater, events, oncommandupdate, targets example <commandset> <command id="cmd_open" oncommand="alert('open!');"/> <command id="cmd_help" oncommand="alert('help!');"/> </commandset> attributes commandupdater type: boolean if true, the commandset is used for updating commands. typically, this is used to update menu commands such as undo and cut based on when an event occurs. for example, since the cut command is only valid when something is selected, a command updater might be used when the select event occurs. events type: comma-separated list a comma-separated list of event names that the command updater will update upon. if this attribute is not specified, or you set it to the v...
... a comma-separated list of element ids that the command updater will update upon. if this attribute is not specified, or you set it to the value '*', all elements are valid. the command update will only occur when the event occurs to one of the specified elements. ...
...not specified, or you set it to the value '*', all elements are valid. the command update will only occur when the event occurs to one of the specified elements. ...

deck - Archive of obsolete content
tion value="this is the third page"/> <button label="this is also the third page"/> </box> </deck> attributes selectedindex type: integer gets and sets the index of the currently selected panel. the first item is at index 0. ...
...tedindex type: integer gets and sets the index of the currently selected panel. the first item is at index 0. inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties selectedindex type: integer returns the index of the currently selected item. you may s...
...o items are selected do not hide panels; the deck element only understands visible panels. selectedpanel type: element holds a reference to the currently selected panel within a deck element. assigning a value to this property will modify the selected panel. ...
...edpanel type: element holds a reference to the currently selected panel within a deck element. assigning a value to this property will modify the selected panel. ...

description - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to ...
...this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a...
... so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accessibletype type: integer a value indicating the type of accessibility object for the element. crop ...
... crop type: string gets and sets the value of the crop attribute. disabled type: boolean gets and sets the value of the disabled attribute. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), gete...

groupbox - Archive of obsolete content
rial. ...
... and white"/> <radio label="colour"/> </radiogroup> <checkbox label="enabled"/> </groupbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for th...
..., ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...ptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...

member - Archive of obsolete content
t are containers or are contained within another element. both the container and child attributes may use variables. more information is available in the xul tutorial. ...
...ation is available in the xul tutorial. ...
...of the element that is referred to by the container element. container type: ? a variable reference to a node that is expected to be a container. if the variable is the same as the uri attribute on the content element, the resource must be a container element in order to match. ...
...a node that is expected to be a container. if the variable is the same as the uri attribute on the content element, the resource must be a container element in order to match. ...

separator - Archive of obsolete content
orizontal or vertical separator. note that the values are the reverse of what seems more likely. horizontal the separator separates vertically placed elements. vertical the separator separates horizontally placed elements. ...
... separates vertically placed elements. vertical the separator separates horizontally placed elements. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...
...ta style classes the following classes may be used to style the element. these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme. groove a grooved separator. groove-thin a thin grooved separator. thin a thinner separator, which is usually 0.5 ems. related elements spacer, splitter, menuseparator, toolbarseparator, treeseparator. ...

statusbar - Archive of obsolete content
tatusbarpanels. ...
... <progressmeter mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> 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, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the ...
...pe, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...tiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...

toolbargrippy - Archive of obsolete content
e and expand it. this element is used internally by the toolbar and should only be used directly when modifying its theme. more information is available in the xul tutorial. ...
...information is available in the xul tutorial. properties accessible examples (example needed) 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, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible type: nsiaccessible returns the accessibility object for the element. i...
...ditable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible type: nsiaccessible returns the accessibility object for the element. ...
...e, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible type: nsiaccessible returns the accessibility object for the element. ...

toolbarseparator - Archive of obsolete content
apply a different appearance. ...
...button 1"/> <toolbarseparator /> <toolbarbutton label="button 2"/> </toolbar> </toolbox> 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, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the ...
...ype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...ltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...

toolbarspacer - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only a space between toolbar items. ...
...efox only a space between toolbar items. ...
..., ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...ptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...

toolbarspring - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only a flexible space between toolbar items. ...
...xible space between toolbar items. ...
...pe, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...tiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...

treecol - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } cycler type: boolean if true, then the column is a cycler column. in the case, clicking on a cell in the column will alternate its state between on and off. this is used, for example, in a mail window, for a column that indicates that...
...dicate that the tree column header should be displayed without any column header styling. if you don't set a label for that column either, the header is not displayed at all. ignoreincolumnpicker type: boolean if true, the column does not appear in the column picker. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. primary type: boolean if set to true, the treecol will have indentation and twisties drawn to the left of it to indicate the hierarchy level of the rows. if no column has the primary attribute set to true, the tree may still contain nested rows, although no indication wi...
...are in pixels. specifying widths for your columns causes gecko to allow the tree to be scrolled horizontally if it is wider than the available space. properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...f it is wider than the available space. properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...

treecols - Archive of obsolete content
s available in the xul tutorial. attributes pickertooltiptext properties accessibletype examples (example needed) attributes pickertooltiptext type: string the text for the tooltip on the column picker. ...
...tributes pickertooltiptext type: string the text for the tooltip on the column picker. ...
..., ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...ptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...

Archived Mozilla and build documentation - Archive of obsolete content
s in their <head> elements. generators can also be independently downloaded and installed by users if they include a list of pages to which they apply. creating a mozilla extension a mozilla extension is an installable enhancement to the mozilla browser that provides additional functionality (for example linky, which adds an item to the context menu for opening multiple links in a document or selection). this tutorial walks you through the process of building a mozilla extension that adds an icon to mozilla's status bar showing the current status of the mozilla source code (i.e. whether or not the latest version of the code is compiling successfully and passing tests). the extension will access tinderbox, mozilla.org's webtool for ...
... doing so in c++. error console the error console is a tool available in most mozilla-based applications that is used for reporting errors in the application chrome and in web pages user opens. it reports javascript-related errors and warnings, css errors and arbitrary messages from chrome code. in firefox, the error console can be opened from the tools menu or by ctrl-shift-j. exception logging in javascript technical review completed. existing content this is a list of existing mozilla.org documentation. it needs to be checked, prioritized, and migrated. extension frequently asked questions this is quick set of answers to the most common issues with extension deve...
...nto the wiki. the list of completed documents is available through the devedge page. prism prism is a simple xulrunner-based browser that hosts web applications without the normal web browser user interface. prism is based on a concept called site-specific browsers (ssb). an ssb is designed to work exclusively with a single web application. it doesn’t have the menus, toolbars and other accoutrements of a traditional web browser. an ssb also offers tighter integration with the operating system and desktop than a typical web application running through a web browser. applications running in an ssb are therefore able to benefit from many of the advantages of the desktop and of the web at the same time. proxy ui (recently added...
...t provides an easy way to experiment with xul. it’s a simple editor that can preview xul inline or in a separate popup window. it has a list of code snippets (small fragments of xul or javascript) that can be quickly inserted into the editor. the xul can be loaded from and saved to files. a xul validator and the error console are both available to help debug problems. the help menu provides access to xul information on mdc. there is even simple “keyword” help lookup for xul elements. xulrunner xulrunner is a mozilla runtime package that can be used to bootstrap xul+xpcom applications that are as rich as firefox and thunderbird. it provides mechanisms for installing, upgrading, and uninstalling these applications. ...

Extentsions FAQ - Archive of obsolete content
..> <stack flex="1"> <image top="40" left="80"/> <vbox> other content here </vbox> </stack> </window> the only restriction is that your image can't overlap the right or bottom of the window. there are workarounds to this restriction by messing around with overflow or negative margins but i forgot offhand how to do that. how to create a dynamic drop down menu that may have submenus using javascript for an extension? these two links should give you a starting point: http://www..xulplanet.com/tutorials/...u/advmenu.html http://www.xulplanet.com/tutorials/x...dommodify.html request for a thunderbird extension that can automatically detect the default domain when composing e-mails via autodetect. <https://bugzilla.mozilla.org/show_bug.cgi?id=312818>...
...ionality of ie in this respect? the ietab (opens ie in a firefox tab) should be able do this if you set it to always open "file://*" urls in an ie tab. the appearance with a firefox tab isn't quite the same as having a completely separate explorer window. however, it's functional and does allow for the explorer to be handling the display of the folder contents, and all of the right-click context menu support is present so it should meet my needs. what is the valid location and things needed to to release a mozilla extension on mozallia site? you must remove updateurl from the install.rdf and use a known to amo minversion/maxversion. no confirmation that the answer given worked yet. is it possible to open the url in a new tab? var tab = gbrowser.addtab( url ); // and if you want it...
...ow/if that works if the user hasn't defined a master password in options->security->use a master password. you can aes-128 or aes-256 symmetric encryption via aes.js (http://tinyurl.com/pp79t). no confirmation from the question asker on whether this answer was helpful in solving their problem. friday, october 06 - 13, 2006 (↑ top) any suggestions to remove tool tip appears on the menu it when it should not? what you described was a bug (https://bugzilla.mozilla.org/show_bug.cgi?id=147670). it looks like it has been fixed for firefox version 2. what do i need to do to avoid deadlocks? do i need to marshalinvokations to a particular thread? if so, how? are there any fundamental rules related to threading in xpcom, and if so, where are these defined? dom can only be access...
...ension that returns a "dummy" object when an instance of "@mozilla.org/helperapplauncherdialog;1" is created? you can write a dummy xpcom component implementing the necessary interfaces and register it with the sane contract id. http://developer.mozilla.org/en/docs...pcom_component would anyone be able to suggest the best way to do source level debugging in a firefox extension? in the debug menu, uncheck exclude browser files. use the debugger by typing in a command like this: /break chrome://myextension/content/myfile.js 123 then i suggest using flat chrome. if you turn off the xul cache you don't even need to restart to see changes, simply open a new window. how can i backup some of the files before upgrade an extension and put them back afterward? do i need to write an installati...

Common Firefox theme issues and solutions - Archive of obsolete content
common theme problems, which provides editors with "boilerplate" copy and paste review notes for common theme issues. this document was started on july 27, 2012 so it will take some time to completely fill in and some issues still need to have solutions written for them. operating system specific issues windows 7 windows 7 aero missing right-hand title bar buttons when tabs are on top and the menu bar is disabled, firefox is missing the min/max/restore/close button on the right side of the title bar. please see the following threads on mozillazine for solutions to this issue: http://forums.mozillazine.org/viewtopic.php?f=18&t=2131121 http://forums.mozillazine.org/viewtopic.php?f=18&t=1953371&start=60 windows 7 aero not going into full screen mode properly on win7 with aero glass suppor...
.../skin/lion/: keyhole-circle.png toolbar.png toolbarbutton-dropmarker.png tabbrowser/alltabs-box-bkgnd-icon.png tabview/tabview.png places/toolbar.png linux linux select box fields are showing both drop arrow and spinner arrows on linux: the styling of drop down select box fields may show both a drop arrow and up/down spinner arrows. the problem is commonly caused by a -moz-appearance:menulist style rule in chrome://global/skin/menulist.css. once the offending rule is found, it should be deleted and manual styling used. app button not styled on linux, but is styled on windows on linux the firefox app button that is displayed when tabs are on top and menu bar is disabled is not styled properly compared to windows and is not changing colors when in private browsing mode. the cause ...
...yled on linux, but is styled on windows on linux the firefox app button that is displayed when tabs are on top and menu bar is disabled is not styled properly compared to windows and is not changing colors when in private browsing mode. the cause of this issue is that linux firefox uses a different id for the firefox button from windows. the fix is to make sure any style rule that references #appmenu-button also has a comparable reference to #appmenu-toolbar-button in chrome://browser/skin/browser.css. if your firefox button relies on some button styling from toolbarbuttons.css you'll need to add comparable style rules for #appmenu-toolbar-button in browser.css. ...
...es a different id for the firefox button from windows. the fix is to make sure any style rule that references #appmenu-button also has a comparable reference to #appmenu-toolbar-button in chrome://browser/skin/browser.css. if your firefox button relies on some button styling from toolbarbuttons.css you'll need to add comparable style rules for #appmenu-toolbar-button in browser.css. toolbars and menus firefox application button application button doesn't change styling for private browsing mode when in private browsing mode there needs to be a visual difference to the firefox app button that is displayed when tabs are on top and the menu bar is disabled. text only toolbar buttons not aligned properly when text only toolbar buttons are selected in customize toolbars, text labels in toolba...

Desktop gamepad controls - Game development
m the previous frame does the job — if the button was already pressed, then we ignore the new press and set it to false. implementation we now know what the gamepadapi object looks like and what variables and functions it contain, so let's learn how all this is actually used in the game. to indicate that the gamepad controller is active we can show the user some custom text on the game's main menu screen. the textgamepad object holds the text saying a gamepad has been connected, and is hidden by default. here's the code we've prepared in the create() function that is executed once when the new state is created: create() { // ... var message = 'gamepad connected! press y for controls'; var textgamepad = this.add.text(message, ...); textgamepad.visible = false; } in the up...
... threshold is reached we can assume the input is done deliberately by the user and can act accordingly. ...
...isible = true; } } else { if(this.screengamepadhelp.visible) { this.screengamepadhelp.visible = false; } } if the b button is pressed, the game is paused: if(gamepadapi.buttonpressed('b')) { this.managepause(); } pause and game over states we already learned how to control the whole lifecycle of the game: pausing the gameplay, restarting it, or getting back to the main menu. it works smooth on mobile and desktop, and adding gamepad controls is just as straightforward — in the update() function, we check to see if the current state status is paused — if so, the relevant actions are enabled: if(gamepadapi.buttons.pressed('start')) { this.managepause(); } if(gamepadapi.buttons.pressed('back')) { this.stateback(); } similarly, when the gameover state statu...
...teback(); } similarly, when the gameover state status is active, then we can allow the user to restart the game instead of continuing it: if(gamepadapi.buttons.pressed('start')) { this.staterestart(); } if(gamepadapi.buttons.pressed('back')) { this.stateback(); } when the game over screen is visible, the start button restarts the game while the back button helps us get back to the main menu. the same goes for when the game is paused: the start button unpauses the game and the back button goes back, just like before. summary that's it! we have successfully implemented gamepad controls in our game — try connecting any popular controller like the xbox 360 one and see for yourself how fun it is to avoid the asteroids and shoot the aliens with a gamepad. now we can move on and explo...

Document and website structure - Learn web development
this article looks into how to plan a basic website structure, and write the html to represent this structure. prerequisites: basic html familiarity, as covered in getting started with html. ...
...all tend to share similar standard components, unless the page is displaying a fullscreen video or game, is part of some kind of art project, or is just badly structured: header: usually a big strip across the top with a big heading, logo, and perhaps a tagline. this usually stays the same from one webpage to another. navigation bar: links to the site's main sections; usually represented by menu buttons, links, or tabs. like the header, this content usually remains consistent from one webpage to another — having inconsistent navigation on your website will just lead to confused, frustrated users. many web designers consider the navigation bar to be part of the header rather than an individual component, but that's not a requirement; in fact, some also argue that having the two separate...
...the right css, you could use pretty much any elements to wrap around the different sections and get it looking how you wanted, but as discussed before, we need to respect semantics and use the right element for the right job. this is because visuals don't tell the whole story. we use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful? note: colorblind people represent around 4% of the world population or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women are colorblind. blind and visually impaired people represent roughly 4-5% of the world population (in 2...
...eed, and how they should be arranged and link to one another for the best possible user experience. this is called information architecture. in a large, complex website, a lot of planning can go into this process, but for a simple website of a few pages, this can be fairly simple, and fun! bear in mind that you'll have a few elements common to most (if not all) pages — such as the navigation menu, and the footer content. if your site is for a business, for example, it's a good idea to have your contact information available in the footer on each page. note down what you want to have common to every page. next, draw a rough sketch of what you might want the structure of each page to look like (it might look like our simple website above). note what each block is going to be. now, brainst...

Mozilla accessibility architecture
of the dom tree. nshtmlcomboboxaccessible: an html combo box doesn't have a dom node or anonymous content for its s textfield, button or list. in the future xbl form controls may be used, in which case there will be dom content for these sub-parts, and we will not need to override the traversal methods. that is why we don't need to override these traversal methods for nsxulcomboboxaccessible (<menulist>). nsouterdocaccessible: used for elements such as <iframe>, <browser> and <editor>, which spawn an entire new document, but don't actually have any child nodes in their own dom. nsxultreeaccessible: which does not have a dom node for each tree item, a special interface is provided by the tree itself to get the text for each row, column in the tree. in all of these accessible implementat...
...events on nodes within them, and consequently fire the appropriate accessible event. this happens in the handleevent() method. note: this chart is not complete, consult the handleevent() method to see the rest. ...
...hin them, and consequently fire the appropriate accessible event. this happens in the handleevent() method. note: this chart is not complete, consult the handleevent() method to see the rest. ...
... 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, radiostatechange mozilla dom event_state_change popupshowing mozilla dom event_menustart popuphiding mozilla dom event_menuend nsdocaccessible::scrollpositiondidchange(), then nsdocaccessible::scrolltimercallback() nsiscrollpositonlistener and nsitimer callbacks event_scrollingend (quick timer is used to determine when scrolling pauses or stops, to avoid extra events being fired) nsdocaccessible::onstatechan...

Debugging on Mac OS X
ems if needed", then click add. (these will then be progressively added under the root item <project-name> in the left-hand pane. note that subdirectories may initially appear to be empty, but they too will progressively be populated as xcode processes the sourse files. once done, you should be able to open any file quickly by hitting cmd-shift-o and typing in the name of a file.) in the product menu, select scheme > new scheme and name your scheme (for example, "debug"). after you click ok, xcode should open the settings window for the new scheme. (if not, then open its settings from the product > edit scheme menu.) select "run" on the left-hand side of the settings window, then select the "info" tab. set the executable by clicking on "none" and selecting "other...". a new dialog titled "ch...
...ou start to debug, expand the "executables" branch of the "groups & files" list and double click on the executable you added for mozilla. click the plus icon under the "arguments" list and type "-p <profile name>" (e.g. "-p mozilladebug"). close the window when you're done. running a debug session make sure breakpoints are active (which implies running under the debugger) by opening the product menu and selecting "debug / activate breakpoints" (also shown by the "breakpoints" button in the top right section of the main window). then click the "run" button or select "run" from the product menu. setting breakpoints setting a breakpoint is easy. just open the source file you want to debug in xcode, and click in the margin to the left of the line of code where you want to break. during the de...
...to see the javascript stack. for more information, see debugging mozilla with lldb. debugging e10s child processes using xcode to debug child processes created by an e10s-enabled browser is a little trickier than debugging a single-process browser, but it can be done. these directions were written using xcode 6.3.1 complete all the steps above under "creating the project" from the "product" menu, ensure the scheme you created is selected under "scheme", then choose "scheme > edit scheme" in the resulting popup, click "duplicate scheme" give the resulting scheme a more descriptive name than "copy of scheme" select "run" on the left-hand side of the settings window, then select the "info" tab. set the executable by clicking on the "executable" drop-down, and selecting the plugin-contain...
...n select the "info" tab. set the executable by clicking on the "executable" drop-down, and selecting the plugin-container.app that is inside the app bundle of the copy of firefox you want to debug. on the same tab, under "launch" select "wait for executable to be launched" on the "arguments" tab, remove all arguments passed on launch. now you're ready to start debugging: from the "product" menu, ensure the scheme you created above is selected under "scheme" click the "run" button. the information area at the top of the window will show "waiting for plugin-container to launch" from a command line, run your build of firefox. when that launches a child process (for example, when you start to load a webpage), xcode will notice and attach to that child process. you can then debug the child...

How to get a stacktrace with WinDbg
d a firefox version for which symbols are availables from the mozilla symbol server to use with windbg. you can use any official nightly build or released version of firefox from mozilla. you can find the latest trunk nightly builds under http://ftp.mozilla.org/pub/mozilla.o.../latest-trunk/. debugging to begin debugging, ensure that firefox is not already running and open windbg from the start menu. (start->all programs->debugging tools for windows->windbg) next, open the "file" menu and choose "open executable...". in the file chooser window that appears, open the firefox.exe executable in your firefox program folder (c:\program files\mozilla firefox). you should now see a "command" text window with debug output at the top and an input box at the bottom. before debugging can start, severa...
...is, enter these four commands, pressing enter after each one. .logopen /t c:\temp\firefox-debug.log .childdbg 1 .tlist sxn gp lm if you see firefox.exe listed in the output from .tlist more than once, then you are already running the application and need to close the running instance first before you start debugging, otherwise you won't get useful results. now run firefox by opening the debug menu and clicking go. while firefox is running, you will not be able to type any commands into the debugger. after it starts, try to reproduce the crash or hanging issue that you are seeing. if firefox fails to start, and you see lines of text followed by a command prompt in the debugger, a "breakpoint" may have been triggered. if you are prompted for a command but don't see an error about a crash, g...
...ile firefox is running, you will not be able to type any commands into the debugger. after it starts, try to reproduce the crash or hanging issue that you are seeing. if firefox fails to start, and you see lines of text followed by a command prompt in the debugger, a "breakpoint" may have been triggered. if you are prompted for a command but don't see an error about a crash, go back to the debug menu and press go. once the browser crashes, you will see an error (such as "access violation") in the windbg command window. if firefox hangs and there is no command prompt available in the debugger, open the debug menu and choose break. once the browser has crashed or been stopped, continue with the steps below. after the crash or hang you need to capture the debug information to include in a bug...
...ill not download no matter what you do, the problem may be that internet explorer has been set to the work offline mode. you will not receive any warnings of this in windbg, visual c++ or visual studio. even using the command line with symchk.exe to download symbols will fail. this is because microsoft uses internet explorer's internet & proxy settings to download the symbol files. check the file menu of internet explorer to ensure "work offline" is unchecked. see also symbol server maps addresses to human readable strings. source server maps addresses to source code lines ...

TPS Tests
sts that want custom behavior should add it to the tps addon so that other tests can use it. example test here's an example tps test to tie it all together. ...
... "phase3": "profile1" }; // asset list // the initial list of bookmarks to be added to the browser var bookmarks_initial = { "menu": [ { uri: "http://www.google.com", title "google.com", changes: { // these properties are ignored by calls other than bookmarks.modify title: "google" } }, { folder: "foldera" }, { folder: "folderb" } ], "menu/foldera": [ { uri: "http://www.yahoo.com", title: "testing yahoo", changes: { location: "menu/folderb" } } ] }; // the state of bookmarks after the first 'modify' action has been performed // on them. ...
...older: "folderb" } ], "menu/foldera": [ { uri: "http://www.yahoo.com", title: "testing yahoo", changes: { location: "menu/folderb" } } ] }; // the state of bookmarks after the first 'modify' action has been performed // on them. ...
...location: "menu/folderb" } } ] }; // the state of bookmarks after the first 'modify' action has been performed // on them. ...

nsIAccessibleProvider
xultabbox 0x00001018 a combination of a tabs obje...
... xultabbox 0x00001018 a combination of a tabs object and a tabpanels object.
... xultabbox 0x00001018 a combination of a tabs object and a tabpanels object. xultabs 0x00001019 the c...
... xultabbox 0x00001018 a combination of a tabs object and a tabpanels object. xultabs 0x00001019 the collection of tab objects, us...

Main Windows
messenger.xul itself doesn’t contain a lot. its main focus is on handling the folderpane, threadpane, and the message preview sections shown above. the rest is loaded from overlays: mailwindowoverlay.xul this is the red sections shown in the interface above (where?), including the toolbars, notification bars, and the status bar, but also includes most of the commands, keysets, and context menus of thunderbird, along with a whole lot of javascript. mailoverlay.xul a really small overlay that only adds a few “new message” and “new card” commands to the menus, along with their associated javascript. msghdrviewoverlay.xul shown in blue above (where?), this overlay consists of three boxes. two are stacked showing either a brief or expanded view of the headers. the third is the a...
... a really small overlay that only adds a few “new message” and “new card” commands to the menus, along with their associated javascript. msghdrviewoverlay.xul shown in blue above (where?), this overlay consists of three boxes. two are stacked showing either a brief or expanded view of the headers. the third is the attachment box which can be toggled into a slim or an expanded view basemenuoverlay.xul contains the contents of most of the menus (i.e. file, edit, view, etc). osx only: macmenuoverlay.xul a special overlay for osx that adds a few items to the window menu. messagewindow.xul messagewindow.xul is shown when a message is opened. ...
...d view basemenuoverlay.xul contains the contents of most of the menus (i.e. file, edit, view, etc). osx only: macmenuoverlay.xul a special overlay for osx that adds a few items to the window menu. messagewindow.xul messagewindow.xul is shown when a message is opened. its almost exactly the same as messenger.xul in terms of overlays, but just lacks the folder and threadpanes normally shown. menus, toolbar buttons, and headers are all taken from exactly the same overlays listed above though. mailwindowoverlay.xul this is the red sections shown in the interface above, including the toolbars, notification bars and the status bar.it also includes most of the commands, keysets, and context menus of thunderbird, along with a whole lot of javascript. msghdrviewoverlay.xul shown in blue a...
...tification bars and the status bar.it also includes most of the commands, keysets, and context menus of thunderbird, along with a whole lot of javascript. msghdrviewoverlay.xul shown in blue above, this overlay consists of three boxes. two are stacked showing either a brief or expanded view of the headers. the third is the attachment box which can be toggled into a slim or an expanded view basemenuoverlay.xul contains the contents of most of the menus (i.e. file, edit, view, etc). osx only: macmenuoverlay.xul a special overlay for osx that adds a few items to the window menu. customizetoolbar.xul and customizetoolbarsheet.xul these are two old files from when the original customizable toolbars were ported from firefox (phoenix at the time) to thunderbird (minotaur at the time). custom...

Drawing and Event Handling - Plugins
ameter. this parameter is valid only for the unix and ms windows platforms. for unix, the values are either the current display (npnvxdisplay) or the application's context (npnvxtappcontext). for ms windows, the value is the native window on which the plug-in drawing occurs (npnvnetscapewindow). the value parameter contains the name of the plug-in. you can also use npn_getvalue to help create a menu or dialog box for a windowless plug-in. windowed plug-ins the browser gives each windowed plug-in its own native window, often a child window of the the browser window itself, to draw into. the plug-in has complete control over drawing and event handling within that window. on mac os, the browser does not give a windowed plug-in a native window, because the mac os platform does not support chi...
...he browser (as opposed to the native windowing system) is responsible for controlling both their drawing and their event handling. see the following items for more information on controlling the drawing of the plug-in instance: specifying that a plug-in is windowless invalidating the drawing area forcing a paint message making a plug-in opaque making a plug-in transparent creating pop-up menus and dialog boxes event handling for windowless plug-ins specifying that a plug-in is windowless to specify that a plug-in is windowless, use the npn_setvalue method. the instance parameter represents the current plug-in. the variable parameter contains plug-in information to set. the value parameter returns the name of the plug-in. to specify that a plug-in is windowless, use npn_setvalue ...
...nds to its opaque areas. this ensures that the transparent areas of the plug-in are always valid. windowless plug-ins are transparent by default. if you want to make an opaque windowless plug-in transparent, call the npn_setvalue method and set nppvplugintransparentbool to the value true. the plug-in can call this method any time after specifying that it is a windowless plug-in. creating pop-up menus and dialog boxes ms windows and unix/x11 only a windowless plug-in does not draw in its own native window. instead, it draws directly in the drawable given to it. this behavior presents a problem if you need to display pop-up menus and modal dialog boxes in a plug-in; a plug-in needs a parent window in order to create windows like these. to deal with this problem, use npn_getvalue to find out...
...the information the call is requesting, in this case npnvnetscapewindow (the native window in which plug-in drawing occurs). windows the requested information, a value of type hwnd, is returned from npn_getvalue in the value parameter. in many cases, a plug-in may still have to create its own window (a transparent child window of the the browser window) to act as the owner window for pop-up menus and modal dialog boxes. you can give this transparent child window its own windowproc process. the plug-in can use this to deal with wm_command messages sent to it as a result of tracking the pop-up menu or modal dialog box. unix/x11 the value parameter for npn_getvalue must point to an xlib window. on successful return this will contain the browser toplevel window. use this window to set t...

Plug-in Basics - Plugins
w receive keyboard and mouse events obtain data from the network using urls post data to urls add hyperlinks or hotspots that link to new urls draw into sections on an html page communicate with javascript/dom from native code you can see which plug-ins are installed on your system and have been properly associated with the browser by consulting the installed plug-ins page. go to the help menu, and click help and then about plug-ins. type "about:plugins" in the location bar. the installed plug-ins page lists each installed plug-in along with its mime type or types, description, file extensions, and the current state (enabled or disabled) of the plug-in for each mime type assigned to it. notice in view-source that this information is simply gathered from the javascript. because plug-in...
...ugin { width: 470px; height: 231px; } </style> </head> <body><p> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,30,0" class="myplugin"> <param name="movie" value="foo.swf"/> <param name="quality" value="high"/> <param name="salign" value="tl"/> <param name="menu" value="0"/> <object data="foo_movie.swf" type="application/x-shockwave-flash" class="myplugin"/> <param name="quality" value="high"/> <param name="salign" value="tl"/> <param name="menu" value="0"/> <object type="*" class="myplugin"> <param name="pluginspage" value="http://www.macromedia.c...
...embed element. ...
...o.swf"> <param name="quality" value="high"> <param name="bgcolor" value="#eeeeee"> <param name="salign" value="tl"> <param name="menu" value="0"> <embed src="foo.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?p1_prod_version=shockwaveflash" type="application/x-shockwave-flash" width="749" height="68" bgcolor="#eeeeee" salign="tl" menu="0"> </embed> </object> using custom embed attributes in addition to these standard attributes, you can create private, plug-in-specific attributes and use them in the embed attribute to pass extra information between the html page and the plug-in code. the browser ignores these nonstandard attributes when parsing the html, but it passes all attributes to the plug-in, allowing the plug-in t...

How to - Firefox Developer Tools
to stop, press it again: you can also start and stop recording from the web console, using console.profile() and console.profileend(). ...
...to stop, press it again: you can also start and stop recording from the web console, using console.profile() and console.profileend(). ...
...to stop, press it again: you can also start and stop recording from the web console, using console.profile() and console.profileend(). ...
...to stop, press it again: you can also start and stop recording from the web console, using console.profile() and console.profileend(). ...

Console messages - Firefox Developer Tools
icon not all console messages contain icons. ...
... and line number for javascript, css and console api messages, the message can be traced to a specific line of code. the console then provides a link to the filename and line number that generated the message. by default, the console is cleared each time you navigate to a new page or reload the current page. to override this behavior, enable persist logs in the console settings menu (gear icon). the context menu options listed below are available on all message categories. additional context menu options are described in the subsection for the message category they apply to. copy message copies the selected message to the clipboard. select all selects all messages available in the message display pane. export visible messages to clipboard copies all messages avai...
..."xhr" tag indicating this. if more information is available, a disclosure triangle lets you display it, in an embedded panel that is identical to the network monitor request details. uri the target uri. summary the http version, response code, and time taken to complete. clicking the response code takes you to the reference page for that code. the context menu for network messages includes a few extra items in addition the globally-available ones: copy link location acts as you would expect, copying the url into the clipboard open in network panel switches context to the network tab, selects the request and shows you the details resend request sends the network request again. open url in new tab opens the url in a new browser tab. if the re...
...er-data. the web console decodes these headers and displays them. to find a suitable library for your server code, see the chrome logger documentation. interpreter input/output commands sent to the browser using the web console's javascript interpreter, and the corresponding responses, are logged in the console messages. for responses that contain objects or variables, the following context menu options are available: reveal in inspector shows the selected dom node in the inspector pane. store as global variable creates a global variable (with a name like temp0, temp1, etc.) whose value is the selected object. the name of the variable appears as an input to the interpreter, and its value appears as a response. copy object copies the selected object to the clipboard. filtering a...

CustomElementRegistry.whenDefined() - Web APIs
undefined when the custom element is defined. if the custom element is already defined, the promise is resolved immediately. exceptions exception description syntaxerror if the provided name is not a valid custom element name, the promise rejects with a syntaxerror. ...
...stom element is defined. if the custom element is already defined, the promise is resolved immediately. exceptions exception description syntaxerror if the provided name is not a valid custom element name, the promise rejects with a syntaxerror. examples this example uses whendefined() to detect when the custom elements that make up a menu are defined. ...
...lready defined, the promise is resolved immediately. exceptions exception description syntaxerror if the provided name is not a valid custom element name, the promise rejects with a syntaxerror. examples this example uses whendefined() to detect when the custom elements that make up a menu are defined. the menu displays placeholder content until the actual menu content is ready to display. ...
...diately. exceptions exception description syntaxerror if the provided name is not a valid custom element name, the promise rejects with a syntaxerror. examples this example uses whendefined() to detect when the custom elements that make up a menu are defined. the menu displays placeholder content until the actual menu content is ready to display. <nav id="menu-container"> <div class="menu-placeholder">loading...</div> <nav-menu> <menu-item>item 1</menu-item> <menu-item>item 2</menu-item> ... <menu-item>item n</menu-item> </nav-menu> </nav> const container = document.getelementbyid('menu-container'); const placeholder = container.queryselector('.menu-placeholder'); // fetch all the children of menu that are not yet defined. cons...

Element: auxclick event - Web APIs
not support input or navigation, you will often want to explicitly prevent other default actions mapped to the down action of the middle mouse button. on windows this is usually autoscroll, and on macos and linux this is usually clipboard paste. this can be done by preventing the default behaviour of the mousedown or pointerdown event. additionally, you may need to avoid opening a system context menu after a right click. due to timing differences between operating systems, this too is not a preventable default behavior of auxclick. instead, this can be done by preventing the default behavior of the contextmenu event. examples in this example we define functions for two event handlers — onclick and onauxclick. the former changes the color of the button background, while the latter changes ...
... html <button><h1>click me!</h1></button> css html { height: 100%; overflow: hidden; } body { height:...
... html <button><h1>click me!</h1></button> css html { height: 100%; overflow: hidden; } body { height: inherit; display: flex; justify-content: center; align-items: center; margin: 0; } button { border: 0; background-colo...
... button.style.backgroundcolor = randomcolor(); }; button.onauxclick = function(e) { e.preventdefault(); button.style.color = randomcolor(); } button.oncontextmenu = function(e) { e.preventdefault(); } notice that in addition to capturing the auxclick event using onauxclick, the contextmenu event is also captured, and preventdefault() called on that event, in order to prevent the context menu from popping up after the color change is applied. html <button><h1>click me!</h1></button> css html { height: 100%; overflow: hidden; } body { height: inherit; display: flex; justify-content: center; align-items: center; margin: 0; } button { border: 0; background-color: white; font-size: 8vw; display: block; width: 100%; height: 100%; } h1 { letter-spacing: 0...

Window.open() - Web APIs
ewly created window, and has all its features available. if the window couldn't be opened, the returned value is instead null. the returned reference can be used to access properties and methods of the new window as long as it complies with same-origin policy security requirements. description the open() method creates a new secondary browser window, similar to choosing new window from the file menu. the url parameter specifies the url to be fetched and loaded in the new window. if url is an empty string, then a new blank, empty window (url about:blank) is created with the default toolbars of the main window. note that remote urls won't load immediately. when window.open() returns, the window always contains about:blank. the actual fetching of the url is deferred and starts after the curren...
...lt toolbars of the main window. note that remote urls won't load immediately. when window.open() returns, the window always contains about:blank. the actual fetching of the url is deferred and starts after the current script block finishes executing. the window creation and the loading of the referenced resource are done asynchronously. ...
..., safari, chromium edge), the following features are just a condition for whether to open popup or not. see popup condition section. the following features control the visibility of each ui parts, all features can be set to yes or 1, or just be present to be on. set them to no or 0, or in most cases just omit them, to be off. example: status=yes, status=1, and status have identical results. menubar if this feature is on, then the new secondary window renders the menubar. if windowfeatures is non-empty, menubar detaults to off. toolbar if this feature is on, then the new secondary window renders the toolbar buttons (back, forward, reload, stop buttons). in addition to the toolbar buttons, firefox (before 76) will render the tab bar if it is visible, present in the parent window. ...
... most modern browsers offers a popup-blocking feature. users can be using browser-built-in feature or extensions include opening a link in a new window or not, in the same window, in a new tab or not, in "background" or not. coding carelessly to open new windows can no longer be assured of success, cannot succeed by force and, if it does, it will annoy a majority of users. new windows can have menubar missing, scrollbars missing, status bar missing, window resizability disabled, etc.; new tabs cannot be missing those functionalities or toolbars (or at least, the toolbars that are present by default). therefore, tab-browsing is preferred by a lot of users because the normal user-interface of the browser window they prefer is kept intact, remains stable. opening new windows, even with reduce...

Stacking context example 3 - CSS: Cascading Style Sheets
« css « understanding css z-index stacking context example 3 this last example shows problems that arise when mixing several positioned elements in a multi-level html hierarchy and when z-indexes are assigned using class selectors. let's take as an example a three-level hierarchical menu made from several positioned divs. second-level and third-level divs appear when hovering or clicking on their parents. ...
... stacking context example 3 this last example shows problems that arise when mixing several positioned elements in a multi-level html hierarchy and when z-indexes are assigned using class selectors. let's take as an example a three-level hierarchical menu made from several positioned divs. second-level and third-level divs appear when hovering or clicking on their parents. usually this kind of menu is script-generated either client-side or server-side, so style rules are assigned with a class selector instead of the id selector. if the three menu levels partially overlap, then managing stacking could become a problem. the first-level menu is only relatively positioned, so no stacking context is created. the second-level menu is absolutely positioned inside the parent element. in order ...
...nt-side or server-side, so style rules are assigned with a class selector instead of the id selector. if the three menu levels partially overlap, then managing stacking could become a problem. the first-level menu is only relatively positioned, so no stacking context is created. the second-level menu is absolutely positioned inside the parent element. in order to put it above all first-level menus, a z-index is used. the problem is that for each second-level menu, a stacking context is created and each third-level menu belongs to the context of its parent. so a third-level menu will be stacked under the following second-level menus, because all second-level menus share the same z-index value and the default stacking rules apply. to better understand the situation, here is the stacking c...
.... to better understand the situation, here is the stacking context hierarchy: root stacking context level #1 level #2 (z-index: 1) level #3 ... level #3 level #2 (z-index: 1) ... level #2 (z-index: 1) level #1 ... level #1 this problem can be avoided by removing overlapping between different level menus, or by using individual (and different) z-index values assigned through the id selector instead of class selector, or by flattening the html hierarchy. note: in the source code you will see that second-level and third level menus are made of several divs contained in an absolutely positioned container. this is useful to group and position all of them at once. example source code <!doctype htm...

font - CSS: Cascading Style Sheets
rties this property is a shorthand for the following css properties: font-family font-size font-stretch font-style font-variant font-weight line-height syntax the font property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties. if font is specified as a system keyword, it must be one of: caption, icon, menu, message-box, small-caption, status-bar. if font is specified as a shorthand for several font-related properties, then: it must include values for: <font-size> <font-family> it may optionally include values for: <font-style> <font-variant> <font-weight> <font-stretch> <line-height> font-style, font-variant and font-weight must precede font-size font-var...
...> see the font-weight css property. <'font-stretch'> see the font-stretch css property. <'font-size'> see the font-size css property. <'line-height'> see the line-height css property. <'font-family'> see the font-family css property. system font values caption the system font used for captioned controls (e.g., buttons, drop-downs, etc.). icon the system font used to label icons. menu the system font used in menus (e.g., dropdown menus and menu lists). message-box the system font used in dialog boxes. small-caption the system font used for labeling small controls. status-bar the system font used in window status bars. prefixed system font keywords browsers often implement several more, prefixed, keywords: gecko implements -moz-window, -moz-document, -moz-desktop, -moz...
... formal definition initial valueas each of the properties of the shorthand:font-style: normalfont-variant: normalfont-weight: normalfont-stretch: normalfont-size: mediumline-height: normalfont-family: depends on user agentapplies toall elements. ...
... set the font family to sans-serif */ p { font: 12px/14px sans-serif } /* set the font size to 80% of the parent element or default value (if no parent element present). set the font family to sans-ser...

Using HTML sections and outlines - Developer guides
ed purposes. many accessibility tools as well as reader views provided by some browsers rely on semantic sectioning elements. so don't simply swap out an existing tangle of <div> elements for a bunch of <section> elements. section elements in html5 html navigational element (<nav>) defines a section that contains navigation links that appear often on a site. you can have primary and secondary menus, but you cannot nest a <nav> element inside another <nav> element. html article element (<article>) defines a piece of self-contained content. it does not refer to the main content alone and can be used for comments and widgets. html section element (<section>) defines a section of a document to indicate a related grouping of semantic meaning. it makes sense to use the section element to provi...
... <nav> <ul> <li><a href="#">primary link</a></li> <li> <a href="#">primary link</a> <ul> <li><a href="#">secondary link</a></li> <li><a href="#">secondary lin...
...ent </p> </article> <aside> <p> author info </p> </aside> </section> <footer> copyright info </footer> </body> nav element the <nav> element indicates a navigation block and should be used for major navigational menus. <nav> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </nav> nesting menus you do not nest <nav> elements. the <nav> can contain both primary and secondary menus. <nav> <ul> <li><a href="#">primary link</a></li> <li> <a href="#">primary link</a> <ul> <li><a href="#">secondary link</a></li> <li><a href="#">secondary link</a></li> </ul> </li> <li><a href="#">primary link</a></li> </ul> </nav> collection of links u...
...collections of links such as social media profiles or a blogroll should not be wrapped in the <nav> element. html elements in <nav> while list elements are common for navigation they are not required. you can use other elements such as <p>. ...

XUL Migration Guide - Archive of obsolete content
pis in future releases to meet important use cases. user interface components xul-based add-ons typically implement a user interface using a combination of two techniques: xul overlays and xul windows. xul overlays xul overlays are used to modify existing windows such as the main browser window. in this way an extension can integrate its user interface into the browser: for example, adding menu items, buttons, and toolbars. because sdk-based extensions are restartless, they can't use xul overlays. to add user interface components to the browser, there are a few different options. in order of complexity, the main options are: the sdk includes modules that implement some basic user interface components including buttons, dialogs, and context menu items. there is a collection ...
...may relocate them by toolbar customization) because it makes for a better user experience for add-ons to expose their interfaces in a consistent way. in such cases it's worth considering changing your user interface to align with the sdk apis. some limitations only exist because we haven't yet implemented the relevant apis: for example, there's currently no way to add items to the browser's main menus using the sdk's supported apis. many add-ons will need to make some changes to their user interfaces if they are to use only the sdk's supported apis, and add-ons which make drastic changes to the browser chrome will very probably need more than the sdk's supported apis can offer. similarly, the supported apis expose only a small fraction of the full range of xpcom functionality. using third ...
... is extensible by design: developers can create new modules filling gaps in the sdk, and package them for distribution and reuse. add-on developers can install these packages and use the new modules. if you can find a third party package that does what you want, this is a great way to use features not supported in the sdk without having to use the low-level apis. see the guide to adding firefox menu items. some useful third party packages are collected in the jetpack wiki. note, though, that by using third party packages you're likely to lose the security and compatibility benefits of using the sdk. using the low-level apis in addition to the high-level apis, the sdk includes a number of low-level apis some of which, such xhr and window/utils, expose powerful browser capabilities. but not...

panel - Archive of obsolete content
browsing if your add-on has not opted into private browsing, and it calls panel.show() when the currently active window is a private window, then the panel will not be shown. panel limitations although panels can host html documents, they are not implemented as browser tabs, so many things that work in normal web pages do not work inside panels: prior to firefox 33, you don't get a context menu. from firefox 33 you can enable a context menu by passing contextmenu: true to the panel's constructor. the html <select> element doesn't work. the html <datalist> element doesn't give you autocomplete suggestions (bug 918600). you can't embed flash (bug 952578). you can't provide tooltips using title attributes (bug 918600). security warning pages (the "this connection is untrusted" warning...
...e content (dom, js, css, images) for the panel has been loaded, at the time the window.onload event fires this property is optional and defaults to "end". contentscriptoptions object read-only value exposed to content scripts under addon.options property. any kind of jsonable value (object, array, string, etc.) can be used here. optional. contextmenu boolean new in firefox 33 whether to show a context menu when the user context-clicks in the panel. the context menu will be the same one that's displayed in web pages. optional, defaults to false. onmessage function include this to listen to the panel's message event. onshow function include this to listen to the panel's s...
...reated it can be shown and hidden using its show() and hide() methods. once a panel is no longer needed it can be deactivated using destroy(). the content of a panel is specified using the contenturl option. an add-on can interact with the content of a panel using content scripts which it supplies in the contentscript and/or contentscriptfile options. for example, a content script could create a menu and send the user's selection to the add-on. methods destroy() destroys the panel, unloading any content that was loaded in it. once destroyed, the panel can no longer be used. if you just want to hide the panel and might show it later, use hide instead. postmessage(message) sends a message to the content scripts. parameters message : value the message to send. must be stringifiable to js...

Release notes - Archive of obsolete content
removed isprivatebrowsing from browserwindow. details github commits made between firefox 34 and firefox 35. this will not include any uplifts made after this release entered aurora. bugs fixed between firefox 34 and firefox 35. this will not include any uplifts made after this release entered aurora. firefox 34 highlights new api: dev/panel enables you to extend the firefox developer tools. jpm beta released. "./my-file" introduced everywhere as an alias for require("sdk/self").data.url("my-file") added the ability to attach stylesheets to individual tabs. details github commits made between firefox 33 and firefox 34. ...
...lf").data.url("my-file") added the ability to attach stylesheets to individual tabs. details github commits made between firefox 33 and firefox 34. this will not include any uplifts made after this release entered aurora. bugs fixed between firefox 33 and firefox 34. this will not include any uplifts made after this release entered aurora. firefox 33 highlights added support for context menus in panels via a new option in the panel constructor. added tab.readystate. added a browserwindow parameter to sidebar.show() and sidebar.hide(), to control the window for which the sidebar will be shown or hidden. details github commits made between firefox 32 and firefox 33. this will not include any uplifts made after this release entered aurora. bugs fixed between firefox 32 and firefox...
... will not include any uplifts made after this release entered aurora. bugs fixed between firefox 29 and firefox 30. this will not include any uplifts made after this release entered aurora. firefox 29 highlights added new ui modules for australis: actionbutton, togglebutton, frame and toolbar. made the preferences branch for simple-prefs configurable. added predicatecontext to sdk/context-menu. deprecated widget in favor of the new ui modules. removed tab-browser, app-strings and api-utils.publicconstructor details github commits made between firefox 28 and firefox 29. this will not include any uplifts made after this release entered aurora. bugs fixed between firefox 28 and firefox 29. this will not include any uplifts made after this release entered aurora. firefox 28 highlig...

Extension Etiquette - Archive of obsolete content
this article describes best practices when making extensions, including how to be kind to your users. it assumes that you are already familiar with building an extension. user interface tools menu items using the tool menu option gives the author the maximum amount of choices. whether the extensions should go at the top, bottom, or somewhere in between on the tools menu, the author always has a choice. ideally, the location would be below the add-ons item, grouped with the other extension-related commands (menuitem:insertafter="javascriptconsole,devtoolsseparator"). sub-menus should be used for single extensions needing multiple menu items, and a tools menu item should not be created for options and preferences (for options and preferences, see the add-on manager). if possible, create a me...
...the location would be below the add-ons item, grouped with the other extension-related commands (menuitem:insertafter="javascriptconsole,devtoolsseparator"). sub-menus should be used for single extensions needing multiple menu items, and a tools menu item should not be created for options and preferences (for options and preferences, see the add-on manager). if possible, create a menu item in the menu where it is most applicable; for instance, a bookmark sharing extension should be called from the bookmarks menu. to maintain the default theme, avoid the use of an icon next to the menu items. other ui elements in general, toolbar items are very useful to end users because they can be removed or added to various toolbars as necessary. status bar items should only be added for extensions that n...
... focus don't steal focus. it's not your extension's job to take focus from the web content. if the user loads a website and they ask for focus, they should get it. overriding their request isn't very nice. ...

Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
the debugger can be a good way to learn about design methods. installing this is bundled with the mozilla suite and the current version of seamonkey, but it needs to be installed as an extension in firefox. see https://addons.mozilla.org/firefox/216/. install the extension in firefox directly from the above url and relaunch firefox. starting up select “javascript debugger” from the tools menu. targeting javascript for debugging. when venkman first launches, it can only debug the file currently open in your web browser. this is because a lot of javascript files can slow down the browser down if they’re opened for debugging, but you’ll need to lift this restriction in order to develop extensions. uncheck the “exclude browser files” menu item under the debug menu (figure 1). f...
...ck on quicknote.js to open it in source-code view (figure 2). fixme: figure 2: selecting source code inserting breakpoints now you’ll want to set some breakpoints. try inserting one within the quicknote_savenote function, around line 345 (figure 3). fixme: figure 3: inserting a breakpoint start debugger type in some text into the quicknote screen, and then select save current tab from the menu. this should halt the program at the spot where you inserted the breakpoint with venkman, and start the debugger. the local variables screen should always display variables and objects during step-by-step execution. with functions that include a lot of variables, this will be hard to read, so you can point out specific variables that you want to watch (figure 4). watched variables appear under ...
...ed rpncalc. first we’ll sketch out a simple interface for it (listing 1). save this as a file called calc.js. listing 1: calc.js (stage 1) function rpncalc() { } rpncalc.prototype = { init: function() { }, push: function(val) { }, plus: function() { }, pop: function() { } } implement the addition operation create test case begin by creating the test case. first, select the menu item tools:mozlab:open mozunit runner to bring up the mozunit window. select the menu item file:new, and save test_calc.js in the same directory as the file that is the test target. next, click the edit button to set up the “2 1+” test case (listing 2). note that in this file, the method names serve as the test names. in junit and similar packages, methods containing tests that start with te...

Tabbed browser - Archive of obsolete content
to select new tabs, and vice versa "window" new window "save" save to disk (with no filename hint!) openuilink( url, e, ignorebutton, ignorealt, allowkeywordfixup, postdata, referrerurl ) the following code will open a url in a new tab, an existing tab, or an existing window based on which mouse button was pressed and which hotkeys (ex: ctrl) are being held. ...
...( url, e, ignorebutton, ignorealt, allowkeywordfixup, postdata, referrerurl ) the following code will open a url in a new tab, an existing tab, or an existing window based on which mouse button was pressed and which hotkeys (ex: ctrl) are being held. the code given is for a menuitem, but will work equally well for other xul elements. this will only work in an overlay of browser.xul. ...
...iator); var recentwindow = wm.getmostrecentwindow("navigator:browser"); return recentwindow ? recentwindow.content.document.location : null; see also working with windows in chrome code. enumerating browsers to go through all browser in a tabbrowser, first get a reference to a browser's window. if your code is executed from a firefox browser.xul overlay (for example, it is a toolbar button or menu click handler), you can access the current window with the window pre-defined variable. however, if your code is executed from its own window (for example, a settings/options dialog), you can use nsiwindowmediator to get a browser's window. next, get the <tabbrowser/> element. you can get it with win.gbrowser, where win is the browser's window from the previous step. you can use simply gbrowser ...

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
a traditional dhtml ticker application and uses hidden iframes and javascript to provide updates inside the webpage's ticker headlines section. this sample was made using iframes to illustrate a possible implementation. an implementation can also use other transport technologies such as soap-based remote procedure calls, xmlhttprequest interfaces, or dom 3 load. the second example shows a tabbed menu that dynamically loads news headlines into the current web page. this implementation uses xmlhttprequest. extending traditional hypertext navigation the hypertext approach to developing web pages, in which developers format text layouts into pages and link those pages to related content, is analogous to a book or a magazine: readers view pages, go to other pages for more information, and view res...
...code could be modified to periodically reload the tickerdata.html. what is important is that new information can be dynamically loaded into the main web page's context. though the inner-browsing model is mostly appropriate for web applications, it also can be used to improve accessibility to information in traditional web pages. example using javascript's xmlhttprequest and dom interfaces: tabbed menu for headlines this example demonstrates an implementation using xmlhttprequest interfaces. both netscape 7 and recent versions of internet explorer provide xmlhttprequest interfaces that allow javascript to dynamically load an xml document given a data source url. in this case, the content that is updated on the page is a set of headlines for devedge articles. this example uses the actual xml dat...
...ousele=ele; } var previousele=null; </script> <style> .tab { position:relative;top:1px; border: 1px solid #dddddd; color:white; background-color:white; padding-left: 5px; border-bottom:white;padding-right: 5px; padding-top:3px; text-decoration:none;} .tab:hover { background-color:#ddeeff; } </style> </head> <body > <h2>latest headlines - inner-browsing example </h2> <p>click the tabbed menu to dynamically load the headlines into this web page.</p> <br /> <!-- ***** this code dynamically creates the tabbed menu if the browser has support to xmlhttprequest, since the mechanism used here is xmlhttprequest ***** --> <script type="text/javascript" language="javascript"> //// /// object detection // var xcomp=null; var testxmlhttprequest=false; try { xcomp = new x...

Finding the file to modify - Archive of obsolete content
now that we have a hackable mozilla, it's time to find the file we want to hack. mozilla's ui is divided into three layers: the structure, the style, and the behavior. the structure layer identifies the widgets (menus, buttons, etc.) and their position in the ui relative to each other, the style layer defines how the widgets look (size, color, style, etc.) and their overall position (alignment), and the behavior layer specifies how the widgets behave and how users can use them to accomplish their goals. mention the localization layer (note: these layers are not completely mutually exclusive. in particular, positioning information can be specified in both the structure layer and the style layer, and some behavior can be partly defined in the style layer.) we're going to add code to al...
...vior can be partly defined in the style layer.) we're going to add code to all three ui layers, starting with the structure layer. the structure layer consists of xul files. xul, which is short for xml-based user interface language (and is pronounced like "zool"), is an xml-based language specifically designed for describing application interfaces. it contains elements for all common ui widgets (menus, buttons, toolbars, etc.) and many sophisticated ones (trees, browsers, color pickers). each window and dialog box in mozilla is defined by a single xul file (in some cases other xul files called overlays contribute portions of another window's structure). to add a tinderbox status icon to mozilla, we need to find the xul file that defines the structure of the browser window. the best way to f...
...lays contribute portions of another window's structure). to add a tinderbox status icon to mozilla, we need to find the xul file that defines the structure of the browser window. the best way to find a xul file for a window is to use the dom inspector. the dom inspector is a tool bundled with mozilla that allows you to examine the dom of web pages and xul windows. to access it, go to the "tools" menu, select the "web development" submenu, then select the "dom inspector" item. the dom inspector will load in a new window. in the dom inspector window, go to the file menu, select the inspect a window submenu, then select the mozilla browser window item (named after the page currently loaded in the browser). the dom inspector will display the url of the xul file that defines the mozilla browser w...

Proxy UI - Archive of obsolete content
camino configured in os (networking preferences) (recently added - some support for reading os and account settings.)ui elements preferences panel overview the ui is based on selecting a proxy mode, then filling out any additional needed information in "related" ui. the "ok" button saves the preferences. ...
... ( ) socks v4 ( ) socks v5 "no proxy for:" discussed in detail elsewhere... but should be noted that if you cut and paste from ie, the semi-colons are automatically converted to commas when you save changes (ff, tb, sm). automatic proxy configuration url supports a url (which is checked via urifixup) and a reload button. offline|online "plug" location status bar on the right side. right-click a menu is displayed that has the following items: online (proxy: none) online (proxy: auto discover) online (proxy: auto url) online (proxy: manual) --- proxy configuration... <h7 name="details">details</h7> the menu should display the current proxy mode with a dot. the modes that can have an empty configuration (auto url and manual) will be disabled if the prefs are blank. selecting an enabled item set...
...splayed that has the following items: online (proxy: none) online (proxy: auto discover) online (proxy: auto url) online (proxy: manual) --- proxy configuration... <h7 name="details">details</h7> the menu should display the current proxy mode with a dot. the modes that can have an empty configuration (auto url and manual) will be disabled if the prefs are blank. selecting an enabled item sets the menu selection and the proxy mode (network.proxy.type) selecting a disabled item is not allowed. selecting "proxy configuration..." opens the preferences panel to "advanced > proxies" (tbdescribed: changing the prefs values). unfiled bug: changing proxy mode does not update the menu. mouseover when online, the tooltip will include the current proxy mode: code http://mxr.mozilla.org/seamonkey/sou...ity...

getFolder - Archive of obsolete content
be one of the following (info is based on mozilla 1.7 stable branch, might also work in other versions): "chrome" "components" "current user" "defaults" "file:///" "os drive" "plugins" "preferences" "profile" "program" "temporary" "mac apple menu" "mac control panel" "mac desktop" "mac documents" "mac extension" "mac fonts" "mac shutdown" "mac startup" "mac system" "mac trash" "mac preferences" "macosx default download" "macosx home" "macosx internet sites" "macosx local applications"...
...it must be in file: url format minus the "file:///" part. for example, mydir = getfolder("file:///", "c|/mysoftco/somedir"); note that forward slashes are used, regardless of the platform...
...it must be in file: url format minus the "file:///" part. for example, mydir = getfolder("file:///", "c|/mysoftco/somedir"); note that forward slashes are used, regardless of the platform. the folders whose names s...

button.type - Archive of obsolete content
« xul reference home type type: one of the values below the type of button. if this attribute is not present, a normal button is created. leave the attribute out for a normal button. checkbox this type of button can be in two states. the user can click the button to switch between the states. this is not the same as a checkbox because it looks like a button. ...
...e type type: one of the values below the type of button. if this attribute is not present, a normal button is created. leave the attribute out for a normal button. checkbox this type of button can be in two states. the user can click the button to switch between the states. this is not the same as a checkbox because it looks like a button. menu set the type attribute to the value menu to create a button with a menu popup. ...
...of button. if this attribute is not present, a normal button is created. leave the attribute out for a normal button. checkbox this type of button can be in two states. the user can click the button to switch between the states. this is not the same as a checkbox because it looks like a button. menu set the type attribute to the value menu to create a button with a menu popup. place a menupopup element inside the button in this case. the user may click anywhere on the button to open and close the menu. menu-button you can also use the value menu-button to create a button with a menu. unlike the menu type, this type requires the user to press the arrow to open the menu, but a different command may be invoked when the main part of the button is pressed. panel similar to the m...

toolbarbutton.type - Archive of obsolete content
« xul reference home type type: string the type of button. if this attribute is not present, a normal button is created. you can set this attribute to the value menu to create a button with a menu popup. this will typically cause the button to be displayed differently. menu: set the type attribute to the value menu to create a button with a menu popup. place a menupopup element inside the button in this case. the user may click anywhere on the button to open and close the menu. menu-button: you can also use the value menu-button to create a button with a menu. unlike the menu type, this type requires the user to press the arrow to open the menu, but a different command may be invoked when the main part of the button is pressed. checkbox: use this type to create a toggle but...
...and may be invoked when the main part of the button is pressed. ...
... when the main part of the button is pressed. ...

Dynamically modifying XUL-based user interface - Archive of obsolete content
moves all children of an element with id=someelement from the current document, by calling removechild() method to remove the first child, until there are no children remaining. note, that haschildnodes() and firstchild are also part of the dom api. var element = document.getelementbyid("someelement"); while(element.haschildnodes()){ element.removechild(element.firstchild); } inserting menu items to a menu this example adds two new menu items to a <menupopup>: to the start and to the end of it. it uses document.createelementns() method to create the items, and insertbefore() with appendchild() to insert the created xml elements within the document. note: document.createelementns() creates an element, but does not put it anywhere in the document. you need to use other dom methods,...
...ents within the document. note: document.createelementns() creates an element, but does not put it anywhere in the document. you need to use other dom methods, such as appendchild() to insert the newly created element in the document. appendchild() appends the node after all other nodes, while insertbefore() inserts the node before the node referenced by its second parameter. ...
...r dom methods, such as appendchild() to insert the newly created element in the document. appendchild() appends the node after all other nodes, while insertbefore() inserts the node before the node referenced by its second parameter. function createmenuitem(alabel) { const xul_ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var item = document.createelementns(xul_ns, "menuitem"); // create a new xul menuitem item.setattribute("label", alabel); return item; } var popup = document.getelementbyid("mypopup"); // a <menupopup> element var first = createmenuitem("first item"); var last = createmenuitem("last item"); popup.insertbefore(first, popup.firstchild); popup.appendchild(last); you can also use appendchild() and insertbefore() to move existing elements. for e...

command - Archive of obsolete content
command elements can be activated by any of their observing elements being activated. ...
... the event was fired. false otherwise. ...
...key read only boolean true if the shift key was down when the event was fired. false otherwise. ...

appendNotification - Archive of obsolete content
ton description as passed to appendnotification. the element which was the target of the button press event. if the return value from this function is not true, then the notification is closed. the notification is also not closed if an error is thrown. label - the label to appear on the button popup - the id of a popup for the button. if null, the button is not a button popup (e.g. a menu). the type property must also be set to "menu", or "menu-button". isdefault - if true, this is the default button. there can be only one default button. if no button has this set, the first button in the array is the default. type - a string. valid values are "menu-button" and "menu" which must be set if the button is to provide a popup via the popup property. notification box events ...
... popup: null }; buttons.push(button2); //appendnotification( label , value , image (...
...g: }; function testnotificationcallback(reason) { window.alert("reason is: " + reason); }; let notifybox = gbrowser.getnotificationbox(); let buttons = []; let button1 = { isdefault: false, accesskey: "1", label: "button 1", callback: testnotificationbutton1callback, type: "", // if a popup, then must be: "menu-button" or "menu". popup: null }; buttons.push(button1); let button2 = { isdefault: true, accesskey: "2", label: "button 2", callback: testnotificationbutton2callback, type: "", // if a popup, then must be: "menu-button" or "menu". popup: null }; buttons.push(button2); //appendnotification( label , value , image (url) , priority ,...

parentContainer - Archive of obsolete content
...
... ...
... ...

Adding Event Handlers - Archive of obsolete content
dialog so far looks quite good. we haven't cleaned it up much but we have created a simple user interface easily. next, we will show how to add scripts to it. using scripts to make the find files dialog functional, we need to add some scripts which will execute when the user interacts with the dialog. we would want to add a script to handle the find button, the cancel button and to handle each menu command. we write this using javascript functions much in the same way as html. you can use the script element to include scripts in xul files. you can embed the script code directly in the xul file in between the opening and closing script tags but it is much better to include code in a separate file as the xul window will load slightly faster. the src attribute is used to link in an external s...
...s inside it, whereas an event attached to a button will only receive events pertaining to that button. this is useful if there are several elements you would like to handle using the same or similar code. the most common event used is the 'command' event. the command event is fired when a user activates an element, for example by pressing a button, changing a checkbox or selecting an item from a menu. the command event is a useful event since it automatically handles different ways of activating the element. for example, the command event will occur regardless of whether the user uses the mouse to click a button, or presses the enter key. there are two ways to attach an event listener to an element. first, by using an attribute with a script as its value. second, by calling an element's adde...
... our find files example a command handler can be placed on the find and cancel buttons in the find files dialog. pressing the find button should start the search. because we aren't going to implement this part yet, we'll leave it out for now. however, pressing the cancel button should close the window. the code below shows how to do this. while we're at it, let's add the same code to the close menu item. <menuitem label="close" accesskey="c" oncommand="window.close();"/> ... <button id="cancel-button" label="cancel" oncommand="window.close();"/> two handlers have been added here. the oncommand attribute was added to the close menu item. by using this handler, the user will be able to close the window by clicking the menu item with the mouse or by selecting it with the keyboard. the...

Broadcasters and Observers - Archive of obsolete content
ribute, the label on the button and checkbox will adjust accordingly. we saw something like this in a previous section where the disabled attribute was adjusted once and propagated to other elements. this attribute forwarding is quite useful for a number of purposes. for instance, let's say that we want the back action in a browser to be disabled. we would need to disable the back command on the menu, the back button on the toolbar, the keyboard shortcut (alt+left for example) and any back commands on popup menus. although we could write a script to do this, it is quite tedious. it also has the disadvantage that we would need to know all of the places where a back action could be. if someone added a new back button using an extension, it wouldn't be handled. it is convenient to simply disable...
...tribute forwarding in the same way that commands do. they work the same as commands except that a command is used for actions, while a broadcaster is instead used for holding state information. for example, a command would be used for an action such as back, cut or delete. a broadcaster would be used to hold, for instance, a flag to indicate whether the user was online or not. in the former case, menu items and toolbar buttons would need to be disabled when there was no page to go back to, or no text to cut or delete. in the latter case, various user interface elements might need to update when the user switches from offline mode to online mode. the simplest broadcaster is shown below. you should always use an id attribute so that it can be referred to by other elements. <broadcasterset> <...
...ce the main reason for using broadcasters is to have attributes forwarded to multiple places. you should only use broadcasters when you need multiple elements that observe an attribute. below, some additional observers are defined: <broadcaster id="offline_command" label="offline" accesskey="f"/> <keyset> <key id="goonline_key" observes="offline_command" modifiers="accel" key="o"/> </keyset> <menuitem id="offline_menuitem" observes="offline_command"/> <toolbarbutton id="offline_toolbarbutton" observes="offline_command"/> in this example, both the label and the accesskey will be forwarded from the broadcaster to the key, menu item and the toolbar button. the key won't use any of the received attributes for anything, but it will be disabled when the broadcaster is disabled. you can use a ...

Creating a Window - Archive of obsolete content
tion. xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> this line declares the namespace for xul, which you should put on the window element to indicate that all of its children are xul. note that this url is never actually downloaded. mozilla will recognize this url internally. <!-- other elements go here --> replace this comment block with other elements (the buttons, menus and other user interface components) to appear in the window. we'll add some of these in the next set of sections. </window> and finally, we need to close the window tag at the end of the file. opening a window in order to open a xul window, there are several methods that can be used. if you are only in the development stage, you can just type the url (whether a chrome:, file: or other url...
...st, then it needs to be created and set to |true|. the correct way, of course, is to open the window using javascript. no new syntax is necessary as you can use the window.open() function as one can do for html documents. however, one additional flag, called 'chrome' is necessary to indicate to the browser that this is a chrome document to open. this will open the window without the toolbars and menus and so forth that a normal browser window has. the syntax is described below: window.open(url,windowname,flags); where the flags contains the flag "chrome" as in this example window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300"); if you are using firefox, try below: window.open("chrome://browser/content/places/places.xul", "bmarks", "chrome,width...
...pen the bookmarks window: mozilla -chrome chrome://communicator/content/bookmarks/bookmarksmanager.xul if you are using firefox, try below. firefox -chrome chrome://browser/content/places/places.xul the '-chrome' argument doesn't give the file any additional privileges. instead, it causes the specified file to open as a top-level window without any browser chrome, such as the address field or menu. only chrome urls have additional privileges. the extension developer's extension contains an xul editor that allows you to type in xul code and see the results in real-time from within mozilla! troubleshooting if the xul window fails to show up on the desktop but has an icon on the desktop tool bar, check the xml-stylesheet declaration. make sure that you have included the stylesheet correc...

Modifying the Default Skin - Archive of obsolete content
irectory called 'chrome' inside your user profile directory, you can override settings without changing the archives themselves. this directory should be created when you create a profile and some examples placed there. the file 'usercontent.css' customizes web pages, whereas 'userchrome.css' customizes chrome files. for example, by adding the following to the end of the file, you can change all menubar elements to have a red background. menubar { background-color: red; } if you open any firefox window after making this change, the menu bars will be red. because this change was made to the user style sheet, it affects all windows. this means that the browser menu bar, the bookmarks menu bar and even the find files menu bar will be red. skin packages to have the change affect only one w...
...the style sheets refer to the images. ...
...the style sheets refer to the images. you should avoid putting references to images directly in xul files if you want your content to be skinnable. ...

Templates - Archive of obsolete content
e'll find out how to populate elements with data. populating elements xul provides a method in which we create elements from data supplied by rdf, either from an rdf file or from an internal datasource. numerous datasources are provided with mozilla such as bookmarks, history and mail messages. more details on these will be provided in the later section. usually, elements such as treeitems and menuitems will be populated with data. however, you can use other elements if you want although they are more useful for specialized cases. nevertheless, we'll start with these other elements because trees and menus require more code. to allow the creation of elements based on rdf data, you need to provide a simple template which will be duplicated for each element that is created. essentially, you p...
...ter explained with an example. let's take a simple example where we want to create a button for each top-level bookmark. mozilla provides a bookmarks datasource so it can be used to get the data. this example will only get the top-level bookmarks (or bookmark folders) as we're going to create buttons. for child bookmarks, we would need to use an element that displays a hierarchy such as a tree or menu. this example and any others that reference internal rdf datasources will only work if you load them from a chrome url. for security reasons, mozilla doesn't allow access to them from other sources. to view this example, you will need to create a chrome package and load the file from there (you can do this easily, see manifest files). you can then enter the chrome url into the browser url fie...
...of data, this is much more efficient. creating an element for every cell would be too costly. however, the tradeoff is that trees may only display text, and, since no elements are created, you can't use css properties to style tree cells in the same way. the tree builder is only used for trees. other elements use only the content builder. this isn't a problem though, since other elements such as menus wouldn't be expected to display too many items. it's also possible to use the content builder for trees as well, and a treeitem element and related elements will be created for each row. rules in the image of the earlier example, you may have noticed that the third button is simply a button with hyphens on it. this is a separator in the bookmark list. in the way that we have been using it, the...

XUL Reference - Archive of obsolete content
bbox binding 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 s...
...ton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip tree treecell treechildren treecol treecols treeitem treerow treeseparator triple vbox where window wizard wizardpage categorical list of all xul elements « xul reference « windows window wizard wizardpage titlebar window structure --- menus and popups --- toolbars toolbar toolbarbutton toolbargrippy toolbaritem toolbarpallete toolbarseperator toolbarspring tabs and grouping tab tabbox tabpanel tabpanels tabs controls --- text and images label caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists ...
... and images 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 ...

XUL accessibility tool - Archive of obsolete content
itytool.xpi]. future versions of the extension will be available from addons.mozilla.org. the version currently on xulplanet is compatible with the following xul applications: firefox 1.5+ thunderbird 3.0a+ recent sunbird builds recent songbird builds. it probably also works on seamonkey, but i haven't verified this. use to launch the tool after installation, look for an entry in the tools menu of the host application, or hit ctrl+alt+shift+f12. once the tool window has loaded, select either a local file, web url, or currently open window from the file menu to generate a xul report for that document. be aware that the report might take a little while to be ready depending on the complexity of the application being analyzed and the speed of your machine. future work the following thing...
... aware that the report might take a little while to be ready depending on the complexity of the application being analyzed and the speed of your machine. future work the following things have been suggested or are planned for a future version of the tool: new tests: (aaronlev) warning: hardcoded color and pixel sizings (aaronlev) error: duplicate accesskey in a dialog (already have this for menus) (aaronlev) error: form control without accesskey (aaronlev) warning: accesskey as lowercase letter with descender (underlined g,j,y,q,p are hard to read, not recommended) (aaronandy) list of things to check manually, such as a list oftrees in the document (make sure they have accessible column picker equivs) or a list of toolbarbuttons (make sure they have accessible alternatives). new fe...
...re opened. (aaronandy) highlight or blink source element in original xul app upon click of referencing line in report. (aaronlev) compatibility with more xul applications. (aaronandy) maybe an online tool to automatically generate a xul a11y tool compatible with a user-specified xul app. (aaronandy) link report sections to relevant part of xul a11y guidelines. (aaronandy) enable tabs, context menu, and other browser extras in report window. (aaronandy) xul runner version that can run from the command line, check a text file, and output the results somewhere. known bugs: test for lowercase i or l as accesskey (sometimes?) flags upppercase i and l too. possible false positives in some of the other tests processing is slower than we would like. ideas for further work on xul a11y so...

The Implementation of the Application Object Model - Archive of obsolete content
its name and replaced it with an x, and upon doing so, transformed into something far worse than a demon. it became a markup language. xul stands for "extensible user interface language". it is an xml-based language for describing the contents of windows and dialogs. xul has language constructs for all of the typical dialog controls, as well as for widgets like toolbars, trees, progress bars, and menus. where html describes the contents of a single document, xul describes the contents of an entire window (which could itself contain multiple html documents). the html content tree structure for a single document is represented as a set of objects that can be accessed and manipulated. this is referred to as the dom (document object model). in a similar fashion, xul's content tree for a single win...
...ginal natural order of the items (e.g., in the case of bookmarks) would be lost. when performing the sort, it would be advantageous to be able to form the new sorted content model without losing or disrupting the natural sort. statement #3 the fact that the same hunk of aggregate data can be represented as any number of different content models (e.g., sorted, or as a toolbar, a tree view, or a menu) implies a need for a common intermediate representation for aggregated pluggable content that exists on top of the pluggable data sources and that exists underneath the content tree nodes that implement the interfaces through which the data is actually exposed. let's go back to the sorting problem and consider a hypothetical situation. suppose we decide we want to cache the sort relationship on...
...rialize the xul and write over the original file (thus allowing local changes to a local file to be reflected right in the xul). referencing local data: the localdata attribute a tag that references local rdf data does so by using the localdata attribute, which gives the uri of the local data that should be merged in with the xul content tree. examples of tags that can reference local data are menu, menuitem, menubar, toolbox, toolbar, treebody, and treeitem. todo: outline the naming scheme for local data. give an example once i actually know what the naming scheme will be. talk to john mcmullen about 5.0 preferences and figure out where localdata will need to be used (likely on every form element control) talk to steve elmer. it's likely that this might be the desirable solution for bu...

action - Archive of obsolete content
ble will be a reference to data within the datasource, determined from the query. if the same variable appears multiple times, it will have the same value in each place. for more information, see actions. ...
... will have the same value in each place. for more information, see actions. ...
...minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, disp...

assign - Archive of obsolete content
pace prefixes declared on the element may be used within the expression. var type: string for the xul assign attribute, this is the variable to assign the value to; otherwise it's a reference to a template variable such as "?name". ...
...this is the variable to assign the value to; otherwise it's a reference to a template variable such as "?name". ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

bbox - Archive of obsolete content
e home [ examples | attributes | properties | methods | related ] a horizontal box that is baseline aligned. it is equivalent to using an hbox element with an align attribute set to baseline. ...
...valent to using an hbox element with an align attribute set to baseline. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

broadcasterset - Archive of obsolete content
butes | properties | methods | related ] a container element for broadcaster elements. the broadcasterset and its descendants are not displayed. more information is available in the xul tutorial. ...
...s are not displayed. more information is available in the xul tutorial. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

caption - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the l...
... tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. ...
... image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. properties accesskey type: character gets and sets the value of the accesskey attribute. ...

checkbox - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to ...
...this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. src type: uri set this to an uri pointing to an image to appear in the checkbox. if this attribute is left out, no image appears. you can have both an image and a label. label type: string the label that will appear on the element. if this is left out, no text appears. f...
..., is normally preferred to use of the attribute, as it may need to update additional state. src type: uri set this to an uri pointing to an image to appear in the checkbox. if this attribute is left out, no image appears. you can have both an image and a label. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a prefwindow. more information is available in the preferences system article. tabindex type: integer the tab order of the element. the t...

column - Archive of obsolete content
lumn. it is common to use columns only to define width and flexibility for the grid column and not place elements directly inside the column. more information is available in the xul tutorial. example see grid for an example. ...
...e the column. more information is available in the xul tutorial. example see grid for an example. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

columns - Archive of obsolete content
side a columns element occupy the full height of the grid and are placed in their corresponding positions between the columns. more information about columns is available in the xul tutorial. example see grid for an example. ...
... more information about columns is available in the xul tutorial. example see grid for an example. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

conditions - Archive of obsolete content
ource. if all variables can be replaced, the rule matched. this element is used with firefox 2/mozilla 1.8 and earlier instead of the query element. more information is available in the xul tutorial. ...
...f the query element. more information is available in the xul tutorial. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

dialogheader - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } description type: string descriptive text to appear in addition to the dialog title. title type: string the text to appear in the title bar of the window. properties inherited properties align, , allowevents, , boxobj...
...u want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } description type: string descriptive text to appear in addition to the dialog title. title type: string the text to appear in the title bar of the window. ...
...cription type: string descriptive text to appear in addition to the dialog title. title type: string the text to appear in the title bar of the window. ...

grippy - Archive of obsolete content
properties | methods | related ] an element that may be used inside a splitter which can be used to collapse a sibling element of the splitter. more information is available in the xul tutorial. ...
...ent of the splitter. more information is available in the xul tutorial. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

hbox - Archive of obsolete content
xcept it defaults to horizontal orientation. more information is available in the xul tutorial. ...
... right --> <hbox> <spacer flex="1"/> <button label="connect"/> <button label="ping"/> </hbox> 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, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

label - Archive of obsolete content
the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to ...
...this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. href type: string defines a url to open when this element is clicked. requires the class attribute to include text-link. value type: string the text to be used for the label. properties accesskey type: character gets and sets the value of the ...
... control type: element id gets and sets the value of the control attribute. crop type: string gets and sets the value of the crop attribute. disabled type: boolean gets and sets the value of the disabled attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), gete...

listbox - Archive of obsolete content
this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. disablekeynavigation type: boolean if this attribute is not used, the user can navigate to specific items within the element by pressing keys corresponding to letters in the item's label. this is done incrementally, so typing more letters with select more specific items. this featur...
... so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accessibletype type: integer a value indicating the type of accessibility object for the element. currentindex t...
...he list. seltype type: string gets and sets the value of the seltype attribute. suppressonselect type: boolean gets and sets the value of the suppressonselect attribute. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), gete...

notification - Archive of obsolete content
examples <notification label="this is a warning"/> attributes image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. persistence type: integer the persistence may be set to a non-zero value so that the notificationbox's removetransientnotifications method does not remove them. this may be used to close a set of notifications as a group without affecting other notifications. pri...
... so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accessibletype type: integer a value indicating the type of accessibility object for the element. image ...
...value of the label attribute. persistence type: integer gets and sets the value of the persistence attribute. priority type: string gets and sets the value of the priority attribute. type type: string gets and sets the value of the type attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), gete...

observes - Archive of obsolete content
event is called on the observer. use the value * to observe all attribute of the broadcasters. the id, ref, and persist attributes are not observed. element type: id the id of the broadcaster element that the observer is observing. ...
...s are not observed. element type: id the id of the broadcaster element that the observer is observing. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

page - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] similar to a window, except it should be used for xul files that are to be loaded into an iframe. ...
...pt it should be used for xul files that are to be loaded into an iframe. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

preferences - Archive of obsolete content
attribute nsiprefbranch rootbranch; the root prefs branch. attribute nsiprefbranch defaultbranch; the root branch of the tree with default values. attribute nsiprefbranch2 rootbranchinternal; the root prefs branch (nsiprefbranch2). ...
...ee with default values. attribute nsiprefbranch2 rootbranchinternal; the root prefs branch (nsiprefbranch2). ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods void firechangedevent(in domelement preference); creates and dispatches a changed (non-bubbling) event to t...

query - Archive of obsolete content
t as text. attributes expr examples (example needed) attributes expr type: string for xml queries, an xpath expression which returns results. any namespace prefixes declared on the element may be used within the expression. ...
...ession which returns results. any namespace prefixes declared on the element may be used within the expression. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

queryset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container for query elements when more than one query is used. for more information, see multiple queries. ...
...er for query elements when more than one query is used. for more information, see multiple queries. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

radiogroup - Archive of obsolete content
this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. focused type: boolean this attribute is true if the element is focused. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a prefwindow. more information is available in the preferences system article...
... so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accessibletype type: integer a value indicating the type of accessibility object for the element. disabled...
...ainer (i.e. the listbox, richlistbox, radiogroup, etc., not the list item that was selected) when it is changed either via this property, the selectedindex property, or changed by the user. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), gete...

resizer - Archive of obsolete content
that appears in the bottom corner of the window, used for resizing the window. as some platforms provide this resizing grip automatically, this type of resizer element will be hidden and ensure that the window does not get an extra resizer. ...
...matically, this type of resizer element will be hidden and ensure that the window does not get an extra resizer. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

richlistbox - Archive of obsolete content
this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. disablekeynavigation type: boolean if this attribute is not used, the user can navigate to specific items within the element by pressing keys corresponding to letters in the item's label. this is done incrementally, so typing more letters with select more specific items. this featu...
... so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accessibletype type: integer a value indicating the type of accessibility object for the element. currentindex ...
...ist. seltype type: string gets and sets the value of the seltype attribute. suppressonselect type: boolean gets and sets the value of the suppressonselect attribute. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), gete...

richlistitem - Archive of obsolete content
this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. searchlabel type: string text used for 'find-as-you-type' (fayt) searching. in situations where the search text is ambiguous or missing, searchlabel can be used to give context to fayt. if searchlabel is not present, fayt falls back to use the label property. selected type...
... so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accessible type: nsiaccessible returns the accessibility object for the element. control type: eleme...
...ext from any child label elements. does not support setting label values. use the child elements directly to set label text. searchlabel type: string gets and sets the value of the searchlabel attribute. selected type: boolean this property's value is true if this element is selected, or false if it is not. this property is read only. this property is available for menuitem and menuseparator elements in firefox 3. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods in...

row - Archive of obsolete content
elements determines the number of columns in each row, which may be smaller or larger than the number of column elements defined in the grid. more information is available in the xul tutorial. example see grid for an example. ...
... in the grid. more information is available in the xul tutorial. example see grid for an example. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

rows - Archive of obsolete content
ated elements placed inside a rows element occupy the full width of the grid and are placed in their corresponding positions between the rows. more information is available in the xul tutorial. example see grid for an example. ...
...een the rows. more information is available in the xul tutorial. example see grid for an example. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

scale - Archive of obsolete content
this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged). the default value is 1. min type: integer the minimum valu...
... so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user editable menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties disabled type: boolean gets and sets the value of the disabled attribute. increment type: integer ...
... max type: integer gets and sets the value of the max attribute. pageincrement type: integer gets and sets the value of the pageincrement attribute. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), gete...

script - Archive of obsolete content
ipt will always use the latest available javascript version. if you omit this attribute, the default (and older) javascript version is used (like you get when including a javascript file from web content without specifying a version number). ...
...on is used (like you get when including a javascript file from web content without specifying a version number). ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

scrollbox - Archive of obsolete content
box_element.boxobject.queryinterface( components.interfaces.nsiscrollboxobject); xpcominterface.ensureelementisvisible(child_element_to_make_visible); see the nsiscrollboxobject api for other scroll-related methods. ...
...child_element_to_make_visible); see the nsiscrollboxobject api for other scroll-related methods. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

scrollcorner - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used for the small box where the horizontal and vertical scrollbars meet. ...
...sed for the small box where the horizontal and vertical scrollbars meet. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

spacer - Archive of obsolete content
t occupy any space. if you want a small gap, consider using a separator instead. more information is available in the xul tutorial. ...
...al. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

spinbuttons - Archive of obsolete content
separate elements, but are used in combination with other elements to create a control that can be increased and decreased. for instance, spinbuttons are used for the number type textbox, and with the timepicker and datepicker. ...
... instance, spinbuttons are used for the number type textbox, and with the timepicker and datepicker. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

stack - Archive of obsolete content
the resulting width of the top-most hbox will be 400px (600px - 200px - 0) : <stack width="600"> <hbox flex="1"> <!-- content --> </hbox> <hbox left="0" right="200" > <!-- some content here. ...
...ent --> </hbox> <hbox left="0" right="200" > <!-- some content here. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

stringbundleset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container for stringbundle elements. ...
...perties | methods | related ] a container for stringbundle elements. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

tabpanel - Archive of obsolete content
methods | related ] a individual panel in a tabpanels element. this element is optional and you may just use any other container in place of it. more information is available in the xul tutorial. ...
...iner in place of it. more information is available in the xul tutorial. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

template - Archive of obsolete content
e's first rule is used. member type: string may optionally be set to the variable to use as the member variable. if not specified, the variable specified in the uri attribute in the action body of the template's first rule is used. ...
...specified, the variable specified in the uri attribute in the action body of the template's first rule is used. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

textnode - Archive of obsolete content
instead of in attributes. this element does nothing outside of a template. attributes value examples (example needed) attributes value type: uri the text value to display. this value should be an rdf property (predicate). ...
...tributes value type: uri the text value to display. this value should be an rdf property (predicate). ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

titlebar - Archive of obsolete content
oz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); margin: 8px 12px 16px;"/> </window> it can be opened from the error console like this: open("file:///users/markus/sites/hudwindow.xul", "", "chrome=1, titlebar=0") 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, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width...
..., position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width note: the allowevents attribute did not work for title bars prior to firefox 3. ...
...atustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width note: the allowevents attribute did not work for title bars prior to firefox 3. ...

toolbarset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only this element is used as a container for custom toolbars, which are added in the custom toolbar dialog. ...
...container for custom toolbars, which are added in the custom toolbar dialog. ...
... minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispa...

treechildren - Archive of obsolete content
nd attributes alternatingbackground obsolete since gecko 2.0 type: boolean if true, the background of the tree's rows will alternate between two colors. you can use the :-moz-tree-row css style to do this instead. ...
...the tree's rows will alternate between two colors. you can use the :-moz-tree-row css style to do this instead. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

treeitem - Archive of obsolete content
to true if the element is a container that contains no children. this will be set by the template builder as needed. label tipo: string (concatenación de caracteres) para un árbol tree con columnas simples, la etiqueta puede ser colocada directamnete sobre el elemeto "treeitem" sin la necesidad de una fila "row" y un elemento "treeitem" dentro. open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open. the open attribute is not present if the menu is closed. uri type: string for template-generated content, the attribute should be placed on the element where content generation should begin. thus, it should be placed on an element that is a descendant of a template. the value should be set to rdf:*. elements that ...
...gin. thus, it should be placed on an element that is a descendant of a template. the value should be set to rdf:*. elements that appear inside the element with the attribute will be repeated for each node in the rdf datasource. elements outside will appear only once. ...
...f:*. elements that appear inside the element with the attribute will be repeated for each node in the rdf datasource. elements outside will appear only once. ...

treerow - Archive of obsolete content
butes properties examples (example needed) attributes properties type: space-separated list of property names sets the properties of the element, which can be used to style the element. for more information, see styling a tree. ...
...he properties of the element, which can be used to style the element. for more information, see styling a tree. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

treeseparator - Archive of obsolete content
butes properties examples (example needed) attributes properties type: space-separated list of property names sets the properties of the element, which can be used to style the element. for more information, see styling a tree. ...
...he properties of the element, which can be used to style the element. for more information, see styling a tree. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

triple - Archive of obsolete content
, or an rdf literal value. predicate type: uri the predicate or property to match. this must be a uri of the property. subject type: string the subject of the element. it can be a variable reference or an rdf resource uri. ...
... subject type: string the subject of the element. it can be a variable reference or an rdf resource uri. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

vbox - Archive of obsolete content
element, except it defaults to vertical orientation. more information is available in the xul tutorial. ...
...els at bottom --> <vbox> <spacer flex="1"/> <label value="one"/> <label value="two"/> </vbox> 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, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

where - Archive of obsolete content
th the value of subject must end with the value contains the value of subject must contain the value as a substring subject type: string the variable or string to compare. value type: string the value to compare. ...
... subject type: string the variable or string to compare. value type: string the value to compare. ...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

wizardpage - Archive of obsolete content
be placed inside the wizardpage element. more information is available in the xul tutorial. attributes description, label, next, pageid properties next, pageid attributes description type: string descriptive text to appear in addition to the dialog title. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. next type: id set to the pageid of the next wizardpage after this one. when set, the page with this pageid is displayed when the next button is pressed. this can be used to create wizards that do not have a linear sequence. if one of the pages has a next attribute, all of ...
... page. pageid type: string wizardpage id this attribute should be set to a string that identifies the page's identifer in the wizard. this is used with the next attribute. the wizard always starts with the wizardpage that appears first in the wizard child list. ...
...page's identifer in the wizard. this is used with the next attribute. the wizard always starts with the wizardpage that appears first in the wizard child list. ...

Getting started with XULRunner - Archive of obsolete content
llow only one instance at a time. the toolkit preferences are described in further detail in xulrunner:specifying startup chrome window. the debugging preferences are discussed in debugging a xulrunner application step 7: create some xul finally, we need to create a simple xul window, which is described in the file main.xul. nothing fancy here, just the minimum we need to make a window. no menus or anything. main.xul: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="main" title="my app" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://myapp/content/main.js"/> <caption label="hello world"/> <separator/> <button label="more >>" o...
...-app xulrunner commandline flag. installing the application creates an os x application bundle: /library/frameworks/xul.framework/xulrunner-bin --install-app /<path>/<to>/myapp.zip once installed, you can run the application: /library/frameworks/xul.framework/xulrunner-bin "/applications/finkle/testapp.app/contents/resources/application.ini" you may run it without installing (but with the menu bar and dock icon missing) in os x by typing: /library/frameworks/xul.framework/xulrunner-bin "/<full path>/testapp/application.ini" note: the full path is required or a "error: couldn't parse application.ini."-message will be returned. this might also be simplified using a very simple shell script (i call mine "run.sh"): #!/bin/sh /library/frameworks/xul.framework/xulrunner-bin `pwd`/appl...
...lay here). before you get too far into things you might want to read the xulrunner tips article. ...

MacFAQ - Archive of obsolete content
copy of your application in /applications/(vendor)/(name) , where (vendor) is the vendor field in your application.ini and (name) is the name field. opening your application for ordinary work, you can just navigate via finder to /applications/(vendor)/(name).app and open the application. ...
...s the vendor field in your application.ini and (name) is the name field. opening your application for ordinary work, you can just navigate via finder to /applications/(vendor)/(name).app and open the application. ...
...pening your application for ordinary work, you can just navigate via finder to /applications/(vendor)/(name).app and open the application. for command-line work, you would call on: /applications/(vendor)/(name).app/contents/macos/xulrunner ui notes menus to enable your application quit command to work with the application menu (the one to the right of the blue apple), you need to give your quit menu item an id of "menu_filequititem". to enable the mac "about" menu make sure that you use "aboutname" as the id for your menu item to enable the mac "preferences" menu make sure that you use "menu_preferences" as the id for your options/preferences menu item toolbars mac windows have a small "jelly bean" button in the top right corner. this button is used to show/hide the toolbar. the toolkit w...

-moz-window-shadow - Archive of obsolete content
css property to provide a way to turn off unwanted shadows. initial valuedefaultapplies toall elements that create native windows, e.g. <window>, <panel>inheritednocomputed valueas specifiedanimation typediscrete syntax the -moz-window-shadow property is specified as one of the keyword values listed below. ...
...l valuedefaultapplies toall elements that create native windows, e.g. <window>, <panel>inheritednocomputed valueas specifiedanimation typediscrete syntax the -moz-window-shadow property is specified as one of the keyword values listed below. values default the window will have a shadow with the default window shadow style. ...
...elow. values default the window will have a shadow with the default window shadow style. menu the window will have the shadow style that's appropriate for menus. tooltip the window will have the shadow style that's appropriate for tooltips. sheet the window will have the shadow style that's appropriate for sheet windows. none the window won't have a shadow. ...

:-moz-system-metric() - Archive of obsolete content
this page was auto-generated because a user created a sub-page to this page. note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. ...
...-generated because a user created a sub-page to this page. note: since firefox 58, this pseudo-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. ...
...o-class is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. ...

WAI-ARIA basics - Learn web development
av> element — "navigation 2 items" (it contains a list and a form). on the <main> element — "main 2 items" (it contains an article and an aside). on the <aside> element — "complementary 2 items" (it contains a heading and a list). on the search form input — "search query, insertion at beginning of text". on the <footer> element — "footer 1 item". ...
...t — "main 2 items" (it contains an article and an aside). on the <aside> element — "complementary 2 items" (it contains a heading and a list). on the search form input — "search query, insertion at beginning of text". on the <footer> element — "footer 1 item". if you go to voiceover's landmarks menu (accessed using voiceover key + u and then using the cursor keys to cycle through the menu choices), you'll see that most of the elements are nicely listed so they can be accessed quickly. however, we could do better here. the search form is a really important landmark that people will want to find, but it is not listed in the landmarks menu or treated like a notable landmark, beyond the actual input being called out as a search input (<input type="search">). in addition, some older...
...ike this one is a very common, easily recognised feature, and adding a visual label would spoil the page design. <input type="search" name="q" placeholder="search query" aria-label="search through site content"> now if we use voiceover to look at this example, we get some improvements: the search form is called out as a separate item, both when browsing through the page, and in the landmarks menu. the label text contained in the aria-label attribute is read out when the form input is highlighted. beyond this, the site is more likely to be accessible to users of older browsers such as ie8; it is worth including aria roles for that purpose. and if for some reason your site is built using just <div>s, you should definitely include the aria roles to provide these much needed semantics! th...

Practical positioning examples - Learn web development
nd a <div>. the unordered list contains three list items with links inside, which will become the actual tabs to click on for displaying our content panels. the div contains three <article> elements, which will make up the content panels that correspond to each tab. each panel contains some sample content. the idea here is that we will style the tabs to look like a standard horizontal navigation menu, and style the panels to sit on top of one another using absolute positioning. we'll also give you a bit of javascript to include on your page to display the corresponding panel when a tab is pressed, and style the tab itself. you won't need to understand the javascript itself at this stage, but you should think about learning some basic javascript as soon as possible — the more complex your ui...
...ng the old margin: 0 auto trick. previously in the course we advised against setting a fixed height on content containers if at all possible; it is ok in this circumstance because we have fixed content in our tabs. it also looks a bit jarring to have different tabs at different heights. styling our tabs now we want to style tabs to look like tabs — basically, these are a horizontal navigation menu, but instead of loading different web pages when they are clicked on like we've seen previously in the course, they cause different panels to be displayed on the same page. first, add the following rule at the bottom of your css to remove the default padding-left and margin-top from the unordered list: .info-box ul { padding-left: 0; margin-top: 0; } note: we are using descendant selectors...
... this marks the end of the second example; we hope you'll find the third just as interesting. a sliding hidden panel the final example we'll present here is a panel that slides on and off the screen at the press of an icon — as mentioned earlier, this is popular for situations like mobile layouts, where the available screen spaces is small, so you don't want to use up most of it by showing a menu or info panel instead of the useful content. our finished example will look like this: note: you can see the finished example running live at hidden-info-panel.html (source code). check it out to get an idea of what you will be building in this section of the article. as a starting point, make a local copy of hidden-info-panel-start.html from our github repo. this doesn't follow on from th...

Styling links - Learn web development
previous overview: styling text next when styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. we'll look at all these topics in this article. prerequisites: basic computer literacy, html basics (study introduction to html), css basics (study introduction to css), css text and font fundamentals. objective: to learn how to style link states, and how to use links effectively in common ui features like navigation menus. let's look at some links we looked at how links are implemented in your html according to best practices in creating hyperlinks. in this article we'll build on this knowledge, sh...
...s buttons the tools you've explored so far in this article can also be used in other ways. for example, states like hover can be used to style many different elements, not just links — you might want to style the hover state of paragraphs, list items, or other things. in addition, links are quite commonly styled to look and behave like buttons in certain circumstances — a website navigation menu is usually marked up as a list containing links, and this can be easily styled to look like a set of control buttons or tabs that provide the user with access to other parts of the site. let's explore how. first, some html: <ul> <li><a href="#">home</a></li><li><a href="#">pizza</a></li><li><a href="#">music</a></li><li><a href="#">wombats</a></li><li><a href="#">finland</a></li> </ul> and n...
...h also has the advantage of centering the text vertically), and set the text color to black. note: you may have noticed that the list items in the html are all put on the same line as each other — this is done because spaces/line breaks in between inline block elements create spaces on the page, just like the spaces in between words, and such spaces would break our horizontal navigation menu layout. so we've removed the spaces. you can find more information about this problem (and solutions) at fighting the space between inline block elements. test your skills! you've reached the end of this article, and already did some skill testing in our active learning sections, but can you remember the most important information going forward? you can find an assessment to verify that you've...

Creating hyperlinks - Learn web development
er, you can use the download attribute to provide a default save filename. here's an example with a download link to the latest windows version of firefox: <a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-us" download="firefox-latest-64bit-installer.exe"> download latest firefox for windows (64-bit) (english, us) </a> active learning: creating a navigation menu for this exercise, we'd like you to link some pages together with a navigation menu to create a multi-page website. this is one common way in which a website is created — the same page structure is used on every page, including the same navigation menu, so when links are clicked it gives the impression that you are staying in the same place, and different content is being brought up. you'll n...
...one common way in which a website is created — the same page structure is used on every page, including the same navigation menu, so when links are clicked it gives the impression that you are staying in the same place, and different content is being brought up. you'll need to make local copies of the following four pages, all in the same directory. for a complete file list, see the navigation-menu-start directory: index.html projects.html pictures.html social.html you should: add an unordered list in the indicated place on one page that includes the names of the pages to link to. a navigation menu is usually just a list of links, so this is semantically ok. change each page name into a link to that page. copy the navigation menu across to each page. on each page, remove just ...
...ross to each page. on each page, remove just the link to that same page — it's confusing and unnecessary for a page to include a link to itself. and, the lack of a link acts a good visual reminder of which page you are currently on. the finished example should look similar to the following page: note: if you get stuck, or aren't sure if you have got it right, you can check the navigation-menu-marked-up directory to see the correct answer. e-mail links it's possible to create links or buttons that, when clicked, open a new outgoing email message rather than linking to a resource or page. this is done using the <a> element and the mailto: url scheme. in its most basic and commonly used form, a mailto: link simply indicates the email address of the intended recipient. for example: <...

Introduction to HTML - Learn web development
at its heart, html is a fairly simple language made up of elements, which can be applied to pieces of text to give them different meaning in a document (is it a paragraph? is it a bulleted list? is it part of a table?), structure a document into logical sections (does it have a header? three columns of content? a navigation menu?), and embed content such as images and videos into a page. this module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand html. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you don't need any previous html knowledge, but you should hav...
...to know about. in this article, you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more. document and website structure as well as defining individual parts of your page (such as "a paragraph" or "an image"), html is also used to define areas of your website (such as "the header," "the navigation menu," or "the main content column.") this article looks into how to plan a basic website structure and how to write the html to represent this structure. debugging html writing html is fine, but what if something goes wrong, and you can't work out where the error in the code is? this article will introduce you to some tools that can help. assessments the following assessments will test your unde...
... ...

Strategies for carrying out testing - Learn web development
uss it all. getting started with analytics provides some useful guidance on reporting (and more) for beginners. you should also be encouraged to look at the different options on the left hand side, and see what kinds of data you can find out. for example, you can find out what browsers and operating systems your users are using by selecting audience > technology > browser & os from the left hand menu. note: when using google analytics, you need to beware of misleading bias, e.g. "we have no firefox mobile users" might lead you to not bother supporting firefox mobile. but you are not going to have any firefox mobile users if the site was broken on firefox mobile in the first place. other considerations there are other considerations that you should probably include as well. you should de...
...ind a particular combination of hardware/software to test. an emulator might be as simple as testing a device condition. for example, if you want to do some quick and dirty testing of your width/height media queries for responsive design, you could use firefox's responsive design mode. safari has a similar mode too, which can be enabled by going to safari > preferences, and checking show develop menu, then choosing develop > enter responsive design mode. chrome also has something similar: device mode (see simulate mobile devices with device mode). more often than not though, you'll have to install some kind of emulator. the most common devices/browsers you'll want to test are as follows: the official android studio ide for developing android apps is a bit heavy weight for just testing we...
... options across the three dialog boxes containing create a virtual hard disk now, vdi (virtual disk image), and dynamically allocated). choose the file location and size for the virtual hard disk (choose a sensible name and location to keep it, and for the size specify around 50gb, or as much as you are comfortable with specifying). now the new virtual box should appear in the left hand menu of the main virtual box ui window. at this point, you can double-click to open it — it will start to boot up the virtual machine, but it won't yet have the operating system (os) installed. at this point you need to point the dialog box at the installer image/disk, and it will run through the steps to install the os just like on a physical machine. important: you need to make sure you have t...

Accessibility Features in Firefox
uickly narrows the list down via a substring search. bookmarks can have a keyword assigned to them which can be typed into the address bar to bring up the bookmark. a "smart keywords" feature enhances this even further by allowing custom searches from the command line such as "word punditry" to look up the word "punditry" in an online dictionary. these smart keywords can be setup via the context menu for the search field on the desired website. integrated web search via ctrl+k is much faster to use than first going to the search tool's web site. custom searches can be added to this quick search bar and the user can switch between them by choosing from a drop down available via the standard alt+down arrow key combination. the built-in text zoom feature can be accessed with the ctrl+plus and ...
...web content one letter a time. you can even select web content and copy it to the clipboard. -- all with the keyboard detailed advanced javascript control: mozilla gives you the ability to fine tune what javascript is allowed to do while you browse. for example, you can disable functions that websites use to move or resize windows, or to remove your status bar, to disable right-click contextual menus, change the status bar text, etc. you can furthermore control javascript capabilities to remove scrollbars, toolbars or system buttons like minimize, close and maximize by editing the about:config related properties or by editing accordingly the user.js file as explained in this "disable other javascript window features" document. moving back and forward by web page (alt+left and alt+right) occ...
... only the selected text, which is useful for understanding accessibility problems in some web sites. customize your experience! many users are finding the true greatness of firefox lies in support for third party extensions. extensions are small add-ons which can change your browser experience as you see fit. extensions can easily be installed or removed with the extension manager in the tools menu. here are some examples of accessible extensions, although there are hundreds more to try (thank you to the gw micro knowledge base for some of this information): adblock plus removes ads (and other objects, like banners) from web pages greasemonkey lets you add bits of javascript ("user scripts") to any web page to change its behavior. in much the same way that user css lets you take contro...

CSUN Firefox Materials
ickly narrows the list down via a substring search. bookmarks can have a keyword assigned to them which can be typed into the address bar to bring up the bookmark. a "smart keywords" feature enhances this even further by allowing custom searches from the command line such as "word punditry" to look up the word "punditry" in an online dictionary. these smart keywords can be setup via the context menu for the search field on the desired website. integrated web search via ctrl+k is much faster to use than first going to the search tool's web site. custom searches can be added to this quick search bar and the user can switch between them by choosing from a drop down available via the standard alt+down arrow key combination. the built-in text zoom feature can be accessed with the ctrl+plus an...
...s near-instantaneously the download manager provides keyboard access to all of your recent downloads customize your experience! many users are finding the true greatness of firefox lies in support for third party extensions. extensions are small add-ons which can change your browser experience as you see fit. extensions can easily be installed or removed with the extension manager in the tools menu. here are some examples of accessible extensions, although there are hundreds more to try (thank you to the gw micro knowledge base for some of this information): adblock plus removes ads (and other objects, like banners) from web pages greasemonkey lets you add bits of javascript ("user scripts") to any web page to change its behavior. in much the same way that user css lets you take contro...
...ting tabs, controlling tab focus, tab clicking options, undo closed tabs and windows, plus much more. it also includes a full-featured session manager with crash recovery that can save and restore combinations of opened tabs and windows. fire vox is a screen reader extension built just for firefox which can read mathml the accessibility extension, from the university of illinois, provides new menus and keyboard shortcuts for accessing every feature of a web page community contributions the real reason behind firefox's success is the great community of volunteers and organizations that realize they have something to benefit from a browser open to utilizing their ideas and hard work. contributions come in many forms. the mozilla firefox community welcomes bug reports, ideas, documentation, ...

HTTP logging
s approach winds up logging the whole browser history, so files can get rather large (they compress well :) setting environment variables differs by operating system. don't let the scary-looking command line stuff frighten you off; it's not hard at all! windows if firefox is already running, exit out of it. open a command prompt. on windows xp, you can find the "run..." command in the start menu's "all programs" submenu. on all newer versions of windows, you can hold down the windows key and press "r". type cmd and press enter, a new command prompt window with a black background will appear. copy and paste the following lines one at a time into the command prompt window. press the enter key after each one.: for 64-bit windows: set moz_log=timestamp,rotate:200,nshttp:5,cache2:5,nsso...
...export moz_log_file=/tmp/log.txt cd /path/to/firefox ./firefox reproduce the problem you're debugging. when the problem has been reproduced, exit firefox and look for the generated log files, which you can find at /tmp/log.txt. mac os x these instructions show how to log http traffic in firefox on mac os x. quit firefox is if it's currently running, by using the quit option in the file menu. keep in mind that simply closing all windows does not quit firefox on mac os x (this is standard practice for mac applications). run the terminal application, which is located in the utilities subfolder in your startup disk's applications folder. copy and paste the following commands into the terminal window, hitting the return key after each line. export moz_log=timestamp,rotate:200,nshttp:...
...mmand line arguments since firefox 61 it's possible to start logging in a bit simpler way than setting environment variables: using command line arguments. here is an example for the windows platform, on other platforms we accept the same form of the arguments: if firefox is already running, exit out of it. open a command prompt. on windows xp, you can find the "run..." command in the start menu's "all programs" submenu. on all newer versions of windows, you can hold down the windows key and press "r". copy and paste the following line into the "run" command window and then press enter: for 32-bit windows: "c:\program files (x86)\mozilla firefox\firefox.exe" -moz_log=timestamp,rotate:200,nshttp:5,cache2:5,nssockettransport:5,nshostresolver:5,cookie:5 -moz_log_file=%temp%\log.txt ...

Roll your own browser: An embedding how-to
to clients and sample code to be found within the mozilla source tree. linux external projects sashxb: ibm uses mozilla to implement part of their sash development/desktop environment. part of the gnome effort. activestate's komodo: development environment, based on mozilla's xul. (screenshot) light: very simple non-bloated gtk+ interface, familiar netscape 4.x keyboard shortcuts, context menus, etc. (screenshot) xparts: kde extension that allows mozilla to be embedded into the konqueror browser. uses gtkmozembed widget, part of the kdebindings module and available from http://websvn.kde.org/trunk/kde/kdebindings/xparts/. (news release, screenshot) mozilla examples gtkmozembed widget: gtk widget wrapper for the mozilla gecko engine. testgtkembed: basic browser built with the gtk...
...ension that allows mozilla to be embedded into the konqueror browser. uses gtkmozembed widget, part of the kdebindings module and available from http://websvn.kde.org/trunk/kde/kdebindings/xparts/. (news release, screenshot) mozilla examples gtkmozembed widget: gtk widget wrapper for the mozilla gecko engine. testgtkembed: basic browser built with the gtkmozembed widget. url location field, menu bar, html area, supports ssl. windows external projects k-meleon browser: the windows answer to galeon. fast ie-look-alike browser, uses ie and ns bookmarking system, fast loading time, privacy features, java support and complete control of the menus and "hotkeys". implemented with mozilla embedding apis. (screenshots) neoplanet browser: a gecko add-on for the neoplanet browser. activesta...
...activex control allowing for embedding the gecko layout engine.obsolete since gecko 7.0 llmozlib & ubrowser: a static library that allows you to embed gecko and render pages to memory. includes test applications that illustrate how to use it. versions for windows and mac with linux to follow. mozilla examples mfcembed: standard mozilla embedding example application for win32. basic browser, menus, toolbar, urlbar, html area. winembed: obsoleted by mfcembed. a bare-bones browser with urlbar and html area. activex control: an activex control for mozilla using the gecko layout engine. more information at 1 and 2. mac external projects activestate's komodo: development environment, based on mozilla's xul. (screenshot) marbrow : mac port of x2web (ja, ko) embedding mozilla. mozi...

Localization content best practices
sh is always the can either be der, die or das. to complicate matters, if the grammatical context changes, the article will change: der text 'the text' changes to wollen sie den text speichern? 'do you want to save the text?' suffixes in basque: where english tends to use expressions such as 'to the' or 'from the', basque adds an ending to a word to express the same concept. for example from the menu in basque is menutik and to the printers is inprimagailuei. implication: using placeholders for something like 'the text' or 'the file' works well in english but is likely to cause severe headaches for localizers if the placeholders cannot be inflected. use proper plural forms firefox supports proper plural forms. as a native english speaker, you might find it natural to use delete-cookie ...
...ire a different inflection, for example {{theirmichean na seirbheise}}. so if the localizer is left unsure as to which string goes into which placeholder, this may lead to bad translations. don't reuse strings in different contexts this is particularly important for mobile, where different context often means different font and available space for the string. for example, if you're adding a new menu item in settings on android, don't use the same string for the menu item and the following screen header. another example, some locales use nouns for titles, and verbs for actions (for example button labels). sometimes they coincide with english, but they rarely do in other languages. take bookmark: it can be both a noun and a verb in english. a developer could be tempted to reuse the same strin...
...rings if you're removing features, don't leave around unused strings in the .properties file. tooltips if a string is used as a tooltip, it should not end in a period (in english). tooltips are never written in imperative mood but infinitive mood instead. hence the proper absence of periods to indicate this isn't just a matter of consistency for en-us, as it is also vital info for localizers. menu and control labels the labels on controls and menu titles, menu option strings, and so forth should not end in periods (in english). these are generally not complete sentences, but instead, phrases that convey the idea of a concept or action. therefore, for both correctness and consistency within en-us, please leave out the trailing periods for these items. this also helps with localization. de...

Profile Manager
king up and restoring profiles profile manager offers two different mechanisms for backing up and restoring profiles. backup folder profile manager has a local backup folder where it can manage profile backups. this is the easiest way to backup and restore profiles. to backup a profile: select the profile you want to backup, and choose "backup to->backup folder" from the toolbar's backup menu. the profile will be backed up, and the backup will appear under the backups column in the main display: to restore a profile: select the backup in the main display, open the context menu, and choose "restore". when you restore a profile, the backup is retained, so you can restore from the same backup at a later date. to delete a backup: select the backup in the main display, open the con...
...e profile will be backed up, and the backup will appear under the backups column in the main display: to restore a profile: select the backup in the main display, open the context menu, and choose "restore". when you restore a profile, the backup is retained, so you can restore from the same backup at a later date. to delete a backup: select the backup in the main display, open the context menu, and choose "delete". profile archives profile manager can also backup to and restore from .zip archives. profile manager does not track these backups in the ui, but using profile archives is an easy way to move profiles between machines. to backup a profile to an archive: select the profile you want to backup, and choose "backup to->archive" from the toolbar's backup menu. you'll be prompt...
...backups in the ui, but using profile archives is an easy way to move profiles between machines. to backup a profile to an archive: select the profile you want to backup, and choose "backup to->archive" from the toolbar's backup menu. you'll be prompted for a name and location for the archive. to create a profile from a profile archive: select "restore from->archive" from the toolbar's backup menu. you'll be prompted for the location of the archive, and then for the name of the profile you'd like to create from the archive. other operations context-clicking any profile in the profile list will cause a popup menu to appear with the following commands: copy - makes a copy of the profile using a name and location of your choice. delete - deletes the profile, and all files associated ...

Setting up CDT to work on SpiderMonkey
condensed and updated version of what is explained in much more detail for the entire mozilla codebase. luckily, improvements in cdt have reduced the basic process to manageable five steps: download and extract "eclipse ide for c/c++ developers" from the eclipse downloads page. start eclipse and create a workspace somewhere. select "new > makefile project with existing code" from the "file" menu. give the project a name that you like ("spidermonkey" has a nice ring to it) and use the "browser…" button to select your checkout's js/src folder for the "existing code location". choose the correct toolchain for your platform (i.e. macos x gcc on mac) and click "finish". at this point, the indexer starts running and already produces a pretty decent index of much of spidermonkey. still, t...
...rything to be indexed, cdt has to be aware of the project's build details. step 3 - index all the code to let cdt know about the build, it has to invoke make itself (or, as is done in the guide for the whole mozilla codebase on mdn, read a log of the build), which can be setup with these simple steps: open the project's properties by selecting its root and clicking "properties" in the "file" menu and select "c/c++ build". under the "builder settings" group tab, deactivate "use default build command". instead, change "build command" to read make -w (this is required because cdt needs detailed information about which directories make operates on, which using -w causes make to provide). change the "build location" to the build directory configured in step 1. for me, that means changing "b...
... from "build (incremental build)". deactivate "clean" so that your builds do not take ages. if you want to use ccache: select "c/c++ general", then "preprocessor include patterns". under the "providers" group tab, select "cdt gcc build output parser" and add the string |(ccache) to the end of the "compiler command pattern" text input. start the build by selecting "build all" from the "project" menu. start the indexer by either: selecting "index > rebuild" from the project's context menu located in the project explorer window, or selecting "c/c++ index > rebuild" from the "project" menu. and that is pretty much it: large parts of spidermonkey should now be indexed. unfortunately, there are also large parts that are not properly indexed, leading to errors and warnings being s...

TPS Bookmark Lists
a bookmark asset list is an object with one or more key-value pairs. each key is the full path for the array of contents specified in the key's value. for example: var bookmarks_after_second_modify = { "menu": [ { uri: "http://www.getfirefox.com/", title: "get firefox" } ], "menu/foldera": [ { uri: "http://mozilla.com", title: "mozilla" }, ] }; this describes two bookmarks, one in the "menu" folder, and the other in the "folder1" subfolder of "menu". ...
...for example: var bookmarks_after_second_modify = { "menu": [ { uri: "http://www.getfirefox.com/", title: "get firefox" } ], "menu/foldera": [ { uri: "http://mozilla.com", title: "mozilla" }, ] }; this describes two bookmarks, one in the "menu" folder, and the other in the "folder1" subfolder of "menu". all bookmark paths must begin with one of the following: "menu": the normal bookmarks menu "toolbar": the bookmarks toolbar "tags": the tags folder "unfiled": the unfiled bookmarks folder "places": the places root folder ("menu", "toolbar", and "unfiled" are all children of this) sub-folders are preceded with forward slashes, so "menu/folder1" denotes that "folder1" is a sub-folder of "menu". tps does not support forward slashes as part of a folder name. fo...
...changes: an object containing new properties to be set for this separator when this asset list is used in a modif...

Places Developer Guide
to the user's profile. most of the apis provided by the bookmarks service use an item's id to identify what to act on. the bookmarks datastore is hierarchical, modeling folders and their contents. the ids of several significant folders are made available as attributes of nsinavbookmarksservice. nsinavbookmarksservice.placesroot - the root folder of hierarchy. nsinavbookmarksservice.bookmarksmenufolder - the contents of this folder are visible in the bookmarks menu. nsinavbookmarksservice.toolbarfolder - the contents of this folder are visible on the bookmarks toolbar. nsinavbookmarksservice.unfiledbookmarksfolder - items that have been "starred", but not places in any folder. nsinavbookmarksservice.tagsfolder - subfolders of this folder are tags, and their children are uris that ha...
...nd to iterate over the results. ...
...bookmarks in the netscape bookmarks html format. note that this service is only currently available for firefox, not other toolkit-based applications. importing: importhtmlfromfile (nsilocalfile afile, boolean aisinitialimport) - this imports all the bookmarks in the specified file into the current bookmarks collection. if aisinitialimport is true, all pre-existing bookmarks in the toolbar and menu folders will be deleted. note: the method importhtmlfromfiletofolder() method was removed in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11). exporting: exporthtmltofile (nsilocalfile afile) - this exports all bookmarks in the toolbar, menu and unfiled bookmarks folders into the specified file. backup/restore the new bookmarks system uses the json format for storing backups ...

Building the WebLock UI
, and others, have been defined in an xml language called xul. elements in the xul markup map to widgets in the interface that gecko renders in a fairly straightforward way - so, for instance, the root element of an application window is the element <window/>, the root element of the dialog we'll be creating here is <dialog/>, and so forth. within a xul application file, elements like <button/>, <menu/>, and <checkbox/> can be hooked up to an event model, to scripts, and to the xpcom interfaces that carry out a lot of the browser functionality in mozilla. in using xpcom components you saw how xpcom objects are reflected into the interface layer as javascript objects. in this chapter, now that we've created the weblock component and made it available to xpcom, we create the ui that actually in...
...api we defined in the earlier part of the tutorial. <separator class="thin"/> <hbox align="center"> <textbox id="url.input" flex="1"/> <button label="add this url" oncommand="addthissite();"/> </hbox> this snippet introduces a couple of new general layout widgets in xul. the separator that appears at the top of this snippet creates a little divider between widgets like the kind you see in menus that divide sets of functionality available there. the parent of the textbox that users enter an url into is something called an <hbox/>, which is a layout widget - often invisible - that controls the way its child elements are rendered. in this case the <hbox/> centers the textbox and the button children, and it orients them horizontally (in contrast to the <vbox/>, which orients its children v...
...provide user interface for web locking. other front end resources in some ui packages, localization resources are also defined. these include dtds in which the language in which the ui is labelled can be extracted into external files, which are swapped with dtds for other languages. for example, user interface packages often include an english dtd that defines labels and strings for button and menus and other elements in the interface. when the user selects a different language pack, all of the english that's been externalized in these files is dynamically replaced with the new choice. in addition to dtds, the localization parts of a user interface may also include string bundles in which strings that are used in the interface javascript can be similarly replaced. there are also technologie...

Index
actions that can be performed by the object. each action can be performed or queried for a name, description or associated key bindings. actions are needed more for ats that assist the mobility impaired, such as on-screen keyboards and voice command software. by providing actions directly, the at can present them to the user without the user having to perform the extra steps to navigate a context menu. the first action should be equivalent to the msaa default action. if there is only one action, iaccessibleaction should also be implemented. 163 iaccessibleapplication interfaces, xpcom, xpcom interface reference this interface provides the at with the information it needs to differentiate this application from other applications, from other versions of this application, or ...
... 275 indexinparent the 0-based index of this accessible in its parent's list of children, or -1 if this accessible does not have a parent. 276 keyboardshortcut provides localized string of accesskey name, such as alt+d (alt + d). the modifier may be affected by user and platform preferences. usually alt+letter (alt + letter), or just the letter alone for menu items. 277 lastchild returns last child node in accessible tree. 278 name accessible name -- the main text equivalent for this node. 279 nextsibling returns next sibling in accessible tree. 280 numactions the number of accessible actions associated with this accessible. 281 parent returns...
...orter(). once that has been done, the reporter will be found by any client accessing the enumerator returned by nsimemoryreportermanager.enumeratereporters(). this includes the about:memory page. 738 nsimemoryreportermanager interfaces, interfaces:scriptable, xpcom, xpcom interface reference implemented by @mozilla.org/memory-reporter-manager;1 as a service: 739 nsimenuboxobject interfaces, interfaces:scriptable, xpcom, xpcom interface reference to get access to the box object for a given menu, use code like this: 740 nsimessagebroadcaster message "broadcasters" don't have a single "other side" that they send messages to, but rather a set of subordinate message managers. for example, broadcasting a message through a window message...

nsIDOMXULElement
mstring value); attributes attribute type description align domstring gets/sets the value of the element's align attribute. allowevents boolean true if the element's allowevents attribute is the string "true", otherwise false. removes the attribute if you set it to false. boxobject nsiboxobject read only. gets or creates a box object for the element; browser, editor, iframe, listbox, menu, menupopup, scrollbox, tooltip and tree elements receive specialized box objects allowing access to additional properties not normally available from script. builder nsixultemplatebuilder read only. retrives the element's template builder, if it has a template. classname domstring gets/sets the value of the element's class attribute. collapsed boolean true if the element's collapsed attribu...
... to additional properties not normally available from script. builder nsixultemplatebuilder read only. retrives the element's template builder, if it has a template. classname domstring gets/sets the value of the element's class attribute. collapsed boolean true if the element's collapsed attribute is the string "true", otherwise false. removes the attribute if you set it to false. contextmenu domstring gets/sets the value of the element's contextmenu attribute. controllers nsicontrollers read only. returns an nsicontrollers object that additional controllers may be appended to so as to provide focus-specific actions for commands. database nsirdfcompositedatasource read only. returns the template builder's database, if it is an rdf template. datasources domstring gets/sets the va...
...s hidden attribute is the string "true", otherwise false. removes the attribute if you set it to false. id domstring gets/sets the value of the element's id attribute. left domstring gets/sets the value of the element's left attribute. maxheight domstring gets/sets the value of the element's maxheight attribute. maxwidth domstring gets/sets the value of the element's maxwidth attribute. menu domstring gets/sets the value of the element's menu attribute. minheight domstring gets/sets the value of the element's minheight attribute. minwidth domstring gets/sets the value of the element's minwidth attribute. observes domstring gets/sets the value of the element's observes attribute. ordinal domstring gets/sets the value of the element's ordinal attribute. orient domstring gets/...

Filelink Providers
ed as part of an add-on, the add-on must register the component in chrome.manifest. also, you must add the component's contract id to the "cloud-file" category. see cloudfile/cloudfilecomponents.manifest for an example, as well as this document on chrome.manifest files. the account setup dialog the account setup dialog allows the user to select what account type they would like to create from a menulist. some providers require thunderbird to do very little in order to connect a user to their account. other providers however may require the user to fill in additional details in order to connect to the service. hightail, for example, requires a username and password. other services may require the user to fill in a server string or port number. a provider implementation can choose what inf...
...ay require the user to fill in a server string or port number. a provider implementation can choose what information it gets from the user from the setup dialog by pointing the settingsurl attribute of their nsimsgcloudfileprovider implementation to a chrome url for an xhtml page that contains a form with the extra information. that url is then loaded into an iframe directly beneath the provider menulist. note: the setup dialog window should resize itself automatically in order to fit the content of the iframe without scrollbars. custom settings fields to handle custom settings, the settings xhtml page should contain a form with the id "provider-form", with its onsubmit attribute set to "return false;". example: <form id="provider-form" onsubmit="return false;"> <label for="username">u...
...ing the key mail.cloud_files.accounts.account_key.username where account_key is the value passed into the implementations init function. the hightail settings.xhtml and settings.js file have examples of this. management interface once an account has been created, it is manageable from within the preferences dialog, in the attachment pane, in the outgoing tab. the content to the right of the menulist is an iframe, pointed at a url read from the providers managementurl attribute, which should point to an xhtml page. the xhtml page should have a function in the global scope called onloadprovider. this function is called automatically once the dom content is done loading, and is passed a single parameter - the provider instance whose data is being displayed. ...

Index
k will not apply to them. but this is not a common usage model. how do i test it? on window and mac, the cached compose window is on by default. to test it 17 content tabs thunderbird content tabs enable thunderbird to display remote content in a tab, which users can browse in (mostly) the same way as with a browser. for example, invoking thunderbird's help | what's new menu option opens a tab that displays web content. the thunderbird team can update this content via the website at any time. 18 cookies in thunderbird cookies, guide, thunderbird in versions of thunderbird prior to 3 the cookie policy was very restrictive (to rss only). thunderbird 3 uses the gecko cookie policy with some changes. 19 creating a gloda message query t...
...ile called chrome.manifest tells thunderbird what packages and overlays are provided by the extension. open the file called chrome.manifest that you created and add this code: 78 building a thunderbird extension 5: xul extensions, thunderbird thunderbird's user interface is written in xul and javascript. xul is an xml grammar that provides user interface widgets like buttons, menus, toolbars, trees etc. we add widgets by inserting new xul dom elements into the application window and modify them using scripts and attaching event handlers. while xul provides the elements of the user interface, actions are written in javascript. 79 building a thunderbird extension 6: adding javascript in this step we will create a small piece of javascript code that inse...
...timer events and much more. the window api will give you the complete details. since window is a global variable you can use it directly from your javascript file. 96 access window area needsupdate, missing, thunderbird this page has no content. enrich mdc by contributing. 97 add new tab missing, thunderbird no summary! 98 add option to context menu incomplete, thunderbird assuming this on chrome.manifest: 99 add tab needsupdate, missing, thunderbird this page has no content. enrich mdc by contributing. 100 add toolbar button example xul overlay file: 101 create custom column thunderbird the article "creating a custom column" will get you well on the road to creating y...

Finding the code for a feature
can make it appear by default using "ac_add_options --enable-extensions=default,venkman,inspector" which is part of my standard configuration). the second is mozilla's source code search tool mxr. i keep two prominent links to this on my firefox toolbar, one to comm-central string search, and one to comm-central file search. so, how did i use those to figure out how to do this? i know there is a menu command "tag" to tag the message - how does it do it? using dom inspector, i find the tag menu item, and i see that it uses command "cmd_tag". then i use mxr and look for "cmd_tag". i see it occurs in mail3panewindowcommands.js a couple of times. i look at the last occurrence, and see it is just an enable item with no real action involved. oops, i guess i need to get the submenu instead. repeatin...
...looking that up in mxr, its underlying function uses a very strange call prevhdrfolder[toggler](messages, key) to change the key. trying to figure that out from the code, i see that is just a clever way to do the addkeywordstomessages or removekeywordsfrommessages method call. ...
...looking that up in mxr, its underlying function uses a very strange call prevhdrfolder[toggler](messages, key) to change the key. trying to figure that out from the code, i see that is just a clever way to do the addkeywordstomessages or removekeywordsfrommessages method call. ...

Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
tutorial: show allocations per call path this page shows how to use the debugger api to show how many objects a web page allocates, sorted by the function call path that allocated them. visit the url about:config, and set the devtools.chrome.enabled preference to true: setting the 'devtools.chrome.enabled' preference open a developer scratchpad (menu button > developer > scratchpad), and select "browser" from the "environment" menu. (this menu will not be present unless you have changed the preference as explained above.) selecting the 'browser' context in the scratchpad enter the following code in the scratchpad: // this simply defines the 'debugger' constructor in this // scratchpad; it doesn't actually start debugging anything. components.utils.imp...
...+ ': ' + name + place); for (let [child, grandchildren] of children) walk(child, grandchildren, indent + ' '); } walk(null, rootchildren, ''); } })(); in the scratchpad, ensure that no text is selected, and press the "run" button. (if you get an error complaining that components.utils is not defined, be sure you've selected browser from the scratchpad's environment menu, as described in step 2.) save the following html text to a file, and visit the file in your browser. make sure the current browser tab is displaying this page. <div onclick="dodivsandspans()"> click here to make the page do some allocations. </div> <script> function makefactory(type) { return function factory(content) { var elt = document.createelement(type); elt.te...
...this begins logging allocations in the current browser tab. in the browser tab, click on the text that says "click here…". the event handler should add some text to the end of the page. back in the browser console, evaluate the expression demoplotallocations(). this...

Responsive Design Mode - Firefox Developer Tools
st obvious factor here is screen size, but there are other factors as well, including the pixel density of the display and whether it supports touch. responsive design mode gives you a simple way to simulate these factors, to test how your website will look and behave on different devices. toggling responsive design mode there are three ways to toggle responsive design mode: from the firefox menu: select responsive design mode from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on macos). from the developer tools toolbox: press the responsive design mode button in the toolbox's toolbar: from the keyboard: press ctrl + shift + m (or cmd + opt + m on macos). controlling responsive design mode with responsive design mode enabled, the cont...
...d, mouse events are translated into touch events; this includes (starting in firefox 79) translating a mouse-drag event into a touch-drag event. (note that when touch simulation is enabled, this toolbar icon is blue; when simulation is disabled, it is black. ...
... 79) translating a mouse-drag event into a touch-drag event. (note that when touch simulation is enabled, this toolbar icon is blue; when simulation is disabled, it is black. on the right end of the screen, three buttons allow you to: camera button - take a screenshot settings button - opens the rdm settings menu close button - closes rdm mode and returns to regular browsing the settings menu includes the following commands: left-align viewport - when checked moves the rdm viewport to the left side of the browser window show user agent - when checked displays the user agent string the final two options define when the page is reloaded: reload when touch simulation is toggled: when this option is enabled, the page is reloaded whenever you toggle touch support. reload wh...

Firefox Developer Tools
you have any feedback on devtools, or want to contribute to the project, you can join the devtools community. note: if you are just getting started with web development and using developer tools, our learning docs will help you — see getting started with the web and what are browser developer tools? for good starting points. the core tools you can open the firefox developer tools from the menu by selecting tools > web developer > toggle tools or use the keyboard shortcut ctrl + shift + i or f12 on windows and linux, or cmd + opt + i on macos. the ellipsis menu on the right-hand side of developer tools contains several commands that let you perform actions or change tool settings. this button only appears when there are multiple iframes on a page. click it to display a...
... there are multiple iframes on a page. click it to display a list of the iframes on the current page and select the one with which you want to work. click this button to take a screenshot of the current page. (note: this feature is not turned on by default and must be enabled in settings before the icon will appear.) toggles responsive design mode. opens the menu that includes docking options, the ability to show or hide the split console, and developer tools settings. the menu also includes links to the documentation for firefox web tools and the mozilla community. closes the developer tools page inspector view and edit page content and layout. visualise many aspects of the page including the box model, animations, and grid layou...
...entire page or of a single element. measure a portion of the page measure a specific area of a web page. rulers overlay horizontal and vertical rulers on a web page for the latest developer tools and features, try firefox developer edition. download firefox developer edition connecting the developer tools if you open the developer tools using keyboard shortcuts or the equivalent menu items, they'll target the document hosted by the currently active tab. but you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices. about:debugging debug add-ons, content tabs, and workers running in the browser. connecting to firefox for android connect the developer tools to an instance of firefox ru...

HTMLButtonElement - Web APIs
ement.formtarget is a domstring reflecting a name or keyword indicating where to display the response that is received after submitting the form. if specified, this attribute overrides the target attribute of the <form> element that owns this element. htmlbuttonelement.labels read only is a nodelist that represents a list of <label> elements that are labels for this button. htmlbuttonelement.menu is a htmlmenuelement representing the menu element to be displayed if the button is clicked and is of type="menu". htmlbuttonelement.name is a domstring representing the name of the object when submitted with a form. html5 if specified, it must not be the empty string. htmlbuttonelement.tabindex is a long that represents this element's position in the tabbing order. htmlbuttonelement.type...
...g order. htmlbuttonelement.type is a domstring indicating the behavior of the button. this is an enumerated attribute with the following possible values: submit: the button submits the form. this is the default value if the attribute is not specified, html5 or if it is dynamically changed to an empty or invalid value. reset: the button resets the form. button: the button does nothing. menu: the button displays a menu. htmlbuttonelement.willvalidate read only is a boolean indicating whether the button is a candidate for constraint validation. it is false if any conditions bar it from constraint validation, including: its type property is reset or button; it has a <datalist> ancestor; or the disabled property is set to true. htmlbuttonelement.validationmessage read only i...
...ko-based browser, use the :-moz-submit-invalid pseudo-class to style submit buttons based on the validation of a form. specifications specification status comment html living standardthe definition of 'htmlbuttonelement' in that specification. living standard html 5.2the definition of 'htmlbuttonelement' in that specification. recommendation the menu attribute and type="menu" value have been removed. html 5.1the definition of 'htmlbuttonelement' in that specification. recommendation the following attribute has been added: menu. the type attribute can take one more value, "menu". html5the definition of 'htmlbuttonelement' in that specification. recommendation the attributes tabindex and accesskey, are now defi...

KeyboardEvent: code values - Web APIs
"" 0xe04f "end" "end" 0xe050 "arrowdown" "arrowdown" 0xe051 "pagedown" "pagedown" 0xe052 "insert" "insert" 0xe053 "delete" "delete" 0xe054 ～ 0xe05a "unidentified" "" 0xe05b "metaleft" "osleft" 0xe05c "metaright" "osright" 0xe05d "contextmenu" "contextmenu" 0xe05e "power" "" 0xe05f ～ 0xe064 "unidentified" "" 0xe065 "browsersearch" "browsersearch" 0xe066 "browserfavorites" "browserfavorites" 0xe067 "browserrefresh" "browserrefresh" 0xe068 "browserstop" "browserstop" 0xe069 "browserforward" "browserforward" 0xe...
... 0x007e "unidentified" "numpadchangesign" 0x007f "pause" "pause" 0x0080 "unidentified" "" 0x0081 "numpadcomma" "" 0x0082 "lang1" "hangulmode" 0x0083 "lang2" "hanja" 0x0084 "intlyen" "intlyen" 0x0085 "osleft" "osleft" 0x0086 "osright" "osright" 0x0087 "contextmenu" "contextmenu" 0x0088 "browserstop" "cancel" 0x0089 "again" "" 0x008a "props" "" 0x008b "undo" "undo" 0x008c "select" "" 0x008d "copy" "copy" 0x008e "open" "" 0x008f "paste" "paste" 0x0090 "find" "" 0x0091 "cut" "cut" 0x0092 "help" ...
... 0x0074 "power" 0x0075 "numpadequal" 0x0076 "unidentified" 0x0077 "pause" 0x0078 "unidentified" 0x0079 "numpadcomma" 0x007a "lang1" 0x007b "lang2" 0x007c "intlyen" 0x007d "metaleft" 0x007e "metaright" 0x007f "contextmenu" 0x0080 "browserstop" 0x0081 "again" 0x0082 "props" 0x0083 "undo" 0x0084 "select" 0x0085 "copy" 0x0086 "open" 0x0087 "paste" 0x0088 "find" 0x0089 "cut" 0x008a "help" 0x008b ～ 0x008d "unidentified" 0x008e "sleep" 0x...

Movement, orientation, and motion: A WebXR example - Web APIs
tion sessionstarted(session) { let refspacetype; xrsession = session; xrbutton.innertext = "exit webxr"; xrsession.addeventlistener("end", sessionended); let canvas = document.queryselector("canvas"); gl = canvas.getcontext("webgl", { xrcompatible: true }); if (allowmouserotation) { canvas.addeventlistener("pointermove", handlepointermove); canvas.addeventlistener("contextmenu", (event) => { event.preventdefault(); }); } if (allowkeyboardmotion) { document.addeventlistener("keydown", handlekeydown); } shaderprogram = initshaderprogram(gl, vssource, fssource); programinfo = { program: shaderprogram, attriblocations: { vertexposition: gl.getattriblocation(shaderprogram, 'avertexposition'), vertexnormal: gl.getattriblocation(shaderprog...
...r html—as well as its webgl rendering context—which will be used as the drawing surface for the scene. the xrcompatible property is requested when calling getcontext() on the element to gain access to the webgl rendering context for the canvas. this ensures that the context is configured for use as a source for webxr rendering. ...
...ering. next, we add event handlers for the mousemove and element.contextmenu_event, but only if the allowmouserotation constant is true. the mousemove handler will deal with the pitching and yawing of the view based upon the movement of the mouse. since the "mouselook" feature functions only while the right mouse button is held down, and clicking using the right mouse button triggers the context menu, we add a handler for the contextmenu event to the canvas to prevent the context menu fom appearing when the user initially begins their drag of the mouse. next, we compile the shader programs; get references to its variables; initialize the buffers that store the array of each position; the indexes into the position table for each vertex; the vertex normals; and the texture coordinates for each...

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

An overview of accessible web applications and widgets - Accessibility
since the html4 specification doesn't provide built-in tags that semantically describe these kinds of widgets, developers typically resort to using generic elements such as <div> and <span>. while this results in a widget that looks like its desktop counterpart, there usually isn't enough semantic information in the markup to be usable by an assistive technology. ...
...les and states that describe the behavior of most familiar ui widgets. many of these were later added in html5, and developers should always prefer using the correct semantic html element over using aria. the aria specification is split up into three different types of attributes: roles, states, and properties. roles describe widgets that aren't otherwise available in html 4, such as sliders, menu bars, tabs, and dialogs. properties describe characteristics of these widgets, such as if they are draggable, have a required element, or have a popup associated with them. states describe the current interaction state of an element, informing the assistive technology if it is busy, disabled, selected, or hidden. aria attributes are interpreted automatically by the browser and translated to the ...
...user often has to press the tab key dozens of times before accessing the needed section. implementing desktop-style keyboard conventions on the web has the potential to significantly speed up navigation for many users. here's a summary of how keyboard navigation should work in an aria-enabled web application: the tab key should provide focus to the widget as a whole. for example, tabbing to a menu bar should not put focus on the menu's first element. the arrow keys should allow for selection or navigation within the widget. for example, using the left and right arrow keys should move focus to the previous and next menu items. when the widget is not inside a form, both the enter and spacebar keys should select or activate the control. within a form, the spacebar key should select or acti...

Accessibility Information for Web Authors - Accessibility
he w3c web accessibility initiative (wai). the european union is looking to base their upcoming accessibility regulations on these guidelines. these guidelines are discussed on the wai interest group discussion list. how-to's key-navigable custom dhtml widgets in mozilla & ie this document discusses how to use tabindex, element.focus() and onkeypress to make custom dhtml widgets such as menus or tree views keyboard accessible. accessible web page authoring ibm has put together a simple, practical resource for web authors to learn accessibility the fast and painless way. highly recommended, an excellent resource. dive into accessibility by mark pilgrim an excellent, easy-to-understand resource (available in english and in 9 other languages) on accessible website authoring, w...
...w dhtml will be made accessible in the future. this document gives a plan which is being developed by ibm, mozilla and wai protocols and formats working group (pfwg) to address the issue of accessible dhtml. ...
... join the mozilla accessibility community live chat both end users and developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility. ...

Understandable - Accessibility
to the criteria practical resource 3.2.1 on focus (a) when a control or other page feature receives focus, it should not change the context in a way that may confuse or disorientate the user. this is a matter of sensible design — people don't want interfaces to surprise them; they want things to be intuitive and behave as expected. for example, focusing a navigation menu option should not change the displayed page — it should be activated before the display changes. globaleventhandlers.onfocus contains some useful information. also see building keyboard accessibility back in for some useful implementation ideas. 3.2.2 on input (a) when data is inputted into a control, or a setting is changed, context should not be changed unexpectedly. t...
... should be warned/advised of the impending change before it occurs. again, sensible design should be implemented. for example, if pressing a button causes the application to exit the current view, the user should be asked to confirm this action, save their work if appropriate, etc. globaleventhandlers.oninput is useful here. 3.2.3 consistent navigation (aa) navigation menu/control style and positioning should be consistent between different pages or views of a web page, and the existing items should appear in the same order, even if for example new iteam are added. if the user has initiated a change, e.g. choosing a different color scheme or position for the navigation, their choice should be respected across all pages. again, sensible design — make the navi...
...dded. if the user has initiated a change, e.g. choosing a different color scheme or position for the navigation, their choice should be respected across all pages. again, sensible design — make the navigation controls the same across all pages or views. see page layouts for information on modern markup for layouts. see also styling links as buttons for a useful accessible navigation menu example. 3.2.4 consistent identification (aa) controls or components that have the same functionality should be identified in the same way across different pages or views. a currency converter appearing on every page of a world travel site for example should be exactly the same, semantically and in terms of labels. again, sensible design! "labels" can refer to descrip...

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

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

<li> - HTML: Hypertext Markup Language
in ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories none. ...
...s project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories none. permitted content flow content. tag omission the end tag can be omitted if the list item is immediately followed by another <li> element, or if there is no more content in its parent element. permitted parents an <ul>, <ol>, or <menu> element. though not a conforming usage, the obsolete <dir> can also be a parent. implicit aria role listitem when child of an ol, ul or menu permitted aria roles menuitem, menuitemcheckbox, menuitemradio, option, none, presentation, radio, separator, tab, treeitem dom interface htmllielement attributes this element includes the global attributes. va...
...s the global attributes. value this integer attribute indicates the current ordinal value of the list item as defined by the <ol> element. the only allowed value for this attribute is a number, even if the list is displayed with roman numerals or letters. list items that follow this one continue numbering from the value set. the value attribute has no meaning for unordered lists (<ul>) or for menus (<menu>). note: this attribute was deprecated in html4, but reintroduced in html5. type this character attribute indicates the numbering type: a: lowercase letters a: uppercase letters i: lowercase roman numerals i: uppercase roman numerals 1: numbers this type overrides the one used by its parent <ol> element, if any. note: this attribute has been deprecated; use the css...

<select>: The HTML Select element - HTML: Hypertext Markup Language
the html <select> element represents a control that provides a menu of options: the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the above example shows typical <select> usage. it is given an id attribute to enable it to be associated with a <label> for accessibility purposes, as well as a name attribute to represent the name of the associated data point submitted to the server. each menu option is defined by an <option> element nested inside the <select>. each <option> element should have a value attribute containing the data value to submit to the server when that option is selected. if no value attribute is incl...
...ver, these properties don't produce a consistent result across browsers, and it is hard to do things like line different types of form element up with one another in a column. the <select> element's internal structure is complex, and hard to control. if you want to get full control, you should consider using a library with good facilities for styling form widgets, or try rolling your own dropdown menu using non-semantic elements, javascript, and wai-aria to provide semantics. for more useful information on styling <select>, see: styling html forms advanced styling for html forms examples basic select the following example creates a very simple dropdown menu, the second option of which is selected by default. <!-- the second value will be selected initially --> <select name="choice"> ...
...ociated element permitted content zero or more <option> or <optgroup> elements. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role combobox with no multiple attribute and no size attribute greater than 1, otherwise listbox permitted aria roles menu with no multiple attribute and no size attribute greater than 1, otherwise no role permitted dom interface htmlselectelement specifications specification status comments html living standardthe definition of '<select>' in that specification. living standard html5the definition of '<select>' in that specification. recommendation ...

Global attributes - HTML: Hypertext Markup Language
following global attributes also exist: xml:lang and xml:base — these are inherited from the xhtml specifications and deprecated, but kept for compatibility purposes. the multiple aria-* attributes, used for improving accessibility. ...
...cument.getelementsbyclassname(). contenteditable an enumerated attribute indicating if the element should be editable by the user. if so, the browser modifies its widget to allow editing. the attribute must take one of the following values: true or the empty string, which indicates that the element must be editable; false, which indicates that the element must not be editable. contextmenu the id of a <menu> to use as the contextual menu for this element. data-* forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the html and its dom representation that may be used by scripts. all such custom data are available via the htmlelement interface of the element the attribute is set on. the htmlelement.dataset property...
... exportparts global attributes. html 5.2the definition of 'global attributes' in that specification. recommendation snapshot of html living standard. from html 5.1, itemid, itemprop, itemref, itemscope, and itemtype have been added. html 5.1the definition of 'global attributes' in that specification. recommendation snapshot of html living standard. from html5, contextmenu, draggable, dropzone, and spellcheck have been added. html5the definition of 'global attributes' in that specification. recommendation snapshot of html living standard. from html 4.01 specification, the concept of global attributes is introduced and the dir, lang, style, id, class, tabindex, accesskey, and title are now true global attributes. xml:lang which was initially part ...

simple-prefs - Archive of obsolete content
r and stores the full path and name of the file selected. { "type": "file", "name": "myfile", "title": "select a file" } directory displayed as a "browse" button that opens a directory picker and stores the full path and name of the directory selected. { "type": "directory", "name": "mydirectory", "title": "select a directory" } menulist displayed as a drop-down list. the type of the stored value depends on the default value. the options are specified by a mandatory "options" attribute, that is an array of objects with mandatory attributes "label" and "value" the values of the "value" attributes must be supplied as strings. the values of the "label" attributes prefixed with "{name}_options.", where {n...
...tes "label" and "value" the values of the "value" attributes must be supplied as strings. the values of the "label" attributes prefixed with "{name}_options.", where {name} is the name of the preference, are used as localization keys. if no matching entries are found, the value of the "label" attributes is used verbatim as labels. { "name": "typeofbreath", "type": "menulist", "title": "type of breath", "value": 0, "options": [ { "value": "0", "label": "fire" }, { "value": "1", "label": "cold" }, { "value": "2", "label": "disintegration" } ] } radio displayed as radio buttons. the type of the stored value dep...

Bookmarks - Archive of obsolete content
can use the bookmarks service, you need to get access to it: var bmsvc = components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); creating a bookmark folder creating a new bookmark folder is done using the nsinavbookmarksservice.createfolder() method. for example, to create a new folder in the bookmarks menu: var menufolder = bmsvc.bookmarksmenufolder; // bookmarks menu folder var newfolderid = bmsvc.createfolder(menufolder, "folder name here", bmsvc.default_index); this code locates the bookmarks menu's folder, then creates a new folder named "folder name here" in it. specifying default_index as the index at which to insert the new folder places it at the end of the list. you can easily change t...
... creating a new bookmark to create a new bookmark, use the nsinavbookmarksservice.insertbookmark() method. the uri for the bookmark needs to be specified using an nsiuri object. ...

Examples and demos from articles - Archive of obsolete content
it. [article] note: the filereader() constructor was not supported by internet explorer for versions before 10. for a full compatibility code, see also our crossbrowser possible solution for image preview. determine if an element has been totally scrolled [html] this example shows how to determine whether a user has completely scrolled an element or not. [article] css pure-css dropdown menu [html] with the :hover pseudo-class you can create complex cascade algorithms. this is a common technique used, for example, in order to create pure-css dropdown menus (that is only css, without using javascript). .[article] pure-css web gallery based on the :hover pseudoclass [zip] you can use the :hover pseudo-class in order to build an image gallery with full-size images shown only when mou...
...how to dynamically import scripts with javascript. css css tutorial aimed at complete beginners, this css tutorial for beginners introduces you to cascading style sheets (css). it guides you through the basic features of the language with practical examples that you can try for yourself on your own computer and illustrates the standard features of css that work in modern browsers. dropdown menus rules how to create pure-css dropdown menus. ...

Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
stered. the simplest way to do this is to write some javascript and xul code. at this point, it would be very helpful to have a bit of experience writing "regular" extensions (i.e. without using custom c++ components). if you've never done this, i strongly recommend that you think of a cool idea for something simple that you've always wanted to tweak in firefox and write it. just displaying a new menu item that opens a "hello, world!" dialog box would be already be a great exercise to get warmed up with. assuming you know how to write xul/javascript extensions, you're aware that the most important stuff goes in the chrome/ directory of your extension. well, the fact that you're also using c++ components doesn't change that one whit. so now you need to create the normal content/, locale/...
... create the normal content/, locale/ and skin/ directories in which to place your chrome files. personally i like placing these directly under the root directory of my module, but i don't suppose it makes any difference if you prefer putting them under a chrome/ subdirectory or whatever. let freedom reign! once you've written the necessary chrome files (for instance, an overlay that adds a menu item to instantiate and use one of your components), you need to package them up as part of your extension. this is accomplished through the use of a jar manifest. for our simple extension example, this file might look something like this: myextension.jar: % content myextension %content/ % locale myextension en-us %locale/ % skin myextensi...

Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
le"; var nodes = {}; document.documentelement.appendchild( jsontodom(["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: ...
...l", "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", removable: true, key: "mytestbutton123" }, [ "menupopup", { onpopupshowing: function(event) { addentrytopopup(this, document, window); } }, null ] ]; var capturednodes = {}; var toolbox = doc.getelementbyid("navigator-toolbox"); var palette = toolbox.palette; var domfragment = jsontodom(jsontemplatebtn, document, capturednodes); palette.appendchild(domfragment); alert("capturednode...

Handling Preferences - Archive of obsolete content
« previousnext » preferences in firefox mozilla applications are highly customizable. preferences are used to store settings and information to change their default behavior. to open the preferences window in firefox, select the following from the main menu: on windows, tools > options on mac, firefox > preferences on linux, edit > preferences note: keep in mind the usage of the terms "preferences" and "options" in different platforms. if you need to refer to the term "preference" in any of your locale files, you must change the string depending on the operating system. tip: you can use window.navigator.platform in your chrome code to figure out the operating system firefox is running on. you can use the hidden dom window in non-chrome code. firefox loads user preferences ...
...y of opening a preferences window is to open the add-ons manager, select the add-on, and then click on the preferences button. in order to have this button enabled in your extension you need to add the following line to install.rdf: <em:optionsurl>chrome://xulschoolhello/content/preferenceswindow.xul</em:optionsurl> if you want to open this window from a different place in the ui, such as a menu item or a button in a toolbar, you need to take into account that the opening behavior of a preferences window is different depending on the operating system. this is how we do it: openpreferences : function() { if (null == this._preferenceswindow || this._preferenceswindow.closed) { let instantapply = application.prefs.get("browser.preferences.instantapply"); let features = ...

Setting Up a Development Environment - Archive of obsolete content
essary to add this, but it's better so that it is consistent with the make command we'll see next. in the "start in" textbox you should choose %p (directory path of active project). if you don't see this textbox, click on the "more" button. you also have the option to save the command, by clicking on the "add to toolbox" checkbox. to see the toolbox, click on view > tabs > toolbox, from the main menu. with that, you should now have a very easy way to build your xpi, by just double clicking on the created commands. we can make it even better. once you're testing and debugging your code, you'll find that constantly building and installing an xpi can be very tedious. this is the reason why we introduced "make install". this only works if your extension is already installed in a firefox profile.
...rface when doing this. exercise set up a new firefox profile for xul school. make sure you can open and close your xul school firefox without having to close the instance of firefox you use to browse normally. make any modifications you want to the xul school project, run make install and restart firefox to see the extension work with your changes. install dom inspector. use it to locate the menu you created. hint: you can search for an element by id. inspect the css rules firefox applies to it by default. look at the final, computed style for the menu items. browse around the rest of the firefox dom, and try to figure out what the nodes correspond to in the firefox ui. install the firebug extension. open the firebug window and go to an ajax-heavy page such as gmail or facebook. open and...

The Box Model - Archive of obsolete content
x model is a significant improvement over the html layout model, which is mostly vertical. with xul you can define vertically oriented as well as horizontally oriented interfaces, providing greater flexibility in interface design. any xul interface can be broken down into the following basic components: boxes text images alignment and flexibility widths and heights margins and paddings menus, toolbar buttons, and even the most complex elements in xul are composed of these simple ingredients. complex elements are created from simpler ones through xbl, which will be covered later on. once you grasp this simple idea, you'll be able to use the dom inspector and css to mold xul elements and layouts with great precision and flexibility. most of the examples shown in the rest of this sect...
...99/xhtml"> then you can have an html:p (paragraph) element where you insert the result of parsing the property string. you can easily parse xml using the domparser object. since xul documents are strict xml, you can only use strict xhtml in xul, and not the more loosely-formatted forms of html. exercise use the dom inspector extension to look into the firefox chrome. select toolbar buttons, menu items, textboxes, etc. and look into the box model, css style rules and computed style views. look into the computed width and height values, and how the paddings and margins affect the dimensions of xul nodes. modify the hello world extension so that it changes the appearance of firefox drastically using only css. play with changing the dimensions and appearance of buttons, changing the backgro...

XUL School Tutorial - Archive of obsolete content
x extension development. it is recommended that you read through all of it at least once. while firefox changes rapidly, the content in this tutorial should be up to date and valid. ...
...evelopment. it is recommended that you read through all of it at least once. while firefox changes rapidly, the content in this tutorial should be up to date and valid. ...

Firefox addons developer guide - Archive of obsolete content
here else in mdc. the stuff about installing the dom inspector (https://developer.mozilla.org/en/firefox_addons_developer_guide/let%27s_build_a_firefox_extension#install_the_dom_inspector) is not accurate for firefox 3 or later, since it's no longer included in the firefox installer and must be downloaded from amo. filenames should use <code> styling. this is available from the style drop-down menu in the editor. variable and function names use <code> styling. xpi should be in all caps instead of written as ("xpi"). method and function names should have parentheses after them. for example, here: https://developer.mozilla.org/en/firefox_addons_developer_guide/let's_build_a_firefox_extension#init_method the text of the paragraph should begin "the <code>init()</code> method is as shown...
...should we keep this part ? gen's opinion: yes, because it is important for developers to make informed decisions regarding oss licenses and it was a part of the original guide. opinions: i think we should be careful about adding new contents to this guide. the original version of this ...

Localizing an extension - Archive of obsolete content
that looks like this: <!entity options_window_title "stockwatcher 2 preferences"> <!entity options_symbol.label "stock to watch: "> the "options_window_title" entity maps to the string "stockwatcher 2 preferences", which is used as the title of the preference window. the stockwatcher2.dtd file contains the mappings for the stockwatcher2.xul file: <!entity panel_loading "loading..."> <!entity menu_refresh_now.label "refresh now"> <!entity menu_apple.label "apple (aapl)"> <!entity menu_google.label "google (goog)"> <!entity menu_microsoft.label "microsoft (msft)"> <!entity menu_yahoo.label "yahoo (yhoo)"> update the xul files each xul file needs to reference its corresponding locale file. we also need to update the code to use the entities instead of the strings, so that the substituti...
...ds describes how to do it. note that the urls of the dtd files don't actually include the name of the localization to use. the chrome registry resolves the uris based on the user's current locale setting and the data you provide in your chrome manifest. then we simply replace each text string in our xul files with the corresponding entity. for example, in stockwatcher2.xul, we change this line: <menuitem label="refresh now" oncommand="stockwatcher.refreshinformation()"/> to <menuitem label="&menu_refresh_now.label;" oncommand="stockwatcher.refreshinformation()"/> do this for every string used in each xul file. update the chrome manifest to let firefox know about the locale files, we need to make a revision to our chrome.manifest file, adding one line for each localization: locale stockwat...

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
.3 it is in /usr/lib/x11/app-defaults. beware that in windows, that file is already there, so it must be saved before being replaced by ours, in order to come back to a normal state in case of problem. if neither original or personalized netscape.cfg is there, netscape won't start! // this file is not usable in its present form. ...
...mmon name, respectively mail and cn in ldap. [root@lugdunum /var/www/html/browser] $ more config_file_unix.jsc // functions you can use: // lockpref(name, value) user is disallowed from changing // (aka lock_pref()) // defaultpref(name, value) unless user overrides, this is value // (aka default_pref()) // unlockpref(name) unlock previously "lockpref"-ed name // config(name, value) usually for menus... // value = getpref(name) gets current setting // getldapattributes(host, base, filter, attributes) // getldapvalue(values, attribute) // .mime.type, .begin_mime_def, .end_mime_def.. // .plat // alert(message); // var = prompt(message); // var = getplatform() returns win32,... // getplatform().contains("unix")... // var = getenv(envvar) // var = putenv(envvar) // // objects/functions you *can...

Bookmark Keywords - Archive of obsolete content
marks. laying the groundwork we're going to pick a relatively easy example to illustrate this process: a keymark that will let the user jump straight to a specific bugzilla entry by entering its number. the quickest way to start is to simply look up any random bug in the bugzilla system-- the actual number doesn't matter. see figure 1 for an example. to file this bookmark open the "bookmarks" menu in the browser and select "add bookmark," or by of use the keyboard equivalent (e.g., <tt>cmd-d</tt> on macintosh). this will add a bookmark of the current page to the list of bookmarks. you can also file the bookmark into a folder by using the "file bookmark..." menu option. to open the bookmark manager go to "bookmarks" menu and select the "manage bookmarks" option. this will open up the bookma...
...urse of writing this article, a number of potentially useful bookmarks were considered as possible examples. instead of just throwing them away, we're providing them for you in the following table. even better, you can file them for future use by right-clicking (or holding down the control key and clicking on the link) and filing the bookmarks using the "file bookmark..." option in the contextual menu that pops up. once that's been done, making the keymark work is a simple matter of going into the bookmark manager and adding a keyword! bookmark suggested keywords find bugzilla entry bug, bugzilla, bz search devmo devmo, de google search google, gg dictionary search dictionary, dict, define, word thesaurus search thesaurus, like fedex tracking fedex ups tracking ups of course...

Creating a Microsummary - Archive of obsolete content
their content. the easiest way to get an xpath expression that points to the node in question is to use the xpath checker extension. install the extension (restarting firefox to complete installation) then go to the spread firefox home page, find the firefox download count (a large number at the bottom of the right-hand column), context click on the number, and select view xpath from the context menu. xpath checker will open a new window. the new window will include an xpath field that contains this xpath expression pointing to the download count node: id('download-count'). add a <value-of> element to the xslt <template> element whose select attribute contains that xpath expression: <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" ...
... for more information about microsummaries, see the microsummaries home page. ...

UI - Archive of obsolete content
note: this page documents the jetpack prototype, which is no longer under active development. ...
... note: this page documents the jetpack prototype, which is no longer under active development. ...

jspage - Archive of obsolete content
"event",initialize:function(a,f){f=f||window;var k=f.document;a=a||f.event;if(a.$extended){return a;}this.$extended=true;var j=a.type; var g=a.target||a.srcelement;while(g&&g.nodetype==3){g=g.parentnode;}if(j.test(/key/)){var b=a.which||a.keycode;var m=event.keys.keyof(b);if(j=="keydown"){var d=b-111; if(d>0&&d<13){m="f"+d;}}m=m||string.fromcharcode(b).tolowercase();}else{if(j.match(/(click|mouse|menu)/i)){k=(!k.compatmode||k.compatmode=="css1compat")?k.html:k.body; var i={x:a.pagex||a.clientx+k.scrollleft,y:a.pagey||a.clienty+k.scrolltop};var c={x:(a.pagex)?a.pagex-f.pagexoffset:a.clientx,y:(a.pagey)?a.pagey-f.pageyoffset:a.clienty}; if(j.match(/dommousescroll|mousewheel/)){var h=(a.wheeldelta)?a.wheeldelta/120:-(a.detail||0)/3;}var e=(a.which==3)||(a.button==2);var l=null;if(j.match(/over|ou...
...urn this;}c[d].keys.each(function(e){e.create({bind:this,delay:a,"arguments":b})(); },this);return this;},cloneevents:function(d,a){d=document.id(d);var c=d.retrieve("events");if(!c){return this;}if(!a){for(var b in c){this.cloneevents(d,b); }}else{if(c[a]){c[a].keys.each(function(e){this.addevent(a,e);},this);}}return this;}});element.nativeevents={click:2,dblclick:2,mouseup:2,mousedown:2,contextmenu:2,mousewheel:2,dommousescroll:2,mouseover:2,mouseout:2,mousemove:2,selectstart:2,selectend:2,keydown:2,keypress:2,keyup:2,focus:2,blur:2,change:2,reset:2,select:2,submit:2,load:1,unload:1,beforeunload:2,resize:1,move:1,domcontentloaded:1,readystatechange:1,error:1,abort:1,scroll:1}; (function(){var a=function(b){var c=b.relatedtarget;if(c==undefined){return true;}if(c===false){return false;}retur...

Mozilla Application Framework in Detail - Archive of obsolete content
s is very powerful since you could make improvements to the underlying application logic without having to rewrite the higher level code. our platform also can take advantage of other internet standards such as xslt and rdf. rdf, a core element to the framework, allows you to define dynamic elements in your ui (elements that may change after you have completed the application, such as a "history" menu item). xslt could be used to translate information from web services, rss, soap, or other xml-based languages and convert them into a form that you might display in your user interface. the gecko rendering engine gecko is the revolutionary rendering engine that offers advanced features for internet browsing anywhere across applications, computing platforms and devices. this innovation in browser...
...mlterm/"); if (getlasterror() == success) performinstall(); else { alert("error detected: "+getlasterror()); cancelinstall(); } other features a resource description framework (rdf) parser with support for creating rdf graphs programmatically or by parsing files, compositing multiple sources into a single rdf graph, querying and manipulating graphs, and populating xul widgets (trees, menus, etc.) with graph data; an xslt/xpath processor; scalable vector graphics (svg) rendering with support for a usable subset of the standard including all basic shapes, beziers, stroking and filling with opacity, and much of the dom; mathml rendering; an ecma-262 edition 3-compliant javascript engine; java integration with a bridge to xpcom, a java dom api, the open jvm integration (oji) faci...

Extensions - Archive of obsolete content
or extensions. extensions are built using the same methods as any mozilla-based extension. since prism is a totally separate host application, there are some prism-specific issues that you need to handle when creating your extension. most notably, the prism application id and the differences in the user interface (ui). extensions typically overlay the host application's ui to add toolbar buttons, menus and other features. one of prism's features is an extreme lack of ui elements, which means that trying to use the same overlays in firefox and prism is really not possible. the basics in order to install an extension in prism, you need to follow the guidelines for building a mozilla-based extension. to support prism specifically, you'll need to add prism to the list of target applications in the...
...this: <em:targetapplication> <!– prism –> <description> <em:id>prism@developer.mozilla.org</em:id> <em:minversion>0.8</em:minversion> <em:maxversion>1.0.0.*</em:maxversion> </description> </em:targetapplication> in addition to the install manifest changes, you may want to expose your extension into the prism ui. prism does have a few ui elements, such as a toolbox, toolbar, menubar, popup menus, statusbar and a container for the browser. you can use these ui elements to merge in your extension ui. see the prism main window xul file for the actual structure: webrunner.xulporting an existing extension since there aren't many extensions designed explicitly for prism, you may need to port your favorite extensions. this usually means extracting and editing the install.rdf fil...

Prism - Archive of obsolete content
prism is no longer developed by mozilla labs. there are now no alternatives. prism is a simple xulrunner-based browser that hosts web applications without the normal web browser user interface. prism is based on a concept called site-specific browsers (ssb). an ssb is designed to work exclusively with a single web application. it doesn’t have the menus, toolbars and other accoutrements of a traditional web browser. an ssb also offers tighter integration with the operating system and desktop than a typical web application running through a web browser. applications running in an ssb are therefore able to benefit from many of the advantages of the desktop and of the web at the same time. benefits separate process: web apps can hog memory or processor cycles or even bring down th...
...obe air and google gears. operating-system integration: binary components provided access to os-specific features like shortcut creation and dock/tray icons. we intend to propose these extensions for inclusion in future versions of xulrunner. firefox extension: a firefox extension, code-named "refractor", can be used to spin out new prism apps from inside the web browser. refractor adds a new menu item to call up the shortcut creation dialog for inside firefox. web apps can also point to a complete web app bundle or some elements of a web app (like higher resolution icons). refractor automatically takes this information into account. documentation frequently asked questions bundles ...

Using Breakpoints in Venkman - Archive of obsolete content
an will stop before the line executes. when a breakpoint is set, the margin will change to the letter "b", as in figure 2. if you execute this code again after having set this breakpoint, venkman will stop at line 81. (note: by default, venkman hides files file that appear to be part of the browser core; this includes extensions. to debug an extension, uncheck "exclude browser files" on the debug menu and your installed extension files should appear in the loaded scripts list.) venkman also indicates that one or more breakpoints have been set in the loaded scripts view, where red dots appear next to the files in which breakpoints have been set, along with the line number where the function begins whose code is being stopped. using breakpoints to debug when you set a breakpoint, you give venk...
...script that follows and stop if the result is true. the //@jsd_eval command will insert a breakpoint which is set to execute the script that follows without stopping and without logging the result. these meta comments can be used to insert debug-only code in your scripts with zero impact on production code. to enable meta comments in a script, select "scan for meta comments" from the context menu of the file in the loaded scripts view. when you add a meta comment, a normal breakpoint is created. you can change or delete this breakpoint just as you would a breakpoint created by hand. resources venkman introduction—previous article on venkman. venkman's home page on devmo. original document information authors: robert ginda, ian oeschger published 02 may 2003 ...

allowevents - Archive of obsolete content
do not get sent to their children; instead they are retargeted to the listitem and titlebar element itself. this means that elements placed inside a listitem do not respond to events, and instead clicking the mouse simply selects that item within the list. by setting the allowevents attribute to true, this special behavior is disabled, and the events are targeted the same as other elements. for menu, menuseparator, menuitem and treecol elements, as well as menu buttons, and the popup datepicker, mouse events are also retargeted to the element itself. however, the allowevents attribute is handled in a different way. instead, the allowevents may be set to true on a descendant instead. this does the same thing in that it allows events to be targeted normally, but allows this to be different for...
..., as well as menu buttons, and the popup datepicker, mouse events are also retargeted to the element itself. however, the allowevents attribute is handled in a different way. instead, the allowevents may be set to true on a descendant instead. this does the same thing in that it allows events to be targeted normally, but allows this to be different for each descendant. this behavior is used for menus, for instance, to allow a menu button to behave as a menu when clicking on it, yet have part of the menu behave as a button. for the latter, the allowevents attribute is set to true to have a click on the child button receive events instead of targeting all events at the menu. ...

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

panel.flip - Archive of obsolete content
for arrow popups, however, being able to flip horizontally makes sense. ...
...for arrow popups, however, being able to flip horizontally makes sense. this attribute, set to both, permits that behavior. ...

sizetopopup - Archive of obsolete content
« xul reference home sizetopopup type: one of the values below indicates how the menu width and the menupopup width are determined. if the sizetopopup attribute is left out or set to none, the menu will be its preferred width and the popup may extend outside of this width, unaffected by the maximum width of the menu itself. otherwise, the menu will size itself to at least the size of the popup. if the menu has a maximum width, the popup will also be this width. none the width of the popup will not be constrained to the size of the menu. pref the preferred width of the menu label or button will be the size needed for the popup contents. this is the default value for menulists. ...
...ize itself to at least the size of the popup. if the menu has a maximum width, the popup will also be this width. none the width of the popup will not be constrained to the size of the menu. pref the preferred width of the menu label or button will be the size needed for the popup contents. this is the default value for menulists. always both the preferred and minimum width of the menu label or button will be the same as that necessary for the menupopup. ...

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

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

contains - Archive of obsolete content
...
... ...

openPopup - Archive of obsolete content
anchor the popup may be either anchored to another node or opened freely. to anchor a popup to a node, supply an anchor node and set the position to a string indicating the manner in which the popup should be anchored. the anchor node does not need to be in the same document as the popup. unanchored popups may be created by supplying null as the anchor node. the direction in which the popup is oriented depends on the direction of the anchor. ...
...erent values. x, y for an anchored popup, the x and y arguments may be used to offset the popup from its anchored position by some number, measured in css pixels. an unanchored popup appears at the position specified by x and y, relative to the viewport of the document containing the popup node. in this case, the position and attributesoverride arguments are ignored. iscontextmenu the iscontextmenu argument should be true for context menus and false for all other types of popups. it affects menu item highlighting; that is, while a context menu is open, menus opened earlier do not highlight or execute their items. attributesoverride if the attributesoverride argument is true, the position attribute on the popup node overrides the position value argument...

Panels - Archive of obsolete content
panel with a script if desired. when you want to associate a panel with a button, place the <panel> element directly inside the button element. you also need to set the type attribute on the button to the value panel, or the button will look and behave like a regular button. the popup panel will, by default, appear with its topleft corner just underneath the bottom edge of the button, much as a menu does. the position can, however, be changed. for more information about positioning the popup, see positioning popups. only buttons (and toolbarbuttons) have this automatic behaviour which opens the popup when pressed. for other types of elements, you need to use a different technique as in the following example. <label value="search" popup="search-panel"/> <panel id="search-panel"> <label c...
...arch" popup="search-panel"/> the position attribute has been added to the panel element with the value 'after_start'. this causes the panel to be displayed not where the mouse was clicked but aligned along the bottom edge of the label. for more information about this attribute and other possible values that can be used, see positioning popups. it is also possible to open a panel like a context menu using the context attribute instead of the popup attribute. this works just like using context menus except that the panel element is used instead of the menupopup element. see context menus for more details on this. opening a panel with script the panel, like all popups, has an openpopup method which may be used to open the popup using a script. for example, the following would open a panel un...

selected - Archive of obsolete content
...
... ...

Property - Archive of obsolete content
builderview buttons canadvance cangoback cangoforward canrewind checked checkstate child children classname clickselectsall clientheight clientwidth collapsed color columns command commandmanager completedefaultindex container contentdocument contentprincipal contenttitle contentview contentvieweredit contentviewerfile contentwindow contextmenu control controller controllers crop current currentindex currentitem currentnotification currentpage currentpane currentset currenturi customtoolbarcount database datasources date dateleadingzero datevalue decimalplaces decimalsymbol defaultbutton defaultvalue description dir disableautocomplete disableautocomplete disableautoselect disabled...
... hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label labelelement lastpermanentchild lastselected left linkedpanel listboxobject locked markupdocumentviewer max maxheight maxlength maxrows maxwidth menu menuboxobject menupopup min minheight minresultsforpopup minwidth minute minuteleadingzero mode month monthleadingzero name next nomatch notificationshidden object observes onfirstpage onlastpage open ordinal orient pack pagecount pageid pageincrement pageindex pagestep parentcontainer palette persist persistence placeholder pmi...

Rule Compilation - Archive of obsolete content
of the vbox will make the template builder process the query and output content. once done, the correct length can be returned. all of this is transparent to the xul developer. when the template builder decides to start generation is determined automatically, and you don't need to do anything special to get this to happen. however, there are two cases where content is not generated automatically: menus and child tree items. content inside a menu is not generated until the menu is opened. this makes sense since the user can't see the contents of the menu until it is open. however, it also means that the dom api usage, such as an attempt to get the number of child nodes as above, will also not include generated items until the menu is opened. this is an important distinction. that means that you...
...il the menu is opened. this makes sense since the user can't see the contents of the menu until it is open. however, it also means that the dom api usage, such as an attempt to get the number of child nodes as above, will also not include generated items until the menu is opened. this is an important distinction. that means that you will not be able to rely on being able to retrieve the generated menu items until the menu is opened. a similar rule applies for child tree items. the children are not generated until the user presses the twisty to open the container or when a script opens a row. lazy generation comes in handy for menus and trees especially when dealing with recursive items. it would be rather time consuming to generate output for every item in a tree, even for those not displayed,...

Simple Query Syntax - Archive of obsolete content
mple might be: <triple subject="?photo" predicate="http://www.xulplanet.com/rdf/country" object="http://www.daml.org/2001/09/countries/iso#it"/> adjusting simple query conditions the simple syntax is limited in the kind of filtering it can do, however it is often sufficient for many purposes. naturally, if you want to set a filter dynamically, as the photos example does with a menulist, you will need to set the attribute on the rule element and rebuild the template. function applyfilter(country) { var rule = document.getelementbyid("filterrule"); if (country){ rule.setattributens("http://www.xulplanet.com/rdf/", "country", country); } else { rule.removeattributens("http://www.xulplanet.com/rdf/", "country"); } document.getelementbyid("photoslist").buil...
...", "country"); } document.getelementbyid("photoslist").builder.rebuild(); } this version of the applyfilter function only needs to set or remove the attribute on the rule as necessary. note that the namespace aware functions (with the suffix ns) need to be used to set or remove attributes with namespaces. this example assumes that the rule has been given an id of 'filterrule'. note that the menulist itself must use the extended syntax since it doesn't iterate over the children of a resource. filtering using multiple tests as mentioned earlier, you can filter by several criteria by using multiple attributes. for instance: <rule id="filterrule" dc:title="obelisk" r:country="http://www.daml.org/2001/09/countries/iso#it"> this rule filters on two criteria which must both mat...

Using Recursive Templates - Archive of obsolete content
both the rdf and xml datasource types support recursion. ...
... <person name="julius caesar"/> <person name="ferdinand magellan"/> </group> <group name="female"> <person name="cleopatra"/> <person name="laura secord"/> </group> </people> we could display this data in a flat list by using the right query: <query expr="group/person/"> or, we could display one level for the two groups, and use another level for each person. <groupbox type="menu" datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="*"/> <action> <vbox uri="?" class="indent"> <label value="?name"/> </vbox> </action> </template> </groupbox> in this simplified example, the xpath expression just gets the list of child elements of the reference node. for the outermost iteration, a vbox is created with a child label. si...

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

Advanced Rules - Archive of obsolete content
ecify the criteria for matching a given resource. you can specify a number of conditions, all of which must match. in the simple rule syntax, the conditions are placed directly on the rule element itself. if the conditions match for a resource, the content placed within the actions tag is generated. in the simple syntax, the content is placed directly inside the rule. rule conditions when a tree, menu or other element with a datasource generates content, the template builder first finds the resource referred to by the ref attribute. it then iterates over all that resource's child resources. it applies each resource to the conditions. if the conditions match for that resource, the content in the actions element is generated for that resource. if the conditions do not match, no content is genera...
...ect="?city" predicate="http://www.xulplanet.com/rdf/weather#name" object="?name"/> <triple subject="?city" predicate="http://www.xulplanet.com/rdf/weather#prediction" object="?pred"/> </conditions> generating content the content to generate for a rule is specified inside the action element. this should be the content for the rows of the tree, menu items, or whatever content you want to generate. within the content, you can refer to variables that were defined in the conditions. thus, in the weather example above, you could use the variables 'name' or 'pred' to display the city or prediction. you can use the 'list' or 'city' variables also, but they hold resources, not text, so they won't likely have meaningful values to users. in the simpl...

Creating a Wizard - Archive of obsolete content
e <?xml version="1.0"?> <?xml-stylesheet 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...
...the wizard will be formatted automatically, with a title across the top and a set of buttons along the bottom. the user can navigate between the pages of the wizard with the back and next buttons. these buttons will enable and disable themselves at the appropriate moments. in addition, on the last page, the finish button will appear. all of this is autom...

XUL Structure - Archive of obsolete content
se in keeping with the chrome packages that are included with mozilla. to further the confusion, there are two other places where the word "chrome" might appear. these are the -chrome command line argument and the chrome modifier to the window.open() function. neither of these features grant extra privileges; instead they are used to open a new top-level window without the browser ui such as the menu and toolbar. you will commonly use this feature in more complex xul applications since you wouldn't want the browser ui to exist around your dialog boxes. the files for a package are usually combined into a single jar file. a jar file may be created and examined using a zip utility. for instance, you can open the jar files in mozilla's chrome directory to see the basic structure of a package. al...
...xt used by the package for a specific language. the locale structure is similar to the others, so it won't be listed here. the localized text is stored in two types of files: dtd files and properties files. the dtd files have a .dtd extension and contain entity declarations, one for each text string that is used in a window. for example, the file browser.dtd contains entity declarations for each menu command. in addition, keyboard shortcuts for each command are also defined, because they may be different for each language. dtd files are used by xul files so, in general, you will have one per xul file. the locale part also contains properties files, which are similar, but are used by script files. the file browser.properties contains a few such localized strings. this structure allows you to ...

XUL Accesskey FAQ and Policies - Archive of obsolete content
for example, an apply button may have the letter a underlined. on windows and unix, pressing alt+a is a convenient way to push that button. on macintosh, accesskeys are available only in html not in xul, and they are activated using ctrl+letter instead of alt. how is an accesskey added to a form control? an accesskey can be added to an html or xul form control or label by using the accesskey attribute. ...
...s accesskey implementation will first try to underline a letter of the same case, but if there isn't one it will fall back on a letter of the opposite case. our preference is to underline the first letter of one of the words, so it's important to be aware of this quirk. avoid duplicates don't use the same accesskey letter twice in the same window. be especially careful of drop down menus in the same window. for example, in the manage bookmarks dialog, don't use f, e, v, t or h (file, edit, view, tasks, help). help wanted: it would be useful to have an automated tool to check for duplicate and missing accesskeys in xul files. make it easy to see use letters at the beginning of the first or second word of the label. use a distinctive consonant or a vowel in the l...

autohide - Archive of obsolete content
...
... ...

box - Archive of obsolete content
x orient="horizontal"> <label value="zero"/> <box orient="vertical"> <label value="one"/> <label value="two"/> </box> <box orient="horizontal"> <label value="three"/> <label value="four"/> </box> </box> 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, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

content - Archive of obsolete content
gs ("banderas"), establezca dont-build-content, ("no almacenar contenido"), use treeitem en su lugar. para más información, se encuentra disponible el tutorial xul. ...
...encuentra disponible el tutorial xul. propiedades tag, uri ejemplos (no son necesarios) atributos inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width propiedades tag type: tag name this may be set to a tag name. if set, the conditions will only match if the template...

image - Archive of obsolete content
d be reloaded. never the image will be loaded from the cache if possible. properties accessibletype type: integer a value indicating the type of accessibility object for the element. src type: url gets and sets the value of the src attribute. ...
...ssibletype type: integer a value indicating the type of accessibility object for the element. src type: url gets and sets the value of the src attribute. ...

listcol - Archive of obsolete content
ol flex="1"/> <listcol/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> 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, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

listcols - Archive of obsolete content
1"/> <listcol flex="1"/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> 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, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

notificationbox - Archive of obsolete content
ies currentnotification, allnotifications, notificationshidden methods appendnotification, getnotificationwithvalue, removeallnotifications, removecurrentnotification, removenotification, removetransientnotifications, 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, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width...
...ton description as passed to appendnotification. the element which was the target of the button press event. if the return value from this function is not true, then the notification is closed. the notification is also not closed if an error is thrown. label - the label to appear on the button popup - the id of a popup for the button. if null, the button is not a button popup (e.g. a menu). the type property must also be set to "menu", or "menu-button". isdefault - if true, this is the default button. there can be only one default button. if no button has this set, the first button in the array is the default. type - a string. valid values are "menu-button" and "menu" which must be set if the button is to provide a popup via the popup property. getnotificationwithvalue( value...

param - Archive of obsolete content
within the query preceded by a colon. ...
... value integer 32 bit integer int64 64 bit integer double double-precision floating-point number string string literal, the default value properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), ge...

popup - Archive of obsolete content
...
... ...

prefpane - Archive of obsolete content
ll be opened using the help viewer when the help button is pressed. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. onpaneload type: script code code defined here is called when the pane has been loaded, much like the load event for a window. selected type: boolean this attribute will be set to true for the currently selected prefpane. to chan...
... type: dom nodelist holds a list of the ui elements in the pane that are attached to preferences. preferences type: dom nodelist holds a list of the preference elements in the pane. selected type: boolean this property's value is true if this element is selected, or false if it is not. this property is read only. this property is available for menuitem and menuseparator elements in firefox 3. src type: url gets and sets the value of the src attribute. methods domelement getpreferenceelement(in domelement startelement) preferenceforelement( uielement ) return type: preference element returns the preference element to which a user interface element is attached. void userchangedvalue(in d...

rule - Archive of obsolete content
the rule will only match the corresponding tag. this may be used to have separate rules for leaf and container nodes with different tags. parsetype type: string if this attribute is set to integer, the rule will only match rdf nodes with a parse type of integer. ...
... nodes with different tags. parsetype type: string if this attribute is set to integer, the rule will only match rdf nodes with a parse type of integer. ...

scrollbar - Archive of obsolete content
pageincrement type: integer the amount by which the value of the curpos or value attribute changes when the tray of the scroll bar (the area in which the scroll bar thumb moves) is clicked, or when the page up or page down keys are pressed. the default value is 10. ...
...the tray of the scroll bar (the area in which the scroll bar thumb moves) is clicked, or when the page up or page down keys are pressed. the default value is 10. ...

splitter - Archive of obsolete content
splitter is actually collapsed in. since collapse="both" is a gecko 1.9+ feature, this will have no effect on earlier versions. before the element immediately before the splitter is collapsed. after the element immediately after the splitter is collapsed. ...
...earlier versions. before the element immediately before the splitter is collapsed. after the element immediately after the splitter is collapsed. ...

stringbundle - Archive of obsolete content
butes src properties applocale , src, stringbundle, strings methods getformattedstring, getstring examples (example needed) attributes src type: uri the uri of the property file that contains the localized strings. ...
...e needed) attributes src type: uri the uri of the property file that contains the localized strings. ...

tabbrowser - Archive of obsolete content
y views of web documents. it is similar to the browser element, except that multiple documents can be displayed, each in a separate tab. note: starting in firefox 3 (xulrunner/gecko 1.9), this is only used in the main firefox window and cannot be used in other xul windows by third-party applications or extensions. ...
...enable autocomplete of fields. autocompletepopup type: id the id of a popup element used to hold autocomplete results for the element. autoscroll type: boolean set to false to disable autoscroll for this browser. if this attribute is set to true or omitted, autoscroll will be enabled or depending on the user preference general.autoscroll. contentcontextmenu type: id the id of a menupopup element serving as the context menu for the content area in the tabbrowser. contenttooltip type: id the id of a tooltip element to be used for the content area in the tabbrowser. onbookmarkgroup not in firefox type: script code this code executes when the user chooses the "bookmark this group of tabs" command. ...

tabpanels - Archive of obsolete content
l. attributes selectedindex properties selectedindex, selectedpanel examples (example needed) attributes selectedindex type: integer gets and sets the index of the currently selected panel. the first item is at index 0. ...
...tedindex type: integer gets and sets the index of the currently selected panel. the first item is at index 0. inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible type: nsiaccessible returns the accessibility object for the element. ...

tabs - Archive of obsolete content
this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. onclosetab type: script code this script will be called when the close tab button is clicked. onnewtab not in firefox type: script code this script will be called when the new tab button is clicked. onselect type: script code this event is sent to the tabs elemen...
...selected) when it is changed either via this property, the selectedindex property, or changed by the user. tabbox type: tabbox element returns the tabbox element that contains the tabs. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), gete...

textbox - Archive of obsolete content
this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. focused type: boolean this attribute is true if the element is focused. emptytext deprecated since gecko 2 type: string a string that appears in the textbox when it has no value. this is superseded by the placeholder attribute in gecko 2.0. the old name is retained for comp...
...he label attribute if it is present and not empty. otherwise it returns the value of the associated label element, if applicable. otherwise it returns the placeholder or emptytext property. the getter is mostly useful for screen readers. note: prior to firefox 3, and always in thunderbird and seamonkey, the label property of an autocomplete textbox returns its value, for compatibility with the menulist element. max type: integer gets and sets the value of the max attribute. maxlength type: integer the maximum number of characters that the textbox allows to be entered. min type: integer gets and sets the value of the min attribute. placeholder type: string gets and sets a string that appears in the textbox when it has no value. ...

toolbar - Archive of obsolete content
accesskey="p" label="groups"/> <toolbarbutton id="nav-events" accesskey="e" label="events" disabled="true"/> </toolbar> </toolbox> attributes autohide type: boolean when set to true, the toolbar will be invisible unless the alt key is pressed by the user. when set to false, the default, the toolbar is visible. this only has an effect on windows and needs to be combined with type="menubar" and a menubar element. currentset not in seamonkey 1.x type: comma-separated string the current set of displayed items on the toolbar. this will be modified when the user customizes the toolbar. the value of this attribute should be a comma-separated list of item ids from the toolbarpalette or, additionally, any of the following strings: "separator", "spring", "spacer". customi...
...attribute defines the default for all toolbars that don't specify an icon size. mode not in seamonkey 1.x type: one of the values below how the toolbarbuttons on the toolbar are displayed. icons show only icons. text show only text. full show both. toolbarname not in seamonkey 1.x type: string the name of the toolbar, which is listed on the show/hide toolbars menu. properties accessibletype type: integer a value indicating the type of accessibility object for the element. currentset not in seamonkey 1.x type: comma-separated list of strings holds a comma-separated list of the ids of the items currently on the toolbar. for spacers, separators, and flexible spacers the following strings are used instead of ids: "spacer", "separator", "s...

toolbarpalette - Archive of obsolete content
<toolbarbutton id="toolbarpalette-button" class="toolbarbutton-class" label="&mylabel;" tooltiptext="&mytiptext;" oncommand="somefunction()"/> </toolbarpalette> 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, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width...
...inheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dis...

tree - Archive of obsolete content
nsitreeview no for this tree you implement the nsitreeview interface yourself. the tree's data is retrieved from this custom view. the custom view should be attached to the tree by setting its view property. more information is available in the xul tutorial. also tree widget changes. relevant accessbility guidelines provide alternative access (for example, via menus) to column picker and for header behaviors like sorting (these have no default keyboard access). attributes disablekeynavigation, disabled, editable, enablecolumndrag, flags, hidecolumnpicker, onselect, rows, seltype, statedatasource, tabindex, treelines properties accessibletype, builderview, columns, contentview, currentindex, disablekeynavigation, disabled, editingco...
...this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. disablekeynavigation type: boolean if this attribute is not used, the user can navigate to specific items within the element by pressing keys corresponding to letters in the item's label. this is done incrementally, so typing more letters with select more specific items. this featur...

Debugging a XULRunner Application - Archive of obsolete content
enkman from addons.mozilla.org (v0.9.87 at the time of writing). to download the package, right-click the install link and save the package locally. create a directory <application>/distribution/bundles/venkman. unzip the package into that directory. add <script src="chrome://venkman/content/venkman-overlay.js" /> to one of your xul windows. add ui to open venkman to your window (it could be a menu item or a toolbar button). make it call start_venkman() when activated. troubleshooting x-jsd is not a registered protocol if the message "x-jsd is not a registered protocol" appears when trying to open *.js files in venkman, then add an empty file called .autoreg in the same directory as your xulrunner binary. if .autoreg already exists, then edit it to force the last modified time to be upd...
...components file. when adding a component to a xulrunner application, change the buildid in application.ini. function toopenwindowbytype is not defined if you get an error that "function toopenwindowbytype is not defined" you may add the following function to your scripts (doesn't seem to be in the venkman overlay): function toopenwindowbytype(intype, uri) { var winopts = "chrome,extrachrome,menubar,resizable,scrollbars,status,toolbar"; window.open(uri, "_blank", winopts); } i can't see my pages, functions ... if your pages are not in the loaded script window, uncheck the menu item "debug\exclude browser files" and find them in open windows tab when opening a js file in venkman, the code is unformatted and i get the following error in the jsconsole... security error: content at x-j...

Gecko Compatibility Handbook - Archive of obsolete content
net explorer the web server does not properly implement the fall back negotiation for ssl. the web server administrator needs to upgrade the ssl software. in order to use a site with a defective implementation of ssl, visitors need to disable tls in their netscape 6/7 or mozilla browser until the site has upgraded to software that correctly implements ssl. dhtml menus implemented using hiermenu have problems the hiermenu version is obsolete. the earliest version of hiermenu only supported netscape navigator 4.x and internet explorer 4.x and above. later versions did support netscape 6; however, in netscape 6.1 and higher, support for internet explorer's proprietary offsetxxx properties results in hiermenu placing popups in the wrong position. the most rece...
... hiermenu have problems the hiermenu version is obsolete. the earliest version of hiermenu only supported netscape navigator 4.x and internet explorer 4.x and above. later versions did support netscape 6; however, in netscape 6.1 and higher, support for internet explorer's proprietary offsetxxx properties results in hiermenu placing popups in the wrong position. the most recent versions of hiermenu fully support all gecko-based browsers. upgrade to the most recent version of hiermenu common coding and server problems this section details solutions to the most common problems affecting standards-based browsers as well as issues that may specifically affect gecko browsers. proprietary html problem: using browser-specific proprietary html markup (such as <layer...

NPN_GetValue - Archive of obsolete content
values for this parameter are npnvxdisplay (the current display), npnvxtappcontext (the browser's xtappcontext), and npnvnetscapewindow (the browser toplevel window in which the plugin is displayed). you can use npnvnetscapewindow to obtain the appropriate window for the wm_transient_for property of a dialog box created from the plug-in. microsoft windows you can use this method to help create a menu or dialog box for a windowless plug-in. in order to bring up popup menus and modal dialogs, a plug-in needs a parent window. a windowless plug-in does not receive its own native window. instead, it draws directly into the drawable given to it. use the npnvnetscapewindow value to get the native window on which plug-in drawing occurs. the method returns a value of type hwnd. in many cases, a plug-i...
...ndowless plug-in does not receive its own native window. instead, it draws directly into the drawable given to it. use the npnvnetscapewindow value to get the native window on which plug-in drawing occurs. the method returns a value of type hwnd. in many cases, a plug-in may still have to create its own window (a transparent child window of the browser window) to act as the owner window for popup menus and modal dialogs. this transparent child window can have its own windowproc within which the plug-in can deal with wm_command messages sent to it a result of tracking the popup menu or modal dialog. see also npn_setvalue, npp_getvalue ...

Building a Theme - Archive of obsolete content
df is malformed, it is helpful to load it into firefox using the file->open file command and it will report xml errors to you. see install manifests for a complete listing of the required and optional properties. save the file. styling the browser's ui with css firefox's user interface is written in xul and javascript. xul is an xml grammar that provides user interface widgets like buttons, menus, toolbars, trees, etc. user actions are bound to functionality using javascript. these xul elements are styled using css. if you don't know css, it's going to be a steep learning curve, and you may want to try some html-based tutorials to start with. the browser ui has absolutely no styling on its own - if you try to start up with an empty theme, firefox will be unusable, as the button elements...
... you should have installed in the setup step. you can use this to inspect any element in a web page or an xul document, which makes it invaluable for themes. updating the toolbar's styling note in firefox 4.0 and up, the highlight feature of dom inspector is broken. to workaround this, disable hardware acceleration in firefox' options. open up the dom inspector now (located under the "tools" menu), and go to "file->inspect chrome document". this will be a menu containing all the xul documents currently open in firefox. pick the first document with a web page title, like "firefox start page" and select it. for this tutorial, we're going to update the background color of the toolbars. select the node finding tool (the arrow-plus-box in the top-left corner of the dom inspector), and click ...

Theme changes in Firefox 4 - Archive of obsolete content
hat the above add-on button icon sizes fit correctly. note: add-ons always use a 24x24 pixels icon when the button is displayed in the toolbar customization palette. default values of the iconsize attribute on browser toolbars if the theme doesn't override the value of the iconsize attribute, the following defaults are used: toolbar element id default iconsize value menu bar #toolbar-menubar small navigation bar #nav-bar small or large depending on user preference. bookmarks toolbar #personaltoolbar small tab bar #tabstoolbar small add-on bar #addon-bar small custom toolbars some other value small or large depending on user preference. overriding the default values themes can...
... small icons on the navigation bar regardless of the user preference. thus, it includes this rule in browser.css: #nav-bar { counter-reset: smallicons; } to use large icons for add-on buttons in the bookmarks toolbar when the related user preference is set: #navigator-toolbox[iconsize="large"] > #personaltoolbar { counter-reset: largeicons; } to use large icons everywhere, including the menu bar, regardless of the user preference: #navigator-toolbox > toolbar, #addon-bar { counter-reset: largeicons; } creating a theme that works for firefox 4 on mac os x create a new directory (for example, my_theme). inside that, create another new directory chrome. now copy all of the directories from omni.jar mentioned above into it. then copy all of icon.png, install.rdf and preview.png fro...

Desktop mouse and keyboard controls - Game development
ent input if you want to keep the support for mobile touch interactions. keyboard the whole game can be controlled with just the keyboard and nothing else. the built in this.game.input.keyboard object manages the input from the keyboard and has a few helpful methods like addkey() and isdown(). there's also the phaser.keycode object, which contains all the available keyboard keys: in the main menu of the game we can add an extra way to begin playing. the start button can be clicked to do so, but we can use the enter key to do the same: var keyenter = this.game.input.keyboard.addkey(phaser.keycode.enter); var keyenter.ondown.add(this.clickstart, this); you can use addkey() to add any key the phaser.keycode object has to offer. the ondown() function is executed whenever the enter key is pr...
...or any key being pressed and move on: this.input.keyboard.ondowncallback = function() { if(this.statestatus == 'intro') { this.hideintro(); } }; this hides the intro and starts the actual game, without us having to set up another new key control just for this. pause and game over screens to make the game fully playable with keyboard it should be possible to go back to the main menu, continue playing, or restart the game from the pause and game over screens. it can be done exactly the same as before — by capturing key codes and performing actions. for example, by specifying phaser.keycode.backspace or phaser.keycode.delete you can hook up an action to fire when the delete/backspace button is pressed. summary ok, we've dealt with touch, keyboard and mouse controls. now le...

Implementing game control mechanisms - Game development
as. setting up the environment let's start with a quick overview of the game's folder structure, javascript files and in-game states, so we know what's happening where. the game's folders look like this: as you can see there are folders for images, javascript files, fonts and sound effects. the src folder contains the javascript files split as a separate states — boot.js, preloader.js, mainmenu.js and game.js — these are loaded into the index file in this exact order. the first one initializes phaser, the second preloads all the assets, the third one controls the main menu welcoming the player, and the fourth controls the actual gameplay. every state has its own default methods: preload(), create(), and update(). the first one is needed for preloading required assets, create() is exe...
...e() function to make an action: update: function() { // ... if(this.game.input.mousepointer.isdown) { // do something } // ... } this will be executed whenever the mouse button is pressed, and it will be checked against the input's isdown boolean variable on every frame of the game. that should give you some understanding of the project structure. we'll be playing mostly with the mainmenu.js and game.js files, and we'll explain the code inside the create() and update() methods in much more detail in later articles. pure javascript demo there's also a small online demo with full source code available on github where the basic support for the control mechanisms described in the articles is implemented in pure javascript. it will be explained in the given articles themselves below,...

Gecko FAQ - Gecko Redirect 1
, xml, svg, etc), advanced rendering capabilities including compositing and transformations, and support for embedded javascript and plugins. gecko is so fast and so powerful that it's being used to create the user interface of some applications ("chrome") as well. in other words, gecko will not only be displaying the document's content, but it will also be painting the scrollbars, toolbars, and menus on the screen as well. for more information see xul. how is a layout engine like gecko different from a web browser? gecko provides the foundation needed to display content on the screen, including a layout engine and a complementary set of browser components. however, gecko does not package all of these components alongside other interface modules in a coherent, user-friendly application (inc...
...e screen as well. for more information see xul. how is a layout engine like gecko different from a web browser? gecko provides the foundation needed to display content on the screen, including a layout engine and a complementary set of browser components. however, gecko does not package all of these components alongside other interface modules in a coherent, user-friendly application (including menus, toolbars, etc.), such as firefox. mozilla.org assembles the necessary components into its applications, such as firefox, thunderbird, seamonkey, which are available for free download from mozilla.org. netscape released its own version of the browser branded as netscape navigator. other companies release their own software and hardware products that use gecko. see xulrunner hall of fame for a p...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
aracter set glossary, character encoding, character set a character set is an encoding system to let computers know how to recognize character, including letters, numbers, punctuation marks, and whitespace. 74 chrome browser, chrome, glossary, webmechanics in a browser, the chrome is any visible aspect of a browser aside from the webpages themselves (e.g., toolbars, menu bar, tabs). this is not to be confused with the google chrome browser. 75 cipher cryptography, glossary, privacy, security in cryptography, a cipher is an algorithm that can encode cleartext to make it unreadable, and to decode it back. 76 cipher suite cryptography, glossary, security a cipher suite is a combination of a key exchange algorithm, authentica...
... falsy codingscripting, glossary, javascript a falsy (sometimes written falsey) value is a value that is considered false when encountered in a boolean context. 142 favicon glossary, intro, favicon, user agent a favicon (favorite icon) is a tiny icon included along with a website, which is displayed in places like the browser's address bar, page tabs and bookmarks menu. 143 fetch directive csp, http, security csp fetch directives are used in a content-security-policy header and control locations from which certain resource types may be loaded. for instance, script-src allows developers to allow trusted sources of script to execute on a page, while font-src controls the sources of web fonts. 144 fetch metadata request header f...

Introduction to CSS layout - Learn web development
t panels sit on top of one another and are shown and hidden as desired, or information panels that sit off screen by default, but can be made to slide on screen using a control button. fixed positioning is very similar to absolute positioning, except that it fixes an element relative to the browser viewport, not another element. this is useful for creating effects such as a persistent navigation menu that always stays in the same place on the screen as the rest of the content scrolls. sticky positioning is a newer positioning method which makes an element act like position: static until it hits a defined offset from the viewport, at which point it acts like position: fixed. simple positioning example to provide familiarity with these page layout techniques, we'll show you a couple of quic...
...ent that becomes this container and we will take a look at that in the lesson on positioning. fixed positioning fixed positioning removes our element from document flow in the same way as absolute positioning. however, instead of the offsets being applied from the container, they are applied from the viewport. as the item remains fixed in relation to the viewport we can create effects such as a menu which remains fixed as the page scrolls beneath it. for this example our html is three paragraphs of text, in order that we can cause the page to scroll, and a box to which we will give position: fixed. <h1>fixed positioning</h1> <div class="positioned">fixed</div> <p>paragraph 1.</p> <p>paragraph 2.</p> <p>paragraph 3.</p> fixed positioning example <h1>fixed positioning</h1> <div class...

Positioning - Learn web development
ther like it no longer exists! well, in a way, this is true. an absolutely positioned element no longer exists in the normal document layout flow. instead, it sits on its own layer separate from everything else. this is very useful: it means that we can create isolated ui features that don't interfere with the layout of other elements on the page. for example, popup information boxes and control menus; rollover panels; ui features that can be dragged and dropped anywhere on the page; and so on... second, notice that the position of the element has changed — this is because top, bottom, left, and right behave in a different way with absolute positioning. rather than positioning the element based on its relative position within the normal document layout flow, they specify the distance the e...
...its nearest positioned ancestor (the initial containing block if there isn't one), fixed positioning usually fixes an element in place relative to the visible portion of the viewport, except if one of its ascendants is a fixed containing block due to its transform property being different from none. this means that you can create useful ui items that are fixed in place, like persisting navigation menus that are always visible no matter how much the page scrolls. let's put together a simple example to show what we mean. first of all, delete the existing p:nth-of-type(1) and .positioned rules from your css. now, update the body rule to remove the position: relative; declaration and add a fixed height, like so: body { width: 500px; height: 1400px; margin: 0 auto; } now we're going to gi...

Typesetting a community school homepage - Learn web development
sts and list items works well with the styling of the overall page. each list item should have the same line-height as a paragraph line, and each list should have the same spacing at its top and bottom as you have between paragraphs. give your list items a nice bullet, appropriate for the design of the page. it is up to you whether you choose a custom bullet image or something else. ...
...ith the styling of the overall page. each list item should have the same line-height as a paragraph line, and each list should have the same spacing at its top and bottom as you have between paragraphs. give your list items a nice bullet, appropriate for the design of the page. it is up to you whether you choose a custom bullet image or something else. navigation menu: style your navigation menu so that it has an appropriate look for the look and feel for the page. hints and tips you don't need to edit the html in any way for this exercise. you don't necessarily have to make the nav menu look like buttons, but it needs to be a bit taller so that it doesn't look silly on the side of the page; also remember that you need to make this one a vertical nav menu. example the following ...

Structuring a page of content - Learn web development
ee the assessment or further help section at the bottom of this page. project brief for this project, your task is to take the content for the homepage of a bird watching website and add structural elements to it so it can have a page layout applied to it. it needs to have: a header spanning the full width of the site containing the main title for the page, the site logo, and the navigation menu. ...
...and the navigation menu. the title and logo appear side by side once styling is applied, and the navigation appears below those two items. a main content area containing two columns — a main block to contain the welcome text, and a sidebar to contain image thumbnails. a footer containing copyright information and credits. you need to add a suitable wrapper for: the header the navigation menu the main content the welcome text the image sidebar the footer you should also: apply the provided css to the page by adding another <link> element just below the existing one provided at the start. hints and tips use the w3c nu html checker to catch unintended mistakes in your html, css, and svg — mistakes you might have otherwise missed — so that you can fix them. you don't n...

What’s in the head? Metadata in HTML - Learn web development
d like you to go to our github repo and download a copy of our title-example.html page. to do this, either copy and paste the code out of the page and into a new text file in your code editor, then save it in a sensible place. press the "raw" button on the github page, which causes the raw code to appear (possibly in a new browser tab). next, choose your browser's file > save page as... menu and choose a sensible place to save the file. now open the file in your browser. you should see something like this: it should now be completely obvious where the <h1> content appears, and where the <title> content appears! you should also try opening the code up in your code editor, editing the contents of these elements, then refreshing the page in your browser. have some fun with it...
...search engines (such activities are termed search engine optimization, or seo.) active learning: the description's use in search engines the description is also used on search engine result pages. let's go through an exercise to explore this go to the front page of the mozilla developer network. view the page's source (right/ctrl + click on the page, choose view page source from the context menu.) find the description meta tag. it will look something like this (although it may change over time): <meta name="description" content="the mdn web docs site provides information about open web technologies including html, css, and apis for both web sites and progressive web apps."> now search for "mdn web docs" in your favorite search engine (we used google.) you'll notice the descri...

Index - Learn web development
161 fundamental text and font styling article, beginner, css, guide, style, text, alignment, family, font, shorthand, spacing, weight we hoped you enjoyed playing with text in this article! the next article will give you all you need to know about styling html lists. 162 styling links article, beginner, css, focus, guide, learn, links, pseudo-class, hover, hyperlinks, menus, tabs we hope this article has provided you with all you'll need to know about links — for now! the final article in our styling text module details how to use custom fonts on your websites, or web fonts as they are better known. 163 styling lists article, beginner, css, guide, styling, text, bullets, lists lists are relatively easy to get the hang of styling once yo...
...this module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand html. 231 advanced text formatting beginner, codingscripting, guide, html, learn, text, abbreviation, description list, quote, semantic that marks the end of our study of html text semantics.

Fetching data from the server - Learn web development
proxy to more intelligently request data rather than just having the browser reload the entire page. let's think about the significance of this: go to one of your favorite information-rich sites, like amazon, youtube, cnn, etc., and load it. now search for something, like a new product. the main content will change, but most of the surrounding information, like the header, footer, navigation menu, etc., will stay the same. this is a really good thing because: page updates are a lot quicker and you don't have to wait for the page to refresh, meaning that the site feels faster and more responsive. less data is downloaded on each update, meaning less wasted bandwidth. this may not be such a big issue on a desktop on a broadband connection, but it's a major issue on mobile devices and i...
...he late '90s, and has been standardized across browsers for quite a long time. to begin this example, make a local copy of ajax-start.html and the four text files — verse1.txt, verse2.txt, verse3.txt, and verse4.txt — in a new directory on your computer. in this example, we will load a different verse of the poem (which you may well recognize) via xhr when it's selected in the drop-down menu. just inside the <script> element, add the following code. this stores a reference to the <select> and <pre> elements in constants and defines an onchange event handler function so that when the select's value is changed, its value is passed to an invoked function updatedisplay() as a parameter. const versechoose = document.queryselector('select'); const poemdisplay = document.queryselec...

Setting up your own test automation environment - Learn web development
so here we've done the test as before, except that this time we've wrapped it inside a function, searchtest(). we've created new browser instances for multiple browsers, then passed each one to the function so the test is performed on all three browsers! fun huh? let's move on, look at the basics of ...
...console. this shows the importance of including some kind of result reporting mechanism! now if you go back to the browserstack automation dashboard page, you'll see your test listed: if you click on the link for your test, you'll get to a new screen where you will be able to see a video recording of the test, and multiple detailed logs of information pertaining to it. note: the resources menu option on the browserstack automation dashboard contains a wealth of useful information on using it to run automated tests. see node js documentation for writing automate test scripts in node js for the node-specific information. explore the docs to find out all the useful things browserstack can do. note: if you don't want to write out the capabilities objects for your tests by hand, you can ...

Accessibility and Mozilla
ozilla strives to make its software accessible; the documents below cover the ways in which we do so. these articles provide mozilla-specific details about accessibility. accessibility api cross-referencethis cross-reference helps us see the difference between today's accessibility api's. all accessibility apis to date define a list of possible object roles, or general types, such as button, menu item, text, etc. they also define a list of possible object states, such as focused, read-only, checked, etc.accessibility features in firefoxfirefox works with popular screen readers, with the best support currently coming from gw micro's window-eyes 5.5. we are optimistic that jaws support will catch up this year. in recent articles from both afb's access world and nfb's voice of the nation's ...
...al developers dealing with accessibilityboth end users and developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility. since this is a worldwide effort, there is always a good chance to find someone to chat with there, day or night.information for governments and other organizations evaluating mozillainformation for usersfirefox 2 now has help topics (from the menubar: ? > help contents f1 > accessibility features) which describe any special features and keyboard shortcuts designed to help users with disabilities. please check the accessibility help topic for more information.links and resourceshere are some useful links for those interested in web accessibility as well as open source accessibility.mozilla accessibility architecturethis page is maintained b...

Frequently Asked Questions for Lightweight themes
s, you can install a theme and transform the look of your firefox web browser. preview any theme by clicking "tap to preview"; the design appears in your browser header so you can "try it on." when you're ready, just click the blue install theme button. once a theme is installed, it is saved in the add-ons manager, where you can enable or disable them as you wish. simply go to the tools > add-ons menu and click on the appearance tab. are lightweight themes free? yes. themes are free to download and free to use. using lightweight themes how do i change my current lightweight theme? there are two easy ways to change your theme. you can either: visit the gallery, choose your favorite theme, and click on your choice to instantly change the look of your browser. once a theme is installed, ...
...ng lightweight themes how do i change my current lightweight theme? there are two easy ways to change your theme. you can either: visit the gallery, choose your favorite theme, and click on your choice to instantly change the look of your browser. once a theme is installed, it is saved in the add-ons manager, where you can enable or disable them as you wish. simply go to the tools > add-ons menu and click on the appearance tab. how do i undo a lightweight theme? to undo the design you most recently selected, go to tools > add-ons in the menu bar and select the themes tab. next to the theme you want to undo, click the disable button. how do i provide feedback? we're always looking for ways to improve themes, and would love to hear what you think. visit the themes forum to send us you...

Capturing a minidump
ude windbg which you will need here. download it from install debugging tools for windows. (you'll want the 32-bit version of windbg only if you are using a 32-bit version of firefox) then install it, the standard settings in the installation process are fine. capture a minidump connect firefox to the debugger. if firefox is not already running, then open windbg from the start menu (start->all programs->debugging tools for windows->windbg). next, open the "file" menu and choose "open executable...". in the file chooser window that appears, open the firefox.exe executable in your firefox program folder (c:\program files\mozilla firefox). if firefox is already running, open windbg from the start menu (start->all programs->debugging tools for windows->windbg). ne...
...s->debugging tools for windows->windbg). next, open the "file" menu and choose "open executable...". in the file chooser window that appears, open the firefox.exe executable in your firefox program folder (c:\program files\mozilla firefox). if firefox is already running, open windbg from the start menu (start->all programs->debugging tools for windows->windbg). next, open the "file" menu and choose "attach to a process...". in the file chooser window that appears, find the firefox.exe executable process with the lowest pid. you should now see a "command" text window with debug output at the top and an input box at the bottom. from the menu, select debug → go, and firefox should start. if the debugger spits out some text right away and firefox doesn't come up, selec...

Debugging JavaScript
this document is intended to help developers writing javascript code in mozilla, mainly for mozilla itself, but it may also be useful for web developers. it should give pointers to tools, aids and tricks which make debugging your code easier. web console this is the first place to go when you're debugging a web page; open the web console using the web console option in the web developer menu. this shows any javascript errors in your app, as well as any logging calls from the console api. browser console the browser console lets you see all javascript errors and logging in the browser, including from firefox code. to enable it, go to about:config in the url bar and set devtools.chrome.enabled to true, or set the "enable chrome and add-on debugging" option in the developer tool setti...
... in your app, as well as any logging calls from the console api. browser console the browser console lets you see all javascript errors and logging in the browser, including from firefox code. to enable it, go to about:config in the url bar and set devtools.chrome.enabled to true, or set the "enable chrome and add-on debugging" option in the developer tool settings. activate it through with the menu tools > web developer > browser console. you can also start the browser console when you launch firefox, by launching firefox from the command line and passing --jsconsole as a flag: /path/to/firefox --jsconsole log to the browser console using the standard console api after importing console.jsm: let console = (cu.import("resource://gre/modules/console.jsm", {})).console; console.log("hello ...

Debugging on Windows
s directly, it starts it via a launcher process. this means that visual studio will only attach to the first process it finds, and will not hit any break-point (and even notifies you that it cannot find their location). microsoft child process debugging power tool allows automatically attaching to child processes, such as web content process, gpu process, etc. enable it by going its configuration menu in "debug > other debugging targets > child process debugging settings", and ticking the box. if you have followed the steps in building firefox for windows and have a local debug build, you can execute ./mach run --debug from the same command line. it would open visual studio with firefox's run options configured. you can click "start" button to run firefox then, already attached in the debugge...
... pre-load all the windows debug symbols. these instructions apply to visual studio 10 on windows 7; other software versions likely need to have file paths adjusted. locate the microsoft utility "symchk.exe" on your system (it will likely be in the installation directory of your windows debugging tools). find the directory where visual studio caches downloaded symbols; in vc++ 10 open the menu to tools > options > debugging > symbols and copy the field "cache symbols in this directory". in a command window, run symchk.exe /r c:\windows\syswow64\ /s "srv*<your cache symbols directory>\microsoftpublicsymbols*http://msdl.microsoft.com/download/symbols" note the "\microsoftpublicsymbols" appended to the cache directory configured in visual studio. downloading all sy...

Eclipse CDT Manual Setup
o have eclipse ignore certain non-source files and directories. note, you must not make eclipse ignore your (main) object directory. that object directory is needed to resolve include paths to the various headers that the build process generates/copies there. to create resource filters, open the project properties (different to the workspace preferences!) by selecting properties from the context menu for the project (root item) in the project explorer tab on the left, or by selecting project > properties from the menubar. select "resource > resource filters" on the left of the window that opens, then use the add button to add the following filters: add an "exclude all" filter for folders with a project relative path matching ".hg". (this directory doesn't show in the project explorer tab, ...
...x just-print-mozilla-build.py'). if you don't put just-print-mozilla-build.py somewhere in your path, then go back to the initial project properties section where you set just-print-mozilla-build.py and specify its absolute path instead of just its name. now invoke the script by clicking the build button (the button with the hammer symbol) or by selecting "project > build project" from the main menu. that done, select the "console" tab at the bottom of the main eclipse window and you should see the build console output flying by as eclipse processes it. it should take about 5-10 minutes for eclipse to finish processing the output. additional discovery for c++11 mode as of mozilla 25, mozilla is built in c++11 mode. when gcc is invoked in c++11 mode, it defines pre-processor symbols that en...

Firefox and the "about" protocol
ion about:newtab start page when opening a new tab about:performance displays memory and performance information about firefox subprocesses/add-ons/tabs about:plugins displays information about installed plugins about:policies lists out the firefox for enterprise policies about:preferences firefox settings (also available through firefox menu > options) about:privatebrowsing start page when opening a private window about:profiles display and manage firefox profiles about:protections privacy protections report consisting of enhanced tracking protection, firefox monitor and firefox lockwise data about:restartrequired a page users are sent to when firefox requires a restart due to an update...
...(question mark) > troubleshooting information) about:sync-log displays a synchronization protocol related to the sync feature about:telemetry displays telemetry data collected and sent to mozilla while firefox is running (in case the user enabled telemetry) about:url-classifier displays the status of the url classifier services that firefox uses (for exampl...

mozbrowsercaretstatechanged
rd and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsercaretstatechanged event is fired when the user selects content in a page loaded in a browser <iframe>. this is used by the embedder to show a context menu for clipboard actions. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether the...
...content. senddocommandmsg a method allowing you to issue a command via an anonymouse function, i.e. function(command). possible values are cut, copy, paste and selectall. ...

Overview of Mozilla embedding APIs
the webbrowser provides a simple mechanism for other applications to leverage gecko functionality. each instance of a webbrowser encapsulates a full featured html content area. the embedding application receives notifications from gecko through a set of callback interfaces it may choo...
...h currently has the focus. focus management focus managment within the webbrowser is accessed via the nsiwebbrowserfocus interface. this interface serves two purposes. first, it provides methods for the embedding application to notify a webbrowser of activation/deactivation and to control tabbing order... this interface also allows access to the currently focused domwindow and domelement. context menu notifications right-click context menu notifications are passed up to the embedding application through the nsicontextmenulistener interface. these notifications allow the embedding application to display context menus based on user activity within the webbrowser (such as a right-click on a hypertext link). saving documents notification interfaces which the embedding application should implement ...

Embedding Tips
ou need to implement and register your own prompt service. how do i get the dom document from the web browser object? nscomptr<nsidomdocument> doc; nscomptr<nsidomwindow> window; webbrowser->getcontentdomwindow(getter_addrefs(window)); if (window) { window->getdocument(getter_addrefs(doc)); } what is the docshell? a description of the docshell may be found here. ...
...e. how do i get the dom document from the web browser object? nscomptr<nsidomdocument> doc; nscomptr<nsidomwindow> window; webbrowser->getcontentdomwindow(getter_addrefs(window)); if (window) { window->getdocument(getter_addrefs(doc)); } what is the docshell? a description of the docshell may be found here. how do i implement context menus? make your chrome object implement the nsicontextmenulistener or nsicontextmenulistener2. the nsicontextmenulistener::onshowcontextmenu() method will be called with the dom node that the context applies, the dom event plus some flag combinations that assist in determining what menu to display (document, link, image, selected text etc.) how do i implement tool tips? make your chrome object implement the nsitooltiplistener interface. methods to hide...

Gecko Keypress Event
t to match those specified in the handler. for the us keyboard layout, a related handler is defined with <key key="=" modifiers="accel"/>, so that users do not need to use the shift key to access the zoom-in shortcut. of course, this is not much help to users with other keyboard layouts. e.g., on a japanese keyboard, '+' is entered with shift+';' (bug 339723). problem 2 the access keys for the menu items are specified with the localized characters on some localized builds. these localized access keys work fine with the keyboard layout of the locale. however, users with the same non-latin keyboard layouts would also like to be able to use latin access keys of en-us builds (including nightly builds) without needing to switch keyboard layout (bug 399939). problem 3 users with non-latin keyb...
...ost element should handle a key event even when the event does not match exactly and there is an outer element with a handler that does match exactly (bug 433192). when handling web content accesskeys, the handlers should consider both characters that are available on the key (without and with shift). the character that is normally entered without shift is preferred. (chrome accesskey, including menu accesskey, handling is currently similar, but this should not be relied on. there should be no chrome access keys with punctuation characters or other characters that would normally require depressing the shift key.) during accel key handling, if the event includes the shift modifier, but an alternative charcode is not a bicameral letter (i.e., it does not have upper and lower case forms), then ...

IME handling guide
hen, converts each clause with chinese characters: "私の", "名前は" and "中野です" (in the following screenshot each clause is underlined and not connected adjacently. these clauses are called "converted clause"). if one or more clauses were not converted as expected, the user can choose one of the clauses with arrow keys and look for the expected result form the list in the drop down menu (in the following screenshot, the clause with the thicker underline is called "selected clause"). basically, composition string and each clause style is rendered by gecko. and the drop down menu is created by ime. each clause is represented with selection in the editor. from chrome script, you can check it with nsiselectioncontroller. in native code, you can access it with either nsiselection...
...te process loses focus, imestatemanager in parent process notifies imestatemanager in the remote process of "stop ime state management". when imestatemanager::stopimestatemanagement() is called in the remote process by this, the imestatemanager forgets all focus information (i.e., that indicates nobody has focus). when imestatemanager in parent process is notified of pseudo focus move from or to menubar while a remote process has focus, it notifies the remote process of "menu keyboard listener installed". then, tabchild calls imestatemanager::oninstalledmenukeyboardlistener() in the remote process. style of each clause the style of each ime selection is managed by lookandfeel class per platform. therefore, it can be overridden by prefs. background color, foreground color (text color) and u...

Widget Wrappers
s, this is always 'custom' provider the provider type of the widget, id est one of provider_api or provider_xul node reference to the corresponding dom node anchor the anchor on which to anchor panels opened from this node. ...
...ider the provider type of the widget, id est one of provider_api or provider_xul node reference to the corresponding dom node anchor the anchor on which to anchor panels opened from this node. ...

PopupNotifications.jsm
popupnotification object's icon box (for firefox windows, the global popupnotifications object uses the notification-popup-box element). mainaction a javascript object literal containing fields that define the button to draw in the notification panel. see notification actions below for details. secondaryactions an array of notification action objects; these are used to populate the drop-down menu on the notification panel's button. options a javascript object containing optional properties for the notification. see notification options below for details. return value returns the notification object corresponding to the added notification. notification actions notification action objects describe the user interface for actions associated with the notification. the main action is use...
...n. see notification options below for details. return value returns the notification object corresponding to the added notification. notification actions notification action objects describe the user interface for actions associated with the notification. the main action is used to describe the button presented in the notification panel, while secondary actions are displayed in the drop-down menu associated with the button. a notification action object must contain the following properties: label a text label describing the action. accesskey a string indicating the keystroke that will trigger the action. callback a javascript function to be invoked when the action is selected by the user. notification options the notification options object lets you further customize the notif...

L10n testing with xcode
ing the diff between the imported xliff file and the existing resources in the project folder. click the import button. xcode will import your translated strings into the project by adding them to the project folder and replacing the existing strings. next, you need to configure the ios app simulator to run the app in your locale. choose product > scheme > edit scheme from the toolbar menu. in the edit scheme screen, select run from the left pane and then navigate to the options tab. select your language from the application language menu and click close. tah dah! you're ready to test your localization of firefox on ios. launching & testing your firefox on ios localization the ios simulator is fairly easy to use once you launch your app. to perform the next steps, yo...
...corner (the button has a playback icon). navigate to the newly opened ios simulator window many strings are accessibility strings and are only revieled when a user hovers their finger over the button. to view these strings, you'll need to start the accessibility inspector within the ios simulator by doing the following. in the ios simulator, press the home button from the hardware toolbar menu. navigate to the settings app, open it, and go to general > accessibility. slide the accessibility inspector switch to on. the accessibility inspector remains active until you turn it off, even if you quit and restart ios simulator. press the home button again, navigate to the pane with your firefox for ios localization on it, and reopen firefox. now, you can navigate through the f...

Localizing with Pontoon
that will make you more efficient and make your l10n contributions easier. are you a developer? read about implementing pontoon in your project or learn how to get involved on github. first steps pontoon's home page is very easy to use. to begin localizing the project, click on the persona icon and sign in. next, simply select the project you want to work on and your locale from the dropdown menus. pontoon will automatically open that locale's project for you to get started. note that for our purposes here, we'll be using firefox affiliates website to demo pontoon's functionality and workflow. and there it is, opened inside pontoon: main toolbar as you can see, most of the interface is taken by the website being translated. only the toolbar on top belongs to pontoon, containing the fo...
...lector (homepage) switches between project resources to localize, like subpages or localization files. hidden if no resources available for project. locale selector (slovenian) switches between languages to localize. go opens project-resource-locale selection. progress indicator displays your progress on the resource being localized. more details are available in the popup. user menu allows for user-specific tasks, like commiting to repository, downloading files and signing out. info menu gives important information, like the anticipated project timeline and a list of keyboard shortcuts. alright, how about we do some translating now? translate strings when using pontoon for localization, you have a couple of options to translate your strings. you can translate in...

Localization technical reviews
not be any utf-7 encodings in the file toolkit/chrome/global/intl.properties. for more info about utf-7 in firefox, see bug 441876. more intl.properties checkpoints, cont we also check the plural rule for the locale, that the general.useragent.locale is set to the locale code, that accept-lang shows the locale code(s) (like ab, ab-cd,...) and is followed by en and en-us, and finally that intl.menuitems.insertseparatorbeforeaccesskeys = true, where "true" should be left untranslated. inspect firefox-l10n.js we ensure that there are no odd preferences, or #filter substitutions for general.useragent.locale. most locales should have the following: #filter substitution pref("general.useragent.locale", "@ab_cd@") how it all works a large part of the review process takes place before you ...
...ccessfully, and found it to represent the best of your work. so before you request your technical review, be sure that it is as ready as it can be. there is a specific process to follow in bugzilla for requesting these reviews: file a bug requesting the review. attach your files to the bug. once attached, open the attachment details. in the attachment details, select the ? from the dropdown menu next to the review flag. this will display a text box to assign the review to someone. enter :pike as the requestee. we will perform a technical review of your work and provide you with feedback. we're happy to work with you to make sure that your work is fully functional. tracking your progress you can track your reviews progress two ways: within the bug and through your team's dashboard. ...

Profiling with Xperf
or 64-bit windows 7 or vista, you'll need to do a registry tweak and then restart to enable stack walking: reg add "hklm\system\currentcontrolset\control\session manager\memory management" -v disablepagingexecutive -d 0x1 -t reg_dword -f symbol server setup with the latest versions of the windows performance toolkit, you can modify the symbol path directly from within the program via the trace menu. just make sure you set the symbol paths before enabling "load symbols" and before opening a summary view. you can also modify the _nt_symbol_path and _nt_symcache_path environment variables to make these changes permanent. the standard symbol path that includes both mozilla's and microsoft's symbol server configuration is as follows: _nt_symcache_path: c:\symbols _nt_symbol_path: srv*c:\symbol...
... configuration is as follows: _nt_symcache_path: c:\symbols _nt_symbol_path: srv*c:\symbols*http://msdl.microsoft.com/download/symbols;srv*c:\symbols*http://symbols.mozilla.org/firefox/ to add symbols from your own builds, add c:\path\to\objdir\dist\bin to _nt_symbol_path. as with all windows paths, the symbol path uses semicolons (;) as separators. make sure you select the trace -> load symbols menu option in the windows performance analyzer (xperfview). there seems to be a bug in xperf and symbols; it is very sensitive to when the symbol path is edited. if you change it within the program, you'll have to close all summary tables and reopen them for it to pick up the new symbol path data. you'll have to agree to a eula for the microsoft symbols -- if you're not prompted for this, then so...

Profiling with the Firefox Profiler
egration with firefox than external profilers, and has more of a platform focus than the devtools performance panel. it can be used in a variety of situations where external profilers are not available, and can provide more information and insight into what the browser is doing. using the firefox profiler visit profiler.firefox.com to get started. it has instructions for enabling the profiler menu button, and getting going. there are also product docs available at profiler.firefox.com/docs/. in addition to profiler.firefox.com, the firefox devtools have a simplified interface targeted towards web developers, but does not include as much information as the firefox profiler web app. it is available from the menu at tools > web developer > performance. understanding profiles the firefox pr...
...lues by --es option of am command to launch firefox. this example is for firefox nightly (package name is org.mozilla.fennec_aurora), and you have to allow storage access on permission settings before launching it. adb shell am start -n org.mozilla.fennec_aurora/.app \ --es env0 moz_profiler_startup=1 \ --es env1 moz_profiler_shutdown=/sdcard/download/profiler.json then, if you select quit menu, you can collect profiling data to moz_profiler_shutdown file. profiling js benchmark (xpcshell) to profile the script run.js with ionmonkey (-i), type inference (-n) and jäegermonkey (-m). thgis requires the following command: $ xpcshell -m -i -n -e ' const ci = components.interfaces; const cc = components.classes; var profiler = cc["@mozilla.org/tools/profiler;1"].getservice(ci.ns...

McCoy
te a new key; without a backup, there is no way to recover your private keys if they are lost! running mccoy to run mccoy simply run the mccoy executable (or the mccoy application on os x). the first time it runs it will ask you to create a master password. it is strongly recommended that you use a password to protect your mccoy data. once you have a password set you can change it from the keys menu and you will have to enter it each time you run mccoy. signing from command line currently there is no support to run mccoy from command line under windows, but it is planned to add this support in the future. however, there are several external and unofficial tools which enable signing from command line: uhura - part of the mxtools package from softlights http://www.softlights.net/projects/...
...te manifests before you release your add-on in order to verify the update manifests applications need to already have information from you for how to verify it. this is in the form of the public part of a cryptographic key included in the original add-on you release. the first step is to create a cryptographic key. simply click the "create" toolbar button or select "create key" from the "keys" menu. you should give the key a name that will remind you what you are using it for. it is up to you how you use your keys, either using one key for all add-ons or one key per add-on would seem sensible choices. once you have a key you need to add its public part to your add-on's install.rdf file. the simplest way to do this is to select the key then click the install toolbar button. you must then lo...