showpopup - Archive of obsolete content
« xul reference home showpopup type: boolean note: applies to: thunderbird, seamonkeyif true, the popup will be shown.
... if false, the popup will not be shown, but the autocomplete results will still be available.

showPopup - Archive of obsolete content
« xul reference home showpopup( element, x, y, popuptype, anchor, align ) deprecated since gecko 1.9 return type: no return value deprecated in favor of openpopup and openpopupatscreen opens a popup element.
...this is what you might do to show a popup below a button, for example.

Element: show event - Web APIs
the show event is fired when a contextmenu event was fired on/bubbled to an element that has a contextmenu attribute.
... bubbles no cancelable no interface event event handler property onshow examples <div contextmenu="test"></div> <menu type="context" id="test"> <menuitem label="alert" onclick="alert('the alert label has been clicked')" /> </menu> <script> document.getelementbyid("test").addeventlistener("show", function(e){ alert("the context menu will be displayed"); }, false); </script> specifications specification status html5the definition of 'show event' in that specification.

Notification.onshow - Web APIs
the onshow property of the notification interface specifies an event listener to receive show events.
... syntax notification.onshow = function() { ...

onpopupshowing - Archive of obsolete content
« xul reference home onpopupshowing type: script code this event is sent to a popup just before it is opened.

onpopupshown - Archive of obsolete content
« xul reference home onpopupshown type: script code this event is sent to a popup after it has been opened, much like the onload event is sent to a window when it is opened.

showcommentcolumn - Archive of obsolete content
« xul reference home showcommentcolumn new in thunderbird 3requires seamonkey 2.0 type: boolean if true, a comment column appears in the popup.

showimagecolumn - Archive of obsolete content
« xul reference home showimagecolumn type: boolean if true, an image column appears in the popup.

tabmodalPromptShowing - Archive of obsolete content
« xul reference home tabmodalpromptshowing type: integer the number of tab modal prompts currently attached to the current tab.

textbox.showCommentColumn - Archive of obsolete content
« xul reference home showcommentcolumn obsolete since gecko 1.9.1 type: boolean if true, a comment column appears in the popup.

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

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

showOnlyTheseTabs - Archive of obsolete content
« xul reference home showonlythesetabs( atabs ) return type: no return value makes all tabs in the atabs array visible, and all other tabs hidden.

showPane - Archive of obsolete content
« xul reference home showpane( prefpane ) return type: no return value switch to a particular pane.

showCommentColumn - Archive of obsolete content
« xul reference showcommentcolumn type: boolean gets and sets the value of the showcommentcolumn (or showcommentcolumn) attribute.

showImageColumn - Archive of obsolete content
« xul reference showimagecolumn type: boolean gets and sets the value of the showimagecolumn attribute.

showPopup - Archive of obsolete content
« xul reference showpopup type: boolean gets and sets the value of the showpopup attribute.

PRAccessHow
this is the declaration for the enumeration praccesshow, used in the how parameter of pr_access: #include <prio.h> typedef enum praccesshow { pr_access_exists = 1, pr_access_write_ok = 2, pr_access_read_ok = 3 } praccesshow; see pr_access for what each of these values mean.

Index - Web APIs
276 beforeinstallpromptevent.prompt() api, beforeinstallpromptevent, experimental, method, reference, prompt the prompt() method of the beforeinstallpromptevent interface allows a developer to show the install prompt at a time of their own choosing.
...if the calling script doesn't have permission to show popups, openwindow() will throw an invalidaccesserror.
... 647 comment api, dom, reference the comment interface represents textual notations within markup; although it is generally not visually shown, such comments are available to be read in the source view.
...And 46 more matches

panel - Archive of obsolete content
the screenshot below shows a panel whose content is built from the list of currently open tabs: panels are useful for presenting temporary interfaces to users in a way that is easier for users to ignore and dismiss than a modal dialog, since panels are hidden the moment users interact with parts of the application interface outside them.
... a panel's content is loaded as soon as it is created, before the panel is shown, and the content remains loaded when a panel is hidden, so it is possible to keep a panel around in the background, updating its content as appropriate in preparation for the next time it is shown.
... your add-on can receive notifications when a panel is shown or hidden by listening to its show and hide events.
...And 38 more matches

Index - Archive of obsolete content
we will show how to do each of these things using the built-in components object provided by xulrunner application such as firefox and thunderbird.
... 269 adding menus and submenus add-ons, codingscripting, macs, xul, apple the hello world example in the previous sections shows the two most common ways to add menus.
...the new design clearly shows what some experts have been saying: that standards-based design can be visually compelling and preserve the interface conventions we've come to expect from web pages.
...And 35 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
fixme: explain how setting this option and use next listings if we want to run firefox displaying none of its gui and only the contents of a certain xul file, we can launch firefox and set the option: -chrome file_url.xul another way, as shown in listing 1, is to use the window.opendialog() method, which can be used only within a xul window.
... window.opendialog('another.xul', '_blank','chrome,all,dialog=no'); listing 1: opening a window without the firefox gui xul as an xml application listing 2 shows an example of a gui definition file marked up in xul (a "xul document").
...as shown in listing 3, elements can be laid out horizontally using the hbox (horizontal box) element or vertically using the vbox (vertical box) element.
...And 30 more matches

Places utilities for JavaScript
organizer_folder_anno - this annotation is associated with a folder that should be shown in the library's left pane.
... organizer_query_anno - this annotation is used by the places organizer to decide what nodes should be shown in the left pane.
... string wrapnode(nsinavhistoryresultnode anode, string atype, nsiuri aoverrideuri); array unwrapnodes(string blob, string atype); nsitransaction maketransaction(string data, string type, nsinavhistoryresultnode container, int index, boolean copy); nsinavhistoryresult getfoldercontents(int afolderid, boolean aexcludeitems, boolean aexpandqueries); boolean showaddbookmarkui(nsiuri auri, string atitle, string adescription, int adefaultinsertionpoint, boolean ashowpicker, boolean aloadinsidebar, string akeyword, string apostdata); boolean showminimaladdbookmarkui(nsiuri auri, string atitle, string adescription, int adefaultinsertionpoint, boolean ashowpicker, boolean aloadinsidebar, string akeyword, string apostdata); boolean showaddlive...
...And 29 more matches

Menu - Archive of obsolete content
context is an object describing the context in which the menu was shown.
... beforeshow function a function invoked just before the menu is shown.
... if the menu is a context menu, it is called as beforeshow(menu, context) and otherwise as beforeshow(menu).
...And 26 more matches

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

ui/sidebar - Archive of obsolete content
you specify its content using html, css, and javascript, and the user can show or hide it in the same way they can show or hide the built-in sidebars.
... usage creating, showing, and hiding sidebars you construct a sidebar object using the sidebar() constructor.
... once you've done that, you can show the sidebar by calling the sidebar's show() method.
...And 20 more matches

Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
listing 1 shows how you can use xpconnect to acquire references to xpcom services and create new xpcom objects.
...you should now see the confirmation dialog shown in figure 1.
... editing prefs.js opening test.xul will produce the dialog shown in figure 1.
...And 20 more matches

Network request list - Firefox Developer Tools
the request list of the network monitor shows a list of all the network requests made in the course of loading the page.
... network request list by default, the network monitor shows a list of all the network requests made in the course of loading the page.
... image thumbnails if the request is for an image, hovering over its filename shows a preview of the image in a tooltip: security icons the network monitor displays an icon in the domain column: this gives you extra information about the security status of the request: icon meaning https weak https (for example, a weak cipher was used) failed https (for example, a certificate was invalid) http ...
...And 19 more matches

Migrating from Firebug - Firefox Developer Tools
it shows log information associated with a web page and allows you to execute javascript expressions via its command line.
...the difference is that they show the properties and methods within a side panel inside the web console.
... show network requests the console panel in firebug allows to log ajax requests (aka xmlhttprequests).
...And 18 more matches

Index - Archive of obsolete content
4 accessibility/xul accessibility reference accessibility, xul this table is designed to show how to expose text properly for various xul element types.
... 239 onpageshow xul attributes, xul reference no summary!
... 243 onpopupshowing xul attributes, xul reference no summary!
...And 17 more matches

Console messages - Firefox Developer Tools
this is not shown by default: you can opt to see timestamps by selecting show timestamps in the console settings menu (gear icon in the console toolbar).
... message categories network network log messages are not shown by default.
... use the filtering feature to show them.
...And 17 more matches

Document.createTreeWalker() - Web APIs
syntax document.createtreewalker(root, whattoshow[, filter[, entityreferenceexpansion]]); parameters root a root node of this treewalker traversal.
... whattoshow optional a unsigned long representing a bitmask created by combining the constant properties of nodefilter.
...it defaults to 0xffffffff representing the show_all constant.
...And 16 more matches

Document.createNodeIterator() - Web APIs
syntax const nodeiterator = document.createnodeiterator(root[, whattoshow[, filter]]); values root the root node at which to begin the nodeiterator's traversal.
... whattoshow optional is an optional unsigned long representing a bitmask created by combining the constant properties of nodefilter.
...it defaults to 0xffffffff representing the show_all constant.
...And 15 more matches

ui/toolbar - Archive of obsolete content
showing and hiding toolbars by default, a toolbar is shown when it is created, although you can specify that a toolbar should be hidden initially by passing hidden:true as an option in its constructor.
... after that, though, you can't show or hide the toolbar programmatically.
... toolbars get a close button at the right-hand side, and users can show or hide the toolbar using the firefox "view/toolbars" menu, alongside built-in toolbars like the bookmarks toolbar.
...And 14 more matches

Debugging CSS - Learn web development
this article will give you guidance on how to go about debugging a css problem, and show you how the devtools included in all modern browsers can help you to find out what is going on.
...the browser will also normalize all of the html, and the dom will also show any changes made by javascript.
...the html tree in your devtools shows exactly what the browser is rendering at any given time, so it gives you an insight into what is really going on.
...And 14 more matches

context-menu - Archive of obsolete content
for example, a good use of the menu would be to show an "edit image" item when the user right-clicks an image in the page.
... a bad use would be to show a submenu that listed all the user's tabs, since tabs aren't related to the page or the node the user clicked to open the menu.
... when you need more control over the context in which your menu items are shown, you can use content scripts.
...And 13 more matches

HTML text fundamentals - Learn web development
if you get stuck, press the show solution button to see the answer.
... my legs are made of cardboard and i am married to a fish.</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: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector...
...('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<h1>my short story</h1>\n<p>i am a statistician and my name is trish.</p>\n<p>my legs are made of cardboard and i am married to a fish.</p>'; var solutionentry = htmlsolution; textarea.a...
...And 13 more matches

Third-party APIs - Learn web development
this article looks at the difference between browser apis and 3rd party apis and shows some typical uses of the latter.
...in this case we specify the coordinates of the center of the map, a map layer of type map to show (created using the mapquest.tilelayer() method), and the default zoom level.
...the server you are connecting to handles all the complicated stuff, like displaying the correct map tiles for the area being shown, etc.
...And 13 more matches

Handling common JavaScript problems - Learn web development
for a light introduction; you should also study examples like this one, which shows a typical pattern of saving a this scope to a separate variable, then using that variable in nested functions so you can be sure you are applying functionality to the correct this scope.
...if we look at the source code, the relevant code section is this: function showheroes(jsonobj) { let heroes = jsonobj['members']; for(i = 0; i < heroes.length; i++) { ...
...this is supposed to be fetched from an external .json file using the following xmlhttprequest call: let requesturl = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; let request = new xmlhttprequest(); request.open('get', requesturl); request.send(); let superheroes = request.response; populateheader(superheroes); showheroes(superheroes); but this fails.
...And 13 more matches

Index - Firefox Developer Tools
25 tutorial: set a breakpoint this page shows how you can try out the debugger api yourself using firefox’s scratchpad.
... 26 tutorial: show allocations per call path debugger, tools, tutorial this page shows how to use the debugger api to show how many objects a web page allocates, sorted by the function call path that allocated them.
...underneath the magnifying glass it shows the color value for the current pixel using whichever scheme you've selected in settings > inspector > default color unit: 34 index tools found 158 pages: 35 json viewer firefox includes a json viewer.
...And 13 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
true javascript.options.showinconsole (present in firefox 3.5+) outputs javascript errors to the error console.
...create folders and files in your work folder as shown in figure 4.
... create install manifest fill in the install.rdf file as shown in listing 1.
...And 12 more matches

2D maze game with device orientation - Game development
boot will take care of initializing a few settings, preloader will load all of the assets like graphics and audio, mainmenu is the menu with the start button, howto shows the "how to play" instructions and the game state lets you actually play the game.
... var ball = { _width: 320, _height: 480 }; ball.boot = function(game) {}; ball.boot.prototype = { preload: function() { this.load.image('preloaderbg', 'img/loading-bg.png'); this.load.image('preloaderbar', 'img/loading-bar.png'); }, create: function() { this.game.scale.scalemode = phaser.scalemanager.show_all; this.game.scale.pagealignhorizontally = true; this.game.scale.pagealignvertically = true; this.game.state.start('preloader'); } }; the main ball object is defined and we're adding two variables called _width and _height that are the width and the height of the game canvas — they will help us position the elements on the screen.
... we're loading two images first that will be used later in the preload state to show the progress of loading all the other assets.
...And 12 more matches

Network request details - Firefox Developer Tools
http response headers http request headers each section has a disclosure triangle to expand the section to show more information.
... request information the following information is shown only when the section is expanded: scheme: the scheme used in the url host: the server involved in the request filename: the full path to the file requested address: the ip address of the host the following information is shown in both the collapsed and the expanded states: status: the http response code for the request.
...(see referrer-policy for a description of possible values) blocking: if the request is to a site that is associated with a known tracker, an icon and a message are shown; otherwise, this field is not shown.
...And 12 more matches

NodeIterator - Web APIs
syntax a nodeiterator can be created using the document.createnodeiterator() method, as follows: const nodeiterator = document.createnodeiterator(root, whattoshow, filter); properties this interface doesn't inherit any property.
... nodeiterator.whattoshow read only returns an unsigned long being a bitmask made of constants describing the types of node that must to be presented.
... the possible values are: constant numerical value description nodefilter.show_all -1 (that is the max value of unsigned long) shows all nodes.
...And 12 more matches

TreeWalker - Web APIs
treewalker.whattoshow read only returns an unsigned long being a bitmask made of constants describing the types of node that must be presented.
...the possible values are: constant numerical value description nodefilter.show_all -1 (that is the max value of unsigned long) shows all nodes.
... nodefilter.show_attribute 2 shows attribute attr nodes.
...And 12 more matches

Examples and demos from articles - Archive of obsolete content
determine if an element has been totally scrolled [html] this example shows how to determine whether a user has completely scrolled an element or not.
....[article] pure-css web gallery based on the :hover pseudoclass [zip] you can use the :hover pseudo-class in order to build an image gallery with full-size images shown only when mouse goes over previews.
... .[article] pure-css web gallery based on the :checked pseudoclass [zip] you can also use the :checked pseudo-class applied to hidden radioboxes in order to build, for example, an image gallery with full-size images shown only when mouse clicks on previews.
...And 11 more matches

What are browser developer tools? - Learn web development
these tools do a range of things, from inspecting currently-loaded html, css and javascript to showing which assets the page has requested and how long they took to load.
...three ways: keyboard: ctrl + shift + i, except internet explorer and edge: f12 macos: ⌘ + ⌥ + i menu bar: firefox: menu ➤ web developer ➤ toggle tools, or tools ➤ web developer ➤ toggle tools chrome: more tools ➤ developer tools safari: develop ➤ show web inspector.
... if you can't see the develop menu, go to safari ➤ preferences ➤ advanced, and check the show develop menu in menu bar checkbox.
...And 11 more matches

Getting started with HTML - Learn web development
if you get really stuck, press the show solution button to see the answer.
...</textarea> <div class="controls"> <input id="reset" type="button" value="reset" /> <input id="solution" type="button" value="show solution" /> </div> html { font-family: 'open sans light',helvetica,arial,sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'...
...); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<em>this is my text.</em>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', update...
...And 11 more matches

Making decisions in your code — conditionals - Learn web development
in a weather app, if it is being looked at in the morning, show a sunrise graphic; show stars and a moon if it is nighttime.
...if you help me by going and doing the shopping, i'll give you some extra allowance so you can afford that toy you wanted." in javascript, we could represent this like so: let shoppingdone = false; if (shoppingdone === true) { let childsallowance = 10; } else { let childsallowance = 5; } this code as shown always results in the shoppingdone variable returning false, meaning disappointment for our poor child.
...we then use a conditional statement to show different text inside the paragraph depending on what the value of choice is.
...And 11 more matches

Following the Android Toasts Tutorial from a JNI Perspective
context context = getapplicationcontext(); charsequence text = "hello, firefox!"; int duration = toast.length_short; toast toast = toast.maketext(context, text, duration); toast.show(); nativewindow code as mentioned earlier, toasts are a very popular feature, so mozilla developers chose to bring it to the privileged javascript scope via the nativewindow object.
... the java code example above can be done with privileged javascript from firefox for android with the following code: window.nativewindow.toast.show("hello, firefox!", "short"); converting java to jni.jsm the first step is to look at the java code and see all the different types, methods, constructors, and fields that are being used.
... in the toast code we have the following: types - context, charsequence, int, toast, and void methods - maketext, show fields - length_short no constructors are used.
...And 11 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
the following code shows blocks designated for internet explorer: .
... tooltips legacy browsers introduced tooltips into html by showing them on links and using the value of the alt attribute as a tooltip's content.
...modern browsers will use the title attribute to display tooltips, and mozilla only supports showing tooltips for that attribute and not the alt attribute.
...And 10 more matches

Client-side form validation - Learn web development
add a required attribute to your input, as shown below.
...entered numbers outside this range will show as invalid; users won't be able to use the increment/decrement arrows to move the value outside of this range.
...this means that floats, like 3.2, will also show as invalid.
...And 10 more matches

Eclipse CDT
to show a filterable list of open documents (similar to the way emacs gives you a list of open buffers), use cmd-e/ctrl-e.
...note that there are buttons to the right of the "open call hierarchy" tab that open to switch between "show callers" and "show callees".
...note that you can switch between "show the type hierarchy", "show the supertype hierarchy", and "show the subtype hierarchy" using the buttons to the right of the "type hierarchy" tab.
...And 10 more matches

nsIUpdatePrompt
toolkit/mozapps/update/nsiupdateservice.idlscriptable this interface describes an object that can be used to show various update-related notifications to the user.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void checkforupdates(); void showupdateavailable(in nsiupdate update); void showupdatedownloaded(in nsiupdate update, [optional] in boolean background); void showupdateerror(in nsiupdate update); void showupdatehistory(in nsidomwindow parent); void showupdateinstalled(); methods checkforupdates() presents a user interface that checks for and displays the available updates.
...showupdateavailable() shows a message advising the user that an update is available to be downloaded and installed.
...And 10 more matches

Using the Payment Request API - Web APIs
ils() { // hardcoded for demo purposes: return { id: 'order-123', displayitems: [ { label: 'example item', amount: {currency: 'usd', value: '1.00'} } ], total: { label: 'total', amount: {currency: 'usd', value: '1.00'} } }; } starting the payment process once the paymentrequest object has been created, you call the paymentrequest.show() method on it to initiate the payment request.
... this returns a promise that fulfills with a paymentresponse object if the payment is successful: request.show().then(function(paymentresponse) { // here we would process the payment.
...made new paymentrequest(buildsupportedpaymentmethoddata(), {total: {label: 'stub', amount: {currency: 'usd', value: '0.01'}}}) .canmakepayment() .then(function(result) { if(result) { // real payment request var request = new paymentrequest(buildsupportedpaymentmethoddata(), checkoutobject); request.show().then(function(paymentresponse) { // here we would process the payment.
...And 10 more matches

calICalendarView - Archive of obsolete content
for instance, when the showdate method of the the calendar-multiday-view (an implementation of this interface) will sometimes show an entire week of dates, and sometimes show only the single date passed in.
... interface code [scriptable, uuid(3e567ccb-2ecf-4f59-b7ca-bf42b0fbf24a)] interface calicalendarview : nsisupports { attribute calicalendar displaycalender; attribute calicalendarviewcontroller controller; void showdate(in calidatetime adate); void setdaterange(in calidatetime astartdate, in calidatetime aenddate); readonly attribute calidatetime startdate; readonly attribute calidatetime enddate; readonly attribute boolean supportsdisjointdates; readonly attribute boolean hasdisjointdates; void setdatelist(in unsigned long acount, [array,size_is(acount)] in calidatetime adates); void getdate...
...as implemented here, it corresponds to the calendar containing all of the calievents and calitodos that shoud be shown in the view.
...And 9 more matches

Introduction to Public-Key Cryptography - Archive of obsolete content
password-based authentication figure 4 shows the basic steps involved in authenticating a client by means of a name and password.
... these are the steps shown in figure 4: in response to an authentication request from the server, the client displays a dialog box requesting the user's name and password for that server.
... as shown in the next section, one of the advantages of certificate-based authentication is that it can be used to replace the first three steps in figure 4 with a mechanism that allows the user to supply just one password (which is not sent across the network) and allows the administrator to control user authentication centrally.
...And 9 more matches

Index - Learn web development
at, accessibility, article, beginner, css, codingscripting, html, javascript, learn, tools, users, assistive technology, keyboard, screan reader, screenreader this article should have given you a useful high-level overview of accessibility, shown you why it's important, and looked at how you can fit it into your workflow.
... 54 introducing asynchronous javascript beginner, codingscripting, guide, introducing, javascript, learn, promises, async, asynchronous, await, callbacks in this article we briefly recap the problems associated with synchronous javascript, and take a first look at some of the different asynchronous techniques you'll encounter, showing how they can help us solve such problems.
... 59 fetching data from the server api, article, beginner, codingscripting, fetch, json, javascript, learn, promises, server, xhr, xml, xmlhttprequest, data, request this article shows how to start working with both xhr and fetch to fetch data from the server.
...And 9 more matches

nsIPromptService
(button_title_yes *button_pos_0) +(button_title_no * button_pos_1) methods alert() alert shows an alert dialog with an ok button.
...alertcheck() shows an alert dialog with an ok button and a labeled checkbox.
...confirm() shows a dialog with ok and cancel buttons.
...And 9 more matches

Examine and edit CSS - Firefox Developer Tools
inactive rules (not shown): if a rule is inactive (e.g., padding on a :visited pseudo-element), it is colored gray, with an info icon that gives more information when clicked.
... filter rules containing this property: next to overridden declarations is an icon you can click to filter the rules list to show only those rules that include that property.
... to view user-agent styles (i.e., browser-default css rules), enable "inspector > show browser styles" under the developer tool settings panel.
...And 9 more matches

Event reference
pageshow a session history entry is being traversed to.
... storage events change (see non-standard events) storage update events checking downloading error noupdate obsolete updateready value change events broadcast checkboxstatechange hashchange input radiostatechange readystatechange valuechange uncategorized events invalid message message open show less common and non-standard events abortable fetch events event name fired when abort a dom request is aborted, i.e.
... svg events svgabort svgerror svgload svgresize svgscroll svgunload svgzoom database events abort blocked complete error success upgradeneeded versionchange script events afterscriptexecute beforescriptexecute menu events dommenuitemactive dommenuiteminactive window events close popup events popuphidden popuphiding popupshowing popupshown tab events visibilitychange battery events chargingchange chargingtimechange dischargingtimechange levelchange call events alerting busy callschanged cfstatechange connecting dialing disconnected disconnecting error held, holding incoming resuming statechange voicechange sensor events compassneedscalibration devicemotion deviceorientation orientationchange smartcard events icccardlockerror iccinfoc...
...And 9 more matches

Details of the object model - JavaScript
the employee example the remainder of this chapter uses the employee hierarchy shown in the following figure.
... this section shows how to use very simple (and comparatively inflexible) definitions to demonstrate how to get the inheritance to work.
...cript (using this may cause an error for the following examples) class employee { constructor() { this.name = ''; this.dept = 'general'; } } javascript ** (use this instead) function employee() { this.name = ''; this.dept = 'general'; } java public class employee { public string name = ""; public string dept = "general"; } the manager and workerbee definitions show the difference in how to specify the next object higher in the inheritance chain.
...And 9 more matches

Advanced text formatting - Learn web development
if you get really stuck, press the show solution button to see the answer.
...a light brown color.</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: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.query...
...selector('.output'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = '<dl>\n <dt>bacon</dt>\n <dd>the glue that binds the world together.</dd>\n <dt>eggs</dt>\n <dd>the glue that binds the cake together.</dd>\n <dt>coffee</dt>\n <dd>the drink ...
...And 8 more matches

Graceful asynchronous programming with Promises - Learn web development
this article shows you how promises work, how you'll see them in use with web apis, and how to write your own.
...it then calls getusermedia(), asking for a stream that has both video and audio tracks, then once that's been obtained, sets up a video element to show the stream coming from the camera as a "self view," then takes each of the stream's tracks and adds them to the webrtc rtcpeerconnection representing a connection to another user.
... you could even do this, since the functions just pass their arguments directly, so there isn't any need for that extra layer of functions: choosetoppings().then(placeorder).then(collectorder).then(eatpizza).catch(failurecallback); this is not quite as easy to read, however, and this syntax might not be usable if your blocks are more complex than what we've shown here.
...And 8 more matches

Useful string methods - Learn web development
you could use this to find all instances of strings that don't contain the substring 'mozilla', or do, if you use the negation operator, as shown below.
... each example comes with a "reset" button, which you can use to reset the code if you make a mistake and can't get it working again, and a "show solution" button you can press to see a potential answer if you get really stuck.
... // your conditional test needs to go inside the parentheses // in the line below, replacing what's currently there if (greetings[i]) { let listitem = document.createelement('li'); listitem.textcontent = input; list.appendchild(listitem); } } </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: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; l...
...And 8 more matches

Index
the signature is verified if it can be shown that the signature data block must have been produced by the owner of the public key (because only that owner has the associated private key).
... this program shows the following: 177 nss sample code sample_1_hashing examples, nss, security this is an example program that demonstrates how to compute the hash of a file and save it to another file.
... this code shows the following: 181 nss sample code sample2 no summary!
...And 8 more matches

DevTools API - Firefox Developer Tools
showtoolbox(target [, toolid [, hosttype [, hostoptions]]]) opens a toolbox for given target either by creating a new one or activating an existing one.
...if unspecified the previously active tool is shown.
... tooldefinition a tooldefinition object contains all the required information for a tool to be shown in the toolbox.
...And 8 more matches

Waterfall - Firefox Developer Tools
recorded operations, called markers, are shown as horizontal bars, laid out in a waterfall to reflect the serial nature of the browser's execution.
... new in firefox 46: if the gc event was caused by allocation pressure, a link appears, labeled "show allocation triggers".
...if this is inside a callback from a promise, this will also show the "async stack".
...And 8 more matches

TextTrack.mode - Web APIs
the texttrack interface's mode property is a string specifying and controlling the text track's mode: disabled, hidden, or showing.
... safari additionally requires the default boolean attribute to be set to true when implementing your own video player controls in order for the subtitles cues to be shown.
... syntax var mode = texttrack.mode; texttrack.mode = "disabled" | "hidden" | "showing"; value a domstring which indicates the track's current mode.
...And 8 more matches

Listening to events in Firefox extensions - Archive of obsolete content
pageshow dispatched when a page is newly displayed.
... if the page contains scripts or other behaviors that fire during loading that you want to continue to execute every time the user navigates to the page, or if you want to know when a user has navigated to a cached page, use the new pageshow event.
... pageshow event this event works the same as the load event, except that it fires every time the page is loaded (whereas the load event doesn't fire in firefox 1.5 when the page is loaded from cache).
...And 7 more matches

MenuItems - Archive of obsolete content
if the checkbox is on, the toolbar is shown, whereas if the checkbox is off, the toolbar is not shown.
... <menu label="view" accesskey="v"> <menupopup> <menuitem label="show toolbar" accesskey="t" type="checkbox" checked="true"/> <menuitem label="show status bar" accesskey="s" type="checkbox"/> </menupopup> </menu> both menuitems are of the checkbox type.
... <script> function changetoolbarstate(event) { if (event.target.getattribute("checked") == "true") showtoolbar(); else hidetoolbar(); } </script> ...
...And 7 more matches

menupopup - Archive of obsolete content
attributes ignorekeys, left, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, top properties accessibletype, anchornode, popupboxobject, position, state, triggernode methods hidepopup, moveto, openpopup, openpopupatscreen, setconsumerollupevent, showpopup, sizeto examples the following example shows how a menupopup may be attached to a menulist.
... <menulist> <menupopup> <menuitem label="mozilla" value="http://mozilla.org"/> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net"/> <menuitem label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menulist> the following example shows how a menupopup can be used as a context menu for an element.
... left type: integer overrides the horizontal position of the popup specified by the showpopup method.
...And 7 more matches

Images in HTML - Learn web development
in other words, what you lose if your image doesn't show up: decoration.
... it has a large head with long sharp teeth" width="400" height="341" title="a t-rex on display in the manchester university museum"> this gives us a tooltip on mouse hover, just like link titles: however, this is not recommended — title has a number of accessibility problems, mainly based around the fact that screen reader support is very unpredictable and most browsers won't show it unless you are hovering with a mouse (so e.g.
...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"...
...And 7 more matches

Responsive images - Learn web development
responsive image technologies were implemented recently to solve the problems indicated above by letting you offer the browser several image files, either all showing the same thing but containing different numbers of pixels (resolution switching), or different images suitable for different space allocations (art direction).
... in this section, we'll look at the two problems illustrated above and show how to solve them using html's responsive image features.
...example of this in our responsive.html example on github (see also the source code): <img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="elva-fairy-800w.jpg" alt="elva dressed as a fairy"> the srcset and sizes attributes look complicated, but they're not too hard to understand if you format them as shown above, with a different part of the attribute value on each line.
...And 7 more matches

BloatView
bloatview is a tool that shows information about cumulative memory usage and leaks.
... xpcom_mem_leak_log this is similar to xpcom_mem_bloat_log, but restricts the log to only show data on leaks.
...a 736 259808 325312 489440 338560 1413120 141312 220800 -11040 94944 446016 nslinelayout 1100 2200 225500 402600 562100 1192400 0 0 0 0 0 nslocalfile 424 558832 19928 1696 1272 581728 72080 1272 424 -424 73352 the first set of columns, bytes allocated, shows the amount of memory allocated for the first log file (blank.txt), the difference between the first log file and the second (mozilla.txt), the difference between the second log file and the third (yahoo.txt), the difference between the third log file and the fourth (netscape.txt), and the total amount of memory allocated in the fourth log file.
...And 7 more matches

nsIAlertsService
implemented by: @mozilla.org/alerts-service;1 as a service: var alertsservice = components.classes["@mozilla.org/alerts-service;1"] .getservice(components.interfaces.nsialertsservice); method overview void showalertnotification(in astring imageurl, in astring title, in astring text, [optional] in boolean textclickable, [optional] in astring cookie, [optional] in nsiobserver alertlistener, [optional] in astring name, [optional] in astring dir, [optional] in astring lang, [optional] in astring data, [optional] in nsiprincipal principal,[optional] in boolean inprivatebrowsing); void closealert([op...
...tional] in astring name, [optional] in nsiprincipal principal); methods showalertnotification() displays a notification window.
... void showalertnotification( in astring imageurl, in astring title, in astring text, in boolean textclickable, optional in astring cookie, optional in nsiobserver alertlistener, optional in astring name, optional in astring dir, optional in astring lang, optional in astring data, optional in nsiprincipal principal, optional in boolean inprivatebrowsing, optional ); parameters imageurl a url identifying the image to display in the notification alert.
...And 7 more matches

nsIPrintingPrompt
defaults for platform service: showprintdialog - displays a native dialog showpagesetup() - displays a xul dialog showprogress() - displays a xul dialog summary for windows embedders: stated once again: there is no "fallback" native platform support in gfx for the displaying of the native print dialog.
...if an embedder implemented service returns ns_error_not_implemented for "showprintdialog" the toolkit will display the native print dialog.
... defaults for platform service: mac os x: showprintdialog - displays a native dialog showpagesetup() - displays a native dialog showprogress() - not implemented (provided by os) gtk: there are no native dialogs for gtk.
...And 7 more matches

Edit fonts - Firefox Developer Tools
note: the updated font tools as shown in this article are available in firefox 63 onwards; if you are using an older version of firefox the tools will not look or behave quite the same, but they will be similar (most notably the font editor will not be available).
... select the fonts tab; the last of the tabs shown in the right-hand side of the css pane.
... fonts used the top section of the font editor shows the fonts used by the currently inspected element, grouped by font family.
...And 7 more matches

Object.create() - JavaScript
as shown above, all seems normal so far.
... however, when attempting to actually use these objects, their differences quickly become apparent: > "oco is: " + oco // shows "oco is: [object object]" > "ocn is: " + ocn // throws error: cannot convert object to primitive value testing just a few of the many most basic built-in functions shows the magnitude of the problem more clearly: > alert(oco) // shows [object object] > alert(ocn) // throws error: cannot convert object to primitive value > oco.tostring() // shows [object object] > ocn.tostring() // throws error: ocn.tostring is not a function > oco.valueof() // shows {} > ocn.valueof() // throws error: ocn.valueof is not a function > oco.hasownproperty("p") // shows "true" > ocn.hasownproperty("p") // throws error: ocn.hasownproperty is not a function > oco.constructor // show...
...s "object() { [native code] }" > ocn.constructor // shows "undefined" as said, these differences can make debugging even simple-seeming problems quickly go astray.
...And 7 more matches

Add to Home screen - Progressive web apps (PWAs)
tapping this will show a confirmation banner — pressing the big + add to home screen button completes the action, adding the app to the home screen.
... (note: in android 8 and higher, a system-level "add to home screen" permission dialog will be shown first.) if you have mobile chrome available, the experience is slightly different; upon loading our site, you'll see an install banner pop up asking whether you want to add this app to your home screen.
...to make it feel like a distinct app (and not just a web page), you should choose a value such as fullscreen (no ui is shown at all) or standalone (very similar, but system-level ui elements such as the status bar might be visible).
...And 7 more matches

How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
notifications can be used by the service worker to show new information to the user, or at least alert them when something has been updated.
... 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.
... request permission to show a notification, we have to request permission to do so first.
...And 7 more matches

Creating annotations - Archive of obsolete content
the click handler sends a message called show back to the main add-on code.
... the show message contains: the url for the page, the id attribute value, and the text content of the page element.
...s).hasclass('annotated')) { return; } resetmatchedelement(); ancestor = $(this).closest("[id]"); matchedelement = $(this).first(); originalbgcolor = $(matchedelement).css('background-color'); $(matchedelement).css('background-color', 'yellow'); $(matchedelement).bind('click.annotator', function(event) { event.stoppropagation(); event.preventdefault(); self.port.emit('show', [ document.location.tostring(), $(ancestor).attr("id"), $(matchedelement).text() ] ); }); }); conversely, the add-on resets the matched element on mouseout: $('*').mouseout(function() { resetmatchedelement(); }); save this code in a new file called selector.js in your add-on's data directory.
...And 6 more matches

Venkman Introduction - Archive of obsolete content
figure 6 shows the table of icon and file types.
... if a function has a breakpoint in it, a small red dot will show up in the function icon, as well as the parent's file icon.
...figure 9 shows which icons represent which data types.
...And 6 more matches

Extensions - Archive of obsolete content
an extension may modify the context menu to show additional items that either appear always, or appear only when certain content is selected.
... <popup id="contentareacontextmenu"> <menuitem id="thumbnail-show" label="view thumbnail" oncommand="thumbnails.view();"/> </popup> note that the popup element is used rather than the menupopup element as this is the element that firefox uses.
... showing and hiding context menu items to have a menuitem you have added be shown or hidden based on the context, you can use an event handler that listens for the popupshowing event.
...And 6 more matches

Textbox (XPFE autocomplete) - Archive of obsolete content
mplete, 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, getsessionstatusat, getsessionvalueat, removesession, select, setselectionrange, syncsessions examples (example needed) attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... maxrows type: integer the number of rows to show in the results list at a time.
...And 6 more matches

panel - Archive of obsolete content
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.
... left type: integer overrides the horizontal position of the popup specified by the showpopup method.
... top the panel is shown in front of all other normal windows, including those of other applications.
...And 6 more matches

Adobe Flash - Archive of obsolete content
the example below shows a detection heuristic in action.
... accessing flash from javascript the simple example below shows how input into an html text box in a form field can be transferred to a flash animation (the grey text box below).
... example 2 shows the use of macromedia flash's setvariable method being invoked from javascript.
...And 6 more matches

Tiles and tilemaps overview - Game development
the below images shows a tile atlas of 8 x 4 tiles: using an atlas also has the advantage of naturally assigning every tile an index.
... visual grid: includes indices showing what type of tile should be placed on each position in the grid.
...in the first case, the tilemap is static — it doesn't need to be scrolled to be fully shown.
...And 6 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...
...the following image shows the highlight in both firefox (a dotted outline) and chrome (a blue outline): you can be creative with link styles, as long as you keep giving users feedback when they interact with the links.
... hiding things there are many instances where a visual design will require that not all content is shown at once.
...And 6 more matches

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
in the following sections we will show you how they can be used.
... the time display to show the number of seconds elapsed, rather than the actual time.
... you also want to calculate the number of hours, minutes, and seconds as separate values, and then show them together in a string after each loop iteration.
...And 6 more matches

Looping code - Learn web development
this shows a loop is used to iterate over the items in an array and do something with each of them — a very common pattern in javascript.
...if you get really stuck, press "show solution" to see a solution.
... <textarea id="code" class="playable-code" style="height: 300px;width: 95%"> let output = document.queryselector('.output'); output.innerhtml = ''; // let i = 10; // const para = document.createelement('p'); // para.textcontent = ; // output.appendchild(para); </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: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.valu...
...And 6 more matches

Gecko info for Windows accessibility vendors
it's also used in the root pane object to show when the state_busy flag changes from loading new content.
... event_show, event_hide and event_locationchange are fired for the caret object.
...event_show and event_hide may also be fired with the reorder event, for the child who's visibility changed.
...And 6 more matches

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.
...its value is the uri of a query, and the data shown in the view are the results of this query.
... the following table shows the mappings between these magic column id values and their corresponding nsinavhistoryresultnode properties: treecol id or anonid corresponding nsinavhistoryresultnode property title title url uri date time visitcount accesscount keyword * description * dateadded dateadded lastmodified l...
...And 6 more matches

A guide to searching crash reports
the columns show each group's rank, signature, size (both a count and a proportion of matching crash reports), and finally a list of bugs that have been marked as relating to this signature.
... grouping in the previous section we saw one example of grouping, in the "signature facet" tab that is shown by default.
... facets in the search form to do a search with non-signature grouping first click on the "more options..." text, which reveals the additional fields shown in the following screenshot.
...And 6 more matches

Using XPCOM Components
this chapter demonstrates how mozilla uses some of these xpcom objects, such as the cookiemanager, and shows how access to the weblock component will be defined.
...the cookie manager dialog shows user interface[cookie-manager-ui] that is presented to the user in mozilla for working with the cookiemanager component.
... the snippet in getting the cookiemanager component in javascript shows how the remove() method from the xpcom cookiemanager component can be called from javascript: getting the cookiemanager component in javascript // xpconnect to cookiemanager // get the cookie manager component in javascript var cmgr = components.classes["@mozilla.org/cookiemanager;1"] .getservice(); cmgr = cmgr.queryinterface(components.interfaces.nsicookiemanager); // ca...
...And 6 more matches

Main Windows
its main focus is on handling the folderpane, threadpane, and the message preview sections shown above.
... the rest is loaded from overlays: mailwindowoverlay.xul this is the red sections shown in the interface above (where?), including the toolbars, notification bars, and the status bar, but also includes most of the commands, keysets, and context menus of thunderbird, along with a whole lot of javascript.
... msghdrviewoverlay.xul shown in blue above (where?), this overlay consists of three boxes.
...And 6 more matches

Examine and edit HTML - Firefox Developer Tools
this shows the complete hierarchy through the document for the branch containing the selected element: hovering over a breadcrumb highlights that element in the page.
... as you type, an autocomplete popup shows any class or id attributes that match the current search term: press up and down to cycle through suggestions, tab to choose the current suggestion, then enter to select the first node with that attribute.
... html tree the rest of the pane shows you the page's html as a tree (this ui is also called the markup view).
...And 6 more matches

Animating CSS properties - Firefox Developer Tools
one last step is not shown in this sequence: the page may be split into layers, which are painted independently and then combined in a process called "composition".
... transform opacity the css triggers website shows how much of the waterfall is triggered for each css property, with information for most css properties by browser engine.
...exactly what you'll see depends a lot on your machine and system load, but it will be something like this: this is showing three distinct views: (a) an overview of the waterfall, (b) the frame rate, and (c) the timeline details.
...And 6 more matches

Animation performance and frame rate - Web Performance
one last step is not shown in this sequence: the page may be split into layers, which are painted independently and then combined in a process called "composition".
... transform opacity the css triggers website shows how much of the waterfall is triggered for each css property, with information for most css properties by browser engine.
...exactly what you'll see depends a lot on your machine and system load, but it will be something like this: this is showing three distinct views: (a) an overview of the waterfall, (b) the frame rate, and (c) the timeline details.
...And 6 more matches

ContextMenus - Archive of obsolete content
hiding and showing menu items based on context when the context menu is opened, a popupshowing event will fire before the popup is displayed.
... in many cases, it may be easier to use a single context menu containing every possible item, and show and hide the necessary items when needed.
...to show an item, set its hidden property to false.
...And 5 more matches

Adding Methods to XBL-defined Elements - Archive of obsolete content
the method 'showtitle' can be used to show or hide the label.
... xul: <box id="num" class="labeledbutton" title="number of things:" value="52"/> <button label="show" oncommand="document.getelementbyid('num').showtitle(true)"/> <button label="hide" oncommand="document.getelementbyid('num').showtitle(false)"/> xbl: <binding id="labeledbutton"> <content> <xul:label xbl:inherits="value=title"/> <xul:label xbl:inherits="value"/> </content> <implementation> <method name="showtitle"> <parameter name="state"/> <body> if (state) { document.getanonymousnodes(this)[0].setattribute("style", "visibility: visible"); } else { document.getanonymousnodes(this)[0].setattribute("style", "visib...
...each calls the 'showtitle' method.
...And 5 more matches

Numeric Controls - Archive of obsolete content
the decimalplaces attribute indicates how many decimal places to show.
... the default value is 0, which means show integers only.
... however a different value may be used to show decimal values.
...And 5 more matches

prefwindow - Archive of obsolete content
normally, you would not set this attribute as it will be set automatically such that the default pane is the same as the one showing when the preferences dialog was last closed.
... buttonalign, buttondir, buttonorient, buttonpack, buttons, defaultbutton, lastselected, onbeforeaccept, ondialogaccept, ondialogcancel, ondialogdisclosure, ondialoghelp, onload, onunload, title, type properties buttons, currentpane, defaultbutton, lastselected, preferencepanes, type methods acceptdialog, addpane, canceldialog, centerwindowonscreen, getbutton, opensubdialog, openwindow, showpane examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="saveoptions" label="backups"> <preferences> <preference id="pref-backup" name="myapp.mybackups" type="bool"/> <preference id="pref-backupduration" name="myapp.mybackups.duration" typ...
... disclosure: a button to show more information.
...And 5 more matches

tooltip - Archive of obsolete content
attributes crop, default, label, noautohide, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, page, position properties accessibletype, label, popupboxobject, position, state methods hidepopup, moveto, openpopup, openpopupatscreen, showpopup, sizeto examples <tooltip id="moretip" orient="vertical" style="background-color: #33dd00;"> <label value="click here to see more information"/> <label value="really!" style="color: red;"/> </tooltip> <vb...
... center the text will be cropped in the middle, showing both the start and end of the text normally.
... onpopupshowing type: script code this event is sent to a popup just before it is opened.
...And 5 more matches

Reference - Archive of obsolete content
they are there specifically to show the differences between the two versions.
...--maian 05:10, 22 september 2005 (pdt) if the examples are there specifically to show the differences between two versions of js, and if we have a section in the reference that is dedicated to discussing these differences, i would think that those samples should be included in that section of the reference.
...so while the examples do show what js 1.2 does, they incorrectly indicate that it's possible to switch to the 1.2 engine.
...And 5 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
for example, an image hosted on site1.com is shown directly on site2.com.
... 264 media (audio-visual presentation) audio, glossary, media, multimedia, video the term media (more accurately, multimedia) refers to audio, video, or combined audio-visual material such as music, recorded speech, movies, tv shows, or any other form of content that is presented over a period of time.
...specifications might also contain sections that are marked as non-normative or informative, which means those are provided there for the purpose of helping the reader understand the specifications better or to showcase an example or best practice, which need not be followed as a rule.
...And 5 more matches

Adding vector graphics to the Web - Learn web development
in this article we'll show you how to include one in your webpage.
... on the web, you'll work with two types of image — raster images, and vector images: raster images are defined using a grid of pixels — a raster image file contains information showing exactly where each pixel is to be placed, and exactly what color it should be.
...you can find this example live on our github repo as vector-versus-raster.html — it shows two seemingly identical images side by side, of a red star with a black drop shadow.
...And 5 more matches

Client-side storage - Learn web development
showing a user's choice of custom widgets, color scheme, or font size).
... use of cache and service workers is an advanced topic, and we won't be covering it in great detail in this article, although we will show a simple example in the offline asset storage section below.
... basic syntax let's show you how: first, go to our web storage blank template on github (open this in a new tab).
...And 5 more matches

Drawing graphics - Learn web development
the below example shows a simple 2d canvas-based bouncing balls animation that we originally met in our introducing javascript objects module: around 2006–2007, mozilla started work on an experimental 3d canvas implementation.
...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.
... we will however show how to use a webgl library to create a 3d scene more easily, and you can find a tutorial covering raw webgl elsewhere — see getting started with webgl.
...And 5 more matches

Client-Server Overview - Learn web development
for example, the http request that is sent when you perform a search on mdn for the term "client server overview" will look a lot like the text shown below (it will not be identical because parts of the message depend on your browser/setup).
... the response the first part of the response for this request is shown below.
... the request the text below shows the http request made when a user submits new profile details on this site.
...And 5 more matches

Handling common HTML and CSS problems - Learn web development
to show you an example of how such plugins generally work: install atom (if you haven't got an up-to-date version already installed) — download it from the atom page linked above.
... note: html errors don't tend to show up so easily in dev tools, as the browser will try to correct badly-formed markup automatically; the w3c validator is the best way to find html errors — see validation above.
... as an example, in firefox the css inspector will show css declarations that aren't applied crossed out, with a warning triangle.
...And 5 more matches

Profiling with the Firefox Profiler
call tree the call tree shows the samples organized by 'running time' which will show the data by wall clock time.
... clicking the "javascript only" option will only show javascript code in the call tree.
... custom annotations in bug 1334218 an annotation was added to presshell::paint to show the url of the document being painted.
...And 5 more matches

about:memory
if you select the "verbose" checkbox before measuring, all trees will be shown fully expanded and no artificial nodes will be inserted.
... some add-on memory usage is identified, as the following example shows.
... all javascript memory usage for an add-on is measured separately and shown in this sub-tree.
...And 5 more matches

Hacking Tips
│ auto funcptr = js_data_to_func_ptr(exportfuncptr, codebase() + func.entryoffset()); │ if (!call_generated_2(funcptr, exportargs.begin(), &tlsdata_)) │ return false; after it's set, x/64i funcptr will show you the trampoline code.
... using the tracelogger (js shell / browser) create graphs showing time spent in which engine and which function like this.
...this will remove entries that took only a minor time (=entries that will only show up with les than 1px).
...And 5 more matches

Web Video Text Tracks Format (WebVTT) - Web APIs
a webvtt file (.vtt) contains cues, which can be either a single line or multiple lines, as shown below: webvtt 00:01.000 --> 00:04.000 - never drink liquid nitrogen.
... in the case of each cue: the first line is started with a time, which is the starting time for showing the text that appears underneath.
... we finish the first line with a second time, which is the ending time for showing the associated text.
...And 5 more matches

Inputs and input sources - Web APIs
a full webxr experience isn't just about showing the user a wholly virtual scene or augmenting reality by adding to or altering the world around them.
...it describes the technique used to determine the targeting ray and how it should be shown to the user if presented visually.
... this is shown in the diagram below, in which the controller is located down and to the left of the world space's origin, with the controller also moved to be closer to us than the origin.
...And 5 more matches

<video>: The Video Embed element - HTML: Hypertext Markup Language
the above example shows simple usage of the <video> element.
... in a similar manner to the <img> element, we include a path to the media we want to display inside the src attribute; we can include other attributes to specify information such as video width and height, whether we want it to autoplay and loop, whether we want to show the browser's default video controls, etc.
... the content inside the opening and closing <video></video> tags is shown as a fallback in browsers that don't support the element.
...And 5 more matches

Closures - JavaScript
<p id="help">helpful notes will appear here</p> <p>e-mail: <input type="text" id="email" name="email"></p> <p>name: <input type="text" id="name" name="name"></p> <p>age: <input type="text" id="age" name="age"></p> function 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.
...And 5 more matches

OpenClose - Archive of obsolete content
as with other ways of opening a menu, the popupshowing event will be fired to provide an opportunity to customize the commands that appear on the menu.
...if you do want to open a submenu, open the parent menu first, and then open the child menu in a popupshown event listener.
... see the popupshown event for an example of how to do this.
...And 4 more matches

textbox (Toolkit autocomplete) - Archive of obsolete content
tepopup, 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, disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popupopen, searchcount, searchpara...
...m, 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.
... maxrows type: integer the number of rows to show in the results list at a time.
...And 4 more matches

XBL Example - Archive of obsolete content
a slideshow element let's construct a full example of an xbl element.
...we'll call this a slideshow element.
... content of the slideshow first, let's determine what elements need to go in the xbl content.
...And 4 more matches

Windows Media in Netscape - Archive of obsolete content
example 1: client-side detection scripts browser architecture supports: netscapeplugin windows media player installed: true windows media scriptable: false windows media version: pluginversion a complete source code listing showing how that detection was done can be found here (devedge-temp).
...here is a code snippet that shows this: var player; try { if (window.activexobject) { player = new activexobject("mediaplayer.mediaplayer.1"); } else if (window.geckoactivexobject) { player = new geckoactivexobject("mediaplayer.mediaplayer.1"); } else { // plugin code using navigator.mimetypes player = navigator.mimetypes["application/x-mplayer2"].enabledplugin; } } catch(e) { // handle error -- no wm...
... to be embedded in wiki page (can it just be put here?) <object id="playerex2" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" height="200" width="200"> <param name="uimode" value="full"> <param name="autostart" value="true"> <param name="url" value="media/preludesteel.wma"> your browser does not support the activex windows media player </object> the same markup (used above and shown below) will work in both ie and netscape 7.1.
...And 4 more matches

Desktop gamepad controls - Game development
window.addeventlistener("gamepadconnected", gamepadhandler); it's executed once, so we can create some variables we will need later on for storing the controller info and the pressed buttons: var controller = {}; var buttonspressed = []; function gamepadhandler(e) { controller = e.gamepad; output.innerhtml = "gamepad: " + controller.id; } the second line in the gamepadhandler function shows up on the screen when the device is connected: we can also show the id of the device — in the case above we're using the xbox 360 wireless controller.
...to indicate that the gamepad controller is active we can show the user some custom text on the game's main menu screen.
...press y for controls'; var textgamepad = this.add.text(message, ...); textgamepad.visible = false; } in the update() function, which is executed every frame, we can wait until the controller is actually connected, so the proper text can be shown.
...And 4 more matches

Accessible multimedia - Learn web development
this article shows how.
...for more information on how to add more complex features to video/audio players, including flash fallbacks for older browsers, see: audio and video delivery video player styling basics creating a cross-browser video player we've also created an advanced example to show how you could create an object-oriented system that finds every video and audio player on the page (no matter how many there are) and adds our custom controls to it.
....) > show transcript.
...And 4 more matches

WAI-ARIA basics - Learn web development
here we'll show how to use it at a basic level to improve accessiblity.
... the improved semantics of the search form have shown what is made possible when aria goes beyond the semantics available in html5.
...once that is done, we start up a setinterval() loop that loads a new random quote into the quote box every 10 seconds: let intervalid = window.setinterval(showquote, 10000); this works ok, but it is not good for accessibility — the content update is not detected by screenreaders, so their users would not know what is going on.
...And 4 more matches

Debugging HTML - Learn web development
for example, the following shows an error reported when trying to compile a simple program written in the rust language.
...html is not compiled into a different form before the browser parses it and shows the result (it is interpreted, not compiled).
...well, generally when you do something wrong in code, there are two main types of error that you'll come across: syntax errors: these are spelling errors in your code that actually cause the program not to run, like the rust error shown above.
...And 4 more matches

From object to iframe — other embedding technologies - Learn web development
if you get really stuck, press the show solution button to see an answer.
...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: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.query...
...selector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = '<iframe width="420" height="315" src="https://www.youtube.com/embed/qh2-tgulwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb...
...And 4 more matches

Arrays - Learn web development
i <= 0; i++) { // number 2 // number 3 // number 4 // number 5 let itemtext = 0; const listitem = document.createelement('li'); listitem.textcontent = itemtext; list.appendchild(listitem); } totalbox.textcontent = 'total: $' + total.tofixed(2); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry ...
...= jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const jssolution = 'const list = document.queryselector(\'.output ul\');\nconst totalbox = document.queryselector(\'.output p\');\nlet total = 0;\nlist.innerhtml = \'\';\ntotalbox.textcontent = \'\';\n\nlet products = [\'underpants:6.99\',\n \'socks:5.99\',\n \'t-shirt:14.99\',\n \'trousers:31.99\',\n \'shoes:23.99\'];\n\nfor(let i = 0; i < products.length; i++) {\n let subarray = products[i].split(\':\');\n let name = subarray[0];\n let price = numbe...
...rea.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 = textarea.value; } updatecode(); }; html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; bac...
...And 4 more matches

Server-side web frameworks - Learn web development
previous overview: first steps next the previous article showed you what the communication between web clients and servers looks like, the nature of http requests and responses, and what a server-side web application needs to do in order to respond to requests from a web browser.
... the example below shows how this works in the django (python) web framework.
... the first code snippet below shows a very simple django model for a team object.
...And 4 more matches

Working with Svelte stores - Learn web development
in this article we will show another way to handle state management in svelte — stores.
... objective: learn how to use svelte stores using stores we will create an alert component that shows notifications on screen, which can receive messages from any component.
... creating the alert component to show how to work with stores, we will create an alert component.
...And 4 more matches

Introduction to automated testing - Learn web development
if you get errors, check that you've added all the dependencies and the tests as shown above; also try commenting out the html/css/javascript code sections and then rerunning gulp to see if you can isolate what the problem is.
... in the next screen, type in the url of a page you want to test (use http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html, for example), then choose a browser/os combination you want to test by using the different buttons and lists.
...clicking on one of these entries shows more data for the session.
...And 4 more matches

Setting up your own test automation environment - Learn web development
objective: to show how to set up a selenium testing environment locally and run tests with it, and how to integrate it with tools like lambdatest, sauce labs, and browserstack.
... to set your path variable on mac os x/most linux systems: open your .bash_profile (or .bashrc) file (if you can't see hidden files, you'll need to display them, see show/hide hidden files in mac os x or show hidden folders in ubuntu).
... note: saucelabs-sample-test-frameworks contains several useful examples showing how to set up different combinations of test/assertion tools.
...And 4 more matches

PopupNotifications.jsm
method overview void locationchange(); notification getnotification(id, browser); void remove(notification); notification show(browser, id, message, anchorid, mainaction, secondaryactions, options); properties attribute type description ispanelopen boolean returns true if the notification panel is currently visible, false if it is not.
... show() adds a new popup notification, displaying it to the user.
... notification show( browser, id, message, anchorid, mainaction, secondaryactions, options ); parameters browser the xul <xul:browser> element with which the notification is associated.
...And 4 more matches

Application Translation with Mercurial
paste the following content into the file: [ui] username = firstname lastname <mynick@example.com> merge = internal:merge [alias] qexport = export -g -r qtip qexportall = diff -r qparent [defaults] commit = -v diff = -p -u 8 qdiff = -p -u 8 qnew = -u [diff] git = 1 showfunc = 1 unified = 8 [extensions] hgext.mq = progress = [hooks] put in your name and email address which later will be public on the internet after your translation patch got accepted and uploaded.
... the first line shows the locale for which the texts are being translated (in this example: de - german).
... you installed scrapbook earlier, now open it in firefox either by calling it from the firefox menu bar (press the alt key to show it if necessary) using "view" > "sidebar" > "scrapbook" or by clicking its toolbar button which you likely have to add by toolbar customization if you didn't do this before.
...And 4 more matches

Gecko Profiler FAQ
the gecko profiler currently doesn’t have the ability to show you information about line numbers, neither for js code nor for native code.
... similarly it also can’t show you instruction level information about where each sample was captured (this is why there is no support for line-level sampling for native code either.) at this point the granularity of each sample it displays is a native function.
... how do we profile "leaks" that show up after running firefox for > 40 mins?
...And 4 more matches

nsIAuthInformation
domain astring the initial value should be used to prefill the dialog or be shown in some other way to the user.
... password astring the initial value should be used to prefill the dialog or be shown in some other way to the user.
... the password should not be shown in clear.
...And 4 more matches

nsIFilePicker
an instance, use: var filepicker = components.classes["@mozilla.org/filepicker;1"] .createinstance(components.interfaces.nsifilepicker); method overview void appendfilter(in astring title, in astring filter); void appendfilters(in long filtermask); void init(in nsidomwindow parent, in astring title, in short mode); void open(in nsifilepickershowncallback afilepickershowncallback); short show(); obsolete since gecko 57.0 attributes attribute type description addtorecentdocs boolean if true, the file is added to the operating system's "recent documents" list (if the operating system has one; nothing happens if there is no such concept on the user's platform).
...this should be set before calling open() or show().
...this should be set this before calling open() or show() to specify a starting point.
...And 4 more matches

Activity Manager examples
showing a user-defined activity in the activity manager window the following sample will show a process and an event for junk processing in the activity manager window.
...e // localization is omitted, initiator is not provided process.init("processing folder: " + folder.prettiestname, null); // note that we don't define a custom icon, default process icon // will be used process.contexttype = "account"; // group this activity by account process.contextobj = folder.server; // account in question gactivitymanager.addactivity(process); // step 2: showing some progress let percent = 50; process.setprogress(percent, "junk processing 25 of 50 messages", 25, 50); // step 3: removing the process and adding an event using process' attributes process.state = components.interfaces.nsiactivityprocess.state_completed; gactivitymanager.removeactivity(process.id); let event = components.classes["@mozilla.org/activity-event;1"].createinstance(nsiae); /...
.../ localization is omitted, initiator is omitted event.init(folder.prettiestname + " is processed", null, "no junk found", process.starttime, // start time date.now()); // completion time event.contexttype = process.contexttype; // optional event.contextobj = process.contextobj; // optional gactivitymanager.addactivity(event); showing a user-defined activity with cancel capability (javascript) this sample improves the previous one by providing an nsiactivitycancelhandler to allow the user to cancel the process.
...And 4 more matches

Accessibility Inspector - Firefox Developer Tools
right-click an item in the html pane of the page inspector, and choose show accessibility properties in the context menu.
...the json viewer can also show you the raw json data on a separate tab in the viewer.
...the available menu items include: none — don't show the possible list of issues all issues — check for all types of issues contrast — check for issues with visual contrast keyboard — check for issues with navigating via a keyboard text labels — check for issues with missing text labels when you one of the menu items, firefox scans your document for the type of issues you selected.
...And 4 more matches

Aggregate view - Firefox Developer Tools
the "total count" column shows you the number of objects of each category that are currently allocated.
... the "total bytes" column shows you the number of bytes occupied by objects in each category, and that number as a percentage of the whole heap size for that tab.
...if you select an item, you'll see the retaining paths panel for that item: call stack the call stack shows you exactly where in your code you are making heap allocations.
...And 4 more matches

CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
note: the examples shown in the screenshots appearing in this article are jen simmons' futurismo and variations on a grid experiments, and a live named grid area example from rachel andrew.
... clicking the icon toggles the display of a grid overlay on the page, which appears over the element, laid out like a grid to show the position of its grid lines and tracks: the overlay is still shown when you select other elements, so you can edit related css properties and see how the grid is affected.
... grid display settings: display line numbers: turn the line numbers shown for each grid overlay on and off (on by default).
...And 4 more matches

UI Tour - Firefox Developer Tools
the following image shows the 2-pane layout: in 2-pane mode, the inspector includes the html pane, and the css pane, which can contain one of six tools: rules view layout view computed view changes view compatibility view (firefox developer edition 77 and later) fonts view animations view the following image shows the 3-pane mode (available from firefox 62 onwards) which moves the css rules view into a sepa...
...the following image shows 3-pane mode: as you can see, the css pane has moved into the center of the inspector.
...if the page includes any sections using either the flexbox display model or css grids, this view shows the flexbox or grid settings used on the page.
...And 4 more matches

Storage Inspector - Firefox Developer Tools
for example, clicking on an origin which is a child of the cookies storage type will show all the cookies belonging to that domain.
...you can hide and show columns by context-clicking on the table header and selecting the columns you want to see: search there's a search box at the top of the table widget: this filters the table to show only items which match the search term.
... add and refresh storage you'll also have buttons available to add a new storage entry or refresh the view of the currently viewed storage type where applicable (you can't add new entries to indexeddb or cache): sidebar when you select any row in the storage table widget, the sidebar is shown with details about that row.
...And 4 more matches

HTMLImageElement.alt - Web APIs
these are shown in the examples below.
...this is shown in the example below.
... html in the html for this example, shown below, the <img> element includes the alt property, which will prevent the image from having any alternate text, since it's simply a decorational detail.
...And 4 more matches

Using the Notifications API - Web APIs
denied the user has explicitly declined permission to show notifications.
...ions</button> clicking this calls the asknotificationpermission() function: function asknotificationpermission() { // function to actually ask the permissions function handlepermission(permission) { // whatever the user answers, we make sure chrome stores the information if(!('permission' in notification)) { notification.permission = permission; } // set the button to shown or hidden, depending on what the user answers if(notification.permission === 'denied' || notification.permission === 'default') { notificationbtn.style.display = 'block'; } else { notificationbtn.style.display = 'none'; } } // let's check if the browser supports notifications if (!('notification' in window)) { console.log("this browser does not support notifica...
...inside here we explicitly set the notification.permission value (some old versions of chrome failed to do this automatically), and show or hide the button depending on what the user chose in the permission dialog.
...And 4 more matches

Streams API - Web APIs
this is something browsers do anyway when receiving assets to be shown on webpages — videos buffer and more is gradually available to play, and sometimes you'll see images display gradually as more is loaded.
...the examples are as follows: simple stream pump: this example shows how to consume a readablestream and pass its data to another.
... grayscale a png: this example shows how a readablestream of a png can be turned into grayscale.
...And 4 more matches

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
in this guide we show how use webgl to simulate camera movements without having a camera to move.
...note: most diagrams used in this article to show how the camera moves while performing standard movements was taken from an article on the filmmakeriq web site; namely, from this image which is found all over the web, however, and though we assume these are under a permissive license due to their frequent reuse, ownership is not certain.
... in mapping applications, the camera may either be placed directly over the scene, or might use various angles to show perspective.
...And 4 more matches

Window - Web APIs
window.dialogarguments read only gets the arguments passed to the window (if it's a dialog box) at the time window.showmodaldialog() was called.
... window.returnvalue the return value to be returned to the function that called window.showmodaldialog() to display the window as a modal dialog.
... window.showmodaldialog() displays a modal dialog.
...And 4 more matches

Synchronous and asynchronous requests - Web APIs
*/) { var xhr = new xmlhttprequest(); xhr.callback = callback; xhr.arguments = array.prototype.slice.call(arguments, 2); xhr.onload = xhrsuccess; xhr.onerror = xhrerror; xhr.open("get", url, true); xhr.send(null); } usage: function showmessage(message) { console.log(message + this.responsetext); } loadfile("message.txt", showmessage, "new message!\n\n"); the signature of the utility function loadfile declares (i) a target url to read (via an http get request), (ii) a function to execute on successful completion of the xhr operation, and (iii) an arbitrary list of additional arguments that are passed through the xhr object...
...it, in turn, invokes the callback function specified in the invocation of the loadfile function (in this case, the function showmessage) which has been assigned to a property of the xhr object (line 11).
...starting with the third argument, all remaining arguments are collected, assigned to the arguments property of the variable xhr, passed to the success callback function xhrsuccess., and ultimately supplied to the callback function (in this case, showmessage) which is invoked by function xhrsuccess.
...And 4 more matches

An overview of accessible web applications and widgets - Accessibility
presentational changes dynamic presentational changes include using css to change the appearance of content (such as a red border around invalid data, or changing the background color of a checked checkbox), as well as showing or hiding content.
... visibility changes when content visibility is changed (i.e., an element is hidden or shown), developers should change the aria-hidden property value.
...the example shows a simple web form with tooltips containing instructions associated with the entry fields.
...And 4 more matches

OpenType font features guide - CSS: Cascading Style Sheets
they are all defined and shown here, but many will only work using the lower-level font-feature-settings property.
... note: the examples below show the properties and some example combinations, along with the lower-level syntax equivalents.
...the typefaces shown are playfair display, source serif pro, ibm plex serif, dancing script, and kokoro (all available and free to use, most are on google fonts and other services).
...And 4 more matches

tabs - Archive of obsolete content
te', function () { console.log('active: ' + tabs.activetab.url); }); track a single tab given a tab, you can register event listeners to be notified when the tab is closed, activated or deactivated, or when the page hosted by the tab is loaded or retrieved from the "back-forward cache": var tabs = require("sdk/tabs"); function onopen(tab) { console.log(tab.url + " is open"); tab.on("pageshow", logshow); tab.on("activate", logactivate); tab.on("deactivate", logdeactivate); tab.on("close", logclose); } function logshow(tab) { console.log(tab.url + " is loaded"); } function logactivate(tab) { console.log(tab.url + " is activated"); } function logdeactivate(tab) { console.log(tab.url + " is deactivated"); } function logclose(tab) { console.log(tab.url + " is closed"); }...
... onpageshow function a callback function that will be registered for the 'pageshow' event.
... pageshow the pageshow event is emitted when the page for a tab's content is loaded.
...And 3 more matches

widget - Archive of obsolete content
("sdk/self").data; require("sdk/widget").widget({ id: "my-widget", label: "my widget", contenturl: data.url("my-content.html") }); this widget contains an entire web page: require("sdk/widget").widget({ id: "hello-display", label: "my hello widget", content: "hello!", width: 50 }); widgets are quite small by default, so this example used the width property to grow it in order to show all the text.
... to show the difference, convert the player add-on above to use normal page scripts instead of content scripts.
...if you assign the panel to the widget after construction, the panel can still be shown but will not be anchored to the widget: data = require("sdk/self").data var clockpanel = require("sdk/panel").panel({ width:215, height:160, contenturl: data.url("clock.html") }); widget = require("sdk/widget").widget({ id: "open-clock-btn", label: "clock", contenturl: data.url("history.png") }); widget.panel = clockpanel; // will not be anchored widget.panel.show(); also, if y...
...And 3 more matches

Displaying annotations - Archive of obsolete content
if it finds any it binds functions to that element's mouseenter and mouseleave events to send messages to the main module, asking it to show or hide the annotation.
... the complete content script is here: self.on('message', function onmessage(annotations) { annotations.foreach( function(annotation) { if(annotation.url == document.location.tostring()) { createanchor(annotation); } }); $('.annotated').css('border', 'solid 3px yellow'); $('.annotated').bind('mouseenter', function(event) { self.port.emit('show', $(this).attr('annotation')); event.stoppropagation(); event.preventdefault(); }); $('.annotated').bind('mouseleave', function() { self.port.emit('hide'); }); }); function createanchor(annotation) { annotationanchorancestor = $('#' + annotation.ancestorid); annotationanchor = $(annotationanchorancestor).parent().find( ':contains(' + annotation.anchort...
...the main function, add the code to create the matcher: var matcher = pagemod.pagemod({ include: ['*'], contentscriptwhen: 'ready', contentscriptfile: [data.url('jquery-1.4.2.min.js'), data.url('matcher.js')], onattach: function(worker) { if(simplestorage.storage.annotations) { worker.postmessage(simplestorage.storage.annotations); } worker.port.on('show', function(data) { annotation.content = data; annotation.show(); }); worker.port.on('hide', function() { annotation.content = null; annotation.hide(); }); worker.on('detach', function () { detachworker(this, matchers); }); matchers.push(worker); } }); when a new page is loaded the function assigned to onattach is called.
...And 3 more matches

Display a Popup - Archive of obsolete content
var text_entry = require("sdk/panel").panel({ contenturl: data.url("text-entry.html"), contentscriptfile: data.url("get-text.js") }); // create a button require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); // show the panel when the user clicks the button.
... function handleclick(state) { text_entry.show(); } // when the panel is displayed it generated an event called // "show": we will listen for that event and when it happens, // send our own "show" event to the panel's script, so the // script can prepare the panel for display.
... text_entry.on("show", function() { text_entry.port.emit("show"); }); // listen for messages called "text-entered" coming from // the content script.
...And 3 more matches

Adding menus and submenus - Archive of obsolete content
« previousnext » the hello world example in the previous sections shows the two most common ways to add menus.
...choolchrome.greetingdialog.greetinglong(event);" /> <menuseparator /> <menuitem label="&xulschoolhello.greet.custom.label;" oncommand="xulschoolchrome.greetingdialog.greetingcustom(event);" /> </menupopup> </menu> </menubar> </toolbox> this code displays a simple menu with options for 3 different types of greetings, a menuseparator, and finally an option to show a custom greeting.
...instead of setting the menupopup directly in the xul, you can use the onpopupshowing event to fill the children when the popup is about to be displayed.
...And 3 more matches

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
but as the internet matures, this model has begun to show its age and its limitations.
...the second example shows a tabbed menu that dynamically loads news headlines into the current web page.
...but the real showcase for new browser features and web standards like html 4.0 and dom level 2, and xml are models like inner-browsing, where these technologies can begin to be used in the way that they were envisioned.
...And 3 more matches

Bookmark Keywords - Archive of obsolete content
however, the two should not be a case-sensitive match-- that is, if your keyword is av, then your title should be "av" or "av" or anything besides "av." (see bugzilla entry 119201 for details.) since this bookmark is intended to look up bugzilla entries, we'll call it "bz," as shown in figure 3.
... here's where the power starts to show up.
...you should end up with the result shown in figure 4, without the red highlighting.
...And 3 more matches

XUL Events - Archive of obsolete content
<menu> or a <menuitem> has been hovered or highlighted.dommenuiteminactivethe dommenuiteminactive event is executed when a <menu> or a <menuitem> in no longer hovered or highlighted.popuphiddenthe popuphidden event is executed when a <menupopup>, <panel> or <tooltip> has become hidden.popuphidingthe popuphiding event is executed when a <menupopup>, <panel> or <tooltip> is about to be hidden.popupshowingthe popupshowing event is executed when a <menupopup>, <panel> or <tooltip> is about to become visible.
... the default action of the event can be prevented to prevent the popup to appear.popupshownthe popupshown event is executed when a <menupopup>, <panel> or <tooltip> has become visible.radiostatechangethe radiostatechange event is executed when the state of a <radio> element has changed.valuechangethe valuechange event is executed when the value of an element, <progress> for example, has changed.
...this handler is usually used to dynamically set the commands on a menu when the user requests to display it, or you can use popupshowing event.
...And 3 more matches

Adding Event Handlers - Archive of obsolete content
next, we will show how to add scripts to it.
... by default the javascript console only shows errors from web content.
... to show errors in chrome javascript, it is necessary to change the preference javascript.options.showinconsole to true.
...And 3 more matches

Scratchpad - Archive of obsolete content
the featured video tutorial shows a case of using scratchpad with a page run by a local web server.
...you'll see the autocomplete box, as shown below: the icon next to each suggestion indicates the type, and the currently highlighted suggestion gets a popup with more information.
... inline documentation to show the inline documentation popup, press ctrl + shift + space when the cursor is on an identifier.
...And 3 more matches

Game monetization - Game development
advertisements instead of actively selling the games you can also try to get yourself a passive income — showing adverts and relying on previous activities related to promoting your game may benefit, but your game has to be addictive, which isn't as easy as it sounds.
... there are many companies offering advert systems — you sign up and allow them to show adverts in exchange for a percentage of the earnings.
...they offer easy to implement systems to show the adverts in your games and split the earnings with you.
...And 3 more matches

Fetching data from the server - Learn web development
request.send(); one problem with the example as it stands is that it won't show any of the poem when it first loads.
... to fix this, add the following two lines at the bottom of your code (just above the closing </script> tag) to load verse 1 by default, and make sure the <select> element always shows the correct value: updatedisplay('verse 1'); versechoose.value = 'verse 1'; serving your example from a server modern browsers will not run xhr requests if you just run the example from a local file.
... a more complex example to round off the article, we'll look at a slightly more complex example that shows some more interesting uses of fetch.
...And 3 more matches

A first splash into JavaScript - Learn web development
example — guess the number game in this article we'll show you how to build up the simple game you can see below: top hidden code <!doctype html> <html> <head> <meta charset="utf-8"> <title>number guessing game</title> <style> html { font-family: sans-serif; } body { width: 50%; max-width: 800px; min-width: 480px; margin: 0 auto; } .lastr...
...then we can try typing in the examples shown below — type in each one from the "example" columns exactly as shown, pressing return/enter after each one, and see what results they return.
... line 6 appends the current userguess value onto the end of the guesses paragraph, plus a blank space so there will be a space between each guess shown.
...And 3 more matches

What is JavaScript? - Learn web development
dynamic versus static code the word dynamic is used to describe both client-side javascript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required.
...creating a new html table, filling it with data requested from the server, then displaying the table in a web page shown to the user.
... a web page with no dynamically updating content is referred to as static — it just shows the same content all the time.
...And 3 more matches

Componentizing our React app - Learn web development
in this article we will show you a sensible way to break our app up into components.
... objective: to show a sensible way of breaking our todo list app into components.
... </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">{props.name}</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">{props.name}</span> </button> </div> </li> ); } now your browser should show three unique tasks.
...And 3 more matches

Dynamic behavior in Svelte: working with variables and props - Learn web development
let's start by showing a status message.
...when a todo item's delete button is pressed, the relevant todo is removed from the todos array, and the ui updates to no longer show it.
...update it like this: <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === 'all'} aria-pressed={filter === 'all'} on:click={()=> filter = 'all'} > <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === 'active'} aria-pressed={filter === 'active'} on:click={()=> filter = 'active'} > <span class="visually-hidden">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class...
...And 3 more matches

Mozilla’s UAAG evaluation report
(p2) g menus indicate accesskey and accelerator configurations accelerators not show in button tooltips guideline 8.
...(p2) p can turn off scripting, but then no event processing is available 9.6 show event handlers.
...(p1) vg provides a focus outline box highlights follow graphical rendering conventions for windows does not highlight selected images we do not have the ability to show a border around the text selection we have the following focus appearance prefs that are not exposed in the ui, but can be manually inserted in the user's prefs.js file: setboolpref("browser.display.use_focus_colors", usefocuscolors); /* true or false */ setcharpref("browser.display.focus_background_color", colorstring); /* for example #ffeedd or the name of a color */ setcharpref...
...And 3 more matches

Accessible Toolkit Checklist
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.
...this can be supported through spi_getkeyboardcues and spi_getmenuunderlines simple widgets buttons tab, arrow, unmodified letter mnemonics require and support text labels for buttons with images, can be same as tooltip space key activates button enter key activates focused button (thus current button, not default button shows dark border when a different button is focused) when button has a popup available by clicking on it, the enter key or space bar should also activate the popup toolbars and toolbar buttons are not focusable, but we should expose the tooltip.
...ability to define in xml enter key fires it, but not when another widget has focus that needs the enter key layout engine - drawing dark border dynamically when the currently focused widget does not need the enter key events - making keystrokes do the right thing msaa support (default state) links enter key activates link (thus default button no longer shows dark border when link is focused) msaa support, including linked and traversed states, and accessible value that holds destination url text fields - single and multiple line it's probably best to use native widgets for these, otherwise accessibility support will be quite difficult tab should always focus the next item, not insert a tab, unless there's a really go...
...And 3 more matches

PromiseWorker.jsm
here is a simple demo showing how to transfer the second argument to a worker: github:: promiseworker transfer data line 23.
... the command outline below this shows how to do the same with meta syntax.
... this example shows how to transfer a single value, which is an arraybuffer.
...And 3 more matches

Activity Monitor, Battery Status Menu and top
activity monitor this is a built-in os x tool that shows real-time process measurements.
...they can all be customized to show any of the available measurements (by right-clicking on the column strip) but only the "energy" tab groups child processes with parent processes, which is useful, so it's the best one to use.
... the following screenshot shows a customized "energy" tab.
...And 3 more matches

TimerFirings logging
the following sample shows the basics of this output.
... the above example shows only timers from c++ within gecko.
... there are also timers for settimer or setinterval calls in javascript code, as the following sample shows.
...And 3 more matches

powermetrics
the following command encompasses the most useful ones: sudo powermetrics --samplers tasks --show-process-coalition --show-process-gpu -n 1 -i 5000 --samplers tasks tells it to just do per-process measurements.
... --show-process-coalition tells it to group coalitions of related processes, e.g.
... --show-process-gpu tells it to show per-process gpu measurements.
...And 3 more matches

Gecko Roles
role_progressbar represents a progress bar, dynamically showing the user the percent complete of an operation in progress.
...may use the directory pane to show the contents of a directory.
... role_password_text a text object uses for passwords, or other places where the text content is not shown visibly to the user.
...And 3 more matches

Accessing the Windows Registry Using XPCOM
this article will show you how to use the available interfaces in several mozilla products.
... a simple example here's a simple example showing how to read your windows productid: var wrk = components.classes["@mozilla.org/windows-registry-key;1"] .createinstance(components.interfaces.nsiwindowsregkey); wrk.open(wrk.root_key_local_machine, "software\\microsoft\\windows\\currentversion", wrk.access_read); var id = wrk.readstringvalue("productid"); wrk.close(); this example, while simple, shows s...
...you can read the interface documentation for a full explanation, but we will show only the three most commonly used modes here: access_read — for reading values, enumerating keys, and receiving notifications access_write — for setting values and creating sub keys access_all — access for all operations in addition to open() and create(), there are the openchild() and createchild() methods.
...And 3 more matches

inIDOMUtils
.inidomutils); method overview void addpseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); void clearpseudoclasslocks(in nsidomelement aelement); [implicit_jscontext] jsval colornametorgb(in domstring acolorname); nsiarray getbindingurls(in nsidomelement aelement); nsidomnodelist getchildrenfornode(in nsidomnode anode, in boolean ashowinganonymouscontent); unsigned long long getcontentstate(in nsidomelement aelement); void getcsspropertynames([optional] in unsigned long aflags, [optional] out unsigned long acount, [retval, array, size_is(acount)] out wstring aprops); nsisupportsarray getcssstylerules(in nsidomelement aelement, [optional] in domstring apseudo); nsidomnode getparentfornode(in...
... nsidomnode anode, in boolean ashowinganonymouscontent); unsigned long getruleline(in nsidomcssstylerule arule); unsigned long getrulecolumn(in nsidomcssstylerule arule); unsigned long getselectorcount(in nsidomcssstylerule arule); astring getselectortext(in nsidomcssstylerule arule, in unsigned long aselectorindex); unsigned long long getspecificity(in nsidomcssstylerule arule, in unsigned long aselectorindex); nsidomfontfacelist getusedfontfaces(in nsidomrange arange); bool haspseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); boolean isignorablewhitespace(in nsidomcharacterdata adatanode); bool isinheritedproperty(in astring apropertyname); void parsestylesheet(in nsidomcssstyleshe...
... nsidomnodelist getchildrenfornode( in nsidomnode anode, in boolean ashowinganonymouscontent ); parameters anode a dom node for which to retrieve the style nodes.
...And 3 more matches

nsIAccessibleRole
role_progressbar 48 represents a progress bar, dynamically showing the user the percent complete of an operation in progress.
...may use the directory pane to show the contents of a directory.
... role_password_text 82 a text object uses for passwords, or other places where the text content is not shown visibly to the user.
...And 3 more matches

Address Book examples
note that * this does not make acard's photo appear in the contact editor - * this is left to the onshow function.
... * * onshow: function(acard, adocument, atargetid): * called when the editor wants to show this photo type.
... * the onshow method should take the input fields in the document, * and render the requested photo in the img tag with id * atargetid.
...And 3 more matches

Index
address book examples show how to perform various tasks and provide code snippets.
... 13 autoconfig: how to create a configuration file autoconfiguration, thunderbird authoritative definition 14 autoconfiguration in thunderbird moved to autoconfiguration 15 buddy icons in mail seth spitzer mozilla is now able to show icons in the message header area and the addressbook card pane.
... for the message pane, the icon we will show is on disk at: <profile home>/nim/<value of pref aim.session.screenname>/picture/<screenname for sender email address>.gif when trying to determine the screenname for the sender, we search the addressbook that we are using for collection.
...And 3 more matches

Demo Addon
it shows how to achieve various goals in a working live example, such as working with gloda.
...afterwards, just click that button to show the demo overview.
...only the interesting parts are shown, it's recommended that you download the add-on and have a look at its files.
...And 3 more matches

about:debugging (before Firefox 68) - Firefox Developer Tools
whether or not system add-ons appear in the list on this page depends on the setting of the devtools.aboutdebugging.showsystemaddons preference.
... before firefox 48 if you change files that are loaded on demand, like content scripts or popups, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.
... firefox 48 onwards from firefox 48 onwards: as before: if you change files that are loaded on demand, like content scripts or popups, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.
...And 3 more matches

about:debugging - Firefox Developer Tools
your device should show a popup to authorize your computer to connect to it — accept this and then click the refresh devices button again.
...when you do, it is added to the network locations list along with the devices, as shown below: this firefox the this firefox tab combines the features of extensions, tabs, and workers into a single tab with the following sections: temporary extensions displays a list of the extensions that you have loaded using the load temporary add-on button.
... whether internal extensions appear in the list on this page depends on the setting of the devtools.aboutdebugging.showhiddenaddons preference.
...And 3 more matches

AddressErrors - Web APIs
examples snippet: limiting destination countries this first example is just a snippet showing an implementation of the event handler for the shippingaddresschange event which checks to be sure the chosen address is located within one of a limited number of countries.
... request.onshippingaddresschange = handleaddresschange; // call show() to trigger the browser's payment flow.
... request.show().then(function(instrumentresponse) { // do something with the response from the ui.
...And 3 more matches

HTML Drag and Drop API - Web APIs
identify what is draggable making an element draggable requires adding the draggable attribute and the ondragstart global event handler, as shown in the following code sample: <script> function dragstart_handler(ev) { // add the target element's id to the data transfer object ev.datatransfer.setdata("text/plain", ev.target.id); } window.addeventlistener('domcontentloaded', () => { // get the element by id const element = document.getelementbyid("p1"); // add the ondragstart event listener element.addeventli...
...the setdata() method is used to add an item to the drag data, as shown in the following example.
...however, an application may define a custom image with the setdragimage() method, as shown in the following example.
...And 3 more matches

PaymentResponse.retry() - Web APIs
typically you will use this by calling show(), then entering a loop or recursive function that checks the paymentresponse for errors or other reasons to retry the payment request.
... see the example below for a thorough example, but the basic concept, in outline form, is: create a new paymentrequest (new paymentrequest()) display the payment request (paymentrequest.show() if show() resolves, the returned paymentresponse describes the requested payment and the options chosen by the user.
... if show() is rejected, the payment request failed, usually because either there's already one being processed, because the user agent doesn't support any of the specified payment methods, or because of a security issue.
...And 3 more matches

Using the User Timing API - Web APIs
this document shows how to create mark and measure performance entry types and how to use user timing methods (which are extensions of the performance interface) to retrieve and remove entries from the browser's performance timeline.
...the method takes one argument, the name of the mark, as shown in the following example.
...the following examples shows how to use each of these methods (performance.getentries(), performance.getentriesbytype(entrytype), and performance.getentriesbyname(name, entrytype) ) to retrieve one or more marks.
...And 3 more matches

Using DTMF with WebRTC - Web APIs
a <div> to receive and display log text to show status information.
...these will be initialized when the call starts up, in our connectanddial() function, as shown in starting the connection process below.
...this will be obtained while setting up the connection, in the gotstream() function shown in adding the audio to the connection.
...And 3 more matches

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
some screen readers can even show information on a refreshable braille display.
...the accessible event watcher shows what accessible events are being generated by a given piece of software.
... the accessible explorer and inspect object tools show the tree of data nodes the accessible object is exposing through com, and what the screen boundaries of each object are.
...And 3 more matches

Consistent list indentation - CSS: Cascading Style Sheets
it hangs alone in the void, simple and unadorned, as shown in figure 1.
...if we add two more list items, we get a result like that shown in figure 2.
...since that parent has no padding or margins yet, we get the situation shown in figure 3.
...And 3 more matches

<input type="image"> - HTML: Hypertext Markup Language
additional attributes in addition to the attributes shared by all <input> elements, image button inputs support the following attributes: attribute description alt alternate string to display when the image can't be shown formaction the url to which to submit the data formenctype the encoding method to use when submitting the form data formmethod the http method to use when submitting the form formnovalidate a boolean which, if present, indicates that the form shouldn't be validated before submission formtarget a string indicating a browsing context from...
... where to load the results of submitting the form height the height, in css pixels, at which to draw the image src the url from which to load the image width the width, in css pixels, at which to draw the image alt the alt attribute provides an alternate string to use as the button's label if the image cannot be shown (due to error, a user agent that cannot or is configured not to show images, or if the user is using a screen reading device).
... for example, if you have a graphical button that shows an image with an icon and/or image text "login now", you should also set the alt attribute to something like login now.
...And 3 more matches

Paths - SVG: Scalable Vector Graphics
note, though, that it wouldn't show up if a path was just drawn normally.
... an example of this syntax is shown below, and in the figure to the left the specified control points are shown in red, and the inferred control point in blue.
...this is best explained with an example: <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 315 l 110 215 a 30 50 0 0 1 162.55 162.45 l 172.55 152.45 a 30 50 -45 0 1 215.1 109.9 l 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> </svg> the example shows a <path> element that goes diagonally across the page.
...And 3 more matches

Classes and Inheritance - Archive of obsolete content
we will show how to define classes using constructors, and how to use prototypes to efficiently define member functions on each instance.
...we will show how to make inheritance work correctly with respect to constructors, prototypes, and the instanceof operator, and how to override methods in subclasses.
...the last section shows how to work with the class constructor.
...And 2 more matches

Modules - Archive of obsolete content
we will show how to do each of these things using the built-in components object provided by xulrunner application such as firefox and thunderbird.
...we will show how sandboxes and compartments can be used to improve security in our module system.
...we show how to create your own custom loaders, using the loader constructor provided by the sdk.
...And 2 more matches

Storing annotations - Archive of obsolete content
tor, we create and store the new annotation: var annotationeditor = panels.panel({ width: 220, height: 220, contenturl: data.url('editor/annotation-editor.html'), contentscriptfile: data.url('editor/annotation-editor.js'), onmessage: function(annotationtext) { if (annotationtext) handlenewannotation(annotationtext, this.annotationanchor); annotationeditor.hide(); }, onshow: function() { this.postmessage('focus'); } }); listing stored annotations to prove that this works, let's implement the part of the add-on that displays all the previously entered annotations.
... this is implemented as a panel that's shown in response to the widget's right-click message.
... var annotationlist = panels.panel({ width: 420, height: 200, contenturl: data.url('list/annotation-list.html'), contentscriptfile: [data.url('jquery-1.4.2.min.js'), data.url('list/annotation-list.js')], contentscriptwhen: 'ready', onshow: function() { this.postmessage(simplestorage.storage.annotations); }, onmessage: function(message) { require('sdk/tabs').open(message); } }); since this panel's content script uses jquery we will pass that in too: again, make sure the name of it matches the version of jquery you downloaded.
...And 2 more matches

Creating Reusable Modules - Archive of obsolete content
= require("chrome"); function promptforfile() { const nsifilepicker = ci.nsifilepicker; var fp = cc["@mozilla.org/filepicker;1"] .createinstance(nsifilepicker); var window = require("sdk/window/utils").getmostrecentbrowserwindow(); fp.init(window, "select a file", nsifilepicker.modeopen); fp.appendfilters(nsifilepicker.filterall | nsifilepicker.filtertext); var rv = fp.show(); if (rv == nsifilepicker.returnok || rv == nsifilepicker.returnreplace) { var file = fp.file; // get the path as string.
...join(""); return s; } function promptforfile() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); const nsifilepicker = ci.nsifilepicker; var fp = cc["@mozilla.org/filepicker;1"] .createinstance(nsifilepicker); fp.init(window, "select a file", nsifilepicker.modeopen); fp.appendfilters(nsifilepicker.filterall | nsifilepicker.filtertext); var rv = fp.show(); if (rv == nsifilepicker.returnok || rv == nsifilepicker.returnreplace) { var file = fp.file; // get the path as string.
... } return path; } require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png" }, onclick: function() { console.log(md5file(promptforfile())); } }); this works , but index.js is now getting longer and its logic is harder to understand.
...And 2 more matches

Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
parameters are as shown in table 1.
...when you run it, you should see a red bar, showing that it failed.
...you should see a green bar showing that the test succeeded.
...And 2 more matches

Images, Tables, and Mysterious Gaps - Archive of obsolete content
first a basic line box containing text, shown in figure 3.
...figure 4 shows what happens when we add an image to the mix.
... the thin red line shows that the single-pixel spacer gif is now only making the cell one pixel tall, as the designer intended.
...And 2 more matches

Simple Storage - Archive of obsolete content
istently stores some data: jetpack.future.import("storage.simple");var mystorage = jetpack.storage.simple;mystorage.fribblefrops = [1, 3, 3, 7];mystorage.heimelfarbs = { bar: "baz" }; and this code -- pretend it's in the same jetpack as the code above -- simply uses that data: mystorage.fribblefrops.foreach(function (elt) console.log(elt));var bar = mystorage.heimelfarbs.bar;jetpack.notifications.show(bar.baz); that's all there is to it!
...all notes are shown in the tools menu.
... if there are no notes, we'll show a// disabled "(empty)" menuitem.function updatejetpackmenu() { jetpack.menu.set({ label: "notes", menu: new jetpack.menu(notes.length > 0 ?
...And 2 more matches

Simple Storage - Archive of obsolete content
ly stores some data: jetpack.future.import("storage.simple"); var mystorage = jetpack.storage.simple; mystorage.fribblefrops = [1, 3, 3, 7]; mystorage.heimelfarbs = { bar: "baz" }; and this code -- pretend it's in the same jetpack as the code above -- simply uses that data: mystorage.fribblefrops.foreach(function (elt) console.log(elt)); var bar = mystorage.heimelfarbs.bar; jetpack.notifications.show(bar.baz); that's all there is to it!
...all notes are shown in the tools menu.
... if there are no notes, we'll show a // disabled "(empty)" menuitem.
...And 2 more matches

More Button Features - Archive of obsolete content
an example is shown below.
...example 3 : source view <button label="left" image="happy.png"/> <button label="right" image="happy.png" dir="reverse"/> <button label="above" image="happy.png" orient="vertical"/> <button label="below" image="happy.png" orient="vertical" dir="reverse"/> the example here shows all four types of alignment of buttons.
...the image to the right shows the difference.
...And 2 more matches

toolbar - Archive of obsolete content
when set to false, the default, the grippy will be shown.
... icons show only icons.
... text show only text.
...And 2 more matches

Application Update - Archive of obsolete content
application settings you will need to configure the following settings in your application: branding the update process uses branding information, setup branding for your application as described here: xulrunner tips icons the updater process for linux systems requires updater.png to be in your <application folder>/icons/, see https://bugzilla.mozilla.org/show_bug.cgi?id=706846 preferences // whether or not app updates are enabled pref("app.update.enabled", true); // this preference turns on app.update.mode and allows automatic download and // install to take place.
...) default=1 day pref("app.update.nagtimer.download", 86400); // interval: time before prompting the user to restart to install the latest // download (in seconds) default=30 minutes pref("app.update.nagtimer.restart", 1800); // interval: when all registered timers should be checked (in milliseconds) // default=5 seconds pref("app.update.timer", 600000); // whether or not we show a dialog box informing the user that the update was // successfully applied.
... this is off in firefox by default since we show a // upgrade start page instead!
...And 2 more matches

2006-10-13 - Archive of obsolete content
discussions everyone and his goldfish thinks bug 300198 should be fixed large response to the discussion about the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=300198, regarding middle clicking on a tab.
... user questions about a open/saveas bug that already exisits: https://bugzilla.mozilla.org/show_bug.cgi?id=347230 installer for 2.0rc2 ehume gives the developers a thumbs up for the new installer for 2.0rc2 having a textfield where you can type in the installation directory.
... firefox browser problem: width:30ex does not respect font discussion about a font rendering problem with firefox print on the firefox context menu user would like discussion about why the bug https://bugzilla.mozilla.org/show_bug.cgi?id=204519 is a wontfix.
...And 2 more matches

What is RSS - Archive of obsolete content
blow.example.net/log/19</link> </item> <item> <title>black cat spotted</title> <guid>http://joe-blow.example.net/log/18</guid> <pubdate>fri, 13 may 2005 13:13:13 -0500</pubdate> <link>http://joe-blow.example.net/log/18</link> </item> </channel> </rss> those who create internet radio use rss to allow users to access their shows.
... those who create internet television use rss to allow users to access their shows.
... for example: <?xml version="1.0"?> <rss version="2.0"> <channel> <title>kate's iptv show</title> <description>watch it or else!
...And 2 more matches

Square tilemaps implementation: Scrolling maps - Game development
the camera the camera is an object that holds information about which section of the game world or level is currently being shown.
...static maps: partial tiles might be shown.
... todo: show a diagram here explaining this.
...And 2 more matches

HTML: A good basis for accessibility - Learn web development
note: it is a good idea to have a screen reader set up on your local computer so that you can do some testing of the examples shown below.
...use it only if you really need to, for example, if the layout shows things in a very different visual order to the source code, and you want to make things work more logically.
...the following screenshot shows our controls being listed by voiceover on mac.
...And 2 more matches

HTML: A good basis for accessibility - Learn web development
note: it is a good idea to have a screen reader set up on your local computer so that you can do some testing of the examples shown below.
...use it only if you really need to, for example, if the layout shows things in a very different visual order to the source code, and you want to make things work more logically.
...the following screenshot shows our controls being listed by voiceover on mac.
...And 2 more matches

Practical positioning examples - Learn web development
this article shows how to build some real world examples to illustrate what kinds of things you can do with positioning.
... note: some web developers take things even further, only having one page of information loaded at once, and dynamically changing the information shown using a javascript feature such as xmlhttprequest.
... a sliding hidden panel the final example we'll present here is a panel that slides on and off the screen at the press of an icon — as mentioned earlier, this is popular for situations like mobile layouts, where the available screen spaces is small, so you don't want to use up most of it by showing a menu or info panel instead of the useful content.
...And 2 more matches

Responsive design - Learn web development
for example, it might be nice to have a square image for mobile, but show the same scene as a landscape image on desktop.
... or, acknowledging the smaller size of an image on mobile you might want to show a different image altogether, one which is more easily understood at a small screen size.
... as this approach to typography shows, you do not need to restrict media queries to only changing the layout of the page.
...And 2 more matches

UI pseudo-classes - Learn web development
note: this also shows how you can combine a pseudo-class and pseudo-element if required.
...because the :out-of-range rule appears later in the source code than the :required rule, the cascade rules come into play, and the out of range message is shown.
... this works quite nicely — when the page first loads, "required" is shown, along with a red cross and border.
...And 2 more matches

Making asynchronous programming easier with async and await - Learn web development
this example expands on the first version of the code we showed above: async function myfetch() { try { let response = await fetch('coffee.jpg'); if (!response.ok) { throw new error(`http error!
...it response.blob(); let objecturl = url.createobjecturl(myblob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); } } catch(e) { console.log(e); } } myfetch(); the catch() {} block is passed an error object, which we've called e; we can now log that to the console, and it will give us a detailed error message showing where in the code the error was thrown.
... if you wanted to use the second (refactored) version of the code that we showed above, you would be better off just continuing the hybrid approach and chaining a .catch() block onto the end of the .then() call, like this: async function myfetch() { let response = await fetch('coffee.jpg'); if (!response.ok) { throw new error(`http error!
...And 2 more matches

Video and Audio APIs - Learn web development
this article shows you how to do common tasks such as creating custom playback controls.
...as we showed in video and audio content, a typical implementation looks like this: <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video.
... each <button> has a class name, a data-icon attribute for defining what icon should be shown on each button (we'll show how this works in the below section), and an aria-label attribute to provide an understandable description of each button, since we're not providing a human-readable label inside the tags.
...And 2 more matches

Inheritance in JavaScript - Learn web development
previous overview: objects next with most of the gory details of oojs now explained, this article shows how to create "child" object classes (constructors) that inherit features from their "parent" classes.
...in this section we'll convert the person and teacher examples from prototypal inheritance to classes, to show you how it's done.
...at this point: to show the current value of the _subject property of the snape object we can use the snape.subject getter method.
...And 2 more matches

Introduction to the server side - Learn web development
static sites the diagram below shows a basic web server architecture for a static site (a static site is one that returns the same hard-coded content from the server whenever a particular resource is requested).
... the diagram below shows a simple architecture for a dynamic website.
... requests for dynamic resources are instead forwarded (2) to server-side code (shown in the diagram as a web application).
...And 2 more matches

Routing in Ember - Learn web development
but now we need a way to differentiate between each of these routes, so that they show what they are supposed to show.
...ute extends route { @service('todo-data') todos; model() { let todos = this.todos; return { get alltodos() { return todos.all; } } } } we can now update the todomvc/app/templates/index.hbs file so that when it includes the <todolist /> component, it does so explicitly with the available model, calling its alltodos() getter to make sure all of the todos are shown.
...('todo-data') todos; model() { let todos = this.todos; return { get completedtodos() { return todos.completed; } } } } we can now update the todomvc/app/templates/completed.hbs file so that when it includes the <todolist /> component, it does so explicitly with the available model, calling its completedtodos() getter to make sure only the completed todos are shown.
...And 2 more matches

React interactivity: Editing, filtering, conditional rendering - Learn web development
we want the default filter to be all because all of our tasks should be shown initially: const [filter, setfilter] = usestate('all'); defining our filters our goal right now is two-fold: each filter should have a unique name.
... at the top of app.js, beneath our imports but above our app() function, let's add an object called filter_map: const filter_map = { all: () => true, active: task => !task.completed, completed: task => task.completed }; the values of filter_map are functions that we will use to filter the tasks data array: the all filter shows all tasks, so we return true for all tasks.
... the active filter shows tasks whose completed prop is false.
...And 2 more matches

Componentizing our Svelte app - Learn web development
add the following content into the file: <script> export let filter = 'all' </script> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === 'all'} aria-pressed={filter === 'all'} on:click={()=> filter = 'all'} > <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === 'active'} aria-pressed={filter === 'active'} on:click={()=> filter = 'active'} > <span class="visually-hidden">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class...
...:btn__primary={filter === 'completed'} aria-pressed={filter === 'completed'} on:click={()=> filter = 'completed'} > <span class="visually-hidden">show</span> <span>completed</span> <span class="visually-hidden">tasks</span> </button> </div> back in our todos.svelte component, we want to make use of our filterbutton component.
...when entering editing mode we'll show an <input> field to allow us to edit the current todo name, with two buttons to confirm or cancel our changes.
...And 2 more matches

Implementing feature detection - Learn web development
therefore, you can detect whether the browser supports geolocation or not by using something like the following: if ("geolocation" in navigator) { navigator.geolocation.getcurrentposition(function(position) { // show the location on a map, perhaps using the google maps api }); } else { // give the user a choice of static maps instead perhaps } it is probably better to use an established feature detection library however, rather than writing your own all the time.
...the example shown is a way of detecting html5 canvas support.
... update your <link> element in your html so it points to the correct css file (you should also update your <title> element to something more suitable!): <link href="modernizr-css.css" rel="stylesheet"> above this <link> element, add a <script> element to apply the modernizr library to the page, as shown below.
...And 2 more matches

L10n Checks
you pass both paths to the files, e.g.: check-l10n-completeness -i file en-us.dtd my.dtd the output the output of l10n checks shows the missing and obsolete strings in a pseudo-diff format.
... ab-cd browser chrome/browser browser.dtd +backforwardmenu.tooltip +fullzoomenlargecmd.commandkey3 +fullzoomreducecmd.commandkey2 +fullzoomresetcmd.commandkey2 +organizebookmarks.label -showallbookmarkscmd2.label migration/migration.dtd -importfromfile.accesskey -importfromfile.label +importfromhtmlfile.accesskey +importfromhtmlfile.label you can assume changed strings when you see entities removed and added with a similar name.
... the file names will be shown in a hierarchical form, so in the example above, your files are browser.dtd in ab-cd/browser/chrome/browser and migration.dtd in another directory level deeper.
...And 2 more matches

Mozilla Web Developer FAQ
when the alternative text is shown in a tooltip, some authors write bad alt texts, because they intend the text as auxiliary tooltip text and not as a replacement for the image.
... (‘bad’ in the sense that the textual alternative is less useful for people who don’t see the image.) when the alternative text is shown in a tooltip, other authors don’t want to supply textual alternatives at all, because they don’t want tooltips to appear.
... (again, making things harder for people who don’t see the image.) there is another attribute that mozilla shows as a tooltip: title.
...And 2 more matches

Localization Use Cases
in all presented examples, we try to show the existing code, explain the problem from the localizers' or developers' perspective, and suggest a solution.
...first, there is devicestoragehelper.showformatedsize (sic): function showformatedsize(element, l10nid, size) { if (size === undefined || isnan(size)) { element.textcontent = ''; return; } // kb - 3 kb (nearest ones), mb, gb - 1.2 mb (nearest tenth) var fixeddigits = (size < 1024 * 1024) ?
...treadablefilesize(size, fixeddigits); var _ = navigator.mozl10n.get; element.textcontent = _(l10nid, { size: sizeinfo.size, unit: _('byteunit-' + sizeinfo.unit) }); } the function is used like so: // application storage updateappfreespace: function storage_updateappfreespace() { var self = this; this.getfreespace(this.appstorage, function(freespace) { devicestoragehelper.showformatedsize(self.appstoragedesc, 'availablesize', freespace); }); }, problem definition for all values of freespace, the following string is enough to construct a grammatically-correct sentence in english: availablesize = {{$size}} {{$unit}} available however, other languages might need to pluralize this string with different forms of the available adjective.
...And 2 more matches

NSS Sample Code Sample1
this program shows the following: rsa key pair generation naming rsa key pairs looking up a previously generated key pair by name creating aes and mac keys (or encryption and mac keys in general) wrapping symmetric keys using your own rsa key pair so that they can be stored on disk or in a database.
... as an alternative to token symmetric keys as a way to store large numbers of symmetric keys wrapping symmetric keys using an rsa key from another server unwrapping keys using your own rsa key pair the main part of the program shows a typical sequence of events for two servers that are trying to extablish a shared key pair.
...sample code #include <iostream.h> #include "pk11pub.h" #include "keyhi.h" #include "nss.h" // key management for keys share among multiple hosts // // this example shows how to use nss functions to create and // distribute keys that need to be shared among multiple servers // or hosts.
...And 2 more matches

XForms Accessibility
instance node states are mapped to accessibility state constants declared in nsiaccessiblestates interface like it shown below: relevant - state_unavailable readonly - state_readonly required - state_required invalid - state_invalid out of range - state_invalid attributes redefines datatype aria attribute.
... input a key xforms element to show and change the instance data to which it is bound (see the spec, the docs).
... textarea serves to show/change multiline text (see the spec, the docs).
...And 2 more matches

An Overview of XPCOM
nsisupports, shown below, supplies the basic functionality for dealing with interface discovery and reference counting.
...the nsisupports interface is shown below: the nsisupports interface class sample: public nsisupports { private: nsrefcnt mrefcnt; public: sample(); virtual ~sample(); ns_imethod queryinterface(const nsiid &aiid, void **aresult); ns_imethod_(nsrefcnt) addref(void); ns_imethod_(nsrefcnt) release(void); }; the various types used in the interface are described in the xpcom types section below.
... a complete (if spare) implementation of the nsisupports interface is shown below.
...And 2 more matches

Starting WebLock
the observer interfaces the above figure shows the observer service maintaining a list of all registered nsiobserver objects.
... the next section shows the interface of the weblock component, iweblock, in xpidl.
...this kind of implementation does not exist, but this expandability shows some of the flexibility that interface-based programming can provide.
...And 2 more matches

nsIDOMNSHTMLDocument
inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void captureevents(in long eventflags); void clear(); boolean execcommand(in domstring commandid, in boolean doshowui, in domstring value); boolean execcommandshowhelp(in domstring commandid); obsolete since gecko 14.0 domstring getselection(); nsidomdocument open(in acstring acontenttype, in boolean areplace); boolean querycommandenabled(in domstring commandid); boolean querycommandindeterm(in domstring commandid); boolean querycommandstate(in domstring co...
...execcommand() boolean execcommand( in domstring commandid, in boolean doshowui, in domstring value ); parameters commandid the name of the command to execute.
... doshowui this is not implemented in gecko.
...And 2 more matches

nsIMacDockSupport
cksupport); var win = services.wm.getmostrecentwindow('navigator:browser'); var macmenu = win.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menupopup'); macmenu.setattribute('id', 'mymacmenu'); var macmenuitem = win.document.createelementns('http://www.mozilla.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('mainp...
...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(dockmenuelement); docksupport.dockmenu = nativemenu; this replaces the default menu with this one menuitem that says "show most recent window".
...the result of this code is shown below.
...And 2 more matches

nsIWebBrowserChrome
inherits from: nsisupports last changed in gecko 0.9.6 method overview void destroybrowserwindow(); void exitmodaleventloop(in nsresult astatus); boolean iswindowmodal(); void setstatus(in unsigned long statustype, in wstring status); void showasmodal(); void sizebrowserto(in long acx, in long acy); attributes attribute type description chromeflags unsigned long the chrome flags for this browser chrome.
... the implementation should reflect the value of this attribute by hiding or showing its chrome appropriately.
...void exitmodaleventloop( in nsresult astatus ); parameters astatus the result code to return from showasmodal().
...And 2 more matches

WebIDL bindings
this will produce two files in dom/bindings in your objdir: myinterface-example.h and myinterface-example.cpp, which show a basic implementation of the interface using a class that inherits from nsisupports and has a wrapper cache.
...this means that accessing a content global via xrays will show [chromeonly] interface objects on it.
... see https://bugzilla.mozilla.org/show_bug.cgi?id=1333117 for details.
...And 2 more matches

UI Tour - Firefox Developer Tools
the name of the selected directory is shown at the top of the source list pane; clicking this name reverts the pane to showing all source items.
... outline view the outline view shows a tree for navigating the currently open file.
... source pane this shows the javascript file currently loaded.
...And 2 more matches

Memory - Firefox Developer Tools
it then provides a number of views of the heap that can show you which objects account for memory usage and exactly where in your code you are allocating memory.
... once you've taken a snapshot, there are three main views the memory tool provides: the tree map view shows memory usage as a treemap.
... the aggregate view shows memory usage as a table of allocated types.
...And 2 more matches

Allocations - Firefox Developer Tools
the allocations view in the performance tool shows you which functions in your page are allocating the most memory over the course of the profile.
... it includes the following columns: self count: the number of allocation-samples that were taken in this function (also shown as a percentage of the total) self bytes: the total number of bytes allocated in the allocation-samples in this function (also shown as a percentage of the total) rows are sorted by the "self bytes" column.
... gc events are shown as red markers in the waterfall view, and are a big red flag for responsiveness, sometimes running for hundreds of milliseconds: if you're seeing gc events in your site's performance profile, what can you do?
...And 2 more matches

Flame Chart - Firefox Developer Tools
the flame chart shows you the state of the javascript stack for your code at every millisecond during the performance profile.
... but while the call tree organizes this data to show you where your program is spending most time in aggregate across the recording, the flame chart uses it to show you when in the recording particular functions are executing.
... essentially it shows you the state of the call stack at any given point during the recording.
...And 2 more matches

Settings - Firefox Developer Tools
show split console adds a section at the bottom of the tools showing the console.
...the "select element" button is now always shown.
... if common preferences is not included in the settings, web console logs can be persisted by using the 'about:config' url in browser address bar, searching for: 'devtools.webconsole.persistlog' then toggling this value to true inspector show browser styles a setting to control whether styles applied by the browser (user-agent styles) should be displayed in the inspector's rules view.
...And 2 more matches

Examples of web and XML development using the DOM - Web APIs
example 1: height and width the following example shows the use of the height and width properties alongside images of varying dimensions: <!doctype html> <html lang="en"> <head> <title>width/height example</title> <script> function init() { var arrimages = new array(3); arrimages[0] = document.getelementbyid("image1"); arrimages[1] = document.getelementbyid("image2"); arrimages[2] = document.getelementbyid("image3"); var objoutput = document.getelementbyid("output"); var strhtml = "<ul>"; for (var i = 0; i < arrimages.length; i++) { strhtml += "<li>image" + ...
... getcomputedstyle() returns a computedcssstyledeclaration object, whose individual style properties can be referenced with this object's getpropertyvalue() method, as the following example document shows.
...it also shows a useful technique of using a for..in loop to iterate over the properties of an object to get their values.
...And 2 more matches

Using files from web applications - Web APIs
example: showing file(s) size the following example shows a possible use of the size property: <!doctype html> <html> <head> <meta charset="utf-8"> <title>file(s) size</title> </head> <body> <form name="uploadform"> <div> <input id="uploadinput" type="file" name="myfiles" multiple> selected files: <span id="filenum">0</span>; total size: <span id="filesize">0</span> </div> ...
...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.
... (as of time of writing, firefox doesn’t show this visual cue for <input type="file"> elements.) selecting files using drag and drop you can also let the user drag and drop files into your web application.
...And 2 more matches

HTMLDialogElement.open - Web APIs
true means it is set, and therefore the dialog is shown.
... false means it not set, and therefore the dialog is not shown.
... the property is now read only — it is possible to set the value to programmatically show or hide the dialog.
...And 2 more matches

Capabilities, constraints, and settings - Web APIs
getting the constraints in effect if at any time you need to fetch the set of constraints that are currently applied to the media, you can get that information by calling mediastreamtrack.getconstraints(), as shown in the example below.
... the html and css for this example are pretty simple, and aren't shown here.
...the actual settings the browser selected and is using are shown in the boxes on the right.
...And 2 more matches

Fundamentals of WebXR - Web APIs
this includes both managing the process of rendering the views needed to simulate the 3d experience and the ability to sense the movement of the headset or other motion sensing apparatus to provide the needed data to let you update the imagery shown to the user based on that movement.
... the drawing shown here demonstrates the concept of fov.
... diagram showing the movements possible with 3 degree of freedom hardware: yaw, roll, and pitch.
...And 2 more matches

window.location - Web APIs
location.reload(true); example #3 consider the following example, which will reload the page by using the replace() method to insert the value of location.pathname into the hash: function reloadpagewithhash() { var initialpage = location.pathname; location.replace('http://example.com/#' + initialpage); } example #4: display the properties of the current url in an alert dialog: function showloc() { var olocation = location, alog = ["property (typeof): value", "location (" + (typeof olocation) + "): " + olocation ]; for (var sprop in olocation){ alog.push(sprop + " (" + (typeof olocation[sprop]) + "): " + (olocation[sprop] || "n/a")); } alert(alog.join("\n")); } // in html: <button onclick="showloc();">show location properties</button> example #5: send a string of data to...
... example #6: using bookmarks without changing the hash property: <!doctype html> <html> <head> <meta charset="utf-8"/> <title>mdn example</title> <script> function shownode (onode) { document.documentelement.scrolltop = onode.offsettop; document.documentelement.scrollleft = onode.offsetleft; } function showbookmark (sbookmark, busehash) { if (arguments.length === 1 || busehash) { location.hash = sbookmark; return; } var obookmark = document.queryselector(sbookmark); if (obookmark) { shownode(obookmark); } } </script> <style> span.intlink { cursor:...
...praesent bibendum condimentum feugiat.</p> <p id="mybookmark1">[&nbsp;<span class="intlink" onclick="showbookmark('#mybookmark2');">go to bookmark #2</span>&nbsp;]</p> <p>vivamus blandit massa ut metus mattis in fringilla lectus imperdiet.
...And 2 more matches

Text labels and names - Accessibility
examples the following example show a simple image map (taken from h24: providing text alternatives for the area elements of image maps): <img src="welcome.gif" usemap="#map1" alt="areas in the library.
... examples the following example shows a simple dialog box, defined as such using role="dialog" and labelled using aria-labelledby.
...a descriptive title helps users of assistive technology understand what the element is showing.
...And 2 more matches

Border-image generator - CSS: Cascading Style Sheets
gin: 10px 0; } #toggle-gallery { width: 30px; height: 25px; margin: 10px; color: #fff; background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png'); background-repeat: no-repeat; background-position: top 4px center; background-color: #888888 !important; border-radius: 2px; float: left; } #toggle-gallery:hover { cursor: pointer; } #toggle-gallery[data-action='show'] { background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png'); background-color: #888888 !important; } #toggle-gallery[data-action='hide'] { background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png'); } .button { width: 100px; height: 25px; margin: 10px; color: #fff; text-align: center; font-size: 12px; line-height: 25px; backgroun...
...function getscale() { return scale/100; }; var togglegallery = function togglegallery() { var gallery = getelembyid('image-gallery'); var button = getelembyid('toggle-gallery'); var state = 1; button.addeventlistener('click', function() { state = 1 ^ state; if (state === 0) { gallery.setattribute('data-collapsed', 'true'); button.setattribute('data-action', 'show'); } else { gallery.removeattribute('data-collapsed'); button.setattribute('data-action', 'hide'); } }); }; var init = function init() { var gallery = getelembyid('image-gallery'); var browse = getelembyid('load-image'); var remote = getelembyid('remote-url'); var load_remote = getelembyid('load-remote'); remote.addeventlistener('change', function(){ ...
...dermanager.setprecision('unit-step', value); inputslidermanager.setstep('unit-step', step_option[value]); inputslidermanager.setmin('unit-step', step_option[value]); if (unit_topic) inputslidermanager.setprecision(unit_topic, value); }; var updateunitsettings = function updateunitsettings(value) { if (unit_topic) inputslidermanager.setstep(unit_topic, value); }; var show = function show(e) { var topic = e.target.getattribute('data-topic'); var precision = inputslidermanager.getprecision(topic); var step = inputslidermanager.getstep(topic); unit_topic = topic; title.textcontent = topic; panel.setattribute('data-active', 'true'); panel.style.top = e.target.offsettop - 40 + 'px'; panel.style.left = e.target.offsetleft + 30 + 'px'; input...
...And 2 more matches

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
the above example shows simple usage of the <audio> element.
... in a similar manner to the <img> element, we include a path to the media we want to embed inside the src attribute; we can include other attributes to specify information such as whether we want it to autoplay and loop, whether we want to show the browser's default audio controls, etc.
... the content inside the opening and closing <audio></audio> tags is shown as a fallback in browsers that don't support the element.
...And 2 more matches

<base>: The Document Base URL element - HTML: Hypertext Markup Language
target a keyword or author-defined name of the default browsing context to show the results of navigation from <a>, <area>, or <form> elements without explicit target attributes.
... the following keywords have special meanings: _self (default): show the result in the current browsing context.
... _blank: show the result in a new, unnamed browsing context.
...And 2 more matches

<input type="radio"> - HTML: Hypertext Markup Language
they are called radio buttons because they look and operate in a similar manner to the push buttons on old-fashioned radios, such as the one shown below.
...the value is never shown to the user by their user agent.
... selecting a radio button by default to make a radio button selected by default, you simply include checked attribute, as shown in this revised version of the previous example: <form> <p>please select your preferred contact method:</p> <div> <input type="radio" id="contactchoice1" name="contact" value="email" checked> <label for="contactchoice1">email</label> <input type="radio" id="contactchoice2" name="contact" value="phone"> <label for="contactchoice2">phone</label> <input type="ra...
...And 2 more matches

Object.defineProperty() - JavaScript
normal property addition through assignment creates properties which show up during property enumeration (for...in loop or object.keys method), whose values may be changed, and which may be deleted.
... enumerable true if and only if this property shows up during enumeration of the properties on the corresponding object.
...for non-symbols properties it also defines whether it shows up in a for...in loop and object.keys() or not.
...And 2 more matches

Promise - JavaScript
for the nesting shown above, suppose the .then() associated with "promise b" returns a nextvalue of "promise x".
..." + successmessage) }); example with diverse situations this example shows diverse techniques for using promise capabilities, and diverse situations that can occur.
... the example function tetheredgetnumber() shows that a promise generator will utilize reject() while setting up an asynchronous call, or within the call-back, or both.
...And 2 more matches

Forms related code snippets - Archive of obsolete content
autogrowing <textarea> this example shows how to make a textarea really autogrowing during a typing.
... insert some custom text in a <textarea> this example shows how to insert some html tags or smiles or any custom text in a textarea.
... image preview before upload the filereader.prototype.readasdataurl() method can be useful, for example, to get a preview of an image before uploading it.[article] this example shows how to use it in this way.
... filter the digitation into a form field this example shows the use of the onkeypress event during a digitation into a form field in order to match some rules.

Install Manifests - Archive of obsolete content
link in the extension's context menu will show this dialog, rather than the default.
...if this property is specified, when the extension is selected in the extensions list, the options button is enabled and will show this.
... hidden firefox 1.0 - 3.5 a boolean value that when true makes the add-on not show up in the add-ons list, provided the add-on is installed in a restricted access area (so it does not work for add-ons installed in the profile).
...if the add-on specified by the <em:id> tag is not installed or has an incompatible version, the extension manager will disable your extension and show the message "requires additional items".

Chapter 2: Technologies used in developing extensions - Archive of obsolete content
listing 1: xml syntax <elementname someattribute="somevalue"> content </elementname> as shown in listing 1, xml uses elements, which consist of an opening tag, a closing tag, and content.
...as shown in listing 1, it has an extremely simple syntax.
... javascript is a prototype-based object-oriented language, and as shown in listing 3, also permits independent class definitions.
...listing 4 shows an example that deletes the second child element of the element with the "toolbar" id, adds a new button element as a substitute, and sets a label attribute.

User Notifications and Alerts - Archive of obsolete content
the "remember password" prompt is the one that shows up the most often.
...the notification shows up again when you come back to the tab that displayed it.
...on the other hand, alerts are displayed only temporarily using the alerts service is similar to using notification boxes: let alertsservice = cc["@mozilla.org/alerts-service;1"].getservice(ci.nsialertsservice); let title = this._bundle.getstring("xulschoolhello.greeting.title"); let message = this._bundle.getstring("xulschoolhello.greeting.label"); alertsservice.showalertnotification( "chrome://xulschoolhello/skin/hello-notification.png", title, message, true, "", this, "xulschool hello message"); we pass this as an argument, assuming that this is an object that implements nsiobserver.
... because of the inconsistent support and temporary nature of these alerts, we don't recommend using this service to show information the user needs to know and can't get in any other way.

JXON - Archive of obsolete content
in this article we will show how to convert a parsed xml document (i.e.
...becomes { "while": true, wend: false, "only-if": null } within a string, closing elements "</" are escaped as "<\/" <root><![cdata[<script>alert("yes");</script>]]></root> becomes { script: "<script>alert(\"yes\")<\/script>" } dates are created as new date objects <root>2006-12-25</root> becomes new date(2006, 12 - 1, 25) attributes and comments are shown as comments (for testing purposes): <!--testing--><root><test version="1.0">123</test></root> becomes /* testing */ { test /* @version = "1.0" */ : 123} a bit of indentation is done, to keep things legible note: our algorithms comply with the point 3 (but without month decrease).
... the following table shows the corresponding conversion patterns between xml and json according to the third algorithm.
...xt": "hello world!" } you must just create an xml document with the following structure: <myboolean>true</myboolean> <myarray>cinema</myarray> <myarray>hot dogs</myarray> <myarray>false</myarray> <myobject> <nickname>jack</nickname> <registration_date>dec 25, 1995</registration_date> <privileged_user /> </myobject> <mynumber>99</mynumber> <mytext>hello world!</mytext> this example also shows how the ideal jxon document is an xml document designed specifically to be converted in json format, though our algorithms work fine with any kind of xml document.

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
my tests were on windows vista, and i noticed at least one difference, it is that paths changed; now the profile is in (for my procacci user sample): c:\users\procacci\appdata\roaming\thunderbird\profiles\v6we4uku.default start in debug mode in comand line interface: debug with displayerror() here's the result, i used the displayerror() method ( not the best way :-( see bug 206294 ) to show environment and ldap variables in order to check that it worked fine.
... the displayerror() function does not work properly in thunderbird 3.1: see https://bugzilla.mozilla.org/show_bu...?id=502597#c34 a usable workaround is placing the following code at the top of your autoconfig script: // enable logging.
...function displayerror(title, msg) { log.debug(title + ": " + msg); alerts.showalertnotification("chrome://branding/content/icon48.png", title, msg); } firefox it's the same principles as for firefox as it was described above for thunderbir.
... getldapattributes("ldap2.int-evry.fr","ou=people,dc=int-evry,dc=fr","uid=" + env_user,"uid,cn,mail,labeleduri"); // close the try, and call the catch() } catch(e) {displayerror("lockedpref", e);} debug if you set a username and the mozilla_debug variable ($export mozilla_debug=1; export user=procacci), then the displayerror() will show you this popup: that's a popup titled as "error", but it's just a debug tool for me as i didn't find any other way to popup information.

HostWindow - Archive of obsolete content
the window does have some ui components (as shown in the screenshot below).
... prism can be configured to show or hide several of the ui components.
...the splitter itself cannot be hidden as it is the only ui to show a collapsed sidebar.
...command menu - a popup menu showing several prism-specific commands.

Menus - Archive of obsolete content
menu tag overview the following shows a simple menu example, containing a menubar with a single menu labeled 'file'.
...the example below shows a menubar with three menus.
...the following shows a simple help menu.
... if you wish to have slight differences between each window, one possibility is to show or hide menu items in a load event listener.

Positioning - Archive of obsolete content
there are several possible values for the position attribute, described here, along with images which show how a popup would be aligned in each case.
... valid values for the anchor alignment (ie, the first word) are shown below anchor alignment values topleft the popup will be aligned with the upper-left corner of the anchor.
... valid values for the popup alignment (ie, the second word) are shown below popup alignment values topleft the top-left corner of the popup will be aligned with the specified corner or edge of the anchor element.
... the following table shows the valid values, corresponding explicit (ie, 2 word) alignment values and an example of the alignment.

Filtering - Archive of obsolete content
a menulist is used to allow one to select either a specific country, or select all to show all of the photos.
... when a choice is made, the applyfilter function as shown above is called and the template content gets rebuilt with the desired filter applied.
... add the type to the two countries in the datasource, as well as ensure that the namespace is declared on the root rdf tag: <nso:country about="http://www.daml.org/2001/09/countries/iso#it" dc:title="italy"/> <nso:country about="http://www.daml.org/2001/09/countries/iso#nl" dc:title="netherlands"/> the type of these two resources, when expanded with the namespace (not shown here), will be 'http://www.daml.org/2001/09/countries/country-ont#country'.
...the complete example shows this working.

Document Object Model - Archive of obsolete content
also, we'll add an id attribute so that we can refer to it in a script to show and hide it.
... while we're at it, let's also hide the splitter and results tree as we only need to show them after a search is performed.
...if you haven't done this, do that now, as shown below.
... the following example shows how to iterate over the children of the root node: var childnodes = document.documentelement.childnodes; for (var i = 0; i < childnodes.length; i++) { var child = childnodes[i]; // do something with child } the childnodes variable will hold the children of the document root element.

XUL accessibility guidelines - Archive of obsolete content
the following example shows a javascript function that can be called before destroying an element to check for focus and move it if necessary.
...instead, use the text of a label enclosed in the label tags, and do not use the value attribute, as shown below for the password field.
...for example, the first item in the privacy panel in the firefox option dialog (discussed and shown above) is [checkbox] remember visited pages for the last [textbox] days.
...the correct label for textbox is actually the same, but we don't want assistive technologies to read or show it twice.

XUL controls - Archive of obsolete content
<checkbox label="show toolbar labels" checked="true"/> more information about the checkbox element.
... <colorpicker color="#ff0000"/> colorpicker reference <colorpicker type="button"> a specialized type of color picker which shows only a button.
... textbox reference <textbox type="autocomplete"> a textbox that provides a dropdown showing matches that would complete what the user types.
... <toolbarbutton type="menu" label="show"> <menupopup> <menuitem label="toolbars"/> <menuitem label="status bar"/> </menupopup> </toolbarbutton> more information about this type of menu toolbarbutton element.

browser - Archive of obsolete content
attributes autocompleteenabled, autocompletepopup, autoscroll, disablehistory, disableglobalhistory, disablesecurity, droppedlinkhandler, homepage, showcaret, src, type properties accessibletype, cangoback, cangoforward, contentdocument, contentprincipal, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, messagemanager, preferences, securityui, sessionhistory, webbrowserfind, webnavigation, webprogress methods addprogresslistener, goback, goforwa...
...rd, gohome, gotoindex, loaduri, loaduriwithflags, reload, reloadwithflags, removeprogresslistener, stop, swapdocshells examples <!-- shows mozilla homepage inside a groupbox --> <groupbox flex="1"> <caption label="mozilla homepage"/> <browser type="content" src="http://www.mozilla.org" flex="1"/> </groupbox> attributes autocompleteenabled type: boolean set to true to enable autocomplete of fields.
... showcaret type: boolean whether or not to cause a typing caret to be visible in the content area.
...during the swap, pagehide and pageshow events are fired on both browsers.

dialog - Archive of obsolete content
disclosure: a button to show more information.
... warning: if the accept and cancel buttons are actually shown is system dependent and is mainly controlled by the value of the boolean preference browser.preferences.instantapply.
...the cancel button might be shown as an additional possibility to close the dialog in this situation (windows and linux) or might be hidden, too (mac os).
... disclosure: a button to show more information.

tabbrowser - Archive of obsolete content
attributes autocompleteenabled, autocompletepopup, autoscroll, contentcontextmenu, contenttooltip, handlectrlpageupdown, onbookmarkgroup, onnewtab, tabmodalpromptshowing properties browsers, cangoback, cangoforward, contentdocument, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, securityui, selectedbrowser, selectedtab, sessionhistory, tabcontainer, tabs, visibletabs, webbrowserfind, webnavigation, webprogress methods addprogresslistener, addtab, addtabsprogressl...
...on, getnotificationbox, gettabforbrowser, gettabmodalpromptbox, goback, gobackgroup, goforward, goforwardgroup, gohome, gotoindex, loadgroup, loadonetab, loadtabs, loaduri, loaduriwithflags, movetabto, pintab, reload, reloadalltabs, reloadtab, reloadwithflags, removealltabsbut, removecurrenttab, removeprogresslistener, removetab, removetabsprogresslistener,replacegroup, selecttabatindex, seticon, showonlythesetabs, stop, unpintab attributes autocompleteenabled type: boolean set to true to enable autocomplete of fields.
... tabmodalpromptshowing type: integer the number of tab modal prompts currently attached to the current tab.
... showonlythesetabs( atabs ) return type: no return value makes all tabs in the atabs array visible, and all other tabs hidden.

Getting started with XULRunner - Archive of obsolete content
*/ pref("browser.dom.window.dump.enabled", true); pref("javascript.options.showinconsole", true); pref("javascript.options.strict", true); pref("nglayout.debug.disable_xul_cache", true); pref("nglayout.debug.disable_xul_fastload", true); xulrunner specific preferences include: toolkit.defaultchromeuri specifies the default window to open when the application is launched.
... main.xul: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="main" title="my app" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://myapp/content/main.js"/> <caption label="hello world"/> <separator/> <button label="more >>" oncommand="showmore();"/> <separator/> <description id="more-text" hidden="true">this is a simple xulrunner application.
...most xul applications will include some external javascript, so the sample application does too, just to show how to include it into the xul file.
... main.js: function showmore() { document.getelementbyid("more-text").hidden = false; } for more information about xul see: xul.

Encryption and Decryption - Archive of obsolete content
with most symmetric algorithms, the same key is used for both encryption and decryption, as shown in figure 1.
...figure 2 shows a simplified view of the way public-key encryption works.
... the scheme shown in figure 2 lets you freely distribute a public key, and only you will be able to read data encrypted using this key.
... as it happens, the reverse of the scheme shown in figure 2 also works: data encrypted with your private key can be decrypted only with your public key.

Settings - Archive of obsolete content
show panes on startup when this option is enabled, the debugger's variables pane is visible when you first start the debugger.
... show only enumerable properties do not display non-enumerable javascript properties.
... show variables filter box enabling this option adds a "filter variables" search box to the variables pane, so that you can filter the displayed list of variables.
... show original sources enabling this option will make the debugger use source maps, if they are available, to display the original source for code which has been combined, minified, or even compiled to javascript from a language like coffeescript.

-ms-filter - Archive of obsolete content
examples the following example shows how to use the -ms-filter attribute in internet explorer 8.
... code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_8.htm -ms-filter: 'progid:dximagetransform.microsoft.motionblur(strength=50), progid:dximagetransform.microsoft.basicimage(mirror=1)'; the following example shows how to use an inline style sheet to set the filter on an image.
... code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_h.htm <img style="filter:progid:dximagetransform.microsoft.motionblur(strength=50) progid:dximagetransform.microsoft.basicimage(mirror=1)" src="/workshop/samples/author/dhtml/graphics/cone.jpg" height="80px" width="80px" alt="cone"> the following example shows how to use scripting to set the filter on an image.
...use commas (,) to separate multiple values, as shown in the examples section.

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
sample output is shown in listing 2.
...listing 6 shows the beginning of our application which takes advantage of some of these concepts.
...the completed user interface is shown in figure 1.
...listing 8 shows the two functions used to handle the comment submission process.

XForms Custom Controls - Archive of obsolete content
we will also show you how to create custom controls that work with the xforms model and are automatically updated just like xforms controls.
...for example, you might want to render images that are held inside an instance document or you would like to show a disabled trigger when its bound node becomes irrelevant rather than having it not display (the current default behavior).
...here is a snippet from our .css file to show the type of css rule we would use to make such a determination.
...the following list shows where the base bindings for our xforms controls are defined: xforms.xml - contains the base bindings for output, label, trigger, submit, case, message, hint, help, alert, upload and repeat xforms controls.

Mozilla XForms User Interface - Archive of obsolete content
input a key xforms element to show and change the instance data to which it is bound.
...textarea serves to show/change multiline text (see the spec).
... output serves to show the instance data that the element is bound to in a read-only manner (see the spec).
...alert this message will be shown when the form control cannot properly bind to instance data or when the instance data value is invalid or out of the specified range of selectable values (see the spec).

Index - Game development
14 bounding volume collision detection with three.js 3d, games, javascript, webgl, bounding boxes, collision detection, three.js this article shows how to implement collision detection between bounding boxes and spheres using the three.js library.
...in this series of articles we will show you how you can approach building a game that can be played using touchscreen smartphones, mouse and keyboard, and also less common mechanisms such as gamepads.
...this article explains more about this, and shows you how to use libraries to implement data channels in your game.
... 71 touch event horizon needscontent, needsexample this tutorial shows how to use touch events to create a game on a <canvas>.

Extra lives - Game development
new variables add the following new variables below the existing ones in your code: var lives = 3; var livestext; var lifelosttext; these respectively will store the number of lives, the text label that displays the number of lives that remain, and a text label that will be shown on screen when the player loses one of their lives.
... the lifelosttext will be shown only when the life is lost, so its visibility is initially set to false.
...instead of executing an anonymous function and showing the alert right away : ball.events.onoutofbounds.add(function(){ alert('game over!'); location.reload(); }, this); we will assign a new function called ballleavescreen; delete the previous event handler (shown above) and replace it with the following line: ball.events.onoutofbounds.add(ballleavescreen, this); we want to decrease the number of lives every time the ball leaves the ...
... when the number of available lives reaches zero, the game is over and the game over alert message will be shown.

Styling links - Learn web development
in this article we'll build on this knowledge, showing you best practices for styling links.
...if you get really stuck, press the show solution button to insert the example we showed above.
...g: 10px;border: 1px solid #0095dd;">a { } a:link { } a:visited { } a:focus { } a:hover { } a:active { }</textarea> <h2>output</h2> <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> <div class="controls"> <input id="reset" type="button" value="reset" style="margin: 10px 10px 0 0;"> <input id="solution" type="button" value="show solution" style="margin: 10px 0 0 10px;"> </div> </div> var htmlinput = document.queryselector(".html-input"); var cssinput = document.queryselector(".css-input"); var reset = document.getelementbyid("reset"); var htmlcode = htmlinput.value; var csscode = cssinput.value; var output = document.queryselector(".output"); var solution = document.getelementbyid("solution"); var styleelem = docume...
... we also use background-size to specify the size we want the background image to be shown at — it is useful to have a larger icon and then resize it like this as needed for responsive web design purposes.

Advanced form styling - Learn web development
the following live example shows you what they look like in your system — default on the left, and with the above css applied on the right (find it here also if you want to test it on other systems).
...; } different browsers handle this in many different, often ugly ways: browser rendering firefox 71 (macos) firefox 57 (windows 10) chrome 77 (macos), safari 13, opera chrome 63 (windows 10) internet explorer 11 (windows 10) edge 16 (windows 10) using appearence: none on radios/checkboxes as we showed before, you can remove the default appearance of a checkbox or radio button altogether with appearance:none; let's take this example html: <form> <fieldset> <legend>fruit preferences</legend> <p> <label> <input type="checkbox" name="fruit-1" value="cherry"> i like cherry </label> </p> <p> <label> <input type="checkbox" name="fruit-2"...
... take the following example, which shows a number of the "ugly" form features in action: this example has the following css applied to it: body { font-family: 'josefin sans', sans-serif; margin: 20px auto; max-width: 400px; } form > div { margin-bottom: 20px; } select { -webkit-appearance: none; appearance: none; } .select-wrapper { position: relative; } .select-wrapper::after { content: "▼"; font-size: 1rem...
...however, in the case of the number type the data being collected is simpler, and it is easy to just use a text input type instead if desired (or tel if you want mobile browsers to show the numeric keypad).

Basic native form controls - Learn web development
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.
... the following screenshots show default, focused and disabled checkboxes in firefox 71 and safari 13 on macos and chrome 79 and edge 18 on windows 10: note: any checkboxes and radio buttons with the checked attribute on load match the :default pseudo class, even if they are no longer checked.
...abel for="soup">soup</label> <input type="radio" id="soup" name="meal" value="soup" checked> </li> <li> <label for="curry">curry</label> <input type="radio" id="curry" name="meal" value="curry"> </li> <li> <label for="pizza">pizza</label> <input type="radio" id="pizza" name="meal" value="pizza"> </li> </ul> </fieldset> the following screenshots show unchecked and checked radio buttons, radio buttons that have focus, and disabled unchecked and checked radio buttons — on firefox 71 and safari 13 on macos and chrome 79 and edge 18 on windows 10.
... the following examples show default, focused, and disabled button input types — in firefox 71 and safari 13 on macos and chrome 79 and edge 18 on windows 10.

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.
...so value attributes are not needed, but you might find a reason to want to send a shortened or different value to the server than what is visually shown in the select box.
... the following screenshot shows the datalist fallback as rendered in safari 6: if you use this fallback, ensure the data for both the <input> and the <select> are collected server-side.
...this is for implementing any kind of meter, for example a bar showing total space used on a disk, which turns red when it starts to get full.

Styling web forms - Learn web development
the screenshots below show the difference.
...to give the same size to several different widgets, you can use the box-sizing property along with some consistent values for other properties: input, textarea, select, button { width : 150px; padding: 0; margin: 0; box-sizing: border-box; } in the screenshot below, the left column shows the default rendering of an <input type="radio">, <input type="checkbox">, <input type="range">, <input type="text">, <input type="date"> input, <select>, <textarea>,<input type="submit">, and <button>.
... the right column on the other hand shows the same elements with our above rule applied to them.
...add all the code blocks shown below inside the <style> element, one after another.

HTML basics - Learn web development
if they overlap as shown above, then your web browser will try to make the best guess at what you were trying to say, which can lead to unexpected results.
...this element acts as a container for all the stuff you want to include on the html page that isn't the content you are showing to your page's viewers.
...this contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks or whatever else.
... wrap the text in an <a> element, as shown below: <a>mozilla manifesto</a> give the <a> element an href attribute, as shown below: <a href="">mozilla manifesto</a> fill in the value of this attribute with the web address that you want the link to link to: <a href="https://www.mozilla.org/about/manifesto/">mozilla manifesto</a> you might get unexpected results if you omit the https:// or http:// part, called the protocol, ...

Introduction to events - Learn web development
the earliest method of registering event handlers found on the web involved event handler html attributes (or inline event handlers) like the one shown above — the attribute value is literally the javascript code you want to run when the event occurs.
...let's look at an example to make this easier — open up the show-video-box.html example in a new tab (and the source code in another tab.) it is also available live below: this is a pretty simple example that shows and hides a <div> with a <video> element inside it: <button>display video</button> <div class="hidden"> <video> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't ...
...here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> </div> when the <button> is selected, the video is displayed, by changing the class attribute on the <div> from hidden to showing (the example's css contains these two classes, which position the box off the screen and on the screen, respectively): btn.onclick = function() { videobox.setattribute('class', 'showing'); } we then add a couple more onclick event handlers — the first one to the <div> and the second one to the <video>.
... we can, therefore, fix our current problem by changing the second handler function in the previous code block to this: video.onclick = function(e) { e.stoppropagation(); video.play(); }; you can try making a local copy of the show-video-box.html source code and fixing it yourself, or looking at the fixed result in show-video-box-fixed.html (also see the source code here).

Working with JSON - Learn web development
active learning: working through a json example so, let's work through an example to show how we could make use of some json data on a website.
...add the following code below your previous code: request.onload = function() { const superheroes = request.response; populateheader(superheroes); showheroes(superheroes); } here we are storing the response to our request (available in the response property) in a variable called superheroes; this variable now contains the javascript object based on the json!
... creating the hero information cards next, add the following function at the bottom of the code, which creates and displays the superhero cards: function showheroes(jsonobj) { const heroes = jsonobj['members']; for (let i = 0; i < heroes.length; i++) { const myarticle = document.createelement('article'); const myh2 = document.createelement('h2'); const mypara1 = document.createelement('p'); const mypara2 = document.createelement('p'); const mypara3 = document.createelement('p'); const mylist = document.createelement('ul'); ...
...request.send(); request.onload = function() { const superheroestext = request.response; // get the string from the response const superheroes = json.parse(superheroestext); // convert it to an object populateheader(superheroes); showheroes(superheroes); } as you might guess, stringify() works the opposite way.

Understanding client-side JavaScript frameworks - Learn web development
in this article, we will show you a sensible way to break our app up into components.
...here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e.
...working with svelte stores in this article we will show another way to handle state management in svelte — stores.
...three of them are very popular and well-established — react/reactdom, ember, and vue — whereas svelte is a comparative newcomer that shows a lot of promise and has gained a lot of recent popularity.

Handling common accessibility problems - Learn web development
safari: select develop > disable styles from the main menu (to enable the develop menu, choose safari > preferences > advanced > show develop menu in menu bar).
... another tip — as shown in our example, you can control how your focusable elements look when focused, using the :focus pseudo-class.
... hiding content there are many instances where a visual design will require that not all content is shown at once.
... for example, in our tabbed info box example (see source code) we have three panels of information, but we are positioning them on top of one another and providing tabs that can be clicked to show each one (it is also keyboard accessible — you can alternatively use tab and enter/return to select them).

Command line crash course - Learn web development
the next images show the command prompts available in windows — there’s a good range of options from the "cmd" program to "powershell" — which can be run from the start menu by typing the program name.
... for example, give this a go and see what you get: ls -l in the case of ls, the -l (dash ell) option gives you a listing with one file or directory on each line, and a lot more information shown.
... below is a screenshot with a “vanilla” macos terminal at the top, and a customised terminal with some extra icons and colors to keep it looking lively — both showing the results of running ls -l: note: to find out exactly what options each command has available, you can look at its man page.
... try running this: curl /docs/web/api/fetch -l -i | grep location | awk '{ print "https://developer.mozilla.org" $2 }' your final output should look something like this: /docs/web/api/fetch /docs/web/api/globalfetch/globalfetch.fetch() /docs/web/api/globalfetch/fetch /docs/web/api/windoworworkerglobalscope/fetch by combining these commands we've customised the output to show the full urls that the mozilla server is redirecting through when we request the /docs/web/api/fetch url.

Package management basics - Learn web development
let's say we want to show human-readable relative dates, such as "2 hours ago", "4 days ago" and so on.
... where npm is shown in the examples below, pnpm can be swapped in and the command will work.
... initialise a new project npm init yarn init as shown above, this will prompt and walk you through a series of questions to describe your project (name, license, description and so on) then generate a package.json for you that contains meta information about your project and its dependencies.
... checking on a dependency npm ls date-fns yarn why date-fns this command will show what version of a dependency is installed and how it came to be included in your project.

Debugging Frame Reflow
0 a=0,0 c=1500,uc cnt=884 col 02d7c0d8 d=0,0 colg 02d7bfb0 d=0,0 tbl 02d7b7ec d=1500,390 tblo 02d7b5f0 d=1500,390 text 02d7c130 r=0 a=8940,uc c=uc,uc cnt=885 text 02d7c130 d=0,0 block 02d7b210 d=8940,390 area 02d7afe4 d=9180,630 canvas 00b97c6c d=9180,4470 scroll 00b97ee0 d=9180,4470 scroll 00b97ee0 d=9180,4470 vp 00b97c30 d=9180,4470 the first line shows the reflow of the viewport (vp).
...below this is a line that reads: tblo 02d7b5f0 r=0 a=8940,uc c=0,0 cnt=870 here the uc shows that on initial reflow the available height for the outer table frame is unconstrained.
...element size only once and it reports now: block 02d7bcf8 d=1410,300 the block shows the same address as the previous one.
...sometimes the log is clearer if only the main frames are shown.

Debugging Table Reflow
anager verify-lines damage-repair lame-paint-metrics lame-reflow-metrics disable-resize-opt these options can be combined with a comma separated list messages generated by the reflow switch: block(div)(1)@00be5ac4: reflowing dirty lines computedwidth=9000 computedheight=1500 this message is generated inside of nsresult nsblockframe::reflowdirtylines(nsblockreflowstate& astate) it first shows the block id and address and then the computed width and height from the htmlreflowstate.
... debug_table_strategy editor's note: the following examples are not shown correctly due to the wiki's technical constraint.
...the first line of the data dump shows that no width has yet been assigned to the columns mcolwidths=-1 -1 -1 -1, -1 stands for: #define width_not_set -1 this is followed by a reference to the column frame pointers: col frame cache -> 0=00b93138 1=00b931f0 2=024dd728 3=024dd780 this is followed by the information which width has been set for each column.
...leaving assignnonpctcolwidths shows that already to all columns a width of 360 twips has been assigned assignnonpctcolwidths ex ***start table dump*** mcolwidths=360 360 360 360 col frame cache -> 0=00b93138 1=00b931f0 2=024dd728 3=024dd780 **start col dump** colindex=0 isanonymous=0 constraint=0 widths=360 540 1230 -1 -1 -1 -1 -1 -1 360 **end col dump** **start col dump** colindex=1 isanonymous=0 constraint=0 widths=360...

Debugging on Windows
if you want to debug a content process, you can hover on the tab of page you want to debug, which would show the pid.
..."executable for debug session:" should show the executable you are debugging.
..."program arguments:" should show the options.
... for example, to print curent javascript stack to stdout, evaluate this in quickwatch window: {,,xul}dumpjsstack() note: visual c++ will show you something in the quick watch window, but not the stack, you have to look in the os console for the output.

Eclipse CDT Manual Setup
if you want line numbers, tick "show line numbers".
... if you want a column marker to mark the 80th column to help with formatting code to mozilla's 80 character line limit, tick "show print margin" and set the value to 80.
... the status bar at the bottom right of the window should now show that eclipse is "refreshing the workspace" (gathering a list of all the files in the source tree).
...(this directory doesn't show in the project explorer tab, but eclipse still indexes it without this filter!) if you have secondary object directories (object directories that are not your only/the primary object directory) for the source tree and those directories are inside the source tree (or if you might have such object directories in future), then add an "exclude all", regular expression filter for folders with a proje...

Multiple Firefox profiles
when the properties dialog box pops up, you should see a "target" text field that you can edit, and it should show the current file path.
... when the properties dialog box pops up, you should see a "target" text field that you can edit, and it should show the current file path.
...once you get to the point of adding a new item, you can have the profile dialog show up every time or set the launcher to launch a specific profile.
...leave off the profile name if you want the profile selector to show up every time you launch.

How to implement a custom autocomplete search component
illa.org/autocomplete/search;1?name=simple-autocomplete {6224daa1-71x2-4d1a-ad90-01ca1c08e323} you need to add the following method: getlabelat: function(index) { return this._results[index]; } to simpleautocompleteresult use this newly available component in a xul file like this: <textbox id="text1" type="autocomplete" autocompletesearch="simple-autocomplete" showcommentcolumn="true" autocompletesearchparam='[{"value":"mark","comment":"cool dude"},{"value":"mary","comment":"nice lady"},{"value":"jimmy","comment":"very uncool guy"},{"value":"jimbo","comment":null}]' /> the component uses the autocompletesearchparam attribute or searchparam property to allow the developer to define a set of data to use for autocompletion.
...be sure to include it if you use the showcommentcolumn="true" textbox attribute.
... in case you do not like the standard tree layout of the autocomplete popup, you can also trigger the use of a richlistbox by linking a panel with the type attribute set to "autocomplete-richlistbox" like this: <panel id="richpopup" type="autocomplete-richlistbox" /> <textbox id="text1" type="autocomplete" autocompletesearch="simple-autocomplete" showcommentcolumn="true" autocompletepopup="richpopup" autocompletesearchparam='[{"value":"mark","comment":"cool dude"},{"value":"mary","comment":"nice lady"},{"value":"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/suggestion...
...this can happen when using an autcomplete panel in a panel (for example if an autcomplete textbox is set in a panel that shows and hides).

CustomizableUI.jsm
manage the areas in which these widgets are shown.
...the view can be shown as its own panel when such a widget is in the toolbar, or as a sliding 'subview' of the menu panel when such a widget is in the menu panel.
...this matters because of course xul-provided widgets could be available in some windows but not others, and likewise api-provided widgets might not exist in a private window (because of the showinprivatebrowsing property).
...it when removing the widget sss.loadandregistersheet(cssuri, sss.author_sheet); /**************/ // when you want to remove this widget run this code: // sss.unregistersheet(cssuri, sss.author_sheet); //remove the style sheet we applied // customizableui.destroywidget('id_of_my_widget_within_customizableui_and_dom'); //remove the widget /**************/ createwidget - custom type - simple this shows a simple example of how to make a widget with type custom.

Interfacing with the Add-on Repository
for example: searchfailed: function() { this.shownotification("i have no recommendations for you right now!", "oh noes!", null); }, here, we call a shownotification() method with some parameters that we'll look at shortly when we get to our shownotification() method below.
... for example: searchsucceeded: function(addons, addoncount, totalresults) { var num = math.floor(math.random() * addoncount); this.shownotification("would you like to try the " + addons[num].name + " addon?", "install", addons[num].install); }, this routine randomly selects one of the returned add-ons, then calls the previously mentioned shownotification() routine, passing in as parameters a prompt including the name of the returned add-on, a label for the button to show in the notification ("install"), and the addoni...
... installing the add-on the shownotification() routine displays a notification box offering to install the recommended add-on, if one was found, or reports an error if the search failed: shownotification: function(prompt, button, installobj) { this.install = installobj; var box = popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", prompt, null, /* anchor id */ { label: button, accesskey: "i", callback: function() { if (popupnotifications.install) { popupnotifications.install.install(); } else { popupnotifications.remove(box); } } }, ...
... this doesn't display any ui showing that the install is taking place; however, if you go to the add-on manager panel, you'll see the pending install listed among your add-ons.

source-editor.jsm
tor.defaults.contextmenu "sourceeditorcontextmenu" sourceeditor.defaults.expandtab true sourceeditor.defaults.highlightcurrentline true sourceeditor.defaults.initialtext "" sourceeditor.defaults.keys null sourceeditor.defaults.mode sourceeditor.modes.text sourceeditor.defaults.readonly false sourceeditor.defaults.showannotationruler false sourceeditor.defaults.showlinenumbers false sourceeditor.defaults.showoverviewruler false sourceeditor.defaults.tabsize 4 sourceeditor.defaults.theme sourceeditor.themes.mozilla sourceeditor.defaults.undolimit 200 event name constants these constants provide the names of the editor events for which you c...
... showannotationruler boolean a boolean value indicating whether or not to display the annotations gutter/ruler.
... showlinenumbers boolean a boolean value indicating whether or not the line numbers gutter should be displayed.
... showoverviewruler boolean a boolean value indicating whether or not to show the overview gutter/ruler.

Creating localizable web applications
consider the following example: a filmreel-like slideshow showcasing highlighted features of the product or featured designs.
... for right-to-left languages, the slideshow should go from right to left as well, making the last element in the html the first one to be displayed.
... <?php if($showwearthis) { ?> $(".try-button").personasbutton({ 'haspersonas':'<span><?= _("wear this");?></span><span>&nbsp;</span>', 'hasfirefox':'<span><?= _("get personas now!");?></span><span>&nbsp;</span>', 'nofirefox':'<span><?= _("get personas with firefox");?></span><span>&nbsp;</span>' }); <?php } ?> images don't put text or numbers in the images just don't do that.
...the following example shows how to achieve this with css.

Intel Power Gadget
the main strengths of this tool are (a) it works on windows, unlike most other power-related tools, and (b) it shows this data in graph form, which is occasionally useful.
... the three panes display the following information: power: shows power estimates for the package and the cores ("ia").
... frequency: shows operating frequency measurements for the cores ("ia") and the gpu ("gt").
... temperature: shows the package temperature.

Memory Profiler
timeline view this view shows the allocation event across the period of time.
... it shows the overall memory usage history.
... rank-list view and tree view the rank-list view shows top functions that are most memory eager.
... the tree view shows functions as call trees.

NSS 3.14.2 release notes
if so, nss uses the optimized code path, reducing the cpu cycles per byte to 1/20 of what was required before the patch (https://bugzilla.mozilla.org/show_bug.cgi?id=805604 and https://crypto.stanford.edu/realworldcrypto/slides/gueron.pdf).
...(https://bugzilla.mozilla.org/show_bug.cgi?id=540986) sqlite has been updated to 3.7.15.
... note: please apply the patch in https://bugzilla.mozilla.org/show_bug.cgi?id=837799 if you build nss with the system sqlite library and your system sqlite library is older than 3.7.15.
...(https://bugzilla.mozilla.org/show_bug.cgi?id=816853) bug 772144 - basic support for running nss test suites on android devices.this is currently limited to running tests from a linux host machine using an ssh connection.

nss tech note5
also, this document does not attempt to be an exhaustive survey of all possible ways to do a certain task; it merely tries to show a certain way.
...you can get the best slot given a wrap mechanism (as shown above), or get the best wrap mechanism given a slot using:</big> ck_mechanism_type wrapmech = pk11_getbestwrapmechanism(slot) prepare the wrapping key if using a raw key /* turn the raw key into a secitem */ secitem keyitem; keyitem.data = /* ptr to an array of key bytes */ keyitem.len = /* length of the array of key bytes */ /* t...
...you can get the best slot given a wrap mechanism (as shown above), or get the best wrap mechanism given a slot using:</big> ck_mechanism_type wrapmech = pk11_getbestwrapmechanism(slot) prepare the wrapping key if using a raw key /* turn the raw key into a secitem */ secitem keyitem; keyitem.data = /* ptr to an array of key bytes */ keyitem.len = /* length of the array of key bytes */ /* t...
...you can get the best slot given a wrap mechanism (as shown above), or get the best wrap mechanism given a slot using:</big> ck_mechanism_type wrapmech = pk11_getbestwrapmechanism(slot) prepare the wrapping key seckeypublickey *wrappingpubkey prepare the to-be-wrapped key if using a raw key /* turn the raw key into a secitem */ secitem keyitem; keyitem.data = /* ptr to an array of key bytes */...

Shell global objects
all disassembly functions take these options as leading string arguments: -r disassemble recursively -l show line numbers -s omit source notes dis([fun/code]) disassemble functions into bytecodes.
... notes([fun]) show source notes for functions.
... stackdump(showargs, showlocals, showthisprops) tries to print a lot of information about the current stack.
...takes an optional options object, which may contain any or all of the boolean properties options.args - show arguments to each function options.locals - show local variables in each frame options.thisprops - show the properties of the this object of each frame bytesize(value) return the size in bytes occupied by value, or undefined if value is not allocated in memory.

WebReplayRoadmap
these messages will show up on the timeline and can be seeked to in the same way as other console messages.
... bookmarks (not yet implemented) it would be nice to be able to bookmark points in the recording so that they show up on the timeline and can be seeked to later.
... while the supported features will grow over time, the ui needs to be improved so that features which aren't supported are not shown or are shown in a disabled state.
... if the debugger could perform this analysis then it could show this information to developers and help them understand the app even when they are not actively debugging a particular recording.

Using XPCOM Utilities to Make Things Easier
weblock2.cpp the listing below shows the generic module code from weblock1.cpp using the macros described in this chapter: weblock2.cpp #include "nsigenericfactory.h" #include "nsisupportsutils.h" #define sample_cid \ { 0x777f7150, 0x4a2b, 0x4301, \ { 0xad, 0x10, 0x5e, 0xab, 0x25, 0xb3, 0x22, 0xaa}} class sample: public nsisupports { public: sample(); virtual ~sample(); ns_decl_isupports }; sample::sample() { ...
... using strings explaining how all the string classes work is outside the scope of this book, but we can show you how to use strings in the weblock component.
...this first example shows an nsembedcstring being used to pass an nsacstring to a method that's not expected to modify the string.
...although we haven't formally introduced these two interfaces, the next code sample shows how simple it is to switch between these two interfaces: someclass::dosomething(nsifile* afile) { if (!afile) return ns_error_null_pointer; nsresult rv; nscomptr<nsilocalfile> localfile = do_queryinterface(afile, &rv); // ...

nsIAuthPrompt2
a single prompt will be shown; then the callbacks for all the coalesced prompts will be notified with the resulting authentication information.
...it must not throw when the prompt could already be potentially shown to the user.
...this way we prevent multiple dialogs shown to the user because consumer may fall back to synchronous prompt on synchronous failure of this method.
...implementations will commonly show a dialog with a username and password field, depending on flags also a domain field.

nsIFocusManager
void windowshown(in nsidomwindow awindow, in prbool aneedsfocus); native code only!
... flag_showring 0x100000 always show the focus ring or other indicator of focus, regardless of other state.
...void windowraised( in nsidomwindow awindow ); parameters awindow native code only!windowshown called when a new document in a window is shown.
... void windowshown( in nsidomwindow awindow, in prbool aneedsfocus ); parameters awindow aneedsfocus if true, then focus events are expected to be fired on the window if this window is in the focused window chain.

nsISelectionController
a disabled caret will never show up.
... setcaretvisibilityduringselection() show the caret even in selections.
...use this function to show the caret even in selections.
... void setcaretvisibilityduringselection( in boolean visibility ); parameters visibility pr_true to show the caret in selections.

nsIUpdate
if this is specified, the user is shown the license file after they choose to install the update, and they must agree to it before the download begins.
... showneverforversion boolean whether to show the "no thanks" button in the update prompt.
... showprompt boolean whether to show the update prompt which requires user confirmation when an update is found during a background update check.
... showsurvey boolean whether to show the survey link in the update prompt.

Buddy icons in mail
seth spitzer mozilla is now able to show icons in the message header area and the addressbook card pane.
... for the message pane, the icon we will show is on disk at: <profile home>/nim/<value of pref aim.session.screenname>/picture/<screenname for sender email address>.gif when trying to determine the screenname for the sender, we search the addressbook that we are using for collection.
... (see this document for info about that.) for the addressbook card pane, the icon will show is on disk at: <profile home>/nim/<value of pref aim.session.screenname>/picture/<screenname for card>.gif if aim.session.screenname is not set, the icon will not appear.
... we do not show any buddy icon if you are in "collapsed" header mode.

Using popup notifications
then you can create the popup notification at the appropriate time like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", "this is a sample popup notification.", null, /* anchor id */ { label: "do something", accesskey: "d", callback: function() { alert("doing something awesome!"); } }, null /* secondary action */ ); in this case, we aren't providing any secondary actions; ...
...you can use this to style the icon, like this: .popup-notification-icon[popupid="sample-popup"] { list-style-image: url("chrome://popupnotifications/skin/mozlogo.png"); } with this css in place, the result is the look we want: adding secondary options to provide options in the drop-down menu, add an array of notification actions to the call to the show() method, like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", "this is a sample popup notification.", null, /* anchor id */ { label: "do something", accesskey: "d", callback: function() { alert("doing something awesome!"); } }, [ { label: "first secondary opt...
... implementing a timeout function for the popup notification you can use a timeout to make your notification automatically disappear after some amount of time, by calling notification.remove() as shown below.
... components.utils.import('resource://gre/modules/popupnotifications.jsm'); var notify = new popupnotifications(gbrowser, document.getelementbyid("notification-popup"), document.getelementbyid("notification-popup-box")); var notification = notify.show( // browser gbrowser.selectedbrowser, // popup id "pdes-popup", // message "hi, there!, i'm gonna show you something today!!", // anchor id null, // main action { label: "click here", accesskey: "d", callback: function() { // you can call your function here } }, // secondary action null, // options { // alternative way to set the popup icon popupiconurl: "chrome://popupnotifications/skin/mozlogo.png" } ); settimeout(function(){ notification.remove(); }, 900); // time in milli...

Working with data
example: cast an array this example shows how to cast an array of a certain type to another type.
... if you need a utf-16 string, you can do this: var myutf16string = ctypes.jschar.array()("original string."); note: at this time, there's no way to specify a particular encoding; you may only retrieve the string in utf-8 or utf-16 as shown above.
... as review, making a null-terminated string happens like this: var cstr_nullterminated = ctypes.jschar.array()('rawr'); console.log(cstr_nullterminated); // outputs to browserconsole: `cdata { length: 5 }` console.log(cstr_nullterminated.tostring()); // outputs to browser console: `"ctypes.char16_t.array(5)(["r", "a", "w", "r", "\x00"])"` the console.log shows that the length is greater then the length of "rawr" which is 4, doing a .tostring on it shows there is a null terminator of \x00 on the end.
...es.default_abi, ctypes.void_t, ctypes.char.array() /*same as ctypes.char.ptr*/); somecfunction(myarray); second example: var mystruct = ctypes.structtype('foo', [{bar: ctypes.bool}]); var mystructarraytype = mystruct.array(5); var myarray = mystructarraytype(); var somecfunction = library.declare("somecfunction", ctypes.default_abi, ctypes.void_t, mystruct.ptr); somecfunction(myarray); this shows how to pass a buffer containing 5 elements of mystruct, the elements in myarray are not pointers.

Dominators view - Firefox Developer Tools
it looks something like this: the dominators view consists of two panels: the dominators tree panel shows you which nodes in the snapshot are retaining the most memory the retaining paths panel (new in firefox 47) shows the 5 shortest retaining paths for a single node.
... the retaining paths panel shows you, for a given node, the 5 shortest paths back from this node to a gc root.
...if you suspect that an object is being leaked, this will show you exactly which objects are holding a reference to it.
... this means that the object does not dominate the array, and is therefore not shown in the dominators tree view.

Work with animations - Firefox Developer Tools
starting in firefox 48, it will show animations applied to the ::before and ::after pseudo-elements.
... right-click in the box and select "inspect element" make sure the selected element is the <div class="channel"> switch over to the "animations" tab play the animation let's take a closer look at the contents of the animation inspector here: it shows a synchronized timeline for every animation applied to the selected element or its children.
... animation bars each animation or transition is shown as a horizontal bar laid across the timeline.
... if the animation or transition had a delay, this is shown as a cross-hatched portion of the bar.

Call Tree - Firefox Developer Tools
the screenshot below shows the output of a program that compares three sorting algorithms - bubble sort, selection sort, and quicksort.
... we've zoomed into the part of the recording that shows a long javascript marker: the call tree presents the results in a table.
...if your site is making the browser work hard, this might not show up as samples recorded in your code, but it is still your problem.
...if you want to see the details, check "show gecko platform data" in the settings.

Shader Editor - Firefox Developer Tools
here's another screencast, showing how you can use the shader editor for complex applications (in this case, the unreal engine demo): opening the shader editor the shader editor is disabled by default.
...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.
... editing shaders the middle and right hand panes show the vertex and fragment shaders for the currently selected program.
...for example, you can modify the colors: the editor highlights syntax errors in your code: if you hover over the cross shown next to a line containing an error, you'll see more details about the problem: ...

Tips - Firefox Developer Tools
(there are more than the default tools!) page inspector in the markup view: press h with a node selected to hide/show it.
... right-click any property and select "show mdn docs" to view the mdn docs for this property.
... check "enable timestamps" in the settings to show timestamps besides the logged messages.
... click the options button in the style sheet pane and click "show original sources" to toggle the display of css preprocessor files.

BasicCardRequest - Web APIs
// call show() to trigger the browser's payment flow.
... request.show().then(function(instrumentresponse) { // do something with the response from the ui.
... }) .catch(function(err) { // do something with the error from request.show().
...} once the payment flow has been triggered using paymentrequest.show() and the promise resolves successfully, the paymentresponse object available inside the fulfilled promise (instrumentresponse above) will have a paymentresponse.details property that will contain response details.

BasicCardResponse.billingAddress - Web APIs
example let's look at a sample payment request: var request = new paymentrequest(supportedinstruments, details, options); // call show() to trigger the browser's payment flow.
... request.show().then(function(instrumentresponse) { // do something with the response from the ui.
... console.log(instrumentresponse.details); }) .catch(function(err) { // do something with the error from request.show().
... }); once the payment flow has been triggered using paymentrequest.show() and the promise resolves successfully, the paymentresponse object available inside the fulfilled promise (instrumentresponse above) will have a paymentresponse.details property that will contain response details.

BasicCardResponse.cardNumber - Web APIs
example let's look at a sample payment request: var request = new paymentrequest(supportedinstruments, details, options); // call show() to trigger the browser's payment flow.
... request.show().then(function(instrumentresponse) { // do something with the response from the ui.
... console.log(instrumentresponse.details); }) .catch(function(err) { // do something with the error from request.show().
... }); once the payment flow has been triggered using paymentrequest.show() and the promise resolves successfully, the paymentresponse object available inside the fulfilled promise (instrumentresponse above) will have a paymentresponse.details property that will contain response details.

BasicCardResponse.cardSecurityCode - Web APIs
example let's look at a sample payment request: var request = new paymentrequest(supportedinstruments, details, options); // call show() to trigger the browser's payment flow.
... request.show().then(function(instrumentresponse) { // do something with the response from the ui.
... console.log(instrumentresponse.details); }) .catch(function(err) { // do something with the error from request.show().
... }); once the payment flow has been triggered using paymentrequest.show() and the promise resolves successfully, the paymentresponse object available inside the fulfilled promise (instrumentresponse above) will have a paymentresponse.details property that will contain response details.

BasicCardResponse.cardholderName - Web APIs
example let's look at a sample payment request: var request = new paymentrequest(supportedinstruments, details, options); // call show() to trigger the browser's payment flow.
... request.show().then(function(instrumentresponse) { // do something with the response from the ui.
... console.log(instrumentresponse.details); }) .catch(function(err) { // do something with the error from request.show().
... }); once the payment flow has been triggered using paymentrequest.show() and the promise resolves successfully, the paymentresponse object available inside the fulfilled promise (instrumentresponse above) will have a paymentresponse.details property that will contain response details.

BasicCardResponse.expiryMonth - Web APIs
example let's look at a sample payment request: var request = new paymentrequest(supportedinstruments, details, options); // call show() to trigger the browser's payment flow.
... request.show().then(function(instrumentresponse) { // do something with the response from the ui.
... console.log(instrumentresponse.details); }) .catch(function(err) { // do something with the error from request.show().
... }); once the payment flow has been triggered using paymentrequest.show() and the promise resolves successfully, the paymentresponse object available inside the fulfilled promise (instrumentresponse above) will have a paymentresponse.details property that will contain response details.

BasicCardResponse.expiryYear - Web APIs
example let's look at a sample payment request: var request = new paymentrequest(supportedinstruments, details, options); // call show() to trigger the browser's payment flow.
... request.show().then(function(instrumentresponse) { // do something with the response from the ui.
... console.log(instrumentresponse.details); }) .catch(function(err) { // do something with the error from request.show().
... }); once the payment flow has been triggered using paymentrequest.show() and the promise resolves successfully, the paymentresponse object available inside the fulfilled promise (instrumentresponse above) will have a paymentresponse.details property that will contain response details.

BasicCardResponse - Web APIs
// call show() to trigger the browser's payment flow.
... request.show().then(function(instrumentresponse) { // do something with the response from the ui.
... }) .catch(function(err) { // do something with the error from request.show().
...} once the payment flow has been triggered using paymentrequest.show() and the promise resolves successfully, the paymentresponse object available inside the fulfilled promise (instrumentresponse above) will have a paymentresponse.details property that will contain response details.

Constraint validation API - Web APIs
this will be displayed in the ui if the element is the only form control with a validity problem; if a custom error message is set using setcustomvalidity(), this will be shown.
... setcustomvalidity(message) sets a custom error message string to be shown to the user upon submitting the form, explaining why the value is not valid — when a message is set, the validity state is set to invalid.
...in this case the custom error message is cleared, the element is considered valid, and no message is shown.
... as a result, if the input value is invalid when the submit button is pressed, one of the custom error messages will be shown.

HTMLDialogElement - Web APIs
htmldialogelement.show() displays the dialog modelessly, i.e.
... htmldialogelement.showmodal() displays the dialog as a modal, over the top of any other dialogs that might be present.
... examples the following example shows a simple button that, when clicked, opens a <dialog> containing a form via the htmldialogelement.showmodal() function.
...cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).

IDBCursor - Web APIs
(bug 891944) next : "next" : the cursor shows all records, including duplicates.
... nextunique : "nextunique" : the cursor shows all records, excluding duplicates.
... prev : "prev" : the cursor shows all records, including duplicates.
... prevunique : "prevunique" : the cursor shows all records, excluding duplicates.

PaymentRequest.PaymentRequest() - Web APIs
examples the following example shows minimal functionality and focuses instead on showing the complete context of instantiating a paymentrequest object.
... // call show() to trigger the browser's payment flow.
... request.show().then(function(instrumentresponse) { // do something with the response from the ui.
... }) .catch(function(err) { // do something with the error from request.show().

PaymentRequest.canMakePayment() - Web APIs
you can call this before calling show() to provide a streamlined user experience when the user's browser can't handle any of the payment methods you accept.
... if (await supportsapplepay) { // show apple pay logo, for instance return; } // otherwise...
... let's see if we can use basic card const supportsbasiccard = await new paymentrequest( [{ supportedmethods: "basic-card" }], details ).canmakepayment(); if (supportsbasiccard) { // show basic card support return; } // otherwise, make payments using html form element } specifications specification status comment payment request apithe definition of 'canmakepayment()' in that specification.
... see also paymentrequest.show() ...

Using Performance Timeline - Web APIs
the following example show the usage of these methods getentries(), getentriesbyname() and getentriesbytype().
...the following example shows the use of these properties.
...the following examples show the use of this method.
... the following example shows how to register two observers: the first one registers for several event types and the second observer only registers for one event type.

Web Push API Notifications best practices - Web APIs
it shows right up on your desktop even when the website is shut.
... in mobile, it shows up in the notification tray, just like app push notifications, even when the browser is not running.” — an unnamed marketing site positive uses of push but there’s a bright and useful side to push notifications, too.
... building trust some studies have shown that as many as 60% of push notifications are blocked.
...you can build trust by having a well-designed website that provides good content that shows respect for the user, and a clear value to accepting push notifications.

Using the Screen Capture API - Web APIs
starting screen capture: async/await style async function startcapture(displaymediaoptions) { let capturestream = null; try { capturestream = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { console.error("error: " + err); } return capturestream; } you can write this code either using an asynchronous function and the await operator, as shown above, or using the promise directly, as seen below.
...the examples below show a few ways to make use of the stream.
... function stopcapture(evt) { let tracks = videoelem.srcobject.gettracks(); tracks.foreach(track => track.stop()); videoelem.srcobject = null; } dumping configuration information for informational purposes, the startcapture() method shown above calls a method named dumpoptions(), which outputs the current track settings as well as the constraints that were placed upon the stream when it was created.
... <p>this example shows you the contents of the selected part of your display.

Sensor APIs - Web APIs
the examples below show three methods for detecting sensor apis.
...the only time anything is shown to the user is when permissions need to be requested and when the sensor type isn't supported by the device.
...this is not something that would ever be shown to a user.
...a brief example, shown below, requests permission before attempting to use the sensor.

Using Service Workers - Web APIs
the below graphic shows a summary of the available service worker events: promises promises are a great mechanism for running async operations, with success dependant on one another.
... note: one great thing about service workers is that if you use feature detection like we’ve shown above, browsers that don’t support service workers can just use your app online in the normal expected fashion.
...in this case, we are just returning a simple text string: new response('hello from your friendly neighbourhood service worker!'); this more complex response below shows that you can optionally pass a set of headers in with your response, emulating standard http response headers.
... self.addeventlistener('activate', (event) => { var cachekeeplist = ['v2']; event.waituntil( caches.keys().then((keylist) => { return promise.all(keylist.map((key) => { if (cachekeeplist.indexof(key) === -1) { return caches.delete(key); } })); }) ); }); developer tools chrome has chrome://inspect/#service-workers, which shows current service worker activity and storage on a device, and chrome://serviceworker-internals, which shows more detail and allows you to start/stop/debug the worker process.

Geometry and reference spaces in WebXR - Web APIs
the following code snippet shows two simple functions, degreestoradians() and radianstodegrees(), which convert back and forth between the two units for measuring angles.
... the position of a point in space relative to the origin is determined by determining its distance along each of the three spatial axes shown in the diagram above.
...the currently available reference space types, which are defined by the xrreferencespacetype enumeration, are shown below.
... as the callback is repeatedly called with increasing time values, the callback generates a sequence of frames which are presented using the xr hardware, thereby showing a 3d scene to the user.

Privileged features - Web APIs
on windows platforms, a dependent window does not show on the task bar.
... the dependent feature is currently under revision to be removed (bug 214867) in msie 6, the nearest equivalent to this feature is the showmodelessdialog() method.
... note: as of gecko 1.9, the internet explorer equivalent to this feature is the window.showmodaldialog() method.
...note also that starting in gecko 2.0, you can use window.showmodaldialog() without universalbrowserwrite privileges.

ARIA Test Cases - Accessibility
however, where things don't work we may test with nightly builds if they are available, in order to show what is already fixed in upcoming releases.
... screen magnifier should show the focused button or emulate any other standard behavior found in notification dialogs in windows or respective operating systems.
...era safari jaws 9 - - n/a n/a jaws 10 pass fail - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - drag and drop tic tac toe slide show expected at behavior: (mz) once focusing or arrowing onto the draggable item, screen reader should indicate that item can be an object that can be dragged.
...however, if there is no perf issues they can show the new content simply when the tab gets focus.

Basic form hints - Accessibility
the example below shows a simple form with labels.
... the example below shows a radio button group implemented using an unordered list.
... the example below shows a <button> element that is described by a sentence in a separate <div> element.
... the example below shows a simple form with three fields.

Understandable - Accessibility
what page to show, when to advance to the next photo in the gallery...) if you need to have something like a carousel on a page, provide an option to stop it automatically advancing.
...when an error is detected, an intuitive error message should be shown next to the form input that is at fault to help the user correct their inputs.
... confirm and correct — where appropriate, after filling in a series of form fields to perform a task (such as buying a product), the user should be shown a confirmation screen where they can review their inputs and correct anything that doesn't look right.
...providing a dedicated link to a help page or service on each page, providing examples showing what successful completion should look like.

Coordinate systems - CSS: Cascading Style Sheets
let inner = document.queryselector(".inner"); let log = document.queryselector(".log"); function setcoords(e, type) { let idx = type + "x"; let idy = type + "y"; document.getelementbyid(idx).innertext = e[idx]; document.getelementbyid(idy).innertext = e[idy]; } a reference to the <div> inside the inner box which contains the paragraphs that will show the coordinate information is fetched into log.
... handling the mouse events setcoords() is called by the event handler for the various mouse events, named update(); this is shown below.
...the class "outer" is used for the containing box, which is intentionally too wide to show in the mdn window, to allow you to scroll it horizontally.
... the "inner" box is the one that we track events in and in which we show the mouse coordinates.

Box-shadow generator - CSS: Cascading Style Sheets
ayer(); if (type === 'layer') active.stack.setactivelayer(node); if (type === 'delete') active.stack.deletelayer(node.parentnode); if (type === 'move-up') active.stack.movelayer(1); if (type === 'move-down') active.stack.movelayer(-1); } var setactivestack = function setactivestack(stackobj) { active.stack.hide(); active.stack = stackobj; active.stack.show(); } /* * stack object */ var stack = function stack(subject) { var s = document.createelement('div'); var title = document.createelement('div'); var stack = document.createelement('div'); s.classname = 'container'; stack.classname = 'stack'; title.classname = 'title'; title.textcontent = subject.getattribute('data-title'); s.appendchild(title); s.appendch...
...x = this.order.indexof(shadowid); this.stack.removechild(this.stack.children[index]); this.order.splice(index, 1); this.count--; tool.deleteshadow(index); if (index > this.layerid) return; if (index == this.layerid) { if (this.count >= 1) { this.layerid = 0; this.setactivelayer(this.stack.children[0], true); } else { this.layer = null; this.show(); } } if (index < this.layerid) { this.layerid--; tool.setactiveshadow(this.layerid, true); } } stack.prototype.setactivelayer = function setactivelayer(node) { elements.shadow_properties.style.display = 'block'; elements.element_properties.style.display = 'none'; if (this.layer) this.layer.removeattribute('data-active'); this.layer = node; this.l...
...prototype.unsetactivelayer = function unsetactivelayer() { if (this.layer) this.layer.removeattribute('data-active'); this.layer = null; this.layerid = 0; } stack.prototype.hide = function hide() { this.unsetactivelayer(); this.subject.removeattribute('data-active'); var style = this.container.style; style.left = '100%'; style.zindex = '0'; } stack.prototype.show = function show() { elements.shadow_properties.style.display = 'none'; elements.element_properties.style.display = 'block'; if (this.id === 'element') { elements.zindex.style.display = 'none'; elements.transform_rotate.style.display = 'none'; } else { elements.zindex.style.display = 'block'; elements.transform_rotate.style.display = 'block'; } this.subject.s...
...('transform_rotate'); elements.zindex = getelembyid('z-index'); elem = document.queryselectorall('#layer_menu [data-type="subject"]'); size = elem.length; for (var i = 0; i < size; i++) { var s = new stack(elem[i]); stacks[elem[i].id] = s; container.appendchild(s.container); tool.addcssclass(elem[i].id); } active.stack = stacks['element']; stacks['element'].show(); layermanager.addeventlistener("click", mouseevents); layermenu.addeventlistener("click", mouseevents); buttonmanager.subscribe("before", function(value) { if (value === false && active.stack === stacks['before']) setactivestack(stacks['element']) if (value === true && active.stack !== stacks['before']) setactivestack(stacks['before']) }); buttonmanager.subsc...

Variable fonts guide - CSS: Cascading Style Sheets
you can use these four-letter tags in css to specify a point along that axis of variation, as will be show in the code examples below.
...conversely, when a much larger size was being used (like 48 or 60px), there might be much greater variation in thick and thin stroke weights, showing the typeface design more in line with the original intent.
... h1 { font-family: some-non-variable-font-family; } @supports (font-variation-settings: 'wdth' 115) { h1 { font-family: some-variable-font-family; } } sample pages the following example pages show two different ways to structure your css.
...the second example uses css custom properties to set values for a font-variation-settings string, and shows how you can more easily update single variable values by overriding a single variable rather than rewriting the whole string.

<area> - HTML: Hypertext Markup Language
the following keywords have special meanings: _self (default): show the resource in the current browsing context.
... _blank: show the resource in a new, unnamed browsing context.
... _parent: show the resource in the parent browsing context of the current one, if the current page is inside a frame.
... _top: show the resource in the topmost browsing context (the browsing context that is an ancestor of the current one and has no parent).

<input type="date"> - HTML: Hypertext Markup Language
we had to put the icon on a <span> next to the input, not on the input itself, because in chrome at least the input's generated content is placed inside the form control, and can't be styled or shown effectively.
...if <input type="date"> isn't supported, we hide the native picker and show the fallback (<select>) instead.
...ide fallback initially fallbackpicker.style.display = 'none'; fallbacklabel.style.display = 'none'; // test whether a new date input falls back to a text input or not var test = document.createelement('input'); try { test.type = 'date'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { // hide the native picker and show the fallback nativepicker.style.display = 'none'; fallbackpicker.style.display = 'block'; fallbacklabel.style.display = 'block'; // populate the days and years dynamically // (the months are always the same, therefore hardcoded) populatedays(monthselect.value); populateyears(); } function populatedays(month) { // delete the current set of <option> elements out of the // day <s...
...february), // this part of the code ensures that the highest day available // is selected, rather than showing a blank dayselect if(dayselect.value === "") { dayselect.value = previousday - 1; } if(dayselect.value === "") { dayselect.value = previousday - 2; } if(dayselect.value === "") { dayselect.value = previousday - 3; } } } function populateyears() { // get this year as a number var date = new date(); var year = date.getfullyear(); // make th...

<input type="datetime-local"> - HTML: Hypertext Markup Language
we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be styled or shown effectively.
...if <input type="datetime-local"> is not supported, we hide the native picker and show the fallback picker ui (<select>) instead.
...ly fallbackpicker.style.display = 'none'; fallbacklabel.style.display = 'none'; // test whether a new datetime-local input falls back to a text input or not var test = document.createelement('input'); try { test.type = 'datetime-local'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { // hide the native picker and show the fallback nativepicker.style.display = 'none'; fallbackpicker.style.display = 'block'; fallbacklabel.style.display = 'block'; // populate the days and years dynamically // (the months are always the same, therefore hardcoded) populatedays(monthselect.value); populateyears(); populatehours(); populateminutes(); } function populatedays(month) { // delete the current set of ...
...february), // this part of the code ensures that the highest day available // is selected, rather than showing a blank dayselect if(dayselect.value === "") { dayselect.value = previousday - 1; } if(dayselect.value === "") { dayselect.value = previousday - 2; } if(dayselect.value === "") { dayselect.value = previousday - 3; } } } function populateyears() { // get this year as a number var date = new date(); var year = date.getfullyear(); // make th...

<input type="file"> - HTML: Hypertext Markup Language
including the multiple attribute, as shown above, specifies that multiple files can be chosen at once.
... notes you cannot set the value of a file picker from a script — doing something like the following has no effect: const input = document.queryselector("input[type=file]"); input.value = "foo"; when a file is chosen using an <input type="file">, the real path to the source file is not shown in the input's value attribute for obvious security reasons.
... instead, the filename is shown, with c:\fakepath\ appended to the beginning of it.
... examples in this example, we'll present a slightly more advanced file chooser that takes advantage of the file information available in the htmlinputelement.files property, as well as showing off a few clever tricks.

<input type="month"> - HTML: Hypertext Markup Language
for those of you using a browser that doesn't support month, the screenshot below shows what it looks like in chrome and opera.
...we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be styled or shown effectively.
...if <input type="month"> is not supported, we hide the native picker and show the fallback picker ui instead.
...de fallback initially fallbackpicker.style.display = 'none'; fallbacklabel.style.display = 'none'; // test whether a new date input falls back to a text input or not var test = document.createelement('input'); try { test.type = 'month'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { // hide the native picker and show the fallback nativepicker.style.display = 'none'; fallbackpicker.style.display = 'block'; fallbacklabel.style.display = 'block'; // populate the years dynamically // (the months are always the same, therefore hardcoded) populateyears(); } function populateyears() { // get the current year as a number var date = new date(); var year = date.getfullyear(); // make this year, a...

<input type="search"> - HTML: Hypertext Markup Language
the first thing to note is that some browsers show a cross icon that can be clicked on to remove the search term instantly if desired.
...v> </form> you can see how the placeholder is rendered below: search form labels and accessibility one problem with search forms is their accessibility; a common design practice is not to provide a label for the search field (although there might be a magnifying glass icon or similar), as the purpose of a search form is normally fairly obvious for sighted users due to placement (this example shows a typical pattern).
...pan class="validity"></span> </div> </form> input { margin-right: 10px; } input:invalid ~ span:after { content: '✖'; padding-left: 5px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left: 5px; position: absolute; } this renders like so: in addition, if you try to submit the form with no search term entered into it, the browser will show a message.
... the following example is from firefox: different messages will be shown when you try to submit the form with different types of invalid data contained inside the inputs; see the below examples.

<input type="time"> - HTML: Hypertext Markup Language
if you specify a value of less than 60 seconds (1 minute), the time input will show a seconds input area alongside the hours and minutes: <form> <label for="appt-time">choose an appointment time: </label> <input id="appt-time" type="time" name="appt-time" step="2"> </form> in chrome and opera, which are the only browsers to show up/down iteration arrows, clicking the arrows changes the seconds value by two seconds, but doesn't affect the hours or minutes.
...we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be styled or shown effectively.
...if <input type="time"> is not supported, we hide the native picker and show the fallback picker ui (<select>s) instead.
...ide fallback initially fallbackpicker.style.display = 'none'; fallbacklabel.style.display = 'none'; // test whether a new date input falls back to a text input or not var test = document.createelement('input'); try { test.type = 'time'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { // hide the native picker and show the fallback nativepicker.style.display = 'none'; fallbackpicker.style.display = 'block'; fallbacklabel.style.display = 'block'; // populate the hours and minutes dynamically populatehours(); populateminutes(); } function populatehours() { // populate the hours <select> with the 6 open hours of the day for(var i = 12; i <= 18; i++) { var option = document.createelement('opti...

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
specifies how much of the input is shown.
... :placeholder-shown element that is currently displaying placeholder text, including <input> and <textarea> elements with the placeholder attribute present that has, as of yet, no value.
...the placeholder is used to show an example input, not an explanation or prompt.
... as a result, if the input value is invalid when the submit button is pressed, one of the custom error messages will be shown.

<select>: The HTML Select element - HTML: Hypertext Markup Language
the above example shows typical <select> usage.
... the <select> element has some unique attributes you can use to control it, such as multiple to specify whether multiple options can be selected, and size to specify how many options should be shown at once.
...when multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
... <!-- the second value will be selected initially --> <select name="choice"> <option value="first">first value</option> <option value="second" selected>second value</option> <option value="third">third value</option> </select> advanced select with multiple features the follow example is more complex, showing off more features you can use on a <select> element: <label>please choose one or more pets: <select name="pets" multiple size="4"> <optgroup label="4-legged pets"> <option value="dog">dog</option> <option value="cat">cat</option> <option value="hamster" disabled>hamster</option> </optgroup> <optgroup label="flying pets"> <option value="parrot">parrot</opt...

<textarea> - HTML: Hypertext Markup Language
note: placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a proper <label> element tied to the input.
...for example, to give your textarea a different border depending on whether it is valid or invalid: textarea:invalid { border: 2px dashed red; } textarea:valid { border: 2px solid lime; } examples basic example the following example show a very simple textarea, with a set numbers of rows and columns and some default content.
... <textarea name="textarea" rows="5" cols="30" placeholder="comment text."></textarea> note: placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a proper <label> element tied to the input.
... disabled and readonly this example shows two <textarea>s — one of which is disabled, and one of which is readonly.

HTML documentation index - HTML: Hypertext Markup Language
178 <progress>: the progress indicator element element, html, html forms, html5, reference, web the html <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
...ruby annotations are for showing pronunciation of east asian characters.
... 211 <title>: the document title element element, html, html document metadata, html:metadata content, page name, page title, reference, tab name, tab title, title, web, window name, window title the html title element (<title>) defines the document's title that is shown in a browser's title bar or a page's tab.
... 218 <video>: the video embed element element, html, html video, html video player, html embedded content, html5, media, movie playback, movies, multimedia, playing movies, playing video, reference, showing video, video, web the html video element (<video>) embeds a media player which supports video playback into the document.

Expressions and operators - JavaScript
the following code shows examples of the && (logical and) operator.
... var a1 = true && true; // t && t returns true var a2 = true && false; // t && f returns false var a3 = false && true; // f && t returns false var a4 = false && (3 == 4); // f && f returns false var a5 = 'cat' && 'dog'; // t && t returns dog var a6 = false && 'cat'; // f && t returns false var a7 = 'cat' && false; // t && f returns false the following code shows examples of the || (logical or) operator.
... var o1 = true || true; // t || t returns true var o2 = false || true; // f || t returns true var o3 = true || false; // t || f returns true var o4 = false || (3 == 4); // f || f returns false var o5 = 'cat' || 'dog'; // t || t returns cat var o6 = false || 'cat'; // f || t returns cat var o7 = 'cat' || false; // t || f returns cat the following code shows examples of the !
... the following examples show some uses of the in operator.

Functions - JavaScript
a non-primitive value, such as array or a user-defined object) as a parameter and the function changes the object's properties, that change is visible outside the function, as shown in the following example: function myfunc(theobject) { theobject.make = 'toyota'; } var mycar = {make: 'honda', model: 'accord', year: 1998}; var x, y; x = mycar.make; // x gets the value "honda" myfunc(mycar); y = mycar.make; // y gets the value "toyota" // (the make property was changed by the function) function expressions while the function declaration above is synta...
...the following example shows a map function that should receive a function as first argument and an array as second argument.
...the show_props() function (defined in working with objects) is an example of a function that takes an object as an argument.
... the following example shows nested functions: function addsquares(a, b) { function square(x) { return x * x; } return square(a) + square(b); } a = addsquares(2, 3); // returns 13 b = addsquares(3, 4); // returns 25 c = addsquares(4, 5); // returns 41 since the inner function forms a closure, you can call the outer function and specify arguments for both the outer and inner function: function outside(x) { fu...

this - JavaScript
function f1() { return this; } // in a browser: f1() === window; // true // in node: f1() === globalthis; // true in strict mode, however, if the value of this is not set when entering an execution context, it remains as undefined, as shown in the following example: function f2() { 'use strict'; // see strict mode return this; } f2() === undefined; // true in the second example, this should be undefined, because f2 was called directly and not as a method or property of an object (e.g.
... // add bluify as a click listener so when the // element is clicked on, it turns blue for (var i = 0; i < elements.length; i++) { elements[i].addeventlistener('click', bluify, false); } in an inline event handler when the code is called from an inline on-event handler, its this is set to the dom element on which the listener is placed: <button onclick="alert(this.tagname.tolowercase());"> show this </button> the above alert shows button.
... note however that only the outer code has its this set this way: <button onclick="alert((function() { return this; })());"> show inner this </button> in this case, the inner function's this isn't set so it returns the global/window object (i.e.
...to achieve this, bind the class methods in the constructor: class car { constructor() { // bind saybye but not sayhi to show the difference this.saybye = this.saybye.bind(this); } sayhi() { console.log(`hello from ${this.name}`); } saybye() { console.log(`bye from ${this.name}`); } get name() { return 'ferrari'; } } class bird { get name() { return 'tweety'; } } const car = new car(); const bird = new bird(); // the value of 'this' in methods depends on their caller car.sayhi();...

Codecs used by WebRTC - Web media technologies
supported audio codecs the audio codecs which rfc 7874 mandates that all webrtc-compatible browsers must support are shown in the table below.
... bit rate recommendations given a 20 millisecond frame size, the following table shows the recommended bit rates for various forms of media.
... note: the two methods for obtaining lists of codecs shown here use different output types in their codec lists.
... default codecs unless otherwise specified, the default—or, more accurately, preferred—codecs requested by each browser's implementation of webrtc are shown in the table below.

Installing and uninstalling web apps - Progressive web apps (PWAs)
tapping this will show a confirmation banner—pressing the banner's big "+ add to home screen" button completes the action, adding the app to the home screen.
... note that in android 8 and higher, a system-level "add to home screen" permission dialog will be shown first.
... tapping that icon should then take you to the same confirmation banner shown in firefox above.
... the installed web application regardless of which browser and device you're using, when you choose to add the app to your home screen or app launcher, it'll show up there looking just like any application.

How to make PWAs installable - Progressive web apps (PWAs)
short_name: short name to be shown on the home screen.
... after the user indicates they wish to proceed with installation, the install banner is shown.
... if the user clicks the button, there is a final step showing what the app will look like, and letting the user choose if they definitely want to add the app.
... splash screen in some browsers, a splash screen is also generated from the information in the manifest, which is shown when the pwa is launched and while it's being loaded started up.

SVG documentation index - SVG: Scalable Vector Graphics
258 xlink:show deprecated, svg, svg attribute the xlink:show attribute indicates how a linked resource should be opened and is meant for xlink-aware processors.
... 278 introduction beginner, guide, needsbeginnerupdate, needsupdate, svg, svg:tutorial, tutorial svg is an xml language, similar to xhtml, which can be used to draw vector graphics, such as the ones shown to the right.
... 284 svg in html introduction intermediate, needsupdate, svg this article and its associated example shows how to use inline svg to provide a background picture for a form.
... it shows how javascript and css can be used to manipulate the picture in the same way you would script regular html.

passwords - Archive of obsolete content
so if you pass in an empty set of properties, all stored credentials are returned: function show_all_passwords() { require("sdk/passwords").search({ oncomplete: function oncomplete(credentials) { credentials.foreach(function(credential) { console.log(credential.username); console.log(credential.password); }); } }); } if you pass it a single property, only credentials matching that property are returned: function show_passwords_for_joe() { r...
...equire("sdk/passwords").search({ username: "joe", oncomplete: function oncomplete(credentials) { credentials.foreach(function(credential) { console.log(credential.username); console.log(credential.password); }); } }); } if you pass more than one property, returned credentials must match all of them: function show_google_password_for_joe() { require("sdk/passwords").search({ username: "joe", url: "https://www.google.com", oncomplete: function oncomplete(credentials) { credentials.foreach(function(credential) { console.log(credential.username); console.log(credential.password); }); } }); } to retrieve only credentials associated with your add-on, use the url property, initialized from sel...
...f.uri: function show_my_addon_passwords() { require("sdk/passwords").search({ url: require("sdk/self").uri, oncomplete: function oncomplete(credentials) { credentials.foreach(function(credential) { console.log(credential.username); console.log(credential.password); }); } }); } parameters options : object required options: name type oncomplete function the callback function that is called once the function completes successfully.

remote/parent - Archive of obsolete content
examples property retrieval this first example shows fetching a simple property from every existing and future process.
...js const { frames } = require("sdk/remote/child"); // listeners receive the frame the event was for as the first argument frames.port.on("changelocation", (frame, ref) => { frame.content.location += "#" + ref; }); // main.js const { frames, remoterequire } = require("sdk/remote/parent"); remoterequire("./remote.js", module); frames.port.emit("changelocation", "foo"); tab information this shows sending a message when a tab loads; this is similar to how the sdk/tabs module currently works.
... // remote.js const { frames } = require("sdk/remote/child"); frames.addeventlistener("pageshow", function() { // `this` is bound to the frame the event came from let frame = this; frame.port.emit("pageshow"); }, true); // main.js const { frames, remoterequire } = require("sdk/remote/parent"); remoterequire("./remote.js", module); // the first argument is the frame the message came from frames.port.on("pageshow", (frame) => { console.log(frame.frameelement.currenturi.host + ": pageshow"); }); globals functions remoterequire(id, module = null) loads a module in any existing and future child processes.

ui/button/toggle - Archive of obsolete content
attaching panels to buttons you can attach panels to buttons by passing the button as the position option to the panel's show() method or the panel's constructor: var { togglebutton } = require('sdk/ui/button/toggle'); var panels = require("sdk/panel"); var self = require("sdk/self"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onchange: handlechange }); var panel = panels.panel({ contenturl: se...
...lf.data.url("panel.html"), onhide: handlehide }); function handlechange(state) { if (state.checked) { panel.show({ position: button }); } } function handlehide() { button.state('window', {checked: false}); } disabling buttons you can disable a button by setting its disabled property to true.
...ate: browser: label = "my default" w1 t1 > displays "my default" t2 > displays "my default" w2 t3 > displays "my default" t4 > displays "my default" if you then set a label specific to t3 as "my t3 label", then set a label state specific to w2 as "my w2 label", then the button displayed when t3 is the active tab will still show "my t3 label", but the button displayed when t4 is the active tab will show "my w2 label": browser: label = "my default" w1 t1 > displays "my default" t2 > displays "my default" w2 t3 > displays "my t3 label" t4 > displays "my w2 label" setting the properties on the button instance sets the button's global state: button.l...

jpm - Archive of obsolete content
jpm usage is: jpm [command] [options] jpm supports the following global options: -h, --help - show a help message and exit -v, --version - print the jpm version number --addon-dir - directory for your source code, defaulting to the current directory installation jpm is distributed with the node package manager npm.
... version description entry point (which maps to "main" in package.json) author engines (supported applications) license most of these fields have a default, which is shown in brackets after the question.
... once you've supplied a value or accepted the default for these properties, you'll be shown the complete contents of "package.json" and asked to accept it.

Bootstrapped extensions - Archive of obsolete content
for example if you had a subfolder of en-us in locale folder your chrome.manifest file will have to contain: locale name_of_your_addon en-us locale/ here is an example: github :: l10n-properties - on startup of this add-on it will show a prompt saying usa or great britain, which ever it deems closest to your locale.
...here is an example showing how to use a localized html page as an options page: github :: l10n-html-options.
... edward lee shows off some helpful coding patterns and examples you can use in your bootstrapped add-on.

HTML in XUL for rich tooltips - Archive of obsolete content
lor='green'>green foo</font>") }, onmousetooltip: function(event) { //get the html tooltip string assigned to the element that the mouse is over (which will soon launch the tooltip) var txt = event.target.getattribute("tooltiphtml"); // get the html div element that is inside the custom xul tooltip var div = document.getelementbyid("myhtmltipdiv"); //clear the html div element of any prior shown custom html while(div.firstchild) div.removechild(div.firstchild); //safely convert html string to a simple dom object, stripping it of javascript and more complex tags var injecthtml = components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscriptableunescapehtml) .parsefragment(txt, false, null, div); //attach the dom object to the html div element div.ap...
...that tooltip is empty now, but we will use the mouseover event to dynamically populate the tooltip (which is about to be shown) with a different message for each menuitem.
... this is done by calling the onmousetooltip function, which will take the tooltiphtml attribute of the element that is being hovered over and safely convert that into dom and inject it into the tooltip that will soon be shown.

Rosetta - Archive of obsolete content
beyond ecmascript this is not the place for showing a full compiler written in ecmascript.
... we can show, however, a possible way to start from.
...the previous example shows a possible solution for all these cases, from the simplest to the hardest one.

Extension Versioning, Update and Compatibility - Archive of obsolete content
gwymgscfanakpn40pjfowt ub2hvdg8+oxmcif8d/9evwm8eh/ixuxyzlmrzts3o5tv9eway5ubctqdf1wgtsgk jrgzow1fitkzi7w0//c8ekdmlatguegfns2iltd5p/0kh/hf1rpc1wuqeqkcd4+l bcvq13ad</em:signature> </rdf:description> </rdf:rdf> some people prefer this alternate format (note that much of the information has been trimmed from this example for brevity in order to show the basic structure): <?xml version="1.0" encoding="utf-8"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <!-- this description resource includes all the update and compatibility information for a single add-on with the id foobar@developer.mozilla.org.
...the user then can click the show information button, and will see the information, on the right hand side.
...2887eda35b4ad2e3a0b60120ca271ce6e64ad2e3a0b60120ca271ce6e6</em:updatehash> note: the value of updatehash, must start with the string of hashing algorithm, it is a common error to delete this prefix, when setting new value to updatehash:sha256:78fc1d2887eda35b4ad2e3a0b60120ca271ce6e64ad2e3a0b60120ca271ce6e6 when a hash is specified the downloaded file is compared with the hash and an error shown if it does not match.

Multiple item extension packaging - Archive of obsolete content
the basic structure is shown below: /install.rdf install manifest /extension1.xpi extension /extension2.xpi extension /theme1.jar theme /theme2.jar theme ...
...the xml namespace xmlns:nc="http://home.netscape.com/nc-rdf#" must also be declared in your install.rdf as shown below.
... for the firefox and thunderbird 2.0 extension manager you can use the above syntax or <em:type>32</em:type> as shown below.

Adding sidebars - Archive of obsolete content
trees the bookmarks and history sidebars in firefox use the « xul reference « element to show their content.
... trees are another strong option when you need to show a great amount of information in a compact presentation.
... with a tree you can show a rather small amount of root nodes, giving the user the possibility to expand whichever ones are needed.

XUL user interfaces - Archive of obsolete content
etelementbyid("status") settoday(); } // called by clear button function cleardate() { datebox.value = "" refresh() } // called by today button function settoday() { var d = new date() datebox.value = (d.getmonth() + 1) + "/" + d.getdate() + "/" + d.getfullyear() refresh() } // called by date textbox function refresh() { var d = datebox.value var thedate = null showstatus(null) if (d != "") { try { var a = d.split("/") var thedate = new date(a[2], a[0] - 1, a[1]) 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.fir...
...stchild 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.tolocaledatestring()) } } to see the result exactly as intended, use the default theme in your browser.
...this wiki does not support xul and javascript in pages, so it is not possible to show the demonstration here.

MMgc - Archive of obsolete content
memory profiler mmgc's memory profiler can display the state of your application's heap, showing the different classes of object in memory, along with object counts, byte counts, and percentage of total memory.
...gc allocations are shown in the unmanaged vs.
...this has been shown to cut the finalize/sweep pause in half (which happens back to back atomically).

Working with BFCache - Archive of obsolete content
q: and to detect this we use pagehide/pageshow, correct?
...the pagehide event tells you whether the page is going into bfcache; the pageshow tells you whether it's coming from bfcache.
...q: hmm, so what event tells me “you'll never get a pageshow so you can drop the megabytes of info you've saved in firebug side table for that page?” a: an observer notification with the topic "inner-window-destroyed" whose subject is an nsisupportspruint64 containing the window id of the inner window being destroyed.

Download Manager preferences - Archive of obsolete content
browser.download.manager.showalertinterval the minimum number of milliseconds that must elapse between download complete alerts; if two downloads complete within this amount of time, only one alert is displayed.
... browser.download.manager.showalertoncomplete a boolean value that indicates whether or not an alert should be shown when downloads complete.
... browser.download.manager.showwhenstarting a boolean value that indicates whether or not to show the downloads window when a download begins.

Frequently Asked Questions - Archive of obsolete content
why does mozilla show source code/gibberish instead of svg?
... why does mozilla show an "xml parsing error" message instead of svg?
...mozilla will show this message when there's an xml well formedness error in the file it tried to load.

Creating XPI Installer Modules - Archive of obsolete content
one way of another, the chrome registry is shown the contents.rdf files; the contents.rdf files in turn point to new resources, and the resources are then registered with mozilla and accessible to the user.
...one of the buttons, labeled "show aphids", displays an alert dialog by calling a function defined in the javascript file barley.js.
...rley window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" width="175" height="375" x="20" y="20" persist="width height x y" orient="vertical" autostretch="always"> <script src="barley.js"/> <image src="barley.gif" /> <box orient="horizontal" autostretch="never"> <button label="barley corn" /> <button label="show aphids" oncommand="bar();" /> </box> </window> the other files that the window imports are defined in dark blue.

buttons - Archive of obsolete content
disclosure: a button to show more information.
...warning: if the accept and cancel buttons are actually shown is system dependent and is mainly controlled by the value of the boolean preference browser.preferences.instantapply.
...the cancel button might be shown as an additional possibility to close the dialog in this situation (windows and linux) or might be hidden, too (mac os).

toolbar.mode - Archive of obsolete content
icons show only icons.
... text show only text.
... full show both.

MenuModification - Archive of obsolete content
<script> function addsubmenu() { var popup = document.getelementbyid("file-popup"); var newmenu = document.createelement("menu"); popup.appendchild(newmenu); newmenu.label = "new"; newmenu.appenditem("document", "doc"); newmenu.appenditem("image", "image"); } </script> <menu label="file" onpopupshowing="addsubmenu()"> <menupopup id="file-popup"/> </menu>.
...also, need replace newmenu.label= "new" by newmenu.setattribute("label", "new"); (all when creating from bootstrap.js in a bootstrapped addon) the addsubmenu function is called during the popupshowing event, which will be fired when an attempt to open the menu is made.
...the following shows how the addsubmenu function above might be rewritten to handle this case.

Panels - Archive of obsolete content
if you want to set the focus to an element by default when a panel is opened, adjust the focus within a popupshown event handler.
... for instance, to have the textbox initially focused in the example above: <panel id="search-panel" onpopupshown="document.getelementbyid('search').focus()"> to disable the adjusting of focus when a panel is opened, set the noautofocus attribute to true: <panel noautofocus="true"> this will cause the focus to remain on the element within the main window that has focus when the panel is opened.
... this process of removing the focus when opening and closing a popup occurs after the popupshowing event or popuphiding event is fired, which means that if those events are cancelled, the focus is not adjusted.

Tooltips - Archive of obsolete content
this can be accomplished by using a popupshowing event listener and adjusting the tooltip as needed.
... the popupshowing event will be fired on the tooltip element just before the tooltip appears.
... for example: <tooltip id="iconic" onpopupshowing="this.lastchild.value = document.tooltipnode.label;"/> the document.tooltipnode property of the document holds the element that the mouse is hovering over.

Multiple Queries - Archive of obsolete content
when used together in this example, the results are combined and only three results are shown.
...however, the example shows that only content for three results are generated.
... <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:dc="http://purl.org/dc/elements/1.1/"> <template dc:title="canal"> <button uri="rdf:*" image="rdf:*" label="view" orient="vertical"/> </template> </hbox> this example shows only a single photo since a condition is used to filter out the other two photos.

Multiple Rule Example - Archive of obsolete content
the next example shows how we can do this.
...there is no reason for this -- it is only used in this example to show that there is no connection between the variables used in the two rules.
...the result would be that the palace photo would not show this information.

Simple Query Syntax - Archive of obsolete content
in the simple syntax, the builder will use the default query shown above, although the variable names are randomly generated.
...the filtering isn't shown in this example.
...-guide-photos4.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:r="http://www.xulplanet.com/rdf/"> <template> <rule r:country="http://www.daml.org/2001/09/countries/iso#it"> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://purl.org/dc/elements/1.1/title"/> </vbox> </rule> </template> </hbox> this example shows how a single attribute may be used to filter for only those results that have a country set to 'http://www.daml.org/2001/09/countries/iso#it'.

Adding Buttons - Archive of obsolete content
the example code below shows how to do this.
...the code to add is shown in red below: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button id="find-button" label="find"/> <button id="cancel-button" label="cancel"/> </window> you'll notice that the cancel ...
...if you open the file in mozilla, you should get something like the image shown here.

Adding Labels and Images - Archive of obsolete content
an example is shown below: example 1 : source view <label value="this is some text"/> the value attribute can be used to specify the text that you wish to have displayed.
...the example below shows this: <image src="images/banner.jpg"/> although you can use this syntax, it would be better in order to support different themes to use a style sheet to set the image url.
... a later section will describe how to use style sheets, but an example will be shown here for completeness.

Adding Properties to XBL-defined Elements - Archive of obsolete content
xul: <box id="random-box" class="randomizer"/> <button label="generate" oncommand="document.getelementbyid('random-box').number=math.random();"/> <button label="show" oncommand="alert(document.getelementbyid('random-box').number)"/> xbl: <binding id="randomizer"> <implementation> <field name="number"/> </implementation> </binding> a number field has been defined in the binding, which stores the random number.
...the example below shows this: <property name="number"> <getter> return this.getattribute('number'); </getter> <setter> var v = parseint(val,10); if (!isnan(v)) { this.setattribute('number', '' + v); } </setter> </property> the property in this example will only be able to hold integer values.
... the next section shows how to add methods to xbl-defined elements.

Box Objects - Archive of obsolete content
the following example shows this.
...example 2 : source view <script> function showpositionandsize() { var labelbox = document.getelementbyid('thelabel').boxobject; alert("position is (" + labelbox.x + "," + labelbox.y + ") and size is (" + labelbox.width + "," + labelbox.height + ")"); } </script> <button label="hide" oncommand="document.getelementbyid('thelabel').hidden = true;"/> <button label="show" oncommand="document.getelementbyid('th...
...elabel').hidden = false;"/> <button label="collapse" oncommand="document.getelementbyid('thelabel').collapsed = true;"/> <button label="uncollapse" oncommand="document.getelementbyid('thelabel').collapsed = false;"/> <button label="show position/size" oncommand="showpositionandsize();"/> <label id="thelabel" value="i am a label"/> note that if you hide and collapse the label, it will be treated as hidden.

Broadcasters and Observers - Archive of obsolete content
the simplest broadcaster is shown below.
...an example is shown below: example 2 : source view <broadcasterset> <broadcaster id="isoffline" label="offline" accesskey="f"/> </broadcasterset> <button id="offline_button"> <observes element="isoffline" attribute="label"/> </button> two attributes have been added to the observes element.
...an example is shown below.

Creating a Window - Archive of obsolete content
in fact, there will not be shown any window at all.
...add the xul template shown at the top of this page to the file and save it.
... troubleshooting if the xul window fails to show up on the desktop but has an icon on the desktop tool bar, check the xml-stylesheet declaration.

Creating a Wizard - Archive of obsolete content
a third option is to use the onpagehide and onpageshow attributes on the wizardpage element.
... these methods will be called when the page is hidden or shown, regardless of which button was pressed (except when cancel is pressed -- you need to use onwizardcancel to check for this.) these three methods should provide enough flexibility to handle navigation as you need to.
... pageshow wizardpage called on the page that the user is entering.

Element Positioning - Archive of obsolete content
an example is shown below: example 1: source view <button label="ok" width="100" height="40"/> however, it is not recommended that you do this.
...also, a minimum width of 15 ems has been set so that the text box will always show at least 15 characters.
...the following shows this attribute in use: example 6: source view <button label="push me please!" crop="right" flex="1"/> notice how the text on the button has had the right side of it cropped after the window is made smaller.

Input Controls - Archive of obsolete content
the following example shows some textboxes: example 1 : source view <label control="some-text" value="enter some text"/> <textbox id="some-text"/> <label control="some-password" value="enter a password"/> <textbox id="some-password" type="password" maxlength="8"/> multiline textbox the textbox examples above will create text inputs that can only be used for entering one line of text.
...if you open this window, you will see something much like that shown in the image.
...the example below shows some simple checkboxes and radio buttons.

More Event Handlers - Archive of obsolete content
example 1 : source view <vbox oncommand="alert(event.currenttarget.tagname);"> <button label="ok"/> <checkbox label="show images"/> </vbox> stop event propagation once you handle an event, regardless of where in the propagation the event is, you will likely want to stop the event from being sent to further elements, essentially stopping the capturing or bubbling phases from continuing.
...for example, the 'popupshowing' event is sent to a popup just before it is displayed.
...example 3 : source view <button label="types" type="menu"> <menupopup onpopupshowing="event.preventdefault();"> <menuitem label="glass"/> <menuitem label="plastic"/> </menupopup> </button> alternatively, for attribute event listeners, you can just return false from the code.

Simple Menu Bars - Archive of obsolete content
this letter is typically shown underlined on the menu title.
...the image here shows what the earlier example would look like without the menu bar.
...this letter is typically shown underlined on the menu title.

Splitters - Archive of obsolete content
this image shows the 4 panels with the splitter in a collapsed state.
... this image shows the 4 panels with the splitter resized to the right.
...as the images below show, when the grippy is clicked, the iframe is collapsed and the buttons shuffle up.

Trees - Archive of obsolete content
a drop-down menu will appear in the upper-right corner of the tree, which the user may use to show and hide individual columns.
...the button in the upper right corner can be used to hide and show the columns.
... make sure that you set an id attribute on each column or the hiding and showing of columns will not work in all versions of mozilla.

Trees and Templates - Archive of obsolete content
this example shows why the uri attribute becomes useful.
...as the tree builder is used and not the content builder, the structure of the elements in the above example must be as shown, with the treechildren element inside the rule.
...the following example shows a sample column: <treecol id="date" label="date" flex="1" persist="width ordinal hidden sortactive sortdirection" sort="rdf:http://home.netscape.com/web-rdf#lastmodifieddate"/> more details about the persist attribute will be described in the later section.

XPCOM Examples - Archive of obsolete content
the code below shows how to get a component which implements it: var wmdata = components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"].getservice(); wmdata.queryinterface(components.interfaces.nsiwindowdatasource); this code retrieves a window mediator data source component.
... 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> <...
... .getservice(components.interfaces.nsicookiemanager); var iter = cookiemanager.enumerator; while (iter.hasmoreelements()){ var cookie = iter.getnext(); if (cookie instanceof components.interfaces.nsicookie){ if (cookie.host == "www.mozillazine.org") menu.appenditem(cookie.name,cookie.value); } } } </script> <hbox> <menulist id="cookiemenu" onpopupshowing="getcookies();"/> </hbox> the getcookies() function will be called whenever the menu is opened, as indicated by the onpopupshowing attribute on the menulist.

XPCOM Interfaces - Archive of obsolete content
the table below shows some of the properties and methods of the nsilocalfile interface.
...the example below shows how to copy a file.
...an example is shown below: var bmarks = components.classes["@mozilla.org/browser/bookmarks-service;1"].getservice(); bmarks.queryinterface(components.interfaces.nsibookmarksservice); bmarks.addbookmarkimmediately("http://www.mozilla.org","mozilla",0,null); first, the component "@mozilla.org/browser/bookmarks-service;1" is retrieved and its service is placed in the variable bmarks.

Using Remote XUL - Archive of obsolete content
[optionally show what this looks like] the value of the flex attribute determines the extent to which the element will stretch relative to other flexible elements.
... an element with a flex of "2" is twice as flexible as an element with a flex of "1", so the first element might show up as twice as wide as the second.
... value="https://www.mozilla.org/bugs/" /> <menuitem label="bug writing" value="https://www.mozilla.org/quality/bug-writing-guidelines.html" /> </menupopup> </menu> <menu label="tools"> <menupopup> <menuitem label="view source" value="https://lxr.mozilla.org/seamonkey/" /> <menuitem label="tree status" value="https://tinderbox.mozilla.org/showbuilds.cgi?tree=seamonkey" /> <menuitem label="new checkins" value="https://bonsai.mozilla.org/cvsquery.cgi?treeid=default&amp;..." /> <menuitem label="submit a bug" value="https://bugzilla.mozilla.org/" /> </menupopup> </menu> <button label="faq" value="https://www.mozilla.org/faq.html" /> <button label="search" value="https...

Debugging a XULRunner Application - Archive of obsolete content
/* debugging prefs */ pref("browser.dom.window.dump.enabled", true); pref("javascript.options.showinconsole", true); pref("javascript.options.strict", true); pref("nglayout.debug.disable_xul_cache", true); pref("nglayout.debug.disable_xul_fastload", true); don't forget to change these preferences back to their defaults when you've finished debugging; leaving them as-is can significantly harm performance and usability.
...xulrunner.exe /path/to/application.ini -jsconsole by default the js console only shows errors from web content.
... to show errors in chrome javascript, the pref pref("javascript.options.showinconsole", true) must be set.

Digital Signatures - Archive of obsolete content
figure 1 shows a simplified view of the way a digital signature can be used to validate the integrity of signed data.
... figure 1 shows two items transferred to the recipient of some signed data: the original data and the digital signature, which is basically a one-way hash (of the original data) that has been encrypted with the signer's private key.
...(information about the hashing algorithm used is sent with the digital signature, although this isn't shown in the figure.) finally, the receiving software compares the new hash against the original hash.

Browser Detection and Cross Browser Support - Archive of obsolete content
although you can use object detection as just another means of distinguishing between vendor/version the technique shows it's true power when used to detect features rather than browsers.
...in our example, branch 2.2.0 was created before 2.12.36 however comparing these values as strings shows '2.2.0' > '2.12.36'.
...width) == 'number') { // gecko 1.0 (netscape 7) and internet explorer 5+ width = windowref.document.body.clientwidth; } else if (typeof(windowref.innerwidth) == 'number') { // navigator 4.x, netscape 6.x, compuserve 7 and opera width = windowref.innerwidth; } example 2 - object based feature detection cross browser support this example also illustrates the use of feature detection and shows the complications that can arise from the non standard implementations in other browsers.

::-ms-fill - Archive of obsolete content
by setting animation-name on ::-ms-fill, you can change the animation, as shown in this table: value description none turns off the animation so that no dots are displayed.
... -ms-bar shows animated dots that flow in a bar pattern.
... -ms-ring shows animated dots that flow in a ring pattern.

Error.stackTraceLimit - Archive of obsolete content
if the stacktracelimit property is set to 0 at the time an error is thrown, no stack trace is shown.
...if the stacktracelimit is set to infinity, the entire stack is shown.
... example the following example shows how to set and then get the stack trace limit.

LiveConnect Overview - Archive of obsolete content
// javascript 1.3 var theclass = java.lang.class.forname("java.lang.string"); var thearray = java.lang.reflect.array.newinstance(theclass, 5); in javascript 1.4 and later, you can pass a javaclass object directly to a method, as shown in the following example: // javascript 1.4 var thearray = java.lang.reflect.array.newinstance(java.lang.string, 5); arguments of type char in javascript 1.4 and later, you can pass a one-character string to a java method which requires an argument of type char.
...as shown in the following code, the javadog constructor takes the javascript object jsdog, which is defined as type jsobject, as an argument: import netscape.javascript.*; public class javadog{ public string dogbreed; public string dogcolor; public string dogsex; // define the class constructor public javadog(jsobject jsdog){ // use try...catch to handle jsexceptions here ...
...instead, convert the wrapper to a javascript string by appending the empty string to it, as shown here: var javastring = javaobj.methodthatreturnsastring(); var javascriptstring = javastring + ""; ...

RFE to the Custom Controls - Archive of obsolete content
output that shows the dom if output contains cdata section or text node and its data is any mozilla known language like xhtml/xul/svg then output should parse and display it (see bug 316817).
... output should show data in current locale format the bug 331585 address the issue.
... input that shows/modifies the dom like the request above for output.

XForms Input Element - Archive of obsolete content
introduction this element is an important and oft-used xforms element to show and change the instance data to which this xforms control is bound (see the spec).
... mozilla extensions labelposition - only for boolean types: show the label before or after the checkbox (see below) type restrictions the input element can be bound to a node containing simple content of any data type except xsd:base64binary, xsd:hexbinray or any data type derived from these.
...before shows the label first, then the checkbox, after shows the checkbox, than the label.

Archive of obsolete content
the new design clearly shows what some experts have been saying: that standards-based design can be visually compelling and preserve the interface conventions we've come to expect from web pages.
... updating an extension to support multiple mozilla applications this article shows how to take an existing extension and update it so that it can be used in additional mozilla applications.
...due to a limitation of the present implementation of nspr io on nt, programs must follow the following guideline: using ssh to connect to cvs using web standards in your web pages using workers in extensions this article shows you how to use worker threads in extensions to perform tasks in the background without blocking the user interface.

Bounding volume collision detection with THREE.js - Game development
this article shows how to implement collision detection between bounding boxes and spheres using the three.js library.
...this results in a new box mesh representing the bounding box, which shows the bounding box's shape, and can passed to the previously seen setfromobject method in order to have a bounding box matching the mesh.
...the first one showcases point vs.

Building up a basic demo with the PlayCanvas engine - Game development
we also rotate the box a bit to show that it's actually a 3d cube and not a square.
...it is also rotated around the x axis to show it's actually a 3d shape.
...to show actual animation, we need to make changes to these values inside the rendering loop, so they are updated on every frame.

Desktop mouse and keyboard controls - Game development
that way, if you already implemented the buttons as shown in the mobile touch controls article, it will work out of the box on the desktop too: var buttonenclave = this.add.button(10, 10, 'logo-enclave', this.clickenclave, this); the button will be placed ten pixels from the top left corner of the screen, use the logo-enclave image, and will execute the clickenclave() function when clicked.
...when showing the how to play screen where the various ways to control the ship in the game are shown, instead of showing them all to everyone, we can detect whether the game is launched on desktop or mobile and just show the appropriate controls for the device: if(this.game.device.desktop) { movetext = 'arrow keys or wasd to move'; shoottext = 'x or space to shoot'; } else { movetext = 'tap an...
...d hold to move'; shoottext = 'tap to shoot'; } if the game is running on desktop the cursor and w a s d keys message will be shown — if not, then the mobile touch controls message will be.

Implementing game control mechanisms - Game development
in this series of articles we will show you how you can approach building a game that can be played using touchscreen smartphones, mouse and keyboard, and also less common mechanisms such as gamepads.
... in the following articles we will show how to implement various different control mechanisms for captain rogers to support different platforms — from touch on mobile, through keyboard/mouse/gamepad on desktop, to more unconventional ones like tv remote, shouting to or waving your hand in front of the laptop, or squeezing bananas.
... unconventional controls — the final article showcases some unconventional control mechanisms, from the experimental to the slightly crazy, which you might not believe could be used to play the game.

Mobile accessibility - Learn web development
now turn two fingers around the screen like a dial to show the rotor and move between its options.
...op; movepanel(); } document.onmouseup = stopmove; to enable other forms of control, you need to use different, yet equivalent events — for example, touch events work on touchscreen devices: div.ontouchstart = function(e) { initialboxx = div.offsetleft; initialboxy = div.offsettop; positionhandler(e); movepanel(); } panel.ontouchend = stopmove; we've provided a simple example that shows how to use the mouse and touch events together — see multi-control-box-drag.html (see the example live also).
... note: you can also see fully functional examples showing how to implement different control mechanisms at implementing game control mechanisms.

What is accessibility? - Learn web development
on the other hand, if you are working on a gallery website showing interesting 3d art, it would be unreasonable to expect every piece of art to be perfectly accessible to visually impaired people, given that it is an entirely visual medium.
... to show that you care and have thought about accessibility, publish an accessibility statement on your site that details what your policy is toward accessibility, and what steps you have taken toward making the site accessible.
... summary this article should have given you a useful high-level overview of accessibility, shown you why it's important, and looked at how you can fit it into your workflow.

Advanced styling effects - Learn web development
blend modes css blend modes allow us to add blend modes to elements that specify a blending effect when two elements overlap — the final color shown for each pixel will be the result of a combination of the original pixel color, and that of the pixel in the layer underneath it.
...first, background-blend-mode — here we'll show a couple of simple <div>s, so you can compare the original with the blended version: <div> </div> <div class="multiply"> </div> now some css — we are adding to the <div> one background image and a green background color: div { width: 250px; height: 130px; padding: 10px; margin: 10px; display: inline-block; background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.pn...
...here we'll present the same two <div>s, but each one is now sat on top of a simple <div> with a purple background, to show how the elements will blend together: <article> no mix blend mode <div> </div> <div> </div> </article> <article> multiply mix <div class="multiply-mix"> </div> <div> </div> </article> here's the css we'll style this with: article { width: 280px; height: 180px; margin: 10px; position: relative; display: inline-block; } div { width: 250px; height: 130px; padding: 10px;...

Handling different text directions - Learn web development
this figure shows the two dimensions when in a horizontal writing mode.
... this figure shows the two dimensions in a vertical writing mode.
...you could replace left with inline-start as shown in the example below.

Introduction to CSS layout - Learn web development
this is useful for creating complex layout effects such as tabbed boxes where different content panels sit on top of one another and are shown and hidden as desired, or information panels that sit off screen by default, but can be made to slide on screen using a control button.
... simple positioning example to provide familiarity with these page layout techniques, we'll show you a couple of quick examples.
... the example below shows one such use; using css tables for layout should be considered a legacy method at this point, for those situations where you have very old browsers without support for flexbox or grid.

Web fonts - Learn web development
we'll show you below how to generate the required code.
... in the resulting screen, you first need to copy the line of html code shown and paste it into the head of your html file.
...@font-face tip: define font-weight and font-style to keep your css simple by roger johansson shows what to do in more detail.

How to build custom form controls - Learn web development
here is the result we want to achieve: this screenshot shows the three main states of our control: the normal state (on the left); the active state (in the middle) and the open state (on the right).
... state for this specific control select.classlist.add('active'); } // this function will be used each time the user wants to open/closed the list of options // it takes one parameter: // select : the dom node with the list to toggle function toggleoptlist(select) { // the list is kept from the control var optlist = select.queryselector('.optlist'); // we change the class of the list to show/hide it optlist.classlist.toggle('hidden'); } // this function will be used each time we need to highlight an option // it takes two parameters: // select : the dom node with the `select` class containing the option to highlight // option : the dom node with the `option` class to highlight function highlightoption(select, option) { // we get the list of all option available for our custom s...
...ut type="radio" name="fruit" value="strawberry" id="fruitstrawberry"><label for="fruitstrawberry">strawberry</label></li> <li><input type="radio" name="fruit" value="apple" id="fruitapple"><label for="fruitapple">apple</label></li> </ul> </fieldset> we'll do a little styling of the radio button list (not the legend/fieldset) to make it look somewhat like the earlier example, just to show that it can be done: .styledselect { display: inline-block; padding: 0; } .styledselect li { list-style-type: none; padding: 0; display: flex; } .styledselect [type=radio] { position: absolute; left: -100vw; top: -100vh; } .styledselect label { margin: 0; line-height: 2; padding: 0 0 0 4px; } .styledselect:not(:focus-within) input:not(:checked) + label { height: 0; outl...

Sending form data - Learn web development
as an example, your form data will be shown as follows in the chrome network tab.
... select "network" select "all" select "foo.com" in the "name" tab select "headers" you can then get the form data, as shown in the image below.
... example: python this example shows how you would use python to do the same thing — display the submitted data on a web page.

Introduction to HTML - Learn web development
getting started with html covers the absolute basics of html, to get you started — we define elements, attributes, and other important terms, and show where they fit in the language.
... we also show how a typical html page is structured and how an html element is structured, and explain other important basic language features.
...this article shows the syntax required to make a link and discusses best practices for links.

HTML table basics - Learn web development
adding headers with <th> elements now let's turn our attention to table headers — special cells that go at the start of a row or column and define the type of data that row or column contains (as an example, see the "person" and "age" cells in the first example shown in this article).
...take the following simple example, which shows the names of common animals.
... in some cases, we want to show the names of the males and females next to the animal name.

Introducing asynchronous JavaScript - Learn web development
previous overview: asynchronous next in this article we briefly recap the problems associated with synchronous javascript, and take a first look at some of the different asynchronous techniques you'll encounter, showing how they can help us solve such problems.
... the nature of asynchronous code let's explore an example that further illustrates the nature of async code, showing what can happen when we are not fully aware of code execution order and the problems of trying to treat asynchronous code like synchronous code.
... it worked :) if this confuses you, then consider the following smaller example: console.log("registering click handler"); button.addeventlistener('click', () => { console.log("get click"); }); console.log("all done"); this is very similar in behavior — the first and third console.log() messages will be shown immediately, but the second one is blocked from running until someone clicks the mouse button.

Object prototypes - Learn web development
you can check out existing prototype properties for yourself — go back to our previous example and try entering the following into the javascript console: person.prototype the output won't show you very much because we haven't defined anything on our custom constructor's prototype!
...now try the following: object.prototype you'll see a large number of methods defined on object's prototype property, which are then available on objects that inherit from object, as shown earlier.
... revisiting create() earlier on we showed how the object.create() method can be used to create a new object instance.

Perceived performance - Learn web development
even if an operation is going to take a long time (because of latency or or inavailability of the main thread), it is possible to keep the user engaged while they wait by showing a loading spinner, or a series of useful hints and tips (or jokes, or whatever else you think might be appropriate).
... such an approach is much better than just showing nothing, which will make it feel like it is taking a lot longer and possibly lead to your users thinking it is broken and giving up.
...in other words, first download everything you're going to actually show, but only the stuff you are actually using, then download the rest.

Server-side website programming first steps - Learn web development
server-side web frameworks the last article showed you what a server-side web application needs to do in order to respond to requests from a web browser.
... now we show how web frameworks can simplify these tasks, and help you choose the right framework for your first server-side web application.
... assessments this "first steps" module doesn't have any assessment because we haven't yet shown you any code.

Ember Interactivity: Footer functionality, conditional rendering - Learn web development
here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e.
...omponents/footer.js file and update it to the following: import component from '@glimmer/component'; import { inject as service } from '@ember/service'; export default class footercomponent extends component { @service('todo-data') todos; } now we need to go back to our todo-data.js file and add some functionality that will allow us to return the number of incomplete todos (useful for showing how many are left), and clear the completed todos out of the list (which is what the “clear completed” functionality needs).
...m '@ember/service'; export default class todocomponent extends component { @service('todo-data') todos; } next, go back again to our todo-data.js service file and add the following action just below the previous ones, which will allow us to toggle a completion state for each todo: @action togglecompletion(todo) { todo.iscompleted = !todo.iscompleted; } updating the template to show completed state finally, we will edit the todo.hbs template such that the checkbox's value is now bound to the iscompleted property on the todo, and so that on change, the togglecompletion() method on the todo service is invoked.

Ember app structure and componentization - Learn web development
enter the following command into your terminal: ember generate component header these will generate some new files, as shown in the resulting terminal output: installing component create app/components/header.hbs skip app/components/header.js tip to add a class, run `ember generate component-class header` installing component-test create tests/integration/components/header-test.js header.hbs is the template file where we’ll include the html structure for just that component.
... note: the header.js file (shown as skipped) is for connection to a backing glimmer component class, which we don't need for now, as they are for adding interactivity and state manipulation.
...we'll look at showing different todo items in the next article!

React interactivity: Events and state - Learn web development
it should end up looking something like this: function handlesubmit(e) { e.preventdefault(); alert('hello, world!'); } to use this function, add an onsubmit attribute to the <form> element, and set its value to the handlesubmit function: <form onsubmit={handlesubmit}> now if you head back to your browser and click on the "add" button, your browser will show you an alert dialog with the words "hello, world!" — or whatever you chose to write there.
...update it as follows: function handlesubmit(e) { e.preventdefault(); props.addtask("say hello!"); } clicking on the "add" button in your browser will prove that the addtask() callback function works, but it'd be nice if we could get the alert to show us what we're typing in our input field!
...change the console.log() to setname(), as shown below: function handlechange(e) { setname(e.target.value); } now we need to change our handlesubmit() function so that it calls props.addtask with name as an argument — remember our callback prop?

Beginning our React todo list - Learn web development
nput" classname="input input__lg" name="text" autocomplete="off" /> <button type="submit" classname="btn btn__primary btn__lg"> add </button> </form> <div classname="filters btn-group stack-exception"> <button type="button" classname="btn toggle-btn" aria-pressed="true"> <span classname="visually-hidden">show </span> <span>all</span> <span classname="visually-hidden"> tasks</span> </button> <button type="button" classname="btn toggle-btn" aria-pressed="false"> <span classname="visually-hidden">show </span> <span>active</span> <span classname="visually-hidden"> tasks</span> </button> <button type="button" classname="btn t...
...oggle-btn" aria-pressed="false"> <span classname="visually-hidden">show </span> <span>completed</span> <span classname="visually-hidden"> tasks</span> </button> </div> <h2 id="list-heading"> 3 tasks remaining </h2> <ul role="list" classname="todo-list stack-large stack-exception" aria-labelledby="list-heading" > <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="vi...
...for example: <button type="button" classname="btn toggle-btn" aria-pressed="true"> <span classname="visually-hidden">show </span> <span>all</span> <span classname="visually-hidden"> tasks</span> </button> here, aria-pressed tells assistive technology (like screen readers) that the button can be in one of two states: pressed or unpressed.

Starting our Svelte Todo list app - Learn web development
</label> </h2> <input type="text" id="todo-0" autocomplete="off" class="input input__lg" /> <button type="submit" disabled="" class="btn btn__primary btn__lg"> add </button> </form> <!-- filter --> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" aria-pressed="true"> <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" aria-pressed="false"> <span class="visually-hidden">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" aria-pressed="false"> <span class="visually-hidden">show</span> <...
... a label showing the total number of tasks and the completed tasks.
...for example: <button class="btn toggle-btn" aria-pressed="true"> <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> here, aria-pressed tells assistive technology (like screen readers) that the button can be in one of two states: pressed or unpressed.

TypeScript support in Svelte - Learn web development
in this section we'll show you how to setup a svelte project with typescript support to give it a try.
...ng: <!-- components/filterbutton.svelte --> <script lang='ts'> import { filter } from '../types/filter.enum' export let filter: filter = filter.all </script> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === filter.all} aria-pressed={filter === filter.all} on:click={()=> filter = filter.all} > <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === filter.active} aria-pressed={filter === filter.active} on:click={()=> filter = filter.active} > <span class="visually-hidden">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn to...
...ggle-btn" class:btn__primary={filter === filter.completed} aria-pressed={filter === filter.completed} on:click={()=> filter = filter.completed} > <span class="visually-hidden">show</span> <span>completed</span> <span class="visually-hidden">tasks</span> </button> </div> here we are just importing the filter enum, and using it instead of the string values we used previously.

Vue conditional rendering: editing existing todos - Learn web development
update your todoitem’s template as shown below.
... result: itemedited() method is invoked, which emits the item-edited event (which is then listened for inside app.vue, see above), and sets this.isediting back to false, so that the edit form is no longer shown on re-render.
... result: editcancelled() method is invoked, which sets this.isediting back to false, so that the edit form is no longer shown on re-render.

Deploying our app - Learn web development
we push the code to github, deploy it using netlify, and even show you how to add a simple test into the process.
... you should now be able to run the following command in the root of your project directory to run the production build step (first quit the running process with ctrl + c if you need to): npm run build this should give you an output like the following, showing you the production files that were created, how big they are, and how long they took to build: dist/src.99d8a31a.js.map 446.15 kb 63ms dist/src.99d8a31a.js 172.51 kb 5.55s dist/stars.7f1dd035.svg 6.31 kb 145ms dist/asteriod2.3ead4904.svg 3.51 kb 155ms dist/asteriod1.698d75e9.svg 2.9 kb 153ms dist/src.84f2edd1.css.map 2.57 kb 3m...
...i'll show you how to add an initial test to your project and how to use the test to prevent or to allow the project deployment to happen.

Mozilla's Section 508 Compliance
incomplete, we show focus but need to expose it programmatically by supporting carbon/cocoa accessibility.
...with showsounds enabled in operating system.
...with showsounds enabled in operating system.

A bird's-eye view of the Mozilla framework
it examines what happens when the user performs a simple user interface (ui) action such as clicking a link in the contents panel of the help viewer window shown below.
...figure 2 shows this structure.
... inside an xpcom component figure 3 shows a more detailed view of an xpcom component.

Command line options
in general, the syntax is as follows: application -option -option "argument" -option argument examples the following examples show the use of the "-profilemanager" command, which will open the profile manager prior to starting firefox or thunderbird: windows select run from windows start menu.
... -showdate date show your schedule of the given date.
... sunbird -showdate 08/04/2008 -subscribe url or -url url subscribe to the given url.

Creating reftest-based unit tests
if one has software that multiplies numbers, one wants a regression test to show that 2 * 2 continues to be calculated to be 4, not something similar to but not quite exactly 4.
...experiments with this have shown it to be not as easy as one would hope.
... reftests and preferences in order to use preferences that are not listed in the browser's built-in preferences files such as all.js (in other words, preferences that will not show up in about:config) it is necessary to add the preference to testing/profiles/reftest/user.js.

Debugging on Mac OS X
at this point you can run the application from xcode, and when you pause or hit breakpoints it should show open the correct source file at the correct line.
... running a debug session make sure breakpoints are active (which implies running under the debugger) by opening the product menu and selecting "debug / activate breakpoints" (also shown by the "breakpoints" button in the top right section of the main window).
...the information area at the top of the window will show "waiting for plugin-container to launch" from a command line, run your build of firefox.

How Mozilla's build system works
to view information about the tiers, you can execute the following special make targets: command effect make echo-tiers show the final list of tiers.
... make echo-dirs show the list of non-static source directories to iterate over, as determined by the tier list.
... make echo-variable-static_dirs show the list of static source directories to iterate over, as determined by the tier list.

API-provided widgets
viewid only useful for views (and required there): the id of the that should be shown when clicking the widget.
... showinprivatebrowsing whether to show the widget in private browsing mode (optional, default: true) event handlers you can also define several event handlers which will be called at various stages in a widget's lifetime: event handler name description onbuild(adoc) only useful for custom widgets (and required there); a function that will be invoked with the document...
... onviewshowing(aevt) only useful for views; a function that will be invoked when a user shows your view.

Download
method overview promise start(); promise launch(); promise showcontainingdirectory(); promise cancel(); promise removepartialdata(); promise whensucceeded(); promise finalize([optional] boolean aremovepartialdata); properties attribute type description canceled read only boolean indicates that the download has been canceled.
... showcontainingdirectory() shows the folder containing the target file, or where the target file will be saved.
... promise showcontainingdirectory(); parameters none.

JNI.jsm
= intarray.new(5); // object { js#obj: cdata, length: 5 } ia.get(0); // 0 ia.get(1); // 0 ia.get(2); // 0 ia.get(3); // 0 ia.get(4); // 0 ia.set(2, 10); // void ia.get(2); // 10 ia.setelements(3, [50, 75]); // void ia.get(0); // 0 ia.get(1); // 0 ia.get(2); // 10 ia.get(3); // 50 ia.get(4); // 75 } finally { if (my_jenv) { jni.unloadclasses(my_jenv); } } casting this example shows how to cast, the casting happens at jni.classes.android.view.windowmanager.__cast__(wm) below: function main() { var my_jenv; try { my_jenv = jni.getforthread(); var sig = { windowmanager: 'landroid/view/windowmanager;', windowmanager_layoutparams: 'landroid/view/windowmanager$layoutparams;', viewgroup_layoutparams: 'landroid/view/vie...
...aparamsarr.join('') : '') + ')' + aret; } function fullyqualifiednameofclass(aclass) { // aclass is a string with l and ; arround it return aclass.substr(1, aclass - 2); } examples read java strings this example shows how to read java strings as javascript strings.
...this shows how to get the paths to the "pictures" folder: components.utils.import("resource://gre/modules/jni.jsm"); components.utils.import("resource://gre/modules/osfile.jsm"); // because we use os.path.join in this example var my_jenv = null; try { my_jenv = jni.getforthread(); var sig = { environment: 'landroid/os/environment;', string: 'ljava/lang/string;', file: 'ljava/io/file;' }; var environment = jni.loadclass(my_jenv, sig.environment.substr(1, sig.environment.length - 2), { static_fields: [ { name: 'directory_pictures', sig: sig.string } ], static_methods: [ { name:'getexternalst...

NSS API Guidelines
the nss apis are layered, as shown in this diagram: the boxes in the gray section, towards the center, are exported only through pkcs #11.
... experience shows that users of the security library expect arenas to be threadsafe, so we added locking, and other useful changes.
...example code should be included in the documentation, to show how to safely use these data objects.

NSS tools : certutil
ids are displayed in hexadecimal ("0x" is not shown).
...use the -h option to show the complete list of arguments for each command option.
...mozilla nss bug 836477 https://bugzilla.mozilla.org/show_bug.cgi?id=836477 ...

NSS Tools ssltap
the following examples show the output from commonly used combinations of options.
... example 1 the s and x options in this example turn on ssl parsing and show undecoded values in hex/ascii format.
...both formats are shown for each record.

compare-locales
options to get a brief list of available options, use the --help flag: $ compare-locales --help the output the output of compare-locales shows the missing and obsolete strings in a pseudo-diff format.
... ab-cd browser chrome/browser browser.dtd +backforwardmenu.tooltip +fullzoomenlargecmd.commandkey3 +fullzoomreducecmd.commandkey2 +fullzoomresetcmd.commandkey2 +organizebookmarks.label -showallbookmarkscmd2.label migration/migration.dtd -importfromfile.accesskey -importfromfile.label +importfromhtmlfile.accesskey +importfromhtmlfile.label you can assume changed strings when you see entities removed and added with a similar name.
... the file names will be shown in a hierarchical form, so in the example above, your files are browser.dtd in ab-cd/browser/chrome/browser and migration.dtd in another directory level deeper.

Redis Tips
here's a stupid node script to show how this works: #!/usr/bin/env node var r = require('redis').createclient(); r.multi() .set("foo", 42) .set("bar", "ice cream") .set("baz", 6.28) .get("foo") .get("bar") .get("baz") .exec(function(err, resultlist) { console.log(json.stringify(resultlist, null, 2)); r.end(); // terminate the redis connection; node can quit }); when run, this prints: [ "ok", "ok", ...
... here's an example, again using two separate redis clis, to show how it works.
... i'll show this in the node console, to illustrate how the optional parameters are done.

Places Developer Guide
the example below shows how to enumerate a bookmark folder's contents, and how to access the properties of the items themselves.
...the example below shows how to search through all bookmarks, and to iterate over the results.
...the example below shows how to search through browser history, and to iterate over the results.

Index
this article will show you how to use the available interfaces in several mozilla products.
...furthermore we show the new panel only for imap accounts...
...for example, to request the 'show all threads' view use the constant: 1268 nsstaticmoduleinfo this data structure is used by ns_initxpcom3 to specify static xpcom modules.

nsIAppShellService
nsixulwindow createtoplevelwindow( in nsixulwindow aparent, in nsiuri aurl, in boolean ashowwindow, in boolean aloaddefaultpage, in pruint32 achromemask, in long ainitialwidth, in long ainitialheight, in nsiappshell aappshell ); parameters aparent the parent window.
... ashowwindow obsolete since gecko 1.8 the window remains invisible if pr_false.
...these windows are generally shown in the windows taskbar, and the application knows it can not quit until it is out of registered windows.

nsICategoryManager
examples print out a list of all categories this snippet shows how to print out a list of all categories in c++.
...hasmore) && hasmore) { nscomptr<nsisupports> elem; cats->getnext(getter_addrefs(elem)); nscomptr<nsisupportscstring> category = do_queryinterface(elem, &rv); if (ns_failed(rv)) break; nsembedcstring categoryname; rv = category->getdata(categoryname); if (ns_failed(rv)) break; printf("%s\n", categoryname.get()); } return ns_ok; } this snippet shows how to print out a list of all categories in javascript.
...rymanager.enumeratecategory("app-startup"); var entries = []; while (enumerator.hasmoreelements()) { var item = enumerator.getnext(); var entry = item.queryinterface(components.interfaces.nsisupportscstring) entries.push(entry.tostring()); } entries.sort(); var entriesstring = entries.join("\n"); dump(entriesstring + "\n"); disable currently loaded plugins by type this snippet here shows how to disable plugins that are currently loaded for the file type of pdf.

nsIConsoleService
if no messages are logged, this function will return a count of 0, but allocating a placeholder word for messages, showing as a 0-length array when called from the script.
...if no messages are logged, this function will return a count of 0, but allocating a placeholder word for messages, showing as a 0-length array when called from the script.
...you may pass null if you are lazy; this will prevent the source line showing in the error console.

nsICryptoHash
the following example shows how to compute the sha256 hash of a file: // hardcoded here for convenience var path = "c:\\windows\\notepad.exe"; var f = components.classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile); f.initwithpath(path); var istream = components.classes["@mozilla.org/network/file-input-stream;1"] .createinstance(components.inter...
...this example, while simple, shows most of the functionality of the interface.
... the example below shows how to convert a string to bytes in the utf-8 encoding, and then compute the sha256 hash of it.

nsIDownloadManagerUI
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void getattention(); void show([optional] in nsiinterfacerequestor awindowcontext, [optional] in unsigned long aid, [optional] in short areason); attributes attribute type description visible boolean true if the download manager ui is visible; otherwise false.
... show() shows the download manager's user interface to the user.
... void show( in nsiinterfacerequestor awindowcontext, optional in unsigned long aid, optional in short areason optional ); parameters awindowcontext optional the parent window context to show the user interface.

Building an Account Manager Extension
furthermore we show the new panel only for imap accounts...
... components.utils.import("resource://gre/modules/xpcomutils.jsm"); //class constructor function devmoaccountmanagerextension() {}; // class definition devmoaccountmanagerextension.prototype = { name : "devmo-account", chromepackagename : "example@mozilla.org", showpanel: function(server) { //this panel is only shown for imap accounts...
....mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="parent.onpanelloaded('am-devmo-account.xul');"> <script type="application/javascript" src="chrome://messenger/content/accountmanager.js"/> <script type="application/javascript" src="chrome://example@mozilla.org/content/am-devmo-account.js"/> <dialogheader title="devmo example panel"/> <description> this panel is only shown in imap accounts...

nsIMsgAccountManagerExtension
inherits from: nsisupports method overview boolean showpanel(in nsimsgincomingserver server); attributes attribute type description name acstring name of the account manager extension.
... methods showpanel() before displaying a panel in the account manager this method is triggered.
... boolean showpanel( in nsimsgincomingserver server ); parameters server the account for which the panel should be displayed.

nsIMsgDBView
viewnavigate() change the view to show a particular message.
... void loadmessagebyurl(in string aurl); parameters aurl the url of the message reloadmessage() reload the currently shown message.
... void reloadmessage(); reloadmessagewithallparts() reload the currently shown message with fetchcompletemessage set to true.

nsIScriptError
you may pass null if you are lazy; that will prevent showing the source line in javascript console.
...you may pass null if you are lazy; that will prevent showing the source line in javascript console.
...you may pass null if you are lazy; that will prevent showing the source line in javascript console.

nsIXULWindow
void assumechromeflagsarefrozen(); void center(in nsixulwindow arelative, in boolean ascreen, in boolean aalert); nsixulwindow createnewwindow(in print32 achromeflags, in nsiappshell aappshell); nsidocshelltreeitem getcontentshellbyid(in wstring id); void removechildwindow(in nsixulwindow achild); void showmodal(); attributes attribute type description chromeflags pruint32 chromeflags are from nsiwebbrowserchrome.
... showmodal() shows the window as a modal window.
... void showmodal(); parameters none.

nsPIPromptService
this is the system sound name which should be played when the dialog is shown.
...if this is not 0, the all buttons are disabled when the dialog is shown.
...this is the sound event id which should be played when the dialog is shown.

Reference Manual
foo3 = dont_addref(rawfoo3ptr); // the annotations described in the table apply to both forms of constructor, // and to plain-old assignment any of the annotations shown in the table can appear in all the positions demonstrated with dont_addref.
...nscomptr<t> = t*, nscomptr<t> = dont_queryinterface( t* ) the default behavior, shown in the table as t*, is to addref the new value, but not to call queryinterface against it.
... // you _must_ handle this case with the two step solution shown above.

Xray vision
xray vision helps javascript running in a privileged security context safely access objects created by less privileged code, by showing the caller only the native version of the objects.
...so when chrome code accesses content objects, it sees them with xray vision: // chrome code var transfer = gbrowser.contentwindow.confirm("transfer all my money?"); // calls the native implementation note that using window.confirm() would be a terrible way to implement a security policy, and is only shown here to illustrate how xray vision works.
...le: true,' + ' configurable: true,' + ' get: function() { return "wait, is this really a getter?"; }' + '});'; var sandbox = components.utils.sandbox("https://example.org/"); components.utils.evalinsandbox(sandboxscript, sandbox); // 1) trying to access properties in the prototype that have been redefined // (non-own properties) will show the original 'native' version // note that functions are not included in the output console.log("1) property redefined in the prototype:"); console.log(sandbox.me.tosource()); // -> "({firstname:"joe", address:{street:"main street"}, lastname:"smith"})" // 2) trying to access properties on the object that shadow properties // on the prototype will show the original 'native' version console.log("...

Theme Packaging
this document describes only how themes are packaged in order to be shown in firefox's themes window.
... preview.png is a preview image which will show when double-clicked on a theme in the appearance section of the add-ons manager.
...48x48) png (may contain alpha transparency) which will show up in the appearance section of the add-ons manager.

Using tab-modal prompts
even if you set it to the browser window ("var thewindow = window") the modal alert will be shown in the current tab.
...ozilla.org/prompter;1'].getservice(components.interfaces.nsipromptfactory); var prompt = promptfact.getprompt(window, components.interfaces.nsiprompt); var promptbag = prompt.queryinterface(components.interfaces.nsiwritablepropertybag2); promptbag.setpropertyasbool('allowtabmodal', true); var check = {value: false}; //initial state of checkbox, however if no text is supplied the checkbox is not shown var input = {value: 'pre filled value'}; var ok = prompt.prompt.apply(null, ['title - but not shown in tab modal', 'text goes here', input, 'check text, if no text, checkbox is not shown', check]); //this here is just an alert, showing the values of the prompt prompt.alert.apply(null, ['title not shown in modal', 'user clicked ok: ' + ok + '\n' + 'checked: ' + check.value + '\ninput value: ' + ...
...input.value]); note: because the prompts are shown in a tab, if the tab is closed while the prompt is open it will throw an exception.

Zombie compartments
for example, if i open https://bugzilla.mozilla.org/show_bug.cgi?id=668871 in one tab, then compartment(https://bugzilla.mozilla.org/show_bug.cgi?id=668871) will show up in about:memory.
... if i then open https://bugzilla.mozilla.org/show_bug.cgi?id=700547 and close the first tab, the same compartment will continue to be used.
... the more you exercise the add-on, the more thorough the testing will be, but in practice a lot of problems show up quickly.

Drawing and Event Handling - Plugins
because the drag manager calls both handlers no matter where the cursor is, the browser does not show the drag highlight when the cursor is over an instance rectangle.
...the plug-in can then show the drag highlight and handle drops when they occur within the instance rectangle.
... this code shows the specific data passed through this method for each platform: #ifdef xp_mac typedef eventrecord npevent; #elif defined(xp_win) typedef struct _npevent { int16 event; int16 wparam; int32 lparam; } npevent; #elif defined(xp_unix) typedef xevent npevent; #else typedef void npevent; #endif /* xp_mac */ int16 npp_handleevent(npp instance, npevent* event); on mac os, when npp_...

Initialization and Destruction - Plugins
for an example that shows the use of both the np_initialize and np_shutdown methods, see initialize and shutdown example.
...the example shows the use of the optional save parameter of npp_destroy and saved parameter of npp_new.
... void np_shutdown(void); for an example that shows both the np_initialize and np_shutdown methods, see initialize and shutdown example.

Plug-in Basics - Plugins
plug-ins like these are now available: multimedia viewers such as adobe flash and adobe acrobat utilities that provide object embedding and compression/decompression services applications that range from personal information managers to games the range of possibilities for using plug-in technology seems boundless, as shown by the growing numbers of independent software vendors who are creating new and innovative plug-ins.
... var plugin = mimetype.enabledplugin; if (plugin) { // yes, so show the data in-line document.writeln("here\'s a movie: <object data='mymovie.swf' height='100' width='100'></object>"); } else { // no, so provide a link to the data document.writeln("<a href='mymovie.swf'>click here</a> to see a movie."); } } else { // no, so tell them so document.writeln("sorry, can't show you this movie."); } overview of plug-in structure this sec...
... the following example shows an embed element nested within an object element, which is necessary for browsers that do not support the embed element.

Introduction to DOM Inspector - Firefox Developer Tools
the following descriptions provide an overview of what these viewers are about: the dom nodes viewer shows attributes of nodes that can take them, or the text content of text nodes, comments, and processing instructions.
... the css rules viewer shows the css rules that are applied to the node.
...her powerful interactive feature of the dom inspector is that when you have the dom inspector open and have enabled this functionality by choosing edit > select element by click or by clicking the little magnifying glass icon in the upper left portion of the dom inspector application, you can click anywhere in a loaded web page or the the inspect chrome document, and the element you click will be shown in the document pane in the dom nodes viewer and information displayed in the object pane.

Debugging service workers - Firefox Developer Tools
when you open the application panel’s service workers view on a page that doesn't have a service worker registered, you'll get the following output shown: this gives you some advice on what to do if you don't have a service worker registered, and were perhaps expecting there to be one registered!
... note: there is currently a bug whereby the network monitor cannot show network requests from a service worker running in a different process to the application (bug 1432311).
... finding registered service workers on other domains as mentioned above, the service worker view of the application panel shows all the service workers registered on the current domain.

Browser Console - Firefox Developer Tools
beginning with firefox 68, the browser console allows you to show or hide messages from the content process (i.e.
... the messages from scripts in all the opened pages) by setting or clearing the checkbox labeled show content messages.
... the following image shows the browser console focused on the same page as above after clicking on the show content messages checkbox.

Examine, modify, and watch variables - Firefox Developer Tools
each object can be expanded, using a disclosure triangle, to show its properties.
... if a variable exists in the source but has been optimized away by the javascript engine, then it is shown in the variables view, but is given the value (optimized away), and is not editable.
...at that point, a box showing your active watch expressions and their current values will appear: you can step through your code, watching the value of the expression as it changes; each time it does, the box will flash briefly yellow.

Set event listener breakpoints - Firefox Developer Tools
there's an issue here — the console is showing that the keypress event is being fired somewhere inside jquery.
... instead, it’d be far more useful if we showed where in our own app code is calling the jquery that fired the event.
... now the logs will show where in your app jquery was called, rather than where in jquery the event was fired: filter by event type also added to firefox 71 is a new filter by event type...

Debugger-API - Firefox Developer Tools
here is a javascript program in the process of running a timer callback function: a running javascript program and its debugger shadows this diagram shows the various types of shadow objects that make up the debugger api (which all follow some general conventions): a debugger.object represents a debuggee object, offering a reflection-oriented api that protects the debugger from accidentally invoking getters, setters, proxy traps, and so on.
... examples here are some things you can try out yourself that show off some of debugger’s features: setting a breakpoint in a page, running a handler function when it is hit that evaluates an expression in the page’s context.
... showing how many objects different call paths allocate.

All 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...
... show/hide more information about current property (computed view only, when a property is selected) enter or space return or space enter or space open mdn reference page about current property (computed view only, when a property is selected) f1 f1 f1 open current css file in style editor (computed view only, when more information is shown for a property and a css f...
...ad code ctrl + shift + r cmd + shift + r ctrl + shift + r save the pad ctrl + s cmd + s ctrl + s open an existing pad ctrl + o cmd + o ctrl + o create a new pad ctrl + n cmd + n ctrl + n close scratchpad ctrl + w cmd + w ctrl + w pretty print the code in scratchpad ctrl + p cmd + p ctrl + p show autocomplete suggestions ctrl + space ctrl + space ctrl + space show inline documentation ctrl + shift + space ctrl + shift + space ctrl + shift + space eyedropper command windows macos linux select the current color enter return enter dismiss the eyedropper esc esc esc move by 1 pixel arrow key...

Inspecting web sockets - Firefox Developer Tools
the live-updated table shows data for sent (green arrow) and received (red arrow) frames.
... columns in the response pane in the response pane, you can choose to show the following information about each frame: data size time opcode maskbit finbit the data and time columns are visible by default, but you can customize the interface to see more columns by choosing which ones to show from the context menu that is opened by right-clicking in the table header.
... expanding each message selecting a message in the list shows a preview of the data being sent in that message, at the bottom of the response pane.

Performance Analysis - Firefox Developer Tools
the network monitor includes a performance analysis tool, to help show you how long the browser takes to download the different parts of your site.
...the tables group resources by type, and show the total size of each resource and the total time it took to load them.
... the accompanying pie chart shows the relative size of each resource type.

CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
in the html pane in the html pane, an element laid out with flexbox has the word flex next to it as shown in the following image: click the word flex in the html pane to keep the overlay visible when you move the mouse away from the container.
... clicking the icon toggles the display of an overlay on the page, which appears over the selected flex container that displays an outline around each flex item: the overlay will still be shown when you select other elements from the inspector panel, so you can edit related css properties and see how the flex items are affected by your changes.
... if you click on the item, the display shifts to show details about that element: this view shows information about the calculations for the size of the selected flex item: a diagram visualizing the sizing of the flex item content size - the size of the component without any restraints imposed on it by its parent flexibility - how much a flex item grew or shrunk based on its flex-grow value when there is extra free space or its flex-shrink v...

Intensive JavaScript - Firefox Developer Tools
the bottom half, which is correlated with the timeline summary in time, shows frame rate.
...by switching to the flame chart view we can find out: this shows us the js call stack at this point in the execution.
...instead of a single solid orange block, each button-press shows up as a long sequence of very short orange blocks.

UI Tour - Firefox Developer Tools
for example, in the screenshot below a long-running paint operation (shown as a green bar in the waterfall overview) corresponds to a drop in the frame rate: zooming in you can use the overview to select a slice of the recording to examine in more detail.
...in the screenshot below we've selected that drop in the frame rate, and can see the long-running paint operation in more detail: details pane the details pane shows whichever tool is currently selected.
... the allocations view is like the call tree view, but for allocations: it shows you which functions in your page are allocating the most memory over the course of the profile.

Web Audio Editor - Firefox Developer Tools
if, instead, you've connected a node to an audioparam in another node, then the connection is shown as a dashed line between the nodes, and is labeled with the name of the audioparam: inspecting and modifying audionodes if you click on a node, it's highlighted and you get a node inspector on the right hand side.
... in the pane that shows you the node's details, there's an on/off button: click it, and the graph will be modified to bypass this node, so it will no longer have any effect.
... nodes that are bypassed are shown with a hatched background: ...

AbstractRange - Web APIs
ned on the way to the forum...</p> <aside class="callout"> <h2>aside</h2> <p>an interesting aside to share with you...</p> </aside> </section> </article> <pre id="log"></pre> </div> after loading the html and constructing the dom representation of the document, the resulting dom tree looks like this: in this diagram, the nodes representing html elements are shown in green.
... eah row beneath them shows the next layer of depth into the dom tree.
... blue nodes are text nodes, containing the text that gets shown onscreen.

Background Tasks API - Web APIs
the css is not shown, since it's not particularly crucial to understanding this functionality.
...issions...</div> <progress id="progress" value="0"></progress> <div class="button" id="startbutton"> start </div> <div class="label counter"> task <span id="currenttasknumber">0</span> of <span id="totaltaskcount">0</span> </div> </div> <div class="logbox"> <div class="logheader"> log </div> <div id="log"> </div> </div> the progress box uses a <progress> element to show the progress, along with a label with sections that are changed to present numeric information about the progress.
... progressbarelem is the <progress> element showing the percentage of the tasks processed so far.

Clients.openWindow() - Web APIs
if the calling script doesn't have permission to show popups, openwindow() will throw an invalidaccesserror.
... in firefox, the method is allowed to show popups only when called as the result of a notification click event.
... examples // send notification to os if applicable if (self.notification.permission === 'granted') { const notificationobject = { body: 'click here to view your messages.', data: { url: self.location.origin + '/some/path' }, // data: { url: 'http://example.com' }, }; self.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...

EventTarget.addEventListener() - Web APIs
just add a getter for that option using code similar to what is shown above.
...this is shown in the following example: <script> function logid() { console.log(this.id); } </script> <table id="my_table" onclick="logid();"><!-- when called, `this` will refer to the global object --> ...
... you can override this behavior by explicitly setting the value of passive to false, as shown here: /* feature detection */ let passiveifsupported = false; try { window.addeventlistener("test", null, object.defineproperty( {}, "passive", { get: function() { passiveifsupported = { passive: false }; } } ) ); } catch(err) {} window.addeventlistener('scroll', function(event) { /* do something */ // can't use event.preventdefault(); }, passiv...

Ajax navigation example - Web APIs
"</title>"; ?> </head> <body> <?php include "include/before_content.php"; ?> <p>this paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> <div id="ajax-content"> <?php } ?> <p>this is the content of <strong>first_page.php</strong>.</p> <?php if ($as_json) { echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); } else { ?> </div> <p>this paragraph is shown only when the navigation starts from <strong>first_page.p...
..."</title>"; ?> </head> <body> <?php include "include/before_content.php"; ?> <p>this paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p> <div id="ajax-content"> <?php } ?> <p>this is the content of <strong>second_page.php</strong>.</p> <?php if ($as_json) { echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); } else { ?> </div> <p>this paragraph is shown only when the navigation starts from <strong>second_pag...
..."</title>"; ?> </head> <body> <?php include "include/before_content.php"; ?> <p>this paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p> <div id="ajax-content"> <?php echo $page_content; ?> </div> <p>this paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p> <?php include "include/after_content.php"; echo "</body>\n</html>"; } ?> css/style.css: #ajax-loader { position: fixed; display:...

Checking when a deadline is due - Web APIs
// update the display of data to show the newly added item, by running displaydata() again.
... displaydata(); }; last of all, we run the displaydata() function, which updates the display of data in the app to show the new task that was just entered.
...we want all the values to match before we show the user some kind of notification to tell them their deadline is up.

Using IndexedDB - Web APIs
the following table shows the different ways the keys are supplied: key path (keypath) key generator (autoincrement) description no no this object store can hold any kind of value, even primitive values like numbers and strings.
...if you're trying to modify an existing entry, or you don't care if one exists already, you can use the put() function, as shown below in the updating an entry in the database section.
... cursor.continue(); } }; if you just want to specify a change of direction but not constrain the results shown, you can just pass in null as the first argument: objectstore.opencursor(null, "prev").onsuccess = function(event) { var cursor = event.target.result; if (cursor) { // do something with the entries.

KeyboardEvent: code values - Web APIs
the following tables show what code values are used for each native scancode or virtual keycode on major platforms.
...these tables show those variations when known.
... code values code values on windows this table shows the windows scan codes representing keys and the keyboardevent.code values which correspond to those hardware keys.

Using the MediaStream Recording API - Web APIs
checkbox hack for showing/hiding this is fairly well documented already, but we thought we'd give a mention to the checkbox hack, which abuses the fact that you can click on the <label> of a checkbox to toggle it checked/unchecked.
... in web dictaphone this powers the information screen, which is shown/hidden by clicking the question mark icon in the top right hand corner.
... 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 want it, give it fixed position so that it doesn't appear in the layout flow and affect the main ui, transform it to the position we want it to sit in by default, and give it a transition 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), ...

Media Session API - Web APIs
the platform can show this metadata in media centers, notifications, device lockscreens, etc.
... examples the following example shows feature detection for the media session api.
... audio.play() .then(_ => { /* set up media session controls, as shown above.

NotificationAction - Web APIs
these buttons' appearance and specific functionality vary across platforms but generally they provide a way to asynchronously show actions to the user in a notification.
... here a service worker shows a notification with a single "archive" action, allowing users to perform this common task from the notification without having to open the website.
... self.registration.shownotification("new mail from alice", { actions: [ { action: 'archive', title: 'archive' } ] }); self.addeventlistener('notificationclick', function(event) { event.notification.close(); if (event.action === 'archive') { // archive action was clicked archiveemail(); } else { // main body of notification was clicked clients.openwindow('/inbox'); } }, false); specifications specification status comment notifications api living standard living standard ...

Page Visibility API - Web APIs
a site has an image carousel that shouldn't advance to the next slide unless the user is viewing the page an application showing a dashboard of information doesn't want to poll the server for updates when the page isn't visible a page wants to detect when it is being prerendered so it can keep accurate count of page views a site wants to switch off sounds when a device is in standby mode (user pushes power button to turn screen off) developers have historically used imperfect proxies to detect this.
... "visibilitychange"; } else if (typeof document.mshidden !== "undefined") { hidden = "mshidden"; visibilitychange = "msvisibilitychange"; } else if (typeof document.webkithidden !== "undefined") { hidden = "webkithidden"; visibilitychange = "webkitvisibilitychange"; } var videoelement = document.getelementbyid("videoelement"); // if the page is hidden, pause the video; // if the page is shown, play the video function handlevisibilitychange() { if (document[hidden]) { videoelement.pause(); } else { videoelement.play(); } } // warn if the browser doesn't support addeventlistener or the page visibility api if (typeof document.addeventlistener === "undefined" || hidden === undefined) { console.log("this demo requires a browser, such as google chrome or firefox, that supp...
... // this shows the paused videoelement.addeventlistener("pause", function(){ document.title = 'paused'; }, false); // when the video plays, set the title.

PaintWorklet - Web APIs
examples the following three examples go together to show creating, loading, and using a paintworklet.
... create a paintworklet the following shows an example worklet module.
... <script> if ('paintworklet' in css) { css.paintworklet.addmodule('checkerboard.js'); } </script> use a paintworklet this example shows how to use a paintworklet in a stylesheet, including the simplest way to provide a fallback if paintworklet isn't supported.

PaymentAddress - Web APIs
// call show() to trigger the browser's payment flow.
... const response = await request.show(); // process payment.
..."success" : "failure"; await response.complete(result); } dopaymentrequest(); once the payment flow has been triggered using paymentrequest.show() and the promise resolves successfully, the paymentresponse object available inside the fulfilled promise (instrumentresponse above) will have a paymentresponse.details property that will contain response details.

PaymentRequest.prototype.id - Web APIs
example this example shows how to give a paymentrequest instance a custom id.
... const details = { id: "super-store-order-123-12312", total: { label: "total due", amount: { currency: "usd", value: "65.00" }, }, }; const request = new paymentrequest(methoddata, details); console.log(request.id); // super-store-order-123-12312 the id is then also available in the paymentresponse returned from the show() method, but under the requestid attribute.
... const response = await request.show(); console.log(response.requestid === request.id); // and in serialized form too const json = response.tojson(); console.log(json.requestid,response.requestid, request.id); syntax var id = paymentrequest.id value a domstring.

PaymentRequest.onpaymentmethodchange - Web APIs
to make sure you receive the event, you should add event listeners to paymentrequest object after instantiation, but before you call show().
... examples an example payment method change handler is shown below; this example handles changes made to the payment method when using apple pay, specifically: request.onpaymentmethodchange = ev => { const { type: cardtype } = ev.methoddetails; const newstuff = {}; if (ev.methodname === "https://apple.com/apple-pay") { switch (cardtype) { case "store": // do apple pay specific handling for store card...
... ev.updatewith(newstuff); }; const response = await request.show(); specifications specification status comment payment request apithe definition of 'onpaymentmethodchange' in that specification.

PaymentRequest - Web APIs
methods paymentrequest.canmakepayment() secure context indicates whether the paymentrequest object can make a payment before calling show().
... paymentrequest.show() secure context causes the user agent to begin the user interaction for the payment request.
... paymentrequest.abort() secure context causes the user agent to end the payment request and to remove any user interface that might be shown.

PaymentResponse.complete() - Web APIs
this method must be called after the user accepts the payment request and the promise returned by the paymentrequest.show() method is resolved.
... exceptions aborterror the document in which the payment request is taking place became inactive while the user interface was shown.
...var payment = new paymentrequest(supportedinstruments, details, options); payment.show().then(function(paymentresponse) { var fetchoptions = { method: 'post', credentials: include, body: json.stringify(paymentresponse) }; var serverpaymentrequest = new request('secure/payment/endpoint'); fetch(serverpaymentrequest, fetchoptions).then( response => { if (response.status < 400) { paymentresponse.complete("success"); } else { paymentresponse.comp...

Performance Timeline - Web APIs
performance interface extensions: as shown in the performance interface's browser compatibility table, most of these interfaces are broadly implemented by desktop browsers and have less support on mobile devices.
... performanceentry: as shown in the performanceentry interface's browser compatibility table, most of these interfaces are broadly implemented by desktop browsers and have less support on mobile devices.
... performance observers : as shown in the performanceobserver interface's browser compatibility table, this interface has no shipping implementations.

Using Pointer Events - Web APIs
</canvas> <br> <button onclick="startup()">initialize</button> <br> log: <pre id="log" style="border: 1px solid #ccc;"></pre> setting up the event handlers when the page loads, the startup() function shown below should be called by our <body> element's onload attribute (but in the example we use a button to trigger it, due to limitations of the mdn live example system).
...we're using a 4-pixel wide line, so a 4 pixel radius circle will show up neatly.
... function ongoingtouchindexbyid(idtofind) { for (var i = 0; i < ongoingtouches.length; i++) { var id = ongoingtouches[i].identifier; if (id == idtofind) { return i; } } return -1; // not found } showing what's going on function log(msg) { var p = document.getelementbyid('log'); p.innerhtml = msg + "\n" + p.innerhtml; } specifications specification status comment pointer events – level 2the definition of 'pointerevent' in that specification.

Using readable streams - Web APIs
as our simple stream pump example shows (see it live also), exposing it is a matter of just accessing the body property of the response: // fetch the original image fetch('./tortoise.png') // retrieve its body as readablestream .then(response => response.body) this provides us with a readablestream object.
... const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); readstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is c...
...current chunk = ' + chunk; list2.appendchild(listitem); result += chunk; // read some more, and call this function again return reader.read().then(processtext); }); } closing and cancelling streams we’ve already shown examples of using readablestreamdefaultcontroller.close() to close a reader.

Touch events - Web APIs
</canvas> <br> log: <pre id="log" style="border: 1px solid #ccc;"></pre> setting up the event handlers when the page loads, the startup() function shown below will be called.
... after that, we iterate over all the touch objects in the list, pushing them onto an array of active touchpoints and drawing the start point for the draw as a small circle; we're using a 4-pixel wide line, so a 4-pixel radius circle will show up neatly.
... function ongoingtouchindexbyid(idtofind) { for (var i = 0; i < ongoingtouches.length; i++) { var id = ongoingtouches[i].identifier; if (id == idtofind) { return i; } } return -1; // not found } showing what's going on function log(msg) { var p = document.getelementbyid('log'); p.innerhtml = msg + "\n" + p.innerhtml; } if your browser supports it, you can see it live.

WebGL tutorial - Web APIs
animating objects with webgl shows how to rotate and translate objects to create simple animations.
... creating 3d objects using webgl shows how to create and animate a 3d object (in this case, a cube).
... animating textures in webgl shows how to animate textures; in this case, by mapping an ogg video onto the faces of a rotating cube.

WebGL model view projection - Web APIs
function cartesiantohomogeneous(point) let x = point[0]; let y = point[1]; let z = point[2]; return [x, y, z, 1]; } function homogeneoustocartesian(point) { let x = point[0]; let y = point[1]; let z = point[2]; let w = point[3]; return [x/w, y/w, z/w]; } as previously mentioned and shown in the functions above, the w component divides the x, y, and z components.
...the locations for the uniforms are saved in the locations object shown below: this.locations.model = gl.getuniformlocation(webglprogram, 'model'); and finally the uniform is set to that location.
...idth / window.innerheight; var nearclippingplanedistance = 1; var farclippingplanedistance = 50; this.transforms.projection = mdn.perspectivematrix( fieldofviewinradians, aspectratio, nearclippingplanedistance, farclippingplanedistance ); }; the shader code is identical to the previous example: gl_position = projection * model * vec4(position, 1.0); additionally (not shown), the position and scale matrices of the model have been changed to take it out of clip space and into the larger coordinate system.

Signaling and video calling - Web APIs
starting negotiation once the caller has created its rtcpeerconnection, created a media stream, and added its tracks to the connection as shown in starting a call, the browser will deliver a negotiationneeded event to the rtcpeerconnection to indicate that it's ready to begin negotiation with the other peer.
... ending the call the closevideocall() function, shown below, is responsible for stopping the streams, cleaning up, and disposing of the rtcpeerconnection object: function closevideocall() { var remotevideo = document.getelementbyid("received_video"); var localvideo = document.getelementbyid("local_video"); if (mypeerconnection) { mypeerconnection.ontrack = null; mypeerconnection.onremovetrack = null; mypeerconnection.onremovestr...
...open the web console on both devices and look at the logged output—although you don't see it in the code as shown above, the code on the server (and on github) has a lot of console output so you can see the signaling and connection processes at work.

Movement, orientation, and motion: A WebXR example - Web APIs
this example demonstrates this by showing the canvas on the screen, even when presenting a scene as an immersive display using an xr device.
... the last four variables declared are storage for references to the <div> elements into which we'll output the matrices when we want to show them to the user.
... drawing a frame our callback for xrsession.requestanimationframe() is implemented in the drawframe() function shown below.

Using the Web Speech API - Web APIs
demo to show simple usage of web speech recognition, we've written a demo called speech color changer.
...the foreach() method is used to output colored indicators showing what colors to try saying.
... demo to show simple usage of web speech synthesis, we've provided a demo called speak easy synthesis.

Using the aria-invalid attribute - Accessibility
examples example 1: simple form validation the following snippet shows a simplified version of two form fields with a validation function attached to the blur event.
... the snippet below shows a very simple validation function, which only checks for the presence of a particular character (in the real world, validation will likely be more sophisticated): function checkvalidity(aid, asearchterm, amsg){ var elem = document.getelementbyid(aid); var invalid = (elem.value.indexof(asearchterm) < 0); if (invalid) { elem.setattribute("aria-invalid", "true"); update...
...alert(amsg); } else { elem.setattribute("aria-invalid", "false"); updatealert(); } } the snippet below shows the alert functions, which add (or remove) the error message: function updatealert(msg) { var oldalert = document.getelementbyid("alert"); if (oldalert) { document.body.removechild(oldalert); } if (msg) { var newalert = document.createelement("div"); newalert.setattribute("role", "alert"); newalert.setattribute("id", "alert"); var content = document.createtextnode(msg); newalert.appendchild(content); document.body.appendchild(newalert); } } note that the alert has the aria role attribute set to "alert." working examples: alert role example (uses the aria-invalid attribute) notes ...

ARIA: dialog role - Accessibility
this approach 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 other words, the main application ui or page content is considered to be temporarily disabled as long as the modal dialog is showing.
... for non-modal dialogs it is still possible to interact with content outside of the dialog while the dialog is showing.

ARIA: heading role - Accessibility
examples the following shows a typical page structure.
... <div id="container"> <div role="heading" aria-level="1">the main page heading</div> <p>this article is about showing a page structure.</p> <div role="heading" aria-level="2">introduction</div> <p>an introductory text.</p> <div role="heading" aria-level="2">chapter 1</div> <p>text</p> <div role="heading" aria-level="3">chapter 1.1</div> <p>more text in a sub section.</p> ...</div> however, instead, you should do: <div id="container"> <h1>the main page heading</h1> <p>this article is about showing a page structure.</p> <h2>introduction</h2> <p>an introductory text.</p> <h2>chapter 1</h2> <p>text</p> <h3>chapter 1.1</h3> <p>more text in a sub section.</p> ...</div> accessibility concerns if you must use the heading role and aria-level attribute, do not go over level 6 so that you are consis...
... best practices the best way to use this role is to not use it at all, and instead use the native heading tags <h1> through <h6> as shown in the example above.

Operable - Accessibility
2.2.2 pausing, stopping, hiding (a) for moving/blinking content that starts automatically, lasts longer than 5 seconds, and is shown alongside other content, controls should be provided to pause, stop, or hide it.
... for auto-updating information that starts automatically and is shown alongside other content, controls should be provided to pause, stop, or hide it, or to control the frequency of updates.
... 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.

Flow Layout and Writing Modes - CSS: Cascading Style Sheets
the following example shows blocks using horizontal-tb.
... the value vertical-rl gives you a right-to-left block flow direction with a vertical inline direction, as shown in the next example.
...this is shown in the next example where the box which displays as horizontal-tb contains a float which is contained due to its parent establishing a new bfc.