deck.selectedPanel - Archive of obsolete content
« xul reference 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.

selectedPanel - Archive of obsolete content
« xul reference selectedpanel type: element holds a reference to the currently selected panel within a <tabbox> element.
... assigning a value to this property will modify the selected panel.
... a select event will be sent when the selected panel is changed.

Enabling the behavior - updating the status bar panel - Archive of obsolete content
httprequest.responsetext.match("ee0000")) icon.setattribute("status", "busted"); else if (gxmlhttprequest.responsetext.match("ffaa00")) icon.setattribute("status", "testfailed"); else if (gxmlhttprequest.responsetext.match("11dd11")) icon.setattribute("status", "success"); else icon.setattribute("status", ""); } updatetinderboxstatus() retrieves a reference to the statusbarpanel element then searches through the retrieved html document (stored in the responsetext property of the xmlhttprequest instance) for one of several color references.
...when it finds a color, it sets the panel's status attribute to the corresponding status, which causes the previously defined css rules to switch to the icon appropriate for that status.

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.

panel.ignorekeys - Archive of obsolete content
« xul reference home 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.

panel.noautohide - Archive of obsolete content
« xul reference home noautohide type: boolean if false, the default value, the panel will be hidden when the user clicks outside the panel or switches focus to another application.
... if true, the panel will only be closed when the hidepopup method is called.

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

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.

Panel - Archive of obsolete content
please refer to the panels jep.

onpaneload - Archive of obsolete content
« xul reference home onpaneload type: script code code defined here is called when the pane has been loaded, much like the load event for a window.

panel.label - Archive of obsolete content
« xul reference home label type: string for panels with titlebars, the label on the titlebar.

linkedPanel - Archive of obsolete content
« xul reference linkedpanel type: id of a tabpanel element gets and sets the value of the linkedpanel attribute.

tabpanels - Archive of obsolete content
« xul reference tabpanels type: tabpanels element the tabpanels element contained within the tabbox.

statusbarpanel-iconic-text - Archive of obsolete content
« xul reference home statusbarpanel-iconic-text use this class to have an image appear on the statusbarpanel as well as a text label.

statusbarpanel-iconic - Archive of obsolete content
« xul reference home statusbarpanel-iconic use this class to have an image appear on the statusbarpanel.

Migrating from Firebug - Firefox Developer Tools
the devtools share the same shortcuts, but also provide shortcuts for the different panels.
... web console the web console is the equivalent of firebug's console panel.
...in the devtools this option is called enable persistent logs and is available within the toolbox options panel.
...And 57 more matches

Index - Archive of obsolete content
51 panel add-on sdk, add-ons, extensions creates transient dialogs to implement part of an add-on's user interface.
... 74 content/loader provides one of the building blocks for those modules that use content scripts to interact with web content, such as panel and page-mod.
... 81 dev/panel enables you to extend the firefox developer tools.
...And 50 more matches

DevTools API - Firefox Developer Tools
in terms of user interface, each registered tool lives in its own tab (we call one tab a panel).
...an instance of a tool is called a toolpanel.
... the toolpanel is built only when the tool is selected (not when the toolbox is opened).
...And 46 more matches

Index - Archive of obsolete content
2 &lt;statusbarpanel&gt; deprecated, xul, xul elements, xul reference an individual element of a statusbar.
...unlike normal buttons, a statusbarpanel can only have a label or an image but not both.
... 178 linkedpanel xul attributes, xul reference no summary!
...And 42 more matches

CustomizableUI.jsm
customizableui is aware of two types of areas: toolbars and the menu panel.
...however, they can now be 'overflowable', that is, if there are too many widgets to fit in the toolbar's horizontal space, the excess widgets will be placed in a panel accessible from an anchor (chevron) in the toolbar.
...the view can be shown as its own panel when such a widget is in the toolbar, or as a sliding 'subview' of the menu panel when such a widget is in the menu panel.
...And 31 more matches

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 28 more matches

Tabboxes - Archive of obsolete content
tabpanels the container for the pages.
... tabpanel the body of a single page.
...the first tabpanel corresponds to the first tab, the second tabpanel corresponds to the second tab and so on.
...And 14 more matches

ARIA: tab role - Accessibility
the aria tab role indicates an interactive element inside a tablist that, when activated, displays its associated tabpanel.
... <button role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id">tab label</button> description an element with the tab role controls the visibility of an associated element with the tabpanel role.
...they should contain the aria-controls property identifying an element with the tabpanel role.
...And 12 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
if your extension isn’t working according to plan, first see if there’s an error being displayed on the errors panel of the error console.
... 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.
...And 10 more matches

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.
... scripting widget content to interact with the widget's content you need to load a separate script into the panel.
...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.
...And 9 more matches

Display a Popup - Archive of obsolete content
to display a popup dialog, use the panel module.
... a panel's content is defined using html.
... you can run content scripts in the panel: although the script running in the panel can't directly access your main add-on code, you can exchange messages between the panel script and the add-on code.
...And 9 more matches

Splitters - Archive of obsolete content
an example is the mozilla browser window, where you can change the size of the sidebar panel by dragging the bar in-between the two frames.
...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.
...And 9 more matches

Creating a dynamic status bar extension - Archive of obsolete content
« previousnext » this article builds upon the article creating a status bar extension, which creates a static status bar panel in the firefox status bar, by dynamically updating its content with information fetched from the web every few minutes.
... in order to add a reference to the javascript code that will do the real work: <?xml version="1.0" encoding="utf-8"?> <!doctype overlay> <overlay id="stockwatcher-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://stockwatcher/content/stockwatcher.js"/> <!-- firefox --> <statusbar id="status-bar"> <statusbarpanel id="stockwatcher" label="loading..." tooltiptext="current value" onclick="stockwatcher.refreshinformation()" /> </statusbar> </overlay> also, notice that the definition of the status bar panel now includes a new property, onclick, which references the javascript function that will be executed whenever the user clicks on the status bar panel.
... our extension will refresh the stock information display when the user clicks the panel.
...And 8 more matches

Autodial for Windows NT - Archive of obsolete content
a brief history of autodial on windows in the consumer versions of windows, (windows 95, windows 98, windows me) autodial for all applications is controlled from the control panel, in the internet options applet, under the tab connections.
...technically, this control panel applet (internet options) is part of internet explorer.
...for these oss, the autodial options found in the internet options control panel applet only apply to microsoft applications, including internet explorer and outlook.
...And 8 more matches

Build your own function - Learn web development
finally, add the following code inside the curly braces: const html = document.queryselector('html'); const panel = document.createelement('div'); panel.setattribute('class', 'msgbox'); html.appendchild(panel); const msg = document.createelement('p'); msg.textcontent = 'this is a message box'; panel.appendchild(msg); const closebtn = document.createelement('button'); closebtn.textcontent = 'x'; panel.appendchild(closebtn); closebtn.onclick = function() { panel.parentnode.removechild(panel); } this i...
... the first line uses a dom api function called document.queryselector() to select the <html> element and store a reference to it in a constant called html, so we can do things to it later on: const html = document.queryselector('html'); the next section uses another dom api function called document.createelement() to create a <div> element and store a reference to it in a constant called panel.
... we then use yet another dom api function called element.setattribute() to set a class attribute on our panel with a value of msgbox.
...And 8 more matches

nsIMsgAccountManagerExtension
the nsimsgaccountmanagerextension interface is used to add a new panel to thunderbird's account manager.
...the interface is basically a manifest and defines the properties of the new panel.
... a panel consists of a xul file with a page element as root element and the property file containing the localized name.
...And 8 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.
... one panel reacts to changes to the inspected document, and the other panel reacts to changes to the selection in the first panel.
...And 8 more matches

Creating annotations - Archive of obsolete content
we'll use two objects to create annotations: a page-mod to find page elements that the user can annotate, and a panel for the user to enter the annotation text itself.
... annotation editor panel so far we have a page-mod that can highlight elements and send information about them to the main add-on code.
... next we will create the editor panel, which enables the user to enter an annotation associated with the selected element.
...And 7 more matches

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 ...
...this is implemented as a panel that's shown in response to the widget's right-click message.
... the panel has three new files associated with it: a content-script which builds the panel content a simple html file used as a template for the panel's content a simple css file to provide some basic styling.
...And 6 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 6 more matches

Creating a Help Content Pack - Archive of obsolete content
(we're still not actually to the point where we're describing the actual data in each of these, so we'll just use some filler data for now.) add the following code inside the rdf:description element you just created: <nc:panellist> <rdf:seq> </rdf:seq> </nc:panellist> you'll create the relevant information descriptions within the rdf:seq element.
... the location of each of the glossary, index, and table of contents data sources is stored in one rdf:description element contained within one rdf:li element, like so: <rdf:seq> <rdf:li> <rdf:description nc:panelid="glossary" nc:datasources="chrome://foo/locale/help/glossary.rdf"/> </rdf:li> <rdf:li> <rdf:description nc:panelid="toc" nc:datasources="chrome://foo/locale/help/glossary.rdf"/> </rdf:li> <rdf:li> <rdf:description nc:panelid="index" nc:datasources="chrome://foo/locale/help/glossary.rdf"/> </rdf:li> ...
... </rdf:seq> the help viewer ui may or may not provide a panel for each of these data sources.
...And 5 more matches

Profiling with the Firefox Profiler
it has tighter integration with firefox than external profilers, and has more of a platform focus than the devtools performance panel.
... startup profiling does not use the settings that you configured in the add-on's panel.
...this is controlled by the "javascript" checkbox in the gecko profiler add-on's settings panel.
...And 5 more matches

Building an Account Manager Extension
furthermore we show the new panel only for imap accounts...
... components.utils.import("resource://gre/modules/xpcomutils.jsm"); //class constructor function devmoaccountmanagerextension() {}; // class definition devmoaccountmanagerextension.prototype = { name : "devmo-account", chromepackagename : "example@mozilla.org", showpanel: function(server) { //this panel is only shown for imap accounts...
...ions category devmoaccountmanagerextension.prototype._xpcom_categories: [{ category: "mailnews-accountmanager-extensions" }], // create entry point for the module if (xpcomutils.generatensgetfactory) var nsgetfactory = xpcomutils.generatensgetfactory([devmoaccountmanagerextension]); else var nsgetmodule = xpcomutils.generatensgetmodule([devmoaccountmanagerextension]); step3: create the new panel as next step we create the xul and the property file for your new panel.
...And 5 more matches

ui/button/toggle - Archive of obsolete content
e("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" }, onchange: function(state) { console.log(state.label + " checked state: " + state.checked); } }); by default, the button appears in the firefox toolbar: however, users can move it to the firefox menu panel: badged buttons new in firefox 36.
...for example, in the screenshots above, firefox uses the small icon when the button is in the toolbar and the large icon when the button is in the menu panel.
... 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...
...And 4 more matches

Adding sidebars - Archive of obsolete content
the tabbox element the « xul reference « element creates a tabbed view of one or more tabpanel elements.
... 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.
...And 4 more matches

Making it into a static overlay - Archive of obsolete content
xul in the same directory: <?xml version="1.0"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://navigator/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay> tinderstatusoverlay.xul starts with an xml processing instruction that identifies the file as xml (all xul files need to include this).
...then there is a statusbar element containing a statusbarpanel element.
...note that we've added a new attribute to the statusbarpanel element: insertbefore.
...And 4 more matches

PopupEvents - Archive of obsolete content
popupshowing this event is fired on a menupopup, panel or tooltip just before it is made visible.
... popupshown this event is fired on a menupopup, panel or tooltip once it is visible on screen.
... popuphiding this event is fired on a menupopup, panel or tooltip once it is about to be hidden.
...And 4 more matches

PopupKeys - Archive of obsolete content
for a panel, the only key that is handled by default is the escape key to close the panel.
...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.
...And 4 more matches

tab - Archive of obsolete content
attributes accesskey, afterselected, beforeselected, command, crop, disabled, first-tab, image, label, last-tab, linkedpanel, oncommand, pending, pinned, selected, tabindex, unread, validate, value properties accesskey, accessibletype, command, control, crop, disabled, image, label, linkedpanel, selected, tabindex, value examples (example needed) attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... 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.
...And 4 more matches

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 ind...
...returns -1 if no items are selected selectedpanel type: element holds a reference to the currently selected panel within a <tabbox> element.
...And 4 more matches

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.
... method overview void locationchange(); notification getnotification(id, browser); void remove(notification); notification show(browser, id, message, anchorid, mainaction, secondaryactions, options); properties attribute type description ispanelopen boolean returns true if the notification panel is currently visible, false if it is not.
... message a string to display in the notification panel.
...And 4 more matches

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.
... features of the accessibility panel the enabled accessibility panel looks like so: on the left-hand side, there is a tree diagram representing all the items in the accessibility tree for the current page.
... keyboard controls the accessibility tab is fully keyboard-accessible: you can tab between the turn off accessibility features button and left and right panels.
...And 4 more matches

Index - Firefox Developer Tools
11 application application, debugging, devtools, firefox, guide, manifests, service workers the application panel provides tools for inspecting and debugging modern web apps (also known as progressive web apps).
... 12 debugging service workers application, devtools, firefox, guide, service workers in this article we will look at debugging service workers using the firefox devtools application panel.
... 13 inspecting web app manifests application, devtools, firefox, guide, manifest in this article we will look at inspecting app manifests using the firefox devtools application panel.
...And 4 more matches

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.
... dominators tree panel the dominators tree tells you which objects in the snapshot are retaining the most memory.
... retaining paths panel the retaining paths panel is new in firefox 47.
...And 4 more matches

