ui/button/toggle - Archive of obsolete content
" + state.label + "'"); button.removelistener("change", firstchange); button.on("change", subsequentchanges); } function subsequentchanges(state) { console.log("you changed '" + state.label + "' again"); } the listener is passed a state object that contains all the button's properties. you can generate click and change events programmatically with the button's click() method. ...
...emovelistener("change", firstchange); button.on("change", subsequentchanges); } function subsequentchanges(state) { console.log("you changed '" + state.label + "' again"); } the listener is passed a state object that contains all the button's properties. you can generate click and change events programmatically with the button's click() method. ...
...the listener is passed a state object that contains all the button's properties. you can generate click and change events programmatically with the button's click() method. ...
...a disabled button will not generate click or change e...

DevTools API - Firefox Developer Tools
hod. {toolid}-ready(toolbox, panel) a tool with the given id has finished its initialization and is ready to be used. the panel is the object returned by the tooldefinition.build() method. {toolid}-destroy(toolbox, panel) a tool with the given id is about to be destroyed. the panel is the object returned by the tooldefinition.build() method. toolbox a toolbox is a frame for the toolpanels that is debugging a specific target. properties target target. the target this toolbox is debugging. hosttype toolbox.hosttype. the type of the host this toolbox is docked to. the value is one of the toolbox.hosttype constants. zoomvalue the current zoom level of the toolbox. constants the toolbox constructor contains following constant properties. toolbox.hosttype.bo...
...getpanelwhenready(toolid) similar to getpanel() but waits for the tool to load first. if the tool is not already loaded or currently loading the returned promise won't be fulfilled until something triggers the tool to load. parameters: toolid {string} - the tool identifier. return value: a promise that is fulfilled with the toolpanel object once the tool has finished loading. gettoolpanels() returns a toolid → toolpanel map for currently loaded tools. getnotificationbox() returns a <xul:notificationbox> element for the toolbox that can be used to display notifications to the user. loadtool(toolid) loads the tool with the given toolid in the background but does not activate it. parameters: toolid {string} - the tool identifier. return value: a promise that i...
...n(toolbox => { // note that the second argument is not available here. console.log("network monitor initialized to toolbox", toolbox); }); toolsidebar to build a sidebar in your tool, first, add a xul:tabbox where you want the sidebar to live: <splitter class="devtools-side-splitter"/> <tabbox id="mytool-sidebar" class="devtools-sidebar-tabs" hidden="true"> <tabs/> <tabpanels flex="1"/> </tabbox> a sidebar is composed of tabs. each tab will hold an iframe. for example, in the inspector, there are 3 tabs (computed view, rule view, layout view). the user can select the tab he wants to see. if the availability of the tabs depends on some tool-related conditions, we might want to not let the user select a tab. this api provides methods to hide the tabstripe. f...
...te; }, build: function(iframewindow, toolbox, node) { return new inspectorpanel(iframewindow, toolbox, node); } }); open a tool, or select it if the toolbox is already open: let target = targetfactory.fortab(gbrowser.selectedtab); let toolbox = gdevtools.opentoolbox(target, null, "inspector"); toolbox.once("inspector-ready", function(event, panel) { let inspector = toolbox.gettoolpanels().get("inspector"); inspector.selection.setnode(target, "browser-context-menu"); }); add a sidebar to an existing tool: let sidebar = new toolsidebar(xultabbox, toolpanel, "toolid"); sidebar.addtab("tab1", "chrome://browser/content/.../tab1.xhtml", true); sidebar.addtab("tab2", "chrome://browser/content/.../tab2.xhtml", false); sidebar.show(); ...

Release notes - Archive of obsolete content
.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 33. this w...
...ot include any uplifts made after this release entered aurora. bugs fixed between firefox 31 and firefox 32. this will not include any uplifts made after this release entered aurora. firefox 31 highlights add-on debugger added the ability to convert between high-level browserwindow objects and dom windows, and between high-level tab objects and xul tabs. ...
... changes in the way content scripts share objects with page scripts. documentation and blog post. added child_process, an implementation of the node.js child_process api. content scripts in page-mod get detach events when the add-on is disabled or removed. throttle() and debounce() functions added to lang/functional. gettabforid() function added to tabs/utils. ...

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
tore its own window sizes and locations as well. general root elements window the window element that has appeared in examples so far is a root element used to define an ordinary window. this displays the same kind of window used for the firefox browser window, the bookmark manager window, and many other windows. you can generally use the window element as your root element. page for sidebar panels and other xul documents that are opened within inline frames, use the page element as the root element. apart from having a different intended purpose than the window element, it is functionally no different. root elements for dialog windows dialog use the dialog element when creating options dialogs, confirmation dialogs, etc. this element takes a number of attributes, and can easily be made ...
...ess…"/> </hbox> </stack> listing 21: overlapping with stack figure 17: progress bar tab use the tab element to divide multiple pages, as used in the properties dialog; use the tabbox element to group related elements. this is demonstrated in listing 22, with its output shown in figure 18. <tabbox> <tabs> <tab label="tab1"/> <tab label="tab2" selected="true"/> </tabs> <tabpanels> <tabpanel> <checkbox label="check1"/> </tabpanel> <tabpanel orient="vertical"> <checkbox label="check2"/> <checkbox label="check3"/> </tabpanel> </tabpanels> </tabbox> listing 22: tabs in use figure 18: output from listing 22 other xul functions overlays one of xul’s distinctive features is overlays. these give you the ability to combine multiple xul...
...for example, to display a 16x16 icon for a file with a .pdf dot-extension (a pdf file), you would write moz-icon://...

Popup Guide - Archive of obsolete content
s in a list, can display submenus, and provides keyboard navigation between the items. a menu should only contain menu related elements. context menus a context menu is like a regular menu except that the commands it contains apply to what the user had clicked on to open the context menu. often, depending on what was clicked on, certain commands may be hidden if not applicable to that element. ...
...usually it would contain tools related to the main window, or an inspector which displays properties of a selected element. ...
...ements from a menu, see modifying a menu. events when popups are opened or closed the popupshowing and popupshown events are fired when a menu or popup is opened. the popuphiding and the popuphidden events are fired when a menu or popup is closed. for information about these events, see popup events. handling keys within popups for information about how keys are handled within menus and panels, see handling keys within popups. platform specific menu considerations see special per-platform menu considerations for some notes about handling menus on certain platforms, for instance creating the application menu on a macintosh. using popups in extensions extensions may add additional menuitems either to a menu on the menu bar or to the context menu. in addition, an extension may add...

Splitters - Archive of obsolete content
syntax of a splitter is as follows: <splitter id="identifier" state="open" collapse="before" resizebefore="closest" resizeafter="closest"> the attributes are as follows: id the unique identifier of the splitter. state indicates the state of the splitter. set this to open, the default, to have the split panel initially open, or set it to collapsed to have one of the panels shrunk down (collapsed) and the other occupying all of the space. collapse this indicates which side of the panel should collapse when the splitter notch (or grippy) is clicked or set into a collapsed state. set this to before for the element before the splitter, or after for the element after the splitter. if you set this to none, which is also the default, the splitter grippy does not coll...
...ter it will change size. in this case, frame 4 will change size. a value has not been specified for resizebefore so it will default to a value of closest. in this case, there is only one frame before the splitter, so frame 1 will change size. frames 2 and 3 will only change size if you drag the splitter far enough to the right that frame 4 has reached its minimum size. this image shows the 4 panels with the splitter in a collapsed state. this image shows the 4 panels with the splitter resized to the right. notice how the middle two panels have not changed size. only panel 1 and panel 4 have changed size. you can just see part of the fourth panel. if you continue to drag the splitter to the right, the other two panels will shrink. you can use the style properties such as min-width, max-he...
...ill shrink. you can use the style properties such as min-width, max-height on the iframes to specify minimum or maximum widths or heights in the box. if you do, the splitter will detect this and not allow the user to drag the splitter past the minimum and maximum sizes. for example, if you specified a minimum width of 30 pixels on panel 4 above, it would not shrink below that size. the other two panels would have to shrink. if you set the minimum width of panel 1 to 50 pixels, you would only be able to drag the splitter 10 pixels to the left (as it starts at 60 pixels wide). you can still collapse the splitter however. you can also place more than one splitter in a box if you want, in which case you could collapse different parts of it. similarly, you do not have to collapse just iframes. any ...

