Search completed in 1.22 seconds.
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
« previousnext » adding a new
toolbar adding new
toolbars to firefox is easy, but adding them the wrong way is very easy as well.
...
toolbars in firefox are very customizable.
... some users don't like extra
toolbars, or they want to rearrange
toolbar buttons to their liking, possibly merging multiple
toolbars in the process.
...And 57 more matches
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
this article explains how to add a
toolbar button to a toolkit application (such as firefox, thunderbird, or kompozer) using overlays.
... creating an overlay the first step is to create an overlay for the document containing the
toolbar you wish to enhance.
... adding the
toolbar button toolkit applications have customizable
toolbars; therefore, it's common practice for extensions to add their
toolbar buttons to the
toolbar palette, rather than adding them directly to the
toolbar.
...And 27 more matches
toolbar - Archive of obsolete content
it can be collapsed with a grippy when the
toolbar is placed inside a toolbox.
... the
toolbar should always have an id attribute.
... note: gecko 2.0 adds support for external
toolbars.
...And 42 more matches
ui/toolbar - Archive of obsolete content
experimental add a
toolbar to the firefox user interface.
... a
toolbar is a horizontal strip of user interface real estate.
... like a panel, a
toolbar's content is specified using html.
...And 39 more matches
Toolbars - Archive of obsolete content
« previousnext » a
toolbar is usually placed along the top of a window and contains a number of buttons that perform common functions.
... xul has a method to create
toolbars.
... adding a
toolbar like a number of elements, xul
toolbars are a type of box.
...And 24 more matches
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
this page tells you step-by-step how to make a custom
toolbar button in seamonkey 1.x.
... (for seamonkey 2, firefox, thunderbird and sunbird, see the page: custom
toolbar button) you do not need any special technical skills or tools, and almost all the information you need is on this page.
...in particular, the articles creating
toolbar buttons and building an extension explain the process in more detail.
...And 17 more matches
Custom toolbar button - Archive of obsolete content
this page tells you step-by-step how to make a custom
toolbar button in firefox, seamonkey 2.0, thunderbird or sunbird.
... (for seamonkey 1.x, see the page custom
toolbar button:seamonkey.) you do not need any special technical skills or tools, and almost all the information you need is on this page.
...in particular, the articles creating
toolbar buttons and building an extension explain the process in more detail.
...And 17 more matches
toolbarbutton - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a button that appears on a
toolbar.
... relevant accessbility guidelines all
toolbar functionality should be duplicated elsewhere in the application where possible, provide keyboard alternatives.
... where not possible, make all
toolbarbuttons focusable by -moz-user-focus: normal.
...And 8 more matches
Toolbar - Archive of obsolete content
adding a
toolbar button there are two tutorials available: an elaborate step by step tutorial for beginners: custom
toolbar button a tutorial describing the steps needed to add a
toolbar button assuming you already have a working extension and know the basics of extension development: creating
toolbar buttons adding button by default when you create and deploy your extension and include a
toolbar button for it by overlaying the customize
toolbarpalette, it is not available by default.
... the user has to drag it onto the
toolbar.
... the following code will place your button on the
toolbar by default.
...And 4 more matches
Toolbar customization events - Archive of obsolete content
when
toolbars are customized, events are sent to their parent window.
... you can use window.addeventlistener() to listen for these events in order to keep abreast of changes to
toolbars.
... none of these events contain any data; if you need details, you'll need to look at the
toolbar.
...And 4 more matches
Toolbars - Archive of obsolete content
toolbars, implemented using the xul
toolbar element, are containers for
toolbar buttons and other user interface objects.
... the following articles provide details about implementing and working with
toolbars.
... documentation xul school: adding
toolbars and
toolbar buttons a helpful tutorial to creating
toolbars and
toolbar buttons.
...And 4 more matches
Adding a Button to the Toolbar - Archive of obsolete content
to add a button to the
toolbar, use the action button or toggle button modules.
...the button is added to the
toolbar at the top of the browser window: you can't set the initial location for the button, but the user can move it using the browser's customization feature.
... displaying richer content to create more complex user interface content than is possible with just a button, use the
toolbar api.
...And 3 more matches
toolbarpalette - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only the item is a palette of available
toolbar items.
... it is not displayed, but is used by the
toolbar customization dialog to display the list of items.
... the children of the
toolbarpalette should be the complete list of
toolbarbuttons and
toolbaritems that can be added to the
toolbar.
...And 3 more matches
Window.toolbar - Web APIs
the window.
toolbar property returns the
toolbar object, whose visibility can be toggled in the window.
... syntax objref = window.
toolbar example the following complete html example shows way that the visible property of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing window.
... <!doctype html> <html> <head> <title>various dom tests</title> <script> // changing bar states on the existing window netscape.security.privilegemanager.enableprivilege("universalbrowserwrite"); window.
toolbar.visible=!window.
toolbar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above.
...And 3 more matches
toolbaritem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only an item that appears on a
toolbar.
... this element should wrap all customizable items (unless they're instances of
toolbarbutton).
... if you don't need the thing you're placing in the
toolbar to be customized then it doesn't need to be in a
toolbaritem element.
...And 2 more matches
Network monitor toolbar - Firefox Developer Tools
the network monitor provides two
toolbar areas, one above the main section, and another below.
...
toolbar the
toolbar is at the top of the main network monitor window.
... (prior to firefox 77, this
toolbar was arranged somewhat differently.) it provides: an icon to clear the network request list.
... a second
toolbar area at the bottom of the network monitor provides: an icon to launch performance analysis.
toolbarbutton.title - Archive of obsolete content
« xul reference home title type: string this functionality only applies when
toolbarbutton is used in the customize
toolbar dialog.
... the text that is displayed as a button's label when it's in the customize
toolbar palette.
... this does not affect the button's label when it is in a
toolbar, which remains determined by the label attribute.
appendCustomToolbar - Archive of obsolete content
« xul reference home appendcustom
toolbar( name, currentset ) firefox only return type: element adds a custom
toolbar to the toolbox with the given name.
... you can supply a comma-separated list of
toolbar item ids as the second argument to add some items by default.
... the method returns the dom element for the created
toolbar.
toolbargrippy - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] not in firefox the notch on the side of a
toolbar which can be used to collapse and expand it.
... this element is used internally by the
toolbar and should only be used directly when modifying its theme.
...des(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements
toolbar,
toolbarbutton,
toolbaritem,
toolbarpalette,
toolbarseparator,
toolbarset,
toolbarspacer,
toolbarspring, toolbox interfaces nsiaccessibleprovider ...
toolbarseparator - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] creates a separator between groups of
toolbar items.
... properties accessibletype examples <toolbox> <
toolbar> <
toolbarbutton label="button 1"/> <
toolbarseparator /> <
toolbarbutton label="button 2"/> </
toolbar> </toolbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustex...
...ertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements
toolbar,
toolbarbutton,
toolbargrippy,
toolbaritem,
toolbarpalette,
toolbarset,
toolbarspacer,
toolbarspring, toolbox ...
chromeclass-toolbar - Archive of obsolete content
« xul reference home chromeclass-
toolbar when this class is used, the
toolbar will be hidden when a window is opened by setting the
toolbar option to no in the window.open method.
... otherwise, this option will be ignored for this
toolbar and it will always be visible.
toolbarset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only this element is used as a container for custom
toolbars, which are added in the custom
toolbar dialog.
...ertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements
toolbar,
toolbarbutton,
toolbargrippy,
toolbaritem,
toolbarpalette,
toolbarseparator,
toolbarspacer, toolbox ...
toolbarspacer - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only a space between
toolbar items.
...des(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements
toolbar,
toolbarbutton,
toolbargrippy,
toolbaritem,
toolbarpalette,
toolbarseparator,
toolbarset,
toolbarspring, toolbox interfaces nsiaccessibleprovider ...
toolbarspring - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only a flexible space between
toolbar items.
...ertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements
toolbar,
toolbarbutton,
toolbargrippy,
toolbaritem,
toolbarpalette,
toolbarseparator,
toolbarset,
toolbarspacer, toolbox interfaces nsiaccessibleprovider ...
Using the toolbar role - Accessibility
description this technique demonstrates how to use the
toolbar role and describes the effect it has on browsers and assistive technology.
... examples example 1: code working examples: w3c
toolbar example notes aria attributes used related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources ...
toolbarBindings.xml - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "
toolbarbindings.xml": <bindings id="
toolbarbindings"> <binding id="
toolbar-primary" extends="chrome://global/content/bindings/
toolbar.xml#
toolbar-primary"> <content> <xul:hbox class="
toolbar-holder
toolbar-primary-holder" flex="1" xbl:inherits="orient=tborient,buttonstyle"> <xul:hbox class="
toolbar-button-box" flex="1"> <children/> </xul:hbox> <xul:image class="
toolbar-primary-icon" xbl:inherits="buttonstyle"/> </xul:hbox> </content> </binding> </bindings> ...
externalToolbars - Archive of obsolete content
« xul reference external
toolbars type: array of elements an array of external
toolbars; that is,
toolbar elements that should be considered to be members of this toolbox, even if they are not actually children of the toolbox.
Add Toolbar Button
example xul overlay file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://demo/skin/overlay.css" type="text/css" ?> <overlay id="messengerwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="overlay.js" /> <
toolbarpalette id="mail
toolbarpalette"> <
toolbarbutton id="demo-button" class="demo-button
toolbarbutton-1" label="demo" type="button" oncommand="demo.load();" /> </
toolbarpalette> </overlay> add this to the css file you referenced in your xul file: #demo-button, [place="palette"] > #demo-button { list-style-image: url("chrome://demo/skin/icon.png") !important; } ...
Index - Archive of obsolete content
63 ui add-on sdk, add-ons, extensions, reference provides access to button,
toolbar, and sidebar ui objects.
... 123 ui/
toolbar add a
toolbar to the firefox user interface.
... 144 adding a button to the
toolbar add-on sdk no summary!
...And 49 more matches
CustomizableUI.jsm
customizableui is aware of two types of areas:
toolbars and the menu panel.
...when a customizable
toolbar's xbl binding is constructed (generally, that is when a <
toolbar customizable="true"/> node is appended to the document and isn't invisible), the binding will call into customizableui and register the
toolbar's node as being one of the concrete instances of its area.
...
toolbars generally function the same way they always have.
...And 48 more matches
Index - Archive of obsolete content
148 iconsize
toolbar, xul, xul attribute no summary!
... 387
toolbar.mode xul attributes, xul reference no summary!
... 388
toolbarbutton.title no summary!
...And 37 more matches
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-left, scrollbarbutton-up, scrollbargripper-vertical, scro...
...this is useful for, say, putting the navigation controls (back button) on the right hand side of the
toolbar.
...selected in the tree view will be xul:
toolbarbutton.
...And 22 more matches
toolbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container for
toolbars.
...if a
toolbar is placed inside a toolbox, a grippy is displayed on its left or upper edge.
... the user may click the grippy to collapse the
toolbar.
...And 18 more matches
The Implementation of the Application Object Model - Archive of obsolete content
xul has language constructs for all of the typical dialog controls, as well as for widgets like
toolbars, trees, progress bars, and menus.
...imagine a remote file that describes the user's personal
toolbar.
... the downloaded file contains an aol instant messenger button, and the user really doesn't want that on the
toolbar.
...And 13 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
phase 4: adding a
toolbar button in phase 4, we’ll use graphics and style sheets to create a
toolbar button that will open the clock window (figure 9).
... fixme: figure 9:
toolbar after phase 4 directory structure the style sheet and graphics files will be located inside the chrome’s skin package.
... listing 10: additional content for chrome.manifest skin helloworld classic/1.0 skin/classic/ style chrome://browser/content/browser.xul chrome://helloworld/skin/overlay.css style chrome://global/content/customize
toolbar.xul chrome://helloworld/skin/overlay.css register skin package (skin instruction) line 1 beginning skin is used to register the skin package; helloworld is the package name; skin/classic/ is the relative path to the folder containing the source files; classic/1.0 indicates that this skin package is meant for the firefox standard theme.
...And 12 more matches
Window.open() - Web APIs
these features include options such as the window's default size and position, whether or not to include
toolbar, and so forth.
...if url is an empty string, then a new blank, empty window (url about:blank) is created with the default
toolbars of the main window.
...if windowname does not specify an existing window and the windowfeatures parameter is not provided (or if the windowfeatures parameter is an empty string), then the new secondary window will render the default
toolbars of the main window.
...And 11 more matches
Theme changes in Firefox 2 - Archive of obsolete content
global/
toolbar.css needs to be updated to include new styles.
...y-button:active #home-button:active #mail-button #mail-button:active #mail-button[disabled="true"] #mail-button[open="true"] #new-tab-button:active #new-tab-button[checked="true"] #new-window-button:active #new-window-button[checked="true"] #paste-button:active #print-button:active #reload-button:active #stop-button:active .messagebutton .messageimage .messagetext browsermessage
toolbar[iconsize="small"] #bookmarks-button:active
toolbar[iconsize="small"] #copy-button:active
toolbar[iconsize="small"] #cut-button:active
toolbar[iconsize="small"] #downloads-button:active
toolbar[iconsize="small"] #history-button:active
toolbar[iconsize="small"] #home-button:active
toolbar[iconsize="small"] #mail-button
toolbar[iconsize="small"] #mail-button:active
toolbar[iconsize="small"] ...
...#mail-button[disabled="true"]
toolbar[iconsize="small"] #mail-button[open="true"]
toolbar[iconsize="small"] #new-tab-button:active
toolbar[iconsize="small"] #new-window-button:active
toolbar[iconsize="small"] #paste-button:active
toolbar[iconsize="small"] #print-button:active
toolbar[iconsize="small"] #reload-button:active
toolbar[iconsize="small"] #stop-button:active
toolbar[mode="icons"] .
toolbarbutton-text
toolbar[mode="text"] .
toolbarbutton-1 > .
toolbarbutton-text
toolbar[mode="text"] .
toolbarbutton-1 > stack >
toolbarbutton > .
toolbarbutton-text
toolbar[mode="text"] .
toolbarbutton-icon the following styles need to be added to your theme to be compatible with firefox 2: #back-button .
toolbarbutton-menubutton-dropmarker #back-button:hover #back-button:hover .
toolbarbutton-men...
...And 10 more matches
MenuItems - Archive of obsolete content
for instance, a menuitem that can be used to toggle a
toolbar on and off.
... to indicate the current state of the
toolbar, a checkbox would be displayed next to the menu item label.
... if the checkbox is on, the
toolbar is shown, whereas if the checkbox is off, the
toolbar is not shown.
...And 9 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
mac os x os x lion missing
toolbar button icons due to firefox bug 679708 and bug 702558, some
toolbar buttons icons may be missing on firefox 8 and later running on mac os x lion.
... in order to work around this issue, you need to either rename any of the following files that are in your chrome://browser/skin/ folder and fix any references to those files, or copy them to the folder chrome://browser/skin/lion/: keyhole-circle.png
toolbar.png
toolbarbutton-dropmarker.png tabbrowser/alltabs-box-bkgnd-icon.png tabview/tabview.png places/
toolbar.png linux linux select box fields are showing both drop arrow and spinner arrows on linux: the styling of drop down select box fields may show both a drop arrow and up/down spinner arrows.
...the fix is to make sure any style rule that references #appmenu-button also has a comparable reference to #appmenu-
toolbar-button in chrome://browser/skin/browser.css.
...And 9 more matches
Theme changes in Firefox 4 - Archive of obsolete content
controlling the actual icon size used by add-on
toolbar buttons the iconsize attribute of the browser's
toolbar elements now has a different default value on each
toolbar independently.
... the value does not necessarily reflect the user preference in the
toolbar customization palette anymore.
... the theme can now override the value by setting a special css property on the
toolbar.
...And 9 more matches
ui - Archive of obsolete content
experimental provides access to button,
toolbar, and sidebar ui objects.
... this module exports constructors for the following: actionbutton togglebutton frame
toolbar sidebar each object has its own reference page, linked above: for all the details please refer to the reference page.
... actionbutton an action button is a button in the main firefox
toolbar.
...And 8 more matches
ui/frame - Archive of obsolete content
at the moment you can only add frames to a
toolbar.
...right now it can be used in conjunction with a
toolbar: you create a frame, then supply it to the
toolbar's constructor, and the content is then displayed inside the
toolbar.
...k> </head> <body> <select name="city" id="city-selector"></select> <span id="time" class="info-element"></span> <span id="weather" class="info-element"></span> <script type="text/javascript" src="city-info.js"></script> </body> </html> if we save this document as "city-info.html" under the add-on's "data" directory, we can create a frame hosting it and add the frame to a
toolbar like this: var { frame } = require("sdk/ui/frame"); var {
toolbar } = require("sdk/ui/
toolbar"); var frame = new frame({ url: "./city-info.html" }); var
toolbar =
toolbar({ name: "city-info", title: "city info", items: [frame] }); the
toolbar is positioned between the address bar and the content window.
...And 8 more matches
Windows and menus in XULRunner - Archive of obsolete content
this time i want to add some of the things common to a desktop application user interface: windows and dialogs menus and
toolbars os common dialogs controls or widgets windows each window or dialog should be created in its own xul file.
... menus and
toolbars most desktop applications are complex enough to require some sort of menu and/or
toolbar to structure the application’s available commands.
... xul provides elements to support both menus and
toolbars.
...And 8 more matches
Places Developer Guide
nsinavbookmarksservice.
toolbarfolder - the contents of this folder are visible on the bookmarks
toolbar.
...var bookmarkuri = cc["@mozilla.org/network/io-service;1"] .getservice(ci.nsiioservice) .newuri("http://www.mozilla.com", null, null); var bookmarkid = bookmarks.insertbookmark( bookmarks.
toolbarfolder, // the id of the folder the bookmark will be placed in.
... creating a folder var folderid = bookmarks.createfolder( bookmarks.
toolbarfolder, // the id of the folder the new folder will be placed in.
...And 7 more matches
Network request list - Firefox Developer Tools
click the request blocking icon in the
toolbar.
... filter type how to apply content type use the buttons in the
toolbar (html, css, js).
... xhr requests use the xhr button in the
toolbar.
...And 7 more matches
Complete - Archive of obsolete content
this page is for readers who have followed the custom
toolbar button tutorial for firefox, thunderbird and sunbird, or the custom
toolbar button:seamonkey tutorial for seamonkey, and who want to learn more about developing extensions.
... introduction you can use the custom
toolbar button tutorial as a very simple introduction to extensions.
...features of this extension this extension is a more complex version of the original custom
toolbar button extension.
...And 6 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
for an example of menu items with checkboxes, see the view menu in firefox, with items to show or hide the
toolbar and sidebar.
... figure 8: a button with an image icon attribute value icon attribute value accept close cancel print help add open remove save refresh find go-forward clear go-back yes properties no select-font apply select-color table 2: values for the icon attribute
toolbar buttons the
toolbarbutton element is the element used to define
toolbar buttons.
... this is typically placed inside a
toolbar element, which defines a
toolbar, but it can be used in other locations.
...And 5 more matches
MenuButtons - Archive of obsolete content
both the button and the
toolbar button elements support two special types used for creating menu buttons.
... a button or
toolbarbutton with a type attribute set to 'menu' creates a button that will open a menu when pressed.
... a button or
toolbarbutton with a type attribute set to 'menu-button' creates a button that can be pressed normally.
...And 5 more matches
XUL accessibility guidelines - Archive of obsolete content
toolbarbuttons by default,
toolbar buttons cannot receive focus with a keyboard.
... the recommended way of fixing this is that all functionality associated with a
toolbar be duplicated elsewhere in the application, such as in a menu item or context menu.
... in cases where duplication of functionality is not possible (such as a window without a menu bar),
toolbar buttons can be made focusable by adding the special css rule -moz-user-focus: normal.
...And 5 more matches
XUL controls - Archive of obsolete content
<checkbox label="show
toolbar labels" checked="true"/> more information about the checkbox element.
... <timepicker value="12:05"/> timepicker reference <
toolbarbutton> a button that is displayed on a
toolbar.
... <
toolbarbutton label="reload"/> more information about the
toolbarbutton element.
...And 5 more matches
Building a Theme - Archive of obsolete content
introduction this tutorial will take you through the steps required to build a very basic theme - one which updates the background color of the
toolbars in firefox.
...xul is an xml grammar that provides user interface widgets like buttons, menus,
toolbars, trees, etc.
... updating the
toolbar's styling note in firefox 4.0 and up, the highlight feature of dom inspector is broken.
...And 5 more matches
Main Windows
the rest is loaded from overlays: mailwindowoverlay.xul this is the red sections shown in the interface above (where?), including the
toolbars, notification bars, and the status bar, but also includes most of the commands, keysets, and context menus of thunderbird, along with a whole lot of javascript.
...menus,
toolbar buttons, and headers are all taken from exactly the same overlays listed above though.
... mailwindowoverlay.xul this is the red sections shown in the interface above, including the
toolbars, notification bars and the status bar.it also includes most of the commands, keysets, and context menus of thunderbird, along with a whole lot of javascript.
...And 5 more matches
Tooltips - Archive of obsolete content
for instance, moving the mouse over top of a
toolbar button and waiting for a second can display a small popup label containing text describing the button's function.
... <
toolbarbutton label="back" tooltiptext="go back one page"/> in this example, a back button on a
toolbar is given additional text to appear on a tooltip.
... this could also be useful if the
toolbar is configured such that labels do not appear.
...And 4 more matches
Migrating from Firebug - Firefox Developer Tools
filter log messages firebug offers two ways to filter log messages, via the options menu and via the filter buttons within the
toolbar.
... the developer tools console offers similar functionality via the filter buttons inside its
toolbar — centralized at one place.
... persist logs in firebug you can click the persist button within the
toolbar to keep the logged messages between page navigations and reloads.
...And 4 more matches
<menu> - HTML: Hypertext Markup Language
implicit aria role list permitted aria roles directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist,
toolbar or tree dom interface htmlmenuelement attributes this element includes the global attributes.
...
toolbar: indicates the
toolbar state, which represents a
toolbar consisting of a series of commands for user interaction.
... an html menu can be used to create context menus (typically activated by right-clicking another element) or
toolbars.
...And 4 more matches
ui/button/action - Archive of obsolete content
it an id, an icon, and a label: var { actionbutton } = require("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.
...when the button is in the
toolbar, this appears in a tooltip, and when the button is in the menu, it appears underneath the button as a legend.
...And 3 more matches
ui/button/toggle - Archive of obsolete content
id, an icon, and a label: var { togglebutton } = require("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.
...when the button is in the
toolbar, this appears in a tooltip, and when the button is in the menu, it appears underneath the button as a legend.
...And 3 more matches
Introduction to XUL - Archive of obsolete content
a widget may expect to own a piece of a window (a
toolbar or
toolbar set), or it may be expected to work within or without a window (menubars, depending on the platform).
...buttons will respond to the mouse;
toolbars will act as containers for buttons.
... we are at first primarily concerned with the obvious ui components:
toolbars, menus and dialogs.
...And 3 more matches
Menus - Archive of obsolete content
toolbarbutton
toolbar buttons can also support menus.
... <menu label="view"> <menupopup> <menuitem label="
toolbar"/> <menuitem label="status bar"/> </menupopup> </menu> when the menu is clicked, it opens the menupopup contained within it.
...this is useful when you wish to have several elements performing the same action, for example a menuitem on a menubar, a context menu, and a
toolbar button, because you can place the code to execute only once on the command and hook each element up to the command.
...And 3 more matches
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.
...And 3 more matches
Reporting a Performance Problem
enabling the profiler
toolbar button these steps only work in firefox 75+.
... visit https://profiler.firefox.com/ click on "enable profiler menu button" the profiler
toolbar button will show up in the top right of the url bar as a small stopwatch icon you can right-click on the button and remove it from the
toolbar when you're done with it.
... using the profiler when enabled, the profiler
toolbar button is not recording by default.
...And 3 more matches
Index of archived content - Archive of obsolete content
ystem/events system/runtime system/unload system/xul-app tabs/utils test/assert test/harness test/httpd test/runner test/utils ui/button/action ui/button/toggle ui/frame ui/id ui/sidebar ui/
toolbar util/array util/collection util/deprecate util/list util/match-pattern util/object util/uuid window/utils release notes tools cfx cfx to jpm console jpm...
... jpm-mobile jpmignore package.json tutorials add a context menu item add a menu item to firefox adding a button to the
toolbar annotator creating annotations displaying annotations implementing the widget overview storing annotations chrome authority creating event targets creating reusable modules developing for firefox mobile display a popup getting started (jpm) getting started (cfx) ...
... miscellaneous modules on page load page loading post data to window preferences progress listeners queryselector rosetta running applications svg animation svg general scrollbar sidebar stringview tabbox
toolbar tree uri parsing view source for xul applications windows xml-related code snippets xml:base support in old browsers xpath getattributens common pitfalls communication between html and your extension ...
...And 2 more matches
OpenClose - Archive of obsolete content
ete example which uses a button to open a menu: <button label="open menu" oncommand="document.getelementbyid('editmenu').open = true;"/> <menu id="editmenu" label="edit"> <menupopup> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </menu> this technique may be used for both menupopups that use the menu tag, the button tag and the
toolbarbutton tag.
... this technique may be used for both menupopups that use the menu tag, the button tag and the
toolbarbutton tag.
... var open = somemenu.open; opening a popup for opening menupopups that use the menu tag, the button tag and the
toolbarbutton tag, see opening menus above.
...And 2 more matches
Cross Package Overlays - Archive of obsolete content
for example, you could add menu items or
toolbars to the mozilla browser window.
... we'll use this feature to add a
toolbar to the mozilla browser window.
...below, we'll add a find files
toolbar to the browser.
...And 2 more matches
Extentsions FAQ - Archive of obsolete content
how to customizes
toolbar button to coexist in a
toolbar palette and status bar?
... option #3 install status buttons 1.0 <https://addons.mozilla.org/firefox/1272/> "lets you put
toolbar buttons at either end of the status-bar.
... just drag them there from the
toolbar customisation window, like you would when adding buttons to the
toolbars." option #4 install
toolbar control <http://webdesigns.ms11.net/chromeditp.html> asking for help with getting an extension to process windows messages.
...And 2 more matches
Displaying Places information using views
places provides the following built-in views: tree menu
toolbar instantiating the three built-in views are simply standard xul elements with a special type attribute whose value is "places".
...in this regard the built-in menu and
toolbar views are no different.
...
toolbar view create a built-in
toolbar view by setting the type attribute to "places" on an empty hbox element (which would be a child of some parent
toolbaritem element, itself the child of a
toolbar element): <
toolbar> <
toolbaritem> <hbox type="places" /> </
toolbaritem> </
toolbar> the place attribute or property should be set on the hbox as well.
...And 2 more matches
Embedding the editor
the composer chrome (
toolbars etc) may be implemented by the embedder using native widgets, or using some amount of xul.
... that chrome needs to be configurable - dockable floating
toolbars,
toolbar shared between composer widgets, or 1 per widget.
...as is the case for composer embedded in a native application, there is a requirement here that the composer ui be configurable, such that it can be displayed either as a
toolbar at the top of the <htmlarea>, a floating palette, or a top-level
toolbar.
...And 2 more matches
Rhino Debugger
controlling execution the debugger provides the following facilities for you to control the execution of scripts you are debugging: step into to single step entering any function calls, you may do any of the following: select the debug->step into menu item on the menu bar press the step into button on the
toolbar press the f11 key on the keyboard execution will resume.
... step over to single step to the next line in the current function, you may do any of the following: select the debug->step over menu item on the menu bar press the step over button on the
toolbar press the f7 key on the keyboard execution will resume but control will return to the debugger at the next line in the current function or top-level script.
... step out to continue execution until the current function returns you may do any of the following: select the debug->step out menu item on the menu bar press the step out button on the
toolbar press the f8 key on the keyboard execution will resume until the current function returns or a breakpoint is hit.
...And 2 more matches
nsITaskbarWindowPreview
window preview
toolbars window previews may have a
toolbar with up to seven buttons.
...user clicks on the
toolbar buttons are reported to your nsitaskbarpreviewcontroller implementation's nsitaskbarpreviewcontroller.onclick() method.
... constants constant value description num_
toolbar_buttons 7 the maximum number of
toolbar buttons supported by the windows taskbar api.
...And 2 more matches
Toolbox - Firefox Developer Tools
there are a few different ways to open the toolbox: select "toggle tools" from the web developer menu (under "tools" on os x and linux, or "firefox" on windows) click the wrench icon (), which is in the main
toolbar or under the hamburger menu (), then select "toggle tools" activate any tool hosted in the toolbox (for example, the javascript debugger or the page inspector) press ctrl + shift + i on windows and linux, or cmd + opt + i on os x.
...this is what it looks like when it's docked: the window itself is split into two parts: a
toolbar along the top, and a main pane underneath: note: since firefox 62, you can drag and drop tabs in the main
toolbar of the toolbox to reorder your tools as you wish (bug 1226272).
... docking mode by default, the toolbox appears docked to the bottom of the browser window, but you can also dock it to the right-hand side of the window, or make it a standalone window, using buttons in the
toolbar.
...And 2 more matches
dev/panel - Archive of obsolete content
with the dev/panel module, you can create your own panels in the toolbox: the panel gets a tab in the toolbox
toolbar which enables the user to open it: you specify the panel's content and behavior using html, css, and javascript.
... name type description label string the string to display in the toolbox
toolbar.
... mandatory icon string the icon to display in the toolbox
toolbar, specified as a resource:// url pointing to an icon file, typically in your add-on's "data" directory.
... mandatory tooltip string a string that will be used as a tooltip in the toolbox
toolbar.
Venkman Introduction - Archive of obsolete content
the menubar,
toolbar, and all of the views can be collapsed or hidden, giving you a lot of control over the debugging environment.
... getting acquainted with venkman's user interface
toolbar the
toolbar is located at the top of the debugger.
... the
toolbar contains icons for stop, continue, step over, step into, step out, profile, and pretty print commands.
... when pretty print is enabled you will see a green check mark on the
toolbar button, and the menu item will be checked as well.
findbar - Archive of obsolete content
attributes browserid, findnextaccesskey, findpreviousaccesskey, highlightaccesskey, matchcaseaccesskey properties browser, findmode methods close, onfindagaincommand, open, startfind, togglehighlight example <browser type="content-primary" flex="1" id="content" src="about:blank"/> <findbar id="find
toolbar" browserid="content"/> attributes browserid type: string the id of the browser element to which the findbar is attached.
... findnextaccesskey type: string the access key for the "find next"
toolbar button in the findbar.
... findpreviousaccesskey type: string the access key for the "find previous"
toolbar button in the findbar.
... highlightaccesskey type: string the access key for the "highlight"
toolbar button in the findbar.
insertItem - Archive of obsolete content
« xul reference home insertitem( id, beforenode, wrapper, beforepermanent ) not in seamonkey 1.x return type: element add an item with the given id to the
toolbar.
...if the second argument is null, but the beforepermanent argument is true, the item is added to the beginning of the
toolbar before the first permanent item.
... otherwise, if the beforepermanent argument is false, the new item is added to the end of the
toolbar.
... the id should match an element in the
toolbar's
toolbarpalette.
Actions - Archive of obsolete content
for example, if the example were modified to the following: <action> <
toolbar> <button uri="?relateditem" label="?relateditem"/> </
toolbar> </action> here, only the button would be repeated for each result; the
toolbar will only be generated once.
... the
toolbar is created just before the content for the first result is generated.
... the effect will be a
toolbar with a set of three buttons inside it.
... of course, in this simple example you could really just make the
toolbar the outer element with the datasources attribute rather than placing it inside the action.
Skinning XUL Files by Hand - Archive of obsolete content
here is a very short (but complete!) cascading stylesheet that might be referenced and used by a xul file:
toolbar.nav-bar { background-image: url("chrome://navigator/skin/navbar-bg.gif"); padding: 0px; padding-bottom: 2px; } box#navbar { background-color: lightblue; } a:link { color: #fa8072; } this stylesheet exhibits three of the different types of style definitions described above.
...in the first definition, the selector "
toolbar.nav-bar" is used to define style information for all xul
toolbars of the class "nav-bar." unlike an id -- which is also often used as a selector but must be unique -- a class attribute can be used on multiple xul elements you want to pick up the specified style information.
... a
toolbar elements defined as: <
toolbar class="nav-bar" id="nav3"> <
toolbarbutton label="click me" /> <
toolbarbutton label="don't click me" /> ...
... </
toolbar> will be styled with the css rules that appear in the block after the
toolbar.nav-bar selector in the css example above.
Profile Manager
creating a profile to create a new profile, just click the new button from profile manager's
toolbar.
... to backup a profile: select the profile you want to backup, and choose "backup to->backup folder" from the
toolbar's backup menu.
... to backup a profile to an archive: select the profile you want to backup, and choose "backup to->archive" from the
toolbar's backup menu.
... to create a profile from a profile archive: select "restore from->archive" from the
toolbar's backup menu.
Retrieving part of the bookmarks tree
attributes defined in /toolkit/components/places/public/nsinavbookmarksservice.idl are: bookmarksmenufolder, tagsfolder, unfiledbookmarksfolder and
toolbarfolder.
...this example will get the id of the bookmarks
toolbar: var bookmarksservice = components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); var
toolbarfolder = bookmarksservice.
toolbarfolder; the placesroot is the root folder in the whole places hierarchy.
...configure the query to get a hierarchical bookmarks result, pass the folder id to setfolders in your query object: query.setfolders([
toolbarfolder], 1); run the query the executequery and executequeries functions will return an nsinavhistoryresult object containing the results of your query: var result = historyservice.executequery(query, options); get the results when you are querying for exactly one folder grouped by folder with no fancy query parameters such as keywords or date ranges (as in this example), the root of the result will be an nsinavhistorycontainerresultnode corresponding to your folder.
...browser/nav-history-service;1"] .getservice(components.interfaces.nsinavhistoryservice); var options = historyservice.getnewqueryoptions(); var query = historyservice.getnewquery(); var bookmarksservice = components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); var
toolbarfolder = bookmarksservice.
toolbarfolder; query.setfolders([
toolbarfolder], 1); var result = historyservice.executequery(query, options); var rootnode = result.root; rootnode.containeropen = true; // iterate over the immediate children of this folder and dump to console for (var i = 0; i < rootnode.childcount; i ++) { var node = rootnode.getchild(i); dump("child: " + node.title + "\n"); } /...
nsIAccessibleRole
role_
toolbar 22 represents a
toolbar, which is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features.
... it is used for xul:
toolbar, role="
toolbar".
... role_splitbutton 62 represents a button on a
toolbar that has a drop-down list icon directly adjacent to the button.
... role_editbar 101 an editable text object in a
toolbar.
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.
...at the top of each panel is a
toolbar which contains a menu button allowing you to choose which viewer to display from the viewer list, a label displaying the name of the currently active viewer, and another menu button allowing you to issue viewer-specific commands.
...as of this writing, there's a toolbox containing an empty menubar and an empty
toolbar, as well as an empty vbox: <toolbox id="tbxinstoolbox"> <menubar id="mbrinspectormain"/> <
toolbar id="tbinspectorprimary"/> </toolbox> <vbox id="bxinspectormain" flex="1"/> there are no menus,
toolbar items, et cetera defined here.
...(the browser pane is not a viewer panel in the sense that document and object panels are, i.e., the sorts of panels as defined above in relation to the panelset; "pane" is used here with regard to the browser pane in a loose sense to describe the generic ui fixture.) toolboxoverlay.xul this overlay fills in the inspector toolbox, including
toolbar buttons and the location bar and its "inspect" button.
Index - Firefox Developer Tools
49 network monitor
toolbar 110n:priority, debugging, dev tools, firefox, guide, networking, tools the network monitor provides two
toolbar areas, one above the main section, and another below.
...then record a profile as usual, and you will see a new tab labeled "allocations" in the
toolbar: 84 call tree javascript, performance, memory the call tree is a sampling profiler.
... 131 step through code debugger, devtools, javascript, step through code when the debugger is stopped at a breakpoint, you can step through it using four buttons in the
toolbar: 132 use a source map the javascript sources executed by the browser are often transformed in some way from the original sources created by a developer.
...while you're in another tool in the toolbox, just press esc or select the "show split console" command in the
toolbar menu.
Network request details - Firefox Developer Tools
clicking the icon at the right-hand end of the
toolbar closes the details pane and returns you to the list view.
... headers tab the headers tab has a
toolbar, followed by three main sections.
... headers
toolbar using the headers
toolbar, you can: filter the headers in the response headers and request headers sections.
... network monitor features the following articles cover different aspects of using the network monitor:
toolbar network request list network traffic recording performance analysis throttling ...
Obsolete features - Web APIs
personalbar obsolete since gecko 76 if this feature is on, then the new secondary window renders the personal
toolbar in netscape 6.x, netscape 7.x and mozilla browser.
... it renders the bookmarks
toolbar in firefox.
... in addition to the personal
toolbar, mozilla browser will render the site navigation bar if such
toolbar is visible, present in the parent window.
... mozilla and firefox users can force new windows to always render the personal
toolbar/bookmarks
toolbar by setting dom.disable_window_open_feature.personalbar to true in about:config or in their user.js file.
Bookmarks - Archive of obsolete content
// bookmark name win.location.href.tostring(), // uri of the bookmark null, // shortcut win.document.title, // description win.document.characterset, // charset null, // postdata bookmarksservice.getbookmarks
toolbarfolder(), // bookmark folder 0); // index in the folder firefox 3 firefox 3 provides a reworked set of api for working with history and bookmarks.
... you can easily change this code to insert the new folder into the bookmarks
toolbar by changing bookmarksmenufolder to another folder attribute.
... var ios = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri("http://mozilla.com/", null, null); if (!bmsvc.isbookmarked(uri)) { bmsvc.insertbookmark(bmsvc.
toolbarfolder, uri, bmsvc.default_index, "mozilla"); } this example looks to see if the user already has a bookmark for the mozilla web site, and, if not, creates one, adding it to the user's bookmarks
toolbar.
Chapter 1: Introduction to Extensions - Archive of obsolete content
perhaps things like fine-grained tab controls, mouse gestures, extensive
toolbars and buttons, a feed reader, integration with a variety of web applications, or sophisticated tools to assist with web design.
... undo closed tabs button adds a
toolbar button to re-open the most recently closed tabs to the history menu.
... prefbar gives access to numerous preferences from the
toolbar.
Handling Preferences - Archive of obsolete content
in order to have this button enabled in your extension you need to add the following line to install.rdf: <em:optionsurl>chrome://xulschoolhello/content/preferenceswindow.xul</em:optionsurl> if you want to open this window from a different place in the ui, such as a menu item or a button in a
toolbar, you need to take into account that the opening behavior of a preferences window is different depending on the operating system.
... this is how we do it: openpreferences : function() { if (null == this._preferenceswindow || this._preferenceswindow.closed) { let instantapply = application.prefs.get("browser.preferences.instantapply"); let features = "chrome,titlebar,
toolbar,centerscreen" + (instantapply.value ?
...the tabs at the top of the window will need icons, and just like with
toolbar buttons there are subtle differences between operating systems.
The Box Model - Archive of obsolete content
any xul interface can be broken down into the following basic components: boxes text images alignment and flexibility widths and heights margins and paddings menus,
toolbar buttons, and even the most complex elements in xul are composed of these simple ingredients.
...select
toolbar buttons, menu items, textboxes, etc.
...play with changing the dimensions and appearance of buttons, changing the background color of the
toolbars and status bars, font styles, sizes, etc.
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.
...this is the context menu that appears when right-clicking on an element in firefox's interface, such as a bookmark on the bookmarks
toolbar.
... for example, jetpack.menu.context.browser.on("*").add("foo") does not add "foo" to the tab strip's and location bar's context menus, but it does on the bookmark
toolbar's context menu.
A XUL Bestiary - Archive of obsolete content
menus,
toolbars, buttons, and scrollbars are widgets, and so are such general purpose pieces as boxes and springs.
... these widgets can be created and placed within a xul file as simple elements: <menu>, <
toolbar>, and so on.
... in briefest terms, xul is the xml-based language used for creating interfaces, xptoolkit is the set of xul widgets (menus,
toolbar, etc.) actually assembed for this purpose -- the building blocks of the interface, as it were -- and xpfe, the cross platform front end, is the front end that has been created from xptoolkit.
currentset - Archive of obsolete content
« xul reference home currentset not in seamonkey 1.x type: comma-separated string the current set of displayed items on the
toolbar.
... this will be modified when the user customizes the
toolbar.
... the value of this attribute should be a comma-separated list of item ids from the
toolbarpalette or, additionally, any of the following strings: "separator", "spring", "spacer".
List of commands - Archive of obsolete content
selectpagedown other commands the following list other commands (prefixed by cmd_ or browser:) which have not been categorized here yet (though they are in the alphabetical list below): http://lxr.mozilla.org/seamonkey/sou...baroverlay.xul http://lxr.mozilla.org/seamonkey/sou...t/navigator.js http://lxr.mozilla.org/seamonkey/sou...toroverlay.xul http://lxr.mozilla.org/seamonkey/sou...onal
toolbar.js http://lxr.mozilla.org/seamonkey/sou...rceoverlay.xul http://lxr.mozilla.org/seamonkey/sou...extoverlay.xul http://lxr.mozilla.org/seamonkey/sou...lityoverlay.js http://lxr.mozilla.org/seamonkey/sou...oomoverlay.xul http://lxr.mozilla.org/seamonkey/sou...toroverlay.xul http://lxr.mozilla.org/seamonkey/sou...ark.properties http://lxr.mozilla.org/seamonkey/sou...kmarks-temp.js http://lxr...
..._bm_copy cmd_bm_cut cmd_bm_delete cmd_bm_expandfolder cmd_bm_export cmd_bm_find cmd_bm_import cmd_bm_managefolder cmd_bm_movebookmark cmd_bm_newbookmark cmd_bm_newfolder cmd_bm_newseparator cmd_bm_open cmd_bm_openinnewtab cmd_bm_openinnewwindow cmd_bm_paste cmd_bm_properties cmd_bm_rename cmd_bm_selectall cmd_bm_setnewbookmarkfolder cmd_bm_setnewsearchfolder cmd_bm_setpersonal
toolbarfolder cmd_bm_sortfolder cmd_bm_sortfolderbyname cmd_close cmd_closeothertabs cmd_closewindow cmd_copy cmd_copyimage cmd_copylink cmd_cut cmd_delete cmd_editpage cmd_findtypelinks cmd_findtypetext cmd_gotoline cmd_handlebackspace cmd_handleshiftbackspace cmd_minimizewindow cmd_neweditor cmd_neweditordraft cmd_neweditortemplate cmd_newnavigator cmd_newnavigatortab cmd_newtabw...
...ithtarget cmd_openhelp cmd_paste - paste a selection from the clipboard cmd_printsetup cmd_quit cmd_redo cmd_savepage cmd_scrollpagedown cmd_scrollpageup cmd_selectall cmd_switchdocumentdirection cmd_switchtextdirection cmd_textzoomenlarge cmd_textzoomreduce cmd_textzoomreset cmd_undo cmd_viewcomponentbar cmd_viewlink
toolbar cmd_viewlink
toolbar_false cmd_viewlink
toolbar_maybe cmd_viewlink
toolbar_true cmd_viewnavbar cmd_viewpersonal
toolbar cmd_viewtaskbar cmd_zoomwindow thanks for help of joe.user0 in compiling: http://readlist.com/lists/mozilla.or...l/3/15261.html .
firstPermanentChild - Archive of obsolete content
« xul reference firstpermanentchild not in seamonkey 1.x type: element the first permanent child of the
toolbar.
... a permanent child is one that is not customizable and remains on the
toolbar.
... items that are placed directly inside the
toolbar without being in the
toolbarpalette are permanent.
lastPermanentChild - Archive of obsolete content
« xul reference lastpermanentchild not in seamonkey 1.x type: element the last permanent child of the
toolbar.
... a permanent child is one that is not customizable and remains on the
toolbar.
... items that are placed directly inside the
toolbar without being in the
toolbarpalette are permanent.
toolboxid - Archive of obsolete content
« xul reference toolboxid type: string the id of the toolbox this
toolbar is a member of.
... this will either be the toolbox's parent (if it's in a toolbox), or, if the
toolbar is an external
toolbar (that is, one not contained in a toolbox), the id of the toolbox it should be considered to be part of.
... this makes it possible to have
toolbars that are not contained within toolboxes, such as the add-on bar.
Broadcasters and Observers - Archive of obsolete content
we would need to disable the back command on the menu, the back button on the
toolbar, the keyboard shortcut (alt+left for example) and any back commands on popup menus.
...in the former case, menu items and
toolbar buttons would need to be disabled when there was no page to go back to, or no text to cut or delete.
...below, some additional observers are defined: <broadcaster id="offline_command" label="offline" accesskey="f"/> <keyset> <key id="goonline_key" observes="offline_command" modifiers="accel" key="o"/> </keyset> <menuitem id="offline_menuitem" observes="offline_command"/> <
toolbarbutton id="offline_
toolbarbutton" observes="offline_command"/> in this example, both the label and the accesskey will be forwarded from the broadcaster to the key, menu item and the
toolbar button.
Content Panels - Archive of obsolete content
iframe example example 1 : source view <toolbox> <
toolbar id="nav-
toolbar"> <
toolbarbutton label="back" /> <
toolbarbutton label="forward" /> <textbox id="urlfield" /> </
toolbar> </toolbox> <iframe id="content-body" src="http://www.mozilla.org/index.html" flex="1" /> the example here has created a very simple interface for a web browser.
...a back button, a forward button and a field for typing is urls has been added to the only
toolbar (we'll learn about
toolbar in a later section).
...you might note that a mozilla browser window has xul content for the
toolbars and statusbar and so forth with a tabbrowser forming the main area.
Introduction - Archive of obsolete content
some elements that can be created are: input controls such as textboxes and checkboxes
toolbars with buttons or other content menus on a menu bar or pop up menus tabbed dialogs trees for hierarchical or tabular information keyboard shortcuts the displayed content can be created from the contents of a xul file or with data from a datasource.
... there are several ways you can use xul: firefox extension an extension adds functionality to the browser itself, often in the form of extra
toolbars, context menus, or customizations to the browser's user interface.
...xul is fairly similar in firefox and to other browsers, although it has some specific differences such as support for customizable
toolbars.
Writing Skinnable XUL and CSS - Archive of obsolete content
example 1: the navigator package has a personal
toolbar with popup menu buttons.
... the colors for the
toolbar and buttons should be drawn from global by placingclass attributes on the appropriate elements in the xul.
...for either the personal
toolbar headers or for the menu buttons' borders.
XUL Reference - Archive of obsolete content
istitem row rows rule scale script scrollbar scrollbox scrollcorner separator spacer spinbuttons splitter stack statusbar statusbarpanel stringbundle stringbundleset tab tabbrowser (firefox-only starting with firefox 3/gecko 1.9) tabbox tabpanel tabpanels tabs template textnode textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker titlebar
toolbar toolbarbutton
toolbargrippy
toolbaritem
toolbarpalette
toolbarseparator
toolbarset
toolbarspacer
toolbarspring toolbox tooltip tree treecell treechildren treecol treecols treeitem treerow treeseparator triple vbox where window wizard wizardpage categorical list of all xul elements « xul reference « windows window wizard wizardpage titlebar window structure...
... --- menus and popups ---
toolbars
toolbar toolbarbutton
toolbargrippy
toolbaritem
toolbarpallete
toolbarseperator
toolbarspring tabs and grouping tab tabbox tabpanel tabpanels tabs controls --- text and images label caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset
toolbar toolbarbutton
toolbargrippy
toolbaritem
toolbarpalette
toolbarseparator ...
...
toolbarset
toolbarspacer
toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker datepicker menulist progressmeter radio radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker description label image listbox listitem listcell listcol listcols listhead listheader richlistbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck stack grid columns column rows row scrollbox action assign binding bindings conditions content member param query queryset rule template textnode triple where script commandset command broadcaster broadcasterset observes key ...
MacFAQ - Archive of obsolete content
to enable the mac "about" menu make sure that you use "aboutname" as the id for your menu item to enable the mac "preferences" menu make sure that you use "menu_preferences" as the id for your options/preferences menu item
toolbars mac windows have a small "jelly bean" button in the top right corner.
... this button is used to show/hide the
toolbar.
... the toolkit will automatically enable this behavior if you add class="chromeclass-
toolbar" to your <
toolbar> element.
L10n testing with xcode
select the client project in the left pane and choose editor > import localizations from the
toolbar and select your localized xliff file.
... choose product > scheme > edit scheme from the
toolbar menu.
... in the ios simulator, press the home button from the hardware
toolbar menu.
Localizing with Pontoon
and there it is, opened inside pontoon: main
toolbar as you can see, most of the interface is taken by the website being translated.
... only the
toolbar on top belongs to pontoon, containing the following items (from left to right): list of strings opens a sidebar with a list of all strings to localize.
...by clicking on the hamburger icon in the main
toolbar, a list of all strings and available translations will open in the sidebar.
Scroll-linked effects
below are a couple of examples of effects that would not work well with asynchronous scrolling, along with equivalent versions that would work well: example 1: sticky positioning here is an implementation of a sticky-positioning effect, where the "
toolbar" div will stick to the top of the screen as you scroll down.
... <body style="height: 5000px" onscroll="document.getelementbyid('
toolbar').style.top = math.max(100, window.scrolly) + 'px'"> <div id="
toolbar" style="position: absolute; top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this implementation of sticky positioning relies on the scroll event listener to reposition the "
toolbar" div.
...one way to implement this without the scroll event listener is to use the css property designed for this purpose: <body style="height: 5000px"> <div id="
toolbar" style="position: sticky; top: 0px; margin-top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this version works well with asynchronous scrolling because position of the "
toolbar" div is updated by the browser as the user scrolls.
Preferences system
usage in xulrunner applications when calling opendialog() to open a preferences dialog, "
toolbar" should be included in the features string.
... not using "
toolbar" will cause the preferences dialog to only display one preference pane.
... example: var features = "chrome,titlebar,
toolbar,centerscreen,modal"; window.opendialog(url, "preferences", features); bugzilla the component for bugs in the preferences bindings (but not in firefox/thunderbird options ui) is toolkit:preferences (file a bug list open bugs) ...
McCoy
simply click the "create"
toolbar button or select "create key" from the "keys" menu.
...the simplest way to do this is to select the key then click the install
toolbar button.
...simply select the key you originally added to the add-on's install.rdf, then click the "sign"
toolbar button, select your update.rdf file and the data in it will be signed.
Gecko Roles
role_
toolbar represents a
toolbar, which is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features.
... role_splitbutton represents a button on a
toolbar that has a drop-down list icon directly adjacent to the button.
... role_editbar an editable text object in a
toolbar.
Places utilities for JavaScript
toolbarfolderid the bookmarks
toolbar.
...this is used when visiting pages from the bookmarks menu, personal
toolbar, and bookmarks from within the places organizer.
... getmostrecentbookmarkforuri(auri) getmostrecentfolderforfeeduri() getmostrecentfolderforfeeduri(auri) geturlsforcontainernode() geturlsforcontainernode(anode) opencontainernodeintabs() opencontainerintabs(anode, aevent) openurinodesintabs() openurinodesintabs(anodes, aevent) createmenuitemfornode() helper for the
toolbar and menu views.
Demo Addon
how to use after installing the demo add-on in thunderbird, right click on the
toolbar and choose "customize".
... drag the "demo" button into the
toolbar.
...the
toolbar button and its functionality are defined in overlay.xul and overlay.js.
Preferences System
usage in xulrunner applications when calling opendialog() to open a preferences dialog, "
toolbar" should be included in the features string.
... not using "
toolbar" will cause the preferences dialog to only display one preference pane.
... example: var features = "chrome,titlebar,
toolbar,centerscreen,modal"; window.opendialog(url, "preferences", features); bugzilla the component for bugs in the preferences bindings (but not in firefox/thunderbird options ui) is toolkit:preferences (file a bug list open bugs) ...
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.
...
toolbar at the top of the right-hand pane, there's a
toolbar: the
toolbar consists of: four buttons to control the debugger's movement through the script: play/pause (f8): pauses or resumes execution of the script you're debugging.
... breakpoints list under the
toolbar, you'll see all the breakpoints you've set.
Aggregate view - Firefox Developer Tools
's get an allocation trace: open the memory tool check "record call stacks" load https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html take a snapshot select "view/aggregate" select "group by/call stack" you should see something like this: this is telling us that 93% of the total heap snapshot was allocated in functions called from "alloc.js", line 35 (our initial create
toolbars() call).
... so in the example above, we can see that we made 4002 allocations, accounting for 89% of the total heap, in create
toolbarbutton(), at alloc.js line 9, position 23: that is, the exact point where we create the <span> elements.
... let's see what the example looks like when we select "inverted call stack": now at the top we can immediately see the create
toolbarbutton() call accounting for 89% of the heap usage in our page.
Console messages - Firefox Developer Tools
this is not shown by default: you can opt to see timestamps by selecting show timestamps in the console settings menu (gear icon in the console
toolbar).
...you can enable them by clicking the "css" button in the
toolbar and selecting "reflows".
... filtering and searching filtering by category you can use the
toolbar along the top to constrain the results displayed.
The JavaScript input interpreter - Firefox Developer Tools
you get autocomplete suggestions for array elements, as well: you can enable or disable autocompletion via the settings ("gear") menu in the web console
toolbar.
... you can enable or disable instant evaluation via the settings ("gear") menu in the web console
toolbar.
... in multi-line mode, use the ⋀ and ⋁ icons in the editing panel's
toolbar.
Text labels and names - Accessibility
"dino-select">choose a dinosaur:</label> <select id="dino-select"> <optgroup label="theropods"> <option>tyrannosaurus</option> <option>velociraptor</option> <option>deinonychus</option> </optgroup> <optgroup label="sauropods"> <option>diplodocus</option> <option>saltasaurus</option> <option>apatosaurus</option> </optgroup> </select>
toolbars must be labeled when there is more than one
toolbar if you define more than one
toolbar in a web application using the aria
toolbar role, you must use the aria-label attribute to label each one so that it can be described by assistive technology.
... it is a good practice to label a
toolbar, even if there is only one per page.
... see also w3c aria
toolbar example related wcag success criteria 1.1.1 non-text content (a) all non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed in the above link.
Rich-Text Editing in Mozilla - Developer guides
odoc.innerhtml = odoc.innertext; } else { ocontent = document.createrange(); ocontent.selectnodecontents(odoc.firstchild); odoc.innerhtml = ocontent.tostring(); } odoc.contenteditable = true; } odoc.focus(); } function printdoc() { if (!validatemode()) { return; } var oprntwin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,
toolbar=no,location=no,scrollbars=yes"); oprntwin.document.open(); oprntwin.document.write("<!doctype html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #
toolbar1 select { font-size:10px; } #textbox { width: 540px; ...
...adding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <input type="hidden" name="mydoc"> <div id="
toolbar1"> <select onchange="formatdoc('formatblock',this[this.selectedindex].value);this.selectedindex=0;"> <option selected>- formatting -</option> <option value="h1">title 1 <h1></option> <option value="h2">title 2 <h2></option> <option value="h3">title 3 <h3></option> <option value="h4">title 4 <h4></option> <option value="h5">title 5 <h5></option> <option value="h6">sub...
...on value="blue">blue</option> <option value="green">green</option> <option value="black">black</option> </select> <select onchange="formatdoc('backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </div> <div id="
toolbar2"> <img class="intlink" title="clean" onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrx...
Making content editable - Developer guides
odoc.innerhtml = odoc.innertext; } else { ocontent = document.createrange(); ocontent.selectnodecontents(odoc.firstchild); odoc.innerhtml = ocontent.tostring(); } odoc.contenteditable = true; } odoc.focus(); } function printdoc() { if (!validatemode()) { return; } var oprntwin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,
toolbar=no,location=no,scrollbars=yes"); oprntwin.document.open(); oprntwin.document.write("<!doctype html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #
toolbar1 select { font-size:10px; } #textbox { width: 540px; ...
...adding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <input type="hidden" name="mydoc"> <div id="
toolbar1"> <select onchange="formatdoc('formatblock',this[this.selectedindex].value);this.selectedindex=0;"> <option selected>- formatting -</option> <option value="h1">title 1 <h1></option> <option value="h2">title 2 <h2></option> <option value="h3">title 3 <h3></option> <option value="h4">title 4 <h4></option> <option value="h5">title 5 <h5></option> <option value="h6">sub...
...on value="blue">blue</option> <option value="green">green</option> <option value="black">black</option> </select> <select onchange="formatdoc('backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </div> <div id="
toolbar2"> <img class="intlink" title="clean" onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrx...
XUL Migration Guide - Archive of obsolete content
in this way an extension can integrate its user interface into the browser: for example, adding menu items, buttons, and
toolbars.
...for example, action buttons appear by default in the main firefox
toolbar (although users may relocate them by
toolbar customization) because it makes for a better user experience for add-ons to expose their interfaces in a consistent way.
widget - Archive of obsolete content
in particular, for a simple button, try the action button or toggle button apis, and for a more complex widget try the
toolbar or sidebar apis.
...for example, in the future firefox may allow the user to drag widgets from the add-on bar to other
toolbars.
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
listing 4 shows an example that deletes the second child element of the element with the "
toolbar" id, adds a new button element as a substitute, and sets a label attribute.
... listing 4: an example manipulation using the dom var bar = document.getelementbyid('
toolbar'); bar.removechild(bar.childnodes[1]); bar.appendchild(document.createelement('button')); bar.lastchild.setattribute('label', 'hello!'); « previousnext » ...
Adding Events and Commands - Archive of obsolete content
for example, if you have a customizable
toolbar, you can't be sure if a given button is present or not, so it's easier to use a broadcaster.
...you can create an extension that adds
toolbar buttons, statusbar buttons and menu items, all with equivalent behavior, and without having to repeat lots of xul code in the process.
Extensions - Archive of obsolete content
extensions typically overlay the host application's ui to add
toolbar buttons, menus and other features.
...prism does have a few ui elements, such as a toolbox,
toolbar, menubar, popup menus, statusbar and a container for the browser.
customindex - Archive of obsolete content
« xul reference home customindex not in seamonkey 1.x type: integer this value is the index of the
toolbar in the list of the custom
toolbars.
... the value is updated automatically by the
toolbar customization dialog.
defaultset - Archive of obsolete content
« xul reference home defaultset not in seamonkey 1.x type: comma-separated list of item ids the default set of displayed items on the
toolbar.
... this should be set to a comma-separated list of item ids from the
toolbarpalette.
grippytooltiptext - Archive of obsolete content
« xul reference home grippytooltiptext seamonkey only type: string the text to appear on the tooltip for the
toolbar's grippy when the
toolbar is collapsed.
... this would be used to label the grippy so that the user knows which
toolbar it represents.
iconsize - Archive of obsolete content
« xul reference home iconsize type: string indicates whether the
toolbar should display large icons or small icons; this should be the string "large" or "small", respectively.
... these can vary from one
toolbar to another within a given toolbox, whose iconsize attribute defines the default for all
toolbars that don't specify an icon size.
Panels - Archive of obsolete content
only buttons (and
toolbarbuttons) have this automatic behaviour which opens the popup when pressed.
...for instance, using the search panel example above, we could add a button which closes the panel when pressed: <script> function dosearch() { document.getelementbyid("search-panel").hidepopup(); } </script> <
toolbarbutton label="search" type="panel"> <panel id="search-panel" position="after_start"> <textbox id="search"/> <button label="search" oncommand="dosearch();"/> </panel> </
toolbarbutton> in this example, the dosearch() function is called when the "search" button is pressed.
currentSet - Archive of obsolete content
« xul reference currentset not in seamonkey 1.x type: comma-separated list of strings holds a comma-separated list of the ids of the items currently on the
toolbar.
...an empty
toolbar has a currentset value of "__empty".
Property - Archive of obsolete content
dth collapsed color columns command commandmanager completedefaultindex container contentdocument contentprincipal contenttitle contentview contentvieweredit contentviewerfile contentwindow contextmenu control controller controllers crop current currentindex currentitem currentnotification currentpage currentpane currentset currenturi custom
toolbarcount database datasources date dateleadingzero datevalue decimalplaces decimalsymbol defaultbutton defaultvalue description dir disableautocomplete disableautocomplete disableautoselect disabled disablekeynavigation dlgtype docshell documentcharsetinfo editable editingcolumn editingrow editingsession editor editortype emptytext deprecated since...
...tems selectedpanel selectedtab selectionend selectionstart selstyle seltype sessioncount sessionhistory showcommentcolumn showpopup size smoothscroll spinbuttons src state statusbar statustext stringbundle strings style subject suppressonselect tabcontainer tabindex tabs tabscrolling tabpanels tag textlength textvalue timeout title
toolbarname
toolbarset tooltip tooltiptext top treeboxobject type uri useraction value valuenumber view webbrowserefind webnavigation webprogress width wizardpages wraparound year yearleadingzero related dom element properties dom:element.attributes dom:element.baseuri dom:element.childelementcount dom:element.childnodes dom:element.children dom:element...
Special Condition Tests - Archive of obsolete content
for example, the bookmarks
toolbar in a web browser might display buttons at the first level, but menus and submenus for content below that.
...for the bookmarks
toolbar, the outer content is inserted into an <hbox>, but at lower levels, the content will be inserted into a <menu> in case you aren't clear, the tag that must match for the outer iteration is the root element, the one with the datasources attribute on it.
Adding Style Sheets - Archive of obsolete content
toolbar > button matches all buttons that are directly inside
toolbar elements.
...
toolbar > button.bigbuttons matches all button elements with a class of bigbuttons that are directly inside
toolbar elements.
Localization - Archive of obsolete content
-popup"> <menuitem label="&cutcmd.label;" accesskey="&cutcmd.accesskey;" key="cut_cmd"/> <menuitem label="©cmd.label;" accesskey="©cmd.accesskey;" key="copy_cmd"/> <menuitem label="&pastecmd.label;" accesskey="&pastecmd.accesskey;" key="paste_cmd" disabled="true"/> </menupopup> </menu> </menubar> <
toolbar id="findfiles-
toolbar"> <
toolbarbutton id="opensearch" label="&opencmd
toolbar.label;"/> <
toolbarbutton id="savesearch" label="&savecmd
toolbar.label;"/> </
toolbar> </toolbox> <tabbox> <tabs> <tab label="&searchtab;" selected="true"/> <tab label="&optionstab;"/> </tabs> <tabpanels> <tabpanel id="searchpanel" orient="vertical" context="editpopup"> <description> ...
...!entity opencmd.accesskey "o"> <!entity savecmd.accesskey "s"> <!entity closecmd.accesskey "c"> <!entity cutcmd.label "cut"> <!entity copycmd.label "copy"> <!entity pastecmd.label "paste"> <!entity cutcmd.accesskey "t"> <!entity copycmd.accesskey "c"> <!entity pastecmd.accesskey "p"> <!entity cutcmd.commandkey "x"> <!entity copycmd.commandkey "c"> <!entity pastecmd.commandkey "v"> <!entity opencmd
toolbar.label "open"> <!entity savecmd
toolbar.label "save"> <!entity searchtab "search"> <!entity optionstab "options"> <!entity finddescription "enter your search criteria below and select the find button to begin the search."> <!entity findcriteria "search criteria"> <!entity type.name "name"> <!entity type.size "size"> <!entity type.date "date modified"> <!entity mode.is "is"> <!entity mode.isnot "is ...
Persistent Data - Archive of obsolete content
for example, the window should remember which
toolbars are collapsed even after the user exits.
...you will typically want to save
toolbar states, window positions and whether certain panels are displayed or not, but you can save almost anything.
Using Remote XUL - Archive of obsolete content
it contains elements for all common ui widgets (menus, buttons,
toolbars, etc.) and many sophisticated ones (trees, browsers, color pickers).
... xul's navigation-oriented widgets, like
toolbars, menus, and trees, are a better way to provide web site navigation because they can fit a lot of navigation into a small space, render quickly, and work well.
autohide - Archive of obsolete content
« xul reference home autohide type: boolean when set to true, the
toolbar will be invisible unless the alt key is pressed by the user.
... when set to false, the default, the
toolbar is visible.
Debugging a XULRunner Application - Archive of obsolete content
add ui to open venkman to your window (it could be a menu item or a
toolbar button).
... function toopenwindowbytype is not defined if you get an error that "function toopenwindowbytype is not defined" you may add the following function to your scripts (doesn't seem to be in the venkman overlay): function toopenwindowbytype(intype, uri) { var winopts = "chrome,extrachrome,menubar,resizable,scrollbars,status,
toolbar"; window.open(uri, "_blank", winopts); } i can't see my pages, functions ...
What XULRunner Provides - Archive of obsolete content
the following features are either already implemented or planned: gecko features xpcom networking gecko rendering engine dom editing and transaction support (no ui) cryptography xbl (xbl2 planned) xul svg xslt xml extras (xmlhttprequest, domparser, etc.) web services (soap) auto-update support (not yet complete) type ahead find
toolbar history implementation (the places implementation in the 1.9 cycle) accessibility support ipc services for communication between gecko-based apps (not yet complete) storage/sqlite interfaces user interface features the following user interface is supplied by xulrunner, and may be overridden by embedders under certain circumstances: apis and user interface for installing, uninstalling,...
... extension manager file picker (uses native os filepicker as appropriate) find
toolbar helper app dialog/ui security ui (maintenance of ssl keychains, etc) embedding apis the following embedding apis are provided by xulrunner: cross-platform embedding (xre_initembedding) javaxpcom embedding gtkmozembed (linux only) activex control (windows only) (not yet complete) obsolete since gecko 7.0 nsview-based-widget (mac os x only) (not yet complete) the "maybe" list the following features have been discussed and may be included if developer time permits and code size is controlled: ldap support spellchecking support (with or without dictionaries provided) see bug 285977 core support for profile roaming (...
Create Your Own Firefox Background Theme - Archive of obsolete content
creating a theme header image the header image is displayed as the background of the top of the browser window, nestling in behind the
toolbars, address bar, search bar and the tab strip.
... firefox may reveal more of the lower portion of the image if another
toolbar or other ui element is added to the top of the window.
Making sure your theme works with RTL locales - Archive of obsolete content
example
toolbar[iconsize="large"][mode="icons"] #back-button { -moz-image-region: rect(0px 396px 34px 360px); }
toolbar[iconsize="large"][mode="icons"] #back-button:-moz-locale-dir(rtl) { -moz-image-region: rect(0px 516px 34px 480px); } this specifies the default, left-to-right version of the button, then offers an override if the user's interface is being rendered in right-to-left mode.
...
toolbar[iconsize="large"][mode="icons"] #back-button { -moz-image-region: rect(0px 398px 34px 360px); }
toolbar[iconsize="large"][mode="icons"] #back-button[chromedir="rtl"] { -moz-image-region: rect(0px 516px 34px 478px); } this way, if chromedir is "rtl", the second rule will override the first, and the theme will work in rtl.
RDF in Mozilla FAQ - Archive of obsolete content
if (bookmarks.hasassertion( rdf.getresource("http://home.netscape.com/nc-rdf#bookmarksroot"), rdf.getresource("http://home.netscape.com/nc-rdf#child"), rdf.getresource("http://home.netscape.com/nc-rdf#personal
toolbarfolder"), true) { // ...
...for example, mozilla mail/news reveals the folder hierarchy in the
toolbar, the "folder pane", in several menus, and in some of the dialogs.
Gecko FAQ - Gecko Redirect 1
in other words, gecko will not only be displaying the document's content, but it will also be painting the scrollbars,
toolbars, and menus on the screen as well.
...however, gecko does not package all of these components alongside other interface modules in a coherent, user-friendly application (including menus,
toolbars, etc.), such as firefox.
Accessibility API cross-reference
editable by default, apart from <input type=text>, or those with a contenteditable attribute title or caption of window titlebar n/a n/a <title> a button that can be pushed in or out, but doesn't provide separate indicator of checked state n/a toggle_button toggle_button button with aria-pressed attribute a
toolbar toolbar tool_bar tool_bar
toolbar the little piece of help text that comes up when you put your mouse over something tooltip tool_tip tool_tip tooltip a grid whose rows can be expanded and collapsed in the same manner as for a tree.
...ui controls, see armed focused focused focused available to javascript as document.activeelement appearance has changed for mouseover hottracked n/a n/a especially used for sliders, scrollbars,
toolbars, tablists...
Lightweight themes
creating a theme header image the header image is displayed as the background of the top of the browser window, nestling in behind the
toolbars, address bar, search bar and the tab strip.
... firefox may reveal more of the lower portion of the image if another
toolbar or other ui element is added to the top of the window.
Chrome registration
toolbars, menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome.
...the providers work together to supply a complete set of chrome for a particular window, from the images on the
toolbar buttons to the files that describe the text, content, and appearance of the window itself.
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-
toolbar-field-brighttext]: dark address bar and searchbar.
Application Translation with Mercurial
you installed scrapbook earlier, now open it in firefox either by calling it from the firefox menu bar (press the alt key to show it if necessary) using "view" > "sidebar" > "scrapbook" or by clicking its
toolbar button which you likely have to add by
toolbar customization if you didn't do this before.
... press the f5 key or click the reload button in winmerge's
toolbar to re-compare the files.
Productization guide
for example, putting one sample news feed on the bookmarks
toolbar in new profiles in firefox helps in learning about the live bookmarks.
... including a couple of search engines instead of one in the search
toolbar can help users understand that they can add as many plug-ins as they wish.
Notes on TLS - SSL 3.0 Intolerant Servers
to do so, add http://
toolbar.netcraft.com/site_report?url= to the beginning of the url.
... for instance, to check https://bugzilla.mozilla.org/, then visit http://
toolbar.netcraft.com/site_rep...a.mozilla.org/.
Manipulating bookmarks using Places
you can easily change this code to insert the new folder into the bookmarks
toolbar by changing bookmarksmenufolder to another folder attribute.
... var ios = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri("http://mozilla.com/", null, null); if (!bmsvc.isbookmarked(uri)) { bmsvc.insertbookmark(bmsvc.
toolbarfolder, uri, bmsvc.default_index, "mozilla"); } this example looks to see if the user already has a bookmark for the mozilla web site, and, if not, creates one, adding it to the user's bookmarks
toolbar.
nsIDOMWindowInternal
toolbar nsidombarprop readonly: returns the
toolbar object, whose visibility can be toggled in the window.
... directories nsidombarprop readonly: returns the window directories
toolbar object.
nsIFaviconService
potentially, many pages could be referencing the favicon and they could be visible in a history view or
toolbar.
...potentially, many pages could be referencing the favicon and they could be visible in a history view or
toolbar.
nsINavBookmarksService
note: renamed from tagroot in gecko 1.9
toolbarfolder long long the item id of the personal
toolbar folder.
...note: renamed from
toolbarroot in gecko 1.9 unfiledbookmarksfolder long long the item id of the unfiled bookmarks folder.
nsIWebBrowserChrome
chrome_
toolbar 32 value for the chromeflags attribute.
... chrome_personal_
toolbar 256 value for the chromeflags attribute.
Index
xul is an xml grammar that provides user interface widgets like buttons, menus,
toolbars, trees etc.
... 100 add
toolbar button example xul overlay file: 101 create custom column thunderbird the article "creating a custom column" will get you well on the road to creating your own columns and populating them with custom data.
DOM allocation example - Firefox Developer Tools
it just contains a script that creates a large number of dom nodes: var
toolbarbuttoncount = 20; var
toolbarcount = 200; function getrandomint(min, max) { return math.floor(math.random() * (max - min + 1)) + min; } function create
toolbarbutton() { var
toolbarbutton = document.createelement("span");
toolbarbutton.classlist.add("
toolbarbutton"); // stop spidermonkey from sharing instances
toolbarbutton[getrandomint(0,5000)] = "foo"; return
toolbarbutton; } function create
toolbar() { var
toolbar = document.createelement("div"); // stop spidermonkey from sharing instan...
...ces
toolbar[getrandomint(0,5000)] = "foo"; for (var i = 0; i <
toolbarbuttoncount; i++) { var
toolbarbutton = create
toolbarbutton();
toolbar.appendchild(
toolbarbutton); } return
toolbar; } function create
toolbars() { var container = document.getelementbyid("container"); for (var i = 0; i <
toolbarcount; i++) { var
toolbar = create
toolbar(); container.appendchild(
toolbar); } } create
toolbars(); a simple pseudocode representation of how this code operates looks like this: create
toolbars() -> create
toolbar() // called 200 times, creates 1 div element each time -> create
toolbarbutton() // called 20 times per
toolbar, creates 1 span element each time in total, then, it creates 200 htmldivelement objects, and 4000 htmlspanelement objects.
Performance Analysis - Firefox Developer Tools
using the performance analysis tool to run the performance analysis tool click the stopwatch icon in the
toolbar.
... network monitor features the following articles cover different aspects of using the network monitor:
toolbar network request list network request details network traffic recording throttling ...
Throttling - Firefox Developer Tools
throttling the
toolbar includes a throttling dropdown, which allows you to throttle your network speed to emulate various different network speed conditions.
...bps 300 good 2g 450 kbps 150 kbps 150 regular 3g 750 kbps 250 kbps 100 good 3g 1.5 mbps 750 kbps 40 regular 4g/lte 4 mbps 3 mbps 20 dsl 2 mbps 1 mbps 5 wi-fi 30 mbps 15 mbps 2 network monitor features the following articles cover different aspects of using the network monitor:
toolbar network request list network request details network traffic recording performance analysis ...
Network monitor recording - Firefox Developer Tools
the button can be found at the far left of the main network monitor
toolbar, and looks like a typical pause button — .
... network monitor features the following articles cover different aspects of using the network monitor:
toolbar network request list network request details performance analysis throttling ...
Network Monitor - Firefox Developer Tools
click the wrench icon (), which is in the main
toolbar or under the hamburger menu (), then select "network".
... ui overview the ui is divided into four main pieces: the main screen contains the
toolbar, the network request list, and the network request details pane: the performance analysis view is a separate screen: working with the network monitor the following articles cover different aspects of using the network monitor:
toolbar network request list network request details network traffic recording performance analysis throttling ...
Examine and edit CSS - Firefox Developer Tools
for example: viewing and changing classes on an element with an element selected in the html pane, you can click the .cls button in the rules pane
toolbar, to display the classes defined on that element.
... you can add a class to the element by typing a name in the add new class field below the rules
toolbar.
How to - Firefox Developer Tools
open the performance tools to open the performance tools: press shift + f5 select "performance" from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on os x) select "performance" from tools button, in the
toolbar, if you have one: record a profile to start a new recording, press the stopwatch icon in the recordings pane.
... select a tool to switch between the waterfall, call tree, and flame chart tools, use the buttons in the
toolbar: configure markers displayed to control which markers are shown in the waterfall, use the button in the
toolbar: zoom in to zoom into a slice of the recording, select that slice in the recording overview: ...
UI Tour - Firefox Developer Tools
the performance tool's ui consists of 4 main pieces:
toolbar recordings pane recording overview details pane, which may contain any one of: waterfall call tree flame chart
toolbar the
toolbar contains buttons to: start and stop a recording import a recording you previously saved clear the recordings pane.
...to switch to a different tool, use the buttons in the
toolbar.
Responsive Design Mode - Firefox Developer Tools
from the developer tools toolbox: press the responsive design mode button in the toolbox's
toolbar: from the keyboard: press ctrl + shift + m (or cmd + opt + m on macos).
...(note that when touch simulation is enabled, this
toolbar icon is blue; when simulation is disabled, it is black.
Settings - Firefox Developer Tools
available toolbox buttons this group of checkboxes determines which tools get an icon in the toolbox's
toolbar.
... as of firefox 62, if the option to "select an iframe as the currently targeted document" is checked, the icon will appear in the
toolbar while the settings tab is displayed, even if the current page doesn't include any iframes.
Managing screen orientation - Web APIs
let's have an example with the following html code <ul id="
toolbar"> <li>a</li> <li>b</li> <li>c</li> </ul> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...m monospace; margin : 0; padding: .5em; -moz-box-sizing: border-box; box-sizing: border-box; background: black; } li { display: inline-block; margin : 0; padding: 0.5em; background: white; } once we have some common styles we can start defining a special case for the orientation /* for portrait, we want the tool bar on top */ @media screen and (orientation: portrait) { #
toolbar { width: 100%; } } /* for landscape, we want the tool bar stick on the left */ @media screen and (orientation: landscape) { #
toolbar { position: fixed; width: 2.65em; height: 100%; } p { margin-left: 2em; } li + li { margin-top: .5em; } } and here's the result portrait landscape note: the orientat...
HTMLImageElement.alt - Web APIs
for example, in the snippet of html below, a
toolbar which uses icon images as link labels provides alt attributes for each giving a textual label to use instead of the icon when the icons cannot be or are intentionally not used.
... <li class="
toolbar" aria-role="
toolbar"> <a href="songs.html" aria-role="button"><img src="songicon.svg" alt="songs"</a> <a href="albums.html" aria-role="button"><img src="albumicon.svg" alt="albums"</a> <a href="artists.html" aria-role="button"><img src="artisticon.svg" alt="artists"</a> <a href="playlists.html" aria-role="button"><img src="playlisticon.svg" alt="playlists"</a> </li> images containining diagrams or maps when an image contains information presented as a diagram, chart, graph, or map, the alt text should provide the same information, at least in summary form.
Index - Web APIs
4912 window.directories api, html dom, needscompattable, needsexample, needsmarkupwork, needsspectable, obsolete, property, reference, window returned the window personalbar
toolbar object.
... 5018 window.
toolbar api, html dom, needsexample, needsmarkupwork, property, reference, window the window.
toolbar property returns the
toolbar object, whose visibility can be toggled in the window.
ARIA Test Cases - Accessibility
sults: 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 - - - -
toolbar example to test aria live region and
toolbar dojo nightly build expected at behavior: (mz) upon initial focus, if the
toolbar has a label, screen reader should speak it, followed by the role and the label and role of the current
toolbar item.
... as the controls within the
toolbar are navigated, the newly focused item should be announced, but the label or role of the
toolbar itself should not be repeated.
Mozilla CSS extensions - CSS: Cascading Style Sheets
-moz-initial -moz-appearance button button-arrow-down button-arrow-next button-arrow-previous button-arrow-up button-bevel checkbox checkbox-container checkbox-label checkmenuitem dialog groupbox listbox menuarrow menucheckbox menuimage menuitem menuitemtext menulist menulist-button menulist-text menulist-textfield menupopup menuradio menuseparator -moz-mac-unified-
toolbar -moz-win-borderless-glass -moz-win-browsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-button-box-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-c...
...button-down scrollbarbutton-left scrollbarbutton-right scrollbarbutton-up scrollbar-small scrollbarthumb-horizontal scrollbarthumb-vertical scrollbartrack-horizontal scrollbartrack-vertical separator spinner spinner-downbutton spinner-textfield spinner-upbutton statusbar statusbarpanel tab tabpanels tab-scroll-arrow-back tab-scroll-arrow-forward textfield textfield-multiline
toolbar toolbarbutton-dropdown toolbox tooltip treeheadercell treeheadersortarrow treeitem treetwisty treetwistyopen treeview window background-image gradients -moz-linear-gradient -moz-radial-gradient elements -moz-element sub-images -moz-image-rect() border-color -moz-use-text-colorobsolete since gecko 52 (removed in bug 1306...
addon-page - Archive of obsolete content
for pages like this, navigational elements such as the awesome bar, search bar, or bookmarks
toolbar are not usually relevant and distract from the content you are presenting.
Developing for Firefox Mobile - Archive of obsolete content
tabs/utils supported test/assert supported test/harness supported test/httpd supported test/runner supported test/utils supported ui/button/action not supported ui/button/toggle not supported ui/frame not supported ui/id supported ui/sidebar not supported ui/
toolbar not supported util/array supported util/collection supported util/deprecate supported util/list supported util/match-pattern supported util/object supported util/uuid supported window/utils supported ...
Code snippets - Archive of obsolete content
window code opening and manipulating windows
toolbar toolbar related code sidebar sidebar related code forms forms related code xml code used to parse, write, manipulate, etc.
Hiding browser chrome - Archive of obsolete content
there are times in which an extension may find it useful to hide browser chrome (that is,
toolbars, the location bar, and so forth), in order to reduce clutter when presenting a particular user interface.
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...
Inline options - Archive of obsolete content
<setting pref="extensions.throbberrestored.showtxton
toolbar" title="show text on
toolbar button" type="bool" oninputchanged="alert('new value is = ' + this.value); this.style.backgroundcolor='red';"> if labels on other
toolbar buttons are visible (like by using add-on "classic theme restorer") then show label on throbber
toolbar button </setting> note in order for the oninputchanged to execute, the setting must have a pref attribute, otherwi...
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
["span", { class: "stuff" }, "stuff"]]], document, nodes)); alert(nodes.link); function addentrytopopup(menupopup, doc, chromewindow) { var newitem = doc.createelement("menuitem"); newitem.setattribute("value", "testvalue"); newitem.setattribute("label", "another popup menu item"); menupopup.appendchild(newitem); }; var jsontemplatebtn = ["xul:
toolbarbutton", { id: "mytestbutton", class: "
toolbarbutton-1", type: "menu", label: "test button label", tooltiptext: "test button tooltip", removable: true, key: "mytestbutton123" }, [ "menupopup", { onpopupshowing: function(event) { addentrytopopup(this, document, win...
XUL School Tutorial - Archive of obsolete content
introduction introduction getting started with firefox extensions the essentials of an extension setting up a development environment javascript object management basic functionality adding menus and submenus adding
toolbars and
toolbar buttons adding events and commands adding windows and dialogs adding sidebars user notifications and alerts intermediate functionality intercepting page loads connecting to remote content handling preferences local storage advanced topics the box model xpcom objects observer notifications custom xul elements with xbl mozilla documentation r...
Tabbed browser - Archive of obsolete content
if your code is executed from a firefox browser.xul overlay (for example, it is a
toolbar button or menu click handler), you can access the current window with the window pre-defined variable.
Firefox addons developer guide - Archive of obsolete content
are misspelled: s/nsl/nsi; talk about fuel; titles of chapters and sub-headings should have caps for first letter of each word; we should add a part about bad and good practices (leaks, global scopes, ...); add external resources (mozdev.org/community/books.html); add to chapter 3 or 5 more informations about overlay (how to overlay some interesting part of firefox like status bar, menus or
toolbar) add previous/next at the end of each chapter questions: opensource appendix.
Finding the code to modify - Archive of obsolete content
inspectorwidget the inspectorwidget extension adds a
toolbar button and context menus for invoking the dom inspector (domi) for either chrome or content elements.thus this makes it possible to save all the above dom inspector user interface diggings.
Making it into a static overlay - Archive of obsolete content
<?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> <?xul-overlay href="chrome://navigator/content/navigatoroverlay.xul"?> <?xul-overlay href="chrome://navigator/content/navextraoverlay.xul"?> <?xul-overlay href="chrome://navigator/content/link
toolbaroverlay.xul"?> <?xul-overlay href="chrome://navigator/content/tinderstatusoverlay.xul"?> <?xul-overlay href="chrome://communicator/content/conten...extoverlay.xul"?> <?xul-overlay href="chrome://communicator/content/sideba...baroverlay.xul"?> <?xul-overlay href="chrome://communicator/content/communicatoroverlay.xul"?> <?xul-overlay href="chrome://communicator/content/bookma...rksoverlay.xul"?> ..
Creating a Skin for Mozilla - Archive of obsolete content
organizing images adding an image to the right of a
toolbar jar file installer utility (provided by neil marshall) frequently asked questions links original document information author: neil marshall other contributors (suggestions/corrections): brent marshall, cdn (http://themes.mozdev.org), jp martin, boris zbarsky, asa dotzler, wesayso, david james, dan mauch last updated date: jan 5th, 2003 copyright information: copyright 2002-2003 n...
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 mech...
Makefile.mozextension.2 - Archive of obsolete content
real_install: $(cp) chrome/$(project).jar ~/.mozilla/default/32p27fdr.slt/chrome/ #################################### ###### define chrome_manifest content $(project) content/ overlay chrome://browser/content/browser.xul chrome://$(project)/content/overlay.xul locale $(project) en-us locale/ skin $(project) classic/1.0 skin/ style chrome://global/content/customize
toolbar.xul chrome://$(project)/skin/overlay.css endef export chrome_manifest chrome.manifest: @echo generating $(project)/chrome.manifest @echo "$$chrome_manifest" > $(project)/chrome.manifest ###### #firefox {ec8030f7-c20a-464f-9b0e-13a3a9e97384} #thunderbird {3550f703-e582-4d05-9a08-453d09bdfdc6} #nvu {136c295a-4a5a-41cf-bf24-5cee526720d5} #mozilla suite {86c18b42-e466-45a9-ae7a-9b95ba6f5640...
Plug-n-Hack Phase1 - Archive of obsolete content
security tool commands manifest an example commands manifest (for owasp zap) is: https://code.google.com/p/zap-extensions/source/browse/branches/beta/src/org/zaproxy/zap/extension/plugnhack/resource/service.json firefox ui in firefox the tool commands will be made available via the developer
toolbar (gcli) https://developer.mozilla.org/docs/tools/gcli a example of how the zap commands are currently displayed is: note that user specified parameters can be specified for commands, which can either be free text, a static pull down list of options or a dynamic list of options obtained from the tool on demand.
accesskey - Archive of obsolete content
« xul reference home attribute of: button, checkbox, caption, description, label, listitem, menu, menuitem, menulist, tab, radio,
toolbarbutton, textbox accesskey type: character this should be set to a character that is used as a shortcut key.
disablechrome - Archive of obsolete content
this is used to hide chrome when showing in-browser ui such as the about:addons page, and causes the
toolbars to be hidden, with only the tab strip (and, if currently displayed, the add-on bar) left showing.
type - Archive of obsolete content
see button.type browser.type colorpicker.type datepicker.type editor.type listcell.type listitem.type menuitem.type notification.type prefwindow.type query.type script.type textbox.type
toolbarbutton.type treecol.type ...
Attribute (XUL) - Archive of obsolete content
searchbutton searchsessions searchlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabscrolling targets template timeout title
toolbarname tooltip tooltiptext tooltiptextnew top type uri useraction validate value var visuallyselected wait-cursor width windowtype wrap wraparound ...
Deprecated and defunct markup - Archive of obsolete content
b>; 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>) <
toolbarpaletteitem> required to embed non-buttons in customisable
toolbars --neil 03 march 2011 <treebody> (old/e...
Methods - Archive of obsolete content
« xul reference home acceptdialog additemtoselection addpane addprogresslistener addsession addtab addtabsprogresslistener advance advanceselectedtab appendcustom
toolbar appendgroup appenditem appendnotification blur cancel canceldialog centerwindowonscreen checkadjacentelement clearresults clearselection click close collapse
toolbar contains decrease decreasepage docommand ensureelementisvisible ensureindexisvisible ensureselectedelementisvisible expand
toolbar extra1 extra2 focus getbrowseratindex getbrowserfordocument getbrowserfortab getbrowserindexfordocument getbutton getdefaultsession geteditor getelementsbyattribute getelementsbyattributens getformattedstring gethtmleditor getindexoffirstvi...
PopupEvents - Archive of obsolete content
<panel id="time-panel" onpopupshowing="this.lastchild.value = (new date()).tolocaleformat('%t')"> <label value="time:"/> <label id="time"/> </panel> <
toolbarbutton label="show time" popup="time-panel"/> you can prevent a menu or popup from appearing by calling the preventdefault method of the event from within a popupshowing listener.
Positioning - Archive of obsolete content
for a menupopup placed inside a menu, button or
toolbarbutton, the position attribute controls how the menupopup is anchored to the parent menu, button or
toolbarbutton.
accessibleType - Archive of obsolete content
1017 xultabbox 1018 xultabs 1019 xultext 101a xultextbox 101b xulthumb 101c xultree 101d xultreecolumns 101e xultreecolumnitem 101f xul
toolbar 1020 xul
toolbarseparator 1021 xultooltip 1022 xul
toolbarbutton 1023 ...
Providing Command-Line Options - Archive of obsolete content
* @param aargument an argument to pass to the window (may be null) */ function openwindow(achromeurispec, aargument) { services.ww.openwindow(null, achromeurispec, "_blank", "chrome,menubar,
toolbar,status,resizable,dialog=no", aargument); } // command line handler function commandlinehandler() { }; commandlinehandler.prototype = { classdescription: "myapphandler", // changeme: generate a unique id classid: components.id('{2991c315-b871-42cd-b33f-bfee4fcbf682}'), // changeme: change the type in the contractid to be unique to your application contractid: "@mozilla.
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 ...
More Menu Features - Archive of obsolete content
e search..." accesskey="s"/> <menuseparator/> <menuitem label="close" accesskey="c"/> </menupopup> </menu> <menu id="edit-menu" label="edit" accesskey="e"> <menupopup id="edit-popup"> <menuitem label="cut" accesskey="t"/> <menuitem label="copy" accesskey="c"/> <menuitem label="paste" accesskey="p" disabled="true"/> </menupopup> </menu> </menubar> <
toolbar id="findfiles-
toolbar> here we have added two menus with various commands on them.
XUL Tutorial - Archive of obsolete content
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 interfaces xpcom examples ...
Accessibility/XUL Accessibility Reference - Archive of obsolete content
splitter stringbundle stringbundleset vbox window elements not processed yet: action binding bindings broadcaster broadcasterset conditions content dialog dialogheader editor listcell member observes preference preferences prefpane prefwindow resizer richlistbox richlistitem resizer rule scrollbar scrollbox scrollcorner separator template textnode titlebar
toolbar toolbarbutton
toolbargrippy
toolbaritem
toolbarpalette
toolbarseparator
toolbarset
toolbarspacer
toolbarspring toolbox tooltip treeseparator triple wizard wizardpage cases to revisit: ...
XUL accessibility tool - Archive of obsolete content
lev) error: duplicate accesskey in a dialog (already have this for menus) (aaronlev) error: form control without accesskey (aaronlev) warning: accesskey as lowercase letter with descender (underlined g,j,y,q,p are hard to read, not recommended) (aaronandy) list of things to check manually, such as a list oftrees in the document (make sure they have accessible column picker equivs) or a list of
toolbarbuttons (make sure they have accessible alternatives).
elements - Archive of obsolete content
nces prefpane prefwindow progressmeter r radio radiogroup resizer richlistbox richlistitem resizer row rows rule s script scrollbar scrollbox scrollcorner separator spacer splitter stack statusbar statusbarpanel stringbundle stringbundleset t tab tabbrowser tabbox tabpanel tabpanels tabs template textnode textbox titlebar
toolbar toolbarbutton
toolbargrippy
toolbaritem
toolbarpalette
toolbarseparator
toolbarset
toolbarspacer
toolbarspring toolbox tooltip tree treecell treechildren treecol treecols treeitem treerow treeseparator triple v vbox w window wizard wizardpage ...
menupopup - Archive of obsolete content
there are several ways in which a menupopup may be used: it may be placed inside a menu, menulist,
toolbarbutton, or a button with the type attribute set to "menu" to create a popup that will open when the menu or button is pressed.
prefpane - Archive of obsolete content
</prefpane> <script type="application/javascript" src="chrome://myext/content/script0.js"> <script type="application/javascript" src="chrome://myext/content/script1.js"> </prefwindow> when opening a dialog with multiple panes you must include the
toolbar feature in the call to opendialog, for example: window.opendialog("chrome://example/content/prefwin.xul", "", "chrome,
toolbar"); related prefwindow preferences system documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes ...
window - Archive of obsolete content
this is used to hide chrome when showing in-browser ui such as the about:addons page, and causes the
toolbars to be hidden, with only the tab strip (and, if currently displayed, the add-on bar) left showing.
2006-12-01 - Archive of obsolete content
summary: mozilla.dev.apps.thunderbird - november 18 - 24, 2006 announcements none for this week discussions how to display
toolbar button image within the customization palette?
Settings - Archive of obsolete content
the debugger has its own settings menu, which you can access from an icon in the
toolbar: each setting is a simple on/off switch: auto prettify minified sources with this option enabled, the debugger will automatically detect minified js files and pretty-print them.
Scratchpad - Archive of obsolete content
usage opening scratchpad in its own window there are several different ways to open scratchpad in its own window: press shift + f4, or go to the web developer menu (which is a submenu in the tools menu on macos and linux), then select scratchpad click the wrench icon (), which is in the main
toolbar or under the hamburger menu (), then select "scratchpad".
E4X for templating - Archive of obsolete content
createbundle('chrome://myeext/locale/myext.properties'); if (args){ args = array.prototype.slice.call(arguments, 1); return strs.formatstringfromname(msg,args,args.length); } return strs.getstringfromname(msg); } for example, <
toolbarbutton label={$s('my
toolbar.label')}/> conditionals function _if (cond, h, _else) { if (cond && cond != undefined) { // we need undefined condition for e4x return h(cond); } else if (_else) { return _else(cond); } return ''; // empty string allows conditions in attribute as well as element content } for example: {_if(elems.length(), function () <descriptio...
GetObject - Archive of obsolete content
for example, a drawing might support three different types of objects: an application object, a drawing object, and a
toolbar object, all of which are part of the same file.
Flexbox - Learn web development
let's explore this by looking at a new example — flex-align0.html (see it live also) — which we are going to turn into a neat, flexible button/
toolbar.
Drawing graphics - Learn web development
we have to draw the circle 85 pixels above where we measured it from, because the vertical measurement is taken from the top of the viewport, but we are drawing the circle relative to the top of the canvas, which starts below the 85 pixel-high
toolbar.
Accessibility Features in Firefox
you can furthermore control javascript capabilities to remove scrollbars,
toolbars or system buttons like minimize, close and maximize by editing the about:config related properties or by editing accordingly the user.js file as explained in this "disable other javascript window features" document.
Gecko info for Windows accessibility vendors
role_grouping html: <fieldset> xul: <groupbox> dhtml: role="wairole:group" or dhtml: role="wairole:radiogroup" for a <fieldset> the name is exposed using the <legend> role_separator xul: <separator> html: <hr> dhtml: role="wairole:separator" role_
toolbar xul: <
toolbar> dhtml: role="wairole:
toolbar" role_statusbar xul: <statusbar> role supported?
Mozilla’s UAAG evaluation report
(p3) p can turn on and off
toolbars under show/hide can customize personal bookmarks
toolbar bug 15144 is for the ability to add/remove
toolbar icons bug 47418 is for the ability to rearrange
toolbars guideline 12.
Accessible Toolkit Checklist
fied letter mnemonics require and support text labels for buttons with images, can be same as tooltip space key activates button enter key activates focused button (thus current button, not default button shows dark border when a different button is focused) when button has a popup available by clicking on it, the enter key or space bar should also activate the popup
toolbars and
toolbar buttons are not focusable, but we should expose the tooltip.
Index
686 theme concepts theme, add-on themes developed using the webextensions api in firefox enable you to change the look of the browser by adding images to the header area of the firefox browser; this is the area behind the menu bar,
toolbars, address bar, search bar, and tab strip.
Theme concepts
themes developed using the webextensions api in firefox enable you to change the look of the browser by adding images to the header area of the firefox browser; this is the area behind the menu bar,
toolbars, address bar, search bar, and tab strip.
Eclipse CDT
to debug, click the debug button on the
toolbar, or select "run > debug" from the menu bar.
Performance
e) // stuff communicating with the framescript // framescript.js function onlyonceinabluemoon() { // we only need this during a total solar eclipse while goat blood rains from the sky sendasyncmessage('my-addon:paragraph-count', {num: content.document.queryselectorall('p').length}) } addmessagelistener("my-addon:request-from-parent", onlyonceinabluemoon) better: // addon.js function on
toolbarbutton(event) { let tabmm = gbrowser.mcurrentbrowser.frameloader.messagemanager; let button = event.target; let callback = (message) => { tabmm.removemessagelistener("my-addon:paragraph-count", callback) decoratebutton(button, message.data.num) } tabmm.addmessagelistener("my-addon:paragraph-count", callback); tabmm.loadframescript("data:,sendasyncmessage('my-addon:paragraph-cou...
-moz-window-dragging
no-drag the window is not draggable formal syntax drag | no-drag example
toolbarpaletteitem { -moz-window-dragging: no-drag; } specifications this property is not part of any specification.
API-provided widgets
overflows whether widget can overflow when in an overflowable
toolbar (optional, default: true) defaultarea default area to add the widget to (optional, default: none; required if non-removable) shortcutid id of an element that has a shortcut for this widget (optional, default: null).
Widget Wrappers
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 fo...
Interfacing with the Add-on Repository
when the user clicks a
toolbar button to initiate the query, the following code gets run to start the request: addonrepository.retrieverecommendedaddons(10, this); this asks the repository to fetch up to 10 add-ons, using the object this as the target for callbacks.
Localizing with Koala
you should see a new button in komodo's
toolbar, with two options: startpage and management.
Gecko Profiler FAQ
[ehsan] try clicking the
toolbar icon for the extension, expanding the settings section, and enter the secret cheat code “,” in the threads field and click on “apply (restart profiler)”.
Profiling with the Firefox Profiler
the bugzilla components are core::gecko profile for the profiler backend, and devtools::performance tools (profiler/timeline) for the
toolbar button and about:profiling.
A guide to searching crash reports
searching the search form you can get to the search page by clicking on the "super search" link near the
toolbar at the top right of any page in crash-stats.
TPS Bookmark Lists
all bookmark paths must begin with one of the following: "menu": the normal bookmarks menu "
toolbar": the bookmarks
toolbar "tags": the tags folder "unfiled": the unfiled bookmarks folder "places": the places root folder ("menu", "
toolbar", and "unfiled" are all children of this) sub-folders are preceded with forward slashes, so "menu/folder1" denotes that "folder1" is a sub-folder of "menu".
Gecko states
state_checked the object is checked state_mixed indicates that the state of a three-state check box or
toolbar button is not determined.
XUL Accessibility
<label value="it's label for control" control="control" /> <hbox role="grouping" id="control" /> get tooltiptext attribute if the element is anonymous child of the element that is the direct child of
toolbaritem element or the element is direct child of
toolbaritem element then title attribute of
toolbaritem element is used (currently it's used in firefox ui only) if the element has aria role and the role allows to aggregate name from subtree of element then generate name from subtree of the element description the following rules to generate accessible description are applied: check aria-described...
Embedded Dialog API
this flag requests the presence or absence of particular features in the window surrounding the browser; features such as a
toolbar or menubar.
Querying Places
// |query| and |options| are objects created in the previous section query.setparents([placesutils.bookmarks.
toolbarguid], 1); let result = placesutils.history.executequery(query, options); serializing queries query and options objects can be serialized into a string starting with "place:" using queriestoquerystring.
nsIAccessibleProvider
xultext 0x0000101a xultextbox 0x0000101b xulthumb 0x0000101c xultree 0x0000101d xultreecolumns 0x0000101e xultreecolumnitem 0x0000101f xul
toolbar 0x00001020 xul
toolbarseparator 0x00001021 xultooltip 0x00001022 xul
toolbarbutton 0x00001023 xforms elements constants constant value description xformscontainer 0x00002000 used for xforms elements that provide accessible object for itself as well for anonymous content.
nsIAccessibleStates
state_mixed 0x00000020 indicates that the state of a three-state check box or
toolbar button is not determined.
nsITaskbarPreviewButton
widget/public/nsitaskbarpreviewbutton.idlscriptable this interface is used on microsoft windows to get access to a window preview's
toolbar button properties.
XUL Overlays
toolbars, submenus, boxes, and any other subtrees that appear in multiple places can be defined in overlays files in this way and referenced for reuse wherever necessary.
Finding the code for a feature
i keep two prominent links to this on my firefox
toolbar, one to comm-central string search, and one to comm-central file search.
Mozilla
toolbars, menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome.
DOM Property Viewer - Firefox Developer Tools
refreshing the display if the dom changes you can hit the refresh button to update the display: filtering there is a search box within the
toolbar: this filters the list to show only items which match the search term.
Access debugging in add-ons - Firefox Developer Tools
window.addeventlistener("debugger:editorunloaded") relevant files: chrome://browser/content/devtools/debugger-controller.js chrome://browser/content/devtools/debugger-
toolbar.js chrome://browser/content/devtools/debugger-view.js chrome://browser/content/devtools/debugger-panes.js unfortunately there is not yet any api to evaluate watches/expressions within the debugged scope, or highlight elements on the page that are referenced as variables in the debugged scope.
Step through code - Firefox Developer Tools
when the debugger is stopped at a breakpoint, you can step through it using four buttons in the
toolbar: in order, the buttons are: play: run to the next breakpoint step over: advance to the next line in the same function.
Eyedropper - Firefox Developer Tools
you can use it in one of two ways: to select a color from the page and copy it to the clipboard to change a color value in the inspector's rules view to a color you've selected from the page copying a color to the clipboard open the eyedropper in one of these two ways: select "eyedropper" under the "web developer" menu open the page inspector tab and click the eyedropper button in its
toolbar as you move the mouse around the page you'll see the current color value in the eyedropper change.
UI Tour - Firefox Developer Tools
the select element button is one way you can select an element for inspection: note that it's actually part of the main toolbox
toolbar, so it's immediately accessible from any tool, not just the inspector.
Allocations - Firefox Developer Tools
then record a profile as usual, and you will see a new tab labeled "allocations" in the
toolbar: anatomy of the allocations view the allocations view looks something like this: the allocations view periodically samples allocations that are made over the recording.
Waterfall - Firefox Developer Tools
filtering markers you can control which markers are displayed using a button in the
toolbar: waterfall patterns exactly what you'll see in the waterfall is very dependent on the kind of thing your site is doing: javascript-heavy sites will have a lot of orange, while visually dynamic sites will have a lot of purple and green.
Style Editor - Firefox Developer Tools
works especially well with responsive design view for creating and debugging responsive layouts: from firefox 46 onwards, if an @media rule contains a screen size in a condition, then it is made clickable: clicking it then resizes the screen to that size using the responsive design view: creating and importing style sheets you can create a new style sheet by clicking the new button in the
toolbar.
Web Console - Firefox Developer Tools
the toolbox appear at the bottom, left, or right of the browser window (depending on your docking settings), with the web console activated (it's just called console in the devtools
toolbar).
HTMLImageElement.complete - Web APIs
let lightboxelem = document.queryselector("#lightbox"); let lightboximgelem = lightboxelem.queryselector("img"); let lightboxcontrolselem = lightboxelem.queryselector(".
toolbar"); async function loadimage(url, elem) { return new promise((resolve, reject) => { elem.onload = () => resolve(elem); elem.onerror = reject; elem.src = url; }); } async function lightbox(url) { lightboxelem.style.display = "block"; await loadimage("https://somesite.net/huge-image.jpg", lightboximgelem); lightboxcontrolselem.disabled = false; } /* ...
History API - Web APIs
moving forward and backward to move backward through history: window.history.back() this acts exactly as if the user clicked on the back button in their browser
toolbar.
Screen.height - Web APIs
widgets such as taskbars or other special application windows that integrate with the os (e.g., the spinner player minimized to act like an additional
toolbar on windows) may reduce the amount of space available to browser windows and other applications.
Window.personalbar - Web APIs
also be aware that dynamically updating the visibilty of the various
toolbars can change the size of the window rather dramatically, and may affect the layout of your page.
Window.statusbar - Web APIs
also be aware that dynamically updating the visibilty of the various
toolbars can change the size of the window rather dramatically, and may affect the layout of your page.
Window - Web APIs
window.
toolbar read only returns the
toolbar object, whose visibility can be toggled in the window.
Using the aria-orientation attribute - Accessibility
<a href="#" id="handle_zoomslider" role="slider" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="17" aria-valuenow="14" > <span>11</span> </a> working examples: slider example notes used with aria roles scrollbar listbox combobox menu tree separator slider tablist
toolbar related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-orientation attribute ...
Using ARIA: Roles, states, and properties - Accessibility
header 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 aria-expanded aria-haspopup aria-hidden aria-invalid aria-la...
ARIA: dialog role - Accessibility
similarly, if a dialog provides special features like
toolbars or context menus, these must be reachable and operable by keyboard users as well.
ARIA: listbox role - Accessibility
example listboxes with rearrangeable options: examples of both single-select and multi-select listboxes with accompanying
toolbars where options can be added, moved, and removed.
WAI-ARIA Roles - Accessibility
- 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 ...
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
_cursor role_caret role_alert role_window [inserted by system] role_client [important] role_menupopup [important] role_menuitem [important] role_tooltip role_application role_document role_pane [important] role_chart role_dialog [semi-important, not currently used by all at's] role_border role_grouping role_separator [important] role_
toolbar role_statusbar [important] role_table [important] role_columnheader role_rowheader role_column role_row role_cell [important] role_link [important] role_helpballoon role_character role_list [important] role_listitem [important] role_outline [important] role_outlineitem [important] role_pagetab [important] role_propertypage [important]...
scroll-padding-block-end - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned
toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport.
scroll-padding-block-start - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned
toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport.
scroll-padding-block - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned
toolbars or sidebars) or simply to put more breathing room between a targeted element and the edges of the scrollport.
scroll-padding-bottom - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned
toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport.
scroll-padding-inline-end - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned
toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport.
scroll-padding-inline-start - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned
toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport.
scroll-padding-inline - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned
toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport.
scroll-padding-left - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned
toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport.
scroll-padding-right - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned
toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport.
scroll-padding-top - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned
toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport.
scroll-padding - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned
toolbars or sidebars), or simply to put more breathing room between a targeted element and the edges of the scrollport.
Content categories - Developer guides
some elements belong to this category only under specific conditions: <audio>, if the controls attribute is present <img>, if the usemap attribute is present <input>, if the type attribute is not in the hidden state <menu>, if the type attribute is in the
toolbar state <object>, if the usemap attribute is present <video>, if the controls attribute is present palpable content content is palpable when it's neither empty or hidden; it is content that is rendered and is substantive.
<input type="button"> - HTML: Hypertext Markup Language
<div class="
toolbar"> <input type="color" aria-label="select pen color"> <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span> <input type="button" value="clear canvas"> </div> <canvas class="mycanvas"> <p>add suitable fallback here.</p> </canvas> body { background: #ccc; margin: 0; overflow: hidden; } .
toolbar { background: #ccc; width: 150...
<ol>: The Ordered List element - HTML: Hypertext Markup Language
implicit aria role list permitted aria roles directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist,
toolbar, tree dom interface htmlolistelement attributes this element also accepts the global attributes.
<ul>: The Unordered List element - HTML: Hypertext Markup Language
implicit aria role list permitted aria roles directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist,
toolbar, tree dom interface htmlulistelement attributes this element includes the global attributes.