Reddit Example - Archive of obsolete content
this example add-on creates a panel containing the mobile version of reddit.
... when the user clicks on the title of a story in the panel, the add-on opens the linked story in a new tab in the main browser window.
... this is the complete add-on script: var data = require("sdk/self").data; var button = require("sdk/ui/button/action").actionbutton({ id: "reddit-panel", label: "reddit panel", icon: "./icon-16.png", onclick: function() { reddit_panel.show(); } }); var reddit_panel = require("sdk/panel").panel({ width: 240, height: 320, contenturl: "http://www.reddit.com/.mobile?keep_extension=true", contentscriptfile: [data.url("jquery-2.1.0.min.js"), data.url("panel.js")] }); reddit_panel.port.on("click", function(url)...
...And 3 more matches

Displaying annotations - Archive of obsolete content
in this chapter we'll use a page-mod to locate elements of web pages that have annotations associated with them, and a panel to display the annotations.
...s new function when the user enters a new annotation: function updatematchers() { matchers.foreach(function (matcher) { matcher.postmessage(simplestorage.storage.annotations); }); } function handlenewannotation(annotationtext, anchor) { var newannotation = new annotation(annotationtext, anchor); simplestorage.storage.annotations.push(newannotation); updatematchers(); } annotation panel the annotation panel just shows the content of an annotation.
... there are two files associated with the annotation panel: a simple html file to use as a template a simple content script to build the panel's content these files will live in a new subdirectory of data which we'll call annotation.
...And 3 more matches

Adding the structure - Archive of obsolete content
to implement this ui, we'll add a statusbarpanel element to the statusbar element in the navigator.xul file.
... <statusbar id="status-bar" class="chromeclass-status" ondragdrop="nsdraganddrop.drop(event, contentareadndobserver);"> <statusbarpanel id="component-bar"/> <statusbarpanel id="statusbar-display" label="&statustext.label;" flex="1"/> <statusbarpanel class="statusbarpanel-progress"> <progressmeter class="progressmeter-statusbar" id="statusbar-icon" mode="normal" value="0"/> </statusbarpanel> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" status="none"/> <statusbarpanel class="statusbarpanel-iconic" id="offline-status"/> <statusbarpanel class="statusbarpanel-iconic" id="security-button" onclick="browserpageinfo(null, 'securitytab')"/> </statusbar> the statusbar xul element defines a horizontal status bar where informati...
... status bars comprise a series of panels, each one defined by a statusbarpanel xul element.
...And 3 more matches

OpenClose - Archive of obsolete content
this method may be used for any type of popup, either a menupopup, a panel, or a tooltip, including ones that can be opened via other means, for instance, a popup attached via the context attribute.
...here is an example mouse click event listener: function mouseclicked(event) { var panel = document.getelementbyid("some-panel"); panel.openpopup(null, "", event.clientx, event.clienty, false, false); } the openpopupatscreen method a second method, openpopupatscreen, may be used to open up a popup and place it at a specific screen coordinate.
...this property is available for all types of popups, including menus, panels and tooltips.
...And 3 more matches

prefpane - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single preference panel in a prefwindow.
... attributes helpuri, image, label, onpaneload, selected, src properties image, label, preferenceelements, preferences, selected, src examples methods preferenceforelement <prefpane id="panegeneral" label="general" src="chrome://path/to/paneoverlay.xul"/> or <prefpane id="panegeneral" label="general" onpaneload="ongeneralpaneload(event);"> <preferences> <preference id="pref_one" name="extensions.myexten...
...</prefpane> attributes helpuri type: uri the uri of the help page associated with a preference panel.
...And 3 more matches

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.
... javascript document.getelementbyid("okbutton") .addeventlistener("click", function() { document.getelementbyid("welcome").hidden = true; document.getelementbyid("awesome").hidden = false; }, false); this code sets up a handler for the welcome panel's "ok" button that hides the welcome panel and makes the follow-up panel—with the curious name "awesome"—visible in its place.
... the welcome panel <div id="welcome" class="panel"> <h1>welcome 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.
...And 3 more matches

Border-image generator - CSS: Cascading Style Sheets
image-slice */ #border-slice-control .ui-dropdown-list { height: 4.3em; } /* border-image-width */ #border-width-control .ui-dropdown-list { height: 6.2em; } /* border-image-outset */ #border-outset-control .ui-dropdown-list { height: 4.3em; } #aditional-properties .property { width: 200px; } #aditional-properties .ui-input-slider > input { width: 80px !important; } /* unit settings panel */ #unit-settings { padding: 10px; position: absolute; background: #fff; font-size: 12px; border-radius: 3px; border: 1px solid #ccc; text-align: center; color: #555; position: absolute; z-index: 1000; box-shadow: 0 0 3px 0 #bababa; transition: all 0.25s; } #unit-settings .title { width: 100%; margin: -5px auto 0; color: #666; font-size: 14px; font-weight: bold; line-heig...
...is.max = max; this.updatelimit(); }; guideline.prototype.updatelimit = function updatelimit() { if (this.unit === 1) inputslidermanager.setmax(this.topic, 100); else inputslidermanager.setmax(this.topic, this.max); }; guideline.prototype.setunit = function setunit(type) { if (type === '%') this.unit = 1; if (type === '') this.unit = 0; this.updatelimit(); }; /* * unit panel */ var unitpanel = (function unitpanel () { var panel; var title; var precision; var step; var unit_topic = null; // settings are made for this topic var step_option = [1, 0.1, 0.01]; var updateprecision = function updateprecision(value) { inputslidermanager.setprecision('unit-step', value); inputslidermanager.setstep('unit-step', step_option[value]); inputslidermanage...
...e); }; var updateunitsettings = function updateunitsettings(value) { if (unit_topic) inputslidermanager.setstep(unit_topic, value); }; var show = function show(e) { var topic = e.target.getattribute('data-topic'); var precision = inputslidermanager.getprecision(topic); var step = inputslidermanager.getstep(topic); unit_topic = topic; title.textcontent = topic; panel.setattribute('data-active', 'true'); panel.style.top = e.target.offsettop - 40 + 'px'; panel.style.left = e.target.offsetleft + 30 + 'px'; inputslidermanager.setvalue('unit-precision', precision); inputslidermanager.setvalue('unit-step', step); }; var init = function init() { panel = document.createelement('div'); title = document.createelement('div'); var close = docum...
...And 3 more matches

ui/button/action - Archive of obsolete content
equire("sdk/ui/button/action"); var button = actionbutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" }, onclick: function(state) { console.log("button '" + state.label + "' was clicked"); } }); by default, the button appears in the firefox toolbar: however, users can move it to the firefox menu panel using the toolbar customization feature: badged buttons new in firefox 36.
...for example, in the screenshots above, firefox uses the small icon when the button is in the toolbar and the large icon when the button is in the menu panel.
...on a device with a "normal" screen resolution, the toolbar has space for 18 x 18 pixels and the menu panel has space for 32 x 32 pixels.
...And 2 more matches

Release notes - Archive of obsolete content
firefox 34 highlights new api: dev/panel enables you to extend the firefox developer tools.
... 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.
...And 2 more matches

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.
... the annotation-editor panel enables the user to enter a new annotation.
... the annotation-list panel shows a list of all stored annotations.
...And 2 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

Adding preferences to an extension - Archive of obsolete content
now that we're monitoring the preferences, we can set up to watch the stock information and display it in the status bar panel.
... refreshinformation() this method is slightly revised from previous versions, in that it needs to fetch the preference for the stock to watch and use that to construct the url to monitor, as well as to construct the string to be displayed in the status bar panel.
... refreshinformation: function() { // because we may be called as a callback, we can't rely on // "this" referring to the right object, so we need to reference // it by its full name var symbol = stockwatcher.tickersymbol; var fullurl = "http://quote.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&e=.csv&s=" + symbol; function inforeceived() { var samplepanel = document.getelementbyid('stockwatcher2'); var output = httprequest.responsetext; if (output.length) { // remove any whitespace from the end of the string output = output.replace(/\w*$/, ""); // build the tooltip string var fieldarray = output.split(","); samplepanel.label = symbol + ": " + fieldarray[1]; samplepanel.tooltiptext =...
...And 2 more matches

Creating a status bar extension - Archive of obsolete content
"1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>status-bar-sample-1@example.com</em:id> <em:version>1.0</em:version> <em:type>2</em:type> <!-- front end metadata --> <em:name>status bar sample 1</em:name> <em:description>sample static status bar panel</em:description> <em:creator>my name</em:creator> <em:homepageurl>http://developer.mozilla.org/en/docs/creating_a_status_bar_extension</em:homepageurl> <!-- describe the firefox versions we support --> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion...
...our overlay file, status-bar-sample-1.xul, looks like this: <?xml version="1.0" encoding="utf-8"?> <!doctype overlay > <overlay id="status-bar-sample-1-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- firefox --> <statusbar id="status-bar"> <statusbarpanel id="status-bar-sample-1" label="hello world" tooltiptext="sample status bar item" /> </statusbar> </overlay> the first order of business in the status-bar-sample-1.xul file is to establish that this is in fact a xul file, and to set up a unique id for the overlay.
...in this case, we're simply inserting a new panel into the status bar at the bottom of firefox browser windows.
...And 2 more matches

Index of archived content - Archive of obsolete content
working with events xul migration guide high-level apis addon-page base64 clipboard context-menu hotkeys indexed-db l10n notifications page-mod page-worker panel passwords private-browsing querystring request selection self simple-prefs simple-storage system tabs timers ui url widget windows low-l...
...evel apis /loader chrome console/plain-text console/traceback content/content content/loader content/mod content/symbiont content/worker core/heritage core/namespace core/promise dev/panel event/core event/target frame/hidden-frame frame/utils fs/path io/byte-streams io/file io/text-streams lang/functional lang/type loader/cuddlefish loader/sandbox net/url net/xhr places/bookmarks p...
... 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 pageaction...
...And 2 more matches

Positioning - Archive of obsolete content
second, the position can be specified using several attributes placed on the menupopup, panel or tooltip element.
... for a menupopup or panel attached using the popup attribute, the position attribute controls how the popup is anchored to the element with the popup attribute.
... if a menupopup, panel or tooltip has a margin specified in a style sheet or using the inline style attribute, this margin will be applied around the outside of the popup.
...And 2 more matches

Common Firefox theme issues and solutions - Archive of obsolete content
address bar "door hangers" door hanger sync panel not styled the sync panel at the bottom of the "door hanger" for the save password panel displayed when a user logs into a website needs to be styled to match rest of panel including border.
... this issue also applies to the edit bookmark panel, which is activated by double clicking on the bookmark star in the url bar.
... style inspector style inspector is missing button icons on toolbar the style inspector is missing icons from its inspect and markup panel buttons on its toolbar.
...And 2 more matches

WAI-ARIA basics - Learn web development
guiding users through complex widgets there are a whole host of other roles that can identify non-semantic element structures as common ui features that go beyond what's available in standard html, for example combobox, slider, tabpanel, tree.
...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"> ...
... </article> <article role="tabpanel" aria-hidden="true"> ...
...And 2 more matches

Test your skills: Conditionals - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).
... response — begins uninitialized, but is later used to store a reponse that will be printed to the output panel.
... response — begins uninitialized, but is later used to store a reponse that will be printed to the output panel.
...And 2 more matches

Handling common JavaScript problems - Learn web development
after the packages have finished installing, try loading up a javascript file: you'll see any issues highlighted with green (for warnings) and red (for errors) circles next to the line numbers, and a separate panel at the bottom provides line numbers, error messages, and sometimes suggested values or other fixes.
... the center panel shows the code in the selected script.
... the right-hand panel shows useful details pertaining to the current environment — breakpoints, callstack and currently active scopes.
...And 2 more matches

A bird's-eye view of the Mozilla framework
it examines what happens when the user performs a simple user interface (ui) action such as clicking a link in the contents panel of the help viewer window shown below.
...in this example, we’re interested in the rdf sub-graph underlying thecontents panel widget within thehelp viewer window.
... javascript client example suppose the javascript service in figure 2 is getlink() in help.js, which responds to the user clicking on a link in thecontents panel within thehelp viewer window by obtaining the link from thecontents panel elements stored in a dom tree.
...And 2 more matches

Building the WebLock UI
the icon is actually a separate <statusbarpanel/> element that gets overlaid into the main browser, along with some javascript and some css to control the behavior and appearance of the element, respectively.
...ul file in its entirety: the weblock overlay <?xml version="1.0"?> <?xml-stylesheet href="chrome://navigator/content/weblock.css" type="text/css"?> <overlay id="weblockoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://weblock/content/weblock.js"/> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="weblock-status" insertbefore="offline-status" oncommand="loadweblock();" status="none"/> </statusbar> </overlay> note that the root element for this file is not a <window/> but an <overlay/>.
...in this case, the weblock <statusbarpanel/> appears as a child of the <statusbar/> element with id "status-bar".
...And 2 more matches

Tutorial: Set a breakpoint - Firefox Developer Tools
these are located at the bottom right of the options panel; you may need to scroll to see them.
... our example code is long enough that the best way to run it is to use the scratchpad panel, which is not enabled by default.
...the scratchpad panel should appear at the top of the toolbox alongside the console, debugger, and memory panels.
...And 2 more matches

ARIA Test Cases - Accessibility
a screen magnifier should move the current view to the alert or open a new panel with the alert information optional, but desired: if there are widgets within the alert, their role and any keyboard mnemonic (accesskey) should be spoken.
...ts: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - tabpanel simple tabpanel example dojo nightly build another tab panel example just annother tab panel example yui tab panel example with live regions (using yui aria plug-in).
...note that for tabs with ajax content, for performance reasons it is optional that they only load the panel only once the user presses space on the new tab.
...And 2 more matches

Communicating using "port" - Archive of obsolete content
the panel and page-worker objects integrate the worker api directly.
... so to receive messages from a content script associated with a panel you use panel.port.on(): var panel = require("sdk/panel").panel({ contentscript: "self.port.emit('showing', 'panel is showing');" }); panel.port.on("showing", function(text) { console.log(text); }); panel.show(); conversely, to emit user-defined messages from your add-on you can just call panel.port.emit(): var panel = require("sdk/panel").panel({ contentscript: "self.port.on('alert', function(text) {" + " console.log(text);" + "});" }); panel.show(); panel.port.emit("alert", "panel is showing"); the panel and page-worker objects only host a single page at a time, so each distinct page object only needs a single channel of communication to its content scripts.
... from the content script to the main add-on code: var mymessagepayload = "some data"; self.port.emit("mymessage", mymessagepayload); from the main add-on code (in this case a panel instance) to the content script: var mymessagepayload = "some data"; panel.port.emit("mymessage", mymessagepayload); port.on() the port.on() function registers a function as a listener for a specific named message sent from the other side using port.emit().
... in a content script, to listen for "mymessage" sent from the main add-on code: self.port.on("mymessage", function handlemymessage(mymessagepayload) { // handle the message }); in the main add-on code (in this case a panel instance), to listen for "mymessage" sent from a a content script: panel.port.on("mymessage", function handlemymessage(mymessagepayload) { // handle the message }); port.removelistener() you can use port.on() to listen for messages.

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.
... - menu-type toolbar buttons specifying type="menu" and adding a menupop child element (in firefox 3, you can also use the panel element), or setting the popup attribute to reference a popup menu located elsewhere by its id, will display a popup menu when the button is pressed.
... <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.

Proxy UI - Archive of obsolete content
seamonkey menu: preferences > advanced group > proxies panel menu: right-click on offline-online button (on browser windows).
... 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 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.
...selecting "proxy configuration..." opens the preferences panel to "advanced > proxies" (tbdescribed: changing the prefs values).

Popup Guide - Archive of obsolete content
panels a panel can contain any type of content.
... a panel is created using the panel element.
... 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.

deck - Archive of obsolete content
attributes selectedindex properties selectedindex, selectedpanel examples <deck selectedindex="2"> <description value="this is the first page"/> <button label="this is the second page"/> <box> <description value="this is the third page"/> <button label="this is also the third page"/> </box> </deck> attributes selectedindex type: integer gets and sets the index of the currently selected panel.
...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.

Building up a basic demo with PlayCanvas editor - Game development
you can drag it around or apply new values in the right panel.
...click on the root folder in the hierarchy panel (to make sure that the new shape appears in the root, and not as a child of the box) then click on the big add entity (plus) button and select cylinder from the dropdown list — it will add a new cylinder shape to the scene.
... make sure the new material in the assets panel is selected, to bring up the entity inspector.
...click on the plus button in the assets panel, select the script option, and name your new script file boxanimation.js.

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 have a single-page app with a main content panel that is regularly updated using xmlhttprequest or fetch, a screenreader user might miss those updates.
...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.

Creating a Firefox sidebar
such kind of sidebar can be a simple web panel or a full-featured extension that is completely integrated with the browser.
...a sample extension to add a web panel is available as a starter.obsolete since gecko 57 if you'd like to have a deeper integration with the browser to offer more complex features, a traditional overlay extension can be an option.
... as of firefox 23, the addpanel and addpersistentpanel functions have been removed from the deprecated, netscape-derived window.sidebar object.
... that means the ability to add a traditional sidebar panel is no longer available from web content.

How to implement a custom autocomplete search component
in case you do not like the standard tree layout of the autocomplete popup, you can also trigger the use of a richlistbox by linking a panel with the type attribute set to "autocomplete-richlistbox" like this: <panel id="richpopup" type="autocomplete-richlistbox" /> <textbox id="text1" type="autocomplete" autocompletesearch="simple-autocomplete" showcommentcolumn="true" autocompletepopup="richpopup" autocompletesearchparam='[{"value":"mark","comment":"cool dude"},{"value":"mary","comment":"nice lady"},{"value":"jimm...
...y","comment":"very uncool guy"},{"value":"jimbo","comment":null}]' /> how to solve autocomplete panel focus problems in some situations there may be problems with the display of the autocomplete panel (this is the panel where the autocomplete results/suggestions are displayed): the autocomplete panel seems to appear seldom and very erratically.
... this can happen when using an autcomplete panel in a panel (for example if an autcomplete textbox is set in a panel that shows and hides).
... the solution is to define a custom autocomplete panel as follows with the noautofocus="true" attribute (very important, don't miss this part): <panel id="popup_autocomplete" type="autocomplete" noautofocus="true" /> <textbox type="autocomplete" autocompletesearch="custom-autocomplete" autocompletepopup="popup_autocomplete" /> there is another example of the use of an autocomplete panel in autocomplete code snippets.

Debugging service workers - Firefox Developer Tools
in this article we will look at debugging service workers using the firefox devtools application panel.
... when you open the application panel’s service workers view on a page that doesn't have a service worker registered, you'll get the following output shown: this gives you some advice on what to do if you don't have a service worker registered, and were perhaps expecting there to be one registered!
... getting your service worker to register before you can look at your service worker in action in the applications panel, you need to successfully register it.
... finding registered service workers on other domains as mentioned above, the service worker view of the application panel shows all the service workers registered on the current domain.

Set a logpoint - Firefox Developer Tools
logpoints print a message to the console panel instead of pausing code execution.
... to create a logpoint: right click on a line number in the debugger panel and pick add log action from the context menu.
...the result is logged in the console panel every time the line with the logpoint executes.
... you can view the list of logpoints in the breakpoints side panel.

Aggregate view - Firefox Developer Tools
there are three main ways to group the data: type call stack inverted call stack you can switch between them using the dropdown menu labeled "group by:" located at the top of the panel: there's also a box labeled "filter" at the top-right of the pane.
... type this is the default view, which looks something like this: it groups the things on the heap into types, including: javascript objects: such as function or array dom elements: such as htmlspanelement or window strings: listed as "strings" javascript sources: listed as "jsscript" internal objects: such as "js::shape".
...if you select an item, you'll see the retaining paths panel for that item: call stack the call stack shows you exactly where in your code you are making heap allocations.
...this page simply runs a script that creates a large number of dom nodes (200 htmldivelement objects and 4000 htmlspanelement objects).

Examine and edit CSS - Firefox Developer Tools
to view user-agent styles (i.e., browser-default css rules), enable "inspector > show browser styles" under the developer tool settings panel.
... examine computed css to see the complete computed css for the selected element, select the computed panel in the righthand pane.
... this panel shows the calculated value that each css property has for the selected element.
...right-click on the changes panel and select copy rule from the context menu.

Index - Web APIs
1901 htmlspanelement api, html dom, interface, reference the htmlspanelement interface represents a <span> element and derives from the htmlelement interface, but without implementing any additional properties or methods.
... 3832 svgtspanelement api, needsexample, reference, svg, svg dom the svgtspanelement interface represents a <tspan> element.
...it is inherited by various text-related interfaces, such as svgtextelement, svgtspanelement, svgtrefelement, svgaltglyphelement and svgtextpathelement.
...it is inherited by svgtextelement, svgtspanelement, svgtrefelement and svgaltglyphelement.

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.

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
resizer firefox removed in firefox 63 resizerpanel firefox removed in firefox 63.
... 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.

Event reference
popuphidden popupevent xul a menupopup, panel, or tooltip has been hidden.
... popuphiding popupevent xul a menupopup, panel, or tooltip is about to be hidden.
... popupshowing popupevent xul a menupopup, panel, or tooltip is about to become visible.
... popupshown popupevent xul a menupopup, panel, or tooltip has become visible.

Communicating With Other Scripts - Archive of obsolete content
for example: if an add-on creates a single panel object and loads several content scripts into the panel at the same time, then they can interact with each other.
... if an add-on creates two panel objects and loads a script into each one, they can't interact with each other.
... if an add-on loads two or more content scripts into the same page, or panel, using two different method (e.g.

Cross-domain Content Scripts - Archive of obsolete content
cross-domain xmlhttprequest the following add-on creates a panel whose content is the summary weather forecast for shetland.
... the "main.js": creates a panel whose content is supplied by "panel.html" and adds a content script "panel-script.js" to it sends the panel a "show" message when it is shown adds a button which shows the panel when it is clicked // main.js var data = require("sdk/self").data; var forecast_panel = require("sdk/panel").panel({ height: 50, contenturl: data.url("panel.html"), contentscriptfile: data.url("panel-script.js") }); forecast_panel.on("show", function(){ forecast_panel.port.emit("show"); }); require("sdk/ui/button/action").actionbutton({ id: "get-forecast", label: "get the forecast", icon: "./icon-16.png", onclick: function() { forecast_panel.show(); } }); the "panel.html" just include...
...s a <div> block for the forecast: <!doctype html> <!-- panel.html --> <html> <head></head> <body> <div id="forecast_summary"></div> </body> </html> the "panel-script.js" uses xmlhttprequest to fetch the latest forecast: // panel-script.js var url = "http://datapoint.metoffice.gov.uk/public/data/txt/wxfcs/regionalforecast/json/500?key=your-api-key"; self.port.on("show", function () { var request = new xmlhttprequest(); request.open("get", url, true); request.onload = function () { var jsonresponse = json.parse(request.responsetext); var summary = getsummary(jsonresponse); var element = document.getelementbyid("forecast_summary"); element.textcontent = summary; }; request.send(); }); function getsummary(forecast) { return forecast.regionalfcst.fcstper...

Porting the Library Detector - Archive of obsolete content
once the list is built, the switchlibraries() function constructs a xul statusbarpanel element for each library it found, populates it with the icon at the corresponding chrome:// url, and adds it to the box.
...idget's content when necessary (for example, when the user switches between tabs): tabs.on('activate', function(tab) { updatewidgetview(tab); }); tabs.on('ready', function(tab) { tab.libraries = []; }); showing the library detail the xul library detector displayed the detailed information about each library on mouseover in a tooltip: we can't do this using a widget, so instead will use a panel.
... listens for icon mouseover events and sends a message to main.js containing the name of the corresponding library: function setlibraryinfo(element) { self.port.emit('setlibraryinfo', element.target.title); } var elements = document.getelementsbytagname('img'); for (var i = 0; i &lt; elements.length; i++) { elements[i].addeventlistener('mouseover', setlibraryinfo, false); } one in the panel, which updates the panel's content with the library information: self.on("message", function(libraryinfo) { window.document.body.innerhtml = libraryinfo; }); finally main.js relays the library information from the widget to the panel: widget.port.on('setlibraryinfo', function(libraryinfo) { widget.panel.postmessage(libraryinfo); }); ...

/loader - Archive of obsolete content
odules starting with `toolkit/` as follows: // toolkit/foo -> resource://gre/modules/commonjs/toolkit/foo.js // toolkit/foo/bar -> resource://gre/modules/commonjs/toolkit/foo/bar.js 'toolkit/': 'resource://gre/modules/commonjs/toolkit/', // resolve all other non-relative module requirements as follows: // devtools/gcli -> resource:///modules/devtools/gcli.js // panel -> resource:///modules/panel.js '': 'resource:///modules/', } }) all relative url require() statements (those that start with ".") are first resolved relative to the requirer module id and the result of it is then resolved using the paths option.
...odules starting with `toolkit/` as follows: // toolkit/foo -> resource://gre/modules/commonjs/toolkit/foo.js // toolkit/foo/bar -> resource://gre/modules/commonjs/toolkit/foo/bar.js 'toolkit/': 'resource://gre/modules/commonjs/toolkit/', // resolev all other non-relative module requirements as follows: // devtools/gcli -> resource:///modules/devtools/gcli.js // panel -> resource:///modules/panel.js '': 'resource:///modules/', // allow relative urls and resolve them to add-on root: // ./main -> resource://my-addon/root/main.js './': 'resource://my-addon/root/' } }); the order of keys in paths is irrelevant since they are sorted by keys from longest to shortest to allow overlapping mapping.
...any attempt to load a module not listed in the manifest is unauthorized and is rejected with an exception: let { loader } = require('toolkit/loader'); let manifest = { './main': { 'requirements': { 'panel': 'sdk/panel' } }, 'sdk/panel': { 'requirements': { 'chrome': 'chrome' } } 'chrome': { 'requirements': {} } }; let loader = loader({ resolve: function(id, requirer) { let requirements = manifest[requirer].requirements; if (id in manifest) return requirements[id]; else throw error('module "' + requirer + '" has no authority to require ' + ...

Creating Reusable Modules - Archive of obsolete content
you then import and use these modules from other parts of your add-on using the require() statement, in exactly that same way that you import core sdk modules like page-mod or panel.
... } return path; } require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png" }, onclick: function() { console.log(md5file(promptforfile())); } }); this works , but index.js is now getting longer and its logic is harder to understand.
... var s = array.from(hash, (c, i) => tohexstring(hash.charcodeat(i))).join(""); return s; } exports.hashfile = md5file; index.js finally, update index.js to import these two new modules and use them: var filepicker = require("./filepicker.js"); var md5 = require("./md5.js"); require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png" }, onclick: function() { console.log(md5.hashfile(filepicker.promptforfile())); } }); distributing modules with jpm, we use npm as the package manager for sdk modules that don't ship inside firefox.

Enabling the behavior - updating the status periodically - Archive of obsolete content
function loadtinderboxstatus() { gxmlhttprequest = new xmlhttprequest(); gxmlhttprequest.onload = updatetinderboxstatus; gxmlhttprequest.open("get", "http://tinderbox.mozilla.org/seamonkey/panel.html"); gxmlhttprequest.send(null); window.settimeout(loadtinderboxstatus, 60000); } window.settimeout(loadtinderboxstatus, 1000); window.settimeout schedules functions to run at some future time.
... with this code in place, restarting mozilla should cause the tinderbox status panel to display the current tinderbox state.
... to confirm this state, go to tinderbox and verify that the panel displays the current worst state of active tinderbox clients.

Specifying the appearance - Archive of obsolete content
now that we have defined a panel in which to display an icon, we use css to specify which icon to display.
... for this we have to first create four icons, one for each tinderbox state (none, success, test failed, and busted), then create a set of css rules that displays the icon corresponding to the current tinderbox state: statusbarpanel#tinderbox-status { list-style-image: url("chrome://navigator/content/tb-nostatus.png"); } statusbarpanel#tinderbox-status[status="success"] { list-style-image: url("chrome://navigator/content/tb-success.png"); } statusbarpanel#tinderbox-status[status="testfailed"] { list-style-image: url("chrome://navigator/content/tb-testfailed.png"); } statusbarpanel#tinderbox-status[status="busted"] { list-style-image: url("chrome://navigator/content/tb-busted.png"); } mozilla can have multiple sets of stylesheets that govern its appearance, and we don't want to have t...
...rstatus.css in the same directory as navigator.xul and reference it at the top of that file right under the global stylesheet reference: <?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> our css rules use the list-style-image property to define an image to appear when our status bar panel, identified by its id attribute, has a given value for its status attribute.

button.type - Archive of obsolete content
panel similar to the menu type, this opens a popup.
... place a panel element inside the button.
... panel elements are popups that support any type of content.

Creating a Skin - Archive of obsolete content
let's start with the menus, toolbars and the overall tab panel.
... 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.

Popup Menus - Archive of obsolete content
let's have the popup appear when clicking over the first tab panel: <popupset> <menupopup id="editpopup"> <menuitem label="cut" accesskey="t"/> <menuitem label="copy" accesskey="c"/> <menuitem label="paste" accesskey="p" disabled="true"/> </menupopup> </popupset> <vbox flex="1"> .
... <tabpanel id="searchpanel" orient="vertical" context="editpopup"> here a simple popup that is similar to the edit menu has been added to the first tabpanel.
... if you right-click (control-click on the macintosh) anywhere on the first panel, the popup will appear.

XUL Reference - Archive of obsolete content
picker column columns commandset command conditions content datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script scrollbar scrollbox scrollcorner separator spacer spinbuttons splitter stack statusbar statusbarpanel 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 image...
...s label caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker datepicker menulist progressmeter radio radiogroup scale splitter textbox textbox (f...

Accessibility/XUL Accessibility Reference - Archive of obsolete content
--radio group-->' control='radioid' /> <radiogroup id='radioid'> <radio selected="true" label='<!--option1-->' /> <radio label='<!--option2-->' /> </radiogroup> row see grid rows see grid stack all elements can 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=...

button - Archive of obsolete content
panel similar to the menu type, this opens a popup.
... place a panel element inside the button.
... panel elements are popups that support any type of content.

statusbar - Archive of obsolete content
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, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties...
...sertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements statusbarpanel interfaces nsiaccessibleprovider ...

tabs - Archive of obsolete content
selectedindex type: integer gets and sets the index of the currently selected panel.
... setfocus type: boolean if true or omitted, the focus will be given to the first element in the corresponding tabpanel when the tabs are navigated via the keyboard.
... related elements tabbox, tab, tabpanels, tabpanel.

Debugging CSS - Learn web development
you can toggle values in the rules view on and off, when that panel is active — if you hold your mouse over it checkboxes will appear.
... in this panel, one of the detailed properties is the box-sizing property, which controls what box model the element uses.
...you can see in the layout panel that it is using content-box.

Accessibility API cross-reference
gridcell a type of mouse pointer used for resizing windows grip n/a n/a n/a probably a group box (titledbox in mozilla) grouping panel panel group <fieldset>, <div> a heading for a section of the page.
... option a tree with expandable & collapseable elements outline tree tree tree a tree item outlineitem n/a n/a treeitem a tab in a tab panel ui (but is this the actual 'tab' that sticks out, or the panel associated with it?) pagetab page_tab page_tab tab the container of the page tab controls.
... tabpanel a word or phrase with a corresponding definition.

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.
...a ⨿ b ∣ c a ⊴ b ∥ c a ⊵ b ∼ c a ▽ b ≈ c a △ b ≊ c a ⋄ b ⪸ c a † b ⪷ c a ‡ b ∋ c a ⊞ b \vartriangle c arrows the following table contains instances of all arrows found on the swp arrows panel.
... a + b ⇛ c a - b ⇚ c a + b ↶ c a - b ↷ c a + b ⤏ c a - b ⤎ c a + b ⇒ c a - b ⇐ c a + b ⇔ c negated relations the following table contains instances of all negated relations found on the swp panel.

Places utilities for JavaScript
[optional] ashowpicker see above [optional] aloadinsidebar if true, the dialog will default to load the new item in the sidebar (as a web panel).
... showbookmarkproperties() opens the bookmark properties panel for a given bookmark identifier.
... showfolderproperties() opens the folder properties panel for a given folder id.

Index
used for tree items, list items, tab panel labels, radio buttons, etc.
... 759 nsimsgaccountmanagerextension interfaces, interfaces:scriptable, xpcom, xpcom interface reference, thunderbird the nsimsgaccountmanagerextension interface is used to add a new panel to thunderbird's account manager.
...furthermore we show the new panel only for imap accounts...

nsIAccessibleRole
it is used for xul:tabpanel, role="tabpanel".
...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.

Building a Thunderbird extension 5: XUL
<statusbarpanel>s ...
...eate a new file called myhelloworld.xul within the content folder you created earlier with the following content: <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://myfirstext/content/overlay.js"/><!-- a reference to your javascript file --> <statusbar id="status-bar"> <statusbarpanel id="my-panel" label="date"/> </statusbar> </overlay> the <statusbar> widget named status-bar specifies the merge point within the application window that we want to attach to.
...in the example above we have defined a new <statusbarpanel> item (that can be referred to as my-panel) which will create a new instance of this widget type and add it at the end of the statusbar.

Building a Thunderbird extension 6: Adding JavaScript
window.addeventlistener("load", function(e) { startup(); }, false); window.setinterval( function() { startup(); }, 60000); //update date every minute function startup() { var mypanel = document.getelementbyid("my-panel"); var date = new date(); var day = date.getday(); var datestring = date.getfullyear() + "." + (date.getmonth()+1) + "." + date.getdate(); mypanel.label = "date: " + datestring; } the first part registers a new event listener that will be executed automatically when thunderbird loads.
... the event listener then calls our startup function which gets our <statusbarpanel>-element with the id my-panel from the document's dom tree.
...finally the label of our panel is set to "date: " and concatenated with the date string that contains the formatted date.

Using the Debugger map scopes feature - Firefox Developer Tools
select the "bundle.js" file in the sources panel on the left and then set a breakpoint at line 102 in the increment function.
... when you click the increment button on the page and hit the breakpoint, an additional section is added to the right-hand panel below the call stack to display variables mapped from the original scope, like this: as useful as this is, it would be even nicer if you could view the original code (before it was packages into the "bundle.js" file.
...and, since map has been checked in the scopes panel, you also see variable symbols from the original code.

Network request list - Firefox Developer Tools
regexp:\d{5} regexp:mdn|mozilla for example, to find all 404, not found, errors, you can type "404" into the search and auto-complete suggests "status-code:404" so you'll end up with something like this: search in requests use the search panel to run a full-text search on headers and content.
... other ways to use the search panel: to clear the search string: click the x icon in the search field.
... to close the search panel, do one of the following: click the x icon next to the search field.

Using the Payment Request API - Web APIs
for this demo, simulate immediate success: paymentresponse.complete('success') .then(function() { // for demo purposes: intropanel.style.display = 'none'; successpanel.style.display = 'block'; }); }) this object provides the developer with access to details they can use to complete the logical steps required after the payment completes, such as an email address to contact the customer, a shipping address for mailing goods out to them, etc.
...for this demo, simulate immediate success: paymentresponse.complete('success') .then(function() { // for demo purposes: intropanel.style.display = 'none'; successpanel.style.display = 'block'; }); }).catch(function(error) { if (error.code == domexception.not_supported_err) { window.location.href = 'https://bobpay.xyz/#download'; } else { // other kinds of errors; cancelled or failed payment.
... for demo purposes: intropanel.style.display = 'none'; legacypanel.style.display = 'block'; } }); }); note: see our recommending a payment app when user has no apps demo for the full code.

An overview of accessible web applications and widgets - Accessibility
--> <ol> <li id="ch1tab"> <a href="#ch1panel">chapter 1</a> </li> <li id="ch2tab"> <a href="#ch2panel">chapter 2</a> </li> <li id="quiztab"> <a href="#quizpanel">quiz</a> </li> </ol> <div> <div id="ch1panel">chapter 1 content goes here</div> <div id="ch2panel">chapter 2 content goes here</div> <div id="quizpanel">quiz content goes here</div> </div> example 2: how the tabs widget might be styled visually.
...--> <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 explorer, and many assistive technologies.

Accessibility documentation index - Accessibility
identical to the checkbox role, except that instead of representing "checked" and "unchecked" states, which are fairly generic in meaning, the switch role represents the states "on" and "off." 73 aria: tab role aria, aria role, aria tab, aria widget, reference the aria tab role indicates an interactive element inside a tablist that, when activated, displays its associated tabpanel.
... 75 aria: tabpanel role aria, aria role, aria tab, aria tabpanel, aria widget, reference the aria tabpanel role indicates 76 aria: textbox role aria, accessibility, needscontent the textbox role is used to identify an element that allows the input of free-form text.
... 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.

<listing> - HTML: Hypertext Markup Language
implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element.
...x for androidopera for androidsafari on iossamsung internetlisting deprecatedchrome no support noedge no support nofirefox no support nonotes no support nonotes notes before firefox 4, this element implemented the htmlspanelement interface instead of the standard htmlelement interface.ie no support noopera no support nosafari no support nowebview android no support nochrome android no support nof...
...irefox android no support nonotes no support nonotes notes before firefox 4, this element implemented the htmlspanelement interface instead of the standard htmlelement interface.opera android no support nosafari ios no support nosamsung internet android no support nolegend no support no supportdeprecated.

Authoring MathML - MathML
it is semi-wysiwyg: you enter the source of the formula using the equation panel/keyboard and a preview of the formula is regularly refreshed.
...use the elements and the special chars panels to create various advanced mathematical constructs.
...other tools can do handwriting recognition such as the windows math input panel or the online converter web equation.

Communicating using "postMessage" - Archive of obsolete content
again, panel and page integrate worker directly: // post a message to the panel's content scripts panel.postmessage(addonmessage); however, for page-mod objects you need to listen to the onattach event and use the worker supplied to that: var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.postmessage(addonmessage); ...
...to simplify this most content modules provide an onmessage property as an argument to the constructor: panel = require("sdk/panel").panel({ onmessage: function(contentscriptmessage) { // handle message from the content script } }); message events versus user-defined events you can use message events as an alternative to user-defined events: var pagemodscript = "window.addeventlistener('mouseover', function(event) {" + " self.postmessage(event.target.tostring());" + "}, false);"; var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.on('message', function(message) { conso...

Content Scripts - Archive of obsolete content
additionally, some sdk user interface components - panel, sidebar, frame - are specified using html, and use separate scripts to interact with this content.
...to learn about how to interact with the content for a given user interface module, please see the module-specific documentation: panel, sidebar, frame.

Module structure of the SDK - Archive of obsolete content
except for scripts that interact directly with web content, all the javascript code you'll write or use when developing add-ons using the sdk is part of a commonjs module, including: sdk modules: the javascript modules which the sdk provides, such as panel and page-mod.
... sdk modules the modules supplied by the sdk are divided into two sorts: high-level modules like panel and page-mod provide relatively simple, stable apis for the most common add-on development tasks.

hotkeys - Archive of obsolete content
for example, this add-on defines two hotkey combinations, to show and hide a panel: // define keyboard shortcuts for showing and hiding a custom panel.
... var { hotkey } = require("sdk/hotkeys"); var showhotkey = hotkey({ combo: "accel-shift-o", onpress: function() { showmypanel(); } }); var hidehotkey = hotkey({ combo: "accel-alt-shift-o", onpress: function() { hidemypanel(); } }); choosing hotkeys hotkeys should be chosen with care.

self - Archive of obsolete content
the url can be passed to a content frame constructor, such as the panel: var self = require("sdk/self"); var mypanel = require("sdk/panel").panel({ contenturl: self.data.url("myfile.html") }); mypanel.show(); from firefox 34, you can use "./myfile.html" as an alias for self.data.url("myfile.html").
... so you can rewrite the above code like this: var mypanel = require("sdk/panel").panel({ contenturl: "./myfile.html" }); mypanel.show(); parameters name : string the filename to be read, relative to the package's data directory.

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.

content/loader - Archive of obsolete content
provides one of the building blocks for those modules that use content scripts to interact with web content, such as panel and page-mod.
... modules that load their own content, such as panel and page-worker, use the symbiont module instead.

frame/hidden-frame - Archive of obsolete content
it is also useful in the construction of apis that load web content for intermittent display, such as panel.
...s title: var hiddenframes = require("sdk/frame/hidden-frame"); let hiddenframe = hiddenframes.add(hiddenframes.hiddenframe({ onready: function() { this.element.contentwindow.location = "http://www.mozilla.org/"; let self = this; this.element.addeventlistener("domcontentloaded", function() { console.log(self.element.contentdocument.title); }, true, true); } })); see the panel module for a real-world example of usage of this module.

tabs/utils - Archive of obsolete content
on firefox it's derived from its linkedpanel property.
... parameters id : on firefox it's derived from its linkedpanel property.

ui/toolbar - Archive of obsolete content
like a panel, a toolbar's content is specified using html.
... unlike a panel, a toolbar: does not overlap with any web content is persistent, remaining visible until the user chooses to close it is a fixed size, and appears in a fixed location usage creating and destroying toolbars you don't specify toolbar content directly: instead, you create other ui components and supply them to the toolbar constructor.

Low-Level APIs - Archive of obsolete content
content/loader provides one of the building blocks for those modules that use content scripts to interact with web content, such as panel and page-mod.
... dev/panel enables you to extend the firefox developer tools.

Adding a Button to the Toolbar - Archive of obsolete content
attaching a panel if you need to attach a panel to a button, use the toggle button api.
...to attach the panel, pass the button to the panel's show() method.

Creating Event Targets - Archive of obsolete content
for example, you can listen to the tabs module's ready event or the panel object's show event.
...for example, you can listen to the panel object's show event either by calling: mypanel.on("show", listenerfunction); or by passing the onshow option to panel's constructor: var mypanel = require("sdk/panel").panel({ onshow: listenerfunction, contenturl: "https://en.wikipedia.org/w/index.php" }); if your class inherits from eventtarget, options like this are automatically handled for you.

Localization - Archive of obsolete content
to reference localized strings from html, add a data-l10n-id attribute to the html tag where you want the localized string to appear, and assign the identifier to it: <html> <body> <h1 data-l10n-id="hello_id"></h1> </body> </html> then you can use this html file to build your interface, for example inside a panel: var button = require("sdk/ui/button/action").actionbutton({ id: "localized-hello", label: "localized hello", icon: "./icon-16.png", onclick: function() { hello.show(); } }); var hello = require("sdk/panel").panel({ height: 75, width: 150, contenturl: require("sdk/self").data.url("my-panel.html") }); given locale files for "en-us" and "fr" which provide translations of hell...
...o_id, the panel will now display "hello!" or "bonjour !", according to the current locale: the translation is inserted into the node which has the data-l10n-id attribute set.

Localizing an extension - Archive of obsolete content
the stockwatcher2.dtd file contains the mappings for the stockwatcher2.xul file: <!entity panel_loading "loading..."> <!entity menu_refresh_now.label "refresh now"> <!entity menu_apple.label "apple (aapl)"> <!entity menu_google.label "google (goog)"> <!entity menu_microsoft.label "microsoft (msft)"> <!entity menu_yahoo.label "yahoo (yhoo)"> update the xul files each xul file needs to reference its corresponding locale file.
...then we replace any occurrences of the literal strings with the appropriate variables: samplepanel.tooltiptext = changestring + fieldarray[4] + " | " + openstring + fieldarray[5] + " | " + lowstring + fieldarray[6] + " | " + highstring + fieldarray[7] + " | " + volumestring + fieldarray[8]; localizing the description in install.rdf see localizing extension descriptions.

Making it into a dynamic overlay and packaging it up for distribution - Archive of obsolete content
talled via the xpi: <?xml version="1.0"?> <?xml-stylesheet href="chrome://tinderstatus/content/tinderstatus.css" type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://tinderstatus/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay> we also need to change the urls in the copy of tinderstatus.css: statusbarpanel#tinderbox-status { list-style-image: url("chrome://tinderstatus/content/tb-nostatus.png"); } statusbarpanel#tinderbox-status[status="success"] { list-style-im...
...age: url("chrome://tinderstatus/content/tb-success.png"); } statusbarpanel#tinderbox-status[status="testfailed"] { list-style-image: url("chrome://tinderstatus/content/tb-testfailed.png"); } statusbarpanel#tinderbox-status[status="busted"] { list-style-image: url("chrome://tinderstatus/content/tb-busted.png"); } then we need to create two files in the directory, one called contents.rdf which contains information for the chrome registry about the component being installed and one called install.js that contains the code to install the component.

statusBar - Archive of obsolete content
you can find the complete sourcecode in the status-bar-panel.js file in your jetpack repository.
...syntax jetpack.statusbar.append(options); possible options are: url width (string/length) the width of the panel-item html (string) the html code which will be used inside the item onload (event) this event fires when the item was appended.

norestorefocus - Archive of obsolete content
« xul reference home norestorefocus type: boolean if false, the default value, then when the panel is hidden, the keyboard focus will be restored to whatever had the focus before the panel was opened.
... if true, the focus will not be reset, although it will be cleared if the focus is within the panel.

close - Archive of obsolete content
« xul reference home close type: boolean if the panel has a titlebar, set the panel's close attribute to true to have a close button appear on the titlebar.
... pressing the close button will close the panel.

Attribute (XUL) - Archive of obsolete content
me hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline multiple name negate newlines next noautofocus noautohide noinitialfocus nomatch norestorefocus object observes onbeforeaccept onbookmarkgroup onchange onclick onclosetab oncommand oncommandupdate ...
...ondialogaccept ondialogcancel ondialogclosure ondialogextra1 ondialogextra2 ondialoghelp onerror onerrorcommand onextra1 onextra2 oninput onload onnewtab onpageadvanced onpagehide onpagerewound onpageshow onpaneload onpopuphidden onpopuphiding onpopupshowing onpopupshown onsearchcomplete onselect ontextcommand ontextentered ontextrevert ontextreverted onunload onwizardback onwizardcancel onwizardfinish onwizardnext open ordinal orient pack pageid pageincrement pagestep parent parsetype persist persistence phase pickertooltiptext placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchs...

XUL Events - Archive of obsolete content
this event would be used to update the disabled status of its commands.dommenuitemactivethe dommenuitemactive event is executed when a <menu> or a <menuitem> has been hovered or highlighted.dommenuiteminactivethe dommenuiteminactive event is executed when a <menu> or a <menuitem> in no longer hovered or highlighted.popuphiddenthe popuphidden event is executed when a <menupopup>, <panel> or <tooltip> has become hidden.popuphidingthe popuphiding event is executed when a <menupopup>, <panel> or <tooltip> is about to be hidden.popupshowingthe popupshowing event is executed when a <menupopup>, <panel> or <tooltip> is about to become visible.
... the default action of the event can be prevented to prevent the popup to appear.popupshownthe popupshown event is executed when a <menupopup>, <panel> or <tooltip> has become visible.radiostatechangethe radiostatechange event is executed when the state of a <radio> element has changed.valuechangethe valuechange event is executed when the value of an element, <progress> for example, has changed.

Menus - Archive of obsolete content
if you want to create a general purpose popup that isn't a menu, use a panel instead.
... for this, see panels.

Property - Archive of obsolete content
cused focuseditem forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label labelelement lastpermanentchild lastselected left linkedpanel listboxobject locked markupdocumentviewer max maxheight maxlength maxrows maxwidth menu menuboxobject menupopup min minheight minresultsforpopup minwidth minute minuteleadingzero mode month monthleadingzero name next nomatch notificationshidden object observes onfirstpage onlastpage open ordinal orient pack pagecount pageid pag...
...ents preferencepanes preferences priority radiogroup readonly readonly ref resource resultspopup scrollboxobject scrollincrement scrollheight scrollwidth searchbutton searchcount searchlabel searchparam searchsessions second secondleadingzero securityui selected selectedbrowser 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 toolba...

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="&...
...ass="springspace"/> <menulist id="find-text" flex="1" editable="true" datasources="file:///mozilla/recents.rdf" ref="http://www.xulplanet.com/rdf/recent/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...

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 Accesskey FAQ and Policies - Archive of obsolete content
tab panel labels.
... bug 143065 - scope of accesskeys is not limited to the current tab panel.

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.

tabbrowser - Archive of obsolete content
it should not be used to track per-tab data during a session; the use of linkedpanel on the corresponding tab is preferred instead.
... removealltabsbut( tabelement ) return type: no return value removes all of the tab panels except for the one corresponding to the specified tab.

Building a Theme - Archive of obsolete content
the file preview.png is shown as a preview of the theme in the themes panel of the add-ons window.
... the file icon.png is used as an icon in the same panel.

Using the W3C DOM - Archive of obsolete content
<body> <p>papa's got <span id="dynatext">a lot of nerve</span>!</p> <script type="text/javascript"> // get a reference to the span element var spanel = document.getelementbyid("dynatext"); // detect whether the browser supports textcontent or innertext if (typeof spanel.textcontent == 'string') { spanel.textcontent = 'some gall'; } else if (typeof spanel.innertext == 'string') { spanel.innertext = 'some gall'; // if neither are supported, use other dom methods } else { while (spanel.firstchild) { spanel.removechild(spanel.firstchi...
...ld); } spanel.appendchild(document.createtextnode('some gall')); } </script> </body> the first part of the code gets a reference to the element.

-moz-window-shadow - Archive of obsolete content
<window>, <panel>inheritednocomputed valueas specifiedanimation typediscrete syntax the -moz-window-shadow property is specified as one of the keyword values listed below.
... formal syntax default | menu | tooltip | sheet | none example .kui-panel { -moz-window-shadow: none; } ...

Displaying notifications (deprecated) - Archive of obsolete content
for example, on android, notifications appear in the bar at the top of the screen, and in the panel that appears when you drag that bar downward.
... }; notification.onclose = function() { var e = document.createelement("p"); e.innerhtml = "<strong>the notification was closed.</strong>"; document.body.appendchild(e); }; displaying the notification once the notification is configured the way you want it to be, call its show() method to display the notification: notification.show(); on android, for example, the resulting notification panel looks like this: when the user taps on the "hey, check this out!" notification here, the resulting changes to the document look like this: if you're using firefox mobile, you can see this example live by tapping the button below.

Accessible multimedia - Learn web development
you'll see the transcript come up in a separate panel.
... if you are creating your own user interface to present your audio and associated transcript, you can do it however you like, but it might make sense to include it in a showable/hideable panel; see our audio-transcript-ui example (also see the source code).

What’s in the head? Metadata in HTML - Learn web development
you may see (depending on the browser) favicons displayed in the browser tab containing each open page, and next to bookmarked pages in the bookmarks panel.
... the site's index page, saved in .ico format (most browsers will support favicons in more common formats like .gif or .png, but using the ico format will ensure it works as far back as internet explorer 6.) adding the following line into your html's <head> block to reference it: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> here is an example of a favicon in a bookmarks panel: there are lots of other icon types to consider these days as well.

Test your skills: variables - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).
...the results panel should be outputting the name chris, and a statement about how old chris will be in 20 years' time.

Accessible Toolkit Checklist
yes/no confirmations and retry/exit error dialogs) support mnemonics in dialogs created via method calls layout engine - drawing underline under correct letter events - making keystrokes do the right thing msaa support, via iaccessible's get_acckeyboardshortcut support for ms windows settings when high contrast checkbox is set (in accessibility control panel, spi_gethighcontrast), or when user selects a "native" skin option in your software, then get all look and feel from current os skin.
... 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.

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.

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.
... 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 for the group widget label for api-provided widgets, convenience getter for the label attribute of the dom node tooltiptext for api-provided widgets, convenience getter for the tooltiptext attribute of the dom node disabled for api-provided widgets, convenience getter and setter for the disabled state of this single widget.

Localizing with Pontoon
translation panel with original string and its details (e.g.
... translation helpers as you can see, suggestions from history, translation memory, machine translation and other locales are also available in the out-of-context translation panel.

Mozilla DOM Hacking Guide
for example, there is no htmlspanelement in the w3c dom specification.
...however we do want to be able to access htmlspanelement to modify it.

Memory Profiler
using the add-on open the devtools panel or webide.
...to take a profile you can use the buttons in the profiler panel.

WebReplayRoadmap
dom/css integration (partially implemented) when paused, the inspector panel can be used to inspect the dom and css state of the page.
... 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.

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.

Inspecting web app manifests - Firefox Developer Tools
in this article we will look at inspecting app manifests using the firefox devtools application panel.
... when you open the application panel’s manifest view on a page that doesn't have an app manifest successfully deployed, you'll get the following output shown: deploying a manifest to get a manifest deployed successfully, you need to include a <link> element in the <head> of your document that points to your .webmanifest file: <link rel="manifest" href="/manifest.webmanifest"> the .webmanifest extension is recommended in the spec, and should be served with an application/manifest+json mime type, although browsers generally tend to support manifests with other appropriate extensions like .json (mime type: application/json).

Application - Firefox Developer Tools
the application panel provides tools for inspecting and debugging modern web apps (also known as progressive web apps).
... accessing the application panel the application panel is available on the standard devtools tab menu under application, in firefox 79+.

Break on DOM mutation - Firefox Developer Tools
you can see the breakpoint listed in the right-most panel under dom mutation breakpoints.
... the panel on the right shows that execution is "paused on dom mutation" and you, as with any other breakpoint, you can see the call stack and view any watch expressions you may have set up.

Tree map view - Firefox Developer Tools
here are some example snapshots, as they appear in the tree map view: this treemap is from the dom allocation example, which simply runs a script that creates a large number of dom nodes (200 htmldivelement objects and 4000 htmlspanelement objects).
... you can see how almost all the heap usage is from the htmlspanelement objects that it creates.

Edit Shape Paths in CSS - Firefox Developer Tools
activate / deactivate the shape path editor the shape path editor is accessed via the css rules panel, which can be opened as described in the guide to opening the inspector.
... in the rules panel you can see the values for circle() change as you edit the shape.

CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
clicking the icon toggles the display of an overlay on the page, which appears over the selected flex container that displays an outline around each flex item: the overlay will still be shown when you select other elements from the inspector panel, so you can edit related css properties and see how the flex items are affected by your changes.
...once you select an element whose display is defined as flex, the panel will include a number of options for viewing details about the flex container and flex items within it.

Use the Inspector API - Firefox Developer Tools
firefox add-ons may access the following objects from the chrome://browser/content/devtools/inspector/inspector.xul context: window.inspector defined in inspector-panel.js.
... bindable events using on: markuploaded called when the left panel has been refreshed, after page change.

Settings - Firefox Developer Tools
enable layout panel enable the experimental layout panel.
... enable worker debugging enable a panel within the debugger to debug workers.

Console messages - Firefox Developer Tools
if more information is available, a disclosure triangle lets you display it, in an embedded panel that is identical to the network monitor request details.
... the context menu for network messages includes a few extra items in addition the globally-available ones: copy link location acts as you would expect, copying the url into the clipboard open in network panel switches context to the network tab, selects the request and shows you the details resend request sends the network request again.

PaymentRequest.show() - Web APIs
exceptions aborterror the returned promise rejects with an aborterror if the user agent is already showing a payment panel.
... only one payment panel may be visible at a time across all documents loaded by the user agent.

Signaling and video calling - Web APIs
the "local_video" <video> element presents a preview of the user's camera; specifiying the muted attribute, as we don't need to hear local audio in this preview panel.
...here we set up the handler for each connected user in the user list displayed to the left of the chat panel.

Taking still photos with WebRTC - Web APIs
the html markup our html interface has two main operational sections: the stream and capture panel and the presentation panel.
... the first panel on the left contains two components: a <video> element, which will receive the stream from webrtc, and a <button> the user clicks to capture a video frame.

Window.sidebar - Web APIs
methods the sidebar object returned has the following methods: method description (seamonkey) description (firefox) addpanel(title, contenturl, "") adds a sidebar panel.
... addpersistentpanel(title, contenturl, "") adds a sidebar panel, which is able to work in the background.

Web APIs
emelement htmlmetaelement htmlmeterelement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloptionscollection htmlorforeignelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement htmlshadowelement htmlslotelement htmlsourceelement htmlspanelement htmlstyleelement htmltablecaptionelement htmltablecellelement htmltablecolelement htmltableelement htmltablerowelement htmltablesectionelement htmltemplateelement htmltextareaelement htmltimeelement htmltitleelement htmltrackelement htmlulistelement htmlunknownelement htmlvideoelement hashchangeevent headers history hkdfparams hmacimportparams hmackeygenparams i idbcursor idbcursorsync ...
...vgmissingglyphelement svgnumber svgnumberlist svgpathelement svgpatternelement svgpoint svgpolygonelement svgpolylineelement svgpreserveaspectratio svgradialgradientelement svgrect svgrectelement svgrenderingintent svgsvgelement svgscriptelement svgsetelement svgsolidcolorelement svgstopelement svgstringlist svgstylable svgstyleelement svgswitchelement svgsymbolelement svgtrefelement svgtspanelement svgtests svgtextcontentelement svgtextelement svgtextpathelement svgtextpositioningelement svgtitleelement svgtransform svgtransformlist svgtransformable svgurireference svgunittypes svguseelement svgvkernelement svgviewelement svgzoomandpan screen screenorientation scriptprocessornode scrolltooptions securitypolicyviolationevent selection sensor sensorerrorevent serviceworker servic...

Using the link role - Accessibility
example</h1> <span data-href="https://mozilla.org" tabindex="0" id="link1" role="link" class="link"> fake accessible link created using a span </span> <p><a href="https://mozilla.org" target="_blank">actual real link</a></p> css span[role="link"] { color: blue; text-decoration: underline; cursor: pointer; } span[role="link"]:focus { outline: 1px dotted black; } javascript const spanelem = document.queryselector('span'); //handles clicks and keydowns on the link function navigatelink(e) { if (e.type === 'click' || e.key === 'enter') { let ref = e.target != null ?
... e.target : e.srcelement; if (ref) { window.open(ref.getattribute('data-href'), '_blank'); } } } spanelem.addeventlistener('click', navigatelink); spanelem.addeventlistener('keydown', navigatelink); result notes if pressing the link triggers an action but does not change browser focus or navigate to a new page, you might wish to consider using the button role instead of the link role.

Using ARIA: Roles, states, and properties - Accessibility
roles widget roles button checkbox gridcell link menuitem menuitemcheckbox menuitemradio option progressbar radio scrollbar searchbox separator (when focusable) slider spinbutton switch tab tabpanel textbox treeitem composite roles the techniques below describe each composite role as well as their required and optional child roles.
... combobox grid (including row, gridcell, rowheader, columnheader roles) listbox (including option role) menu menubar radiogroup (see radio role) tablist (including tab and tabpanel roles) tree treegrid document structure roles application article cell columnheader definition directory document feed figure group heading img list listitem math none note presentation row rowgroup rowheader separator table term textbox toolbar tooltip landmark roles banner complementary contentinfo form main navigation region search live region roles alert log marquee status timer window roles alertdialog dialog states and properties widget attributes aria-autocomplete aria-checked aria-current aria-disabled aria-errormessage ...

WAI-ARIA Roles - Accessibility
e with a deletion role.aria: switch rolethe aria switch role is functionally identical to the checkbox role, except that instead of representing "checked" and "unchecked" states, which are fairly generic in meaning, the switch role represents the states "on" and "off."aria: tab rolethe aria tab role indicates an interactive element inside a tablist that, when activated, displays its associated tabpanel.aria: table rolethe table value of the aria role attribute identifies the element containing the role as having a non-interactive table structure containing data arranged in rows and columns, similar to the native <table> html element.aria: tabpanel rolethe aria tabpanel role indicatesaria: textbox rolethe textbox role is used to identify an element that allows the input of free-form text.
...link - old page listbox log - old page marquee math menu menubar menuitem menuitemcheckbox menuitemradio none note option presentation progressbar - old page radio - old page radiogroup range region roletype rowheader(estelle) scrollbar searchbox section sectionhead select separator slider - old page spinbutton status - old page structure tab tablist (michiel) tabpanel (michiel) term timer toolbar tooltip tree treegrid treeitem widget window ...

Mozilla CSS extensions - CSS: Cascading Style Sheets
olbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-button-box-maximized -moz-window-button-close -moz-window-button-maximize -moz-window-button-minimize -moz-window-button-restore -moz-window-titlebar -moz-window-titlebar-maximized progressbar progresschunk radio radio-container radio-label radiomenuitem resizer resizerpanel scale-horizontal scalethumb-horizontal scalethumb-vertical scale-vertical scrollbarbutton-down scrollbarbutton-left scrollbarbutton-right scrollbarbutton-up scrollbar-small scrollbarthumb-horizontal scrollbarthumb-vertical scrollbartrack-horizontal scrollbartrack-vertical separator spinner spinner-downbutton spinner-textfield spinner-upbutton 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() border-color -moz-use-text-colorobsolete since gecko 52 (removed in bug 1306214); use currentcolor instead.

<span> - HTML: Hypertext Markup Language
implicit aria role no corresponding role permitted aria roles any dom interface htmlspanelement (before html5, the interface was htmlelement) attributes this element only includes the global attributes.
... recommendation the dom interface is now htmlspanelement.

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.

Using the WebAssembly JavaScript API - WebAssembly
the equivalent code would look like this: fetch('simple.wasm').then(response => response.arraybuffer() ).then(bytes => webassembly.instantiate(bytes, importobject) ).then(results => { results.instance.exports.exported_func(); }); viewing wasm in developer tools in firefox 54+, the developer tool debugger panel has functionality to expose the text representation of any wasm code included in a web page.
... to view it, you can go to the debugger panel and click on the “wasm://” entry.

Loading Content Scripts - Archive of obsolete content
the constructors for content-script-using objects such as panel and page-mod define a group of options for loading content scripts: contentscript string, array contentscriptfile string, array contentscriptwhen string contentscriptoptions object we have already seen the contentscript option, which enables you to pass in the text of the script itself as a string literal.

Two Types of Scripts - Archive of obsolete content
content scripts are injected into web pages using apis defined by some of the sdk's modules such as page-mod and panel.

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

XUL Migration Guide - Archive of obsolete content
apis like ui and panel are very generic and with the right content can be used to replace many specific xul elements.

page-mod - Archive of obsolete content
it will not attach scripts to add-on panels, page-workers, sidebars, or firefox hidden windows.

page-worker - Archive of obsolete content
parameters options : object optional options: name type contenturl string the url of the content to load in the panel.

private-browsing - Archive of obsolete content
te browser windows, and the add-on won't receive any events for such tabs any ui components will not be displayed in private browser windows any menus or menu items created using the context-menu will not be shown in context menus that belong to private browser windows the page-mod module will not attach content scripts to documents belonging to private browser windows any panel objects will not be shown if the active window is a private browser window the selection module will not include any selections made in private browser windows add-ons that have opted in will see private windows, so they will need to use the private-browsing module to check whether objects are private, so as to avoid storing data derived from such objects.

High-Level APIs - Archive of obsolete content
panel creates transient dialogs to implement part of an add-on's user interface.

content/content - Archive of obsolete content
these objects are used in the internal implementations of sdk modules which use content scripts to interact with web content, such as the panel or page-mod modules.

content/symbiont - Archive of obsolete content
this._frame = getmyframe(); this._init(options) } }); see the panel module for a real-world example of usage of this module.