XUL Reference - Archive of obsolete content
et preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script scrollbar scrollbox scrollcorner separator spacer spinbuttons splitter stack statusbar statusbarpanel stringbundle stringbundleset tab tabbrowser (firefox-only starting with firefox 3/gecko 1.9) tabbox tabpanel tabpanels tabs template textnode textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip tree treecell treechildren treecol treecols treeitem treerow treeseparator triple vbox where window wizard wizardpage ...
...w 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 dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheade...
... preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker datepicker menulist progressmeter radio radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker description label image listbox listitem listcell listcol listcols listhead listheader richlistbox richlistitem tree treecell treechildren treecol...

Accessibility/XUL Accessibility Reference - Archive of obsolete content
tabbrowser jaws 7.10 issues testing with jaws 7.10, use of a tabbrowser element causes many, unpredictable issues with xul inside of the iframe. okay to use html inside o...
...hing else statusbar <statusbar> <statusbarpanel label="<!--status bar-->" flex="1"/> </statusbar> read using jaws with insert+page down statusbarpanel see statusbar tab see tabbox tabbox <tabbox> <tabs> <tab label="<!--tab text-->" /> </tabs> <tabpanels> <tabpanel orient="vertical"> ... </tabpanel> </tabpanels> focusing the tabbox will visually set focus to the selected tab, then you can select different tabs by using the left and right arrow keys. tabbrowser jaws 7.10 issues testing with jaws 7.10, use of a tabbrowser element causes many, unpredictable issues with xul inside of the iframe. okay to use html inside of tabbrowser. see browser element for more info. tabpanel...
...l visually set focus to the selected tab, then you can select different tabs by using the left and right arrow keys. tabbrowser jaws 7.10 issues testing with jaws 7.10, use of a tabbrowser element causes many, unpredictable issues with xul inside of the iframe. okay to use html inside of tabbrowser. see browser element for more info. ...

panel - Archive of obsolete content
atically dismissed (or "rolled up") should be consumed or be dispatched as a normal event. if it is not set, it defaults to the platform behavior. if it set to true the rollup event is consumed. if set to false, the rollup event is not consumed. this attribute should be used instead of setconsumerollupevent. fadetype: one of the values belowthe fade attribute, which may only be used with arrow panels, lets you set up a panel that will automatically fade away after a short time. 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 sid...
...e 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 applied to arrow panels. an arrow panel can also specify a value of slide, which causes the arrow to "slide" instead of flipping when the panel doesn't have room. a sliding panel will have the start (or end) position extended such that the panel can be the requested size, meaning the arrow will no longer be at the start (or end) of the panel - i.e., the arrow will appear to have been slid along the panel...
...he middle of the panel such that it is still aligned with the anchor. without flip="slide", the panel would have had its width truncated and the panel would not extend to the left of the anchor. ignorekeys type: boolean if false, the default value, the escape key may be used to close the panel. if true, the escape key cannot be used to close the panel. label type: string for panels with titlebars, the label on the titlebar. left type: integer overrides the horizontal position of the popup specified by the showpopup method. level type: one of the values below specifies whether the panel appears on top of all windows, or just on top of the window the panel is in. if this attribute is not set, the popup window level depends on the platform. on linux, the defa...

Migrating from Firebug - Firefox Developer Tools
d. that means, that when you open the devtools in a tab, they stay open even when you switch between different websites. when you switch to another tab, though, they're closed. open the tools firebug can be opened by pressing f12. to open it to inspect an element it is possible to press ctrl+shift+c / cmd+opt+c. the devtools share the same shortcuts, but also provide shortcuts for the different panels. e.g. the network monitor can be opened via ctrl+shift+q / cmd+opt+q, the web console via ctrl+shift+k / cmd+opt+k and the debugger 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 d...
...s are listed at the left side within the sources side panel. dynamically generated scripts are only listed there when they are named via a //# sourceurl comment. managing breakpoints in firebug you can set different types of breakpoints, which are all listed within the breakpoints side panel. in the devtools the breakpoints are shown below each script source within the sources side panel. those panels allow you to enable and disable single or all breakpoints and to remove single breakpoints or all of them at once. they do currently only allow to set script breakpoints. xhr, dom, cookie and error breakpoints are not supported yet (see bug 821610, bug 1004678, bug 895893 and bug 1165010). while there are no breakpoints for single javascript errors, there is a setting pause on exceptions within t...
... about a request by clicking on it. the only difference is that firebug shows the information below the request while the network monitor displays it within a side panel. in both tools there are different tabs containing different kinds of information for the selected request. they contain a headers, params, response and cookies panel. a preview of the response is shown within specifically named panels like html. the network monitor has a preview panel for this purpose. it doesn't provide information about the cached data yet (see bug 859051), but provides a security tab in addition to firebug's information and a timings tab showing detailed information about the network timings. view request timings firebug offers detailed information about the network timings related to a request by hoverin...

Screen.availHeight - Web APIs
itself. for instance, on a mac whose dock is located at the bottom of screen (which is the default), the value of availheight is approximately the value of height (the total height of the screen in css pixels) minus the heights of the dock and menu bar, as seen in the diagram below. ...
...reen in css pixels) minus the heights of the dock and menu bar, as seen in the diagram below. example if your web application needs to open a new window, such as a tool palette which can contain multiple panels, and wants to position it so that it occupies the entire vertical space available, you can do so using code similar to what's seen here. in the main window, when it's time to open the panels, code like the following is used. let palettewindow = window.open("panels.html", "panels", "left=0, top=0, width=200"); the panels window's html, in panels.html, has javascript code of its own, which is executed as soon as the window is created. it doesn't even need to wait for any particular event (or any event at all). that code handles resizing the window based on the available space: windo...
... on a windows system, this would function similarly, by opening the window and sizing it vertically so it uses all available vertical space, leaving room for the taskbar and any other interface elements that reserve space. ...

Working with Events - Archive of obsolete content
); it is not possible to enumerate the set of listeners for a given event. the value of this in the listener function is the object that emitted the event. listening to all events you can pass the wildcard "*" as the type argument. ...
... the value of this in the listener function is the object that emitted the event. listening to all events you can pass the wildcard "*" as the type argument. ...

widget - Archive of obsolete content
see the ui module for replacements. in particular, for a simple button, try the action button or toggle button apis, and for a more complex widget try the toolbar or sidebar apis. create a simple user interface for an add-on in firefox's add-on bar. usage "widgets" are small pieces of content that live in the firefox 4 add-on bar. they can be simple icons or complex web pages. you can attach panels to them that open when they're clicked, or you can define a custom click handler to perform some other action, like opening a web page in a tab. there are a few advantages to using widgets over an ad hoc user interface. first, your users will be accustomed to interacting with add-ons via widgets and the add-on bar. second, it allows firefox to treat your interface as a first-class citizen. for e...
... data = require("sdk/self").data var clockpanel = require("sdk/panel").panel({ width:215, height:160, contenturl: data.url("clock.html") }); require("sdk/widget").widget({ id: "open-clock-btn", label: "clock", contenturl: data.url("h...

Creating annotations - Archive of obsolete content
== 13) { self.postmessage(textarea.value); textarea.value = ''; } }; self.on('message', function() { var textarea = document.getelementbyid('annotation-box'); textarea.value = ''; textarea.focus(); }); save this inside data/editor as annotation-editor.js. updating main.js again now we'll update main.js again to create the editor and use it. ...
...) { var textarea = document.getelementbyid('annotation-box'); textarea.value = ''; textarea.focus(); }); save this inside data/editor as annotation-editor.js. updating main.js again now we'll update main.js again to create the editor and use it. ...

