Search completed in 1.64 seconds.
112 results for "panels":
Your results are loading. Please wait...
Panels - Archive of obsolete content
the panel element the panel element is used to create panels.
... <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button label="details" type="panel"> <panel id="search-panel"> <label control="name" value="name:"/> <textbox id="name"/> </panel> </button> </window> many panels will be associated with a button, as in this example.
... preventing panels from automatically closing a panel will be closed when a user clicks outside of the panel or when the escape key is pressed.
...And 4 more matches
tabpanels - Archive of obsolete content
the tabpanels element should be placed in a tabbox although it does not have to be a direct child.
... the children of the tabpanels element become the panels of the tabbox.
...there should be the same number of panels as there are tabs.
... panels should never be hidden; hiding the tab suffices to make the panel inaccessible.
Floating Panels - Archive of obsolete content
floating panels a floating panel is used for secondary popups such as tool palettes and property inspector panels.
...on mac, floating panels are invisible when another application is made active, and become visible again when the xul application is made active.
...a label for the titlebar may be set using the label attribute, as in the following example: <panel id="info-panel" noautohide="true" titlebar="normal" label="image properties"> closing a floating panel unlike other panels, a floating panel does not close when clicking outside of it.
Content Panels - Archive of obsolete content
« previousnext » in this section, we'll look at how to add panels that can display html pages or other xul files.
... adding child panels there may be times when you want to have part of a document loaded from a different page.
tabpanels - Archive of obsolete content
« xul reference tabpanels type: tabpanels element the tabpanels element contained within the tabbox.
Practical positioning examples - Learn web development
let's look at the html contained within the body: <section class="info-box"> <ul> <li><a href="#" class="active">tab 1</a></li> <li><a href="#">tab 2</a></li> <li><a href="#">tab 3</a></li> </ul> <div class="panels"> <article class="active-panel"> <h2>the first tab</h2> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...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.
...And 15 more matches
Index - Archive of obsolete content
527 panel please refer to the panels jep.
...for instance: 1331 floating panels a floating panel is used for secondary popups such as tool palettes and property inspector panels.
... 1338 panels xul, xul popup guide a panel is a popup which can support any type of content.
...And 10 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
for instance: 600 floating panels a floating panel is used for secondary popups such as tool palettes and property inspector panels.
... 607 panels xul, xul popup guide a panel is a popup which can support any type of content.
... 855 tabpanels xul properties, xul reference no summary!
...And 9 more matches
dev/panel - Archive of obsolete content
individual built-in tools, such as the javascript debugger or the web console, occupy "panels" in the toolbox.
... with the dev/panel module, you can create your own panels in the toolbox: the panel gets a tab in the toolbox toolbar which enables the user to open it: you specify the panel's content and behavior using html, css, and javascript.
...ence to the debuggee setup: function(options) { this.debuggee = options.debuggee; }, dispose: function() { this.debuggee = null; }, onready: function() { // in this function you can communicate // with the panel document } }); // export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); panel document environment the panel document loaded from the url property can of course include css and javascript just like a normal web page: <html> <head> <meta charset="utf-8"> <link href="./my-panel.css"rel="stylesheet"></link> <script src="resource://sdk/dev/volcan.js"></script> </head> <body> <div id="content"></div> </body> <script...
...And 6 more matches
Tabboxes - Archive of obsolete content
tabpanels the container for the pages.
...it consists of two children, a tabs element which contains the row of tabs and a tabpanels elements which contains the tabbed pages.
... shown below is the general syntax of a tabbox: <tabbox id="tablist"> <tabs> <!-- tab elements go here --> </tabs> <tabpanels> <!-- tabpanel elements go here --> </tabpanels> </tabbox> the tab elements are placed inside a tabs element, which is much like a regular box.
...And 6 more matches
panel - Archive of obsolete content
the screenshot below shows a panel whose content is built from the list of currently open tabs: panels are useful for presenting temporary interfaces to users in a way that is easier for users to ignore and dismiss than a modal dialog, since panels are hidden the moment users interact with parts of the application interface outside them.
... attaching panels to buttons you can attach a panel to a toggle button by passing the button itself as the position option to the panel's show() method or to its constructor: var { togglebutton } = require('sdk/ui/button/toggle'); var sdkpanels = require("sdk/panel"); var self = require("sdk/self"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./icon-16.png", "32...
...": "./icon-32.png", "64": "./icon-64.png" }, onchange: handlechange }); var mypanel = sdkpanels.panel({ contenturl: self.data.url("panel.html"), onhide: handlehide }); function handlechange(state) { if (state.checked) { mypanel.show({ position: button }); } } function handlehide() { button.state('window', {checked: false}); } updating panel content you can update the panel's content by: sending a message to a content script that updates the dom in the same document.
...And 3 more matches
Splitters - Archive of obsolete content
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.
... 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.
...And 3 more matches
DOM Inspector internals - Firefox Developer Tools
dom inspector from a high-level perspective the dom inspector primary ui consists of some toolbars and a panelset.
... the panelset contains two panels.
...(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.
...And 3 more matches
Sidebar - Archive of obsolete content
web panels sidebar content such as web pages can be safely loaded as sidebar in the "viewwebpanelssidebar".
... bookmarks with "load this bookmark in sidebar" checked in the properties open in the "viewwebpanelssidebar".
...to open a page in the "viewwebpanelssidebar" from chrome code (browser/addon/extension) such as from menuitem, it can call: openwebpanel(atitle, auri); accessing the sidebar from a browser.xul script the sidebar content is always in a document separate from the main browser document (the sidebar is actually implemented as a xul browser element).
...And 2 more matches
Deprecated tools - Firefox Developer 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.
... we have created this list of deprecated or removed panels.
...And 2 more matches
panel - Archive of obsolete content
ArchiveMozillaXULpanel
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.
... 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.
...you will not normally have to use this attribute, since it's automatically applied to arrow panels.
... label type: string for panels with titlebars, the label on the titlebar.
tabbox - Archive of obsolete content
the tabbox should contain two children, the first a tabs element which contains the tabs and the second a tabpanels element which contains the contents of the pages.
... attributes eventnode, handlectrlpageupdown, handlectrltab properties accessibletype, eventnode, handlectrlpageupdown, handlectrltab, selectedindex, selectedpanel, selectedtab, tabs, tabpanels examples <tabbox id="mytablist" selectedindex="2"> <tabs> <tab label="a first tab"/> <tab label="second tab"/> <tab label="another tab"/> <tab label="last tab"/> </tabs> <tabpanels> <tabpanel><!-- tabpanel first elements go here --></tabpanel> <tabpanel><!-- tabpanel second elements go here --></tabpanel> <tabpanel><button label="click me"/></tabpanel> <tabpanel><!-- tabpanel fourth elements go here --></tabpanel> </tabpanels> </tabbox> attributes eventnode type: one of the values below indi...
... tabpanels type: tabpanels element the tabpanels element contained within the tabbox.
...efore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tabs, tab, tabpanels, tabpanel.
DevTools API - Firefox Developer Tools
toolbox a toolbox is a frame for the toolpanels that is debugging a specific target.
... gettoolpanels() returns a toolid → toolpanel map for currently loaded tools.
... 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.
...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(); ...
Screen.availHeight - Web APIs
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.
...note the panels window filling all available vertical space at the left of the screen.
Release notes - Archive of obsolete content
firefox 33 highlights added support for context menus in panels via a new option in the panel constructor.
... updated the default theme used for panels on mac os x.
... firefox 30 highlights added the ability to anchor panels to buttons.
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
page for sidebar panels and other xul documents that are opened within inline frames, use the page element as the root element.
... <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.
... -moz-box-align -moz-box-align: start; pack -moz-box-pack -moz-box-pack: stretch; flex -moz-box-flex -moz-box-flex: 1; ordinal -moz-box-ordinal-group -moz-box-ordinal-group: 2 table 4: css properties corresponding to xul attributes tabbrowser .tabbrowser-strip { -moz-box-ordinal-group: 2; } tabbrowser tabpanels { -moz-box-ordinal-group: 1; } listing 28: a user stylesheet that locates the tab bar at the bottom icons corresponding to filetypes firefox allows you to use a special uri scheme, moz-icon, that produces filetype icons that are standard for whatever platform it is running on.
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
firefox lets you read and write preference values using handy xpcom services and create preference panels with interface widgets.
...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.
Adding sidebars - Archive of obsolete content
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> </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.
...you should try to balance the content in the tab panels so that you don't end up with uneven and mostly empty panels.
Popup Guide - Archive of obsolete content
panels a panel can contain any type of content.
... floating panels a floating popup is a type of panel with a titlebar and acts like an auxiliary window.
... handling keys within popups for information about how keys are handled within menus and panels, see handling keys within popups.
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 ...
... 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 dialogheader notification notificationbox menubar menu menuitem menusep...
...arator 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 treecols treeitem treerow treeseparator box hbox vbox bbox deck stack grid columns column rows row scrollbox action assign binding bindings conditions content member param...
Accessibility/XUL Accessibility Reference - Archive of obsolete content
an be focused, even if not visible due to being hidden under something 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.
... tabpanel see tabbox tabpanels see tabbox tabs see tabbox textbox <label control="inputid"> <!--first name:--> </label> <textbox id='inputid'> tree <tree hidecolumnpicker="true" > <treecols> <treecol label="cats" primary="true"/> </treecols> <treechildren> <treeitem container="true" open="true"> <treerow> <treecell label="<!--male-->" /> </treerow> <treechildren> <treeitem> <treerow> <treecell label="...
Accessibility Inspector - Firefox Developer Tools
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.
... 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).
Index - Firefox Developer Tools
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.
...the ui is split vertically into three panels 139 using the debugger map scopes feature this feature is useful when debugging source-mapped code.
Migrating from Firebug - Firefox Developer Tools
the devtools share the same shortcuts, but also provide shortcuts for the different panels.
...those panels allow you to enable and disable single or all breakpoints and to remove single breakpoints or all of them at once.
...a preview of the response is shown within specifically named panels like html.
ui - Archive of obsolete content
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.
widget - Archive of obsolete content
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.
...nst data = require("sdk/self").data; var player = widgets.widget({ id: "player", width: 72, label: "player", contenturl: data.url("buttons.html") }); player.port.emit("init"); player.port.on("play", function() { console.log("playing"); }); player.port.on("pause", function() { console.log("pausing"); }); player.port.on("stop", function() { console.log("stopping"); }); attaching panels to widgets you can supply a panel to the widget's constructor: if you do this, the panel is automatically displayed when the user clicks the widget.
ui/button/toggle - Archive of obsolete content
attaching panels to buttons you can attach panels to buttons by passing the button as the position option to the panel's show() method or the panel's constructor: var { togglebutton } = require('sdk/ui/button/toggle'); var panels = require("sdk/panel"); var self = require("sdk/self"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./icon-16.png", "32": "./icon-32.
...png", "64": "./icon-64.png" }, onchange: handlechange }); var panel = panels.panel({ contenturl: self.data.url("panel.html"), onhide: handlehide }); function handlechange(state) { if (state.checked) { panel.show({ position: button }); } } function handlehide() { button.state('window', {checked: false}); } disabling buttons you can disable a button by setting its disabled property to true.
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...
... var annotationlist = panels.panel({ width: 420, height: 200, contenturl: data.url('list/annotation-list.html'), contentscriptfile: [data.url('jquery-1.4.2.min.js'), data.url('list/annotation-list.js')], contentscriptwhen: 'ready', onshow: function() { this.postmessage(simplestorage.storage.annotations); }, onmessage: function(message) { require('sdk/tabs').open(message); } });...
Adding the structure - Archive of obsolete content
status bars comprise a series of panels, each one defined by a statusbarpanel xul element.
...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.
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.
... 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.
Creating a Skin - Archive of obsolete content
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.
... four elements, the menubar, the menupopup, the toolbar and the tabpanels appear in light blue.
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
there are a number of elements that are specialized types of boxes, such as toolbars and tabbed panels.
...this would be useful for a wizard interface where a series of similar panels are displayed in sequence.
XUL Changes for Firefox 1.5 - Archive of obsolete content
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.
tab - Archive of obsolete content
ArchiveMozillaXULtab
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.
... related elements tabbox, tabs, tabpanels, tabpanel.
tabpanel - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a individual panel in a tabpanels element.
... isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tabbox, tabs, tab, tabpanels.
WAI-ARIA basics - Learn web development
dated the structure of the tabbed interface like so: <ul role="tablist"> <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">tab 1</li> <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">tab 2</li> <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">tab 3</li> </ul> <div class="panels"> <article class="active-panel" role="tabpanel" aria-hidden="false"> ...
... 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.
Handling common accessibility problems - Learn web development
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).
...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.
The Firefox codebase: CSS Guidelines
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.
... :root[lwt-popup-brighttext]: dark arrow panels and autocomplete panels.
Gecko Roles
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.
nsIAccessibleRole
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.
HTMLElement.hidden - Web APIs
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.
... 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.
Performance fundamentals - Web Performance
many applications use transitions or animations through "pages", or "panels".
...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.
Working with Events - Archive of obsolete content
if you do this, the listener will be called for any event emitted by that object, and its argument will be the name of the event: var ui = require("sdk/ui"); var panels = require("sdk/panel"); var self = require("sdk/self"); var panel = panels.panel({ contenturl: self.data.url("panel.html") }); panel.on("*", function(e) { console.log("event " + e + " was emitted"); }); var button = ui.actionbutton({ id: "my-button", label: "my button", icon: "./icon-16.png", onclick: handleclick }); function handleclick(state) { panel.show({ position: butto...
page-mod - Archive of obsolete content
it will not attach scripts to add-on panels, page-workers, sidebars, or firefox hidden windows.
Creating annotations - Archive of obsolete content
first, import the panel module: var panels = require('sdk/panel'); then add the following code to the main() function: 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) { console.log(this.annotationanchor); console.log(annotatio...
Displaying annotations - Archive of obsolete content
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.
Overview - Archive of obsolete content
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.
Tabbox - Archive of obsolete content
handling onclosetab 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 ...
Firefox addons developer guide - Archive of obsolete content
an alternative idea: writing a "next step" guide for interested people such as adding statusbar buttons, sidebar panels, and so on.
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...
Getting Started - Archive of obsolete content
that is what the user sees in the preference panels list of themes.
In-Depth - Archive of obsolete content
ainer, checkbox, dialog, dualbutton, dualbutton-dropdown, listbox, menu, menulist-textfield, menulist-button, menulist, menulist-text, progressbar, progresschunk, radio-container, radio, resizer, resizerpanel, separator, scrollbar, statusbar, statusbarpanel, toolbarbutton, toolbox, toolbar, treeheadercell, treeheadersortarrow, treeview, treeitem, treetwisty, treetwistyopen, tooltip, textfield, tabpanels, tab, tab-left-edge, tab-right-edge, scrollbartrack-horizontal, scrollbartrack-vertical, scrollbarthumb-vertical, scrollbarthumb-horizontal, scrollbarbutton-right, scrollbarbutton-down, scrollbarbutton-left, scrollbarbutton-up, scrollbargripper-vertical, scrollbargripper-horizontal -moz-border-bottom-colors defines a series of colours.
Panel - Archive of obsolete content
ArchiveMozillaJetpackUIPanel
please refer to the panels jep.
Proxy UI - Archive of obsolete content
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.
Venkman Internals - Archive of obsolete content
this method is set into jsdiscripthook.onscriptcreated venkman-views.js views are the panels shown within the venkman window.
linkedpanel - Archive of obsolete content
if this attribute is not used, the tab will be connected to the panel at the corresponding index in the tabpanels element that the tab is in its tabs container.
panel.flip - Archive of obsolete content
you will not normally have to use this attribute, since it's automatically applied to arrow panels.
panel.label - Archive of obsolete content
« xul reference home label type: string for panels with titlebars, the label on the titlebar.
removeAllTabsBut - Archive of obsolete content
« xul reference home removealltabsbut( tabelement ) return type: no return value removes all of the tab panels except for the one corresponding to the specified tab.
Menus - Archive of obsolete content
for this, see panels.
OpenClose - Archive of obsolete content
this property is available for all types of popups, including menus, panels and tooltips.
PopupKeys - Archive of obsolete content
for more information about focus handling within panels, see focus in panels.
Positioning - Archive of obsolete content
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.
deck.selectedPanel - Archive of obsolete content
« xul reference do not hide panels; the deck element only understands visible panels.
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
ArchiveMozillaXULTutorialGrids
next, we'll look at adding content panels.
Persistent Data - Archive of obsolete content
you will typically want to save toolbar states, window positions and whether certain panels are displayed or not, but you can save almost anything.
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 controls - Archive of obsolete content
<tab label="firefox"/> tab reference related elements: tabs tabbox tabpanels <textbox> a textbox which allows a single line of text to be entered.
deck - Archive of obsolete content
ArchiveMozillaXULdeck
returns -1 if no items are selected do not hide panels; the deck element only understands visible panels.
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
contains statusbarpanels.
tabbrowser - Archive of obsolete content
removealltabsbut( tabelement ) return type: no return value removes all of the tab panels except for the one corresponding to the specified tab.
tabs - Archive of obsolete content
ArchiveMozillaXULtabs
related elements tabbox, tab, tabpanels, tabpanel.
XUL - Archive of obsolete content
menus and popups guide a guide on using menus and popup panels.
CSS and JavaScript accessibility best practices - Learn web development
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).
Introduction to CSS layout - Learn web development
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.
Positioning - Learn web development
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...
Assessment: Structuring planet data - Learn web development
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.
Image gallery - Learn web development
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.
What is JavaScript? - Learn web development
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.
Adding features to our bouncing balls demo - Learn web development
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.
Accessible Toolkit Checklist
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.
Performance best practices for Firefox front-end engineers
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.
Internationalized Domain Names (IDN) Support in Mozilla Browsers
one notable bug is that non-ascii names are not always displayed correctly in some ui areas such as preference panels, bookmarks and history.
Widget Wrappers
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.
PopupNotifications.jsm
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.
MathML Demo: <mo> - operator, fence, separator, or accent
binary operators and relations the following table contains instances of all operators found on the swp binary operations and binary relations panels.
WebReplayRoadmap
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.
AT APIs Support
widgets such as menus, tab panels, tree views and dialogs are provided via an xml language called xul (extensible user-interface language).
nsIAccessibleProvider
xultabbox 0x00001018 a combination of a tabs object and a tabpanels object.
nsIDOMWindowUtils
note: if there are some panels at the point, this method send the query event to the panel's widget automatically.
getFile
c constant string value notes ns_mac_desktop_dir ns_os_desktop_dir ns_mac_trash_dir "trsh" ns_mac_startup_dir "strt" ns_mac_shutdown_dir "shdwn" ns_mac_apple_menu_dir "applmenu" ns_mac_control_panels_dir "cntlpnl" ns_mac_extensions_dir "exts" ns_mac_fonts_dir "fnts" ns_mac_prefs_dir "prfs" ns_mac_documents_dir "docs" ns_mac_internet_search_dir "isrch" ns_osx_home_dir ns_os_home_dir ns_mac_home_dir ns_os_home_dir ns_mac_default_download_dir "dfltdwnld" ...
UI Tour - Firefox Developer Tools
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.
Tutorial: Set a breakpoint - Firefox Developer Tools
the scratchpad panel should appear at the top of the toolbox alongside the console, debugger, and memory panels.
Dominators view - Firefox Developer Tools
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.
Tips - Firefox Developer Tools
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.
FileSystem - Web APIs
it's not available for use in file or folder picker panels (such as when you use an <input> element with the htmlinputelement.webkitdirectory attribute.firefox full support 50ie no support noopera full support 15prefixed full support 15prefixed prefixed implemented with the ve...
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
--> <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.
Accessibility documentation index - Accessibility
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.
Keyboard-navigable JavaScript widgets - Accessibility
overview web applications often use javascript to mimic desktop widgets such as menus, tree views, rich text fields, and tab panels.
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
tabpanels firefox removed in firefox 64 tab-scroll-arrow-back firefox removed in firefox 64.
304 Not Modified - HTTP
WebHTTPStatus304
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.
Authoring MathML - MathML
use the elements and the special chars panels to create various advanced mathematical constructs.