event/target - Archive of obsolete content
for example, a panel instance emits an show event when the panel is shown.

ui/sidebar - Archive of obsolete content
unlike modules such as panel, the content must be local, typically loaded from the add-on's data directory via a url constructed using self.data.url(): var sidebar = require("sdk/ui/sidebar").sidebar({ id: 'my-sidebar', title: 'my sidebar', url: require("sdk/self").data.url("sidebar.html") }); from firefox 34, you can use "./sidebar.html" as an alias for self.data.url("sidebar.html").

Developing for Firefox Mobile - Archive of obsolete content
high-level apis addon-page not supported base64 supported clipboard not supported context-menu not supported hotkeys supported indexed-db supported l10n supported notifications supported page-mod supported page-worker supported panel not supported passwords supported private-browsing not supported querystring supported request supported selection not supported self supported simple-prefs supported simple-storage supported system supported tabs supported timers supported ui not supp...

Autocomplete - Archive of obsolete content
first, declare a panel with the "autocomplete" type, like so: <panel id="popup_autocomplete" type="autocomplete" noautofocus="true" /> now set the autocompletepopup attribute of your <browser> element to the id of the panel you just declared: <browser id="my_browser" ...

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

How to convert an overlay extension to restartless - Archive of obsolete content
the next is example of the code: var overlay = toolbarbutton(toolbarbuttonattrs, panel({'id': 'thepanel', 'type': 'arrow'}, hbox({'align': 'start'}, vbox( hbox({'class': 'pixel-hbox'}, description({'value': this.stringbundle.getstringfromname('firexpixel.opacity')}), htmlinput({'id': 'opacity-range', 'type': 'range', 'min': '0', 'max': '10'}) ), hbox({'id': 'pixel-coords', 'class': 'pixel-hbox'}, label(...

Install Manifests - Archive of obsolete content
<em:optionstype>3</em:optionstype> <em:optionsurl>chrome://myaddon/content/options.html</em:optionsurl> this section here contains an example of localized html page as an option panel in a new tab: bootstrapped extensions :: localization (l10n) (example linked to is: github :: l10n-html-options).

Setting Up a Development Environment - Archive of obsolete content
to debug extension and browser code, right-click on the loaded scripts panel and uncheck exclude browser files.

User Notifications and Alerts - Archive of obsolete content
on firefox 3 and above, this seems to have been corrected, using the panel element.

Extensions support in SeaMonkey 2 - Archive of obsolete content
/pageinfo.xul chrome://navigator/content/pageinfo/pageinfo.xul page info window chrome://browser/content/preferences/permissions.xul chrome://communicator/content/permis...onsmanager.xul permissions manager dialog urls added in 2.1 url in firefox url in seamonkey chrome://browser/content/bookmarks/bookmarkspanel.xul chrome://communicator/content/bookmarks/bm-panel.xul chrome://browser/content/places/places.xul chrome://communicator/content/bookma...rksmanager.xul thunderbird uses mostly the same chrome urls for overlaying as seamonkey.

Signing an XPI - Archive of obsolete content
you can either set this permanently via control panel->system properties->advanced->environment variables->system variables or do it each time you run the tools from the command-line (preferably using a batch file).

Signing an extension - Archive of obsolete content
in the options window, open the advanced panel, then select the encryption tab.

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.

XUL user interfaces - Archive of obsolete content
ue"/> <label class="day" value="saturday" disabled="true"/> </hbox> </row> </rows> </grid> <hbox class="buttons"> <button id="clear" label="clear" accesskey="c" oncommand="cleardate();"/> <button id="today" label="today" accesskey="t" oncommand="settoday();"/> </hbox> </groupbox> <statusbar> <statusbarpanel id="status"/> </statusbar> </vbox> </window> make a new css file, style7.css.

Enabling the behavior - retrieving tinderbox status - Archive of obsolete content
var gxmlhttprequest; function loadtinderboxstatus() { gxmlhttprequest = new xmlhttprequest(); gxmlhttprequest.onload = updatetinderboxstatus; gxmlhttprequest.open("get", "http://tinderbox.mozilla.org/seamonkey/panel.html"); gxmlhttprequest.send(null); } xmlhttprequest is an interface in mozilla for retrieving documents via http.

Finding the code to modify - Archive of obsolete content
click the plus sign next to the statusbar node in the dom inspector and select each statusbarpanel node in turn.

Creating a Mozilla Extension - Archive of obsolete content
contents prerequisites tinderbox making a mozilla installation modifiable finding the file to modify finding the code to modify adding the structure specifying the appearance enabling the behavior - retrieving tinderbox status enabling the behavior - updating the status bar panel enabling the behavior - updating the status periodically making it into a static overlay making it into a dynamic overlay and packaging it up for distribution conclusion next » original document information author(s): myk melez last updated date: september 19, 2006 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content ...

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
button, checkbox-container, 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...

Menu - Archive of obsolete content
all of the feature's context menus are exposed through jetpack.menu.context, including slidebar, panel, toolbar, and status bar item context menus.

UI - Archive of obsolete content
menu accessing, modifying, and creating menus in the browser slidebar ui mechanism for displaying jetpack content in a slide-out animated vertical column toolbar including entries and access elements into the toolbar panel a movable, expandable, and custom styled content element to display jetpack content tabs adding events and interacting with browser tabs and their contained documents statusbar low-level functions and basic calls notifications a system for alerting users via provided ui mechanisms selection interacting with user-selected content ...

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.

getFolder - Archive of obsolete content
is based on mozilla 1.7 stable branch, might also work in other versions): "chrome" "components" "current user" "defaults" "file:///" "os drive" "plugins" "preferences" "profile" "program" "temporary" "mac apple menu" "mac control panel" "mac desktop" "mac documents" "mac extension" "mac fonts" "mac shutdown" "mac startup" "mac system" "mac trash" "mac preferences" "macosx default download" "macosx home" "macosx internet sites" "macosx local applications" "macosx local deskt...

backdrag - Archive of obsolete content
« xul reference home backdrag type: boolean setting the backdrag attribute on a xul panel lets the user move the panel by clicking and dragging anywhere on its background area.

helpURI - Archive of obsolete content
« xul reference home helpuri type: uri the uri of the help page associated with a preference panel.

selectedIndex - Archive of obsolete content
« xul reference home selectedindex type: integer gets and sets the index of the currently selected panel.

setfocus - Archive of obsolete content
« xul reference home setfocus type: boolean if true or omitted, the focus will be given to the first element in the corresponding tabpanel when the tabs are navigated via the keyboard.

statustext - Archive of obsolete content
example <!-- sets the status message when mouse is over buttons --> <button label="connect" statustext="connect to remote server" onmouseover="setstatusmessage(this)" onmouseout="clearstatusmessage()"/> <button label="ping" statustext="ping the server" onmouseover="setstatusmessage(this)" onmouseout="clearstatusmessage()"/> <statusbar> <statusbarpanel id="mystatuspanel" label="" flex="1"/> <spacer flex="1"/> </statusbar> <script> function setstatusmessage(obj){ document.getelementbyid('mystatuspanel').label = obj.getattribute('statustext'); } function clearstatusmessage(obj){ document.getelementbyid('mystatuspanel').label = ''; } </script> see also statusbar and statusbarpanel ...

titlebar - Archive of obsolete content
« xul reference home titlebar type: string set the panel's titlebar attribute to the value normal to display a panel with a titlebar.

tooltip - Archive of obsolete content
« xul reference home tooltip type: id should be set to the value of the id of the tooltip or panel element that should be used as a tooltip window when the mouse hovers over the element for a moment.

Deprecated and defunct markup - Archive of obsolete content
rheader> not true, still in use --neil 03 march 2011 <slider> (clickable tray in <scrollbar> which holds <thumb>; do not use alone) also used as part of <scale> --neil 03 march 2011 <spinner> (spinbox; <spinbuttons> with a textbox whereby spinning affects value in textbox; not usable) <spring> (use @flex instead) <strut> (replaced by @debug?) <tabcontrol> (contained tabbox and tabpanel) <text> (like <label> or <description> but does not wrap; like <label crop="end">; had been used in menus/toolbars) <textfield> (like <textbox>) <thumb> (<button> with deprecated <gripper>; implements sliding box in center of scrolbar) <title> (to add a caption on a <titledbox> <titledbox> (box with a frame) <titledbutton> (attempt to combine text and images before <button>) <t...

popuphidden - Archive of obsolete content
the popuphidden event is executed when a <menupopup>, <panel> or <tooltip> has become hidden.

popuphiding - Archive of obsolete content
the popuphiding event is executed when a <menupopup>, <panel> or <tooltip> is about to be hidden.

popupshowing - Archive of obsolete content
the popupshowing event is executed when a <menupopup>, <panel> or <tooltip> is about to become visible.

popupshown - Archive of obsolete content
the popupshown event is executed when a <menupopup>, <panel> or <tooltip> has become visible.

getBrowserIndexForDocument - Archive of obsolete content
it should not be used to track per-tab data during a session; the use of linkedpanel on the corresponding tab is preferred instead.

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.

Style classes - Archive of obsolete content
« xul reference home alert-icon chromeclass-toolbar error-icon groove header indent listcell-iconic listitem-iconic menuitem-iconic menuitem-non-iconic message-icon monospace plain question-icon small-margin statusbarpanel-iconic statusbarpanel-iconic-text statusbarpanel-menu-iconic text-link thin tree-splitter treecol-image ...

Toolbar customization events - Archive of obsolete content
aftercustomization this event is delivered when the user closes the toolbar customization panel.

Grids - Archive of obsolete content
next, we'll look at adding content panels.

Groupboxes - Archive of obsolete content
for example, mozilla's font preferences panel uses a drop-down menu as a caption.

Manipulating Lists - Archive of obsolete content
or, use the selectedpanel property to get the selected panel, that is, return the content associated with the tab.

More Wizards - Archive of obsolete content
wizard functions the wizard works much like a tabbed panel, except that the tabs are not displayed and the user navigates between pages by using the buttons along the bottom.

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.

Skinning XUL Files by Hand - Archive of obsolete content
after these, the global skin defines styles for some of the xul widgets: statusbar, statusbarpanel and so on.

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

XUL FAQ - Archive of obsolete content
if you want to access elements inside <prefpane>, you should put script in the <prefpane> or write script into "onpaneload" of the <prefpane>.) note, that prefwindow only works in chrome xul.

XUL element attributes - Archive of obsolete content
tooltip type: id should be set to the value of the id of the tooltip or panel element that should be used as a tooltip window when the mouse hovers over the element for a moment.

XUL accessibility guidelines - Archive of obsolete content
for example, the first item in the privacy panel in the firefox option dialog (discussed and shown above) is [checkbox] remember visited pages for the last [textbox] days.

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.

elements - Archive of obsolete content
r menu menubar menuitem menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane prefwindow progressmeter r radio radiogroup resizer richlistbox richlistitem resizer row rows rule s script scrollbar scrollbox scrollcorner separator spacer splitter stack statusbar statusbarpanel stringbundle 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 ...

popupset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container for menupopup, panel and tooltip elements.

titlebar - Archive of obsolete content
if the titlebar is in a panel element, dragging it will move the panel.

XUL - Archive of obsolete content
menus and popups guide a guide on using menus and popup panels.

Theme changes in Firefox 3.5 - Archive of obsolete content
under the autoscroll icon or the identity panel.

LiveConnect Overview - Archive of obsolete content
you can specify an environment variable in windows nt by double-clicking the system icon in the control panel and creating a user environment variable called classpath with a value similar to the following: c:\program files\java\jre1.4.1\lib\plugin.jar see the sun jdk documentation for more information about classpath.

LiveConnect - Archive of obsolete content
note: liveconnect blocked under some conditions liveconnect calls from javascript to java api are blocked when the java control panel security slider is set to very high level, or when the slider is at the default high level and the jre has either expired or is below the security baseline.

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
btn_comments = new ext.button({ text: "submit", fieldlabel: "", handler: formhandler }); // create the form panel, attach the inputs form_comments = new ext.form.formpanel({ labelalign: "right", width: 400, title: "comments", items: [ txt_name, txt_email, txt_message, btn_comments ], renderto: "form-comments" }); }); </script> the code in listing 6 starts by hooking in the ext js library which is used to produce the ui elements of the form.

Assessment: Accessibility troubleshooting - Learn web development
if the online editor you are using doesn't have a separate css/js panel, feel free to put them in appropriate <style> / <script> elements.

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

Mobile accessibility - Learn web development
this occurs because we are using code such as the following: div.onmousedown = function() { initialboxx = div.offsetleft; initialboxy = div.offsettop; movepanel(); } document.onmouseup = stopmove; to enable other forms of control, you need to use different, yet equivalent events — for example, touch events work on touchscreen devices: div.ontouchstart = function(e) { initialboxx = div.offsetleft; initialboxy = div.offsettop; positionhandler(e); movepanel(); } panel.ontouchend = stopmove; we've provided a simple example that shows how to us...

Test your skills: HTML accessibility - Learn web development
the given text is a simple information panel with action buttons, but the html is really bad.

A cool-looking box - Learn web development
if the online editor you are using doesn't have a separate css panel, feel free to put it in a <style> element in the head of the document.

Creating fancy letterheaded paper - Learn web development
if the online editor you are using doesn't have a separate css panel, feel free to put it in a <style> element in the head of the document.

Fundamental CSS comprehension - Learn web development
if the online editor you are using doesn't have a separate css panel, feel free to put it in a <style> element in the head of the document.

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

Getting started with CSS - Learn web development
the interactive editor acts as if the css in the first panel is linked to the html document, just as we have with our document above.

Typesetting a community school homepage - Learn web development
if the online editor you are using doesn't have a separate css panel, feel free to put it in a <style> element in the head of the document.

What will your website look like? - Learn web development
click the "* family selected" button in the panel at the bottom of the page ("*" depends on how many fonts you selected).

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.

Test your skills: Events - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).

Test your skills: Functions - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).

Silly story generator - Learn web development
if the online editor you are using doesn't have a separate javascript panel, feel free to put it inline in a <script> element inside the html page.

Test your skills: Arrays - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).

Test your skills: Math - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).

Test your skills: Strings - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).

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.