Storing annotations - Archive of obsolete content
ation object, which we also need to supply: function annotation(annotationtext, anchor) { this.annotationtext = annotationtext; this.url = anchor[0]; this.ancestorid = anchor[1]; this.anchortext = anchor[2]; } now we need to link this code to the annotation editor, so that when the user presses the return key in the editor, we create and store the new annotation: var annotationeditor = panels.panel({ width: 220, height: 220, contenturl: data.url('editor/annotation-editor.html'), contentscriptfile: data.url('editor/annotation-editor.js'), onmessage: function(annotationtext) { if (annotationtext) handlenewannotation(annotationtext, this.annotationanchor); annotationeditor.hide(); }, onshow: function() { this.postmessage('focus'); } }); listing stored a...
... { font-style: italic; } body { background-color: #f5f5f5; font: 100% arial, helvetica, sans-serif; } h1 { font-family: georgia,serif; font-size: 1.5em; text-align:center; } save these in data/list as annotation-list.html and annotation-list.css respectively. updating main.js here's the code to create the panel, which can go in the main function. ...

Tabbox - Archive of obsolete content
obsolete since gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. ...
...osetab event assuming the tabbox, tabs, and tabpanels widgets with id's the same as their nodename, this function will correctly remove the current tab and tab panel for the onclosetab tabs event: function removetab(){ var tabbox = document.getelementbyid("tabbox"); var currentindex = tabbox.selectedindex; if(currentindex>=0){ var tabs=document.getelementbyid("tabs"); var tabpanels=document.getelementbyid("tabpanels"); tabpanels.removechild(tabpanels.childnodes[currentindex]); tabs.removeitemat(currentindex); /*work around if last tab is removed, widget fails to advance to next tab*/ if(-1 == tabbox.selectedindex && tabs.childnodes.length>0){ tabbox.selectedindex=0; } } creating a close tab button to have a tab close button, you must configure...

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
dow and make sure that all three functions—saving a session, restoring a session, and deleting sessions—all work correctly. phase 3: creating a preference panel you don’t need to use ini files, registries, or anything like that to give users options they can set through a preference panel. firefox lets you read and write preference values using handy xpcom services and create preference panels with interface widgets. in phase 3, we’ll try this out (figure 15). fixme: figure 15: finished preference panel directory structure figure 16 shows the directory structure we’ll be using in phase 3. table 5 explains the new files being used. table 5: files used in phase 3 fixme: make the table cleaner name purpose sessionstore-prefs.js ...
...t preferences, as described in table 6. save this in defaults\preferences\sessionstoreprefs.js. listing 25: content for sessionstore-prefs.js pref("extensions.sessionstore.warnonclear", true); pref("extensions.sessionstore.replacetabs", 2); creating the preference panel create prefs.xul with the contents from listing 26. the prefwindow element is a special root element for creating preference panels, with the prefpane element subordinate to it. you can create an interface similar to firefox’s options window by inserting multiple prefpane elements, which allows users to switch between panels by clicking buttons. the preference element creates a preference value that can be written and read by the preference panel, with the preference name indicated by the name attribute, and the type by the...

Adding sidebars - Archive of obsolete content
ke a tabbox but doesn't look like one, you should still favor using a tabbox and use css to change its look. using custom-made elements are likely to cause accessibility and functional problems. creating a tabbed view is simple: <tabbox id="xulschoolhello-tabbox"> <tabs> <tab label="&xulschoolhello.maintab.label;" /> <tab label="&xulschoolhello.advancedtab.label;" /> </tabs> <tabpanels> <tabpanel> <!-- content for the main panel. --> </tabpanel> <tabpanel> <!-- content for the advanced panel. --> </tabpanel> </tabpanels> </tabbox> the first tab is selected by default, but you can change the default selection by setting the selected attribute to true in the « xul reference « element. a tabpanel can hold any kind of content. you should take int...
...abbox> the first tab is selected by default, but you can change the default selection by setting the selected attribute to true in the « xul reference « element. a tabpanel can hold any kind of content. you should take into account that the whole tab box is going to be as large as the tab strip on the top and the content of the largest panel. you should try to balance the content in the tab panels so that you don't end up with uneven and mostly empty panels. decks and stacks sometimes you'll need finer grained control than the one provided by a tabbox. in these cases the « xul reference « and « xul reference « elements are probably what you're looking for. they are extremely useful, and you'll find yourself using them in many situations besides sidebars. a deck is like a tabbbox wit...

Creating a Skin - Archive of obsolete content
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 behind the tab strip and along...
...66666; 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 probably isn't the best way to do this. we should r...

Localization - Archive of obsolete content
esskey;" key="paste_cmd" disabled="true"/> </menupopup> </menu> </menubar> <toolbar id="findfiles-toolbar"> <toolbarbutton id="opensearch" label="&opencmdtoolbar.label;"/> <toolbarbutton id="savesearch" label="&savecmdtoolbar.label;"/> </toolbar> </toolbox> <tabbox> <tabs> <tab label="&searchtab;" selected="true"/> <tab label="&optionstab;"/> </tabs> <tabpanels> <tabpanel id="searchpanel" orient="vertical" context="editpopup"> <description> &finddescription; </description> <spacer class="titlespace"/> <groupbox orient="horizontal"> <caption label="&findcriteria;"/> <menulist id="searchtype"> <menupopup> <menuitem label="&type.name;"/> <menuitem label="&type.size;"/> <menuitem label="&t...
...t/all"> <template> <menupopup> <menuitem label="rdf:http://www.xulplanet.com/rdf/recent#label" uri="rdf:*"/> </menupopup> </template> </menulist> </groupbox> </tabpanel> <tabpanel id="optionspanel" orient="vertical"> <checkbox id="casecheck" label="&casesensitive;"/> <checkbox id="wordscheck" label="&matchfilename;"/> </tabpanel> </tabpanels> </tabbox> <tree id="results" style="display: none;" flex="1"> <treecols> <treecol id="name" label="&results.filename;" flex="1"/> <treecol id="location" label="&results.location;" flex="2"/> <treecol id="size" label="&results.size;" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="mozilla"/> <treecell label="/us...

Stacks and Decks - Archive of obsolete content
the box tag creates the simplest box with no special properties. ...
... passed to the element on the top of the stack, that is, the last element in the stack. that means that buttons will only work properly as the last element of the stack. decks a deck element also lays out its children on top of each other much like the stack element, however decks only display one of their children at a time. this would be useful for a wizard interface where a series of similar panels are displayed in sequence. rather than create separate windows and add navigation buttons to each of them, you would create one window and use a deck where the content changes. like stacks, the direct children of the deck element form the pages of the deck. if there are three children of the deck element, the deck will have three children. the displayed page of the deck can be changed by setting...

tab - Archive of obsolete content
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 displayed when the tab is selected. if this attribute is not used, the tab will be connected to the panel at the corresponding index in the tabpanels element that the tab is in its tabs container. however, if this attribute is used, this behavior is overridden, and the tab will always be linked to a specific panel. this might be used to avoid duplication by linking several tabs to one panel with slight differences to the content adjusted in the select event. oncommand type: script code this event handler is called when the command is ...
... interfaces nsiaccessibleprovider, nsidomxulselectcontrolitemelement ...

tabpanel - Archive of obsolete content
this element is optional and you may just use any other container in place of it. more information is available in the xul tutorial. ...
... ...

WAI-ARIA basics - Learn web development
</article> <article role="tabpanel" aria-hidden="true"> ... </article> <article role="tabpanel" aria-hidden="true"> ... </article> </div> note: the most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this...
... and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc. the new features are as follows: new roles — tablist, tab, tabpanel — these identify the important areas of the tabbed interface — the container for the tabs, the tabs themselves, and the corresponding tabpanels. aria-selected — defines which tab is currently selected. as different tabs are selected by the user, the value of this attribute on the different tabs is updated via javascript. aria-hidden — hides an element from being read out by a screenreader. as different tabs are selected by the user, the value of this attribute on the different tabs is updated via javascript. tabindex="0" — as we...

Handling common accessibility problems - Learn web development
them with an asterisk and in red. note: a high contrast ratio will also allow anyone using a smartphone or tablet with a glossy screen to better read pages when in a bright environment, such as sunlight. hiding content there are many instances where a visual design will require that not all content is shown at once. for example, in our tabbed info box example (see source code) we have three panels of information, but we are positioning them on top of one another and providing tabs that can be clicked to show each one (it is also keyboard accessible — you can alternatively use tab and enter/return to select them). screen reader users don't care about any of this — they are happy with the content as long as the source order makes sense, and they can get to it all. absolute positioning...
...prequest or fetch, a screenreader user might miss those updates. wai-aria do you need to use such complex functionality, or will plain old semantic html do instead? if you do need complexity, you should consider using wai-aria (accessible rich internet applications), a specification that provides semantics (in the form of new html attributes) for items such as complex form controls and updating panels that can be understood by most browsers and screen readers. to deal with complex form widgets, you need to use aria attributes like roles to state what role different elements have in a widget (for example, are they a tab, or a tab panel?), aria-disabled to say whether a control is disabled or not, etc. to deal with regularly updating regions of content, you can use the aria-live attribute, whi...

The Firefox codebase: CSS Guidelines
: none; is probably saying 'ignore browser preconceptions - i want a blank sheet', so that's more visual. however -moz-appearance values aren't implemented and don't behave consistently across platforms, so idealism aside -moz-appearance should always be in theme css. [2] however there is probably a better way than using absolute positioning. colors for common areas of the firefox interface (panels, toolbar buttons, etc.), mozilla-central often comes with some useful css variables that are adjusted with the correct values for different platform configurations, so using those css variables can definitively save some testing time, as you can assume they already work correctly. using the currentcolor keyword or inheriting is also good practice, because sometimes the needed value is already in...
...is again a good idea for theme support. never write css specially for the built-in light/dark theme in compacttheme.css unless that css isn't supposed to affect webextension themes. these selectors can be used to target dark areas: :-moz-lwtheme-brighttext: dark window frame. :root[lwt-toolbar-field-brighttext]: dark address bar and searchbar. :root[lwt-popup-brighttext]: dark arrow panels and autocomplete panels. :root[lwt-sidebar-brighttext]: dark sidebars. if you'd like a different shade of a themed area and no css variable is adequate, using colors with alpha transparency is usually a good idea, as it will preserve the original theme author's color hue. variables for clarity, css variables that are only used when a theme is enabled have the --lwt- prefix. layout & ...

Accessibility Inspector - Firefox Developer Tools
unless you've already got them turned on in another browser tab, or got the firefox accessibility engine started already, e.g., you might be a screenreader user or tester). this is because the accessibility engine runs in the background when the accessibility features are turned on. while it’s running, it slows performance and takes up memory; therefore it interferes with the metrics 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 acc...
... list of possible attributes, see gecko object attributes. note: the exposed information is the same across all platforms — the inspector exposes gecko's accessibility tree, rather than information from the platform accessibility layer. keyboard controls the accessibility tab is fully keyboard-accessible: you can tab between the turn off accessibility features button and left and right panels. when one of the panels is focused, you can move the focus up and down items using the up and down arrow keys, and use the left and right arrow keys to expand and collapse expandable rows (e.g., different hierarchy levels of the accessibility tree). print accessibility tree to json you can print the contents of the accessibility tree to json by right-clicking on an entry in the accessibility ...

Index - Firefox Developer Tools
er.object instance; the debugger can access them only through methods like debugger.object.prototype.getownpropertydescriptor and debugger.object.prototype.defineproperty, ensuring that the debugger will not inadvertently invoke the referent's getters and setters. 28 deprecated tools deprecated, tools over the course of devtools development, we have added several experimental panels to try out new ideas. not all of these have had wide adoption, and due to the cost of maintenance, seldom used panels are eventually removed. 29 devtools api devtools the devtools api provides a way to register and access developer tools in firefox. 30 devtoolscolors css this chart lists colors and css variables as implemented in the dark theme and light ...
... transformed sources, as seen by the browser, with their original sources, as written by the developer. you can sometimes encounter problems working with source maps. this page explains the most common problems and how to fix them. 138 ui tour this article is a quick tour of the main sections of the javascript debugger's user interface. the ui is split vertically into three panels 139 using the debugger map scopes feature this feature is useful when debugging source-mapped code. it enables you to see the variables from the original source. it’s also possible to inspect variables from the generated scopes (e.g., a bundle file with all concatenated module files). 140 the web developer menu add-ons, debugging, tools, web developer ...

HTMLElement.hidden - Web APIs
hide content that is meant to be directly accessible to the user. appropriate use cases for hidden include: content that isn't yet relevant but may be needed later content that was previously needed but is not any longer content that is reused by other parts of the page in a template-like fashion creating an offscreen canvas as a drawing buffer inappropriate use cases include: hiding panels in a tabbed dialog box hiding content in one presentation while intending it to be visible in others elements that are not hidden must not link to elements which are. syntax ishidden = htmlelement.hidden; htmlelement.hidden = true | false; value a boolean which is true if the element is hidden from view; otherwise, the value is false. example here's an example where a hidden block is...
...to foobar.com!</h1> <p>by clicking "ok" you agree to be awesome every day!</p> <button class="button" id="okbutton">ok</button> </div> this html creates a panel (in a <div> block) that welcomes the user to a site and tells them what they're agreeing to by clicking the ok button. the follow-up panel once the user clicks the "ok" button in the welcome panel, the javascript code swaps the two panels by changing their respective values for hidden. the follow-up panel looks like this in html: <div id="awesome" class="panel" hidden> <h1>thanks!</h1> <p>thank you <strong>so</strong> much for agreeing to be awesome today! now get out there and do awesome things awesomely to make the world more awesome!</p> </div> css the content is styled using the css below. .panel { font: 16px "op...

Performance fundamentals - Web Performance
optimized to scroll arbitrary content; this is usually not a concern. but often trading some generality and quality for speed, such as using a static rendering instead of a css radial gradient, can push scrolling framerate over a target. css media queries allow these compromises to be restricted only to devices that need them. ...
...e over a target. css media queries allow these compromises to be restricted only to devices that need them. many applications use transitions or animations through "pages", or "panels". for example, the user taps a "settings" button to transition into an application configuration screen, or a settings menu "pops up". firefox is highly optimized to transition and animate scenes that: use pages/panels approximately the size of the device screen or smaller transition/animate the css transform and opacity properties transitions and animations that adhere to these guidelines can be offloaded to the system compositor and run maximally efficiently. memory and power usage improving memory and power usage is a similar problem to speeding up startup: don't do unneeded work or lazily load uncommon...

page-mod - Archive of obsolete content
extremely simple and consists only of a static string, don't use contentscript: if you do, you may have problems getting your add-on approved on amo. instead, keep the script in a separate file and load it using contentscriptfile. this makes your code easier to maintain, secure, debug and review. a page-mod only attaches scripts to documents loaded in tabs. it will not attach scripts to add-on panels, page-workers, sidebars, or firefox hidden windows. to stop a page-mod from making any more modifications, call its destroy() method. the pagemod constructor takes a number of other options to control its behavior: contentstyle lists stylesheets to attach, supplied as strings. contentstylefile lists stylesheets to attach, supplied in separate files. contentscri...

ui - Archive of obsolete content
one, it appears in the toolbar at the top right of the browser window: togglebutton a toggle button is a special kind of button that's for representing a binary on/off state, like a checkbox. so they have a checked property which is toggled when the user clicks the button, and the icon gets a "pressed" look when the button is checked. it's otherwise identical to the action button. attaching panels to buttons is only supported from firefox 30 onwards. from firefox 30 onwards, you can attach panels to toggle buttons, by passing the button into the panel's constructor or its show() method: frame a frame enables you to create an html iframe, using bundled html, css and javascript. this can then be added to a designated area of the firefox user interface. at the moment you can only add fr...

Displaying annotations - Archive of obsolete content
> </html> save this in data/annotation as annotation.html. annotation panel content script the annotation panel has a minimal content script that sets the text: self.on('message', function(message) { $('#annotation').text(message); }); save this in data/annotation as annotation.js. updating main.js finally, update main.js with the code to construct the annotation panel: var annotation = panels.panel({ width: 200, height: 180, contenturl: data.url('annotation/annotation.html'), contentscriptfile: [data.url('jquery-1.4.2.min.js'), data.url('annotation/annotation.js')], onshow: function() { this.postmessage(this.content); } }); execute cfx run one last time. activate the annotator and enter an annotation. you should see a yellow border around the ite...

Overview - Archive of obsolete content
ld user interfaces, get user input, and examine the dom of pages loaded by the user. meanwhile the main module contains the application logic and mediates interactions between the different sdk objects. we could represent the basic interactions between the main module and the various content scripts like this: user interface the annotator's main user interface consists of a widget and three panels. the widget is used to switch the annotator on and off, and to display a list of all the stored annotations. the annotation-editor panel enables the user to enter a new annotation. the annotation-list panel shows a list of all stored annotations. the annotation panel displays a single annotation. additionally, we use the notifications module to notify the user when the add-on's storage qu...

Firefox addons developer guide - Archive of obsolete content
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 guide was written as a first step guide for beginners. if we add too much topics, they possibly make learners weary. an alternative idea: writing a "next step" guide for interested people such as adding statusbar buttons, sidebar panels, and so on. (by piro) i do think this guide should cover more advanced topics as well. there already is a tutorial for beginners: building an extension. slosd 09 april 2009 ...

Index of archived content - Archive of obsolete content
getbrowserfordocument getbrowserforwindow gettabforbrowser gettabforid gettabforwindow loaduri quit selecttab tabs helperapps.jsm home.jsm banner panels homeprovider.jsm homestorage nativewindow contextmenus doorhanger menu toast notifications.jsm pageactions...

Adding the structure - Archive of obsolete content
)"/> </statusbar> the statusbar xul element defines a horizontal status bar where informative messages about an application's state can be displayed. it can contain both text messages (i.e. "done" in mozilla when a document finishes loading) and graphical messages (f.e. the lock icon in mozilla that shows whether or not a loaded document was encrypted with ssl). status bars comprise a series of panels, each one defined by a statusbarpanel xul element. each status bar panel displays a different kind of status information. graphical panels (like the one we are creating here that displays an icon) are given the statusbarpanel-iconic class so they can be styled accordingly by the css stylesheet that defines these elements' appearance. the status attribute is not part of the xul definition for the...

