Search completed in 1.33 seconds.
870 results for "focus":
Your results are loading. Please wait...
nsIFocusManager
dom/interfaces/base/nsifocusmanager.idlscriptable please add a summary to this article.
... 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) implemented by: @mozilla.org/focus-manager;1 as a service: var focusmanager = components.classes["@mozilla.org/focus-manager;1"] .getservice(components.interfaces.nsifocusmanager); method overview void clearfocus(in nsidomwindow awindow); void contentremoved(in nsidocument adocument, in nsicontent aelement); native code only!
... void focusplugin(in nsicontent aplugin); native code only!
...And 58 more matches
Focus and Selection - Archive of obsolete content
« previousnext » the section will describe how to handle the focus and selection of elements.
... focused elements the focused element refers to the element which currently receives input events.
... if there are three textboxes on a window, the one that has the focus is the one that the user can currently enter text into.
...And 48 more matches
Focus management with Vue refs - Learn web development
the last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility.
... objective: to learn how to handle focus management using vue refs.
... the focus management problem while we do have working edit functionality, we aren't providing a great experience for non-mouse users.
...And 38 more matches
:focus-visible - CSS: Cascading Style Sheets
the :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the ua (user agent) determines via heuristics that the focus should be made evident on the element.
... (many browsers show a “focus ring” by default in this case.) this selector is useful to provide a different focus indicator based on the user’s input modality (mouse vs.
... note that firefox supports similar functionality through an older, prefixed pseudo-class — :-moz-focusring.
...And 10 more matches
HTMLElement.focus() - Web APIs
the htmlelement.focus() method sets focus on the specified element, if it can be focused.
... the focused element is the element which will receive keyboard and similar events by default.
... syntax element.focus(options); // object parameter parameters options optional an optional object providing options to control aspects of the focusing process.
...And 9 more matches
:focus - CSS: Cascading Style Sheets
WebCSS:focus
the :focus css pseudo-class represents an element (such as a form input) that has received focus.
... /* selects any <input> when focused */ input:focus { color: red; } note: this pseudo-class applies only to the focused element itself.
... use :focus-within if you want to select an element that contains a focused element.
...And 8 more matches
Document.hasFocus() - Web APIs
WebAPIDocumenthasFocus
the hasfocus() method of the document interface returns a boolean value indicating whether the document or any element inside the document has focus.
... this method can be used to determine whether the active element in a document has focus.
... when viewing a document, an element with focus is always the active element in the document, but an active element does not necessarily have focus.
...And 6 more matches
GlobalEventHandlers.onfocus - Web APIs
the onfocus property of the globaleventhandlers mixin is an eventhandler that processes focus events on the given element.
... the focus event is raised when the user sets focus on an element.
... for onfocus to fire on non-input elements, they must be given the tabindex attribute (see building keyboard accessibility back in for more details).
...And 6 more matches
-moz-user-focus - CSS: Cascading Style Sheets
the -moz-user-focus css property is used to indicate whether an element can have the focus.
... /* keyword values */ -moz-user-focus: normal; -moz-user-focus: ignore; /* global values */ -moz-user-focus: inherit; -moz-user-focus: initial; -moz-user-focus: unset; by setting its value to ignore, you can disable focusing the element, which means that the user will not be able to activate the element.
... initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete note: this property doesn't work for xul <xul:textbox> elements, because the textbox itself never takes focus.
...And 6 more matches
CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
the canvasrenderingcontext2d.drawfocusifneeded() method of the canvas 2d api draws a focus ring around the current or given path, if the specified element is focused.
... syntax void ctx.drawfocusifneeded(element); void ctx.drawfocusifneeded(path, element); parameters element the element to check whether it is focused or not.
... examples managing button focus this example draws two buttons on a canvas.
...And 4 more matches
nsIWebBrowserChromeFocus
embedding/browser/webbrowser/nsiwebbrowserchromefocus.idlscriptable implemented by the same object as nsiembeddingsitewindow.
... it represents the focus up-calls from mozilla to the embedding chrome.
... inherits from: nsisupports last changed in gecko 1.7 method overview void focusnextelement(); void focusprevelement(); methods focusnextelement() set the focus at the next focusable element in the chrome.
...And 3 more matches
FocusEvent - Web APIs
the focusevent interface represents focus-related events, including focus, blur, focusin, and focusout.
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/focusevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">focusevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor focusevent() cr...
...eates a focusevent event with the given parameters.
...And 3 more matches
Window: focus event - Web APIs
the focus event fires when an element has received focus.
... the opposite of focus is blur.
... bubbles no cancelable no interface focusevent event handler property onfocus sync / async sync composed yes examples live example this example changes the appearance of a document when it loses focus.
...And 3 more matches
Element: focus event - Web APIs
the focus event fires when an element has received focus.
... the main difference between this event and focusin is that focusin bubbles while focus does not.
... the opposite of focus is blur.
...And 2 more matches
FocusEvent() - Web APIs
the focusevent() constructor returns a newly created focusevent object with an optional eventtarget.
... syntax var focusevent = new focusevent(typearg[, focuseventinit]); properties the focusevent() constructor also inherits arguments from uievent() and from event().
... focuseventinit optional is a focuseventinit dictionary, having the following fields: "relatedtarget", optional and defaulting to null, is an eventtarget representing the secondary target of a focusevent.
...And 2 more matches
HTMLSelectElement.autofocus - Web APIs
the htmlselectelement.autofocus property is a boolean that reflects the autofocus html attribute, which indicates whether the associated <select> element will get input focus when the page loads, unless the user overrides it.
...if there are several, the first element with the attribute set inserted, usually the first such element on the page, get the initial focus.
... setting this property doesn't set the focus to the associated <select> element: it merely tells the browser to focus to it when the element is inserted in the document.
...And 2 more matches
:-moz-focusring - CSS: Cascading Style Sheets
the :-moz-focusring css pseudo-class is a mozilla extension that is similar to the :focus pseudo-class, but it only matches an element if it's currently focused and a focus ring or other indicator should be drawn around it.
... if :-moz-focusring matches, then :focus also matches, but the converse is not always true: it depends on whether the user agent has focus ring drawing enabled and how the element was focused.
... whether the user agent has focus ring drawing enabled can depend on operating system settings and other factors, so the precise behavior of this pseudo-class will vary from platform to platform.
...And 2 more matches
:focus-within - CSS: Cascading Style Sheets
the :focus-within css pseudo-class represents an element that has received focus or contains an element that has received focus.
... in other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus.
... (this includes descendants in shadow trees.) /* selects a <div> when one of its descendants is focused */ div:focus-within { background: cyan; } this selector is useful, to take a common example, for highlighting an entire <form> container when the user focuses on one of its <input> fields.
...And 2 more matches
accessibility.tabfocus
the preference accessibility.tabfocus controls what elements receive focus when the user presses the tab key.
... type:integer default value: 7 (windows and linux); 2 (mac os x) exists by default: no application support:gecko 1.7 status: active introduction: bugs: bug 140612 values 1 give focus only to text fields (default on mac osx) 2 give focus to all form elements except text fields.
... 4 give focus only to links and linked images.
...the value 7 (give focus to all elements) is the default on windows and linux.
TakeFocus
« nsiaccessible page summary this method focuses this accessible node.
... void takefocus(); remarks the state state_focusable indicates whether this node is normally focusable.
... it is the callers responsibility to determine whether this node is focusable.acctakefocus on a node that is not normally focusable (such as a table), will still set focus on that node, although normally that will not be visually indicated in most style sheets.
... see also nsiaccessible.focusedchild ...
Element: focusin event - Web APIs
the focusin event fires when an element is about to receive focus.
... the main difference between this event and focus is that focusin bubbles while focus does not.
... the opposite of focusin is focusout.
... bubbles yes cancelable no interface focusevent event handler property onfocusin sync / async sync composed yes examples live example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focusin', (event) => { event.target.style.background = 'pink'; }); form.addeventlistener('focusout', (event) => { event.target.style.background = ''; }); result specifications specification status comment ui events working draft added info that this event is composed.
Element: focusout event - Web APIs
the focusout event fires when an element is about to lose focus.
... the main difference between this event and blur is that focusout bubbles while blur does not.
... the opposite of focusout is focusin.
... bubbles yes cancelable no interface focusevent event handler property onfocusout sync / async sync composed yes examples live example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focusin', (event) => { event.target.style.background = 'pink'; }); form.addeventlistener('focusout', (event) => { event.target.style.background = ''; }); result specifications specification status comment ui events working draft added info that this event is composed.
FocusEvent.relatedTarget - Web APIs
the focusevent.relatedtarget read-only property is the secondary target, depending on the type of event: event name target relatedtarget blur the eventtarget losing focus the eventtarget receiving focus (if any).
... focus the eventtarget receiving focus the eventtarget losing focus (if any) focusin the eventtarget receiving focus the eventtarget losing focus (if any) focusout the eventtarget losing focus the eventtarget receiving focus (if any) note that many elements can't have focus, which is a common reason for relatedtarget to be null.
... syntax secondtarget = focusevent.relatedtarget specifications specification status comment ui eventsthe definition of 'focusevent.relatedtarget' in that specification.
... working draft document object model (dom) level 3 events specificationthe definition of 'focusevent.relatedtarget' in that specification.
Selection.focusNode - Web APIs
the selection.focusnode read-only property returns the node in which the selection ends.
...the focus is where the user ended the selection.
...the selection's focus moves, but the selection's anchor, the other end of the selection, does not move.
... syntax node = sel.focusnode specifications specification status comment selection apithe definition of 'selection.focusnode' in that specification.
ShadowRoot.delegatesFocus - Web APIs
the delegatesfocus read-only property of the shadowroot interface returns a boolean that indicates whether delegatesfocus was set when the shadow was attached (see element.attachshadow()).
... syntax var df = shadowroot.delegatesfocus value a boolean value — true if the shadow root does delegate focus, false if it doesn't.
... // does it delegate focus?
... let hostelem = shadow.delegatesfocus; specifications this feature is not currently in a specification.
noinitialfocus - Archive of obsolete content
« xul reference homenoinitialfocustype: booleanif false, the default value, the element is considered when determining which element should be initially focused in a dialog.
... if true, the element will not receive initial focus.
... this lets you prevent things like descriptions and labels from inadvertently receiving initial focus.
setfocus - Archive of obsolete content
« xul reference home setfocus type: boolean if true or omitted, the focus will be given to the first element in the corresponding tabpanel when the tabs are navigated via the keyboard.
... if this attribute is false, the focus does not change during navigation.
... see also dom element focus ...
Selection.focusOffset - Web APIs
the selection.focusoffset read-only property returns the number of characters that the selection's focus is offset within the selection.focusnode.
...if the selection ends with the first character in the selection.focusnode, 0 is returned.
... syntax offset = sel.focusoffset specifications specification status comment selection apithe definition of 'selection.focusoffset' in that specification.
WindowClient.focus() - Web APIs
the focus() method of the windowclient interface gives user input focus to the current client and returns a promise that resolves to the existing windowclient.
... syntax windowclient.focus().then(function(windowclient) { // do something with your windowclient once it has been focused }); parameters none.
... example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment service workersthe definition of 'focus()' in that specification.
WindowClient.focused - Web APIs
the focused read-only property of the windowclient interface is a boolean that indicates whether the current client has focus.
... syntax var myfocused = windowclient.focused; value a boolean.
... example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) { if(!client.focused) return client.focus(); } } } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment service workersthe definition of 'windowclient: focused' in that specification.
::-moz-focus-inner - CSS: Cascading Style Sheets
the ::-moz-focus-inner css pseudo-element is a mozilla extension that represents an inner focus ring of the <button> element as well as the button, submit, reset, and color types of the <input> element.
... note: using ::-moz-focus-inner with anything than the buttons that support it doesn't match anything and has no effect.
... examples html <input type="submit" value="input"/> <button type="submit">button</button> css button::-moz-focus-inner, input[type="color"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner { padding-block-start: 0px; padding-inline-end: 2px; padding-block-end: 0px; padding-inline-start: 2px; border: 1px dotted red; } result specifications not part of any standard.
norestorefocus - Archive of obsolete content
« xul reference home norestorefocus type: boolean if false, the default value, then when the panel is hidden, the keyboard focus will be restored to whatever had the focus before the panel was opened.
... if true, the focus will not be reset, although it will be cleared if the focus is within the panel.
noautofocus - Archive of obsolete content
« xul reference home noautofocus type: boolean if false, the default value, the currently focused element will be unfocused whenever the popup is opened or closed.
... if true, the focus is not adjusted.
focus - Archive of obsolete content
ArchiveMozillaXULMethodfocus
« xul reference home focus() return type: no return value assigns the focus to the element, if it can accept the focus.
... the onfocus handler is called if the toplevel window is active.
focusedItem - Archive of obsolete content
« xul reference focuseditem type: radio element holds the currently focused item in the radiogroup, which may or may not be the same as the selected item.
... you can change the focused item by setting this property.
FocusedChild
« nsiaccessible page summary focused accessible child of node.
... attribute nsiaccessible focusedchild; see also nsiaccessible.takefocus() ...
HTMLIFrameElement.setNfcFocus() - Web APIs
the setnfcfocus() method of the htmliframeelement interface sets whether an <iframe> can receive an nfc event.
... syntax myiframe.setnfcfocus(true); returns void.
focused - Archive of obsolete content
« xul reference home focused type: boolean this attribute is true if the element is focused.
textbox.onfocus - Archive of obsolete content
« xul reference home onfocus type: script code this event is sent when a textbox receives keyboard focus.
focused - Archive of obsolete content
« xul reference focused type: boolean gets and sets the value of the focused attribute.
Window.focus() - Web APIs
WebAPIWindowfocus
syntax window.focus() example if (clicked) { window.focus(); } specification specification status comment html living standardthe definition of 'window.focus()' in that specification.
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
we'll also look at solving some accessibility focus issues, and more besides.
... we'll focus on some accessibility issues involving focus management.
... to do so, we'll utilize some techniques for accessing dom nodes and executing methods like focus() and select().
...And 63 more matches
IME handling guide
it handles native key events before or after focused application (depending on the platform) and creates a composition string (a.k.a.
... if ime is available on focused elements, we call that state "enabled".
... modules handling ime composition widget each widget handles native ime events and dispatches widgetcompositionevent with mozilla::widget::texteventdispatcher to represent the behavior of ime in the focused editor.
...And 60 more matches
ARIA Test Cases - Accessibility
jaws 10 passed fail - - voiceover (leopard) n/a n/a - fail window-eyes passed- not announced as "alert" fail - - nvda passed n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - ffd - an interesting thing to note is that, when focus moves to an alert, jaws loses its place on the page, so that, when the alert disappears, jaws virtual cursor is at the bottom of the page.
... alertdialog alert dialog yui alert dialog (3rd button in this page) expected at behavior: at should speak the fact that this is an alert, the title and contents of the dialog, then place virtual focus or the real focus on the desired control (like a button).
... screen magnifier should show the focused button or emulate any other standard behavior found in notification dialogs in windows or respective operating systems.
...And 46 more matches
Accessibility in React - Learn web development
previous overview: client-side javascript frameworks next in our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in react, which can improve usability and reduce confusion for both keyboard-only and screenreader users.
...this outline is your visual indicator that the browser is currently focused on this element.
...this shows you that the browser's focus has moved.
...And 42 more matches
Index - Web APIs
WebAPIIndex
559 canvasrenderingcontext2d.drawfocusifneeded() api, accessibility, canvas, canvasrenderingcontext2d, method, reference the canvasrenderingcontext2d.drawfocusifneeded() method of the canvas 2d api draws a focus ring around the current or given path, if the specified element is focused.
... 924 document.hasfocus() api, dom, focus, method, reference the hasfocus() method of the document interface returns a boolean value indicating whether the document or any element inside the document has focus.
... this method can be used to determine whether the active element in a document has focus.
...And 35 more matches
Building accessible custom components in XUL - Archive of obsolete content
we still have no way to focus individual cells, nor do we have a way to navigate the spreadsheet with the keyboard.
...further reading table of supported roles and states in firefox focus issues download stage-3.zip install stage-3.xpi the next step on the road to an accessible spreadsheet is the focus problem.
... in html documents, you can make any element focusable with the tabindex attribute.
...And 28 more matches
ARIA: listbox role - Accessibility
it is highly recommended to use the html select element, or a group of radio buttons if only one item can be selected, or a group of checkboxes if multiple items can be selected, because there is a lot of keyboard interactivity to manage focus for all the descendants, and native html elements provide this functionality for you for free.
... when the listbox role is added to an element, or such an element becomes visible, screen readers announce the label and role of the listbox when it gets focus.
... if an option or item is focused within the list, it gets announced next, followed by an indication of the item's position with the list if the screen reader supports this.
...And 26 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
they need to know about focus changes and other events, and it needs to know what objects are contained in the current document or dialog box.
...screen magnifiers will zoom to the focus, keeping it on the screen at all times, or even allow the user to enter a special low vision document reading mode, with a variety of features such as ticker mode where text is streamed on a single line.
... a set of system messages that confer accessibility-related events such as focus changes, changes to document content and state changes in ui objects like checkboxes.
...And 23 more matches
Keyboard-navigable JavaScript widgets - Accessibility
using tabindex by default, when people use the tab key to browse a webpage, only interactive elements (like links, form controls) get focused.
... with the tabindex global attribute, authors can make other elements focusable, too.
... when set to 0, the element becomes focusable by keyboard and script.
...And 23 more matches
ARIA: grid role - Accessibility
the position of each cell is significant and can be focused using keyboard input.
... key action → moves focus one cell to the right.
... if focus is on the right-most cell in the row, focus does not move.
...And 21 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
required for accessibility autocomplete all hint for form autofill feature autofocus all automatically focus the form control when the page is loaded capture file media capture input method in file upload controls checked radio, checkbox whether the command or control is checked dirname text, search name of form field to use for sending the element's directionality in form submission disabled all whether the form c...
... autofocus a boolean attribute which, if present, indicates that the input should automatically have focus when the page has finished loading (or when the <dialog> containing the element has been displayed).
... note: an element with the autofocus attribute may gain focus before the domcontentloaded event is fired.
...And 19 more matches
Accessible Toolkit Checklist
general dialogs/windows/general escape key cancels dialogs and refocuses the previously focused on the parent window.
... alt+f4 closes windows, similar to escape but even works on dialogs without cancel button alt+space opens window menu with restore, move, size, minimize, maximize, close the move and size options must be usable with the arrow keys on the keyboard in windows, initial focus goes to first focusable widget that is not a clickable tabbed property sheet label making tab order definable.
... tab order must wrap, not have invisible items in tab order dynamically added items must not corrupt the tab cycle or make it disorderly tab cycle must be identical backwards and forwards the f6 and shift+f6 key combinations should cycle through panes in a window making focus visible on any widget, and focus must always be visible shift+f10 or context menu key should work like right click on focused item, and context menu should show just under and to the right of the current focus.
...And 18 more matches
Selection - Web APIs
WebAPISelection
the anchor is where the user began the selection and the focus is where the user ends the selection.
... if you make a selection with a desktop mouse, the anchor is placed where you pressed the mouse button, and the focus is placed where you released the mouse button.
... anchor and focus should not be confused with the start and end positions of a selection.
...And 17 more matches
Index - Archive of obsolete content
this tutorial focuses on extensions for firefox, but the same (or very similar) principles apply to creating extensions for other applications such as thunderbird, seamonkey, and flock.
... 415 dehydra dehydra the development focus switched to dxr (where the "d" comes from "dehydra"), which is based on clang instead of gcc.
... 442 content states and the style system developing mozilla content states are what gecko uses to implement the various state-dependent in css (examples would be :hover, :active, :focus, :target, :checked).
...And 16 more matches
How to build custom form controls - Learn web development
note: we'll focus on building the control, not on how to make the code generic and reusable; that would involve some non-trival javascript code and dom manipulation in an unknown context, and that is out of the scope of this article.
... the control was active and the user moves the focus to another control using the keyboard (e.g.
... the user hits the tab key and it gains focus.
...And 15 more matches
Keyboard - Accessibility
focusable elements should have interactive semantics if an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option).
...in such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode").
... most interactive elements are focusable by default; you can make an element focusable by adding a tabindex=0 attribute value to it.
...And 15 more matches
Anonymous Content - Archive of obsolete content
focus and blur events when a focus or blur event crosses a scope boundary, the bound element is checked to see if it is focusable (i.e., if the user agent would normally fire a focus or blur event on the element).
... if the bound element is focusable, then the event is retargeted.
...if anonymous content underneath a focusable bound element blurs and anonymous content also underneath the bound element takes focus, then the blur and focus events are both stopped.
...And 14 more matches
Mozilla’s UAAG evaluation report
(p1) p onmouseover, onmousedown, onmouseup, onmousemove, onclick, ondbclick: no keyboard support onfocus and onblur: cannot be activated with pointer 1.3 provide text messages.
... checkpoint title status notes/plans 5.1 no automatic content focus change.
...(p2) c windows can be configured so that the window with the current focus is always on top.
...And 14 more matches
XUL accessibility guidelines - Archive of obsolete content
because column headers and the column picker, in the upper right hand corner of the tree, can not receive focus, they are not operable with a keyboard.
... toolbarbuttons by default, toolbar buttons cannot receive focus with a keyboard.
...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 13 more matches
CSS and JavaScript accessibility best practices - Learn web development
links hyperlinks — the way you get to new places on the web: <p>visit the <a href="https://www.mozilla.org">mozilla homepage</a>.</p> some very simple link styling is shown below: a { color: #ff0000; } a:hover, a:visited, a:focus { color: #a60000; text-decoration: none; } a:active { color: #000000; background-color: #a60000; } the standard link conventions are underlined and a different color (default: blue) in their standard state, another color variation when the link has previously been visited (default: purple), and yet another color when the link is activated (default: red).
... in addition, the mouse pointer changes to a pointer icon when links are moused over, and the link receives a highlight when focused (e.g.
... you shouldn't however deviate too much from the expected visual feedback form elements receive when they are focused, which is basically the same as links (see above).
...And 12 more matches
ARIA: button role - Accessibility
<div id="savechanges" tabindex="0" role="button" aria-pressed="false">save</div> the above example creates a simple button which is first in the focus order, though <button> or <input> with type="button" should be used for buttons: <button id="savechanges">save</button> note: if using role="button" instead of the semantic <button> or <input type="button"> elements, you will need to make the element focusable and have to define event handlers for click and keydown events, including the enter and space keys, in order to process the user's inpu...
... space activates the button following button activation, focus is set depending on the type of action the button performs.
... for example, if clicking the button opens a dialog, the focus should move to the dialog.
...And 11 more matches
ARIA: feed role - Accessibility
each article within a feed should be focusable, with tabindex of 0 or -1.
... an article should be scrolled into view when it, or a descendant element, receives focus.
... to ensure good user experience, avoid inserting or removing articles in the middle of a feed, load new articles before the user has reached the end of the feed, and provide keyboard commands for moving focus among articles so that keyboard users can navigate through your feed.
...And 10 more matches
ARIA: dialog role - Accessibility
additionally, the following needs to be done: the dialog must be properly labeled keyboard focus must be managed correctly the sections below describe how these two requirements can be met.
... labeling even though it is not required for the dialog itself to be able to receive focus, it still needs to be labeled.
...h is shown in the code snippet below: <div role="dialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <h2 id="dialog1title">your personal details were successfully updated</h2> <p id="dialog1desc">you can change your details at any time in the user account section.</p> <button>close</button> </div> keep in mind that a dialog's title and description text do not have to be focusable in order to be perceived by screen readers operating in a non-virtual mode.
...And 10 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
128 focused xul attributes, xul reference no summary!
... 208 noautofocus xul attributes, xul reference no summary!
... 210 noinitialfocus xul, xul attribute, xul reference no summary!
...And 9 more matches
Styling links - Learn web development
focus: a link when it has been focused (for example moved to by a keyboard user using the tab key or similar, or programmatically focused using htmlelement.focus()) — this is styled using the :focus pseudo class.
... focused links have an outline around them — you should be able to focus on the links on this page with the keyboard by pressing the tab key (on mac, you'll need to use option + tab, or enable the full keyboard access: all controls option by pressing ctrl + f7.) active links are red (try holding down the mouse button on the link as you click it.) interestingly enough, these default styles are nearl...
... make them react in some way when hovered/focused, and in a slightly different way when activated.
...And 9 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
attributes accesskey, alwaysopenpopup, autocompletesearch, autocompletesearchparam, autofill, autofillaftermatch, autofill, completedefaultindex, crop, disableautocomplete, disableautocomplete, disabled, disablehistory, enablehistory, focused, forcecomplete, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, minresultsforpopup, nomatch, onchange, onerrorcommand, oninput, onsearchcomplete, ontextcommand, ontextentered, ontextrevert, ontextreverted, open, readonly, searchsessions, showcommentcolumn, showcommentcolumn, showpopup, size,...
... tabindex, tabscrolling, tabscrolling, timeout, type, useraction, value properties accessible, alwaysopenpopup, autofill, autofillaftermatch, completedefaultindex, crop, disableautocomplete, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, issearching, iswaiting, label, maxlength, maxrows, minresultsforpopup, nomatch, open, popup, popupopen, resultspopup, searchcount, searchparam, searchsessions, selectionend, selectionstart, sessioncount, showcommentcolumn, showpopup, size, tabindex, tabscrolling, textlength, textvalue, timeout, type, useraction, value methods addsession, clearresults, getdefaultsession, getresultat, getresultcount, getresultvalueat, getsession, getsessionbyname, getsessionresultat, getsessio...
...if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...And 8 more matches
ARIA: tab role - Accessibility
when an element with the tabpanel role has focus, or a child of it has focus, that indicates that the connected element with the tab role is the active tab in a tablist.
... associated roles and attributes aria-selected boolean aria-controls id of element with tabpanel role id content keyboard interaction key action tab when focus is outside of the tablist moves focus to the active tab.
... if focus is on the active tab moves focus to the next element in the keyboard focus order, ideally the active tab's associated tabpanel.
...And 8 more matches
Cognitive accessibility - Accessibility
in this document, we focus on steps developers should take to improve the cognitive accessibility of their web sites and applications.
...one way to handle this is to focus on cognitive skills.
...memory processing speed time management letters and language numbers symbols and math understanding and making choices a solid approach to providing accessible solutions for people with cognitive impairments includes: delivering content in more than one way, such as by text-to-speech or by video; providing easily-understood content, such as text written using plain-language standards; focusing attention on important content; minimizing distractions, such as unnecessary content or advertisements; providing consistent web page layout and navigation; incorporating familiar elements, such as underlined links that are blue when not visited and purple when visited; dividing processes into logical, essential steps with progress indicators; making website authentication as easy as poss...
...And 8 more matches
Panels - Archive of obsolete content
focus in panels elements within panels may be focused with the mouse, and the currently focused element may be adjusted by pressing the tab key.
... when a popup is opened, if an element in the main window is focused, that element is unfocused, and a blur event is fired at it.
... although no element within the popup panel is focused by default, the user may focus the first element within the panel by pressing the tab key.
...And 7 more matches
HTML text fundamentals - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%">my short story i am a statistician and my name is trish.
...tcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
... playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%">milk eggs bread hummus</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { marg...
...And 7 more matches
Index - Learn web development
beginner, composing, needsactivelearning, needsschema when starting with a web project, many people focus on the technical side.
...in the next article, we'll focus on numbers in more detail, looking at how to do basic math in javascript.
... 162 styling links article, beginner, css, focus, guide, learn, links, pseudo-class, hover, hyperlinks, menus, tabs we hope this article has provided you with all you'll need to know about links — for now!
...And 7 more matches
Handling common accessibility problems - Learn web development
you can try this out using our native-keyboard-accessibility.html example (see the source code) — open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements; the focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused.
... you can then press enter/return to follow a focused link or press a button (we've included some javascript to make the buttons alert a message), or start typing to enter text in a text input (other form elements have different controls, for example the <select> element can have its options displayed and cycled between using the up and down arrow keys).
...most modern browsers follow the tab pattern described above (you can also do shift + tab to move backwards through the focusable elements), but some browsers have their own idiosyncracies: firefox for the mac doesn't do tabbing by default.
...And 7 more matches
Gecko info for Windows accessibility vendors
events such as focus changes must be tracked through msaa events, rather than dom events.
... anything that is focusable or conveys important information about the structure of the document is exposed in the msaa tree of iaccessibles.
... when you see the content window receive focus, first check the role.
...And 7 more matches
source-editor.jsm
ring aeventtype, function acallback); void removeeventlistener(string aeventtype, function acallback); undo stack operations boolean canredo(); boolean canundo(); void endcompoundchange(); boolean redo(); void resetundo(); void startcompoundchange(); boolean undo(); display management operations void focus(); number gettopindex(); boolean hasfocus(); void settopindex(number atopindex); content management operations number getcharcount(); string getindentationstring(); string getlinedelimiter(); number getlinecount(); number getlineend(number alineindex, boolean aincludedelimiter); number getlinestart(number a...
... constant value description sourceeditor.events.blur "blur" fired when the editor loses focus.
... sourceeditor.events.focus "focus" fired when the editor gains focus.
...And 7 more matches
nsIDOMWindowUtils
blenontestmouseevents(in boolean adisable); boolean dispatchdomeventviapresshell(in nsidomnode atarget, in nsidomevent aevent, in boolean atrusted); nsidomelement elementfrompoint(in float ax, in float ay, in boolean aignorerootscrollframe, in boolean aflushlayout); void entermodalstate(); nsidomelement findelementwithviewid(in nsviewid aid); void focus(in nsidomelement aelement); void forceupdatenativemenuat(in astring indexstring); void garbagecollect([optional] in nsicyclecollectorlistener alistener); short getcursortype(); astring getdocumentmetadata(in astring aname); nsidomwindow getouterwindowwithid(in unsigned long long aouterwindowid); long getpccountscriptcount(); a...
... focusedinputtype string the type of the currently-focused html <input> element, if one is focused.
... ime_status_plugin 3 plug-in has focus.
...And 7 more matches
HTMLInputElement - Web APIs
see also readonly autofocus boolean: returns / sets the element's autofocus attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control.
... only one form element in a document can have the autofocus attribute.
... it cannot be applied if the type attribute is set to hidden (that is, you cannot automatically set focus to a hidden control).
...And 7 more matches
Event reference
focus events event name fired when focus an element has received focus (does not bubble).
... blur an element has lost focus (does not bubble).
... focusin an element is about to receive focus (does bubble).
...And 7 more matches
XUL Events - Archive of obsolete content
inherited dom events event description blur the opposite of the focus event, the blur event is passed after an element loses the focus.
...the event is not sent until the focus is moved to another element.
... focus the focus event is sent to an element when it receives the focus.
...And 6 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
attributes accesskey, autocompletepopup, autocompletesearch, autocompletesearchparam, completedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautoco...
...mplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popupopen, searchcount, searchparam, selectionend, selectionstart, showcommentcolumn, showimagecolumn,size, tabindex, tabscrolling, textlength, textvalue, timeout, type, value methods getsearchat, onsearchcomplete, ontextentered, ontextreverted, select, setselectionrange examples <textbox type="autocomplete" autocompletesearch="history"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...And 6 more matches
Commands - Archive of obsolete content
if you did not use commands, you would need to figure out which field has the focus, then check to ensure that the operation is suitable for that element.
... in addition, the menu commands would need to be enabled and disabled depending on whether the focused element had selected text or not, and for paste operations, whether there is something suitable on the clipboard to paste.
...you should use them when the operation depends on which element is focused.
...And 6 more matches
Updating Commands - Archive of obsolete content
for example, the paste command is valid when a textbox has the focus and there is something on the clipboard to paste.
... the command will become enabled whenever a textbox is focused and when the clipboard contents change.
...a simple command updater looks like this: <commandset id="updatepasteitem" commandupdater="true" events="focus" oncommandupdate="goupdatecommand('cmd_paste');"/> a command updater is indicated by using the commandupdater attribute, which should be set to true.
...And 6 more matches
listbox - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
... currentindex type: integer set to the index of the currently focused item in the list.
...And 6 more matches
richlistbox - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
... currentindex type: integer set to the index of the currently focused item in the list.
...And 6 more matches
textbox - Archive of obsolete content
attributes cols, decimalplaces, disabled, emptytext, hidespinbuttons, increment, label, max, maxlength, min, multiline, newlines, onblur, onchange, onfocus, oninput, placeholder, preference, readonly, rows, searchbutton, size, spellcheck, tabindex, timeout, type, value, wrap, wraparound properties accessibletype, clickselectsall, decimalplaces, decimalsymbol, defaultvalue, disabled, editor, emptytext, increment, inputfield, label, max, maxlength, min, placeholder, readonly, searchbutton, selectionend, selectionstart, size, spinbuttons, tabindex...
...if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... focused type: boolean this attribute is true if the element is focused.
...And 6 more matches
HTMLTextAreaElement - Web APIs
autocomplete autofocus boolean: returns / sets the element's autofocus attribute, indicating that the control should have input focus when the page loads cols unsigned long: returns / sets the element's cols attribute, indicating the visible width of the text area.
... methods blur() removes focus from the control; keystrokes will subsequently go nowhere.
... focus() gives focus to the control; keystrokes will subsequently go to this element.
...And 6 more matches
ARIA: application role - Accessibility
in this mode, the web author is completely responsible for handling any and all keyboard input, focus management, and other interactions and cannot assume assistive technologies would do any processing on their end.
...the screen reader mode, often called forms mode or focus mode, lets all keyboard input go through to the browser again.
... the application role is designed to provide a means for widgets that are not part of the standard set to be accessible for direct interaction in ats that use both browse and focus modes for interacting with web content.
...And 6 more matches
Closures - JavaScript
showhelp(help) { document.getelementbyid('help').innerhtml = help; } function setuphelp() { var helptext = [ {'id': 'email', 'help': 'your e-mail address'}, {'id': 'name', 'help': 'your full name'}, {'id': 'age', 'help': 'your age (you must be over 16)'} ]; for (var i = 0; i < helptext.length; i++) { var item = helptext[i]; document.getelementbyid(item.id).onfocus = function() { showhelp(item.help); } } } setuphelp(); try running the code in jsfiddle.
...the loop cycles through these definitions, hooking up an onfocus event to each one that shows the associated help method.
...no matter what field you focus on, the message about your age will be displayed.
...And 6 more matches
NPEvent - Archive of obsolete content
modifiers: integer; end; xwindows typedef xevent npevent; fields npevent on microsoft windows the data structure has the following fields: event one of the following event types: wm_paint wm_lbuttondown wm_lbuttonup wm_lbuttondblclk wm_rbuttondown wm_rbuttonup wm_rbuttondblclk wm_mbuttondown wm_mbuttonup wm_mbuttondblclk wm_mousemove wm_keyup wm_keydown wm_setcursor wm_setfocus wm_killfocus for information about these events, see the microsoft windows developer documentation.
...values: 0 nullevent 1 mousedown 2 mouseup 3 keydown 4 keyup 5 autokey 6 updateevt 7 diskevt 8 activateevt 15 osevt 23 khighlevelevent getfocusevent 0, 1 (true, false) losefocusevent adjustcursorevent 0, 1 (true, false) for information about these events, see the mac os developer documentation.
...the event type may be any of the ollowing: graphicsexpose focusin focusout enternotify leavenotify motionnotify buttonpress buttonrelease keypress keyrelease description microsoft windows description the type npevent represents an event passed by npp_handleevent() to a windowless plug-in.
...And 5 more matches
XForms Input Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding special inputmode - not supported for this control incremental - supported.
...if "false", or the incremental attribute is omitted on this element then the bound instance node will be updated when the control loses the focus.
...if "false" then the instance node will be updated when the checkbox loses the focus.
...And 5 more matches
HTML: A good basis for accessibility - Learn web development
open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements.
... the focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused.
... you can then press enter/return to follow a focused link or press a button (we've included some javascript to make the buttons alert a message), or start typing to enter text in a text input.
...And 5 more matches
HTML: A good basis for accessibility - Learn web development
open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements.
... the focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused.
... you can then press enter/return to follow a focused link or press a button (we've included some javascript to make the buttons alert a message), or start typing to enter text in a text input.
...And 5 more matches
UI pseudo-classes - Learn web development
:focus: selects an element only when it is focused (i.e.
... note: to enter an invalid/out-of-range value, you'll have to actually focus the form and type it in using the keyboard.
... a fragment of the html is as follows — note the readonly attribute: <div> <label for="name">name: </label> <input id="name" name="name" type="text" value="mr soft" readonly> </div> if you try the live example, you'll see that the top set of form elements are not focusable, however, the values are submitted when the form is submitted.
...And 5 more matches
Looping code - Learn web development
utton> <p></p> now on to the javascript: const contacts = ['chris:2232322', 'sarah:3453456', 'bill:7654322', 'mary:9998769', 'dianne:9384975']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.addeventlistener('click', function() { let searchname = input.value.tolowercase(); input.value = ''; input.focus(); for (let i = 0; i < contacts.length; i++) { let splitcontact = contacts[i].split(':'); if (splitcontact[0].tolowercase() === searchname) { para.textcontent = splitcontact[0] + '\'s number is ' + splitcontact[1] + '.'; break; } else { para.textcontent = 'contact not found.'; } } }); hidden code 3 <!doctype html> <html> <head> <meta charset="utf-8">...
... <script> const contacts = ['chris:2232322', 'sarah:3453456', 'bill:7654322', 'mary:9998769', 'dianne:9384975']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.addeventlistener('click', function() { let searchname = input.value.tolowercase(); input.value = ''; input.focus(); for (let i = 0; i < contacts.length; i++) { let splitcontact = contacts[i].split(':'); if (splitcontact[0].tolowercase() === searchname) { para.textcontent = splitcontact[0] + '\'s number is ' + splitcontact[1] + '.'; break; } else if (i === contacts.length-1) para.textcontent = 'contact not found.'; } }); </script...
... we store the value entered into the text input in a variable called searchname, before then emptying the text input and focusing it again, ready for the next search.
...And 5 more matches
Accessibility API cross-reference
they also define a list of possible object states, such as focused, read-only, checked, etc.
...they also define a list of possible object states, such as focused, read-only, checked, etc.
... grid a composite widget containing a collection of one or more rows with one or more cells where some or all cells in the grid are focusable by using methods of two-dimensional navigation, such as directional arrow keys, e.g.
...And 5 more matches
All keyboard shortcuts - Firefox Developer Tools
d) ctrl + shift + i or f12 cmd + opt + i or f12 ctrl + shift + i or f12 close toolbox (if the toolbox is in a separate window and in foreground) ctrl + shift + i or f12 cmd + opt + i or f12 ctrl + shift + i or f12 open web console 1 ctrl + shift + k cmd + opt + k ctrl + shift + k toggle "pick an element from the page" (opens the toolbox and/or focus the inspector tab) ctrl + shift + c cmd + opt + c ctrl + shift + c open style editor shift + f7 shift + f7 * shift + f7 open profiler shift + f5 shift + f5 * shift + f5 open network monitor 2 ctrl + shift + e cmd + opt + e ctrl + shift + e toggle responsive design mode ctrl + shift + m cmd + opt + m ctrl + shift + m ...
...instead, it focuses on the web console's command line.
... enter return enter step forward through the attributes of a node tab tab tab step backward through the attributes of a node shift + tab shift + tab shift + tab (when an attribute is selected) start editing the attribute enter return enter hide/show the selected node h h h focus on the search box in the html pane ctrl + f cmd + f ctrl + f edit as html f2 f2 f2 stop editing html f2 / ctrl +enter f2 / cmd + return f2 / ctrl + enter copy the selected node's outer html ctrl + c cmd + c ctrl + c scroll the selected node into view s s s find the next match in the markup, when searching is...
...And 5 more matches
Selection.setBaseAndExtent() - Web APIs
syntax sel.setbaseandextent(anchornode,anchoroffset,focusnode,focusoffset) parameters anchornode the node at the start of the selection.
... focusnode the node at the end of the selection.
... focusoffset the number of child nodes from the start of the focus node that should be included in the selection.
...And 5 more matches
Window - Web APIs
WebAPIWindow
window.blur() sets focus away from the window.
... window.focus() sets focus on the current window.
... globaleventhandlers.onblur called after the window loses focus, such as due to a popup.
...And 5 more matches
<button>: The Button element - HTML: Hypertext Markup Language
WebHTMLElementbutton
autofocus html5 this boolean attribute specifies that the button should have input focus when the page loads.
... disabled this boolean attribute prevents the user from interacting with the button: it cannot be pressed or focused.
... hand tremors and the giant-button-problem - axess lab firefox firefox will add a small dotted border on a focused button.
...And 5 more matches
<select>: The HTML Select element - HTML: Hypertext Markup Language
WebHTMLElementselect
it also accepts most of the general form input attributes such as required, disabled, autofocus, etc.
... autofocus this boolean attribute lets you specify that a form control should have input focus when the page loads.
... only one form element in a document can have the autofocus attribute.
...And 5 more matches
panel - Archive of obsolete content
// // set the focus to the text area so the user can // just start typing.
... self.port.on("show", function onshow() { textarea.focus(); }); finally, the "text-entry.html" file defines the <textarea> element: <html> <head> <style type="text/css" media="all"> textarea { margin: 10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> </body> </html> finally, save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png to learn much more about content scripts, see the working with content scripts guide.
...// // set the focus to the text area so the user can // just start typing.
...And 4 more matches
Finding window handles - Archive of obsolete content
os specific examples using javascript (js-ctypes) nsibasewindow -> nativehandle in all of the examples below, the native handle to the most recent navigator:browser is obtained and then it is focused.
...acerequestor) .getinterface(ci.nsibasewindow); var gdkwindowptrstring = basewindow.nativehandle; components.utils.import('resource://gre/modules/ctypes.jsm'); var gdk = ctypes.open('libgdk-x11-2.0.so.0'); // types let guint32 = ctypes.uint32_t; let gdkwindow = ctypes.structtype('gdkwindow'); // https://developer.gnome.org/gdk3/stable/gdk3-windows.html#gdk-window-focus var gdk_window_focus = gdk.declare('gdk_window_focus', ctypes.default_abi, ctypes.void_t, gdkwindow.ptr, guint32); // https://developer.gnome.org/gdk2/stable/gdk2-x-window-system-interaction.html#gdk-x11-get-server-time var gdk_x11_get_server_time = gdk.declare('gdk_x11_get_server_time', ctypes.default_abi, guint32, gdkwindow.ptr); var browserwindow_madeintogdkwinptr = gdkwindow.ptr(ctypes.uint...
...64(gdkwindowptrstring)); var rez_gst = gdk_x11_get_server_time(browserwindow_madeintogdkwinptr); console.info('rez_gst:', rez_gst, uneval(rez_gst)); // return is a number of ms since the computer (xserver) was on var rez_gwf = gdk_window_focus(browserwindow_madeintogdkwinptr, rez_gst); console.info('rez_gwf:', rez_gwf, uneval(rez_gwf)); // return is void so this will be undefined gdk.close(); gtk+ components.utils.import('resource://gre/modules/services.jsm'); var browserwindow = services.wm.getmostrecentwindow('navigator:browser'); if (!browserwindow) { throw new error('no browser window found'); } var basewindow = browserwindow.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsiwebnavigation) .queryinterface(ci.n...
...And 4 more matches
Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
this could be useful when trapping the focus and blur events.
...valid event types are those supported by xul and javascript, such as click and focus.
...similarly, you may wish to change a property when the element is focused.
...And 4 more matches
Keyboard Shortcuts - Archive of obsolete content
however, it would be tedious to do that for every button and menu item (though it could be necessary when one's key commands are only triggered when the user is focused on a particular element).
...these events are: keypress called when a key is pressed and released when an element has the focus.
... keydown called when a key is pressed down while an element has the focus.
...And 4 more matches
panel - Archive of obsolete content
ArchiveMozillaXULpanel
attributes backdrag, close, consumeoutsideclicks, fade, flip, ignorekeys, label, left, level, noautofocus, noautohide, norestorefocus, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, titlebar, top, type properties accessibletype, label, popupboxobject, popup, state methods hidepopup, moveto, openpopup, openpopupatscreen, sizeto examples the following example shows how a panel may be attached to a label.
... noautofocus type: boolean if false, the default value, the currently focused element will be unfocused whenever the popup is opened or closed.
... if true, the focus is not adjusted.
...And 4 more matches
radiogroup - Archive of obsolete content
attributes disabled, focused, preference, tabindex, value properties accessibletype, disabled, focuseditem, itemcount, selectedindex, selecteditem, tabindex, value methods appenditem, checkadjacentelement, getindexofitem, getitematindex, insertitemat, removeitemat examples <radiogroup> <radio id="orange" label="red"/> <radio id="violet" label="green" selected="true"/> <radio id="yellow" label="blue"/> ...
...if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... focused type: boolean this attribute is true if the element is focused.
...And 4 more matches
tree - Archive of obsolete content
ArchiveMozillaXULtree
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
...for trees with focus, the caret's position is indicated by the focus ring, but unfocused trees won't show a focus ring, naturally.
...And 4 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
it's based on the stream-focused transport layer security (tls), providing a similar level of security.
...it is the software that handles communication between components and input/output, so developers can focus on the specific purpose of their application.
... 273 mobile first design, glossary, layout, layout mobile mobile first, a form of progressive enhancement, is a web-development and web-design approach that focuses on prioritizing design and development for mobile screen sizes over design and development for desktop screen sizes.
...And 4 more matches
Basic native form controls - Learn web development
previous overview: forms next in the previous article, we marked up a functional web form example, introducing some form controls and common structural elements, and focusing on accessibility best practices.
... the following screenshot shows default, focused and disabled text input types in firefox 71 and safari on macos and in chrome 79 and edge 18 on windows 10.
...because it is hidden, the user can not see nor intentionally edit the value, it will never receive focus, and a screen reader will not notice it either.
...And 4 more matches
A first splash into JavaScript - Learn web development
} function resetgame() { guesscount = 1; const resetparas = document.queryselectorall('.resultparas p'); for(let i = 0 ; i < resetparas.length ; i++) { resetparas[i].textcontent = ''; } resetbutton.parentnode.removechild(resetbutton); guessfield.disabled = false; guesssubmit.disabled = false; guessfield.value = ''; guessfield.focus(); lastresult.style.backgroundcolor = 'white'; randomnumber = math.floor(math.random() * 100) + 1; } </script> </body> </html> have a go at playing it — familiarize yourself with the game before you move on.
...extcontent = '!!!game over!!!'; setgameover(); } else { lastresult.textcontent = 'wrong!'; lastresult.style.backgroundcolor = 'red'; if(userguess < randomnumber) { loworhi.textcontent = 'last guess was too low!'; } else if(userguess > randomnumber) { loworhi.textcontent = 'last guess was too high!'; } } guesscount++; guessfield.value = ''; guessfield.focus(); } this is a lot of code — phew!
...we add 1 to the guesscount variable so the player uses up their turn (++ is an incrementation operation — increment by 1), and empty the value out of the form text field and focus it again, ready for the next guess to be entered.
...And 4 more matches
Useful string methods - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 125px;"> <ul> </ul> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 290px; width: 95%"> const list = document.queryselector('.output ul'); list.innerhtml = ''; let greetings = ['happy birthday!', 'merry christmas my love', 'a happy christmas to all the family', 'you\'re all i want for christmas', ...
...ext) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
... playable code 2 <h2>live output</h2> <div class="output" style="min-height: 125px;"> <ul> </ul> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 250px; width: 95%"> const list = document.queryselector('.output ul'); list.innerhtml = ''; let cities = ['london', 'manchester', 'birmingham', 'liverpool']; for (let i = 0; i < cities.length; i++) { let input = cities[i]; // write your code just below here let result = inp...
...And 4 more matches
Aprender y obtener ayuda - Learn web development
different learning methods it is interesting to consider that there are two main ways in which your brain learns things — focused and diffuse learning: focused learning is what you might more traditionally associate with academic subjects.
...you are focused on a narrow area.
...you might think that focused learning is better for studying, but in reality, both are very important.
...And 4 more matches
Beginning our React todo list - Learn web development
defining user stories before we begin our work will help us focus our work.
... implementing our styles paste the following css code into src/index.css so that it replaces what's currently there: /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; outline-offset: 0; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoot...
...hing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { bo...
...And 4 more matches
Starting our Svelte Todo list app - Learn web development
replace the contents of the file public/global.css with the following: /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; outline-offset: 0; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoot...
...hing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { b...
...th: 50rem; margin-left: auto; margin-right: auto; } .todoapp > form { max-width: 100%; } .todoapp > h1 { display: block; max-width: 100%; text-align: center; margin: 0; margin-bottom: 1rem; } .label__lg { line-height: 1.01567; font-weight: 300; padding: 0.8rem; margin-bottom: 1rem; text-align: center; } .input__lg { padding: 2rem; border: 2px solid #000; } .input__lg:focus { border-color: #4d4d4d; box-shadow: inset 0 0 0 2px; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .filters { width: 100%; margin: unset auto; } /* todo item styles */ .todo { display: flex; flex-direc...
...And 4 more matches
TypeScript support in Svelte - Learn web development
math.max(...todos.map(t => t.id)) + 1 : 1 function addtodo(name: string) { todos = [...todos, { id: newtodoid, name, completed: false }] $alert = `todo '${name}' has been added` } function removetodo(todo: todotype) { todos = todos.filter(t => t.id !== todo.id) todosstatus.focus() // give focus to status heading $alert = `todo '${todo.name}' has been deleted` } function updatetodo(todo: todotype) { const i = todos.findindex(t => t.id === todo.id) if (todos[i].name !== todo.name) $alert = `todo '${todos[i].name}' has been renamed to '${todo.name}'` if (todos[i].completed !== todo.completed) $alert = `todo '${todos[i].name}' mar...
...set its type to htmlelement like this: let nameel: htmlelement // reference to the name input dom node last for this file, we need to specify the correct type for our autofocus variable; update its definition like this: export let autofocus: boolean = false todo.svelte now the only warnings that npm run validate emits are triggered by calling the todo.svelte component; let's fix them.
...(ts) const focusoninit = (node) => node && typeof node.focus === 'function' && node.focus() ./07-next-steps/src/components/todo.svelte:47:28 warn: parameter 'node' implicitly has an 'any' type, but a better type may be inferred from usage.
...And 4 more matches
Understanding client-side JavaScript frameworks - Learn web development
accessibility in react in our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in react, which can improve usability and reduce confusion for both keyboard-only and screen reader users.
...focus management with vue refs we are nearly done with vue.
... the last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility.
...And 4 more matches
Index
MozillaTechXPCOMIndex
this chapter will focus on the functionality that actually handles the web locking.
... 258 focusedchild focused accessible child of node.
... 286 takefocus this method focuses this accessible node.
...And 4 more matches
nsIDocShell
void setcurrenturi(in nsiuri auri); void suspendrefreshuris(); void tabtotreeowner(in boolean forward, out boolean tookfocus); attributes attribute type description allowauth boolean certain dochshells (like the message pane) should not throw up auth dialogs because it can act as a password trojan.
... canvashasfocus boolean tells the docshell whether the canvas should have focus.
... called by the focus manager when the user tabs to the frame rather than an element.
...And 4 more matches
nsISelectionController
selection_find 128 num_selectiontypes 8 9 selection_anchor_region 0 selection_focus_region 1 selection_whole_selection 2 num_selection_regions 2 3 selection_off 0 selection_hidden 1 hidden displays selection.
...this will also have the effect of collapsing the selection if the extend = pr_false the "point" of selection that is extended is considered the "focus" point, or the last point adjusted by the selection.
...completemove() will move page view to the top or bottom of the document this will also have the effect of collapsing the selection if the extend = pr_false the "point" of selection that is extended is considered the "focus" point, or the last point adjusted by the selection.
...And 4 more matches
DocumentOrShadowRoot.activeElement - Web APIs
the activeelement read-only property of the document and shadowroot interfaces returns the element within the dom or shadow dom tree that currently has focus.
...other times the focused element might be a <select> element (menu) or an <input> element, of type "button", "checkbox", or "radio".
... typically a user can press the tab key to move the focus around the page among focusable elements, and use the space bar to activate one (that is, to press a button or toggle a radio button).
...And 4 more matches
Window.open() - Web APIs
WebAPIWindowopen
firefox (51.) gets the handle but cannot run any element.focus() while chrome can run focus() from opener to child but not between siblings nor, reverse, from child to opener.
...*/ } else { windowobjectreference.focus(); /* else the window reference must exist and the window is not closed; therefore, we can bring it back on top of any other window with the focus() method.
...e situations, therefore re-usable in scripts and webpages: <script type="text/javascript"> var windowobjectreference = null; // global variable function openrequestedpopup(url, windowname) { if(windowobjectreference == null || windowobjectreference.closed) { windowobjectreference = window.open(url, windowname, "resizable,scrollbars,status"); } else { windowobjectreference.focus(); }; } </script> (...) <p><a href="http://www.spreadfirefox.com/" target="promotefirefoxwindow" onclick="openrequestedpopup(this.href, this.target); return false;" title="this link will create a new window or will re-use an already opened one" >promote firefox adoption</a></p> you can also make such function able to open only 1 secondary window and to reuse such single secondary window...
...And 4 more matches
ARIA: document role - Accessibility
because ats with reading mode default to that mode for all elements except for those with a widget or application role set, document role is only useful for focusable elements within a widget or application that should be read as static rich text.
... adding role="document" and tabindex="0" to the element containing the text within a widget enables the screen reader user to press the tab key to place focus on the document element and read the text with the screen reader's reading cursor.
... tabindex="0" used to make it focusable so the assistive technology user can tab to it and start reading right away.
...And 4 more matches
tabindex - HTML: Hypertext Markup Language
the tabindex global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation (usually with the tab key, hence the name).
... it accepts an integer as a value, with different results depending on the integer's value: a negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation, but could be focused with javascript or visually by clicking with the mouse.
...the user won't be able to focus any element with a negative tabindex using the keyboard, but a script can do so by calling the focus() method.
...And 4 more matches
Adding windows and dialogs - Archive of obsolete content
focus and tabbing moving through all input controls in a window using only the keyboard is an accessibility requirement.
...each tab key press moves you to the next control in the window, giving it focus.
... in general, there's nothing you need to do in order to have good keyboard focus management.
...And 3 more matches
PopupKeys - Archive of obsolete content
focus in popups a menu does not take the keyboard focus.
...while a menu is open, the focus remains where it was before the menu was open.
... for example, focusing a textbox and opening the textbox's context menu keeps the focus within the textbox.
...And 3 more matches
XPCOM Examples - Archive of obsolete content
that means that in order to switch the window focus, we need to do the following: determine the element that the user clicked on.
... switch the focus to this window.
... the example below shows how we might do this: <toolbox> <menubar id="windowlist-menubar"> <menu label="window" oncommand="switchfocus(event.target);"> <menupopup id="window-menu" datasources="rdf:window-mediator" ref="nc:windowmediatorroot"> <template> <rule> <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </rule> </template> </menupopup> </menu> </menubar> </toolbox> <script> function switchfocus(elem) { var mediator = components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"].getservice(); mediator.queryinterface(components.interfaces.nsiwindowdatasource); var resource = elem.getattribute('id'); switchwindow = mediator.getwindowforresource(resource); if (switchwindow){ switchwindow.focus(); } } </s...
...And 3 more matches
label - Archive of obsolete content
ArchiveMozillaXULlabel
if the user clicks the label, it will move the focus to the associated control, specified with the control attribute.
...when the user clicks on the label, the associated element is given focus.
...if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...And 3 more matches
tabs - Archive of obsolete content
ArchiveMozillaXULtabs
attributes closebutton, disableclose, disabled, onclosetab, onnewtab, onselect, setfocus, selectedindex, tabbox, tabindex, tooltiptextnew, value, properties accessibletype, disabled, itemcount, selectedindex, selecteditem, tabindex, value, methods advanceselectedtab, appenditem, getindexofitem, getitematindex, insertitemat, removeitemat examples (example needed) attributes closebutton obsolete since gecko 1.9.2 type: boolean if this attribute i...
...if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... setfocus type: boolean if true or omitted, the focus will be given to the first element in the corresponding tabpanel when the tabs are navigated via the keyboard.
...And 3 more matches
Advanced text formatting - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> bacon the glue that binds the world together.
...ext) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
... playable code 2 <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 150px; width: 95%"> <p>hello and welcome to my motivation page.
...And 3 more matches
Getting started with HTML - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> this is my text.
...tcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
... playable code2 <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px;width: 95%"> &lt;p&gt;a link to my favorite website.&lt;/p&gt; </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size:...
...And 3 more matches
Arrays - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 150px;"> <ul> </ul> <p></p> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 410px;width: 95%"> const list = document.queryselector('.output ul'); const totalbox = document.queryselector('.output p'); let total = 0; list.innerhtml = ''; totalbox.textcontent = ''; // number 1 'underpants:6.99' 'socks:5.99' 't-s...
...ext) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
... playable code 2 <h2>live output</h2> <div class="output" style="min-height: 150px;"> <input type="text"><button>search</button> <ul> </ul> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 370px; width: 95%"> const list = document.queryselector('.output ul'); const searchinput = document.queryselector('.output input'); const searchbtn = document.queryselector('.output button'); list.innerhtml = ''; let myhistory = []; searchbtn.onclick = function() { // we will...
...And 3 more matches
Getting started with Ember - Learn web development
introducing ember ember is a component-service framework that focuses on the overall web application development experience, minimizing the trivial differences between applications — all while being a modern and light layer on top of native javascript.
...there are a couple of github issues open about this on the todomvc family of projects: add keyboard access to demos re-enable outline on focusable elements ember has a strong commitment to being accessible by default and there is an entire section of the ember guides on accessibility on what it means for website / app design.
... that said, because this tutorial is a focus on the javascript side of making a small web application, todomvc's value comes from providing pre-made css and recommended html structure, which eliminates small differences between implementations, allowing for easier comparison.
...And 3 more matches
Ember app structure and componentization - Learn web development
to start with, delete the contents of application.hbs and replace them with the following: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" autofocus > </section> note: aria-label provides a label for assistive technology to make use of — for example, for a screenreader to read out.
...update the application.hbs file again so its content looks like this: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" autofocus > <section class="main"> <input id="mark-all-complete" class="toggle-all" type="checkbox"> <label for="mark-all-complete">mark all as complete</label> <ul class="todo-list"> <li> <div class="view"> <input aria-label="toggle the completion of this todo" class="toggle" type="checkbox" > <label>buy movi...
...e tickets</label> <button type="button" class="destroy" title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo text"> </li> <li> <div class="view"> <input aria-label="toggle the completion of this todo" class="toggle" type="checkbox" > <label>go to movie</label> <button type="button" class="destroy" title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo text"> </li> </ul> </section> <footer class="footer"> <span class="todo-count"> <strong>0</strong> todos left </span> <ul...
...And 3 more matches
Styling Vue components with CSS - Learn web development
add the following contents to the reset.css file: /*reset.css*/ /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -web...
...kit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { /* 1 */ overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 "helvetica neue", helvetica, arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ next, in your src/main.js file, import the reset.css file like so: import './assets/reset.css'; this will cause the file to get picked up during the ...
... update your app.vue file’s <style> element so it looks like so: <style> /* global styles */ .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__danger:focus { outline-color: #c82333; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 auto; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: center; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*=...
...And 3 more matches
Accessibility information for UI designers and developers
see also: understanding sc 1.4.3: contrast the focus indicator users who navigate by keyboard (or other specialised input methods), rely on focus styles to see where they are on the page.
... only one element has focus at a given time, typically revealed by browsers with a dotted outline.
... css lets authors change what the focus indicator look like, so you can design it to match branding.
...And 3 more matches
Overview of Mozilla embedding APIs
contract-id: ns_webbrowser_contractid implemented interfaces: nsiwebbrowser nsiwebnavigation nsiwebbrowsersetup nsiwebbrowserpersist nsiwebbrowserfind nsiwebbrowserprint nsiwebbrowserfocus nsibasewindow requestor interfaces: nsidomwindow nsidomdocument nsiwebprogress nsiclipboardcommands nsiprompt related interfaces: nsiprompt nsiwebbrowserchrome nsiwebbrowsersitewindow nsiwebprogresslistener nsicontextmenulistener nsiprintoptions overview: most of gecko's functionality is exposed through the nswebbrowser component.
...the search is always performed within the domwindow which currently has the focus.
... focus management focus managment within the webbrowser is accessed via the nsiwebbrowserfocus interface.
...And 3 more matches
nsISelection
focusnode nsidomnode returns the node in which the selection ends.
... focusoffset long the offset within the (text) node where the selection ends.
...when the selection is collapsed(), and the content is focused and editable, the caret will blink there.
...And 3 more matches
Hit regions and accessibility - Web APIs
partially overlaying the <a href="http://en.wikipedia.org/wiki/circle" onfocus="drawcircle();" onblur="drawpicture();">circle</a>.
... partially overlaying the circle is a green <a href="http://en.wikipedia.org/wiki/square" onfocus="drawsquare();" onblur="drawpicture();">square</a> and a purple <a href="http://en.wikipedia.org/wiki/triangle" onfocus="drawtriangle();" onblur="drawpicture();">triangle</a>, both of which are semi-opaque, so the full circle can be seen underneath.</p> </canvas> see the video how nvda reads this example by steve faulkner.
... focus rings when working with the keyboard, focus rings are a handy indicator to help navigating on a page.
...And 3 more matches
Window: blur event - Web APIs
WebAPIWindowblur event
the blur event fires when an element has lost focus.
... the opposite of blur is focus.
... bubbles no cancelable no interface focusevent event handler property onblur sync / async sync composed yes examples live example this example changes the appearance of a document when it loses focus.
...And 3 more matches
Using the link role - Accessibility
when this role is added to an element, tab can be used to change focus to the link, and enter used to execute the link.
...native <a> elements also support keyboard and focus requirements by default, without need for additional customization.
... assistive technology products should listen for such an event and notify the user accordingly: screen readers should announce the text of the link or its label when it is focused, along with the fact that it is a link.
...And 3 more matches
ARIA: textbox role - Accessibility
associated aria properties aria-activedescendent attribute taking as it's value the id of is either a descendant of the element with dom focus or is a logical descendant as indicated by the aria-owns attribute, it indicates when that element has focus, when it is part of a composite widget such as a combobox.
... for example, in a combobox, focus may remain on the textbox while the value of aria-activedescendant on the textbox element refers to a descendant of a popup listbox that is controlled by the textbox.this attribute must be updated programmatically as the focus changes.
...the hint should be a sample value or a brief description of the expected format.this information should not be used as a substitute for a label: a label is focusable, permanent, indicates what kind of information is expected, and increases the hit area for setting focus on the control, whereas placeholder text is only temporary hint about the expected value, which if implemented incorrectly can decrease accessibility.
...And 3 more matches
disabled - HTML: Hypertext Markup Language
the boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form.
... the user can neither edit nor focus on the control, nor it's form control descendants.
...often browsers grey out such controls and it won't receive any browsing events, like mouse clicks or focus-related ones.
...And 3 more matches
Firefox user agent string reference - HTTP
form factor gecko user agent string phone mozilla/5.0 (android 4.4; mobile; rv:41.0) gecko/41.0 firefox/41.0 tablet mozilla/5.0 (android 4.4; tablet; rv:41.0) gecko/41.0 firefox/41.0 focus for android from version 1, focus is powered by android webview and uses the following user agent string format: mozilla/5.0 (linux; <android version> <build tag etc.>) applewebkit/<webkit rev> (khtml, like gecko) version/4.0 focus/<focusversion> chrome/<chrome rev> mobile safari/<webkit rev> tablet versions on webview mirror mobile, but do not contain a mobile token.
... starting in version 6, users can opt into using a geckoview-based focus for android with a hidden preference: it uses a geckoview ua string to advertise gecko compatibility.
... focus version (rendering engine) user agent string 1.0 (webview mobile) mozilla/5.0 (linux; android 7.0) applewebkit/537.36 (khtml, like gecko) version/4.0 focus/1.0 chrome/59.0.3029.83 mobile safari/537.36 1.0 (webview tablet) mozilla/5.0 (linux; android 7.0) applewebkit/537.36 (khtml, like gecko) version/4.0 focus/1.0 chrome/59.0.3029.83 safari/537.36 6.0 (geckoview) mozilla/5.0 (android 7.0; mobile; rv:62.0) gecko/62.0 firefox/62.0 klar for android since version 4.1, klar for android uses the same ua string as focus for android.
...And 3 more matches
Miscellaneous - Archive of obsolete content
firefox 3 / gecko 1.9: var utils = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindowutils); utils.sendmouseevent("mousedown", 10, 10, 0, 1, 0); utils.sendmouseevent("mouseup", 10, 10, 0, 1, 0); getting the currently selected text from browser.xul overlay context: var selectedtext = document.commanddispatcher.focusedwindow.getselection().tostring(); or: content.getselection(); // |window| object is implied; i.e., window.content.getselection() or: getbrowserselection(); // |window| object is implied; i.e., window.getbrowserselection() this final option massages the selection to remove leading and trailing whitespace.
... see also http://mxr.mozilla.org/seamonkey/source/browser/base/content/browser.js#4674 discovering which element in the loaded document has focus // focusedcontrol stores the focused field, or null if there is none.
... var focusedcontrol; window.addeventlistener("load", function(e) { onwindowload(e); }, false); function onwindowload() { gbrowser.addeventlistener("load", onpageload, true); } function onpageload() { pagedoc = document.commanddispatcher.focusedwindow.document; var inputlist = pagedoc.getelementsbytagname('input'); for (var i=1; i<inputlist.length; i++) { inputlist.item(i).
...And 2 more matches
Tabbed browser - Archive of obsolete content
tabbrowser.selectedtab = tabbrowser.tabcontainer.childnodes[index]; // focus *this* browser-window browserwin.focus(); found = true; break; } } } // our url isn't open.
...if such a tab exists, we change its url/uri and focus/select it.
... if (currenttab.hasattribute(attrname)) { // yes--select and focus it.
...And 2 more matches
menulist - Archive of obsolete content
attributes accesskey, crop, disableautoselect, disabled, editable, focused, image, label, oncommand, open, preference, readonly, sizetopopup, tabindex, value properties accessibletype, crop, description, disableautoselect, disabled, editable, editor, image, inputfield, itemcount, label, menuboxobject, menupopup, open, selectedindex, selecteditem, tabindex, value methods appenditem, contains, getindexofitem, getitematindex, insertitemat, removeallitems, remov...
...if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... focused type: boolean this attribute is true if the element is focused.
...And 2 more matches
radio - Archive of obsolete content
ArchiveMozillaXULradio
attributes accesskey, command, crop, disabled, focused, group, image, label, selected, tabindex, value properties accesskey, accessibletype, control, crop, disabled, image, label, radiogroup, selected, tabindex, value examples <radiogroup> <radio id="orange" label="red" accesskey="r"/> <radio id="violet" label="green" accesskey="g" selected="true"/> <radio id="yellow" label="blue" accesskey="b" disabled="true"/> </radiogroup> at...
...if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... focused type: boolean this attribute is true if the element is focused.
...And 2 more matches
WAI-ARIA basics - Learn web development
where this is unavoidable, wai-aria provides a means to allow other elements to receive focus (using tabindex).
... however, sometimes you will end up having to write code that either uses non-semantic elements as buttons (or other types of control), or uses focusable controls for not quite the right purpose.
... in terms of making non-focusable code focusable, wai-aria extends the tabindex attribute with some new values: tabindex="0" — as indicated above, this value allows elements that are not normally tabbable to become tabbable.
...And 2 more matches
Client-side form validation - Learn web development
in this chapter we are focusing on client-side validation.
...note how the invalid input gets focus, a default error message ("please fill out this field") appears, and the form is prevented from being sent.
...xtarea> </p> <p> <button>submit</button> </p> </form> and now some css to style the html: form { font: 1em sans-serif; max-width: 320px; } p > label { display: block; } input[type="text"], input[type="email"], input[type="number"], textarea, fieldset { width : 100%; border: 1px solid #333; box-sizing: border-box; } input:invalid { box-shadow: 0 0 5px 1px red; } input:focus:invalid { box-shadow: none; } this renders as follows: see validation-related attributes for a complete list of attributes that can be used to constrain input values and the input types that support them.
...And 2 more matches
Mozilla's Section 508 Compliance
(c) a well-defined on-screen indication of the current focus shall be provided that moves among interactive interface elements as the input focus changes.
... the focus shall be programmatically exposed so that assistive technology can track focus and focus changes.
...we expose focus programmatically via msaa (windows) and atk (linux/unix).
...And 2 more matches
Embedding the editor
the editing session will forward commands to the individual editors depending on focus, and mediate undo/redo between them.
...the implementation of the editing session would be responsible for swapping out the editor's state on focus changes etc.
... ensure that focus changes between editors update the window's notion of the "current" editor.
...And 2 more matches
nsIDOMXULElement
66 introduced gecko 1.0 inherits from: nsidomelement last changed in gecko 1.9 (firefox 3) method overview void blur(); void click(); void docommand(); void focus(); nsidomnodelist getelementsbyattribute(in domstring name, in domstring value); nsidomnodelist getelementsbyattributens(in domstring namespaceuri, in domstring name, in domstring value); attributes attribute type description align domstring gets/sets the value of the element's align attribute.
...returns an nsicontrollers object that additional controllers may be appended to so as to provide focus-specific actions for commands.
... methods blur() attempts to remove focus from the element.
...And 2 more matches
nsIEditorIMESupport
obsolete since gecko 1.9.1 void notifyimeonblur(); obsolete since gecko 1.9.1 void notifyimeonfocus(); obsolete since gecko 1.9.1 void querycomposition(in nstexteventreplyptr areply); native code only!
...notify for ime when the editor lost focus.
...notifyimeonfocus() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0)this feature is obsolete.
...And 2 more matches
Page inspector keyboard shortcuts - Firefox Developer Tools
enter return enter step forward through the attributes of a node tab tab tab step backward through the attributes of a node shift + tab shift + tab shift + tab (when an attribute is selected) start editing the attribute enter return enter hide/show the selected node h h h focus on the search box in the html pane ctrl + f cmd + f ctrl + f edit as html f2 f2 f2 stop editing html f2 / ctrl +enter f2 / cmd + return f2 / ctrl + enter copy the selected node's outer html ctrl + c cmd + c ctrl + c scroll the selected node into view s s s find the next match in the markup, when searching is...
... active enter return enter find the previous match in the markup, when searching is active shift + enter shift + return shift + enter breadcrumbs bar these shortcuts work when the breadcrumbs bar is focused.
... command windows macos linux move to the previous element in the breadcrumbs bar left arrow left arrow left arrow move to the next element in the breadcrumbs bar right arrow right arrow right arrow focus the html pane shift + tab shift + tab shift + tab focus the css pane tab tab tab css pane these shortcuts work when you're in the inspector's css pane.
...And 2 more matches
Element: blur event - Web APIs
the blur event fires when an element has lost focus.
... the main difference between this event and focusout is that focusout bubbles while blur does not.
... the opposite of blur is focus.
...And 2 more matches
Element - Web APIs
WebAPIElement
element.tabstop is a boolean indicating if the element can receive input focus via the tab key.
... focus events blur fired when an element has lost focus.
... focus fired when an element has gained focus.
...And 2 more matches
GlobalEventHandlers.onblur - Web APIs
the blur event is raised when an element loses focus.
... note: the opposite of onblur is onfocus.
...the function receives a focusevent object as its sole argument.
...And 2 more matches
HTMLAnchorElement - Web APIs
element.accesskey is a domstring representing a single character that switches input focus to the hyperlink.
... htmlelement.blur() removes the keyboard focus from the current element.
... htmlelement.focus() gives the keyboard focus to the current element.
...And 2 more matches
HTMLSelectElement - Web APIs
htmlselectelement.autofocus a boolean reflecting the autofocus html attribute, which indicates whether the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control.
... htmlselectelement.blur() removes input focus from this element.
... htmlselectelement.focus() gives input focus to this element.
...And 2 more matches
The HTML DOM API - Web APIs
html dom concepts and usage in this article, we'll focus on the parts of the html dom that involve engaging with html elements.
... support for interacting with the user by examining focus and by executing commands on editable content.
... these element-specific interfaces make up the majority of the html dom api, and are the focus of this article.
...And 2 more matches
ARIA: timer role - Accessibility
focus is being managed via xxx.
...the one exception is if focus xxx.
... required javascript features keypress used to handle keyboard input and control the focus click, touch handle as appropriate for your widget as well changing attribute values aria-activedescendant is used to manage the focus inside the application container.
...And 2 more matches
Alerts - Accessibility
this notifies the user of the error, but allows for them continue modifying the form without losing focus (caused by the “onblur” handler in javascript's default ‘alert’ function).
... in both cases, when returning focus to the field in question, your screen reader should tell you that this field is invalid.
...why don’t you set focus back to the invalid field automatically?
...And 2 more matches
An overview of accessible web applications and widgets - Accessibility
a user presses tab to focus each link, button, or form on the page in a linear order, using shift-tab to navigate backwards.
... here's a summary of how keyboard navigation should work in an aria-enabled web application: the tab key should provide focus to the widget as a whole.
... for example, tabbing to a menu bar should not put focus on the menu's first element.
...And 2 more matches
Understandable - Accessibility
guideline 3.1 — readable: make text content readable and understandable this guideline focuses on making text content as understandable as possible.
... guideline 3.2 — predictable: make web pages appear and operate in predictable ways this guideline focuses on making user interfaces intuitive and understandable.
... success criteria how to conform to the criteria practical resource 3.2.1 on focus (a) when a control or other page feature receives focus, it should not change the context in a way that may confuse or disorientate the user.
...And 2 more matches
outline - CSS: Cascading Style Sheets
WebCSSoutline
accessibility concerns assigning outline a value of 0 or none will remove the browser's default focus style.
... if an element can be interacted with it must have a visible focus indicator.
... provide obvious focus styling if the default focus style is removed.
...And 2 more matches
<textarea> - HTML: Hypertext Markup Language
WebHTMLElementtextarea
the <textarea> element also accepts several attributes common to form <input>s, such as autocomplete, autofocus, disabled, placeholder, readonly, and required.
... autofocus this boolean attribute lets you specify that a form control should have input focus when the page loads.
...droidfirefox for androidopera for androidsafari on iossamsung internettextareachrome full support yesedge full support 12firefox full support yesnotes full support yesnotes notes before firefox 6, when a <textarea> was focused, the insertion point was placed at the end of the text by default.
...And 2 more matches
window/utils - Archive of obsolete content
parameters window : nsidomwindow returns boolean getfocusedwindow() gets the child window within the topmost browser window that is focused.
... see nsifocusmanager for more details.
... returns nsidomwindow getfocusedelement() get the element that is currently focused.
... this will always be an element within the document loaded in the focused window, or null if no element in that document is focused.
Creating annotations - Archive of obsolete content
annotation editor content script in the corresponding content script we do two things: handle a message from the add-on code by giving the text area focus listen for the return key and when it is pressed, send the contents of the text area to the add-on.
... here's the code: var textarea = document.getelementbyid('annotation-box'); textarea.onkeyup = function(event) { if (event.keycode == 13) { self.postmessage(textarea.value); textarea.value = ''; } }; self.on('message', function() { var textarea = document.getelementbyid('annotation-box'); textarea.value = ''; textarea.focus(); }); save this inside data/editor as annotation-editor.js.
...editor = panels.panel({ width: 220, height: 220, contenturl: data.url('editor/annotation-editor.html'), contentscriptfile: data.url('editor/annotation-editor.js'), onmessage: function(annotationtext) { if (annotationtext) { console.log(this.annotationanchor); console.log(annotationtext); } annotationeditor.hide(); }, onshow: function() { this.postmessage('focus'); } }); we create the editor panel but don't show it.
... we will send the editor panel the focus message when it is shown, so it will give the text area focus.
Adding Events and Commands - Archive of obsolete content
for a button, it represents the action of the user clicking on it, or focusing it with the keyboard and then pressing the enter key.
... onfocus and onblur.
... used when an element receives or loses focus when the user is navigating with the keyboard.
... you can combine these with -moz-user-focus to add custom focus behavior to elements that normally wouldn't have it.
Tabs - Archive of obsolete content
ArchiveMozillaJetpackUITabs
blah(lengthstringfocusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded.
... onfocus()changing the focus of a tab.
... urlurl to be openedstring jetpack.tabs.open("http://www.example.com/"); blah(lengthstringfocusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded.
... onfocus()changing the focus of a tab.
Accessibility/XUL Accessibility Reference - Archive of obsolete content
caption see groupbox checkbox <checkbox label='<!--label text-->' /> colorpicker <colorpicker type="button" palettename="standard" /> colorpicker appears to read color values out if the colorpicker can get focus in the first place.
... column see grid columns see grid command see keyboard shortcut tutorial commandset see keyboard shortcut tutorial deck only the currently selected deck layer can be focused.
... jaws indicates percentage to the user radio see radiogroup radiogroup <label value='<!--radio group-->' control='radioid' /> <radiogroup id='radioid'> <radio selected="true" label='<!--option1-->' /> <radio label='<!--option2-->' /> </radiogroup> row see grid rows see grid stack all elements can be focused, even if not visible due to being hidden under something else statusbar <statusbar> <statusbarpanel label="<!--status bar-->" flex="1"/> </statusbar> read using jaws with insert+page down statusbarpanel see statusbar tab see tabbox tabbox <tabbox> <tabs> <tab label="<!--tab text-->" /> </tabs> <tabpanels> <...
... </tabpanel> </tabpanels> focusing the tabbox will visually set focus to the selected tab, then you can select different tabs by using the left and right arrow keys.
command - Archive of obsolete content
typically, this will be the currently focused element.
...see also: command attribute, commandset element attributes disabled, label, oncommand,reserved examples the following code will send a paste command (cmd_paste) to the currently focused element: // first include chrome://global/content/globaloverlay.js godocommand("cmd_paste"); example with two buttons <commandset><command id="cmd_openhelp" oncommand="alert('help');"/></commandset> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> attributes disabled type: boolean indicates whether the element is disabled or not.
...if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
listitem - Archive of obsolete content
this is typically used by a theme to customize the focus ring.
...if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
tabbox - Archive of obsolete content
thus, if this attribute is not used, the tabbox or an element inside it must have the focus for the keyboard navigation to apply.
...tab navigation will occur as long as any element in the window is focused.
...tab navigation will occur as long as any element in the document is focused.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
toolbarbutton - Archive of obsolete content
where not possible, make all toolbarbuttons focusable by -moz-user-focus: normal.
...if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
XForms Custom Controls - Archive of obsolete content
*/ void refresh(); /** * is called when focus is advanced to the xforms element.
... */ boolean focus(); /** * is called when control should be disabled.
...focus() is used by the processor to tell the control that it is getting focus through one of a variety of ways (i.e.
... through xf:setfocus action) and that the control needs to ensure that the proper widget is given focus.
Implementation Status - Archive of obsolete content
xforms-recalculate supported 4.3.3 xforms-revalidate supported 4.3.4 xforms-refresh supported 4.3.5 xforms-reset supported 4.3.6 xforms-next xforms-previous supported 4.3.7 xforms-focus supported 4.3.8 xforms-help xforms-hint supported 4.3.9 xforms-submit partial see section 11.2 for more details 4.3.10 xforms-submit-serialize supported 4.4 notification events supported ...
... 4.4.8 xforms-required supported 4.4.9 xforms-optional supported 4.4.10 xforms-enabled supported 4.4.11 xforms-disabled supported 4.4.12 domactivate supported 4.4.13 domfocusin supported 4.4.14 domfocusout supported 4.4.15 xforms-select xforms-deselect supported 4.4.16 xforms-in-range supported 4.4.17 xforms-out-of-range supported 4.4.18 xforms-scroll-...
... 4.6.3 for select or select1 controls partial 4.6.4 for trigger controls supported 4.6.5 for submit controls supported 4.6.6 sequence: selection without value change supported 4.6.7 sequence: value change with focus change supported 4.6.8 sequence: activating a trigger supported 4.6.9 sequence: submission supported 4.7 resolving id references in xforms unsupported 4.7.1 references to elements within a repeat element unsupported ...
... 303198; 339217; 10.4 delete partial we need to better handle when @at evaluates to nan 303198; 10.5 setindex supported 10.6 toggle supported 10.7 setfocus supported 10.8 dispatch supported 10.9 rebuild partial is dispatching events instead of calling directly 332231; 10.10 recalculate partial is dispatching events instead of calling directly.
XForms Select1 Element - Archive of obsolete content
accesskey - used to specify the keyboard shortcut for focusing this control.
...loses focus), otherwise it is updated upon item selection xul widget characteristics analogous widgets are <html:select/> and <xul:menulist/> visual grouping by choices element isn't implemented selection="open" attribute isn't supported if incremental attribute value is false, the bound node is updated when the select control is blurred (i.e.
... loses focus), otherwise it is updated upon item selection listbox the select1 is represented as listbox (xhtml/xul).
...loses focus), otherwise it is updated upon item selection radio group the select is represented as group of radios (xhtml/xul).
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
focusing on the software development portion of an organization, there are numerous standards bodies that can affect development decisions.
... telecommunication union ) oasis (organization for the advancement of structured information standards ) oma (open mobile alliance ), uni (unicode consortium ) w3c (world wide web consortium ) iana (internet assigned numbers authority ) ecma international like the processes and standards that accountants and project managers must follow, the above-mentioned standards organizations provide focus and direction for the development engineering community.
...adhering to a set of future-focused international standards will make cross-functional integration possible.
...following proprietary de facto standards leaves an organization vulnerable and open to obsolescence when the owner of the de facto changes focus or direction, or abandons the de facto altogether and renders the standard stagnate.
Game monetization - Game development
the word itself acquired negative connotations after big companies focused on creating games, the main purpose of which was to get as much money from the players as possible instead of delivering a fun experience.
... other non-game focused monetization strategies there are other ways you can earn money when building html5 games, and it doesn't even have to be game-related.
...if you focus on sharing the knowledge first and use your games just as the examples it should be ok.
...you might however also focus on selling licenses, doing branding, or earning on a revenue share basis from the advertisements.
Pseudo-classes and pseudo-elements - Learn web development
:focus — only applies if the user focuses the element using keyboard controls.
... :focus matches when an element has focus.
... :focus-visible matches when an element has focus and the focus should be visible to the user.
... :focus-within matches an element with focus plus an element with a descendent that has focus.
Adding vector graphics to the Web - Learn web development
(external stylesheets invoked from the svg file take no effect.) you cannot restyle the image with css pseudoclasses (like :focus).
... inlining svg is the only approach that lets you use css interactions (like :focus) and css animations on your svg image (even in your regular stylesheet.) you can make svg markup into a hyperlink by wrapping it in an <a> element.
... playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="width: 95%;min-height: 200px;"> <svg width="100%" height="100%"> <rect width="100%" height="100%" fill="red" /> <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /> <polygon points="120,0 240,225 0,225" fill="green"/> <text x="50" y="100" font-family="verdana" font-s...
...ext) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
Images in HTML - Learn web development
if you get really stuck, press the show solution button to see an answer: playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> <img> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-a...
...tcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
...if you get really stuck, press the show solution button to see an answer: playable code 2 <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: ...
...tcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
Making decisions in your code — conditionals - Learn web development
"june">june</option> <option value="july">july</option> <option value="august">august</option> <option value="september">september</option> <option value="october">october</option> <option value="november">november</option> <option value="december">december</option> </select> <h1></h1> <ul></ul> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 400px;width: 95%"> const select = document.queryselector('select'); const list = document.queryselector('ul'); const h1 = document.queryselector('h1'); select.onchange = function() { const choice = select.value; // add conditional here createcalendar(days, choice); } func...
...ext) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
... <label for="theme">select theme: </label> <select id="theme"> <option value="white">white</option> <option value="black">black</option> <option value="purple">purple</option> <option value="yellow">yellow</option> <option value="psychedelic">psychedelic</option> </select> <h1>this is my website</h1> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 450px;width: 95%"> const select = document.queryselector('select'); const html = document.queryselector('.output'); select.onchange = function() { const choice = select.value; // add switch statement } function update(bgcolor, textcolor) { html.style.backgroundcolor = bgco...
...ext) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
Web performance - Learn web development
this is known as web performance, and in this module you'll focus on the fundamentals of how to create performant websites.
... the rest of our beginner's learning material tried to stick to web best practices such as performance and accessibility as much as possible, however, it is good to focus specifically on such topics too, and make sure you are familiar with them.
... css performance features css may be a less important optimization focus for improved performance, but there are some css features that impact performance more than others.
... focusing on performance there are many different things a developer can do to improve performance, but how fast is fast enough?
Introduction to client-side frameworks - Learn web development
you often have to employ advanced framework apis to access native browser features like aria live regions or focus management.
...the browser knows to set focus to the top of the page and assistive technologies will announce the title of the page.
... with client-side routing, your browser is not loading new web pages, so it doesn't know that it should automatically adjust focus or announce a new page title.
...ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
React resources - Learn web development
reach router is well-suited to simpler applications, and automatically manages focus as the user navigates from page to page.
... focus management is essential in client-side routing — without it, keyboard users can be trapped in focus limbo, and screen-reader users may have no idea that they have moved to a new page.
...when this merge happens, react router will be the surviving project (with the addition of the focus management features of reach).
...ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Mozilla accessibility architecture
accessibility apis are used by 3rd party software like screen readers, screen magnifiers, and voice dictation software, which need information about document content and ui controls, as well as important events like changes of focus.
...all focusable nodes, tables and text have accessibility interfaces.
...the assistive technology can choose to get the entire tree by using a depth- or breadth- first search, it can choose to get accessibles only based on events like focus, or it can get the accessible at a given point on the screen.
... gecko events (or callback) event type accessibility event focus, select standard html dom event event_focus dommenuitemactive, dommenubaractive mozilla dom event_focus domnodeinserted w3c dom mutation event event_create (atk) event_reorder (msaa) domsubtreemodified w3c dom mutation event event_reorder domnoderemoved w3c dom mutation event ...
Gecko states
applied to: role_menuitem, role_cell, role_outlineitem, xxx: continue events: event_state_change Сoncomitant state: state_selectable state_focused the object is focused applied to: events: concomitant state: state_focusable state_pressed the object is pressed.
...a speech-based accessibility aid does not announce information when an object with this state has the focus because the object automatically announces information.
... isn't used state_focusable the object can be focused.
... applied to: events: concomitant state: state_focused state_selectable the object can be selected.
nsIAccessible
the accessible tree is a subset of nodes in the dom tree -- such as documents, focusable elements and text.
... focus and selection in order to focus an accessible or get focused child accessible use nsiaccessible.takefocus() and nsiaccessible.focusedchild.
... takefocus this method focuses this accessible node.
... focusedchild focused accessible child of node.
nsIAccessibleHyperLink
selected boolean determines whether the element currently has the focus, for example after returning from the destination page.
... note: aria links can only be focused if they have the tabindex attribute set.
... also, state_focused should then be set on the accessible for this link.
... return value true if the element currently has the focus.
nsITextInputProcessor
tip.appendclausetopendingcomposition("foo-".length, tip.attr_converted_clause); tip.appendclausetopendingcomposition("bar".length, tip.attr_selected_clause); tip.appendclausetopendingcomposition("-buzz".length, tip.attr_converted_clause); // then, sets the caret if you need tip.setcaretinpendingcomposition("foo-bar".length); // finally, flush the pending composition on the focused editor if (!tip.flushpendingcomposition()) { return; // composition is not started } if there is no composition, flushpendingcomposition() starts composition with dispatching compositionstart event automatically.
... boolean begininputtransaction(in nsidomwindow awindow, in nsitextinputprocessorcallback acallback); parameters awindow the dom window which has focused editor.
... boolean begininputtransactionfortests(in nsidomwindow awindow, in nsitextinputprocessorcallback acallback optional); parameters awindow the dom window which has focused editor.
... flushpendingcomposition() flushes the pending composition which are set by setpendingcompositionstring(), appendclausetopendingcomposition(), and setcaretinpendingcomposition() on the focused editor.
Clients.openWindow() - Web APIs
elf.registration.shownotification('you\'ve got messages!', notificationobject); } // notification click event listener self.addeventlistener('notificationclick', e => { // close the notification popout e.notification.close(); // get all the window clients e.waituntil(clients.matchall({ type: 'window' }).then(clientsarr => { // if a window tab matching the targeted url already exists, focus that; const hadwindowtofocus = clientsarr.some(windowclient => windowclient.url === e.notification.data.url ?
... (windowclient.focus(), true) : false); // otherwise, open a new tab to the applicable url and focus it.
... if (!hadwindowtofocus) clients.openwindow(e.notification.data.url).then(windowclient => windowclient ?
... windowclient.focus() : null); })); }); specifications specification status comment service workersthe definition of 'clients: openwindow' in that specification.
Selection.extend() - Web APIs
WebAPISelectionextend
the selection.extend() method moves the focus of the selection to a specified point.
...the selection will be from the anchor to the new focus, regardless of direction.
... syntax sel.extend(node, offset) parameters node the node within which the focus will be moved.
... offset optional the offset position within node where the focus will be moved to.
A simple RTCDataChannel sample - Web APIs
when the local peer experiences an open or close event, the handlesendchannelstatuschange() method is called: function handlesendchannelstatuschange(event) { if (sendchannel) { var state = sendchannel.readystate; if (state === "open") { messageinputbox.disabled = false; messageinputbox.focus(); sendbutton.disabled = false; disconnectbutton.disabled = false; connectbutton.disabled = true; } else { messageinputbox.disabled = true; sendbutton.disabled = true; connectbutton.disabled = false; disconnectbutton.disabled = true; } } } if the channel's state has changed to "open", that indicates that we have finished e...
...the user interface is updated correspondingly by enabling the text input box for the message to send, focusing the input box so that the user can immediately begin to type, enabling the "send" and "disconnect" buttons, now that they're usable, and disabling the "connect" button, since it is not needed when the conneciton is open.
...that method is simple enough: function sendmessage() { var message = messageinputbox.value; sendchannel.send(message); messageinputbox.value = ""; messageinputbox.focus(); } first, the text of the message is fetched from the input box's value attribute.
...the rest of this method is just some user experience sugar -- the input box is emptied and re-focused so the user can immediately begin typing another message.
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
instead, a zoom shot changes the magnification of the camera over time to make the area of focus seem closer to or farther away from the viewer, without actually physically moving the camera.
... a slow move can bring a sense of movement, ease, or focus to a scene, while a rapid zoom can create a sense of anxiety, surprise, or tension.
...the resulting motion can create impressively smooth effects, especially if moving along with the person or object that's the focus of your shot.
...the camera doesn't rotate at all, so the focus of the shot slowly glides off the screen.
Fundamentals of WebXR - Web APIs
a vr headset is worn on the head, with a strap that goes behind the head to fasten it in place, and one or two displays whose screens are focused into the eyes using lenses.
... the vast majority of headsets use a single display whose frame is divided in half, with one half focused onto each of the user's eyes.
... for example, if a headset uses a 2560x1440 screen, with the left half being used for the left eye's view and the right half or the right eye's view, the framebuffer is used like this: the simplest headsets have no integrated sensors, and simply focus each half of the screen into the corresponding eye.
... there are a number of theories surrounding exactly what about virtual reality causes some people to feel uncomfortable or sick, most of which focusing on the idea that even subtle differences between what the brain thinks should be happening and what is being seen can cause these symptoms.
XRSession.visibilityState - Web APIs
the read-only visibilitystate property of the xrsession interface is a string indicating whether the webxr content is currently visible to the user, and if it is, whether it's the primary focus.
... syntax visibilitystate = xrsession.visibilitystate; value a domstring containing one of the values defined in the enumerated type xrvisibilitystate; this string indicates whether or not the xr content is visible to the user and if it is, whether or not it's currently the primary focus.
... visible the virtual scene rendered by the xrsession is currently visible to the user and is the primary focus of the user's attention.
... visible-blurred while the virtual scene rendered by the xrsession may currently be visible to the user, it is not the user's primary focus at the moment; it's also possible the session is not currently visible at all.
Using the alertdialog role - Accessibility
unlike regular alerts, an alert dialog must have at least one focusable control and focus must be moved to that control when the alert dialog appears.
... generally alert dialogs have at least a confirmation, close or cancel button that can be used to move focus to.
...which particular control focus should be moved to depends on the purpose of the dialog.
... when the alert dialog is correctly labeled and focus is moved to a control inside the dialog, screen readers should announce the dialog's accessible role, name and optionally description before announcing the focused element.
Operable - Accessibility
for example, if you press enter/return on a focused button to open an options window, you should be able to close that window again and return to the main content using the keyboard.
... see ui controls and building keyboard accessibility back in 2.1.4 character key shortcuts (a) added in 2.1 if a single character key shortcut exists, then at least one of the following is true: single character key shortcuts can be turned off, remapped or are only active when the relevant user interface component is in focus.
... 2.4.3 logical focus order (a) the "tabbing order" of focusable page features (e.g.
... 2.4.7 visible focus for focusable elements (aa) when tabbing through focusable elements such as links or form inputs, there should be a visual indicator to show you which element currently has focus.
:-moz-ui-invalid - CSS: Cascading Style Sheets
this pseudo-class is applied according to the following rules: if the control does not have focus, and the value is invalid, apply this pseudo-class.
... if the control has focus, and the value was valid (including empty) when it gained focus, do not apply the pseudo-class.
... if the control has focus, and the value was invalid when it gained focus, re-validate on every keystroke.
... the result is that if the control was valid when the user started interacting with it, the validity styling is changed only when the user shifts focus to another control.
:-moz-ui-valid - CSS: Cascading Style Sheets
this pseudo-class is applied according to the following rules: if the control does not have focus, and the value is valid, apply this pseudo-class.
... if the control has focus, and the value was valid (including empty) when it gained focus, apply this pseudo-class.
... if the control has focus, and the value was invalid when it gained focus, re-validate on every keystroke.
... the result is that if the control was valid when the user started interacting with it, the validity styling is changed only when the user shifts focus to another control.
Media - Progressive web apps (PWAs)
many pages in this tutorial focused on the css properties and values, as well as how you use these to specify the way that content displays.
... there are five special selectors: selector selects e:hover any e element that has the pointer over it e:focus any e element that has keyboard focus e:active the e element that is involved in the current user action e:link any e element that is a hyperlink to a url that the user has not visited recently e:visited any e element that is a hyperlink to a url that the user has visited recently note: the information that can be obtained from the :visited selector ...
...ctual pointer shapes in your browser: selector selects pointer indicating a link wait indicating that the program cannot accept input progress indicating that the program is working, but can still accept input default the default (usually an arrow) an outline property creates an outline that is often used to indicate keyboard focus.
...tive">click me</button></td> </tr> <tr style="line-height:25%;"> <td>&nbsp;</td> </tr> <tr style="font-style:italic;"> <td>disabled</td> <td>normal</td> <td>active</td> </tr> </tbody> </table> live sample a fully functional button also has a dark outline around the entire button when it is the default, and a dotted outline on the face of the button when it has keyboard focus.
Windows - Archive of obsolete content
re-using and focusing named windows while specifying the name parameter to window.open or window.opendialog will prevent multiple windows of that name from opening, each call will actually re-initialize the window and thus lose whatever state the user has put it in.
...if it finds one, it focuses it.
... var wenum = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher) .getwindowenumerator(); var index = 1; var windowname = "yourwindowname"; while (wenum.hasmoreelements()) { var win = wenum.getnext(); if (win.name == windowname) { win.focus(); return; } index++ } window.open("chrome://to/your/window.xul", windowname, "features"); uniquely identifying dom windows requires gecko 2.0(firefox 4 / thunderbird 3.3 / seamonkey 2.1) in gecko, each dom window has a unique 64-bit id number.
Extension Etiquette - Archive of obsolete content
focus don't steal focus.
... it's not your extension's job to take focus from the web content.
... if the user loads a website and they ask for focus, they should get it.
eventnode - Archive of obsolete content
thus, if this attribute is not used, the tabbox or an element inside it must have the focus for the keyboard navigation to apply.
...tab navigation will occur as long as any element in the window is focused.
...tab navigation will occur as long as any element in the document is focused.
Attribute (XUL) - Archive of obsolete content
aces default defaultbutton defaultset description dir disableautocomplete disableautoselect disableclose disabled disablehistory disablekeynavigation disablesecurity dlgtype dragging editable editortype element empty emptytext deprecated since gecko 2 enablecolumndrag enablehistory equalsize eventnode events expr firstdayofweek firstpage first-tab fixed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply i...
...nverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline multiple name negate newlines next noautofocus noautohide noinitialfocus nomatch norestorefocus object observes onbeforeaccept onbookmarkgroup onchange onclick onclosetab oncommand oncommandupdate ondialogaccept ondialogcancel ondialogclosure ondialogextra1 ondialogextra2 ondialoghelp onerror onerrorcommand onextra1 onextra2 oninput onload onnewtab onpageadvanced onpagehide onpagerewound onpageshow onpaneload onpopuphidden onpopuphiding onpopupshowing onpopupshown ...
...l orient pack pageid pageincrement pagestep parent parsetype persist persistence phase pickertooltiptext placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton 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 valida...
currentIndex - Archive of obsolete content
for trees with focus, the caret's position is indicated by the focus ring, but unfocused trees won't show a focus ring, naturally.
... for unfocused trees, the (undrawn) caret's position can still be obtained by this property.
... if the caret isn't present for any row (for example, because the tree has never been focused), the value will be -1.
listbox.currentIndex - Archive of obsolete content
« xul reference currentindex type: integer set to the index of the currently focused item in the list.
... if no item is focused, the value will be -1.
...in a multiple selection list, the currently focused row may be modified by the user without changing the selection by pressing the control key and pressing the cursor keys to navigate.
Adding Labels and Images - Archive of obsolete content
when the user clicks on an associated label, that control will be focused.
...set the value of the control attribute to the id of the element to be focused.
... example 3 : source view <label value="click here:" control="open-button"/> <button id="open-button" label="open"/> in the example above, clicking the label will cause the button to be focused.
arrowscrollbox - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
... inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
button - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
checkbox - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
colorpicker - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
... value property gets and sets color attribute methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
datepicker - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
description - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
menuitem - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
...datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
menuseparator - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
preference - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
... inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
richlistitem - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
scale - Archive of obsolete content
ArchiveMozillaXULscale
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
tab - Archive of obsolete content
ArchiveMozillaXULtab
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
timepicker - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...the tab order is the order in which the focus is moved when the user presses the "tab" key.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
Theme changes in Firefox 2 - Archive of obsolete content
beline #feedsubscribeoptions #feedsubscribeoptionsgroup #feedsubscribeoptionsgrouptitle #feedtitlecontainer #feedtitleimage #feedtitlelink #readercontainer #readergroup #readers #readers > listitem .feedentrycontent .feedsubscribebutton .feedsubscribebutton .button-icon .feedsubscribelink .feedsubscribelinkbox .field .link .link:hover:active .plain .plain > .button-box .plain:focus > .button-box .stylelessborderless the default theme also includes styles for a[href] img, body, h1, h2, and html.
... browser.css the following styles that were used in firefox 1.5 are no longer used in firefox 2 and have been removed: tab:focus tab[beforeselected="true"] > .tab-image-right tab[selected="true"] > .tab-image-left tab[selected="true"] > .tab-image-middle tab[selected="true"] > .tab-image-right the following styles are new in firefox 2: .alltabs-item > .menu-iconic-left > .menu-iconic-icon .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon .alltabs-item[selected="true"] .tab-close-button .tab-close-but...
...="true"] > .tab-close-button .tabbrowser-tab[selected="true"] > .tab-close-button:hover .tabbrowser-tab[selected="true"] > .tab-close-button:hover:active .tabbrowser-tabs[overflow="true"] .tabs-alltabs-box .tabs-alltabs-box .tabs-alltabs-box:hover .tabs-alltabs-box[flash="true"] tab > .tab-image-left tab > .tab-image-middle tab > .tab-image-middle > .tab-text tab > .tab-image-right tab:focus > .tab-image-middle > .tab-text tab:hover:not([selected="true"]) > .tab-image-left tab:hover:not([selected="true"]) > .tab-image-middle tab:hover:not([selected="true"]) > .tab-image-right tab:not([selected="true"]) > .tab-image-left tab:not([selected="true"]) > .tab-image-middle tab[selected="true"] .tab-image-middle > .tab-text you may of course wish to make changes to other styles as we...
Game promotion - Game development
when writing a tutorial remember to focus on delivering something valuable to the reader.
...focus on one aspect and try to explain it throughout and in detail.
...it's important to focus on the knowledge part and tone down the marketing — devs are sensitive on this matter and you may end up with an angry crowd if you just try to sell them something.
Practical positioning examples - Learn web development
first, we'll set the :focus and :hover states of the tabs to look different when they are focused/hovered, providing users with some visual feedback.
...place the following css below your other styles: .info-box li a:focus, .info-box li a:hover { background-color: #a60000; color: white; } .info-box li a.active { background-color: #a60000; color: white; } styling the panels the next job is to style our panels.
...in addition, the effect is not great in terms of accessibility; the label is not focusable by default, and the non-semantic use of the form elements could cause issues with screen readers.
Typesetting a community school homepage - Learn web development
links: give the link, visited, focus, and hover states some colors that go with the color of the horizontal bars at the top and bottom of the page.
... make it so that links are underlined by default, but when you hover or focus them, the underline disappears.
... remove the default focus outline from all the links on the page.
Example 1 - Learn web development
alue">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : b...
...alue">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; box-sizing : border-box; padding : 0.1em 2.
...e">cherry</span> <ul class="optlist"> <li class="option highlight">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : b...
Test your skills: Advanced styling - Learn web development
one thing that is inconsistent across browsers (particularly looking at safari here) is the position of the standard blue focus outline.
... there is a major problem with just getting rid of the blue focus outline.
...can you add some kind of styling back in so that users can tell when the search box is being hovered or focused?
Manipulating documents - Learn web development
in this article we'll focus mostly on manipulating the document, but we'll show a few other useful bits besides.
... the input should be emptied and focused ready for you to enter another item.
... finally, use the focus() method to focus the input element ready for entering the next shopping list item.
Video and Audio APIs - Learn web development
the contents of aria-label attributes are read out by screenreaders when their users focus on the elements that contain them.
...first of all, notice the .controls styling: .controls { visibility: hidden; opacity: 0.5; width: 400px; border-radius: 10px; position: absolute; bottom: 20px; left: 50%; margin-left: -200px; background-color: black; box-shadow: 3px 3px 5px black; transition: 1s all; display: flex; } .player:hover .controls, player:focus .controls { opacity: 1; } we start off with the visibility of the custom controls set to hidden.
...only when you are hovering/focusing over the player do the controls appear at full opacity.
Getting started with React - Learn web development
this article is going to focus on the use case of using react to render the entire user interface of an application, using tooling provided by facebook’s own create-react-app tool.
... variables in jsx back in app.js, let’s focus on line 9: <img src={logo} classname="app-logo" alt="logo" /> here, the <img /> tag's src attribute value is in curly braces.
...ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Experimental features in Firefox
nightly 75 no developer edition 75 no beta 75 no release 75 no preference name layout.css.conic-gradient.enabled and gfx.webrender.all pseudo-class: :focus-visible allows focus styles to be applied to elements like buttons and form controls, only when they are focused using the keyboard (e.g.
... when tabbing between elements), and not when they are focused using a mouse or other pointing device.
... nightly 75 no developer edition 75 no beta 75 no release 75 no preference name layout.css.focus-visible.enabled single numbers as aspect ratio in media queries support for using a single <number> as a <ratio> when specifying the aspect ratio for a media query.
Release phase
we'll primarily focus on getting your release repository setup and the mercurial commands you'll need to know to use that repository.
... focus is on technical accuracy and completion of l10n work; not translation quality.
... focus is still on technical accuracy and completion of l10n work; not translation quality.
Profiling with the Firefox Profiler
it has tighter integration with firefox than external profilers, and has more of a platform focus than the devtools performance panel.
... tip: focus on one section of the tree by clicking on the "arrow-in-a-circle" icon that appears to the right of the tree element as you hover over it.
... as we focus on using this tool and add additional sample labels coverage should improve.
Hacking Tips
one tip is to start looking at a script with an inverted js stack to locate the most expensive js function, then to focus on the frame of this js function, and to remove the inverted stack and look at c++ part of this function to determine from where the cost is coming from.
... using ionmonkey spew (js shell) ionmonkey spew is extremely verbose (not as much as the infer spew), but you can filter it to focus on the list of compiled scripts or channels, ionmonkey spew channels can be selected with the ionflags environment variable, and compilation spew can be filtered with ionfilter.
... $ ionfilter=pdfjs.js:16934 ionflags=logs,scripts,osi,bailouts ./js --ion-offthread-compile=off ./run.js 2>&1 | less the bailouts channel is likely to be the first thing you should focus on, because this means that something does not stay in ionmonkey and fallback to the interpreter.
Gecko events
is supported: no event_focus an object has received the keyboard focus.
... is supported: yes states: state_focused, state_busy, xxx: event_location_change an object has changed location, shape, or size.
...event_hypertext_changed focus has changed from one hypertext object to another, or focus moved from a non-hypertext object to a hypertext object, or focus moved from a hypertext object to a non-hypertext object.
XForms Accessibility
he wrote: navindex was in xforms - it was stripped out as it was believed the focus model was dependent on the content which used it.
...if you use xhtml2 use nextfocus.
...note, we support -moz-user-focus style neither for xhtml or xul.
nsIAccessibleStates
state_focused 0x00000004 the object is focused.
...a speech-based accessibility aid does not announce information when an object with this state has the focus because the object automatically announces information.
... state_focusable 0x00100000 the object can be focused.
nsITextInputProcessorNotification
this is typically notified when user clicks somewhere, focus is moved, or web contents modify the value of the editor during composition.
... "notify-focus" when an editable editor gets focus, this is notified.
... "notify-blur" when an editable editor loses focus, this is notified.
Examine and edit CSS - Firefox Developer Tools
while in the rules view, you can press ctrl / cmd + f to focus the search field.
...-thumb :-moz-range-track :-moz-selection if the selected element has pseudo-elements applied to it, they are displayed before the selected element but hidden by a disclosure triangle: clicking the triangle displays them: viewing common pseudo-classes there's a button to the right of the filter box: click the button to see checkboxes that you can use to enable the :hover, :active and :focus, :focus-within and :visited pseudo-classes for the selected element: this feature can also be accessed from the popup menu in the html view.
... while in the computed view, you can press ctrl / cmd + f to focus the search field.
Examine and edit HTML - Firefox Developer Tools
subtree modification attribute modification node removal use in console show dom properties show accessibility properties change pseudo-class hover active focus focus-within visited screenshot node scroll into view copy inner html outer html css selector css path xpath image data-url attribute paste inner html outer html before after as first child as last child expand all collapse all open link in new tab * open file in debugger * open file in style-editor * copy link address * ...
... (change pseudo-class) focus set the :focus css pseudo-class.
... (change pseudo-class) focus-within set the :focus-within css pseudo-class.
Using the CSS properties and values API - Web APIs
that property is then transitioned on hover or focus to a different color.
... .registered { --registered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } <button class="registered">background registered</button> <button class="unregistered">background not registered</button> .registered { --registered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--regi...
...stered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } button { height: 40vh; display: block; width: 100%; font-size: 3vw; } window.css.registerproperty({ name: '--registered', syntax: '<color>', inherits: false, initialvalue: 'red', }); while not functionally accurate, a good way to think about the difference between the unregistered property in the above example and the registered property is the difference between a <custom-ident> and a number when trying to animate he...
Document.alinkColor - Web APIs
gecko supports both alinkcolor/:active and :focus.
... internet explorer 6 and 7 support alinkcolor/:active only for html anchor (<a>) links and the behavior is the same as :focus under gecko.
... there is no support for :focus in ie.
Document - Web APIs
WebAPIDocument
documentorshadowroot.activeelementread only returns the element within the shadow tree that has focus.
... globaleventhandlers.onfocus is an eventhandler representing the code to be called when the focus event is raised.
... document.hasfocus() returns true if the focus is currently located anywhere inside the specified document.
Using the Gamepad API - Web APIs
connecting to a gamepad when a new gamepad is connected to the computer, the focused page first receives a gamepadconnected event.
... if a gamepad is already connected when the page loaded, the gamepadconnected event is dispatched to the focused page when the user presses a button or moves an axis.
...gamepadconnected), a second event is dispatched to the focused window, gamepaddisconnected: window.addeventlistener("gamepaddisconnected", function(e) { console.log("gamepad disconnected from index %d: %s", e.gamepad.index, e.gamepad.id); }); the gamepad's index property will be unique per-device connected to the system, even if multiple controllers of the same type are used.
Key Values - Web APIs
qt::key_camera (0x01100020) keycode_camera (27) "camerafocus" the focus key.
... focuses the camera.
... qt::key_camerafocus (0x01100021) keycode_focus (80) "endcall" the end call or hang up button.
RTCDataChannel: open event - Web APIs
finally, the message input box is focused so the user can immediately begin to type.
... dc.addeventlistener("open", ev => { messageinputbox.disabled = false; sendmessagebutton.disabled = false; disconnectbutton.disabled = false; connectbutton.disabled = true; messageinputbox.focus(); }, false); this can also be done by directly setting the value of the channel's onopen event handler property.
... dc.onopen = ev => { messageinputbox.disabled = false; sendmessagebutton.disabled = false; disconnectbutton.disabled = false; connectbutton.disabled = true; messageinputbox.focus(); } ...
Selection API - Web APIs
working draft the selection api specification is based on the html editing apis specification and focuses on the selection-related functionality.
... nochrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yesfocusnode experimentalchrome full support yesedge full support 12firefox full support 3.6ie full support 10opera full support yessafari full support ...
... yeschrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yesfocusoffset experimentalchrome full support yesedge full support 12firefox full support yesie ?
WindowClient - Web APIs
windowclient.focus() gives user input focus to the current client.
... windowclient.focused read only a boolean that indicates whether the current client has focus.
... example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) { client.focus(); break; } } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification statu...
XRVisibilityState - Web APIs
the xrvisibilitystate enumerated type defines the string values which are valid for the xrsession interface's visibilitystate property, which indicates whether or not an xr session is currently visible to the user, and if it is, whether or not it's currently the primary focus.
... visible the virtual scene rendered by the xrsession is currently visible to the user and is the primary focus of the user's attention.
... visible-blurred while the virtual scene rendered by the xrsession may currently be visible to the user, it is not the user's primary focus at the moment; it's also possible the session is not currently visible at all.
Using the aria-hidden attribute - Accessibility
this can improve the experience for assistive technology users by hiding: purely decorative content, such as icons or images duplicated content, such as repeated text offscreen or collapsed content, such as menus according to the fourth rule of aria, aria-hidden="true" should not be used on a focusable element.
... additionally, since this attribute is inherited by an element's children, it should not be added onto the parent or ancestor of a focusable element.
... deciding between aria-hidden="true", role="presentation", and role="none" on the surface, the aria-hidden="true", role="presentation", and role="none" attributes seem similar because they: hide content from assistive technology cannot be used on a focusable element cannot be used on the parent of an interactive element despite these similarities, the intent behind each attribute is different.
ARIA: checkbox role - Accessibility
since a checkbox is an interactive control, it must be focusable and keyboard accessible.
... if the role is applied to a non-focusable element, use the tabindex attribute to change this.
...this attribute has one of three possible values: true the checkbox is checked false the checkbox is not checked mixed the checkbox is partially checked, or indeterminate tabindex="0" used to make it focusable so the assistive technology user can tab to it and start reading right away.
Accessibility documentation index - Accessibility
the position of each cell is significant and can be focused using keyboard input.
... 96 keyboard accessibility, keyboard if an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option).
... 97 operable accessibility, focus, navigation, principle 2, timing, wcag, web content accessibility guidelines, headings, keyboard, keyboard trap, labels, operable, seizures this article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the operable principle of the web content accessibility guidelines (wcag) 2.0 and 2.1.
Mozilla CSS extensions - CSS: Cascading Style Sheets
images-in-menus) :-moz-system-metric(mac-graphite-theme) :-moz-system-metric(scrollbar-end-backward) :-moz-system-metric(scrollbar-end-forward) :-moz-system-metric(scrollbar-start-backward) :-moz-system-metric(scrollbar-start-forward) :-moz-system-metric(scrollbar-thumb-proportional) :-moz-system-metric(touch-enabled) :-moz-system-metric(windows-default-theme) -moz-user-focus -moz-user-input -moz-user-modify -moz-window-dragging -moz-window-shadow formerly proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones listed below.
...default-color -moz-cellhighlight -moz-cellhighlighttext -moz-field -moz-fieldtext -moz-dialog -moz-dialogtext -moz-dragtargetzone -moz-mac-accentdarkestshadow -moz-mac-accentdarkshadow -moz-mac-accentface -moz-mac-accentlightesthighlight -moz-mac-accentlightshadow -moz-mac-accentregularhighlight -moz-mac-accentregularshadow -moz-mac-chrome-active -moz-mac-chrome-inactive -moz-mac-focusring -moz-mac-menuselect -moz-mac-menushadow -moz-mac-menutextselect -moz-menuhover -moz-menuhovertext -moz-win-communicationstext -moz-win-mediatext -moz-nativehyperlinktext display -moz-box -moz-inline-block -moz-inline-box -moz-inline-gridobsolete since gecko 62 -moz-inline-stackobsolete since gecko 62 -moz-inline-table -moz-gridobsolete since gecko 62 -moz-grid-gr...
...x-width -moz-min-content -moz-fit-content -moz-max-content -moz-available pseudo-elements and pseudo-classes a – d ::-moz-anonymous-block eg@:- bug 331432 ::-moz-anonymous-positioned-block :-moz-any :-moz-any-link [matches :link and :visited] :-moz-broken ::-moz-canvas ::-moz-color-swatch ::-moz-cell-content :-moz-drag-over f – i :-moz-first-node ::-moz-focus-inner ::-moz-focus-outer :-moz-focusring :-moz-full-screen :-moz-full-screen-ancestor :-moz-handler-blocked :-moz-handler-crashed :-moz-handler-disabled ::-moz-inline-table l :-moz-last-node :-moz-list-bullet :-moz-list-number :-moz-loading :-moz-locale-dir(ltr) :-moz-locale-dir(rtl) :-moz-lwtheme :-moz-lwtheme-brighttext :-moz-lwtheme-darktext n – r :-moz-native-a...
DOM onevent handlers - Developer guides
this page focuses on how the latter work.
...events are actions like: being clicked detecting pressed keys getting focus the onevent handler is usually named with the event it reacts to, like onclick, onkeypress, onfocus, etc.
...(the html specification names these: onblur, onerror, onfocus, onload, and onscroll.) event handler's parameters, this binding, and the return value when the event handler is specified as an html attribute, the specified code is wrapped into a function with the following parameters: event — for all event handlers except onerror.
Rich-Text Editing in Mozilla - Developer guides
the function executed the requested command using execcommand() and then sets focus back to the editable document, as clicking on a button will set focus on the button itself, which breaks the editing flow.
... figure 4 : executing rich editing commands html: <button onclick="doricheditcommand('bold')" style="font-weight:bold;">b</button> javascript: function doricheditcommand(aname, aarg){ getiframedocument('editorwindow').execcommand(aname,false, aarg); document.getelementbyid('editorwindow').contentwindow.focus() } example: a simple but complete rich text editor <!doctype html> <html> <head> <title>rich text editor</title> <script type="text/javascript"> var odoc, sdeftxt; function initdoc() { odoc = document.getelementbyid("textbox"); sdeftxt = odoc.innerhtml; if (document.compform.switchmode.checked) { setdocmode(true); } } function formatdoc(scmd, svalue) { if (validatemode()) { document.execcommand(scmd, false, svalue); odoc.focus(); } } function validatemode() { if (!d...
...ocument.compform.switchmode.checked) { return true ; } alert("uncheck \"show html\"."); odoc.focus(); return false; } function setdocmode(btosource) { var ocontent; if (btosource) { ocontent = document.createtextnode(odoc.innerhtml); odoc.innerhtml = ""; var opre = document.createelement("pre"); odoc.contenteditable = false; opre.id = "sourcetext"; opre.contenteditable = true; opre.appendchild(ocontent); odoc.appendchild(opre); } else { if (document.all) { 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())...
HTML5 - Developer guides
WebGuideHTMLHTML5
focus management in html the new html5 activeelement and hasfocus attributes are supported.
... pointer lock api allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.
... pointer lock api allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.
HTML attribute: multiple - HTML: Hypertext Markup Language
/* uncomment this css to make the multiple the same height as the single */ /* select[multiple] { height: 1.5em; vertical-align: top; } select[multiple]:focus, select[multiple]:active { height: auto; } */ there are a few ways to select multiple options in a <select> element with a multiple attribute.
...keyboard users can select multiple contiguous items by focusing on the <select> element, selecting an item at the top or bottom of the range they want to select using the up and down cursor keys to go up and down the options.
...when using the multiple attribute, inform the user that multiple values are allowed and provide directions on how to provide multiple values, such as "separate email addresses with a comma." setting size="1" on a multiple select can make it appear as a single select in some browsers, but then it doesn't expand on focus, harming usability.
Global attributes - HTML: Hypertext Markup Language
the event handler attributes: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onv...
... tabindex an integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position.
... it can take several values: a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation; 0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention; a positive value means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the tabindex.
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
31 tabindex global attributes, html, reference the tabindex global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation (usually with the tab key, hence the name).
... 52 disabled attribute, attributes, constraint validation, forms, required the boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form.
... the user can neither edit nor focus on the control, nor it's form control descendants.
SVG documentation index - SVG: Scalable Vector Graphics
WebSVGIndex
190 specularexponent filters, svg, svg attribute the specularexponent attribute controls the focus for the light source.
... 213 tabindex svg, svg attribute the tabindex attribute allows you to control whether an element is focusable and to define the relative order of the element for the purposes of sequential focus navigation.
...the latter may be described in a later section of the tutorial, while we will focus completely on the first part: bringing text into an svg image.
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
svgexternalresourcesrequired removed never implemented svgelement.viewportelement and svgelement.ownersvgelement nullable implementation status unknown svgelement.getpresentationattribute() removed never implemented (prototype removed in bug 921456) svgcolor and svgicccolor removed never implemented svgelement.focus(), svgelement.blur() not implemented (bug 778654) svgelement.tabindex implemented (bug 778654) document.activeelement implementation status unknown globaleventhandlers on svgelement implementation status unknown options dictionary attribute for svggraphicselement.getbbox() implemented behind the preference svg.new-getbbox.enabled (bug 999964, bug...
... with inline svg applying to whole document content implementation status unknown presentation attributes on any svg namespaced element implementation status unknown display behavior of <style> defined via ua style sheet implementation status unknown !important user agent style rules controlling never-rendered elements implementation status unknown :focus and ::selection styles implementation status unknown geometry change notes x and y attributes removed from <pattern> and <filter> implementation status unknown auto value of width and height computes to 0 but 100% on <svg> not implemented coordinate systems, transformations and units change notes exception for bad...
...abort, error, and unload instead of svgload, svgabort, svgerror, and svgunload not implemented (bug 620002) only structurally external elements and outermost <svg> element fire load events implementation status unknown resize and scroll instead of svgresize and svgscroll implementation status unknown domactivate removed implementation status unknown focusin and focusout instead of domfocusin and domfocusout implementation status unknown keyboard events implementation status unknown mutation events removed implementation status unknown svgzoomevent removed implementation status unknown <cursor> element deprecated implementation status unknown linking change notes li...
Display a Popup - Archive of obsolete content
// // set the focus to the text area so the user can // just start typing.
... self.port.on("show", function onshow() { textarea.focus(); }); finally, the "text-entry.html" file defines the <textarea> element: <html> <head> <style type="text/css" media="all"> textarea { margin: 10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> </body> </html> finally, save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png try it out: "index.js" is saved in the top level, and the other five files go in your add-on's data directory: my-addon/ data/ get-text.js icon-16.png icon-32.png icon-64.png text-entry.html index.js...
StringView - Archive of obsolete content
object reference to input or a new arraybufferview of the buffer input.buffer (depending on many factors regarding the position of the focused parts).
... object reference to input or a new arraybufferview of the buffer input.buffer (depending on many factors regarding the position of the focused parts).
View Source for XUL Applications - Archive of obsolete content
linenumber (optional) the line number to focus on once the source has loaded.
... alinenumber (optional) the line number to focus on once the source has loaded.
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
the control attribute takes as its value an id reference to another xul element with that id; clicking that label or giving it focus can be used to pass the focus to the referenced xul element.
... <key id="key-save" key="s" modifiers="accel,shift" oncommand="save();"/> <key id="key-scroll-up" keycode="vk_page_up" oncommand="advancefocus(-1);"/> listing 19: defining keyboard shortcuts to make letters, numbers, symbols, or the space bar act as triggers, declare that character as the key attribute’s value.
Getting Started with Firefox Extensions - Archive of obsolete content
this tutorial focuses on extensions for firefox, but the same (or very similar) principles apply to creating extensions for other applications such as thunderbird, seamonkey, and flock.
...this tutorial focuses on traditional extensions, which are created differently.
Handling Preferences - Archive of obsolete content
",dialog=no" : ",modal"); this._preferenceswindow = window.opendialog( "chrome://xulschoolhello/content/preferenceswindow.xul", "xulschoolhello-preferences-window", features); } this._preferenceswindow.focus(); }, this code is based on the code that opens preference windows from the add-ons manager.
...in that case, just give it focus.
The Box Model - Archive of obsolete content
if the user clicks on the label, the textbox will be focused.
... also, if the user has a screen reader, the label will be read when the focus is placed on the textbox.
XUL user interfaces - Archive of obsolete content
showstatus(thedate) } catch (ex) {} } setday(thedate) } // internal function setday(adate) { if (currentday) currentday.setattribute("disabled", "true") if (adate == null) currentday = null else { var d = adate.getday() currentday = daybox.firstchild while (d-- > 0) currentday = currentday.nextsibling currentday.removeattribute("disabled") } datebox.focus(); } function showstatus(adate) { if (adate == null) { status.removeattribute("warning") status.setattribute("label", "") } else if (adate === false || isnan(adate.gettime())) { status.setattribute("warning", "true") status.setattribute("label", "date is not valid") } else { status.removeattribute("warning") status.setattribute("label", adate.tolocaledates...
... using this knowledge, add a rule to the stylesheet that makes the background of the date box pale blue when it has keyboard focus (but white when keyboard focus is somewhere else).
Content states and the style system - Archive of obsolete content
content states are what gecko uses to implement the various state-dependent in css (examples would be :hover, :active, :focus, :target, :checked).
... we will focus on describing how changes in content state are handled.
Basics - Archive of obsolete content
blah(lengthstringfocusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loa...
...onfocus()changing the focus of a tab.
findbar - Archive of obsolete content
possible values are: find_normal (0): normal find find_typeahead (1): typeahead find find_links (2): link find methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
... this opens the findbar, focuses the edit field for the search term, and selects its contents.
blur - Archive of obsolete content
ArchiveMozillaXULMethodblur
« xul reference home blur() return type: no return value if the focus is on the element, it is removed.
... the focus is not automatically placed on any other element.
moveByOffset - Archive of obsolete content
« xul reference home movebyoffset( offset , isselecting, isselectingrange) return type: no return value if offset is positive, adjusts the focused item forward by that many items.
... if offset is negative, adjusts the focused item backward by that many items.
ContextMenus - Archive of obsolete content
when using the keyboard, the context is the element in the window that is currently focused.
...however, even when using the keyboard, there will still be a node (the context) that the menu applies to, which will be the element that is currently focused.
Extensions - Archive of obsolete content
normally, this menu displays menu items specific to what was context clicked or focused.
...if the keyboard was used to open a context menu, this will be the focused element.
OpenClose - Archive of obsolete content
a menu in an unprivileged content window (such as a web page) can only open a popup while its window is focused, and it is in the currently active tab.
...what it does do is affect how the focus and highlighting of the menu is handled.
Code Samples - Archive of obsolete content
if the window already exists, this code just focusses it.
... otherwise it opens the window: const name = "...internal name of the window..." const uri = "...chrome uri of the window..." var w = components .classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator) .getmostrecentwindow(name) if (w) w.focus() else components .classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher) .openwindow(null, uri, name, "chrome,resizable", null) change the first two lines to specify the window that you want to open.
Using the Editor from XUL - Archive of obsolete content
for text widgets and composer): nstexteditorkeylistener (as a nsidomkeylistener) nstexteditormouselistener (as a nsidommouselistener) nstexteditorfocuslistener (as a nsidomfocuslistener) nstexteditortextlistener (as a nsidomtextlistener) nstexteditorcompositionlistener (as a nsidomcompositionlistener) nstexteditordraglistener (as a nsidomdraglistener) in nseditorshell::preparedocumentforediting(), we install a mouse listener.
... nstexteditorfocuslistener editor responds to focus and blur events by showing and hiding the caret or selection as appropriate.
caption - Archive of obsolete content
the tab order is the order in which the focus is moved when the user presses the "tab" key.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
commandset - Archive of obsolete content
focus: occurs when the focused element changes.
...datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
key - Archive of obsolete content
ArchiveMozillaXULkey
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
keyset - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
listcell - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
listhead - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
listheader - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
menu - Archive of obsolete content
ArchiveMozillaXULmenu
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupport...
prefwindow - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupport...
...if a window with that type is already open, this method will just switch that window to the front and focus it instead of opening another window.
titlebar - Archive of obsolete content
buttons inside it can't be clicked and textboxes can't be focused with the mouse.
...datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
-ms-accelerator - Archive of obsolete content
when alt + n is pressed, the <input> element that defines an accesskey attribute value of "n" receives the focus.
...the user presses the alt key and holds it while pressing the character to move input focus to the object, and to invoke the default event associated with the object.
XForms Label Element - Archive of obsolete content
focus behavior - when a label element is clicked or its accesskey is activated then the form control that contains the label will be given the focus.
... attributes ui common accesskey - used to specify the keyboard shortcut for focusing the parent form control.
XForms Repeat Element - Archive of obsolete content
behaviour focusing a generated control may change the current index of the containing repeat element.
... the index is equal to the index of the control set that the focused control belongs to.
XForms Select Element - Archive of obsolete content
accesskey - used to specify the keyboard shortcut for focusing this control.
...loses focus), otherwise it is updated upon item selection check group the select is represented as group of checkboxes (xhtml/xul).
Mozilla XForms User Interface - Archive of obsolete content
accesskey - keyboard shortcut for moving focus to an xforms element.
...the help will be displayed if the f1 key is pressed while the containing form control has focus.
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
hover and non-link elements section 5.11.3 of css2 defines the three dynamic pseudo-classes (:hover, :active, and :focus) and then goes on to say: css doesn't define which elements may be in the above states, or how the states are entered and left.
...thus, a:hover should always be used instead of just :hover, and a:link:hover (and a:visited:hover) are preferred to the simpler a:hover related links the dynamic pseudo-classes: :hover, :active, and :focus :hover pseudo-class (msdn) original document information author(s): eric a.
Index - Game development
when you've published the game it's time to focus on promotion — letting people know your game exists.
...you might however also focus on selling licenses, doing branding, or earning on a revenue share basis from the advertisements.
Game distribution - Game development
desktop vs mobile the vast majority of the traffic we are interested in — people playing html5 games — comes from mobile devices so that's something you will have to focus on if you truly want to succeed.
...when you've published the game it's time to focus on promotion — letting people know your game exists.
GLSL Shaders - Game development
this allows the cpu to focus its processing power on other tasks, like executing code.
...we've used three.js here to make the background code a lot simpler and clearer to understand, so you can just focus on the shader code.
3D games on the Web - Game development
the main browsers are all supporting webgl and all you need to focus on is optimizing the performance on the devices you use.
...using a framework for 3d games also helps optimize the performance as a lot is taken care of by the tools you use, so you can focus on building the game itself.
Desktop mouse and keyboard controls - Game development
are handled by the framework, so you can focus on the actual task you want to do.
... mouse the mouse interactions in the game are focused on clicking the buttons.
2D maze game with device orientation - Game development
the phaser framework provides you with a set of tools that will speed up development and help handle generic tasks needed to complete the game, so you can focus on the game idea itself.
...let’s focus on the keyboard first by adding the following to the create() function : this.keys = this.game.input.keyboard.createcursorkeys(); as you can see there’s a special phaser function called createcursorkeys(), which will give us an object with event handlers for the four arrow keys to play with: up, down, left and right.
RAIL - MDN Web Docs Glossary: Definitions of Web-related terms
rail, an acronym for response, animation, idle, and load, is a performance model originated by the google chrome team in 2015, focused on user experience and performance within the browser.
... the performance mantra of rail is "focus on the user; the end goal isn't to make your site perform fast on any specific device, it's to make users happy." there are 4 stages of interaction: page load, idle, response to input, and scrolling and animation.
What are hyperlinks? - Learn web development
tap or click a link to activate it, or if you use a keyboard, press tab until the link is in focus and hit enter or spacebar.
... when you're building a website, focus on internal links, since those make your site usable.
Advanced form styling - Learn web development
note: you may have noticed that in the search field, the "x" delete icon disappears when the input loses focus in edge and chrome, but stays put in safari.
...however, this seems to get rid of the icon with focus too, with no apparent way to get it back.
Example 3 - Learn web development
na</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : b...
...elect'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }, false); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); select.addeventlistener('keyup', function (event) { if (event.keycode === 27) { deactivateselect(select); } }); }); }); result ...
Example 4 - Learn web development
na</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : b...
...rall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); }); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex...
Example 5 - Learn web development
ion" role="option">strawberry</li> <li class="option" role="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : b...
...x); optionlist.foreach(function (option, index) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); option.addeventlistener('click', function (event) { updatevalue(select, index); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); select.addeventlistener('keyup', function (event) { var length = optionlist.length, index = getindex(select); if (event.keycode === 27) { deactivateselect(select); } if (event.keycode === 40 && index...
Other form controls - Learn web development
the following screenshots show default, focused, and disabled <textarea> elements in firefox 71 and safari 13 on macos, and edge 18, yandex 14, firefox 71 and chrome 79 on windows 10.
...the optional size attribute provides control over how many options are visible when the select does not have focus.
Styling web forms - Learn web development
simply put, we remove their borders and backgrounds, and redefine their padding and margin: input, textarea { font : 1.4em/1.5em "handwriting", cursive, sans-serif; border : none; padding : 0 10px; margin : 0; width : 80%; background : none; } when one of these fields gains focus, we highlight them with a light grey, transparent, background (it is always important to have focus style, for usability and keyboard accessibility): input:focus, textarea:focus { background : rgba(0,0,0,.1); border-radius: 5px; } now that our text fields are complete, we need to adjust the display of the single and multiple line text fields to match, since they won't typically look the ...
...ton the <button> element is really convenient to style with css; you can do whatever you want, even using pseudo-elements: button { padding : 5px; font : bold .6em sans-serif; border : 2px solid #333; border-radius: 5px; background : none; cursor : pointer; transform : rotate(-1.5deg); } button:after { content : " >>>"; } button:hover, button:focus { outline : none; background : #000; color : #fff; } the final result and voila!
Your first form - Learn web development
keep it simple and stay focused: ask only for the data you absolutely need.
.../* uniform size & alignment */ display: inline-block; width: 90px; text-align: right; } input, textarea { /* to make sure that all text fields have the same font settings by default, textareas have a monospace font */ font: 1em sans-serif; /* uniform text field size */ width: 300px; box-sizing: border-box; /* match form field borders */ border: 1px solid #999; } input:focus, textarea:focus { /* additional highlight for focused elements */ border-color: #000; } textarea { /* align multiline text fields with their labels */ vertical-align: top; /* provide space to type some text */ height: 5em; } .button { /* align buttons with the text fields */ padding-left: 90px; /* same size as the label elements */ } button { /* this extra margin represent r...
From object to iframe — other embedding technologies - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 250px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="width: 95%;min-height: 100px;"> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: ...
...ext) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
HTML table basics - Learn web development
LearnHTMLTablesBasics
in this module we are focusing on the html part; to find out about the css part you should visit our styling tables article after you've finished here.
... we won't focus on css in this module, but we have provided a minimal css stylesheet for you to use that will make your tables more readable than the default you get without any styling.
Introduction to events - Learn web development
now try changing btn.onclick to the following different values in turn, and observing the results in the example: btn.onfocus and btn.onblur — the color changes when the button is focused and unfocused; try pressing the tab to focus on the button and press the tab again to focus away from the button.
... these are often used to display information about filling in form fields when they are focused, or displaying an error message if a form field is filled with an incorrect value.
Ember interactivity: Events, classes and state - Learn web development
add the new line shown below to your header.hbs file: <input class='new-todo' aria-label='what needs to be done?' placeholder='what needs to be done?' autofocus {{on 'keydown' this.onkeydown}} > this new attribute is inside double curly braces, which tells you it is part of ember's dynamic templating syntax.
...ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
React interactivity: Editing, filtering, conditional rendering - Learn web development
our next article rounds things off for our react tutorials by looking at including focus management in react, which can improve usability and reduce confusion for both keyboard-only and screenreader users.
...ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Working with Svelte stores - Learn web development
ollowing import statement below the existing ones: import { alert } from '../stores.js' update your addtodo() function like so: function addtodo(name) { todos = [...todos, { id: newtodoid, name, completed: false }] $alert = `todo '${name}' has been added` } update removetodo() like so: function removetodo(todo) { todos = todos.filter(t => t.id !== todo.id) todosstatus.focus() // give focus to status heading $alert = `todo '${todo.name}' has been deleted` } update the updatetodo() function to this: function updatetodo(todo) { const i = todos.findindex(t => t.id === todo.id) if (todos[i].name !== todo.name) $alert = `todo '${todos[i].name}' has been renamed to '${todo.name}'` if (todos[i].completed !== todo.completed) $alert ...
...ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Vue conditional rendering: editing existing todos - Learn web development
the last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility.
...ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Adding a new todo form: Vue events, methods, and models - Learn web development
this means that vue will only sync data when the input loses focus or the form is submitted.
...ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Command line crash course - Learn web development
prettier is an opinionated code formatting tool for front end developers, focusing around javascript-based languages and adding support for html, css, scss, json and more.
...adding the --write option to the prettier command will fix those up, leaving us to focus on actually writing useful code.
CSUN Firefox Materials
screen magnifier users can also benefit from firefox's powerful features today, as caret and focus tracking are fully enabled.
...it includes such features as duplicating tabs, controlling tab focus, tab clicking options, undo closed tabs and windows, plus much more.
Embedding API for Accessibility
ading */ moz 0.8 link appearance setcharpref("browser.anchor_color", "#abcdef" /* hex color value */); setcharpref("browser.visited_color", "#abcdef" /* hex color value */); setboolpref("browser.underline_anchors", boolunderlinelinks); moz 0.8 focus appearance setboolpref("browser.display.use_focus_colors", usefocuscolors); setcharpref("browser.display.focus_background_color", colorstring); setcharpref("browser.display.focus_text_color", colorstring); setcharpref("browser.display.focus_ring_width", numpixels); /* 0-4 */ moz 0...
... timer speed setintpref("timer.relative_speed", percent); /* 100 corresponds to normal speed, 200 to double speed */ no allow cycling in lists and links setboolpref("keyboardnav.allow_cycling", allowcycling); no mouse pointer moves with keyboard focus setboolpref("keyboardnav.mouse_follows_keyboard_focus", mousefollows); /* if this pref is set, the mouse pointer will always be move to the 0,0 pixel of the current keyboard focus frame */ no browse with caret setboolpref("accessibility.browsewithcaret", usecaret); /* if this pref is ...
Mozilla Plugin Accessibility
all browser keys unavailable when plugin has focus focused plugins currently have no choice but to consume all keyboard events.
...focus gets stuck in plugin.
Adding a new event
textevents.h this header file should be used for defining input events from keyboard or ime and also other text edit related events like querying focused content information.
...if your event should be fired on focused node, you need to modify widgetevent::istargetedatfocusedcontent().
How to implement a custom autocomplete search component
mplete-richlistbox" /> <textbox id="text1" type="autocomplete" autocompletesearch="simple-autocomplete" showcommentcolumn="true" autocompletepopup="richpopup" autocompletesearchparam='[{"value":"mark","comment":"cool dude"},{"value":"mary","comment":"nice lady"},{"value":"jimmy","comment":"very uncool guy"},{"value":"jimbo","comment":null}]' /> how to solve autocomplete panel focus problems in some situations there may be problems with the display of the autocomplete panel (this is the panel where the autocomplete results/suggestions are displayed): the autocomplete panel seems to appear seldom and very erratically.
...the solution is to define a custom autocomplete panel as follows with the noautofocus="true" attribute (very important, don't miss this part): <panel id="popup_autocomplete" type="autocomplete" noautofocus="true" /> <textbox type="autocomplete" autocompletesearch="custom-autocomplete" autocompletepopup="popup_autocomplete" /> there is another example of the use of an autocomplete panel in autocomplete code snippets.
Index
we'll primarily focus on getting your release repository setup and the mercurial commands you'll need to know to use that repository.
... 27 localizing without a specialized tool from the create a new localization document, an interested localizer can follow a technical step-by-step process that starts the localization process by focusing on how to localize two of the primary types of localization files (dtd and properties) used in the mozilla source code.
Gecko Profiler FAQ
this mode is usually recommended when you want to find a thread you want to do more focused profiling on, so that you can find its name and then construct a more useful thread filter string based on the found thread name.
... is it better to profile across multiple platforms, or to focus time on windows (since that's the bulk of our users)?
browser.search.context.loadInBackground
browser.search.context.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the background.
... type:boolean default value:false exists by default: yes application support: firefox 13.0 status: active; last updated 2012-02-17 introduction: pushed to nightly on 2012-02-15 bugs: bug 727131 values true new tab with search results will be opened in the background, focus stays on the current tab.
Preference reference
accessibility.tabfocusthe preference accessibility.tabfocus controls what elements receive focus when the user presses the tab key.browser.altclicksavethe preference browser.altclicksave controls whether clicking a link while holding the alt key starts the download of that link.browser.dom.window.dump.enabledthis setting enables the dump function, which sends messages to the system console.
...n creates screenshots of visited pages which will be shown if the web page is shown in the grid of the "new tab page" (about:newtab) which offers the most often visited pages for fast navigation.browser.search.context.loadinbackgroundbrowser.search.context.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the background.browser.urlbar.formatting.enabledthe preference browser.urlbar.formatting.enabled controls whether the domain name including the top level domain is highlighted in the address bar by coloring it black and the other parts grey.browser.urlbar.trimurlsthe preference browser.urlbar.trimurls controls whe...
Gecko object attributes
the line number is relative to the top of the currently focused area (the document, a rich text editable area, or an input control).
... applied to: any focusable accessible text object margin-bottom specifies how much vertical space there will be after the bottom of the last line of content in a text accessible (see the css margin-bottom property).
Starting WebLock
this chapter will focus on the functionality that actually handles the web locking.
...n", rv); return -1; } nscomptr<iweblock> weblock; rv = servman->getservicebycontractid("@dougt/weblock", ns_get_iid(iweblock), getter_addrefs(weblock)); if (ns_failed(rv)) { printf("error: xpcom obtaining service [%x].\n", rv); return -1; } implementing the iweblock interface once the interface is defined, you can focus on implementing the web lock startup functionality itself.
nsIAccessibleEvent
event_focus 0x8005 0x0008 0x0005 an object has received the keyboard focus.
... event_hypertext_changed 0x0057 0x0053 focus has changed from one hypertext object to another, or focus moved from a non-hypertext object to a hypertext object, or focus moved from a hypertext object to a non-hypertext object.
nsIAlertsService
vice;1'].getservice(ci.nsialertsservice); var notiflistener = { observe: function(asubject, atopic, adata) { console.error('incoming notification observer:', asubject, atopic, adata); if (atopic == 'alertclickcallback') { console.error('user clicked trying to throw click'); services.prompt.alert(services.wm.getmostrecentwindow('navigator:firefox'), 'focus firefox', 'will now focus fireox and then focus the tab'); } else if (atopic == 'alertshow') { console.log('just showed notification'); } else if (atopic == 'alertfinished') { console.log('just alertfinished') } } }; as.showalertnotification('chrome://branding/content/icon64.png', 'stackoverflow - new messages', 'there are ## new messages.
... click here to focus the tab', true, null, notiflistener, 'stackoverflow notifier'); closealert() closes alerts created by the service.
nsICompositionStringSynthesizer
(optional) compositionstringsynthesizer.setcaret("foo-bar".length, 0); // dispatch dom events to modify the focused editor compositionstringsynthesizer.dispatchevent(); when you modify the composing string, you don't need to recreate the instance anymore.
... dispatchevent() dispatches dom events for setting the composition string which are specified by setstring(), appendclause() and setcaret() to the focused editor.
nsIMacDockSupport
.org/keymaster/gatekeeper/there.is.only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.addeventlistener('command', function(){ var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplication(true); services.wm.getmostrecentwindow(null).focus() }) macmenu.appendchild(macmenuitem); var mainpopupset = win.document.getelementbyid('mainpopupset'); mainpopupset.appendchild(macmenu); let dockmenuelement = macmenu; //document.getelementbyid("menu_mac_dockmenu");66 let nativemenu = cc["@mozilla.org/widget/standalonenativemenu;1"].createinstance(ci.nsistandalonenativemenu); console.log('dockmenuelement:', dockmenuelement); nativemenu.init(d...
....org/keymaster/gatekeeper/there.is.only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.addeventlistener('command', function(){ var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplication(true); services.wm.getmostrecentwindow(null).focus() }) services.appshell.hiddendomwindow.document.getelementbyid('menu_mac_dockmenu').appendchild(macmenuitem) this adds the "show most recent window" menuitem from the previous example as a third item.
nsITextInputProcessorCallback
example of simple js-ime: var simpleime = { _hasfocus: false, _hasrightstocompose: false, _tip: null, _callback: function simpleime_callback(atip, anotification) { try { switch (anotification.type) { case "request-to-commit": atip.commitcomposition(); break; case "request-to-cancel": atip.cancelcomposition(); break; case "notify-focus": this._hasfocus = true;...
... break; case "notify-blur": this._hasfocus = false; break; case "notify-detached": this._hasfocus = false; this._hasrightstocompose = false; break; } return true; } catch (e) { return false; } }, setcomposition: function simpleime_setcomposition(atext, aclauses, acaret) { if (!this._tip) { this._tip = components.classes["@mozilla.org/text-input-processor;1"].
nsITreeSelection
currentindex long the current item (the one with focus).
...this is not a reliable method of determining the selected row, as the selection may include multiple rows, or the focused row may not even be selected.
nsIWebBrowser
the chrome may optionally implement nsiinterfacerequestor, nsiwebbrowserchromefocus, nsicontextmenulistener and nsitooltiplistener to receive additional notifications from the browser object.
... see also nsibasewindow nsicontextmenulistener nsidomwindow nsiembeddingsitewindow nsiinterfacerequestor nsishistorylistener nsitooltiplistener nsiuricontentlistener nsiweakreference nsiwebbrowserchrome nsiwebbrowserchromefocus nsiwebprogresslistener ...
nsIWindowMediator
native code only!updatewindowtimestamp call this method when a window gains focus.
... void updatewindowtimestamp( in nsixulwindow awindow ); parameters awindow the window which has gained focus.
XPCOM Interface Reference
vicensiftpchannelnsiftpeventsinknsifactorynsifavicondatacallbacknsifaviconservicensifeednsifeedcontainernsifeedelementbasensifeedentrynsifeedgeneratornsifeedpersonnsifeedprocessornsifeedprogresslistenernsifeedresultnsifeedresultlistenernsifeedtextconstructnsifilensifileinputstreamnsifileoutputstreamnsifilepickernsifileprotocolhandlernsifilespecnsifilestreamsnsifileurlnsifileutilitiesnsifileviewnsifocusmanagernsiformhistory2nsiframeloadernsiframeloaderownernsiframemessagelistenernsiframemessagemanagernsiframescriptloadernsigsettingscollectionnsigsettingsservicensigeolocationprovidernsigeolocationupdatensiglobalhistorynsiglobalhistory2nsiglobalhistory3nsihtmleditornsihttpheaderlistenernsihapticfeedbacknsihttpactivitydistributornsihttpactivityobservernsihttpchannelnsihttpchannelinternalnsihttphead...
...erterservicensiutf8stringenumeratornsiuuidgeneratornsiupdatensiupdatechecklistenernsiupdatecheckernsiupdateitemnsiupdatemanagernsiupdatepatchnsiupdatepromptnsiupdatetimermanagernsiuploadchannelnsiuploadchannel2nsiurllistmanagercallbacknsiusercertpickernsiuserinfonsivariantnsiversioncomparatornsiweakreferencensiwebbrowsernsiwebbrowserchromensiwebbrowserchrome2nsiwebbrowserchrome3nsiwebbrowserchromefocusnsiwebbrowserfindnsiwebbrowserfindinframesnsiwebbrowserpersistnsiwebcontenthandlerregistrarnsiwebnavigationnsiwebnavigationinfonsiwebpagedescriptornsiwebprogressnsiwebprogresslistenernsiwebprogresslistener2nsiwebsocketchannelnsiwebsocketlistenernsiwebappssupportnsiwifiaccesspointnsiwifilistenernsiwifimonitornsiwinaccessnodensiwinapphelpernsiwintaskbarnsiwindowcreatornsiwindowmediatornsiwindowwatch...
Standard OS Libraries
as wayland is not out yet in the wild this article does not focus on wayland, it will focus on gtk+ and xorg(x11/x).
... although jni is done completely through js-ctypes, a jsm was created to abstract away the js-ctypes so developers can focus on the jni aspect.
Accessibility Inspector - Firefox Developer Tools
for example, one of the links in one demo has states of focusable, linked, selectable text, opaque, enabled, and sensitive.
... when one of the panels is focused, you can move the focus up and down items using the up and down arrow keys, and use the left and right arrow keys to expand and collapse expandable rows (e.g., different hierarchy levels of the accessibility tree).
DOM Inspector FAQ - Firefox Developer Tools
inspect a url this just focuses the dom inspector's address bar, which allow you to inspect arbitrary documents which can be accessed via a url.
... dom inspector allows you to force the :hover, :active, and :focus pseudo-classes to apply to a given node.
Index - Firefox Developer Tools
68 select an element guide, inspector, tools the selected element is the element in the page that the inspector is currently focused on.
... 69 select and highlight elements the selected element is the element in the page that the inspector is currently focused on.
Migrating from Firebug - Firefox Developer Tools
toggle pseudo-classes firebug lets you toggle the css pseudo-classes :hover, :active and :focus for an element via the options menu of the style side panel.
...while firebug focuses on javascript performance and provides detailed information about javascript function calls during the profiling session, the performance tool in the devtools offers a broad spectrum of information regarding a website's performance but doesn't go into detail regarding javascript function calls.
Network request list - Firefox Developer Tools
to delete a blocked item, click the x icon that appears when you focus the item.
...you can focus it by clicking in the filter box, or by pressing ctrl + f (or cmd + f on a mac); then start typing.
Call Tree - Firefox Developer Tools
the inverted call tree is a good way to focus on these self cost values.
...the direct consequence is that this is a view that focuses more on the function's self time information.
CSS.registerProperty() - Web APIs
we can now use that property to transition a gradient on hover or focus.
... .registered { --my-color: #c0ffee; background-image: linear-gradient(to right, #fff, var(--my-color)); transition: --my-color 1s ease-in-out; } .registered:hover, .registered:focus { --my-color: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } button { font-size: 3vw; } we can add these styles to some buttons: <button class="registered">background registered</button> <button class="unregistered">background not registered</button> specifications specificatio...
Document: keypress event - Web APIs
interface keyboardevent bubbles yes cancelable yes default action varies: keypress event; launch text composition system; blur and focus events; domactivate event; other event examples addeventlistener keypress example this example logs the keyboardevent.code value whenever you press a key.
... <p>press inside this iframe first to focus it, then try pressing keys on the keyboard.</p> <p id="log"></p> const log = document.getelementbyid('log'); document.addeventlistener('keypress', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeypress equivalent document.onkeypress = logkey; specifications specification status ui events working draft ...
DocumentOrShadowRoot.getSelection() - Web APIs
notice also the difference between selection and focus.
... document.activeelement returns the focused element.
Element.attachShadow() - Web APIs
this can be one of: open: elements of the shadow root are accessible from javascript outside the root, for example using element.shadowroot: element.shadowroot; // returns a shadowroot obj closed: denies access to the node(s) of a closed shadow root from javascript outside it: element.shadowroot; // returns null delegatesfocus a boolean that, when set to true, specifies behavior that mitigates custom element issues around focusability.
... when a non-focusable part of the shadow dom is clicked, the first focusable part is given focus, and the shadow host is given any available :focus styling.
Element: keypress event - Web APIs
interface keyboardevent bubbles yes cancelable yes default action varies: keypress event; launch text composition system; blur and focus events; domactivate event; other event examples addeventlistener keypress example this example logs the keyboardevent.code value whenever you press a key after focussing the <input> element.
... <div> <label for="sample">focus the input and type something:</label> <input type="text" name="text" id="sample"> </div> <p id="log"></p> const log = document.getelementbyid('log'); const input = document.queryselector('input'); input.addeventlistener('keypress', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeypress equivalent input.onkeypress = logkey; specifications specification status ui events working draft ...
Element.tabStop - Web APIs
WebAPIElementtabStop
the tabstop property of the element interface returns a boolean indicating if the element can receive input focus via the tab key.
...after feedback, this property was removed from the design doc and replaced by shadowroot.delegatesfocus.
Using files from web applications - Web APIs
consider this html: <input type="file" id="fileelem" multiple accept="image/*" class="visually-hidden"> <label for="fileelem">select some files</label> and this css: .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* separate rule for compatibility, :focus-within is required on modern firefox and chrome */ input.visually-hidden:focus + label { outline: thin dotted; } input.visually-hidden:focus-within + label { outline: thin dotted; } there is no need to add javascript code to call fileelem.click().
...you need to provide a visual cue for the focus status of the hidden input field on its label, be it an outline as shown above, or background-color or box-shadow.
HTMLBodyElement - Web APIs
living standard technically, the event-related properties onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onlanguagechange, onload, onmessage, onoffline, ononline, onpopstate, onresize, onstorage, and onunload, have been moved to windoweventhandlers.
... the following properties have been added: onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onload, onmessage, onoffline, ononline, onpopstate, onresize, onstorage, and onunload.
HTMLButtonElement - Web APIs
htmlbuttonelement.autofocus is a boolean indicating whether or not the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control.
... the following attributes have been added: autofocus, formaction, formenctype, formmethod, formnovalidate, formtarget, labels, validity, validationmessage, and willvalidate.
HTMLElement: change event - Web APIs
when the element is :checked (by clicking or using the keyboard) for <input type="radio"> and <input type="checkbox">; when the user commits the change explicitly (e.g., by selecting a value from a <select>'s dropdown with a mouse click, by selecting a date from a date picker for <input type="date">, by selecting a file in the file picker for <input type="file">, etc.); when the element loses focus after its value was changed, but not commited (e.g., after editing the value of <textarea> or <input type="text">).
...rid-area: result; } javascript const selectelement = document.queryselector('.ice-cream'); selectelement.addeventlistener('change', (event) => { const result = document.queryselector('.result'); result.textcontent = `you like ${event.target.value}`; }); result text input element for some elements, including <input type="text">, the change event doesn't fire until the control loses focus.
HTMLElement - Web APIs
htmlorforeignelement.blur() removes keyboard focus from the currently focused element.
... htmlorforeignelement.focus() makes the element the current keyboard focus.
HTMLElement.blur() - Web APIs
the htmlelement.blur() method removes keyboard focus from the current element.
... syntax element.blur(); examples remove focus from a text input html <input type="text" id="mytext" value="sample text"> <br><br> <button type="button" onclick="focusinput()">click me to gain focus</button> <button type="button" onclick="blurinput()">click me to lose focus</button> javascript function focusinput() { document.getelementbyid('mytext').focus(); } function blurinput() { document.getelementbyid('mytext').blur(); } result specification specification status comment html living standardthe definition of 'blur' in that specification.
HTMLOrForeignElement - Web APIs
on the element.nonce the nonce property of the htmlorforeignelement interface returns the cryptographic number used once that is used by content security policy to determine whether a given fetch will be allowed to proceed.tabindexthe tabindex property of the htmlorforeignelement interface represents the tab order of the current element.methodsblur()the htmlelement.blur() method removes keyboard focus from the current element.focus()the htmlelement.focus() method sets focus on the specified element, if it can be focused.
... the focused element is the element which will receive keyboard and similar events by default.
Using the MediaStream Recording API - Web APIs
first of all, we style the <label> how we want it, making sure that it has enough z-index to always sit above the other elements and therefore be focusable/clickable: label { font-family: 'notocoloremoji'; font-size: 3rem; position: absolute; top: 2px; right: 3px; z-index: 5; cursor: pointer; } then we hide the actual checkbox, because we don't want it cluttering up our ui: input[type=checkbox] { position: absolute; top: -100px; } next, we style the information screen (wrapped in an <aside> element) how we w...
...on for smooth showing/hiding: aside { position: fixed; top: 0; left: 0; text-shadow: 1px 1px 1px black; width: 100%; height: 100%; transform: translatex(100%); transition: 0.6s all; background-color: #999; background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5)); } last, we write a rule to say that when the checkbox is checked (when we click/focus the label), the adjacent <aside> element will have its horizontal translation value changed and transition smoothly into view: input[type=checkbox]:checked ~ aside { transform: translatex(0); } basic app setup to grab the media stream we want to capture, we use getusermedia().
MediaTrackConstraints - Web APIs
focusmode a string specifying one of "none", "manual", "single-shot", or "continuous".
... focusdistance a constraindouble (a double-precision integer) specifying distance to a focused object.
Notification.onclick - Web APIs
}; the default behavior is to move the focus to the viewport of the notification's related browsing context.
... examples in the following example, we use an onclick handler to open a webpage in a new tab (specified by the inclusion of the '_blank' parameter) once a notification is clicked: notification.onclick = function(event) { event.preventdefault(); // prevent the browser from focusing the notification's tab window.open('http://www.mozilla.org', '_blank'); } specifications specification status comment notifications apithe definition of 'onclick' in that specification.
Page Visibility API - Web APIs
for example, watching for blur and focus events on the window helps you know when your page is not the active page, but it does not tell you that your page is actually hidden to the user.
... note: while onblur and onfocus will tell you if the user switches windows, it doesn't necessarily mean it's hidden.
ServiceWorkerGlobalScope: notificationclick event - Web APIs
no interface notificationevent event handler onnotificationclick examples you can use the notificationclick event in an addeventlistener method: self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); or use the onnotificationclick event handler prop...
...erty: self.onnotificationclick = function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specification status notifications apithe definition of 'onnotificationclick' in that specification.
ShadowRoot - Web APIs
properties shadowroot.delegatesfocus read only returns a boolean that indicates whether delegatesfocus was set when the shadow was attached (see element.attachshadow()).
... documentorshadowroot.activeelement read only returns the element within the shadow tree that has focus.
Matrix math for the web - Web APIs
glmatrix is an example of a library that has a focus on speed and performance.
... the focus in the glmatrix library is to have target arrays that are allocated before the update loop.
WebXR permissions and security - Web APIs
the document is considered trustworthy, in that it is responsible and is both currently active and has focus.
...a trustworthy document is one which is both responsible and active, and which currently has focus.
Starting up and shutting down a WebXR session - Web APIs
on top of that, the document needs to be secure and currently focused.
... detecting changes to session's visibility state when the state of the xrsession's visibility changes—such as when the session is hidden or displayed, or when the user has focused another context—the session receives an eventvisibilitychange event.
Window.blur() - Web APIs
WebAPIWindowblur
shifts focus away from the window.
... syntax window.blur() example window.blur(); notes the window.blur() method is the programmatic equivalent of the user shifting focus away from the current window.
Window.captureEvents() - Web APIs
syntax window.captureevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload.
...--> <script> function reg() { window.captureevents(event.click); window.onclick = page_click; } function page_click() { alert('page click event detected!'); } </script> </head> <body onload="reg();"> <p>click anywhere on this page.</p> </body> </html> notes events raised in the dom by user activity (such as clicking buttons or shifting focus away from the current document) generally pass through the high-level window and document objects first before arriving at the object that initiated the event.
Window.getSelection() - Web APIs
notice also the difference between selection and focus.
... document.activeelement returns the focused element.
Using the aria-activedescendant attribute - Accessibility
it makes do with the overhead of having all or more than one child focusable.
... possible effects on user agents and assistive technology the user agent, which is any software that retrieves, renders and facilitates end user interaction with web content, uses the aria-activedescendant property to inform the assistive technology about the active child which has focus.
Using the group role - Accessibility
assistive technology products should listen for such an event and notify the user accordingly: screen readers should announce the group when focus first lands on a control inside it, and if aria-describedby has been set, the description may be spoken.
... following this the focused control may be announced.
Using the slider role - Accessibility
keyboard and focus the slider should be keyboard focusable and operable.
... when the user tabs focus to the slider, it should land on the thumb: the control a mouse user would drag.
ARIA: switch role - Accessibility
since a switch is an interactive control, it must be focusable and keyboard accessible.
... if the role is applied to a non-focusable element, use the tabindex attribute to change this.
HTML To MSAA - Accessibility
attribute state_system_ selectable if @name attribute is presented state_system_ linked if @href attribute is presented or click event listener is registered state_system_ traversed if link is traversed n/a "jump" if @href is valid n/a br role_system_ whitespace '\n' (new line char) state_system_ readonly n/a n/a n/a button role_system_ pushbutton from child nodes n/a state_system_ focusable state_system_ default if @type attribute has value "submit" n/a "press" n/a caption bstr role n/a n/a n/a description_for (0x100f), points to table element div bstr role n/a n/a n/a n/a n/a n/a fieldset role_system_ grouping text equivalent from child legend element n/a n/a labelled_by (1003), points to legend element n/a n/a hr role_system_ separator n/a n/a n/a n/a n/...
...stem_ listitem from @label attribute, from child text nodes n/a state_system_ selected if option is selected n/a "select" event_object_ selectionwithin event_object_ selectionadd if selected event_object_ selectionremove if unselected select @size > 1 role_system_ list n/a n/a state_system_ multiselectable if multiselectable n/a n/a n/a select @size = 1 role_system_ combobox n/a name of focused option state_system_ expanded if combobox open state_system_ collapsed if combobox is collapsed state_system_ haspopup state_system_ focusable n/a "open"/"close" depending on state event_object_ valuechange when selected option is changed table role_system_ table from @summary attribute n/a described_by (0x100e) points to caption element n/a n/a td, th role_system_ cell n/a n/a n/...
Accessibility Information for Web Authors - Accessibility
how-to's key-navigable custom dhtml widgets in mozilla & ie this document discusses how to use tabindex, element.focus() and onkeypress to make custom dhtml widgets such as menus or tree views keyboard accessible.
...these widgets are usually not even keyboard focusable.
Mobile accessibility checklist - Accessibility
focus all activatable elements must be focusable: standard controls such as links, buttons, and form fields are focusable by default.
... focus should be handled in a logical order and consistent manner.
Perceivable - Accessibility
unctionality occurs when the following styles are applied: line height (line spacing) to at least 1.5 times the font size spacing following paragraphs to at least 2 times the font size letter spacing (tracking) to at least 0.12 times the font size word spacing to at least 0.16 times the font size understanding text spacing 1.4.13 content on hover or focus (aa) added in 2.1 while additional content may appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met: dismissable (can be closed/removed) hoverable (the additional content does not disappear when the pointer is over it) persistent (the additional content does not disappear without user a...
...ction) understanding content on hover or focus note: also see the wcag description for guideline 1.4: distinguishable: make it easier for users to see and hear content including separating foreground from background..
::after (:after) - CSS: Cascading Style Sheets
WebCSS::after
we can also support keyboard users with this technique, by adding a tabindex of 0 to make each span keyboard focusable, and using a css :focus selector.
...</p> css span[data-descr] { position: relative; text-decoration: underline; color: #00f; cursor: help; } span[data-descr]:hover::after, span[data-descr]:focus::after { content: attr(data-descr); position: absolute; left: 0; top: 24px; min-width: 200px; border: 1px #aaaaaa solid; border-radius: 10px; background-color: #ffffcc; padding: 12px; color: #000000; font-size: 14px; z-index: 1; } result specifications specification status comment css pseudo-elements level 4the definition of '::after' in th...
:disabled - CSS: Cascading Style Sheets
WebCSS:disabled
an element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus.
... the element also has an enabled state, in which it can be activated or accept focus.
:enabled - CSS: Cascading Style Sheets
WebCSS:enabled
an element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus.
... the element also has a disabled state, in which it can't be activated or accept focus.
Ordering Flex Items - CSS: Cascading Style Sheets
in the live example below i have added a focus style in order that as you tab from link to link you can see which is highlighted.
... flexbox and the keyboard navigation disconnect html source order vs css display order the responsive order conflict for keyboard focus use cases for order there are sometimes places where the fact that the logical and therefore reading order of flex items is separate from the visual order, is helpful.
Pseudo-classes - CSS: Cascading Style Sheets
index of standard pseudo-classes :active :any-link :blank :checked :current :default :defined :dir() :disabled :drop :empty :enabled :first :first-child :first-of-type :fullscreen :future :focus :focus-visible :focus-within :has() :host :host() :host-context() :hover :indeterminate :in-range :invalid :is() :lang() :last-child :last-of-type :left :link :local-link :not() :nth-child() :nth-col() :nth-last-child() :nth-last-col() :nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :past :placeholder-shown :rea...
... css level 2 (revision 1) recommendation defined :lang(), :first-child, :hover, and :focus.
matrix3d() - CSS: Cascading Style Sheets
a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4 examples cube squashing example the following example shows a 3d cube created from dom elements and transforms, which can be hovered/focused to apply a matrix3d() transform to it.
...div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </section> css #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); margin: 50px auto; } #example-element:hover, #example-element:focus { transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,...
Audio and video manipulation - Developer guides
backrate = 2;</textarea> var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function setplaybackrate() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; setplaybackrate(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', setplaybackrate); window.addeventlistener('load', setplaybackrate); note: try the playbackrate example live.
... filter.connect(context.destination); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function setfilter() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; setfilter(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', setfilter); window.addeventlistener('load', setfilter); note: unless you have cors enabled, to avoid security issues your video should be on the same domain as your code.
Making content editable - Developer guides
ch text editor <!doctype html> <html> <head> <title>rich text editor</title> <script type="text/javascript"> var odoc, sdeftxt; function initdoc() { odoc = document.getelementbyid("textbox"); sdeftxt = odoc.innerhtml; if (document.compform.switchmode.checked) { setdocmode(true); } } function formatdoc(scmd, svalue) { if (validatemode()) { document.execcommand(scmd, false, svalue); odoc.focus(); } } function validatemode() { if (!document.compform.switchmode.checked) { return true ; } alert("uncheck \"show html\"."); odoc.focus(); return false; } function setdocmode(btosource) { var ocontent; if (btosource) { ocontent = document.createtextnode(odoc.innerhtml); odoc.innerhtml = ""; var opre = document.createelement("pre"); odoc.contenteditable = false; ...
... opre.appendchild(ocontent); odoc.appendchild(opre); document.execcommand("defaultparagraphseparator", false, "div"); } else { if (document.all) { 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.clos...
Mobile-friendliness - Developer guides
their desktop site focuses on getting visitors to book trips.
...if your audience is full of early-adopters, you can focus on tablets and smartphones with standards-friendly browsers.
HTML attribute reference - HTML: Hypertext Markup Language
accesskey global attribute keyboard shortcut to activate or add focus to the element.
... autofocus <button>, <input>, <keygen>, <select>, <textarea> the element should be automatically focused after the page loaded.
<a>: The Anchor element - HTML: Hypertext Markup Language
WebHTMLElementa
usually, css hides a skip link offscreen until focused.
... <body> <a href="#content">skip to main content</a> <header> … </header> <main id="content"> <!-- the skip link jumps to here --> .skip-link { position: absolute; top: -3em; background: #fff; } .skip-link:focus { top: 0; } skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.
<body>: The Document Body element - HTML: Hypertext Markup Language
WebHTMLElementbody
onblur function to call when the document loses focus.
... onfocus function to call when the document receives focus.
<input type="hidden"> - HTML: Hypertext Markup Language
WebHTMLElementinputhidden
hidden inputs cannot be focused even using javascript (e.g.
... hiddeninput.focus()).
<keygen> - HTML: Hypertext Markup Language
WebHTMLElementkeygen
autofocus this boolean attribute lets you specify that the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control.
... only one form element in a document can have the autofocus attribute, which is a boolean.
<label> - HTML: Hypertext Markup Language
WebHTMLElementlabel
this means that, for example, a screenreader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
... you can click the associated label to focus/activate the input, as well as the input itself.
Codecs used by WebRTC - Web media technologies
it's worth noting that the rfc covers a variety of video-related requirements, including color spaces (srgb is the preferred, but not required, default color space), recommendations for webcam processing features (automatic focus, automatic white balance, automatic light level), and so on.
...if you select avc, make sure you're; aware of any potential fees you may need to pay; that said, the patent holders have generally said that most typical web site developers shouldn't need to worry about paying the license fees, which are typically focused more on the developers of the encoding and decoding software.
Optimizing startup performance - Web Performance
an often overlooked aspect of app software development—even among those focusing on performance optimization—is startup performance.
...since that's a universal issue, we won't be focusing on it too much here.
Performance budgets - Web Performance
however, based on the specific goals and content of your site, you might choose to focus on other metrics.
...when defining metrics, you should focus on user experience, which will dictate not only the bounce or conversion rate but how likely is that user to return.
Web Performance
since that's a universal issue, we won't be focusing on it too much here.
... css performance features css may be a less important optimization focus for improved performance, but there are some css features that impact performance more than others.
Progressive web app structure - Progressive web apps (PWAs)
we can control what is requested from the server and what is retrieved from the cache with a service worker, which will be explained in detail in the next article — for now let's focus on the structure itself.
...as you can see it is a very ordinary, one page website — the point is to have something simple so we can focus on the implementation of the actual pwa features.
SVG Event Attributes - SVG: Scalable Vector Graphics
WebSVGAttributeEvents
onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload document element event attributes oncopy, oncut, onpaste global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumecha...
...nge, onwaiting graphical event attributes onactivate, onfocusin, onfocusout ...
specularExponent - SVG: Scalable Vector Graphics
the specularexponent attribute controls the focus for the light source.
... value <number> default value 1 animatable yes fespotlight for <fespotlight>, specularexponent defines the exponent value controlling the focus for the light source.
tabindex - SVG: Scalable Vector Graphics
the tabindex attribute allows you to control whether an element is focusable and to define the relative order of the element for the purposes of sequential focus navigation.
...ircle cx="60" cy="60" r="15" tabindex="1" /> <circle cx="60" cy="160" r="30" tabindex="3" /> <circle cx="160" cy="60" r="30" tabindex="2" /> <circle cx="160" cy="160" r="60" tabindex="4" /> </svg> usage notes value valid integer default value none animatable no valid integer relative order of the element for the purposes of sequential focus navigation.
SVG Attribute reference - SVG: Scalable Vector Graphics
WebSVGAttribute
nt attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumecha...
...nge, onwaiting graphical event attributes onactivate, onfocusin, onfocusout ...
Using shadow DOM - Web Components
when the icon is focused, it displays the text in a pop up information box to provide further in-context information.
...reateelement('style'); style.textcontent = ` .wrapper { position: relative; } .info { font-size: 0.8rem; width: 200px; display: inline-block; border: 1px solid black; padding: 10px; background: white; border-radius: 10px; opacity: 0; transition: 0.6s all; position: absolute; bottom: 20px; left: 10px; z-index: 3; } img { width: 1.2rem; } .icon:hover + .info, .icon:focus + .info { opacity: 1; }`; attaching the shadow dom to the shadow root the final step is to attach all the created elements to the shadow root: // attach the created elements to the shadow dom shadow.appendchild(style); shadow.appendchild(wrapper); wrapper.appendchild(icon); wrapper.appendchild(info); using our custom element once the class is defined, using the element is as simple as de...
Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
our focus here is on the second type of stylesheet that gecko supports: the xslt stylesheet.
...xslt allows a stylesheet author to transform a primary xml document in two significant ways: manipulating and sorting the content, including a wholesale reordering of it if so desired, and transforming the content into a different format (and in the case of firefox, the focus is on converting it on the fly into html which can then be displayed by the browser).
Content Scripts - Archive of obsolete content
in many ways these are like content scripts, but they're not the focus of this article.
windows - Archive of obsolete content
nt window has console.log("the active window has " + windows.activewindow.tabs.length + " tabs."); // print the title of all browser windows for (let window of windows) { console.log(window.title); } // close the active window windows.activewindow.close(function() { console.log("the active window was closed"); }); methods activate() makes window active, which will focus that window and bring it to the foreground.
Storing annotations - Archive of obsolete content
on: var annotationeditor = panels.panel({ width: 220, height: 220, contenturl: data.url('editor/annotation-editor.html'), contentscriptfile: data.url('editor/annotation-editor.js'), onmessage: function(annotationtext) { if (annotationtext) handlenewannotation(annotationtext, this.annotationanchor); annotationeditor.hide(); }, onshow: function() { this.postmessage('focus'); } }); listing stored annotations to prove that this works, let's implement the part of the add-on that displays all the previously entered annotations.
Developing for Firefox Mobile - Archive of obsolete content
for example, on mac os x or linux you can use a command like the one below to filter only the lines of console output: adb logcat | grep console you can experiment with different filter strings on adb logcat to focus in on the lines relevant to you.
Autocomplete - Archive of obsolete content
first, declare a panel with the "autocomplete" type, like so: <panel id="popup_autocomplete" type="autocomplete" noautofocus="true" /> now set the autocompletepopup attribute of your <browser> element to the id of the panel you just declared: <browser id="my_browser" ...
Canvas code snippets - Archive of obsolete content
as2dcontext.setup = function() { var methods = ['arc', 'arcto', 'beginpath', 'beziercurveto', 'clearrect', 'clip', 'closepath', 'drawimage', 'fill', 'fillrect', 'filltext', 'lineto', 'moveto', 'quadraticcurveto', 'rect', 'restore', 'rotate', 'save', 'scale', 'settransform', 'stroke', 'strokerect', 'stroketext', 'transform', 'translate']; var gettermethods = ['createpattern', 'drawfocusring', 'ispointinpath', 'measuretext', // drawfocusring not currently supported // the following might instead be wrapped to be able to chain their child objects 'createimagedata', 'createlineargradient', 'createradialgradient', 'getimagedata', 'putimagedata' ]; var props = ['canvas', 'fillstyle', 'font', 'globalalpha', 'globalcompositeoperation', 'linecap', 'linejoin', 'linew...
Dialogs and Prompts - Archive of obsolete content
the code to open a dialog named mydialog.xul and pass it arguments: var params = {inn:{name:"foo", description:"bar", enabled:true}, out:null}; window.opendialog("chrome://myext/content/mydialog.xul", "", "chrome, dialog, modal, resizable=yes", params).focus(); if (params.out) { // user clicked ok.
Tree - Archive of obsolete content
m the selected row assuming the given <tree>: <tree id="my-tree" seltype="single" onselect="ontreeselected()"> use the following javascript: function ontreeselected(){ var tree = document.getelementbyid("my-tree"); var cellindex = 0; var celltext = tree.view.getcelltext(tree.currentindex, tree.columns.getcolumnat(cellindex)); alert(celltext); } getting the tree item from the focused row assuming <tree id="my-tree">, you can use the following to get the tree item: var view = document.getelementbyid("my-tree").view; var sel = view.selection.currentindex; //returns -1 if the tree is not focused var treeitem = view.getitematindex(sel); note that the current index may be unselected (for example, a multi-select tree).
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
focus on the fact that once you get the build working, it'll probably work effortlessly from then on.
Appendix: What you should know about open-source software licenses - Archive of obsolete content
but the computer ecosystem is changing in fundamental ways, with software patents, drm, internationally applied licenses, and other new challenges coming into focus.
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
the chapters so far have each focused on technologies in isolation—xul, javascript, css, and xpcom.
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
the minimum knowledge required in the interest of brevity, i will omit explanations of widely understood technologies, and focus instead on introducing new technologies you will need to understand in order to develop for firefox.
Introduction - Archive of obsolete content
firefox is one of the most successful open source projects in history, combining the openness, standards-compliance and sophistication of open source with the focus on user experience and powerful outreach more commonly seen in less open companies.
Setting Up a Development Environment - Archive of obsolete content
firebug the firebug extension includes pretty much all tools mentioned so far, but it's mostly focused on web development.
XUL School Tutorial - Archive of obsolete content
xul school is a comprehensive add-on development tutorial, focusing on firefox extension development.
Overlay extensions - Archive of obsolete content
xul school xul school is a comprehensive add-on development tutorial, focusing on firefox extension development but mostly applicable to other gecko-based applications.
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
besides the fact that the engineers can finally focus on building out the working functionality of the site rather than worrying about appearance or where the next spacer.gif is supposed to go?
Creating a status bar extension - Archive of obsolete content
many of the concepts introduced here apply to any xul-based application; however, to keep from getting completely overwhelmed, we're going to focus specifically on firefox.
List of Mozilla-Based Applications - Archive of obsolete content
ackage astyle css editor editing tool atmail webmail client aviva for java mainframe connectivity product uses mozilla rhino babelgum internet tv service basilisk pre-servo xul-based web browser uses most of the firefox 55 source code batik java-based toolkit uses mozilla rhino bitbox security focused browser seemingly based on firefox blackbird browser for african american community bluegriffon wysiwyg editor next generation version of composer buzzbird twitter client built on xulrunner camino browser 2.5m downloads and ~400,000 active users ...
Images, Tables, and Mysterious Gaps - Archive of obsolete content
again, we could class images, cells, or rows in order to narrow down the focus of the effect.
Creating a Mozilla Extension - Archive of obsolete content
see building an extension for an up-to-date tutorial (it focuses on firefox, but is also applicable to other new applications).
Dehydra - Archive of obsolete content
the development focus switched to dxr (where the "d" comes from "dehydra"), which is based on clang instead of gcc.
Developing New Mozilla Features - Archive of obsolete content
finding the focus to digest a massive patch in the midst of multiple other demands will take time, even if you’ve done a perfect job.
Download Manager preferences - Archive of obsolete content
browser.download.manager.focuswhenstarting a boolean value that indicates whether or not to focus the download manager window when a download begins.
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
dramatis personae this document focuses on the interaction of three classes with each other, but other mozilla components are also involved.
Layout System Overview - Archive of obsolete content
the presentation shell also receives notifications about changes in cursor and focus states, whereby the selection and caret updates can be made visible.
jspage - Archive of obsolete content
d,a){d=document.id(d);var c=d.retrieve("events");if(!c){return this;}if(!a){for(var b in c){this.cloneevents(d,b); }}else{if(c[a]){c[a].keys.each(function(e){this.addevent(a,e);},this);}}return this;}});element.nativeevents={click:2,dblclick:2,mouseup:2,mousedown:2,contextmenu:2,mousewheel:2,dommousescroll:2,mouseover:2,mouseout:2,mousemove:2,selectstart:2,selectend:2,keydown:2,keypress:2,keyup:2,focus:2,blur:2,change:2,reset:2,select:2,submit:2,load:1,unload:1,beforeunload:2,resize:1,move:1,domcontentloaded:1,readystatechange:1,error:1,abort:1,scroll:1}; (function(){var a=function(b){var c=b.relatedtarget;if(c==undefined){return true;}if(c===false){return false;}return($type(this)!="document"&&c!=this&&c.prefix!="xul"&&!this.haschild(c)); };element.events=new hash({mouseenter:{base:"mouseover"...
Mozilla Application Framework in Detail - Archive of obsolete content
the following architectural diagram depicts necko and its interaction with subsystems: necko is powerful, stable and robust, with current development focused on performance and standards-compliance.
XBL 1.0 Reference - Archive of obsolete content
tyle property <constructor> call <destructor> call binding documents dom interfaces the nsidomdocumentxbl interface anonymous content introduction scoping and access using the dom content generation rules for generation attribute forwarding insertion points <children> handling dom changes event flow and targeting flow and targeting across scopes focus and blur events mouseover and mouseout events anonymous content and css selectors and scopes binding stylesheets binding implementations introduction methods properties inheritance of implementations event handlers example - sticky notes updated and adjusted for the current firefox implementation.
Using XPInstall to Install Plugins - Archive of obsolete content
this article focuses on how to install plugins.
accesskey - Archive of obsolete content
when the user presses a modifier key specific to the platform (eg, control* on windows, command* on macintosh) and the access key, the element will be focused and/or activated from anywhere in the window.
control - Archive of obsolete content
when the user clicks on the label, the associated element is given focus.
current - Archive of obsolete content
this is typically used by a theme to customize the focus ring.
disabled - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
events - Archive of obsolete content
focus: occurs when the focused element changes.
forcecomplete - Archive of obsolete content
« xul reference home forcecomplete new in thunderbird 3requires seamonkey 2.0 type: boolean if true, the textbox will be filled in with the best match when it loses the focus.
panel.noautohide - Archive of obsolete content
« xul reference home noautohide type: boolean if false, the default value, the panel will be hidden when the user clicks outside the panel or switches focus to another application.
tabscrolling - Archive of obsolete content
if false, the default, the tab key moves the focus to the next element.
tabindex - Archive of obsolete content
the tab order is the order in which the focus is moved when the user presses the "tab" key.
textbox.forceComplete - Archive of obsolete content
« xul reference home forcecomplete obsolete since gecko 1.9.1 type: boolean if true, the textbox will be filled in with the best match when it loses the focus.
textbox.onblur - Archive of obsolete content
« xul reference home onblur type: script code this event is sent when a textbox loses keyboard focus.
textbox.onchange - Archive of obsolete content
the event is not sent until the focus is moved to another element.
textbox.tabScrolling - Archive of obsolete content
if false, the default, the tab key moves the focus to the next element.as of gecko 1.9.1, this attribute is now always specified in lower case.
command - Archive of obsolete content
ArchiveMozillaXULEventscommand
for example, a button can be activated by clicking on it with the mouse or by pressing space while it has the focus.
List of commands - Archive of obsolete content
_scrolllinedown cmd_scrollleft cmd_scrollright cmd_selectcharprevious cmd_selectcharnext cmd_wordprevious cmd_wordnext cmd_selectwordprevious cmd_selectwordnext cmd_beginline cmd_endline cmd_selectbeginline cmd_selectendline cmd_selectlineprevious cmd_selectlinenext cmd_selectpageprevious cmd_selectpagenext cmd_selectmovetop cmd_selectmovebottom editor commands (legal when the focus is anywhere where you can type text): cmd_paste - paste a selection from the clipboard cmd_pastequote cmd_delete cmd_deletecharbackward cmd_deletecharforward cmd_deletewordbackward cmd_deletewordforward cmd_deletetobeginningofline cmd_deletetoendofline cmd_scrolltop cmd_scrollbottom cmd_movetop cmd_movebottom cmd_selecttop cmd_selectbottom cmd_linenext cmd_lineprevious cmd_sel...
startFind - Archive of obsolete content
this opens the findbar, focuses the edit field for the search term, and selects its contents.
openWindow - Archive of obsolete content
if a window with that type is already open, this method will just switch that window to the front and focus it instead of opening another window.
Methods - Archive of obsolete content
advanceselectedtab appendcustomtoolbar appendgroup appenditem appendnotification blur cancel canceldialog centerwindowonscreen checkadjacentelement clearresults clearselection click close collapsetoolbar contains decrease decreasepage docommand ensureelementisvisible ensureindexisvisible ensureselectedelementisvisible expandtoolbar extra1 extra2 focus getbrowseratindex getbrowserfordocument getbrowserfortab getbrowserindexfordocument getbutton getdefaultsession geteditor getelementsbyattribute getelementsbyattributens getformattedstring gethtmleditor getindexoffirstvisiblerow getindexofitem getitematindex getnextitem getnotificationbox getnotificationwithvalue getnumberofvisiblerows getpagebyid getprevio...
MenuButtons - Archive of obsolete content
when using the keyboard, pressing the down key will open the menu while the button is focused.
Positioning - Archive of obsolete content
if a context menu was opened via the keyboard only, the menu will appear at the top left corner of the document, or underneath the currently selected item if a list is focused.
clickSelectsAll - Archive of obsolete content
« xul reference clickselectsall type: boolean if set to true, the contents of the textbox are selected when focused; otherwise, the cursor is left unchanged.
controllers - Archive of obsolete content
the document's command dispatcher will locate controllers to handle a command by using the focused element's list.
currentItem - Archive of obsolete content
« xul reference currentitem type: listitem element returns the currently focused item in the list box, which is only useful in a multiple selection list box.
Property - Archive of obsolete content
lsymbol defaultbutton defaultvalue description dir disableautocomplete disableautocomplete disableautoselect disabled disablekeynavigation dlgtype docshell documentcharsetinfo editable editingcolumn editingrow editingsession editor editortype emptytext deprecated since gecko 2 enablecolumndrag eventnode firstordinalcolumn firstpermanentchild flex focused focuseditem forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label labelelement lastpermanentchild lastselected left linkedpan...
Sorting and filtering a custom tree view - Archive of obsolete content
iblerow); } function inputfilter(event) { //do this now rather than doing it at every comparison var value = prepareforcomparison(event.target.value); setfilter(value); document.getelementbyid("clearfilter").disabled = value.length == 0; } function clearfilter() { document.getelementbyid("clearfilter").disabled = true; var filterelement = document.getelementbyid("filter"); filterelement.focus(); filterelement.value = ""; setfilter(""); } function setfilter(text) { filtertext = text; loadtable(); } ...
text-link - Archive of obsolete content
« xul reference home text-link labels with this class may be focused and the click handler run or the address in the href attribute opened on a mouse click or enter key press.
The Joy of XUL - Archive of obsolete content
as a rapidly maturing cross-platform technology, xul could fill an interesting void for technologies such as java j2ee and microsoft .net which focus on enabling network access to distributed objects.
Adding Buttons - Archive of obsolete content
when the user presses alt (or a similar key that varies on each platform) and the access key, the button will be focused from anywhere in the window.
Creating a Skin - Archive of obsolete content
normally, a skin would apply to the entire application, but we'll focus on just the find files dialog to make it easier.
Numeric Controls - Archive of obsolete content
the user may also increment or decrement the value using this increment by using the up and down cursor keys while the textbox is focused.
Styling a Tree - Archive of obsolete content
the following properties are automatically set as needed: checked this property is set cells whose column is type="checkbox" focus this property is set if the tree currently has the focus.
Templates - Archive of obsolete content
(you may have to focus the window for it to change.) container and datasources the template itself is placed inside a vertical box.
Tree Box Objects - Archive of obsolete content
the scrollbypages() function scrolls by a number of pages and is called automatically when the user presses the page up or page down keys while the tree is focused.
XUL Tutorial - Archive of obsolete content
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 trees trees more tree features tree selection custom tree views tree view details tree box objects rdf and templates introduction to rdf templates trees and templates ...
Urlbar-icons - Archive of obsolete content
(the url bar is also known as the address bar and the navigation bar.) example the default contents of browser.xul: <hbox id="urlbar-icons"> <button be="" chromedir="ltr" class="urlbar-icon" click="" for="" id="safebrowsing-urlbar-icon" img="" level="safe" might="" onclick="godocommand('safebrowsing-show-warning');" page="" style="-moz-user-focus:" tooltiptext="this" type="menu"> <img class="urlbar-icon" id="star-button" onclick="placesstarbutton.onclick(event);" /> <img address="" chromedir="ltr" class="urlbar-icon" id="go-button" in="" location="" onclick="handleurlbarcommand(event);" p="" the="" to="" tooltiptext="go" /> </button> </hbox> ...
XUL Questions and Answers - Archive of obsolete content
this problem can be solved by capturing the focus events and giving the focus to another xul element or capturing and canceling the keypress events.
XUL Event Propagation - Archive of obsolete content
this flexibility in the xul event model is the focus of this article.
action - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
assign - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
bbox - Archive of obsolete content
ArchiveMozillaXULbbox
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
binding - Archive of obsolete content
, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
bindings - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
box - Archive of obsolete content
ArchiveMozillaXULbox
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
broadcaster - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
broadcasterset - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
browser - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupport...
column - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
columns - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
conditions - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
content - Archive of obsolete content
métodos inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
deck - Archive of obsolete content
ArchiveMozillaXULdeck
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
dialog - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupport...
dialogheader - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
dropmarker - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
editor - Archive of obsolete content
inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
grid - Archive of obsolete content
ArchiveMozillaXULgrid
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
grippy - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
groupbox - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
hbox - Archive of obsolete content
ArchiveMozillaXULhbox
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
iframe - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
image - Archive of obsolete content
ArchiveMozillaXULimage
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
listcol - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
listcols - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
member - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
menubar - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
menupopup - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupport...
notification - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupport...
notificationbox - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupport...
observes - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
page - Archive of obsolete content
ArchiveMozillaXULpage
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
param - Archive of obsolete content
ArchiveMozillaXULparam
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
popupset - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
preferences - Archive of obsolete content
inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
prefpane - Archive of obsolete content
inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
progressmeter - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
query - Archive of obsolete content
ArchiveMozillaXULquery
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
queryset - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
resizer - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
row - Archive of obsolete content
ArchiveMozillaXULrow
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
rows - Archive of obsolete content
ArchiveMozillaXULrows
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
rule - Archive of obsolete content
ArchiveMozillaXULrule
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
script - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
scrollbar - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
scrollbox - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
scrollcorner - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
separator - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
spacer - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
spinbuttons - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
splitter - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
stack - Archive of obsolete content
ArchiveMozillaXULstack
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
statusbar - Archive of obsolete content
, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
<statusbarpanel> - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
stringbundle - Archive of obsolete content
inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
stringbundleset - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
tabbrowser - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupport...
tabpanel - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
tabpanels - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
template - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
textnode - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
toolbar - Archive of obsolete content
inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
toolbargrippy - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
toolbaritem - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
toolbarpalette - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
toolbarseparator - Archive of obsolete content
, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
toolbarset - Archive of obsolete content
, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
toolbarspacer - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
toolbarspring - Archive of obsolete content
, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
toolbox - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupport...
tooltip - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupport...
treecell - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
treechildren - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
treecol - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
treecols - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
treeitem - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
treerow - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
treeseparator - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
triple - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
vbox - Archive of obsolete content
ArchiveMozillaXULvbox
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
where - Archive of obsolete content
ArchiveMozillaXULwhere
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
window - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
wizard - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupport...
wizardpage - Archive of obsolete content
x, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
MacFAQ - Archive of obsolete content
s() { var singletonwindowtype = nspreferences.copyunicharpref("toolkit.singletonwindowtype"); var windowmediator = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); var win = windowmediator.getmostrecentwindow(singletonwindowtype); if (win) { window.close(); win.focus(); } } if (window.arguments && window.arguments[0]){ try { var cmdline = window.arguments[0] .queryinterface(components.interfaces.nsicommandline); for (var i = 0; i < cmdline.length; ++i) { debug(cmdline.getargument(i)) } } catch(ex) { debug(window.arguments[0]) // do something with window.argu...
XULRunner tips - Archive of obsolete content
("browser.download.manager.showalertoncomplete", true); pref("browser.download.manager.showalertinterval", 2000); pref("browser.download.manager.retention", 2); pref("browser.download.manager.showwhenstarting", true); pref("browser.download.manager.usewindow", true); pref("browser.download.manager.closewhendone", true); pref("browser.download.manager.opendelay", 0); pref("browser.download.manager.focuswhenstarting", false); pref("browser.download.manager.flashcount", 2); // pref("alerts.slideincrement", 1); pref("alerts.slideincrementtime", 10); pref("alerts.totalopentime", 4000); pref("alerts.height", 50); if you are missing preferences that a dialog requires, you will get the following errors: component returned failure code: 0x8000ffff (ns_error_unexpected) [nsiprefbranch.getboolpref] er...
Archived Mozilla and build documentation - Archive of obsolete content
dehydra the development focus switched to dxr (where the "d" comes from "dehydra"), which is based on clang instead of gcc.
2006-11-17 - Archive of obsolete content
firefox 2.0 - window.focus() user questions where the change in behaviour in window.focus() is a bug or was intented.
2006-10-06 - Archive of obsolete content
discussions none for this week meetings community test day - on friday october 6th, 2006 in irc chat room #testday there will be a test day focusing on safe browsing between 7am to 5pm pdt.
2006-11-03 - Archive of obsolete content
discussions none meetings community test day - on friday, november 3, 2006 another community test day focusing on security and stability release, and you can help by verifying bugs, and by running the litmus test cases under the ffts or the bfts.
Adobe Flash - Archive of obsolete content
the focus of this article is to present tips on scripting flash within gecko™-based web browsers.
XEmbed Extension for Mozilla Plugins - Archive of obsolete content
also, when included with builds of mozilla that are based on gtk 1.2 or gtk 2.x, the xt code that hosts the plugins is at best hacky and has been the source for many minor problems including inconsistent focus behavior as well as occasional crashes.
Syndicating content with RSS - Archive of obsolete content
we've already discussed the first step—creating rss feeds— so we'll focus on the other two steps here.
Security Controls - Archive of obsolete content
there are three types of security controls, as follows: management controls: the security controls that focus on the management of risk and the management of information system security.
Vulnerabilities - Archive of obsolete content
website vulnerabilities owasp or open web security project is a non-profit charitable organization focused on improving the security of software and web applications.
Create Your Own Firefox Background Theme - Archive of obsolete content
submit your theme now more tutorials mozilla themes focal point on sizing - a tutorial on theming with a focus on sizing, by vanillaorchids.
::-ms-clear - Archive of obsolete content
the clear button is only shown on focused, non-empty text controls.
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
in recent developments we also see the advent of other performant engines for javascript such as v8 from google and squirrelfish for webkit, these engines are raising the bar on performance and help to maintain a competitive environment that will hopefully direct competitive focus on the performance aspect of all the major javascript implementations.
Writing JavaScript for XHTML - Archive of obsolete content
this is xml proof, as long as you keep the namespace problem in focus (e.g., there is a document.createelementns method).
XForms Help Element - Archive of obsolete content
the help message will be displayed if the f1 key is pressed while the containing form control has focus or if the containing form control recieves a xforms-help event.
XForms Output Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding special value - xpath expression whose evaluation result is used as the output's value.
XForms Range Element - Archive of obsolete content
accesskey - used to specify the keyboard shortcut for focusing this control.
XForms Secret Element - Archive of obsolete content
accesskey - used to specify the keyboard shortcut for focusing this control.
XForms Submit Element - Archive of obsolete content
accesskey - used to specify the keyboard shortcut for focusing this control.
XForms Textarea Element - Archive of obsolete content
accesskey - used to specify the keyboard shortcut for focusing this control.
XForms Trigger Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding type restrictions the trigger element can be bound to a node containing data of any type.
XForms Upload Element - Archive of obsolete content
accesskey - used to specify the keyboard shortcut for focusing this control.
Archive of obsolete content
creating a status bar extension many of the concepts introduced here apply to any xul-based application; however, to keep from getting completely overwhelmed, we're going to focus specifically on firefox.
Anatomy of a video game - Game development
this uses processor time even when unfocused or minimized, hogs the main thread, and is probably an artifact of traditional game loops (but it is simple.) draw on requestanimationframe and update on a setinterval or settimeout in a web worker.
Explaining basic 3D theory - Game development
fragment processing fragment processing focuses on textures and lighting — it calculates final colors based on the given parameters.
Building up a basic demo with the PlayCanvas engine - Game development
drawing everything for given shape is taken care of by the engine, so we can focus on the high level coding.
Building up a basic demo with Three.js - Game development
detail like drawing required vertices and faces, for a given shape, is handled by the three framework, so we can focus on higher level coding.
Implementing game control mechanisms - Game development
the articles javascript is the perfect choice for mobile gaming because of html5 being truly multiplatform; all of the following articles focus on the apis provided for interfacing with different control mechanisms: mobile touch controls — the first article will kick off with touch, as the mobile first approach is very popular.
Efficient animation for web games - Game development
a take-away to help combat poor animation performance, chris lord wrote animator.js, a simple, easy-to-use animation library, heavily influenced by various parts of clutter, but with a focus on avoiding scope-creep.
Bounce off the walls - Game development
add this to your code, somewhere below the existing variable declarations: var ballradius = 10; now update the line that draws the ball inside the drawball() function to this: ctx.arc(x, y, ballradius, 0, math.pi*2); bouncing off the top and bottom there are four walls to bounce the ball off — let's focus on the top one first.
Collision detection - Game development
that's the beauty of using the framework — you can leave a lot of boring code to phaser, and focus on the most fun and interesting parts of making a game.
DTLS (Datagram Transport Layer Security) - MDN Web Docs Glossary: Definitions of Web-related terms
it's based on the stream-focused transport layer security (tls), providing a similar level of security.
Graceful degradation - MDN Web Docs Glossary: Definitions of Web-related terms
it is a useful technique that allows web developers to focus on developing the best possible websites, given that those websites are accessed by multiple unknown user-agents.
Middleware - MDN Web Docs Glossary: Definitions of Web-related terms
it is the software that handles communication between components and input/output, so developers can focus on the specific purpose of their application.
Mobile First - MDN Web Docs Glossary: Definitions of Web-related terms
mobile first, a form of progressive enhancement, is a web-development and web-design approach that focuses on prioritizing design and development for mobile screen sizes over design and development for desktop screen sizes.
Progressive Enhancement - MDN Web Docs Glossary: Definitions of Web-related terms
progressive enhancement is a useful technique that allows web developers to focus on developing the best possible websites while making those websites work on multiple unknown user agents.
Responsive web design - MDN Web Docs Glossary: Definitions of Web-related terms
responsive web design (rwd) is a web development concept focusing on making sites look and behave optimally on all personal computing devices, from desktop to mobile.
jQuery - MDN Web Docs Glossary: Definitions of Web-related terms
jquery is a javascript library that focuses on simplifying dom manipulation, ajax calls, and event handling.
Assessment: Accessibility troubleshooting - Learn web development
can you make it keyboard accessible, both in terms of focusing it using the tab key, and activating it using the return key?
Test your skills: CSS and JavaScript accessibility - Learn web development
however, their accessibility is pretty bad — there is no way to really tell that they are links, or to tell which one the user is focussed on.
What is accessibility? - Learn web development
a good foundation of accessibility for people with cognitive impairments includes: delivering content in more than one way, such as by text-to-speech or by video; easily-understood content, such as text written using plain-language standards; focusing attention on important content; minimizing distractions, such as unnecessary content or advertisements; consistent webpage layout and navigation; familiar elements, such as underlined links blue when not visited and purple when visited; dividing processes into logical, essential steps with progress indicators; website authentication as easy as possible without compromising security; and ...
Advanced styling effects - Learn web development
we'll go with some different html for this example: <button>press me!</button> button { width: 150px; font-size: 1.1rem; line-height: 2; border-radius: 10px; border: none; background-image: linear-gradient(to bottom right, #777, #ddd); box-shadow: 1px 1px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); } button:focus, button:hover { background-image: linear-gradient(to bottom right, #888, #eee); } button:active { box-shadow: inset 2px 2px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); } this gives us the following result: here we've set up some button styling along with focus/hover/active states.
Debugging CSS - Learn web development
you will also find that browsers have chosen to focus on different areas when creating their devtools.
Supporting older browsers - Learn web development
however, unless you have a very high number of visitors in older ie versions, you may find it better to focus on creating a fallback that works for all non-supporting browsers.
Getting started with CSS - Learn web development
this has different states depending on whether it is unvisited, visited, being hovered over, focused via the keyboard, or in the process of being clicked (activated).
What do common web layouts contain? - Learn web development
even now with the new focus on mobile web, almost all mainstream webpages are built from these parts: header visible at the top of every page on the site.
What HTML features promote accessibility? - Learn web development
<a href="inept.html" title="why i'm rubbish at writing link text: an explanation and an apology.">click here</a> to find out more.</p> access keys access keys provide easier navigation by assigning a keyboard shortcut to a link, which will usually gain focus when the user presses alt or ctrl + the access key.
How much does it cost to do something on the Web? - Learn web development
if you're more focused on design, take a look at the anatomy of a web page.
How do I start to design my website? - Learn web development
summary when starting with a web project, many people focus on the technical side.
What are browser developer tools? - Learn web development
:hover/:active/:focus.
The HTML5 input types - Learn web development
note that the clear icon only appears if the field has a value, and, apart from safari, it is only displayed when the field is focused.
Example 2 - Learn web development
nana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> <form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : b...
Example - Learn web development
; padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div+div { margin-top: 1em; } label span { display: inline-block; width: 120px; text-align: right; } input, textarea { font: 1em sans-serif; width: 250px; box-sizing: border-box; border: 1px solid #999; } input[type=checkbox], input[type=radio] { width: auto; border: none; } input:focus, textarea:focus { border-color: #000; } textarea { vertical-align: top; height: 5em; resize: vertical; } fieldset { width: 250px; box-sizing: border-box; margin-left: 136px; border: 1px solid #999; } button { margin: 20px 0 0 124px; } label { position: relative; } label em { position: absolute; right: 5px; top: 20px; } result ...
How to structure a web form - Learn web development
this is useful for controls like text inputs, where you can click the label as well as the input to focus it, but it is especially useful for radio buttons and checkboxes — the hit area of such a control can be very small, so it is useful to make it as easy to activate as possible.
Example - Learn web development
right; } input, textarea { /* to make sure that all text field have the same font settings by default, textarea are set with a monospace font */ font: 1em sans-serif; /* to give the same size to all text field */ width: 300px; -moz-box-sizing: border-box; box-sizing: border-box; /* to harmonize the look & feel of text field border */ border: 1px solid #999; } input:focus, textarea:focus { /* to give a little highligh on active elements */ border-color: #000; } textarea { /* to properly align multiline text field with their label */ vertical-align: top; /* to give enough room to type some text */ height: 5em; /* to allow users to resize any textarea vertically it works only on chrome, firefox and safari */ resize: vertical; } .button { /...
HTML Cheatsheet - Learn web development
it's always possible to totally change the look and feel of a given tag using css so, when using html, take the time to focus on the meaning rather than the appearance.
Use JavaScript within a webpage - Learn web development
<script> window.addeventlistener('load', function () { console.log('this function is executed once the page is fully loaded'); }); </script> that's convenient when you just need a small bit of javascript, but if you keep javascript in separate files you'll find it easier to focus on your work write self-sufficient html write structured javascript applications use scripting accessibly accessibility is a major issue in any software development.
Responsive images - Learn web development
you should note that we will be focusing on the html <img>s for this section, as seen in the content area of the example above — the image in the site header is only for decoration, and therefore implemented using css background images.
How to contribute to the Learning Area on MDN - Learn web development
it may see periodical improvements or updates, and may eventually even be cleaned up (and de-archived) for better uxp focus, but for now, it's a historical snapshot for reference, not a living website.
Build your own function - Learn web development
the main part we want to focus on here is the function's structure and usage, but we wanted to show something interesting for this example.
Function return values - Learn web development
it runs whenever the change event fires on the text input — that is, when a new value is entered into the text input, and submitted (e.g., enter a value, then unfocus the input by pressing tab or return).
Drawing graphics - Learn web development
webgl allows you to create real 3d graphics inside your web browser; the below example shows a simple rotating webgl cube: this article will focus mainly on 2d canvas, as raw webgl code is very complex.
Fetching data from the server - Learn web development
now let's focus just on the function: function(response) { response.text().then(function(text) { poemdisplay.textcontent = text; }); } the response object has a method text() that takes the raw data contained in the response body and turns it into plain text — the format we want it in.
Storing the information you need — Variables - Learn web development
in the next article, we'll focus on numbers in more detail, looking at how to do basic math in javascript.
Object-oriented JavaScript for beginners - Learn web development
previous overview: objects next with the basics out of the way, we'll now focus on object-oriented javascript (oojs) — this article presents a basic view of object-oriented programming (oop) theory, then explores how javascript emulates object classes via constructor functions, and how to create object instances.
Introducing JavaScript objects - Learn web development
object-oriented javascript for beginners with the basics out of the way, we'll now focus on object-oriented javascript (oojs) — this article presents a basic view of object-oriented programming (oop) theory, then explores how javascript emulates object classes via constructor functions, and how to create object instances.
CSS performance optimization - Learn web development
html performance features css performance features fonts and performance mobile performance focusing on performance see also css animation performance ...
HTML performance features - Learn web development
html performance features css performance features fonts and performance mobile performance focusing on performance see also the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) ...
Measuring performance - Learn web development
html performance features css performance features fonts and performance mobile performance focusing on performance ...
Multimedia: Images - Learn web development
html performance features css performance features fonts and performance mobile performance focusing on performance ...
Perceived performance - Learn web development
html performance features css performance features fonts and performance mobile performance focusing on performance ...
What is web performance? - Learn web development
html performance features css performance features fonts and performance mobile performance focusing on performance ...
The business case for web performance - Learn web development
html performance features css performance features fonts and performance mobile performance focusing on performance ...
JavaScript performance - Learn web development
html performance features css performance features fonts and performance mobile performance focusing on performance ...
Multimedia: video - Learn web development
html performance features css performance features fonts and performance mobile performance focusing on performance ...
The "why" of web performance - Learn web development
html performance features css performance features fonts and performance mobile performance focusing on performance ...
Server-side web frameworks - Learn web development
built by experienced developers, it takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel.
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Ember resources and troubleshooting - Learn web development
ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Routing in Ember - Learn web development
ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Framework main features - Learn web development
ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Componentizing our React app - Learn web development
ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
React interactivity: Events and state - Learn web development
ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Componentizing our Svelte app - Learn web development
ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Deployment and next steps - Learn web development
ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Getting started with Svelte - Learn web development
ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Dynamic behavior in Svelte: working with variables and props - Learn web development
ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Using Vue computed properties - Learn web development
ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Creating our first Vue component - Learn web development
ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Getting started with Vue - Learn web development
ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Rendering a list of Vue components - Learn web development
ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Vue resources - Learn web development
ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Introduction to automated testing - Learn web development
note: there are other commercial browser testing systems available but in this article, we'll focus on lambdatest, sauce labs, and browserstack.
Strategies for carrying out testing - Learn web development
you may also consider using open source and privacy focussed analytics platforms like open web analytics and matomo.
Cross browser testing - Learn web development
this module focuses on testing web projects across different browsers.
Deploying our app - Learn web development
objective: to finish working through our complete toolchain case study, focusing on deploying the app.
Client-side tooling overview - Learn web development
though your choice of code editor is certainly a tooling choice, this series of articles will go beyond that, focusing on developer tools that help you produce web code more efficiently.
Accessibility Features in Firefox
screen magnifier users can also benefit from firefox's powerful features today, as caret and focus tracking are fully enabled.
Accessibility Information for Core Gecko Developers
these widgets are often not even keyboard focusable, and assistive technologies do not understand these widgets.
Information for External Developers Dealing with Accessibility
erence on keyboard for mac os x: this document list all functions of specified keys, known keyboard shortcuts, explains how to create keyboard shortcuts, explains appropriate use for the arrow keys, how to move the insertion point with keys, how to extent text selection with keys, functions of function keys, what are reserved keyboard shortcuts, how to create your own keyboard shortcuts, keyboard focus and navigation, type-ahead and key-repeat, etc.
Software accessibility: Where are we today?
otherwise, screen magnification programs may be used, which allow zooming in to portions of the screen, while following the mouse or the current focus.
ZoomText
our main focus is on the browser itself, so you you only need to install mailnews or address book if curious about the other apps.
Accessibility and Mozilla
they also define a list of possible object states, such as focused, read-only, checked, etc.accessibility features in firefoxfirefox works with popular screen readers, with the best support currently coming from gw micro's window-eyes 5.5.
Lightweight themes
more tutorials mozilla themes focal point on sizing - a tutorial on theming with a focus on sizing, by vanillaorchids.
A bird's-eye view of the Mozilla framework
the article focuses on the architecture of the overall framework supporting the mozilla application suite, not the architecture of the individual applications themselves.
Testopia
this decision allows us to focus our time more on releasing new features often and early rather than back porting.
Debugging
documentation topics debugging on top of the mozilla platform debugging javascript code how to debug javascript code, with a focus on debugging code in the mozilla project itself.
How Mozilla's build system works
although we call the base class buildbackend, the class doesn't need to be focused with building at all.
The Firefox codebase: CSS Guidelines
part of those adjustments include making all box-shadow invisible, so this is something to be aware of if you create a focus ring or a border using the box-shadow property: consider using a border or an outline if you want the border/focus ring to stay visible in high-contrast mode.
Eclipse CDT
organizing views use ctrl-m to toggle maximization of the current editor view (the editor must be focused first).
Getting documentation updated
it may see periodical improvements or updates, and may eventually even be cleaned up (and de-archived) for better uxp focus, but for now, it's a historical snapshot for reference, not a living website.
Contributing to the Mozilla code base
project skills documentation/onboarding firefox browser (core layers) c++ firefox developers documentation firefox (front-end) javascript and/or html/css firefox developers documentation devtools javascript and/or html/css contribute to devtools add-ons javascript and/or html/css contribute to add-ons firefox focus for android java contribute to firefox focus for android firefox for fire tv java contribute to firefox for fire tv firefox preview (mobile browser, codename: "fenix") kotlin contribute to firefox preview firefox for ios swift contribute to firefox for ios firefox focus for ios swift contribute to firefox focus for ios moz...
Displaying Places information using views
the built-in views if you need to show the contents of bookmarks or history in your extension or application, you may want to use the built-in places views, which are generic and will save you a lot of time writing basic functionality so that you can focus on building your extension or application.
Cross Process Object Wrappers
for example, you can't pass a cpow into nsifocusmanager.setfocus().
Using the Browser API
MozillaGeckoChromeAPIBrowser APIUsing
finally, we call blur() on the url bar to stop focusing it, so the keyboard moves off the screen, allowing us to get our full screen view back.
Services.jsm
r nsidomstoragemanager dom storage manager domrequest nsidomrequestservice domrequest service downloads nsidownloadmanager download manager droppedlinkhandler nsidroppedlinkhandler dropped link handler service els nsieventlistenerservice event listener service etld nsieffectivetldservice effectivetld service focus nsifocusmanager focus manager io nsiioservice nsiioservice2 i/o service locale nsilocaleservice locale service logins nsiloginmanager password manager service metro nsiwinmetroutils 2 mm nsimessagebroadcaster nsiframescriptloader global frame message manager3 obs nsiobserverservice observer ser...
Mozilla Content Localized in Your Language
focus on making the ui short and precise.
Localizing without a specialized tool
from the create a new localization document, an interested localizer can follow a technical step-by-step process that starts the localization process by focusing on how to localize two of the primary types of localization files (dtd and properties) used in the mozilla source code.
Localization sign-off reviews
focuses on technical accuracy and completion of l10n work, not translation quality.
Localization technical reviews
focusses on technical accuracy and completion of l10n work, not translation quality.
What every Mozilla translator should know
discussion about localization take part here just as well as l10n-focused announcements.
Writing localizable code
about localizers a few notes about localizers for developers who rarely deal with them: localizers like tools, and they don't like editors, localization tools are often based on key-value pairs, at least some localizers have their talents focused on language skills and are not savvy in programming, or even building applications.
Mozilla Web Developer FAQ
instead of putting time and effort into reverse-engineering and cloning legacy browsers, it makes more sense to focus on implementing standards.
Leak-hunting strategies and tips
strategy for finding leaks when trying to make a particular testcase not leak, i recommend focusing first on the largest object graphs (since these entrain many smaller objects), then on smaller reference-counted object graphs, and then on any remaining individual objects or small object graphs that don't entrain other objects.
Performance
turbostat (linux-only) turbostat is a command-line utility that gathers and displays various power-related measurements, with a focus on per-cpu measurements such as frequencies and c-states.
McCoy
specifically, it focuses on the process of digitally signing update manifests so the applications can verify the integrity of a manifest retrieved over normally insecure channels.
Index
this is a minor release focusing on functional bug fixes and low-risk patches only.
NSS 3.51.1 release notes
this is a minor release focusing on functional bug fixes and low-risk patches only.
nss tech note4
pulling certificate extension information out of ssl certificates nss technical note: 4 note: this document contains code snippets that focus on essential aspects of the task and often do not illustrate all the cleanup that needs to be done.
nss tech note5
note: this document contains code snippets that focus on essential aspects of the task and often do not illustrate all the cleanup that needs to be done.
Creating JavaScript tests
focus on writing fast, light tests that cover a single feature.
GCIntegration - SpiderMonkey Redirect 1
this page is intended to explain the changes that are happening, with a focus on how they will affect gecko code that uses jsapi.
How to embed the JavaScript engine
// js_callfunctionname(cx, global, "func", 2, argv.begin(), rval.address()); js_callfunctionname(cx, global, "func", argv, &rval); example say the click event is for the top-most or focused ui element at position (x, y): jsobject *target, *event; js::autovaluearray<1> argv(cx); /* * find event target and make event object to represent this click.
Index
this page is intended to explain the changes that are happening, with a focus on how they will affect gecko code that uses jsapi.
64-bit Compatibility
this article focuses on hacking tracemonkey code generation (jstracer.cpp, jsregex.cpp) in ways that will work on both 32-bit and 64-bit jit backends.
Web Replay
by focusing on intercepting these apis, browser instrumentation, recording overhead, and the maintenance burden going forward are all minimized.
Mozilla Projects
specifically, it focuses on the process of digitally signing update manifests so the applications can verify the integrity of a manifest retrieved over normally insecure channels.
Handling Mozilla Security Bugs
note that the focus of this new structure is restricted solely to addressing actual security vulnerabilities arising from problems in mozilla code.
ROLE_ALERT
used by aria: alert, alertdialog xul: <notification/>, <panel noautofocus = "true"/> ...
XUL Accessibility
role role_alert <panel noautofocus = "true" /> role_alert ...
An Overview of XPCOM
this book focuses on the latter - extending gecko - but the fundamental ideas in the book will be important to developers embedding gecko as well.
Building the WebLock UI
in this tutorial, focusing as it is on the weblock functionality (rather than the ui), we'll assume the strings we get from the ui itself are urls we actually want to write to the white list: function addthissite() { var tf = document.getelementbyid("dialog.input"); // weblock is global and declared above weblock.addsite(tf.value); } this javascript function can be called directly from the xul widget, where the...
Component Internals
so far this book has been focusing on "native components," shared libraries exporting a nsgetmodule symbol.
XPConnect wrappers
this means that when you say window.focus(), you're calling into xpcwrappednative code.
IAccessibleAction
since these key sequences are to be used when the object has focus, they are like mnemonics (access keys), and not like shortcut (accelerator) keys.
inIDOMUtils
value state 1 :active 2 :focus 4 :hover 8 :-moz-drag-over 16 :target 1<<29 :-moz-focusring methods getbindingurls() returns an array of nsiuri objects representing the current xml binding for the specified element.
nsIAccessibleRelation
when this object is activated the target object doesn't lose focus.
nsIAutoCompleteInput
forcecomplete boolean if true, the text field automatically completes to the default result whenever the user hits the enter key or the text field loses focus.
nsIControllers
windows and text inputs have default controllers that allow commands such as cmd_copy to act on the focused element or window.
nsIDOMEvent
mouseup 0x00000002 mouseover 0x00000004 mouseout 0x00000008 mousemove 0x00000010 mousedrag 0x00000020 click 0x00000040 dblclick 0x00000080 keydown 0x00000100 keyup 0x00000200 keypress 0x00000400 dragdrop 0x00000800 focus 0x00001000 blur 0x00002000 select 0x00004000 change 0x00008000 reset 0x00010000 submit 0x00020000 scroll 0x00040000 load 0x00080000 unload 0x00100000 xfer_done 0x00200000 abort 0x00400000 error 0x00800000 lo...
nsIDOMWindowInternal
void alert(in domstring text) boolean confirm(in domstring text) domstring prompt([optional] in domstring amessage, [optional] in domstring ainitial, [optional] in domstring atitle, [optional] in unsigned long asavepassword) void focus() void blur() void back() void forward() void home() void stop() void print() void moveto(in long xpos, in long ypos) void moveby(in long xdif, in long ydif) void resizeto(in long width, in long height) void resizeby(in long widthdif, in long heightdif) void scroll(in long xscroll, in long yscroll) ...
nsIDOMXULLabeledControlElement
when the user presses the appropriate modifier and the access key, the element will be focused and/or activated from anywhere in the window.
nsITreeBoxObject
focused boolean whether or not we are currently focused.
nsIWebBrowserFind
by default, the implementation will search the focused frame, or if there is no focused frame, the web browser content area.
Using nsIDirectoryService
this document will focus on how the service is used and how to customize it.
wrappedJSObject
this article focuses on the latter kind of wrappers, which hide any properties or methods on the component that are not part of the supported interfaces as declared in xpidl.
XPIDL Syntax
MozillaTechXPIDLSyntax
it is more focused on xpidl syntax and grammar.
Testing Mozilla code
the first part will focus on the modern and robust way of static-analysis and the second part will present the build-time static-analysis.debugging mozilla with valgrindthis page describes how to use valgrind (specifically, its memcheck tool) to find memory errors.firefox and address sanitizeraddress sanitizer (asan) is a fast memory error detector that detects use-after-free and out-of-bound bugs in c/c++ programs.
Main Windows
its main focus is on handling the folderpane, threadpane, and the message preview sections shown above.
Thunderbird Configuration Files
the default name untitled document should appear, with focus on the filename.
customDBHeaders Preference
the mailnews.customdbheaders preference will be our focus.
Thunderbird extensions
this documention series focuses on thunderbird.
3D view - Firefox Developer Tools
function keyboard mouse zoom in/out + / - scroll wheel up/down rotate left/right a / d mouse left/right rotate up/down w / s mouse up/down pan left/right ← / → mouse left/right pan up/down ↑ / ↓ mouse up/down reset zoom level 0 resets the zoom level to the default focus on selected node f makes sure the currently selected node is visible reset view r resets zoom, rotation, and panning to the default hide current node x makes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured use cases for the 3d view there are a variety of ways the 3d view is useful: if you hav...
DOM Inspector internals - Firefox Developer Tools
initially, we will begin by focusing on inspector.xul and its entry point, and then expand our focus later to explain how these other inspectors differ.
Browser Console - Firefox Developer Tools
the following image shows the browser console focused on the same page as above after clicking on the show content messages checkbox.
Search - Firefox Developer Tools
you can use the up and down arrows to move through the list, and return to open the file you want: searching within a file to search for a particular substring in the file currently loaded into the source pane, press control + f (or command + f on a mac) while the source pane is focused.
Set a logpoint - Firefox Developer Tools
the logpoint is especially useful in cases where breaking the execution breaks testing procedures, such as when you are debugging popup windows, or executing focus-related logic.
UI Tour - Firefox Developer Tools
when the source pane is focused you can search for a string in the file using ctrl + f (cmd + f on a mac).
Inspecting web sockets - Firefox Developer Tools
filtering web socket frames to focus on specific messages, frames can be filtered using the filter at the top of the messages panel.
Select an element - Firefox Developer Tools
the selected element is the element in the page that the inspector is currently focused on.
Select and highlight elements - Firefox Developer Tools
the selected element is the element in the page that the inspector is currently focused on.
Shader Editor - Firefox Developer Tools
this is useful for focusing on certain shaders or hiding overlapping geometry: if you click the entry, its vertex and fragment shaders are shown in the other two panes, and you can edit them.
Storage Inspector - Firefox Developer Tools
you can use ctrl + f (cmd + f on a mac) to focus the search box.
Web console keyboard shortcuts - Firefox Developer Tools
command windows macos linux open the web console ctrl + shift + k cmd + opt + k ctrl + shift + k search in the message display pane ctrl + f cmd + f ctrl + f open the object inspector pane ctrl + click ctrl + click ctrl + click clear the object inspector pane esc esc esc focus on the command line ctrl + shift + k cmd + opt + k ctrl + shift + k clear output ctrl + shift + l ctrl + l from firefox 67: cmd + k ctrl + shift + l command line interpreter these shortcuts apply when you're in the command line interpreter.
Using dynamic styling information - Web APIs
one's javascript code also becomes cleaner since instead of being dedicated to styling details, it can focus on the overall semantics of each section it is creating or manipulating, leaving the precise style details to the stylesheet.
CanvasPattern.setTransform() - Web APIs
edit = document.getelementbyid('edit'); var code = textarea.value; var svg1 = document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', drawcanvas); window.addeventlistener('load', drawcanvas); specifications specification status comment html living standardthe definition of 'canvaspattern.settransform' in that specification.
CanvasRenderingContext2D.addHitRegion() - Web APIs
document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }); canvas.addeventlistener("mousemove", function(event){ if(event.region) { alert("ouch, my eye :("); } }); textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications canvas hit regions have been removed from the whatwg living standard, although discussions about future standardization are ongoing.
CanvasRenderingContext2D.miterLimit - Web APIs
document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.miterlimit' in that specification.
CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.scrollpathintoview' in that specification.
CanvasRenderingContext2D - Web APIs
canvasrenderingcontext2d.drawfocusifneeded() if a given element is focused, this method draws a focus ring around the current path.
Basic usage of canvas - Web APIs
in this tutorial, we focus on the 2d rendering context.
Drawing text - Web APIs
document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', drawcanvas); window.addeventlistener('load', drawcanvas); advanced text measurements in the case you need to obtain more details about the text, the following method allows you to measure it.
Canvas API - Web APIs
the canvas api largely focuses on 2d graphics.
Using channel messaging - Web APIs
we'll be focusing on the latter example in this article.
Client.url - Web APIs
WebAPIClienturl
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: 'window' }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status com...
Clients.matchAll() - Web APIs
WebAPIClientsmatchAll
in chrome 46/firefox 54 and later, this method returns clients in most recently focused order, correct as per spec.
Clients - Web APIs
WebAPIClients
client.focus(); chatclient = client; break; } } // if we didn't find an existing chat window, // open a new one: if (!chatclient) { chatclient = await clients.openwindow('/chat/'); } // message the client: chatclient.postmessage("new chat messages!"); }()); }); specifications specification status comment service workersthe ...
Console API - Web APIs
find out about these at: google chrome devtools implementation safari devtools implementation usage is very simple — the console object — available via window.console, or workerglobalscope.console in workers; accessible using just console — contains many methods that you can call to perform rudimentary debugging tasks, generally focused around logging various values to the browser's web console.
CustomElementRegistry.define() - Web APIs
.6s all;' + 'position: absolute;' + 'bottom: 20px;' + 'left: 10px;' + 'z-index: 3;' + '}' + 'img {' + 'width: 1.2rem' + '}' + '.icon:hover + .info, .icon:focus + .info {' + 'opacity: 1;' + '}'; // attach the created elements to the shadow dom shadow.appendchild(style); shadow.appendchild(wrapper); wrapper.appendchild(icon); wrapper.appendchild(info); } } // define the new element customelements.define('popup-info', popupinfo); <popup-info img="img/alt.png" text="your card v...
Document: keydown event - Web APIs
<p>focus the iframe first (e.g.
Document: keyup event - Web APIs
addeventlistener keyup example <p>focus the iframe first (e.g.
DocumentOrShadowRoot - Web APIs
properties documentorshadowroot.activeelementread only returns the element within the shadow tree that has focus.
Introduction to the DOM - Web APIs
though we focus exclusively on javascript in this reference documentation, implementations of the dom can be built for any language, as this python example demonstrates: # python dom example import xml.dom.minidom as m doc = m.parse(r"c:\projects\py\chap1.xml") doc.nodename # dom property of document object p_list = doc.getelementsbytagname("para") for more information on what technologies are involved in wri...
Element: contextmenu event - Web APIs
in the latter case, the context menu is displayed at the bottom left of the focused element, unless the element is a tree, in which case the context menu is displayed at the bottom left of the current row.
Event.timeStamp - Web APIs
WebAPIEventtimeStamp
example html <p> focus this iframe and press any key to get the current timestamp for the keypress event.
Event - Web APIs
WebAPIEvent
animationevent audioprocessingevent beforeinputevent beforeunloadevent blobevent clipboardevent closeevent compositionevent cssfontfaceloadevent customevent devicelightevent devicemotionevent deviceorientationevent deviceproximityevent domtransactionevent dragevent editingbeforeinputevent errorevent fetchevent focusevent gamepadevent hashchangeevent idbversionchangeevent inputevent keyboardevent mediastreamevent messageevent mouseevent mutationevent offlineaudiocompletionevent overconstrainederror pagetransitionevent paymentrequestupdateevent pointerevent popstateevent progressevent relatedevent rtcdatachannelevent rtcidentityerrorevent rtcidentityevent rtcpeerconnectioniceevent sensore...
Using FormData Objects - Web APIs
simply include an <input> element of type file in your <form>: <form enctype="multipart/form-data" method="post" name="fileinfo"> <label>your email address:</label> <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> <label>custom file label:</label> <input type="text" name="filelabel" size="12" maxlength="32" /><br /> <label>file to stash:</label> <input type="file" name="file" required /> <input type="submit" value="stash the file!" /> </form> <div></div> then you can send it using code like the following: var form = d...
GlobalEventHandlers.onchange - Web APIs
example this example logs the number of characters in an <input> element, every time you modify its contents and then change focus away from it.
GlobalEventHandlers.onresize - Web APIs
the function receives a focusevent object as its sole argument.
GlobalEventHandlers.onselectionchange - Web APIs
the function receives a focusevent object as its sole argument.
GlobalEventHandlers.onselectstart - Web APIs
the function receives a focusevent object as its sole argument.
GlobalEventHandlers.onsubmit - Web APIs
the function receives a focusevent object as its sole argument.
GlobalEventHandlers - Web APIs
globaleventhandlers.onfocus is an eventhandler representing the code to be called when the focus event is raised.
HTMLAreaElement - Web APIs
element.accesskey is a domstring containing a single character that switches input focus to the control.
HTMLElement.forceSpellCheck() - Web APIs
the forcespellcheck() method of the htmlelement interface forces a spelling and grammar check on html elements, even if the user has not focused on the elements.
inert - Web APIs
WebAPIHTMLElementinert
this can be useful when building uis such as modals where you would want to "trap" the focus inside the modal when it's visible.
HTMLInputElement: search event - Web APIs
bubbles yes cancelable no interface event event handler property onsearch there are several ways a search can be initiated, such as by pressing enter while the <input> is focused, or, if the incremental attribute is present, after a ua-defined timeout elapses since the most recent keystroke (with new keystrokes resetting the timeout so the firing of the event is debounced).
HTMLInputElement.select() - Web APIs
html <input type="text" id="text-box" size="20" value="hello world!"> <button onclick="selecttext()">select text</button> javascript function selecttext() { const input = document.getelementbyid('text-box'); input.focus(); input.select(); } result notes calling element.select() will not necessarily focus the input, so it is often used with htmlelement.focus().
HTMLInputElement.setRangeText() - Web APIs
html <input type="text" id="text-box" size="30" value="this text has not been updated."> <button onclick="selecttext()">update text</button> javascript function selecttext() { const input = document.getelementbyid('text-box'); input.focus(); input.setrangetext('already', 14, 17, 'select'); } result specifications specification status comment html living standardthe definition of 'htmlinputelement.setselectionrange()' in that specification.
HTMLInputElement.setSelectionRange() - Web APIs
html <input type="text" id="text-box" size="20" value="mozilla"> <button onclick="selecttext()">select text</button> javascript function selecttext() { const input = document.getelementbyid('text-box'); input.focus(); input.setselectionrange(2, 5); } result specifications specification status comment html living standardthe definition of 'htmlinputelement.setselectionrange()' in that specification.
HTMLKeygenElement - Web APIs
properties autofocus is a boolean that reflects the autofocus html attribute, indicating that the form control should have input focus when the page loads.
HTMLOutputElement - Web APIs
when the problem is reported, the user agent may focus the element and change the scrolling position of the document or perform some other action that brings the element to the user's attention.
KeyboardEvent - Web APIs
for example, manually firing a key event does not cause that letter to appear in a focused text input.
Capabilities, constraints, and settings - Web APIs
simple tab support in the editor this code adds simple support for tabs to the <textarea> elements by making the tab key insert two space characters when either constraint edit box is focused.
MouseEvent.relatedTarget - Web APIs
focusevent.relatedtarget is a similar property for focus events.
NotificationEvent.notification - Web APIs
console.log('notification tag:', event.notification.tag); console.log('notification data:', event.notification.data); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status ...
NotificationEvent - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status ...
PaymentRequest.PaymentRequest() - Web APIs
examples the following example shows minimal functionality and focuses instead on showing the complete context of instantiating a paymentrequest object.
Pointer Lock API - Web APIs
game players can now click buttons and swipe the mouse cursor back and forth without worrying about leaving the game play area and accidentally clicking another application that would take mouse focus away from the game.
RTCDataChannel.onopen - Web APIs
let dc = mypeerconnection.createdatachannel("message channel"); dc.onopen = function(event) { let messagebox = document.getelementbyid("messagebox"); let sendbutton = document.getelementbyid("sendbutton"); messagebox.disabled = false; messagebox.focus(); sendbutton.disabled = false; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.onopen' in that specification.
Selection.anchorNode - Web APIs
the selection's anchor does not move, but the selection's focus, the other end of the selection, does move.
Selection.collapse() - Web APIs
if the content is focused and editable, the caret will blink there.
Selection.collapseToEnd() - Web APIs
if the content of the selection is focused and editable, the caret will blink there.
Selection.collapseToStart() - Web APIs
if the content of the selection is focused and editable, the caret will blink there.
Selection.removeAllRanges() - Web APIs
the selection.removeallranges() method removes all ranges from the selection, leaving the anchornode and focusnode properties equal to null and leaving nothing selected.
ServiceWorkerGlobalScope.onnotificationclick - Web APIs
}; example self.onnotificationclick = function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specification status ...
Using Service Workers - Web APIs
those features are not used here so that you can focus on understanding promises.
sourceCapabilities - Web APIs
for example, when a user lifts their finger off of a touchscreen, several uievents may be generated including touchend, mousedown, click, and focus.
UIEvent - Web APIs
WebAPIUIEvent
several interfaces are direct or indirect descendants of this one: mouseevent, touchevent, focusevent, keyboardevent, wheelevent, inputevent, and compositionevent.
Boilerplate 1 - Web APIs
this would allow us to focus on the interesting pieces of code that are most relevant for learning webgl.
WebGL model view projection - Web APIs
the farthest distance it can see, like this: if we simply used this to determine the polygons to be rendered each frame, our renderer would need to render every polygon within this pyramid, all the way off into infinity, including also polygons that are very close to the lens—likely too close to be useful (and certainly including things that are so close that a real human wouldn't be able to focus on them in the same setting).
Using DTMF with WebRTC - Web APIs
instead, we'll focus on how to use dtmf within the context of an rtcpeerconnection by studying how an example works.
Writing a WebSocket server in C# - Web APIs
> " + e.data); }; function dosend(message) { writetoscreen("sent: " + message); websocket.send(message); } function writetoscreen(message) { output.insertadjacenthtml("afterbegin", "<p>" + message + "</p>"); } function onclickbutton() { var text = textarea.value; text && dosend(text); textarea.value = ""; textarea.focus(); } </script> related writing websocket servers ...
The WebSocket API (WebSockets) - Web APIs
socketcluster: a pub/sub websocket framework for node.js with a focus on scalability.
Movement, orientation, and motion: A WebXR example - Web APIs
by carefully focusing through the screen at the image, and slowly moving forward and backward, you should eventually be able to bring the 3d image into focus.
Rendering and the WebXR frame animation callback - Web APIs
these two images are focused onto the retinas and the resulting signal transmitted over the optic nerves to the brain's visual cortex, located at the back of the occipital lobe.
Using the Web Animations API - Web APIs
we’re going to focus on just alice for this tutorial.
Web Authentication API - Web APIs
examples for security reasons, web authentication calls (create() and get()) are cancelled if the browser window loses focus while the call is pending.
Window.getAttention() - Web APIs
on linux, the behaviour varies from window manager to window manager - some flash the taskbar button, others focus the window immediately.
Window.releaseEvents() - Web APIs
syntax window.releaseevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload.
WindowClient.visibilityState - Web APIs
example event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (let i = 0; i < clientlist.length; i++) { let client = clientlist[i]; if (client.url == '/' && 'focus' in client) { if (client.visibilitystate === 'hidden') return client.focus(); } } } if (clients.openwindow) { return clients.openwindow('/'); } })); }); specifications specification status comment service workersthe definition of 'visibilitystate' in that specification.
Using XMLHttpRequest - Web APIs
this case can happen, for example, when one has an xmlhttprequest that gets fired on an onunload event for a window, the expected xmlhttprequest is created when the window to be closed is still there, and finally sending the request (in otherwords, open()) when this window has lost its focus and another window gains focus.
XRSession: visibilitychange event - Web APIs
the visibilitychange event is sent to an xrsession to inform it when it becomes visible or hidden, or when it becomes visible but not currently focused.
XRView.transform - Web APIs
WebAPIXRViewtransform
to convert the "camera focused" transform matrix into an "object focused" transform, we use the transform's inverse, thus taking the matrix returned by view.transform.inverse.matrix.
Web APIs
WebAPI
t event eventlistener eventsource eventtarget extendableevent extendablemessageevent f featurepolicy federatedcredential fetchevent file fileentrysync fileerror fileexception filelist filereader filereadersync filerequest filesystem filesystemdirectoryentry filesystemdirectoryreader filesystementry filesystementrysync filesystemfileentry filesystemflags filesystemsync focusevent fontface fontfaceset fontfacesetloadevent formdata formdataentryvalue formdataevent fullscreenoptions g gainnode gamepad gamepadbutton gamepadevent gamepadhapticactuator geolocation geolocationcoordinates geolocationposition geolocationpositionerror geometryutils gestureevent globaleventhandlers gyroscope h htmlanchorelement htmlareaelement htmlaudioelement htmlbrelement htmlba...
ARIA guides - Accessibility
error handling in forms labeling widgets labeling composite widgets and regions managing focus in composite widgets (aria-activedescendant vs roving tabindex) using landmark roles handling dynamic updates & live regions virtual vs.
Using the alert role - Accessibility
the element that the alert role is used on does not have to be able to receive focus, as screen readers will automatically announce the alert regardless of where keyboard focus is currently located.
Using the status role - Accessibility
status information content must be provided within a status object, and it should be ensured that this object does not receive focus.
Using ARIA: Roles, states, and properties - Accessibility
roles widget roles button checkbox gridcell link menuitem menuitemcheckbox menuitemradio option progressbar radio scrollbar searchbox separator (when focusable) slider spinbutton switch tab tabpanel textbox treeitem composite roles the techniques below describe each composite role as well as their required and optional child roles.
ARIA: alert role - Accessibility
they don't receive focus, and therefore focus does not need to be managed and no user interaction should be required.
ARIA: gridcell role - Accessibility
<td contenteditable="true">notes</td> <div role="gridcell" contenteditable="true">item cost</div> contenteditable will make the element it is applied to focusable via the tab key.
ARIA: table role - Accessibility
the cells are not focusable or selectable, though widgets within individual cells of the table can be interactive.
WAI-ARIA Roles - Accessibility
the position of each cell is significant and can be focused using keyboard input.aria: gridcell rolethe gridcell role is used to make a cell in a grid or treegrid.
Web Accessibility: Understanding Colors and Luminance - Accessibility
generally speaking, most of the focus is on luminance when attempting to ensure that there is enough contrast between text and its background, or, in evaluating for the possibility of inducing seizures in those sensitive to photosensitive seizures.
Robust - Accessibility
guideline 4.1 — compatible: maximize compatibility with current and future user agents, including assistive technologies this guideline focuses on making content as compatible as possible, not only with current user agents (e.g.
-moz-user-input - CSS: Cascading Style Sheets
a similar property, user-focus, was proposed in early drafts of a predecessor of the css3 ui specification, but was rejected by the working group.
::part() - CSS: Cascading Style Sheets
WebCSS::part
"tab">tab 3</div> </template> <tabbed-custom-element></tabbed-custom-element> css tabbed-custom-element::part(tab) { color: #0c0c0dcc; border-bottom: transparent solid 2px; } tabbed-custom-element::part(tab):hover { background-color: #0c0c0d19; border-color: #0c0c0d33; } tabbed-custom-element::part(tab):hover:active { background-color: #0c0c0d33; } tabbed-custom-element::part(tab):focus { box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3); } tabbed-custom-element::part(active) { color: #0060df; border-color: #0a84ff !important; } javascript let template = document.queryselector("#tabbed-custom-element"); globalthis.customelements.define(template.id, class extends htmlelement { constructor() { super(); this.at...
Border-image generator - CSS: Cascading Style Sheets
#load-image { float: left; } #load-remote { width: 30px; background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png'); background-repeat: no-repeat; background-position: center center; } #remote-url { width: 200px; height: 23px; margin: 10px; padding: 0 5px; border: 1px solid #379b4a; border-radius: 2px; float: left; transition: width 0.5s; } #remote-url:focus { box-shadow: 0px 0px 3px -1px #379b4a; /*#68ace8; */ border-color: rgba(55, 155, 74, 0.5); width: 450px; } /* * visible area */ #preview_section { position: relative; min-height: 400px; } /* image control */ #subject { width: 300px; height: 300px; background-repeat: no-repeat; background-size: 100%; background-color: #fff; border: 1px solid #ccc; position: absolute; z-index: ...
Using CSS transitions - CSS: Cascading Style Sheets
the relevant portions are shown here: a { color: #fff; background-color: #333; transition: all 1s ease-out; } a:hover, a:focus { color: #333; background-color: #fff; } this css establishes the look of the menu, with the background and text colors both changing when the element is in its :hover and :focus states.
Contribute a recipe - CSS: Cascading Style Sheets
it may see periodical improvements or updates, and may eventually even be cleaned up (and de-archived) for better uxp focus, but for now, it's a historical snapshot for reference, not a living website.
CSS reference - CSS: Cascading Style Sheets
WebCSSReference
splay-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dpcmdpidppxdrop-shadow()eelement()ellipse()em:emptyempty-cells:enabledenv()exffallback (@counter-style)filter<filter-function>:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typefit-content()<flex>flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloat:focusfont@font-facefont-familyfont-family (@font-face)font-feature-settingsfont-feature-settings (@font-face)@font-feature-valuesfont-kerningfont-language-overridefont-optical-sizingfont-sizefont-size-adjustfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-variantfont-variant (@font-face)font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-l...
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
value browser description button-arrow-down firefox removed in firefox 64 button-arrow-next firefox removed in firefox 64 button-arrow-previous firefox removed in firefox 64 button-arrow-up firefox removed in firefox 64 button-focus firefox removed in firefox 64 dualbutton firefox removed in firefox 64 groupbox firefox removed in firefox 64 menuarrow firefox removed in firefox 64 menubar firefox removed in firefox 64 menucheckbox firefox removed in firefox 64 menuimage firefox removed in firefox 64 ...
<color> - CSS: Cascading Style Sheets
-moz-mac-accentdarkestshadow -moz-mac-accentdarkshadow -moz-mac-accentface -moz-mac-accentlightesthighlight -moz-mac-accentlightshadow -moz-mac-accentregularhighlight -moz-mac-accentregularshadow -moz-mac-chrome-active -moz-mac-chrome-inactive -moz-mac-focusring -moz-mac-menuselect -moz-mac-menushadow -moz-mac-menutextselect -moz-menuhover background color for hovered menu items.
ime-mode - CSS: Cascading Style Sheets
WebCSSime-mode
users may correct the inappropriate behavior of sites that don't follow this recommendation by placing the following css into their user stylesheet: input[type=password] { ime-mode: auto !important; } the mac version of gecko 1.9 (firefox 3) can't recover the previous state of the ime when a field for which it is disabled loses focus, so mac users may get grumpy when you use the disabled value.
justify-items - CSS: Cascading Style Sheets
<span>first child</span> <span>second child</span> <span>third child</span> <span>fourth child</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; width: 300px; justify-items: stretch; } article:hover, article:focus { justify-items: center; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-radius: 7px; } article { margin: 20px; } result specifications specification status comment css box alignment module level 3the definition of 'justify-items' in that specification.
<length> - CSS: Cascading Style Sheets
WebCSSlength
); const resultsdiv = document.queryselector('.results'); inputelem.addeventlistener('change', () => { inputdiv.style.width = inputelem.value; const result = document.createelement('div'); result.classname = 'result'; result.style.width = inputelem.value; result.innerhtml = `<code>width: ${inputelem.value}</code>`; resultsdiv.appendchild(result); inputelem.value = ''; inputelem.focus(); }) result specifications specification status comment css values and units module level 4the definition of '<length>' in that specification.
outline-color - CSS: Cascading Style Sheets
accessibility concerns custom focus styles commonly involve making adjustments to the outline property.
pointer-events - CSS: Cascading Style Sheets
elements with pointer-events: none will still receive focus through sequential keyboard navigation using the tab key.
text-decoration-color - CSS: Cascading Style Sheets
for example, change of text and text-decoration-color alone is not enough to indicate a link has focus.
user-modify - CSS: Cascading Style Sheets
a similar property, user-focus, was proposed in early drafts of a predecessor of the css3 ui specification, but was rejected by the working group.
visibility - CSS: Cascading Style Sheets
the element cannot receive focus (such as when navigating through tab indexes).
WAI ARIA Live Regions/API Support - Developer guides
key presses yes mouse clicks yes mouse hovers no page load events no everything else, including focus changes, timer callbacks, xmlhttprequest callbacks, etc.
Video player styling basics - Developer guides
simple :hover and :focus states are then set for each button that simply alters the opacity of the button: .controls button:hover, .controls button:focus { opacity:0.5; } to obtain appropriate button images, a set of free common control set icons was downloaded from the web.
Printing - Developer guides
> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>mdn example</title> <script type="text/javascript"> function closeprint () { document.body.removechild(this.__container__); } function setprint () { this.contentwindow.__container__ = this; this.contentwindow.onbeforeunload = closeprint; this.contentwindow.onafterprint = closeprint; this.contentwindow.focus(); // required for ie this.contentwindow.print(); } function printpage (surl) { var ohiddframe = document.createelement("iframe"); ohiddframe.onload = setprint; ohiddframe.style.position = "fixed"; ohiddframe.style.right = "0"; ohiddframe.style.bottom = "0"; ohiddframe.style.width = "0"; ohiddframe.style.height = "0"; ohiddframe.style.border = "0"; ohiddframe.src = surl; do...
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
it's generally used as a focus indicator, to show which element will receive input events.
HTML attribute: minlength - HTML: Hypertext Markup Language
input { border: 2px solid currentcolor; } input:invalid { border: 2px dashed red; } input:invalid:focus { background-image: linear-gradient(pink, lightgreen); } specifications specification status html living standardthe definition of 'minlength attribute' in that specification.
HTML attribute: pattern - HTML: Hypertext Markup Language
additionally, assistive technology may read the title aloud when the control gains focus, but this should not be relied upon for accessibility.
HTML attribute: readonly - HTML: Hypertext Markup Language
attribute interactions the difference between disabled and readonly is that read-only controls can still function and are still focusable, whereas disabled controls can not receive focus and are not submitted with the form and generally do not function as controls until they are enabled.
<details>: The Details disclosure element - HTML: Hypertext Markup Language
WebHTMLElementdetails
when the user clicks on the widget or focuses it then presses the space bar, it "twists" open, revealing its contents: from there, you can use css to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its open attribute.
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
WebHTMLElementfieldset
they won't receive any browsing events, like mouse clicks or focus-related events.
<input type="email"> - HTML: Hypertext Markup Language
WebHTMLElementinputemail
by associating the two elements in this way, clicking on the label will focus the input element.
<input type="file"> - HTML: Hypertext Markup Language
WebHTMLElementinputfile
we won't explain the css; the javascript is the main focus.
<input type="radio"> - HTML: Hypertext Markup Language
WebHTMLElementinputradio
none; appearance: none; border-radius: 50%; width: 16px; height: 16px; border: 2px solid #999; transition: 0.2s all linear; margin-right: 5px; position: relative; top: 4px; } input:checked { border: 6px solid black; } button, legend { color: white; background-color: black; padding: 5px 10px; border-radius: 0; border: 0; font-size: 14px; } button:hover, button:focus { color: #999; } button:active { background-color: white; color: black; outline: 1px solid black; } most notable here is the use of the -moz-appearance property (with prefixes needed to support some browsers).
<optgroup> - HTML: Hypertext Markup Language
WebHTMLElementoptgroup
often browsers grey out such control and it won't receive any browsing events, like mouse clicks or focus-related ones.
<option>: The HTML Option element - HTML: Hypertext Markup Language
WebHTMLElementoption
often browsers grey out such control and it won't receive any browsing event, like mouse clicks or focus-related ones.
<output>: The Output element - HTML: Hypertext Markup Language
WebHTMLElementoutput
assistive technology will thereby announce the results of ui interactions posted inside it without requiring that focus is switched away from the controls that produce those results.
Resource URLs - HTTP
in this article, we focus on resource uris, which are used internally by firefox to point to built-in resources.
Browser detection using the user agent - HTTP
os the operating system is given in most user agent strings (although not web-focused platforms like firefox os), but the format varies a lot.
Grammar and types - JavaScript
sugar is sweet, and so is foo.` more information this chapter focuses on basic syntax for declarations and types.
Logical OR assignment (||=) - JavaScript
examples setting default content if the "lyrics" element is empty, set the innerhtml to a default value: document.getelementbyid('lyrics').innerhtml ||= '<i>no lyrics.</i>' here the short-circuit is especially beneficial, since the element will not be updated unnecessarily and won't cause unwanted side-effects such as additional parsing or rendering work, or loss of focus, etc.
Web video codec guide - Web media technologies
in particular, its focus is for video conferencing on pstn (public switched telephone networks), rtsp, and sip (ip-based videoconferencing) systems.
OpenSearch description format
this article focuses on creating opensearch-compatible search plugins that support these additional firefox features.
Critical rendering path - Web Performance
while painting is a very fast process, and therefore likely not the most impactful place to focus on in improving performance, it is important to remember to allow for both layout and re-paint times when measuring how long an animation frame may take.
Performance fundamentals - Web Performance
you can easily trigger these animations with the :hover, :focus, or :target, or by dynamically adding and removing classes on parent elements.
Populating the page: how browsers work - Web Performance
if you’ve ever heard of the 14kb rule for initial page load, tcp slow start is the reason why the initial response is 14kb, and why web performance optimization calls for focusing optimizations with this initial 14kb response in mind.
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
they work outside of the browser window, just like service workers, so updates can be pushed and notifications can be shown when the app's page is out of focus or even closed.
Structural overview of progressive web apps - Progressive web apps (PWAs)
we can control what is requested from the server and what is retrieved from the cache with a service worker, which will be explained in detail in the next article — for now let's focus on the structure itself.
SVG Core Attributes - SVG: Scalable Vector Graphics
WebSVGAttributeCore
value: any valid language id; animatable: no tabindex the tabindex svg attribute allows you to control whether an element is focusable and to define the relative order of the element for the purposes of sequential focus navigation.
begin - SVG: Scalable Vector Graphics
WebSVGAttributebegin
those are: focus, blur, focusin, focusout, activate, auxclick, click, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, wheel, beforeinput, input, keydown, keyup, compositionstart, compositionupdate, compositionend, load, unload, abort, error, select, resize, scroll, beginevent, endevent, and repeatevent.
end - SVG: Scalable Vector Graphics
WebSVGAttributeend
those are: focus, blur, focusin, focusout, activate, auxclick, click, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, wheel, beforeinput, input, keydown, keyup, compositionstart, compositionupdate, compositionend, load, unload, abort, error, select, resize, scroll, beginevent, endevent, and repeatevent .
requiredFeatures - SVG: Scalable Vector Graphics
te>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <feoffset>, <fetile>, <fefuncr>, <fefuncg>, <fefuncb> and <fefunca> elements http://www.w3.org/tr/svg11/feature#documenteventsattribute the browser supports the onunload, onabort, onerror, onresize, onscroll and onzoom attributes http://www.w3.org/tr/svg11/feature#graphicaleventsattribute the browser supports the onfocusin, onfocusout, onactivate, onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout and onload attributes http://www.w3.org/tr/svg11/feature#animationeventsattribute the browser supports the onbegin, onend, onrepeat and onload attributes http://www.w3.org/tr/svg11/feature#cursor the browser supports the <cursor> element http://www.w3.org/tr/svg11/feature#hyperlinking ...
visibility - SVG: Scalable Vector Graphics
it may receive pointer events depending on the pointer-events attribute, may receive focus depending on the tabindex attribute, contributes to bounding box calculations and clipping paths, and does affect text layout.
<feConvolveMatrix> - SVG: Scalable Vector Graphics
to illustrate, suppose you have a input image which is 5 pixels by 5 pixels, whose color values for one of the color channels are as follows: 0 20 40 235 235 100 120 140 235 235 200 220 240 235 235 225 225 255 255 255 225 225 255 255 255 and you define a 3-by-3 convolution kernel as follows: 1 2 3 4 5 6 7 8 9 let's focus on the color value at the second row and second column of the image (source pixel value is 120).
Basic shapes - SVG: Scalable Vector Graphics
for this reason, the next section in this tutorial will be focused on paths.
Texts - SVG: Scalable Vector Graphics
WebSVGTutorialTexts
the latter may be described in a later section of the tutorial, while we will focus completely on the first part: bringing text into an svg image.
Information Security Basics - Web security
confidentiality, integrity, and availability describes the primary security objectives, which are absolutely fundamental to understanding security security controls defines major categories of security controls and discusses their potential disadvantages tcp/ip security an overview of the tcp/ip model, with a focus on the security considerations for ssl threats briefly introduces major threat concepts vulnerabilities defines the major categories of vulnerabilities and discusses the presence of vulnerabilities in all software ...
Same-origin policy - Web security
window the following cross-origin access to these window properties is allowed: methods window.blur window.close window.focus window.postmessage attributes window.closed read only.
Tutorials
html challenges use these challenges to hone your html skills (for example, "should i use an <h2> element or a <strong> element?"), focusing on meaningful markup.
Using custom elements - Web Components
when the icon is focused, it displays the text in a pop up information box to provide further in-context information.
Compiling from Rust to WebAssembly - WebAssembly
for now, the rust team is focusing on the latter case, and so that's what we cover here.