Test your skills: JSON - Learn web development
note: in the example below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).

Test your skills: Object-oriented JavaScript - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).

Test your skills: Object basics - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).

React resources - Learn web development
it adds a new panel to your browser's developer tools, and with it you can inspect the state and props of various components, and even edit state and props to make immediate changes to your application.

Handling common HTML and CSS problems - Learn web development
after the packages have finished installing, try loading up an html file and a css file: you'll see any issues highlighted with green (for warnings) and red (for errors) circles next to the line numbers, and a separate panel at the bottom provides line numbers, error messages, and sometimes suggested values or other fixes.

Gecko info for Windows accessibility vendors
fires event_state_change when tree item expands/collapses role_pagetab xul: <tab> dhtml: role="wairole:tab" role_propertypage xul: <tabpanel> dhtml: role="wairole:tabpanel" role_indicator not supported.

Mozilla's Section 508 Compliance
mozilla's appearance preferences panel contains a large number of color possibilities.

Mozilla’s UAAG evaluation report
(p1) vg mozilla uses selection colors as specified in the control panel.

Continuous Integration
the talos indicators in treeherder appear green if the job successfully completed; to see the performance data generated by the jobs, click on the performance tab of the job details panel that pops up when you click on a job in treeherder.

Debugging on Mac OS X
also in the "arguments" panel, you may want to add an environment variable moz_debug_child_process set to the value 1 to help with debugging e10s.