Getting Started - Archive of obsolete content
kin/1.0" chrome:displayname="my skin" chrome:accesskey="m" chrome:author="me" chrome:description="this is my custom skin for mozilla" chrome:name="myskin/1.0" chrome:image="preview.png"> the blue areas are explained below. the first line should match the line that you modified in the previous section. the display name. that is what the user sees in the preference panels list of themes. the access key is what key you can press to activate the skin in the preferences. replace the author section with your name. the description shows up below the preview image. place your theme name and version number on this line point to your preview.png/preview.jpg/preview.gif here the packages section lists which components of the browser suit that you are modifying. if we...

In-Depth - Archive of obsolete content
each colour is one pixel in the border. if you want the borde...

Panel - Archive of obsolete content
...

Proxy UI - Archive of obsolete content
ndows). 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. the preference changes selecting the proxy "mode" all product's proxy preference panels share a basic design: a radio button that selects the proxy mode, then "related proxy mode" ui when needed. for the purposes of this document, "proxy mode" means both: whatever was selected in the ui (as opposed to the value of the network.proxy.type. the underlying behavior. the currently available modes are based on "network.proxy.type". for example, firefox 3: [ ] no proxy [ ] auto-detect pr...

Venkman Internals - Archive of obsolete content
gijskruitbosch 05:41, 7 march 2007 (pst) venkman-debugger.js sets hooks in to the jsdidebuggerservice. initdebugger(). scriptmanager in initdebugger() the previous loaded scripts are passed to an onscriptcreated() method which binds them to a scriptmanager. there is one scriptmanager per url (web page). this method is set into jsdiscripthook.onscriptcreated venkman-views.js views are the panels shown within the venkman window. for example, the "open windows" view shows the browser's windows. venkman-records.js a "record" seems to be data underlying a view. for example, framerecord represents a javascript stack frame. venkman-msg.js localization code, reads venkman.properties from a subdirectory of "locale" and injects variables. things like msg.alert define variables msg_alert. ...

