Search completed in 1.24 seconds.
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 tab
panels element should be placed in a tabbox although it does not have to be a direct child.
... the children of the tab
panels 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.
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
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 tab
panels 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
tab
panels the container for the pages.
...it consists of two children, a tabs element which contains the row of tabs and a tab
panels elements which contains the tabbed pages.
... shown below is the general syntax of a tabbox: <tabbox id="tablist"> <tabs> <!-- tab elements go here --> </tabs> <tab
panels> <!-- tabpanel elements go here --> </tab
panels> </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 sdk
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 mypanel = sdk
panels.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 "viewweb
panelssidebar".
... bookmarks with "load this bookmark in sidebar" checked in the properties open in the "viewweb
panelssidebar".
...to open a page in the "viewweb
panelssidebar" 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
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 tab
panels element which contains the contents of the pages.
... attributes eventnode, handlectrlpageupdown, handlectrltab properties accessibletype, eventnode, handlectrlpageupdown, handlectrltab, selectedindex, selectedpanel, selectedtab, tabs, tab
panels 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> <tab
panels> <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> </tab
panels> </tabbox> attributes eventnode type: one of the values below indi...
... tab
panels type: tab
panels element the tab
panels 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, tab
panels, tabpanel.
DevTools API - Firefox Developer Tools
toolbox a toolbox is a frame for the tool
panels that is debugging a specific target.
... gettool
panels() 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/> <tab
panels 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.gettool
panels().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> <tab
panels> <tabpanel> <checkbox label="check1"/> </tabpanel> <tabpanel orient="vertical"> <checkbox label="check2"/> <checkbox label="check3"/> </tabpanel> </tab
panels> </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 tab
panels { -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> <tab
panels> <tabpanel> <!-- content for the main panel.
...--> </tabpanel> </tab
panels> </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 tab
panels 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 tab
panels 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 tab
panels 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> <tab
panels> <tabpanel orient="vertical"> ...
... </tabpanel> </tab
panels> 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 tab
panels 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,tab
panels { 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 tab
panels 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> <tab
panels> <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> </tab
panels> </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
if this attribute is not used, the tab will be connected to the panel at the corresponding index in the tab
panels element that the tab is in its tabs container.
... related elements tabbox, tabs, tab
panels, tabpanel.
tabpanel - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a individual panel in a tab
panels 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, tab
panels.
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 tab
panels.
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...
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 tab
panels 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 tab
panels=document.getelementbyid("tab
panels"); tab
panels.removechild(tab
panels.childnodes[currentindex]); tabs.removeitemat(currentindex); /*work ...
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...
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, tab
panels, 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.
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.
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 tab
panels 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 ...
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...
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 tab
panels 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 ...
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...
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.
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.
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.
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).
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.
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.
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 tab
panels 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(...
304 Not Modified - HTTP
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.