Experimental features in Firefox
compatibility panel a side panel for the page inspector that shows you information detailing your app's cross-browser compatibility status.

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.

-moz-window-dragging
<window>, <panel> inherited no media visual computed value as specified animation type discrete canonical order the unique non-ambiguous order defined by the formal grammar syntax the -moz-window-dragging property is specified as one of the keyword values listed below.

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.

Add-on Manager
read more about it at this topic here on mozilla add-ons forum :: how to open an add-on's preference panel?

API-provided widgets
possible types are button for simple button widgets (the default) view for buttons that open a panel or subview, depending on where they are placed.

Interfacing with the Add-on Repository
this doesn't display any ui showing that the install is taking place; however, if you go to the add-on manager panel, you'll see the pending install listed among your add-ons.

Localizing extension descriptions
>de-de</em:locale> <em:name>tab sidebar</em:name> <em:description>zeigt in einer sidebar vorschaubilder der inhalte aller offenen tabs an.</em:description> </description> </em:localized> <em:localized> <description> <em:locale>es-es</em:locale> <em:name>tab sidebar</em:name> <em:description>muestra una vista previa de sus pestañas en su panel lateral.</em:description> </description> </em:localized> <em:localized> <description> <em:locale>nl-nl</em:locale> <em:name>tab sidebar</em:name> <em:description>laat voorbeeldweergaven van uw tabbladen in de zijbalk zien.</em:description> </description> </em:localized> <em:name>tab sidebar</em:name> <em:description>displays previews o...