linkedpanel - Archive of obsolete content
« xul reference home linkedpanel type: id the id of the linked tabpanel element that will be displayed when the tab is selected. if this attribute is not used, the tab will be connected to the panel at the corresponding index in the tabpanels element that the tab is in its tabs container. however, if this attribute is used, this behavior is overridden, and the tab will always be linked to a specific panel. this might be used to avoid duplication by linking several tabs to one panel with slight differences to the content adjusted in the select event. ...

panel.fade - Archive of obsolete content
« xul reference homefadetype: one of the values belowthe fade attribute, which may only be used with arrow panels, lets you set up a panel that will automatically fade away after a short time. 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. ...

panel.flip - Archive of obsolete content
e 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 applied to arrow panels. an arrow panel can also specify a value of slide, which causes the arrow to "slide" instead of flipping when the panel doesn't have room. a sliding panel will have the start (or end) position extended such that the panel can be the requested size, meaning the arrow will no longer be at the start (or end) of the panel - i.e., the arrow will appear to have been slid along the panel...

panel.label - Archive of obsolete content
...

removeAllTabsBut - Archive of obsolete content
if only one tab page is displayed, this method does nothing. ...

Menus - Archive of obsolete content
sociated with a command to carry out. menuseparator a separator between items in a menu. in the example above, the 'file' menu has four menuitems and one menuseparator on it. the menu and each menuitem has a label indicating its purpose. other types of tags should not appear on a menupopup. if you want to create a general purpose popup that isn't a menu, use a panel instead. for this, see panels. the menubar element a menu bar is created by using the xul menubar tag. usually, the main window for an application will have a menubar across the top of the window. on the macintosh, the menubar is placed along the top of the screen. you do not have to do anything to handle this difference. the first menubar encountered when parsing the xul window will be used as the main menu bar for the win...

OpenClose - Archive of obsolete content
pt, use the popup's hidepopup method. it takes no arguments. popup.hidepopup(); determining if a popup is open for menus, you can check the open property of the menu, button or toolbarbutton. if true, the menu is open. for other types of popups, the state property may be examined to determine whether a popup is open or not. this property is available for all types of popups, including menus, panels and tooltips. when a popup is closed, the state property has the value closed, whereas a popup that is visible has a value for the state property of open. this property is readonly and applies to the menupopup, panel or tooltip element. the state property can also have two other values, used while a popup is transitioning from being closed to open and vice versa. when a popup is about to be show...

PopupKeys - Archive of obsolete content
ing a textbox and opening the textbox's context menu keeps the focus within the textbox. however, the capturing listener ensures that no key events reach the textbox while the menu is open. unlike with a menu, when a panel is opened, the focus is removed from any element that has it. this allows the focus to be shifted to elements within the panel. for more information about focus handling within panels, see focus in panels. ignoring keys the ignorekeys attribute may be used to disable the key listener described above. when the ignorekeys attribute is placed on a <menupopup> or <panel> element, and its value is set to the value true, the key listener is not used. <panel ignorekeys="true"> in this case, none of the key handling described above is performed. instead, you will have to handle thi...