Reporting a Performance Problem
recording can be done by clicking on the toolbar icon to open its panel.

Performance
memory profiling and leak detection tools the developer tools "memory" panel the memory panel in the devtools supports taking heap snapshots, diffing them, computing dominator trees to surface "heavy retainers", and recording allocation stacks.

Preferences system
you should also be careful to specify the width of the window (in em) as appropriate using the preprocessor for each targeted platform, as well as the height (in em) for platforms where the window size does not change as the selected panel is changed (e.g.

ROLE_ALERT
used by aria: alert, alertdialog xul: <notification/>, <panel noautofocus = "true"/> ...

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

XUL Accessibility
role role_alert <panel noautofocus = "true" /> role_alert ...

Setting up the Gecko SDK
in this panel, instead of linking to the include subdirectories of the nspr, embedstring, and xpcom directories, add the paths to the bin subdirectories.

Observer Notifications
inspector-treepanel-ready - sent when the inspector's tree panel is opened and initialized.

IAccessible2
used for tree items, list items, tab panel labels, radio buttons, and so on.

GroupPosition
used for tree items, list items, tab panel labels, radio buttons, etc.

nsIAccessible
used for tree items, list items, tab panel labels, radio buttons, etc.

nsIAccessibleProvider
xultabbox 0x00001018 a combination of a tabs object and a tabpanels object.

nsIAlertsService
this name is used in that configuration panel.

nsIAutoCompleteInput
toolkit/components/autocomplete/public/nsiautocompleteinput.idlscriptable this interface monitors the input in a text field and displays an autocomplete panel at the appropriate time.

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

Index
if you are on mac os x, and on linux do edit > preferences on, select the advanced options panel, click on the general tab, and click on config editor.

Thunderbird Configuration Files
if you are on mac os x, and on linux do edit > preferences on, select the advanced options panel, click on the general tab, and click on config editor.

Using popup notifications
() { alert("first secondary option selected."); } }, { label: "second secondary option", accesskey: "2", callback: function() { alert("second secondary option selected."); } } ] ); when this notification is presented, and the user clicks on the menu button in the panel, the display looks like this: when the user chooses one of your secondary actions from the drop-down menu, the corresponding callback is invoked.

Preferences System
you should also be careful to specify the width of the window (in em) as appropriate using the preprocessor for each targeted platform, as well as the height (in em) for platforms where the window size does not change as the selected panel is changed (e.g.

3D view - Firefox Developer Tools
you can click on elements to see their html in the html panel or the style panel.

DOM Inspector FAQ - Firefox Developer Tools
for example, if you search nodes' tags for "tab", you'll get matches for tabpanel and tabbox as well as tab.

DOM Inspector - Firefox Developer Tools
you can install the sidebar panel via edit > preferences > advanced > dom inspector, then simply open up the inspector panel and visit a website.

Browser Toolbox - Firefox Developer Tools
you can use the inspector's node picker to select that panel, and examine and modify its content: you can use the same technique to debug popups created by add-ons.

DOM Property Viewer - Firefox Developer Tools
opening the dom property viewer once enabled, you can open the dom property viewer by selecting "dom" from the web developer submenu in the firefox menu panel (or tools menu if you display the menu bar or are on macos), or by pressing its ctrl + shift + w keyboard shortcut.

Access debugging in add-ons - Firefox Developer Tools
the following items are accessible in the context of chrome://browser/content/debugger.xul (or, in version 23 beta, chrome://browser/content/devtools/debugger.xul): window.addeventlistener("debugger:editorloaded") - called when the read-only script panel loaded.

Highlight and inspect DOM nodes - Firefox Developer Tools
also, when you view the details of a dom node in the code panel, objects that you can highlight in the list will also have a target next to them.

Set a breakpoint - Firefox Developer Tools
previously you’d have to scroll through the scopes panel to find variable values, or hover over a variable in the source pane.

Use watchpoints - Firefox Developer Tools
the message panel in the upper right corner indicates that the debugger is "paused on property set".

Set event listener breakpoints - Firefox Developer Tools
this can be done by finding jquery.js in the sources panel, and choosing the ignore source option from its context menu.

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.

DOM allocation example - Firefox Developer Tools
container.appendchild(toolbar); } } createtoolbars(); a simple pseudocode representation of how this code operates looks like this: createtoolbars() -> createtoolbar() // called 200 times, creates 1 div element each time -> createtoolbarbutton() // called 20 times per toolbar, creates 1 span element each time in total, then, it creates 200 htmldivelement objects, and 4000 htmlspanelement objects.