Positioning - Archive of obsolete content
p should appear on the screen. if these attributes are used, the popup will appear at the location the attributes specify. as with the position attribute, the arguments to the openpopup method override unless the last argument is set to true. here is an example: <panel left="100" top="200"> <button label="test"/> </panel> the left and top attributes are most useful when using non-autohiding panels. with these, you can record the left and top positions as the popup is moved around, and use the persist attribute to maintain these attributes across sessions. this way, a panel will always open at the same location on the screen as it was the last time. ...

deck.selectedPanel - Archive of obsolete content
selectedpanel type: element holds a reference to the currently selected panel within a deck element. ...

Property - Archive of obsolete content
selectedcount selectedindex selecteditem selecteditems selectedpanel selectedtab selectionend selectionstart selstyle seltype sessioncount sessionhistory showcommentcolumn showpopup size smoothscroll spinbuttons src state statusbar statustext stringbundle strings style subject suppressonselect tabcontainer tabindex tabs tabscrolling tabpanels tag textlength textvalue timeout title toolbarname toolbarset tooltip tooltiptext top treeboxobject type uri useraction value valuenumber view webbrowserefind webnavigation webprogress width wizardpages wraparound year yearleadingzero related dom element properties dom:element.attributes dom:element.baseuri dom:element.childelementcount ...

Grids - Archive of obsolete content
« previousnext » ...

Persistent Data - Archive of obsolete content
collected and stored in a rdf file (localstore.rdf) in the same directory as other user preferences. it holds state information about each window. this method has the advantage that it works with mozilla user profiles, so that each user can have different settings. xul allows you to save the state of any element. you will typically want to save toolbar states, window positions and whether certain panels are displayed or not, but you can save almost anything. persist attribute to allow the saving of state, you simply add a persist attribute to the element which holds a value you want to save. the persist attribute should be set to a space-separated list of attributes of the element that you want to save. the element must also have an id attribute in order to identify it. for example, to save the ...

XUL Tutorial - Archive of obsolete content
simple elements creating a window adding buttons adding labels and images input controls numeric controls list controls progress meters adding html elements using spacers more button features the box model the box model element positioning box model details groupboxes adding more elements more layout elements stacks and decks stack positioning tabboxes grids content panels splitters toolbars and menus toolbars simple menu bars more menu features popup menus scrolling menus events and scripts adding event handlers more event handlers keyboard shortcuts focus and selection commands updating commands broadcasters and observers document object model document object model modifying a xul interface manipulating lists box objects xpcom interf...

XUL Changes for Firefox 1.5 - Archive of obsolete content
designed primarily for lists of textual items. the <richlistbox> supports much of the same api as the <listbox> and single items, created with the <richlistitem> element may be selected. see xul:richlistbox for more information. preferences system several elements have been added which may be used for creating preference windows. these windows are special types of dialogs which support several panels, each of which may be contained in the same file or a separate file. a set of icons will appear across the top of the dialog allowing the user to switch panels. along with the new preference elements and some additional attributes for existing elements, they make it easy to set preferences without having to use code. for more information, see preferences system. bfcache mozilla now caches the p...

XUL controls - Archive of obsolete content
scale reference <splitter> allows the user to adjust the division of space between elements. <splitter collapse="before"> <grippy/> </splitter> splitter reference related elements: grippy <tab> description goes here. <tab label="firefox"/> tab reference related elements: tabs tabbox tabpanels <textbox> a textbox which allows a single line of text to be entered. <textbox value="firefox"/> more information about the textbox element. textbox reference <textbox multiline="true"> a textbox which allows multiple lines of text to be entered. <textbox multiline="true"/> more information about the mul...

deck - Archive of obsolete content
rce, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties selectedindex type: integer returns the index of the currently selected item. you may select an item by assigning its index to this property. by assigning -1 to this property, all items will be deselected. returns -1 if no items are selected do not hide panels; the deck element only understands visible panels. selectedpanel type: element holds a reference to the currently selected panel within a deck element. assigning a value to this property will modify the selected panel. inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, di...

elements - Archive of obsolete content
verlay p page popup popupset preference preferences prefpane prefwindow progressmeter r radio radiogroup resizer richlistbox richlistitem resizer row rows rule s script scrollbar scrollbox scrollcorner separator spacer splitter stack statusbar statusbarpanel stringbundle stringbundleset t tab tabbrowser tabbox tabpanel tabpanels tabs template textnode textbox titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip tree treecell treechildren treecol treecols treeitem treerow treeseparator triple v vbox w window wizard wizardpage ...

statusbar - Archive of obsolete content
i suggest using the add-on bar instead. « xul reference home [ examples | attributes | properties | methods | related ] an element used to create a status bar, usually placed along the bottom of a window. it is virtually equivalent to a standard box, but may be rendered differently. contains statusbarpanels. properties accessibletype examples <statusbar> <statusbarpanel label="left panel"/> <spacer flex="1"/> <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, inse...

tabbrowser - Archive of obsolete content
it is already in the cache. this is the flag used when the reload button is pressed while the shift key is held down. load_flags_bypass_proxy: reload the page, ignoring the proxy server. load_flags_charset_change: this flag is used if the document needs to be reloaded because the character set changed. removealltabsbut( tabelement ) return type: no return value removes all of the tab panels except for the one corresponding to the specified tab. if only one tab page is displayed, this method does nothing. removecurrenttab() return type: tab element removes the currently displayed tab page. if it is the only displayed tab, this method does nothing. removeprogresslistener( listener ) return type: no return value remove a nsiwebprogresslistener from the browser. removeta...

tabs - Archive of obsolete content
interfaces nsiaccessibleprovider, nsidomxulselectcontrolelement ...

XUL - Archive of obsolete content
you get started with xul, originally from xulplanet. xul reference xul elements, attributes, properties, methods, and event handlers. xul controls a quick list of all of the available xul controls. the joy of xul describes the key features and components of xul. menus and popups guide a guide on using menus and popup panels. template guide a detailed guide on xul templates, which is a means of generating content from a datasource. drag and drop how to perform drag and drop operations. overlays overlays are used to describe extra content for the ui. they provide a powerful mechanism for extending and customizing existing xul applications. ...

CSS and JavaScript accessibility best practices - Learn web development
ot rely on color alone for signposts/information, as this will be no good for those who can't see the color. instead of marking required form fields in red, for example, mark them with an asterisk and in red. hiding things there are many instances where a visual design will require that not all content is shown at once. for example, in our tabbed info box example (see source code) we have three panels of information, but we are positioning them on top of one another and providing tabs that can be clicked to show each one (it is also keyboard accessible — you can alternatively use tab and enter/return to select them). screen reader users don't care about any of this — they are happy with the content as long as the source order makes sense, and they can get to it all. absolute positioning...

Introduction to CSS layout - Learn web development
lap other elements on the page. absolute positioning moves an element completely out of the page's normal layout flow, like it is sitting on its own separate layer. from there, you can fix it in a position relative to the edges of the page's <html> element (or its nearest positioned ancestor element). this is useful for creating complex layout effects such as tabbed boxes where different content 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 tha...

Positioning - Learn web development
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 element should be f...

Assessment: Structuring planet data - Learn web development
xt in a new directory in your local computer. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. note: alternatively, you could use a site like jsbin or glitch to do your assessment. you could paste the html, css and javascript into one of these online editors. if the online editor you are using doesn't have separate javascript/css panels, feel free to put them inline <script>/<style> elements inside the html page. project brief you are working at a school; currently your students are studying the planets of our solar system, and you want to provide them with an easy-to-follow set of data to look up facts and figures about the planets. an html data table would be ideal — you need to take the raw data you have available and tu...

Image gallery - Learn web development
t to get this assessment started, you should go and grab the zip file for the example, unzip it somewhere on your computer, and do the exercise locally to begin with. alternatively, you could use a site like jsbin or glitch to do your assessment. you could paste the html, css and javascript into one of these online editors. if the online editor you are using doesn't have separate javascript/css panels, feel free to put them inline <script>/<style> elements inside the html page. note: if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. project brief you have been provided with some html, css and image assets and a few lines of javascript code; you need to write the necessary javascript to turn this into a working program. the ht...

What is JavaScript? - Learn web development
-called application programming interfaces (apis) provide you with extra superpowers to use in your javascript code. apis are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. they do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and then put them together to make a bookshelf. they generally fall into two categories. browser apis are built into your web browser, and are able to expose data from the surrounding computer envir...

Adding features to our bouncing balls demo - Learn web development
get this assessment started, make a local copy of index-finished.html, style.css, and main-finished.js from our last article in a new directory in your local computer. alternatively, you could use a site like jsbin or glitch to do your assessment. you could paste the html, css and javascript into one of these online editors. if the online editor you are using doesn't have separate javascript/css panels, feel free to put them inline <script>/<style> elements inside the html page. note: if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. hints and tips a couple of pointers before you get started. this assessment is quite challenging. read the whole assessment before you start coding, and take each step slowly and carefully. it...

Accessible Toolkit Checklist
s in the tab order the other radio buttons can be selected and focused with up/down arrow. the focused radio button is always selected, and vice versa keyboard and msaa support must still work correctly when radio button labels have textfields, combo boxes or other controls as part of their prompts. msaa support, including checkbox state and statechange event tab panels ctrl+[shift]+tab or ctrl+pgup/pgdn to switch tabs tabs can be focused, and then left/right arrow to switch first click on a tab switches to it, second click focuses it msaa support. note, you can use the accessible description to expose the current tab position, such as "3 of 5" in order to provide ease of access for the user. the "of" will be parsed out by the assist...

Performance best practices for Firefox front-end engineers
cooperative scheduling of background tasks api, and doing it only when we have a free second where presumably the user isn’t doing something. see also the blog post collective scheduling with requestidlecallback. as of bug 1353206, you can also schedule idle events in non-dom contexts by using services.tm.idledispatchtomainthread. see the nsithreadmanager.idl file for more details. hide your panels if you’re adding a new xul <xul:popup> or <xul:panel> to a document, set the hidden attribute to true by default. by doing so, you cause the binding applied on demand rather than at load time, which makes initial construction of the xul document faster. get familiar with the pipeline that gets pixels to the screen learn how pixels you draw make their way to the screen. knowing the path they ...

Internationalized Domain Names (IDN) Support in Mozilla Browsers
pport for internationalized domain names and is the first browser with built-in support for new rfc's for idn established by ietf. this means that there is no longer any need to use a plug-in to process non-ascii domain names. netscape/mozilla's support for idn is not without some bugs. one notable bug is that non-ascii names are not always displayed correctly in some ui areas such as preference panels, bookmarks and history. non-ascii names are not always correctly displayed in the location bar due to the fact that ace to unicode conversion is not implemented yet. of particular concern for japanese users is the one in which full-width japanese roman characters are not normalized to ascii roman characters. (cf. bug 210734.) this forces the japanese user to shift out of the japanese input mode t...

Widget Wrappers
otherwise indicated. attribute description id the widget's id type the type of widget (button, view, custom). for xul-provided widgets, 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. this will point to the overflow chevron on overflowable toolbars if and only if your widget node is overflowed, to the anchor for the panel menu if your widget is inside the panel menu, and to the node itself in all other cases overflowed boolean indicating whether the node is currently in the overflow panel of the toolbar isgroup false, will be true...

PopupNotifications.jsm
e is used, for example, to display geolocation related notifications. to use this, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/popupnotifications.jsm"); once you've imported the module, you can then use the popupnotifications object it exports; this object provides methods for creating and displaying popup notification panels. note: this code module is imported by firefox chrome windows, so you don't have to do it yourself in most extensions. method overview void locationchange(); notification getnotification(id, browser); void remove(notification); notification show(browser, id, message, anchorid, mainaction, secondaryactions, options); properties attribute t...

MathML Demo: <mo> - operator, fence, separator, or accent
the symbols occur in the context of a simple expression. in general, the lspace and rspace around the relation should be greater than that around the operation. operator and relations center vertically on the math axis. ...

WebReplayRoadmap
normal features of the developer tools is pretty limited in recording/replaying tabs. while the supported features will grow over time, the ui needs to be improved so that features which aren't supported are not shown or are shown in a disabled state. currently, only the debugger, console, and inspector developer tools will work correctly in a recording/replaying tab, and some features of these panels will not work, or will not work in the same way as when a normal tab is being debugged. one important issue is that any side effects from evaluating expressions via the console or the debugger's watch expressions will not carry over when the tab resumes executing. this restriction is in place to ensure that js executes the same way when replaying as it did while recording. dynamic analysis fea...

Gecko Roles
o button that is a menu item. role_root_pane a root pane. a specialized pane that has a glass pane and a layered pane as its children. its children can include scroll bars and a viewport. role_scroll_pane a scroll pane. an object that allows a user to incrementally view a large amount of information. role_split_pane a split pane. a specialized panel that presents two other panels at the same time. between the two panels is a divider the user can manipulate to make one panel larger and the other panel smaller. role_table_column_header the header for a column of a table. role_table_row_header the header for a row of a table. role_tear_off_menu_item a menu item used to tear off and reattach its menu. role_terminal represents an accessible term...

AT APIs Support
yelp help viewer - the help viewer in gnome evolution email - provides integrated mail, addressbook and calendaring functionality to users of the gnome desktop. on mac platform camino - web browser for os x xul applications xul applications make full use of the gecko architecture, not only for html content, but also for the entire user interface. widgets such as menus, tab panels, tree views and dialogs are provided via an xml language called xul (extensible user-interface language). none of the user interface contains standard os controls. this is done to ensure a common look and feel across all supported platforms, and to allow for different skins (appearances). developing a xul window is not that different from developing a web page, but the elements available to add w...

nsIAccessibleProvider
0d xulmenuitem 0x0000100e xulmenupopup 0x0000100f xulmenuseparator 0x00001010 xulpane 0x00001011 xulprogressmeter 0x00001012 xulscale 0x00001013 xulstatusbar 0x00001014 xulradiobutton 0x00001015 xulradiogroup 0x00001016 xultab 0x00001017 the single tab in a dialog or tabbrowser/editor interface. xultabbox 0x00001018 a combination of a tabs object and a tabpanels object. xultabs 0x00001019 the collection of tab objects, usable in the tabbox and independent of as well. xultext 0x0000101a xultextbox 0x0000101b xulthumb 0x0000101c xultree 0x0000101d xultreecolumns 0x0000101e xultreecolumnitem 0x0000101f xultoolbar 0x00001020 xultoolbarseparator 0x00001021 xultooltip 0x00001022 xultoolbarbutton 0x00001023 xforms el...

nsIAccessibleRole
ed pane that has a glass pane and a layered pane as its children. also refer to role_glass_pane and role_layered_pane. role_scroll_pane 86 a scroll pane. an object that allows a user to incrementally view a large amount of information. its children can include scroll bars and a viewport. also refer to role_view_port. role_split_pane 87 a split pane. a specialized panel that presents two other panels at the same time. between the two panels is a divider the user can manipulate to make one panel larger and the other panel smaller. role_table_column_header 88 the header for a column of a table. role_table_row_header 89 the header for a row of a table. role_tear_off_menu_item 90 a menu item used to tear off and reattach its menu. role_terminal 91 represents an accessible terminal. role...