Inspecting web sockets - Firefox Developer Tools
filtering web socket frames to focus on specific messages, frames can be filtered using the filter at the top of the messages panel.

UI Tour - Firefox Developer Tools
to configure the set of browsers you want the compatibility view to check for, click settings at the bottom of the panel.

Responsive Design Mode - Firefox Developer Tools
select this to see a panel containing all the choices, which enables you to check the devices you want to see in the drop-down.

Storage Inspector - Firefox Developer Tools
opening the storage inspector you can open the storage inspector by selecting "storage inspector" from the web developer submenu in the firefox menu panel (or tools menu if you display the menu bar or are on macos), or by pressing its shift + f9 keyboard shortcut.

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.

Rich output - Firefox Developer Tools
click on the arrow next to the request and a details panel will open that is equivalent to the headers panel in the network monitor tool.

The JavaScript input interpreter - Firefox Developer Tools
in multi-line mode, use the ⋀ and ⋁ icons in the editing panel's toolbar.

about:debugging - Firefox Developer Tools
note: from firefox 79 onwards, you can access similar information on the service workers registered on a particular domain by going to the firefox devtools application panel.

Firefox Developer Tools
application panel provides tools for inspecting and debugging modern web apps (also known as progressive web apps).

console - Web APIs
note: it's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header.

Document.querySelector() - Web APIs
here, the first <input> element with the name "login" (<input name="login"/>) located inside a <div> whose class is "user-panel main" (<div class="user-panel main">) in the document is returned: var el = document.queryselector("div.user-panel.main input[name='login']"); negation as all css selector strings are valid, you can also negate selectors: var el = document.queryselector("div.user-panel:not(.main) input[name='login']"); this will select an input with a parent div with the user-panel class but not the main cl...

Document Object Model (DOM) - Web APIs
svgmpathelement svgpathelement svgpatternelement svgpolylineelement svgpolygonelement svgradialgradientelement svgrectelement svgscriptelement svgsetelement svgsolidcolorelement svgstopelement svgstyleelement svgsvgelement svgswitchelement svgsymbolelement svgtextcontentelement svgtextelement svgtextpathelement svgtextpositioningelement svgtitleelement svgtrefelement svgtspanelement svguseelement svgunknownelement svgviewelement svgvkernelement svg data type interfaces here are the dom apis for data types used in the definitions of svg properties and attributes.

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

The HTML DOM API - Web APIs
lement htmlmapelement htmlmediaelement htmlmenuelement htmlmetaelement htmlmeterelement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement htmlslotelement htmlsourceelement htmlspanelement htmlstyleelement htmltablecaptionelement htmltablecellelement htmltablecolelement htmltableelement htmltablerowelement htmltablesectionelement htmltemplateelement htmltextareaelement htmltimeelement htmltitleelement htmltrackelement htmlulistelement htmlunknownelement htmlvideoelement deprecated html element interfaces htmlmarqueeelement obsolete html element inter...

MediaSession - Web APIs
for example, a smartphone might have a standard panel in its lock screen that provides controls for media.

Recording a media element - Web APIs
notice that the playback panel doesn't have autoplay set (so the playback doesn't start as soon as media arrives), and it has controls set, which tells it to show the user controls to play, pause, and so forth.

NodeList.prototype.forEach() - Web APIs
lement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); let list = node.childnodes; list.foreach( function(currentvalue, currentindex, listobj) { console.log(currentvalue + ', ' + currentindex + ', ' + this); }, 'mythisarg' ); the above code results in the following: [object htmlparagraphelement], 0, mythisarg [object text], 1, mythisarg [object htmlspanelement], 2, mythisarg polyfill this polyfill adds compatibility to all browsers supporting es5: if (window.nodelist && !nodelist.prototype.foreach) { nodelist.prototype.foreach = function (callback, thisarg) { thisarg = thisarg || window; for (var i = 0; i < this.length; i++) { callback.call(thisarg, this[i], i, this); } }; } or if (window.nodelist &...

SVGTextContentElement - Web APIs
it is inherited by various text-related interfaces, such as svgtextelement, svgtspanelement, svgtrefelement, svgaltglyphelement and svgtextpathelement.

SVGTextPositioningElement - Web APIs
it is inherited by svgtextelement, svgtspanelement, svgtrefelement and svgaltglyphelement.

Screen.lockOrientation() - Web APIs
for example, if the panel resolution is 1280*800, default will make it landscape, if the resolution is 800*1280, default will make it to portrait.

Starting up and shutting down a WebXR session - Web APIs
with the extension in place, you can open up a developer tools panel that lets you control the position and orientation of the headset and any hand controllers, as well as button presses on the controllers.

ARIA: List role - Accessibility
note: if you are marking up a list of items that will function as a tabbed interface, you should instead use the tab, tabpanel, and tablist roles.

ARIA: Listitem role - Accessibility
note: if you are marking up a list of items that will function as a tabbed interface, you should instead use the tab, tabpanel, and tablist roles.

Web applications and ARIA FAQ - Accessibility
.tab-panel[aria-hidden="true"] { display: none; } .tab-panel[aria-hidden="false"] { display: block; } what about validation?

overview - Accessibility
of illinois menu using wai-aria roles and states with the yui menu control slider from the paciello group blog: aria slider, part one, part two, part threet (example) creating an accessible, internationalized dojo rating widget tabs enhancing tabview accessibility with wai-aria roles and states, from the yui blog enhancing the jquery ui tabs accordingly to wcag 2.0 and aria tab panel example here on codetalks lightbox wcag 2.0 and aria-conformant lightbox application http://majx-js.digissime.net/js/popin/ form validation wcag 2.0 and aria-conformant live form validation tables german tutorial on creating an accessible form simple grid example at codetalks date picker grid at codetalks wcag 2.0 and aria-conformant sortable tables ...

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
test using accessible event watcher in the msaa sdk, and use the settings panel to watch subsets of accessibility events.

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.

prefers-reduced-motion - CSS: Cascading Style Sheets
in windows 7: control panel > ease of access > make the computer easier to see > turn off all unnecessary animations (when possible).

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
the ad panel is below the sidebar, so starts at grid row line 4.

WebKit CSS extensions - CSS: Cascading Style Sheets
::-webkit-file-upload-button ::-webkit-inner-spin-button ::-webkit-input-placeholder ::-webkit-media-controls ::-webkit-media-controls-current-time-display ::-webkit-media-controls-enclosure ::-webkit-media-controls-fullscreen-button ::-webkit-media-controls-mute-button ::-webkit-media-controls-overlay-enclosure ::-webkit-media-controls-panel ::-webkit-media-controls-play-button ::-webkit-media-controls-timeline ::-webkit-media-controls-time-remaining-display ::-webkit-media-controls-toggle-closed-captions-button ::-webkit-media-controls-volume-control-container ::-webkit-media-controls-volume-control-hover-background ::-webkit-media-controls-volume-slider ::-webkit-meter-bar ::-webkit-meter-even-less-good-value ::-webkit-me...

<acronym> - HTML: Hypertext Markup Language
implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element.

<address>: The Contact Address element - HTML: Hypertext Markup Language
implicit aria role no corresponding role permitted aria roles any dom interface htmlelement prior to gecko 2.0 (firefox 4), gecko implemented this element using the htmlspanelement interface attributes this element only includes the global attributes.

<bdo>: The Bidirectional Text Override element - HTML: Hypertext Markup Language
implicit aria role no corresponding role permitted aria roles any dom interface htmlelement up to gecko 1.9.2 (firefox 4) inclusive, firefox implements the htmlspanelement interface for this element.

<big>: The Bigger Text element - HTML: Hypertext Markup Language
implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element.

<center>: The Centered Text element (obsolete) - HTML: Hypertext Markup Language
implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element.

<cite>: The Citation element - HTML: Hypertext Markup Language
implicit aria role no corresponding role permitted aria roles any dom interface htmlelement up to gecko 1.9.2 (firefox 4) inclusive, firefox implements the htmlspanelement interface for this element.

<code>: The Inline Code element - HTML: Hypertext Markup Language
implicit aria role no corresponding role permitted aria roles any dom interface htmlelement up to gecko 1.9.2 (firefox 4) inclusive, firefox implements the htmlspanelement interface for this element.

<dt>: The Description Term element - HTML: Hypertext Markup Language
implicit aria role term permitted aria roles listitem dom interface htmlelement up to gecko 1.9.2 (firefox 4) inclusive, firefox implements the htmlspanelement interface for this element.

<em>: The Emphasis element - HTML: Hypertext Markup Language
implicit aria role no corresponding role permitted aria roles any dom interface htmlelement up to gecko 1.9.2 (firefox 4) inclusive, firefox implements the htmlspanelement interface for this element.

<plaintext>: The Plain Text element (Deprecated) - HTML: Hypertext Markup Language
implementation note: in gecko 1.9.2 and before, firefox implements the interface htmlspanelement for this element.

<s> - HTML: Hypertext Markup Language
implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element.

<section>: The Generic Section element - HTML: Hypertext Markup Language
implicit aria role region if the element has an accessible name, otherwise no corresponding role permitted aria roles alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, none, note, presentation, search, status, tabpanel dom interface htmlelement attributes this element only includes the global attributes.

<xmp> - HTML: Hypertext Markup Language
implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element.

Browser detection using the user agent - HTTP
never be satisfied with your webpage until you can open up the dev tools side panel and resize the screen while the webpage looks smooth, fluid, and dynamically resized.

HTTP caching - HTTP
another factor is the cache validation preferences in the advanced->cache preferences panel.

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.

Introduction - JavaScript
along the bottom of the console is an input line that you can use to enter javascript, and the output appears in the panel above: the console works the exact same way as eval: the last expression entered is returned.

Installing and uninstalling web apps - Progressive web apps (PWAs)
to add a web app to the home screen (also known as the launcher or springboard), tap the sharing button () at the bottom of the screen: this calls up the sharing panel.

SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
various presentation attributes don't work (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical) recently implemented presentation attributes: direction, unicode-bidi, font-variant, text-decoration svgtspanelement recently implemented bindings: selectsubstring recently implemented attributes: textlength, lengthadjust tref this feature, present in early draft of the spec, has been removed from it and is therefor not implemented (bug 273171).

Getting started - SVG: Scalable Vector Graphics
for normal svg files, servers should send the http headers: content-type: image/svg+xml vary: accept-encoding for gzip-compressed svg files, servers should send the http headers: content-type: image/svg+xml content-encoding: gzip vary: accept-encoding you can check that your server is sending the correct http headers with your svg files by using the network monitor panel or a site such as websniffer.cc.

XPath
tools chropath xpath panel that integrates tightly into firebug, providing an editor and inspector (firefox add-on).