nsIDOMWindowUtils
the metrics of the text. query_text_rect 3204 query_text_rect queries the specified text's rect. query_editor_rect 3205 query_text_rect queries the focused editor's rect. query_character_at_point 3208 query_character_at_point queries the character information at the specified point. the point is offset in the window. note: if there are some panels at the point, this method send the query event to the panel's widget automatically. query_text_rect_array 3209 selection_set_flag_use_native_line_break 0x0000 one of values of aadditionalflags of sendselectionsetevent(). this flag must not be set with selection_set_flag_use_xp_line_break. when this is set (or not set selection_set_flag_use_xp_line_break), the...

getFile
available on mac os x only these locations are supported only on mac os x versions of gecko. ...

UI Tour - Firefox Developer Tools
this article is a quick tour of the main sections of the javascript debugger's user interface. the ui is split vertically into three panels source list pane source pane the contents of the third pane depend on the current state of the debugger and may include the following sections: toolbar watch expressions breakpoints call stack scopes xhr breakpoints event listener breakpoints dom mutation breakpoints source list pane the source list pane lists all 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...

Tutorial: Set a breakpoint - Firefox Developer Tools
nough that the best way to run it is to use the scratchpad panel, which is not enabled by default. to enable it, click on the options gear at the upper right of the browser content toolbox, and make sure the “scratchpad” box in the “default developer tools” section the left is checked. the scratchpad panel should appear at the top of the toolbox alongside the console, debugger, and memory panels. click on the scratchpad panel and enter the following code: components.utils.import("resource://gre/modules/jsdebugger.jsm"); components.utils.import("resource://gre/modules/console.jsm"); // this simply defines 'debugger' in this scratchpad; // it doesn't actually start debugging anything. adddebuggertoglobal(this); // create a 'debugger' instance. var dbg = new debugger; // make th...

Dominators view - Firefox Developer Tools
hat they keep alive through references. if you already know what shallow size, retained size, and dominators are, skip to the dominators ui section. otherwise, you might want to review the article on dominators concepts. dominators ui to see the dominators view for a snapshot, select "dominators" in the "view" drop-down list. it looks something like this: the dominators view consists of two panels: the dominators tree panel shows you which nodes in the snapshot are retaining the most memory the retaining paths panel (new in firefox 47) shows the 5 shortest retaining paths for a single node. dominators tree panel the dominators tree tells you which objects in the snapshot are retaining the most memory. in the main part of the ui, the first row is labeled "gc roots". immediately un...

Tips - Firefox Developer Tools
o lock the highlighter on the current element. right-click any property and select "show mdn docs" to view the mdn docs for this property. click on the filter icon () next to an overridden property to find which other property overrides it. right-click on a name, value, or rule to copy anything from the name, the value, the declaration or the whole rule to your clipboard. web console in all panels: esc opens the split console; useful when debugging, or inspecting nodes in the command line: $0 references the currently selected node. $() is a shortcut to document.queryselector(). $$() returns an array with the results from document.queryselectorall(). copy copies anything as a string. right-click a node in the inspector and click "use in console" to create a tempn variable for it...

FileSystem - Web APIs
e: domfilesystemedge full support ≤18prefixed notes full support ≤18prefixed notes prefixed implemented with the vendor prefix: webkitnotes edge only supports this api in drag-and-drop scenarios using the the datatransferitem.webkitgetasentry() method. ...

ARIA: tab role - Accessibility
); } }); }); function changetabs(e) { const target = e.target; const parent = target.parentnode; const grandparent = parent.parentnode; // remove all current selected tabs parent .queryselectorall('[aria-selected="true"]') .foreach(t => t.setattribute("aria-selected", false)); // set this tab as selected target.setattribute("aria-selected", true); // hide all tab panels grandparent .queryselectorall('[role="tabpanel"]') .foreach(p => p.setattribute("hidden", true)); // show the selected panel grandparent.parentnode .queryselector(`#${target.getattribute("aria-controls")}`) .removeattribute("hidden"); } best practices it is recommended to use a button element with the role tab for their built-in functional and accessible features instea...

An overview of accessible web applications and widgets - Accessibility
ole attributes to describe the tab list and each tab. --> <ol role="tablist"> <li id="ch1tab" role="tab"> <a href="#ch1panel">chapter 1</a> </li> <li id="ch2tab" role="tab"> <a href="#ch2panel">chapter 2</a> </li> <li id="quiztab" role="tab"> <a href="#quizpanel">quiz</a> </li> </ol> <div> <!-- notice the role and aria-labelledby attributes we've added to describe these panels. --> <div id="ch1panel" role="tabpanel" aria-labelledby="ch1tab">chapter 1 content goes here</div> <div id="ch2panel" role="tabpanel" aria-labelledby="ch2tab">chapter 2 content goes here</div> <div id="quizpanel" role="tabpanel" aria-labelledby="quiztab">quiz content goes here</div> </div> aria is well supported by all major browsers, including firefox, safari, opera, chrome, and internet...

Accessibility documentation index - Accessibility
to support msaa in an application in order to make it accessible with 3rd party assistive technologies, as well as for hackers wishing to be involved in mozilla's msaa support specifically. 93 keyboard-navigable javascript widgets accessibility, dom, needsupdate web applications often use javascript to mimic desktop widgets such as menus, tree views, rich text fields, and tab panels. 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. 94 mobile accessibility checklist accessibility, firefox os, guidelines, mobile, checklist this document provides a conci...

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

Mozilla CSS extensions - CSS: Cascading Style Sheets
scale-horizontal scalethumb-horizontal scalethumb-vertical scale-vertical scrollbarbutton-down scrollbarbutton-left scrollbarbutton-right scrollbarbutton-up scrollbar-small scrollbarthumb-horizontal scrollbarthumb-vertical scrollbartrack-horizontal scrollbartrack-vertical separator spinner spinner-downbutton spinner-textfield spinner-upbutton statusbar statusbarpanel tab tabpanels tab-scroll-arrow-back tab-scroll-arrow-forward textfield textfield-multiline toolbar toolbarbutton-dropdown toolbox tooltip treeheadercell treeheadersortarrow treeitem treetwisty treetwistyopen treeview window background-image gradients -moz-linear-gradient -moz-radial-gradient elements -moz-element sub-images -moz-image-rect(...

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
removed in firefox 64. spinner-upbutton firefox removed in firefox 64. splitter firefox removed in firefox 64. statusbar firefox removed in firefox 64. statusbarpanel firefox removed in firefox 64. tab firefox removed in firefox 64 tabpanel firefox removed in firefox 64. tabpanels firefox removed in firefox 64 tab-scroll-arrow-back firefox removed in firefox 64. tab-scroll-arrow-forward firefox removed in firefox 64. toolbar firefox removed in firefox 64. toolbarbutton firefox removed in firefox 64. toolbarbutton-dropdown firefox removed in firefox 64. toolbarg...

304 Not Modified - HTTP
requested resources. it is an implicit redirection to a cached resource. this happens when the request method is safe, like a get or a head request, or when the request is conditional and uses a if-none-match or a if-modified-since header. the equivalent 200 ok response would have included the headers cache-control, content-location, date, etag, expires, and vary. many developer tools' network panels of browsers create extraneous requests leading to 304 responses, so that access to the local cache is visible to developers. status 304 not modified specifications specification title rfc 7232, section 4.1: 304 not modified hypertext transfer protocol (http/1.1): conditional requests ...

Authoring MathML - MathML
r the source but mathml is also generated when the document is saved. to get the mathml code, save the document as mml and open it with any text editor. alternatively, you can extract the odf file (which is actually a zip archive) and open an xml file called content.xml. amaya is the w3c's web editor, which is able to handle mathml inside xhtml documents. use the elements and the special chars panels to create various advanced mathematical constructs. simple text such as a+2 is automatically parsed and the appropriate mathml markup is generated. once you are done, you can directly save your xhtml page and open it in mozilla. optical character & handwriting recognition inftyreader is able to perform some optical character recognition, including translation of mathematical equations into math...