HTML forms in legacy browsers - Learn web development
all web developers learn very quickly (and sometimes painfully) that the web is a very rough place for them. our worst curse is legacy browsers. okay, let's admit it, when we said "legacy browser" we all have in mind safari or old versions of internet explorer, but they are far from the only ones. in the mobile world, when neither the browser nor the os can be updated such as on older android phones or iphones, the stock browsers that don't update are also legacy browsers. dealing with this wilderness is part of the job. fortunately, there are a few tricks to know that can help you to solve most of the problems caused by legacy browsers. and html5 <input> types don't fail when not supported: they fall back to type=text. learn about the issues to understand common patterns, it helps...
... iphones, the stock browsers that don't update are also legacy browsers. dealing with this wilderness is part of the job. fortunately, there are a few tricks to know that can help you to solve most of the problems caused by legacy browsers. and html5 <input> types don't fail when not supported: they fall back to type=text. learn about the issues to understand common patterns, it helps to read browser documentation. if you are reading this on mdn, you are at the right place to start. just check the support of the elements (or dom interface) you want to use. mdn has compatibility tables available for most elements, properties and apis that can be used in a web page. ...
... the webkit blog and planet webkit aggregate the best articles by webkit core developers. ...
...And 16 more matches

mozbrowsercaretstatechanged
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsercaretstatechanged event is fired when the user selects content in a page loaded in a browser <iframe>. this is used by the embedder to show a context menu for clipboard actions. ...
... bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. ...
...he bounding rectangle, in css pixels. top: the top position of the bounding rectangle, in css pixels. bottom: the bottom position of the bounding rectangle, in css pixels. left: the left position of the bounding rectangle, in css pixels. right: the right position of the bounding rectangle, in css pixels. commands an object that defines what commands can currently be executed in the browser <iframe>. its properties are canselectall: a boolean indicating whether the selectall command is available (true) or not (false.) cancut: a boolean indicating whether the cut command is available (true) or not (false.) cancopy: a boolean indicating whether the copy command is available (true) or not (false.) canpaste: a boolean indicating whether the paste command is available (true) ...
...And 15 more matches

grid-auto-rows - CSS: Cascading Style Sheets
the grid-auto-rows css property specifies the size of an implicitly-created grid row track or pattern of tracks. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. if a grid item is positioned into a row that is not explicitly sized by grid-template-rows, implicit grid tracks are created to hold it. this can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows. ...
... clone https://github.com/mdn/interactive-examples and send us a pull request. if a grid item is positioned into a row that is not explicitly sized by grid-template-rows, implicit grid tracks are created to hold it. this can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows. ...
.../interactive-examples and send us a pull request. if a grid item is positioned into a row that is not explicitly sized by grid-template-rows, implicit grid tracks are created to hold it. this can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows. ...
...And 15 more matches

Populating the page: how browsers work - Web Performance
users want web experiences with content that is fast to load and smooth to interact with. therefore, a developer should strive to achieve these two goals. to understand how to improve performance and perceived performance, it helps to understand how the browser works. overview fast sites provide better user experiences. users want and expect web experiences with content that is fast to load and smooth to interact with. two major issues in web performance are understanding issues having to do with latency and issues having to do with the fact that for the most part, browsers are single threaded. latency is our main threat to overcome to ensure a fast load. to be fast to load, the developers’ goals include sending requested information as fast as possible, or at least seem super ...
... threaded. latency is our main threat to overcome to ensure a fast load. to be fast to load, the developers’ goals include sending requested information as fast as possible, or at least seem super fast. network latency is the time it takes to transmit bytes over-the-air to computers. web performance is what we have to do to make the page load happen as quickly as possible. for the most part, browsers are considered single threaded. for smooth interactions, the developer's goal is to ensure performant site interactions, from smooth scrolling to being responsive to touch. render time is key, with ensuring the main thread can complete all the work we throw at it and still always be available to handle user interactions. web performance can be improved by understanding the single-threaded natu...
...sidered single threaded. for smooth interactions, the developer's goal is to ensure performant site interactions, from smooth scrolling to being responsive to touch. render time is key, with ensuring the main thread can complete all the work we throw at it and still always be available to handle user interactions. web performance can be improved by understanding the single-threaded nature of the browser and minimizing the main thread's responsibilities, where possible and appropriate, to ensure rendering is smooth and responses to interactions are immediate. navigation navigation is the first step in loading a web page. it occurs whenever a user requests a page by entering a url into the address bar, clicking a link, submitting a form, as well as other actions. one of the goals of web perfo...
...And 15 more matches

Developing cross-browser and cross-platform pages - Archive of obsolete content
an important practice when doing cross-browser, cross-platform pages and dhtml development involves the ability to determine the capabilities of the browser which loads your web page. as a web author, you understandably want to avoid script errors and page layout problems and you may want to ensure your scripts reach as wide an audience as possible. there are 2 known approaches for such goals: the browser identification approach (also known as useragent string detection and often referred as "browser sniffing") and the object/feature support detection approach. the browser identification approach is now known to be complicated, unreliable and difficult to maintain. ...
... you may want to ensure your scripts reach as wide an audience as possible. there are 2 known approaches for such goals: the browser identification approach (also known as useragent string detection and often referred as "browser sniffing") and the object/feature support detection approach. the browser identification approach is now known to be complicated, unreliable and difficult to maintain. browser identification approach (aka "browser sniffing"): not best, not reliable approach this approach, still commonly used nowadays, attempts to identify the browser and makes the web author at design time decide what that implies in terms of capabilities of the visiting browser. such approach is fraught with problems and difficulties. it requires from the web author to have knowledge of the capabil...
...oach (aka "browser sniffing"): not best, not reliable approach this approach, still commonly used nowadays, attempts to identify the browser and makes the web author at design time decide what that implies in terms of capabilities of the visiting browser. such approach is fraught with problems and difficulties. it requires from the web author to have knowledge of the capabilities of all current browsers that may visit the page and then to code appropriately for these. it requires from the web author to make assumptions about what will happen with future browsers or to decide to provide future browsers a safe fallback service. it assumes that web authors are able to correctly identify browsers and browser versions in the first place... which is far from being a reliable and easy task to achiev...
...And 13 more matches

mozbrowseraudioplaybackchange
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowseraudioplaybackchange event is fired when audio starts or stops playing within a browser <iframe>. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bub...
... description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only boolean indicates whether audio is playing in the browser. ...
...arget read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only boolean indicates whether audio is playing in the browser. ...
...And 13 more matches

mozbrowserloadstart
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserloadstart event is fired when the browser <iframe> starts to load a new page. this can be used when the embedder wants to start spinning a loading indicator, or update the ui in some other way to indicate loading has started. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the event target (the...
...y type description target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...
...on target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...
...And 13 more matches

mozbrowsermetachange
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsermetachange event is fired when a <meta> element related to web applications is added, removed or changed. see below for the applicable types. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only...
... content a domstring representing the <meta> content attribute value, i.e. the content of the meta tag. type a domstring representing the type of meta change that this event object represents. this can be added, changed, removed, or undefined. lang optional a domstring representing the <meta> name attribute value, if included. if not included, the value returned is undefined. ...
... content attribute value, i.e. the content of the meta tag. type a domstring representing the type of meta change that this event object represents. this can be added, changed, removed, or undefined. lang optional a domstring representing the <meta> name attribute value, if included. if not included, the value returned is undefined. ...
...And 13 more matches

mozbrowseropenwindow
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowseropenwindow event is fired when a new window is required — usually when the content of a browser <iframe> successfully calls the window.open() method, or the user clicks on a link with an unknown target. the embedder must use the <iframe> passed in the event.details.frameelement property as the new window content. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property ...
...cks on a link with an unknown target. the embedder must use the <iframe> passed in the event.details.frameelement property as the new window content. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following proper...
... cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: url a domstring representing the url of the document loaded within the frameelement property. ...
...And 13 more matches

private-browsing - Archive of obsolete content
check whether a given object is private, so an add-on can respect private browsing usage per-window private browsing private browsing status is a property of an individual browser window. the user enters private browsing by opening a new private browser window. when they do this, any existing non-private windows are kept open, so the user will typically have both private and non-private windows open at the same time. ...
...add-on can respect private browsing usage per-window private browsing private browsing status is a property of an individual browser window. the user enters private browsing by opening a new private browser window. when they do this, any existing non-private windows are kept open, so the user will typically have both private and non-private windows open at the same time. ...
...te browsing private browsing status is a property of an individual browser window. the user enters private browsing by opening a new private browser window. when they do this, any existing non-private windows are kept open, so the user will typically have both private and non-private windows open at the same time. ...
...And 12 more matches

mozbrowserasyncscroll
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserasyncscroll event is fired when the content of a browser <iframe> is scrolled. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. can...
...ubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: top the scroll top position in css pixels of the document within the browser <iframe>. left the scroll left position in css pixels of the document within the browser <iframe>. width the width in css pixels of the visible part of the document within the browser <iframe>. height the height in css pixels of the visible part of the document within the browser <iframe>. scrollwidth the total content width in css pixels of the document within the browser <iframe>. sc...
... note: top + height may be larger than scrollheight. this indicates that the content is over-scrolled, which occurs when the page "rubber-bands" after being scrolled all the way to the bottom. similarly, left + width may be greater than scrollwidth, and both left and top may be negative. note: for performance reasons, this event is asynchronous. ...
...And 12 more matches

mozbrowserclose
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserclose event is fired when the content of a browser <iframe> calls the window.close() method. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean ...
...s property type description target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...
... target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...
...And 12 more matches

mozbrowsercontextmenu
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsercontextmenu event is fired when the user tried to access a context menu over a browser <iframe>. this event can be used to control what will appear in the menu. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. ...
... bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: clientx the x value of the coordinate that was clicked inside the browser <iframe>'s viewport. clienty the y value of the coordinate that was clicked inside the browser <iframe>'s viewport. systemtargets an array containing one or more menusystem objects (see the menusystem object, below), containing details of the standard menu(s) that will be shown. for example, if the user clicked on an image nested in an <a> tag, two menus are available — one with informati...
...nu item's icon, if the context menu being accessed is a menu item. id the menu item's id, if the context menu being accessed is a menu item. this is passed to the contextmenuitemselected() function, to indicate which item has been selected. items an array of further menu objects, which indicate the menu options available in a menu, if the context menu being accessed is a menu. ...
...And 12 more matches

mozbrowsericonchange
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsericonchange event is sent when a new icon (e.g. <link rel="icon"> or <link rel="apple-touch-icon">) is available in the browser <iframe>'s content. ...
... bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. ...
... anonymous javascript object with the following properties: href a domstring representing the path to the new icon. sizes a domstring listing the sizes the new icon is available in, e.g. "16x16" or "16x16 32x32". the any keyword can also be used, to represent "any size." rel a domstring representing the rel attribute value from the <link> element used to link to the icon. ...
...And 12 more matches

mozbrowserlocationchange
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserlocationchange event is fired when a browser <iframe>'s location changes — it is fired every time navigation occurs. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether ...
...senting the url of the new location. cangoback a boolean that defines whether it's possible to go back in the navigation history (true) or not (false). cangoforward a boolean that defines whether it's possible to go forward in the navigation history (true) or not (false). example this example updates the url bar so that it will always display the correct url for the current location. ...
...ck a boolean that defines whether it's possible to go back in the navigation history (true) or not (false). cangoforward a boolean that defines whether it's possible to go forward in the navigation history (true) or not (false). example this example updates the url bar so that it will always display the correct url for the current location. ...
...And 12 more matches

mozbrowsermanifestchange
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsermanifestchange event is fired when the manifest location of the app loaded in the browser <iframe> changes. ...
... bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. ...
...vent. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: href the url of the new app manifest. ...
...And 12 more matches

mozbrowseropensearch
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowseropensearch event is fired when a link to a search engine is found — i.e. when an instance of <link rel="search" type="application/opensearchdescription+xml"> is encountered. ...
... when a link to a search engine is found — i.e. when an instance of <link rel="search" type="application/opensearchdescription+xml"> is encountered. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following proper...
...or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: title a domstring representing the title of the search engine. href a domstring representing url of the search engine. ...
...And 12 more matches

mozbrowseropentab
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. ...
... non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. ...
... bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. ...
...And 12 more matches

mozbrowsershowmodalprompt
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsershowmodalprompt event is fired when the content of a browser <iframe> calls the window.alert(), window.confirm(), or window.prompt() methods. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only ...
...om object. details the details property is an anonymous javascript object with the following properties: prompttype a domstring defining the type of the prompt. it can be alert, confirm, or prompt. title a domstring representing the title of the prompt. message a domstring representing the value passed to the window.alert(), window.confirm(), or window.prompt() methods within the browser <iframe>'s content. returnvalue a domstring representing the return value for the window.prompt() methods. this should be set by the embedder. unblock() a function to be called when the iframe is unblocked. note that if the embedder calls preventdefault() on this event, the iframe is blocked until unblock() is called. obsolete properties of details msg_name a string representing the t...
...ction to be called when the iframe is unblocked. note that if the embedder calls preventdefault() on this event, the iframe is blocked until unblock() is called. obsolete properties of details msg_name a string representing the type of message. for that event, it's always showmodalprompt. initialvalue a string representing the initial value for the window.prompt() methods. ...
...And 12 more matches

mozbrowserusernameandpasswordrequired
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserusernameandpasswordrequired event is fired when the content within a browser <iframe> requires an http authentification. the embedder is supposed to retrieve the necessary credentials, usually using a dialog or a database of username/passwords, and then call authenticate() or cancel() as appropriate. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type descri...
...trieve the necessary credentials, usually using a dialog or a database of username/passwords, and then call authenticate() or cancel() as appropriate. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following member...
...lue of the realm http header. isproxy a boolean indicating whether the server dealing with the authentication is a proxy server (true) or not (false). authenticate() a function that is called to enable the authentication to go ahead. it needs to take two parameters — the username and password to authenticate. cancel() a function that is called to cancel the authentication. ...
...And 12 more matches

mozbrowserdocumentfirstpaint
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserdocumentfirstpaint event is fired when a new paint occurs on any document in the browser <iframe>. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boo...
...s property type description target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...
... target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...
...And 11 more matches

mozbrowserfirstpaint
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserfirstpaint event is fired when the <iframe> paints content for the first time (this doesn't include the initial paint from about:blank). general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of eve...
...s property type description target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...
... target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...
...And 11 more matches

mozbrowserscrollviewchange
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserscrollviewchange event is fired when asynchronous scrolling (i.e. apcz) starts or stops. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or ...
...not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: state a domstring representing the current state of scrolling in the viewport — available values are started and stopped. ...
...n whether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: state a domstring representing the current state of scrolling in the viewport — available values are started and stopped. ...
...And 11 more matches

mozbrowsersecuritychange
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsersecuritychange event is fired when the browser <iframe> has connected to the server, and when the mixed content state changes. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean ...
...een blocked from loading. extendedvalidation a boolean indicating if the current ssl certificate is an extended validation certificate (true) or not (false). trackingcontent a boolean indicating if tracking content is present on the current page (true) or not (false). mixedcontent a boolean indicating if mixed content is present on the current page (true) or not (false). ...
...tion a boolean indicating if the current ssl certificate is an extended validation certificate (true) or not (false). trackingcontent a boolean indicating if tracking content is present on the current page (true) or not (false). mixedcontent a boolean indicating if mixed content is present on the current page (true) or not (false). ...
...And 11 more matches

mozbrowsertitlechange
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsertitlechange event is fired when the title of a browser <iframe> (i.e. the contents of the <title> element) changes. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether th...
... description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. detail read only string the title of the document. ...
... eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. detail read only string the title of the document. ...
...And 11 more matches

mozbrowservisibilitychange
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowservisibilitychange event is fired when the visibility state of the current browser iframe <iframe> changes, for example due to a call to setvisible(). general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles rea...
...ype of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. ...
...the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: visible a boolean that indicates whether the browser iframe is visible (true) or not (false). ...
...And 11 more matches

grid-template-rows - CSS: Cascading Style Sheets
the grid-template-rows css property defines the line names and track sizing functions of the grid rows. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the grid-template-rows css property defines the line names and track sizing functions of the grid rows. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...property defines the line names and track sizing functions of the grid rows. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 11 more matches

What are browser developer tools? - Learn web development
every modern web browser includes a powerful suite of developer tools. 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. this article explains how to use the basic functions of your browser's devtools. note: before you run through the examples below, open the beginner's example site that we built during the getting started with the web article series. you should have this open as you follow the steps below. ...
...ng which assets the page has requested and how long they took to load. this article explains how to use the basic functions of your browser's devtools. note: before you run through the examples below, open the beginner's example site that we built during the getting started with the web article series. you should have this open as you follow the steps below. ...
...and how long they took to load. this article explains how to use the basic functions of your browser's devtools. note: before you run through the examples below, open the beginner's example site that we built during the getting started with the web article series. you should have this open as you follow the steps below. ...
...And 10 more matches

mozbrowserloadend
this can be used when the embedder wants to stop spinning a loading indicator, or update the ui in some other way to indicate loading is complete. ...
... this can be used when the embedder wants to stop spinning a loading indicator, or update the ui in some other way to indicate loading is complete. ...
... this can be used when the embedder wants to stop spinning a loading indicator, or update the ui in some other way to indicate loading is complete. ...
...And 10 more matches

mozbrowserresize
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserresize event is fired when a browser <iframe> viewport is resized in some way. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. ...
...ether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: width a number representing the new width of the <iframe> viewport, in device pixels. height a number representing the new height of the <iframe> viewport, in device pixels. ...
... details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: width a number representing the new width of the <iframe> viewport, in device pixels. height a number representing the new height of the <iframe> viewport, in device pixels. ...
...And 10 more matches

mozbrowseractivitydone
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowseractivitydone event is fired when something inside the browser <iframe> triggers a web activity, and that web activity's message is consumed by the receiving app. ...
...frame> triggers a web activity, and that web activity's message is consumed by the receiving app. if the activity has a returnvalue set to true, then the activity is consumed when postresult or posterror is invoked on the activity by the receiving app. note: for activities where the receiving app's activity definition in its manifest does not include returnvalue or returnvalue is false, no mozbrowseractivitydone event will be generated as of the landing of bug 1194525 in firefox os 2.5. postresult and posterror calls made on such an activity will be ignored and have no effect. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target r...
...rated as of the landing of bug 1194525 in firefox os 2.5. postresult and posterror calls made on such an activity will be ignored and have no effect. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following proper...
...And 9 more matches

mozbrowserfindchange
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserfindchange event is fired when a search method is invoked in the browser <iframe> content. ...
... bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. ...
...(false.) searchstring a domstring representing the string that is currently being searched for. searchlimit a number indicating the maximum number of searches that can be returned. numberofmatches a number indicating the number of matches returned by the search. activematchordinal a number indicating the position of the currently highlighted search result, e.g. 3 out of 5. ...
...And 9 more matches

mozbrowserscrollareachanged
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserscrollareachanged event is fired when the available scrolling area in the browser <iframe> changes. ...
... bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. ...
... cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: width a number representing the new scroll area width of the <iframe> viewport, in css pixels. height a number representing the new scroll area height of the <iframe> viewport, in css pixels. ...
...And 9 more matches

nsIWebBrowser
embedding/browser/webbrowser/nsiwebbrowser.idlscriptable this interface is implemented by web browser objects. embedders use this interface during initialization to associate the new web browser instance with the embedders chrome and to register any listeners. the interface may also be used at runtime to obtain the content dom window and from that the rest of the dom. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) warning: this interface was frozen for a very long time, but was unfrozen for gecko 2.0. ...
...e with the embedders chrome and to register any listeners. the interface may also be used at runtime to obtain the content dom window and from that the rest of the dom. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) warning: this interface was frozen for a very long time, but was unfrozen for gecko 2.0. ...
... at runtime to obtain the content dom window and from that the rest of the dom. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) warning: this interface was frozen for a very long time, but was unfrozen for gecko 2.0. method overview void addwebbrowserlistener(in nsiweakreference alistener, in nsiidref aiid); void removewebbrowserlistener(in nsiweakreference alistener, in nsiidref aiid); attributes attribute type description containerwindow nsiwebbrowserchrome the chrome object associated with the browser instance. the embedder must create one chrome object for each browser object that is instantiated. the embedder must associate the two by setting this property to point to the ch...
...And 9 more matches

mozbrowserscroll
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserscroll event is fired when the browser <iframe> content scrolls. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable...
... details the details property returns an anonymous javascript object with the following properties: top a number representing the new vertical scroll position of the <iframe> viewport — in css pixels — from the top of the viewport. left a number representing the new horizontal scroll position of the <iframe> viewport — in css pixels — from the left of the viewport. ...
...onymous javascript object with the following properties: top a number representing the new vertical scroll position of the <iframe> viewport — in css pixels — from the top of the viewport. left a number representing the new horizontal scroll position of the <iframe> viewport — in css pixels — from the left of the viewport. ...
...And 8 more matches

Updating addons broken by private browsing changes - Archive of obsolete content
tthews with further questions or clarifications, or file a bug if your extension has stopped working due to a change described here and you are having trouble updating it. ...
...ing trouble updating it. ...
...gemanager ff 16: nsitransferable ff 18: imgicache moziasyncfavicons nsifaviconservice nsiwebbrowserpersist ff 19: nsicontentprefservice nsidownloadmanager nsidownload nsihttpauthmanager nsistricttransportsecurityservice ff 20: nsiprivatebrowsingservice nsirecentbadcertservice furthermore, if your code uses any of these common chrome apis: ff 19: saveurl saveinternal openlinkin ff 20: openbrowserwindow gprivatebrowsingui finally, if your code watches for any of these observer notifications: private-browsing private-browsing-cancel-vote private-browsing-change-granted private-browsing-transition-complete then your addon will require updating to correctly support the new per-window private browser feature in firefox 20 (and will require updating to work correctly in releases of f...
...And 7 more matches

mozbrowserselectionstatechanged
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserselectionstatechanged event is fired when the text selected inside the browser <iframe> content changes. ...
... track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserselectionstatechanged event is fired when the text selected inside the browser <iframe> content changes. note that this is deprecated, and current implementations should use mozbrowsercaretstatechanged instead. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whethe...
...tor in the child frame. this is unitless and represents a percentage increase/decrease, e.g. 1.1 is a 10% zoom in, and 0.9% is a 10% zoom out. iscollapsed a boolean indicating whether the current selection is collapsed (true) or not (false). visible a boolean indicating whether the current selection is visible (true) or not (false). states the current state of the selection. ...
...And 7 more matches

Browser storage limits and eviction criteria - Web APIs
there are a number of web technologies that store data of one kind or another on the client-side (i.e., on your local disk). the process by which the browser works out how much space to allocate to web data storage and what to delete when that limit is reached is not simple, and differs between browsers. this article describes how browsers determine what local content to purge and when in order to free up needed local storage space. note: the information below should be fairly accurate for most modern browsers, but browser specifics are called out where known. opera and chrome should behave the same in all cases. ...
... determine what local content to purge and when in order to free up needed local storage space. note: the information below should be fairly accurate for most modern browsers, but browser specifics are called out where known. opera and chrome should behave the same in all cases. opera mini (still presto-based, server-side rendering) doesn't store any data on the client. what technologies use browser data storage? in firefox, the following technologies make use of browser data storage to store data when required. ...
... the "last access time" of origins is updated when any of these are activated/deactivated — origin eviction will delete data for all these quota clients. ...
...And 7 more matches

Browser chrome tests
it is possible to run specific groups of tests. ...
... it is possible to run specific groups of tests. ...
...er chrome test suite is an automated testing framework designed to allow testing of application chrome windows using javascript. it currently allows you to run javascript code in the same scope as the main firefox browser window and report results using the same functions as the mochitest test framework. as all tests, they won't work in a build with tests disabled (--disable-tests). running the browser chrome tests to run mochitest, first build mozilla with your changes; then run ./mach mochitest -f browser this will launch your build and open a "browser chrome tests" window, and report the results in the ui and to stdout. it is possible to run specific groups of tests. as with mochitest, the path given as an argument is the path to a test or directory within the mozilla source tree. if t...
...And 6 more matches

Metro browser chrome tests - Archive of obsolete content
for information on setting your local build as the default, visit the windows 8 integration wiki page. it is possible to run individual tests as well. ...
...for information on setting your local build as the default, visit the windows 8 integration wiki page. it is possible to run individual tests as well. ...
...for information on setting your local build as the default, visit the windows 8 integration wiki page. it is possible to run individual tests as well. ...
...And 5 more matches

Supporting per-window private browsing - Archive of obsolete content
firefox 20 introduced per-window private browsing mode, in which private user data is stored and accessed concurrently with public user data from another window. detecting private browsing mode determining whether or not a given dom window is private is simple: import resource://gre/modules/privatebrowsingutils.jsm and use privatebrowsingutils.iswindowprivate(window). you can then take action based on this value, as any data or actions originating from this window should be considered private. try { // firefox 20+ components.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); if (!privatebrowsingutils.iswindowprivate(window)) { ... } } catch(e) { // pre firefox 20 (if you do not have access to a ...
...g from this window should be considered private. try { // firefox 20+ components.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); if (!privatebrowsingutils.iswindowprivate(window)) { ... } } catch(e) { // pre firefox 20 (if you do not have access to a doc. // might use doc.hasattribute("privatebrowsingmode") then instead) try { var inprivatebrowsing = components.classes["@mozilla.org/privatebrowsing;1"]. getservice(components.interfaces.nsiprivatebrowsingservice). privatebrowsingenabled; if (!inprivatebrowsing) { ... } } catch(e) { componen...
...service(components.interfaces.nsiprivatebrowsingservice). privatebrowsingenabled; if (!inprivatebrowsing) { ... } } catch(e) { components.utils.reporterror(e); return; } } obtaining an nsiloadcontext for privacy-sensitive apis some apis (such as nsitransferable and nsiwebbrowserpersist) take nsiloadcontext arguments that are used to determine whether they should be classed as private or not (for example, whether the uri being persisted by saveuri should be added to the permanent download history). ...
...And 5 more matches

arrowscrollbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a box which provides scroll arrows along its edges for scrolling through the contents of the box. the user only needs to hover the mouse over the arrows to scroll the box. this element is typically used for large popup menus. hovering the mouse over one of the (active) arrows triggers a scroll event. more information is available in the xul tutorial. ...
...is typically used for large popup menus. hovering the mouse over one of the (active) arrows triggers a scroll event. more information is available in the xul tutorial. ...
...ex, scrollbypixels examples <arrowscrollbox orient="vertical" flex="1"> <button label="red"/> <button label="blue"/> <button label="green"/> <button label="yellow"/> <button label="orange"/> <button label="silver"/> <button label="lavender"/> <button label="gold"/> <button label="turquoise"/> <button label="peach"/> <button label="maroon"/> <button label="black"/> </arrowscrollbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, ...
...And 5 more matches

Cross browser testing - Learn web development
this module focuses on testing web projects across different browsers. we look at identifying your target audience (e.g. what users, browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites you should really learn the basics of the core html, css, and javascript languages first before attempting to use the tools detailed here. guides introduction to cross browser testing this ...
...together a course that includes all the essential information you need to work towards your goal. get started prerequisites you should really learn the basics of the core html, css, and javascript languages first before attempting to use the tools detailed here. ...
...n you need to work towards your goal. get started prerequisites you should really learn the basics of the core html, css, and javascript languages first before attempting to use the tools detailed here. ...
...And 5 more matches

Roll your own browser: An embedding how-to
. you should not need to, and should not, use embedding/config. what bits do i need? one of the requirements of building a sdk is the ability to identify and package up required files. like that isn't totally obvious, nonetheless it has to be done. here is that effort. i have created a directory under embedding called config. contained within this directory are a couple of makefiles: basebrowser-unix basebrowser-win the xpinstall packager follows the same format. however in our case, we only have one named xpi package. after the build is done, you can change directory into mozilla/embedding/config, and do a make. this will produce a directory in dist named embed. it should include all of the base support that you need to get a web browser started up. included is the sample test ap...
...shxb: ibm uses mozilla to implement part of their sash development/desktop environment. part of the gnome effort. activestate's komodo: development environment, based on mozilla's xul. (screenshot) light: very simple non-bloated gtk+ interface, familiar netscape 4.x keyboard shortcuts, context menus, etc. (screenshot) xparts: kde extension that allows mozilla to be embedded into the konqueror browser. uses gtkmozembed widget, part of the kdebindings module and available from http://websvn.kde.org/trunk/kde/kdebindings/xparts/. (news release, screenshot) mozilla examples gtkmozembed widget: gtk widget wrapper for the mozilla gecko engine. testgtkembed: basic browser built with the gtkmozembed widget. url location field, menu bar, html area, supports ssl. windows external projects ...
...kmozembed widget, part of the kdebindings module and available from http://websvn.kde.org/trunk/kde/kdebindings/xparts/. (news release, screenshot) mozilla examples gtkmozembed widget: gtk widget wrapper for the mozilla gecko engine. testgtkembed: basic browser built with the gtkmozembed widget. url location field, menu bar, html area, supports ssl. windows external projects k-meleon browser: the windows answer to galeon. fast ie-look-alike browser, uses ie and ns bookmarking system, fast loading time, privacy features, java support and complete control of the menus and "hotkeys". implemented with mozilla embedding apis. (screenshots) neoplanet browser: a gecko add-on for the neoplanet browser. activestate's komodo: development environment, based on mozilla's xul. (screenshot) m...
...And 5 more matches

Using the viewport meta tag to control layout on mobile browsers
narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. users can then pan and zoom to see different areas of the page. for example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space. ...
... optimized for narrow screens using media queries — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques. to mitigate this problem, apple introduced the "viewport meta tag" in safari ios to let web developers control the viewport's size and scale. ...
...ol the viewport's size and scale. many other mobile browsers now support this tag, although it is not part of any web standard. apple's documentation does a good job explaining how web developers can use this tag, but we had to do some detective work to figure out exactly how to implement it in fennec. for example, safari's documentation says the content is a "comma-delimited list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators. learn more about viewports in different mobile browsers in a tale of two viewports at quirksmode.org. viewport basics a typical mobile-optimized site contains something like the following: <meta name="viewport" content="width=device-width, initial-scale=1"> the width property controls the size of the viewport. it c...
...And 5 more matches

nsIWebBrowserPersist
embedding/components/webbrowserpersist/nsiwebbrowserpersist.idlscriptable interface for persisting dom documents and uris to local or remote storage. inherits from: nsicancelable last changed in gecko 36.0 (firefox 36.0 / thunderbird 36.0 / seamonkey 2.33) implemented by: @mozilla.org/embedding/browser/nswebbrowser;1 and @mozilla.org/embedding/browser/nswebbrowserpersist;1. ...
...webbrowserpersist/nsiwebbrowserpersist.idlscriptable interface for persisting dom documents and uris to local or remote storage. inherits from: nsicancelable last changed in gecko 36.0 (firefox 36.0 / thunderbird 36.0 / seamonkey 2.33) implemented by: @mozilla.org/embedding/browser/nswebbrowser;1 and @mozilla.org/embedding/browser/nswebbrowserpersist;1. ...
...face for persisting dom documents and uris to local or remote storage. inherits from: nsicancelable last changed in gecko 36.0 (firefox 36.0 / thunderbird 36.0 / seamonkey 2.33) implemented by: @mozilla.org/embedding/browser/nswebbrowser;1 and @mozilla.org/embedding/browser/nswebbrowserpersist;1. ...
...And 5 more matches

Browser Toolbox - Firefox Developer Tools
the browser toolbox enables you to debug add-ons and the browser's own javascript code rather than just web pages like the normal toolbox. the browser toolbox's context is the whole browser rather than just single page on a single tab. note: if you want to debug a specific add-on that is restartless or sdk-based then try the add-on debugger. use the browser toolbox for add-ons that are neither. enabling the browser toolbox the browser toolbox is not enabled by default. to enable it you need to check the settings "enable chrome and addon debugging" and "enable remote debugging". to do this, open the developer tools settings, go to the section "advanced settings", and check the settings "enable browser chrome and add-on debugging toolboxes" and "enable remote debugging". opening...
...ling the browser toolbox the browser toolbox is not enabled by default. to enable it you need to check the settings "enable chrome and addon debugging" and "enable remote debugging". to do this, open the developer tools settings, go to the section "advanced settings", and check the settings "enable browser chrome and add-on debugging toolboxes" and "enable remote debugging". opening the browser toolbox open the browser toolbox through the menu button and the menu items "developer" then "browser toolbox". you can also open it with the ctrl + alt +shift + i key combination ( cmd + opt +shift + i on a mac). ...
... opening the browser toolbox open the browser toolbox through the menu button and the menu items "developer" then "browser toolbox". you can also open it with the ctrl + alt +shift + i key combination ( cmd + opt +shift + i on a mac). you will be presented with a dialog like this (it can be removed by setting the devtools.debugger.prompt-connection property to false): click ok, and the browser toolbox will open in its own window: you'll be able to inspect the browser's chrome windows and see, and be able to debug, all the javascript files loaded by the browser itself and by any add-ons that are running. altogether you will have access to the following developer tools: debugger (note: if you want to debug a specific add-on that is restartless or sdk-based then try the add-on deb...
...And 4 more matches

Browser Feature Detection - Archive of obsolete content
an experimental approach to discovering degree of support for standards. among the methods of browser detection, many people recommend using the existence of specific properties or methods in a browser's dom to detect the browser type and whether it supports a given operation. this test takes that idea to the extreme and tests a large number of properties and methods to determine the level of support a browser has for particular standards and reports a rating as the percentage of names the browser defines. this article has generally never been more than a way to show off firefox web compatibility, rather than something truly informative in a broader sense. ...
... level of support a browser has for particular standards and reports a rating as the percentage of names the browser defines. this article has generally never been more than a way to show off firefox web compatibility, rather than something truly informative in a broader sense. therefore, given that it's also badly out of date, it's been archived. you should not rely on any information here. browser sniffing via api name detection the following tables list the api names defined for specific w3c dom apis and lists the percentage of names that your browser actually defines followed by a list of each of the api names tested along with an indication of whether the name was defined for your browser. it is clear from these test results that netscape 7.0x and mozilla firefox have the greatest d...
...wser actually defines followed by a list of each of the api names tested along with an indication of whether the name was defined for your browser. it is clear from these test results that netscape 7.0x and mozilla firefox have the greatest dom support although internet explorer, safari, and opera have sufficient dom css 1 and dom level 1 & 2 document property and method support to enable cross browser web development. test summary standard netscape 7.0x firefox 1.5 safari 2 opera 7 / 8.5-9.0 internet explorer 6 / 7 dom core 1 100% 100% 100% 75% / 91% 75% / 75% dom core 2 100% 100% 100% 70% / 94% 58% / 58% dom 1 html 100% 100% 100% 100% / 100% 100% / 100% dom css 1 100% 100% ...
...And 3 more matches

Internationalized Domain Names (IDN) Support in Mozilla Browsers
an internationalized domain name (idn) is a domain/host name which uses non-ascii characters. until recently domain names allowed only a subset of 7-bit ascii characters. as the internet has spread to non-english speaking people around the world, it has become increasingly clear that forcing them to use domain names written only in a subset of the latin alphabet is not ideal. many of the european languages use the basic latin alphabet with additional accented characters for writing but they were not able to use them in domain names. ...
...the protocols involved in domain names to handle non-ascii characters. in march of 2003, three important rfc's were approved by ietf. (cf. rfc's 3490, 3491, 3492.) these new rfc's now make it possible for domain name servers to register non-ascii domain names and application/client vendors to implement standardized support for handling non-ascii characters in domain names. how idn works when a browser sees a host name such as http://developer.mozilla.org, it passes a request to the dns resolver service (usually built into an os), which in turn sends a request to a nearest domain name server to return an ip address that corresponds to the host name. this ip address is then used to connect to the web server in question. idn allows host/domain names with non-ascii characters for user input int...
...es a host name such as http://developer.mozilla.org, it passes a request to the dns resolver service (usually built into an os), which in turn sends a request to a nearest domain name server to return an ip address that corresponds to the host name. this ip address is then used to connect to the web server in question. idn allows host/domain names with non-ascii characters for user input into a browser's location bar or url's embedded in web pages. at the network protocol level, there is no change in the restriction that only a subset of ascii characters be used in url/uri. if end users input non-ascii characters as part of a domain name or if a web page contains a link using a non-ascii domain name, the application must convert such input into a special encoded format using only the usual as...
...And 3 more matches

nsIPrivateBrowsingService
netwerk/base/public/nsiprivatebrowsingservice.idlscriptable provides access to information about the state of the private browsing service. 1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) this interface is deprecated since firefox 20, and will probably be completely removed in firefox 21. the nsiprivatebrowsingservice interface provides access to information about the state of the private browsing feature offered in firefox 3.5 and later. when firefox is in private browsing mode, firefox shouldn't save any potentially private information. the browser itself stops caching, and also doesn't record history information. in addition, temporary, databases are created to be u...
... about the state of the private browsing feature offered in firefox 3.5 and later. when firefox is in private browsing mode, firefox shouldn't save any potentially private information. the browser itself stops caching, and also doesn't record history information. in addition, temporary, databases are created to be used for cookies and local storage; these databases are thrown away when private browsing mode is turned off, and the regular databases are re-activated. the temporary cookie and local storage databases start out empty. extensions that record potentially private information should use this interface to detect whether private browsing mode is enabled, and if it is, avoid saving that information. for details on how to do this, see the article supporting private browsing mode. simil...
...are re-activated. the temporary cookie and local storage databases start out empty. extensions that record potentially private information should use this interface to detect whether private browsing mode is enabled, and if it is, avoid saving that information. for details on how to do this, see the article supporting private browsing mode. similarly, plug-ins can detect whether or not private browsing mode is in effect by using the npn_getvalue() function to check the current value of the npnvprivatemodebool variable. implemented by: @mozilla.org/privatebrowsing;1. ...
...And 3 more matches

nsIWebBrowserFind
method overview boolean findnext(); attributes attribute type description entireword boolean whether to match entire words only. default is false. ...
...method overview boolean findnext(); attributes attribute type description entireword boolean whether to match entire words only. default is false. ...
...method overview boolean findnext(); attributes attribute type description entireword boolean whether to match entire words only. default is false. ...
...And 3 more matches

Browser compatibility and Scroll Snap - CSS: Cascading Style Sheets
firefox initially implemented an early version of the scroll snap specification, called scroll snap points. in firefox 68 the new version of the specification will be shipped and these old properties removed. in this article, we consider questions that might arise related to compatibility across browsers and versions of browsers when adding support for scroll-snap to your web site or app. what should i do if i used the old firefox implementation? if you have only used the old firefox implementation of the specification, with the properties that are detailed in scroll snap points, you should update your code to use the new specification. this will ensure your scroll snapping works in all browsers which implement the specification, including firefox. if you do not do this your scroll snappin...
...implementation as a fallback? if you have already used the old implementation as a fallback, or feel you want to support users of old firefox (or -webkit prefixed safari), then you can continue to use the old specification as outlined in the example below. ...
...ve used the old specification alongside the current specification in order to make scroll snapping work in all browsers which support some form of scroll snapping. the example adds the scroll-snap-points-y and scroll-snap-destination properties, which are deprecated, to make scroll snapping work in firefox. we also added the scroll-snap-type property twice, once with the y axis value needed for browsers that support the new spec, and once for firefox pre-68, which supports the property but without the y value. do i need to use both specs? scroll snapping is one of those nice parts of css in which the fallback is that you don't get the enhanced functionality, but everything still works. i would suggest at this point you should implement the new specification only, unless you have data to s...
...And 3 more matches

Defining Cross-Browser Tooltips - Archive of obsolete content
summary: authors are used to having alt text appear as a &quot;tooltip&quot; above images, but that's not how it was meant to be used. learn how to define &quot;tooltips&quot; in a cross-browser, standards-friendly way. authors are used to using the alt attribute to create "tooltips" in web browsers. the classic example is a "tooltip" of an image; when the user pauses the mouse pointer over an image, the contents of the alt attribute are displayed as a "tooltip." gecko-based browsers such as mozilla, netscape 6+, and compuserve 7 do not support this behavior. see bug 25537 for a lengthy, sometimes passionate discussion of gecko's behavior in this regard. the problem according to the html 4.01 definition of the alt attribute: alt = text cs for user agents that cannot display image...
...oblem according to the html 4.01 definition of the alt attribute: alt = text cs for user agents that cannot display images, forms, or applets, this attribute specifies alternate text. the language of the alternate text is specified by the lang attribute. in other words, alt text should only be displayed when a user agent cannot display the primary content of the element (e.g., a text-mode browser that cannot display images). in a visual browser, the image should be displayed and the alt text should not. this assumes that the browser can find the image and that it supports the image format used; if either of these is not true, and the image cannot be displayed, then the alt text should be displayed in place of the missing image. on the other hand, the html 4.01 definition of the title a...
...formation about the element for which it is set. unlike the title element, which provides information about an entire document and may only appear once, the title attribute may annotate any number of elements. please consult an element's definition to verify that it supports this attribute... values of the title attribute may be rendered by user agents in a variety of ways. for instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). between these two passages, it is fairly clear that the proper method for defining a "tooltip" for an image (or, indeed, for any element) is to use the title attribute. the solution the most obvious solution is to use the alt and title attributes for their intended pu...
...And 2 more matches

::-ms-browse - Archive of obsolete content
other properties are ignored. ...
...other properties are ignored. ...
... ...
...And 2 more matches

nsIBrowserSearchService
netwerk/base/public/nsibrowsersearchservice.idlscriptable please add a summary to this article. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) implemented by: @mozilla.org/browser/search-service;1. to access this service, use: var browsersearchservice = components.classes["@mozilla.org/browser/search-service;1"] .getservice(components.interfaces.nsibrowsersearchservice); attempting to use any method or attribute of this interface before init() has completed will force the service to fall back to a slower, synchronous, initialization. this is not an issue if your code is executed in reaction to a user interaction, as initialization is complete by...
...or attribute of this interface before init() has completed will force the service to fall back to a slower, synchronous, initialization. this is not an issue if your code is executed in reaction to a user interaction, as initialization is complete by then, but this is an issue if your code is executed during startup. if you need to write code that is executed during startup and makes use of nsibrowsersearchservice, you should make sure that this code is executed from the callback to init(). method overview void addengine(in astring engineurl, in long datatype, in astring iconurl, in boolean confirm, [optional] in nsisearchinstallcallback callback); void addenginewithdetails(in astring name, in astring iconurl, in astring alias, in astring description, in astri...
...may be null if...
...And 2 more matches

Browser Side Plug-in API - Plugins
for an overview of how these two sides of the plug-in api interact, see the how plug-ins work and overview of plug-in structure sections in the introduction. warning: you must only call these from the main thread; calling them from other threads is not supported and may have unpredictable results. netscape plug-in method summary « previousnext » npn_destroystream closes and deletes a stream. ...
...m the main thread; calling them from other threads is not supported and may have unpredictable results. netscape plug-in method summary « previousnext » npn_destroystream closes and deletes a stream. npn_forceredraw forces a paint message for a windowless plug-in. npn_getauthenticationinfo this function is called by plug-ins to get http authentication information from the browser. npn_geturl asks the browser to create a stream for the specified url. npn_geturlnotify requests creation of a new stream with the contents of the specified url; gets notification of the result. npn_getvalue allows the plug-in to query the browser for information. npn_getvalueforurl provides information to a plug-in which is associated with a given url, for example the cookies or prefe...
...valueforurl provides information to a plug-in which is associated with a given url, for example the cookies or preferred proxy. npn_invalidaterect invalidates specified drawing area prior to repainting or refreshing a windowless plug-in. npn_invalidateregion invalidates specified drawing region prior to repainting or refreshing a windowless plug-in. ...
...And 2 more matches

browser.type - Archive of obsolete content
« xul reference home type type: one of the values below. the type of browser, which can be used to set access of the document loaded inside the browser. if this is not set, the loaded document has the same access as the window containing the browser. more precisely: the document loaded into a chrome window is always of chrome type. subdocuments of chrome documents are of chrome type, unless the container element (one of iframe, browser or editor) has one of the special type attribute values (the common ones are content, content-targetable and content-primary) indicating that the subdocument is of content type. ...
...ays of chrome type. subdocuments of chrome documents are of chrome type, unless the container element (one of iframe, browser or editor) has one of the special type attribute values (the common ones are content, content-targetable and content-primary) indicating that the subdocument is of content type. this boundary has a number of special effects, such as making window.top == window (unless the browser is added to a chrome document), and preventing documents from inheriting the principal of the parent document. the type attribute on all frames in content documents is ignored; subdocuments of content documents are always content documents. warning: the type attribute must be set before the element is inserted into the document. content a browser for content. the content that is lo...
...chrome document), and preventing documents from inheriting the principal of the parent document. the type attribute on all frames in content documents is ignored; subdocuments of content documents are always content documents. warning: the type attribute must be set before the element is inserted into the document. content a browser for content. the content that is loaded inside the browser is not allowed to access the chrome above it. content-primary the primary browser for content. the content that is loaded inside the browser is not allowed to access the chrome above it. for instance, in a web browser, this would be the element that displays the web page. the window for the primary content can be retrieved more conveniently using window.content. content-targetable one b...
...er is not allowed to access the chrome above it. content-primary the primary browser for content. the content that is loaded inside the browser is not allowed to access the chrome above it. for instance, in a web browser, this would be the element that displays the web page. the window for the primary content can be retrieved more conveniently using window.content. content-targetable one browser among many for content. the content that is loaded inside the browser is not allowed to access the chrome above it. this is the preferred value for any browser element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment. chrome (default behaviour): a browser, intended to be used for loading privileged content using a chrome:// uri. don't ...

JS_ThrowStopIteration
in for…in and for each…in loops, the javascript engine can create an iterator object and call its .next method repeatedly, as described in new in javascript 1.7: iterators. the .next method may throw stopiteration when there are no more values left to iterate. ...
... in for…in and for each…in loops, the javascript engine can create an iterator object and call its .next method repeatedly, as described in new in javascript 1.7: iterators. the .next method may throw stopiteration when there are no more values left to iterate. ...
... in for…in and for each…in loops, the javascript engine can create an iterator object and call its .next method repeatedly, as described in new in javascript 1.7: iterators. the .next method may throw stopiteration when there are no more values left to iterate. ...
...e javascript engine can create an iterator object and call its .next method repeatedly, as described in new in javascript 1.7: iterators. the .next method may throw stopiteration when there are no more values left to iterate. the engine automatically catches the exception and exits the loop. jsclass.enumerate offers a simpler way to customize object iteration. see also mxr id search for js_throwstopiteration js_isstopiteration bug 390947 ...

nsIBrowserHistory
toolkit/components/places/public/nsibrowserhistory.idlscriptable a browser-specific interface to global history. it adds functions used by the basic browser like, marking pages as typed in the url bar, and removing pages as from the history interface. inherits from: nsiglobalhistory2 last changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) implemented by: @mozilla.org/browser/nav-history-service;1. ...
...le a browser-specific interface to global history. it adds functions used by the basic browser like, marking pages as typed in the url bar, and removing pages as from the history interface. inherits from: nsiglobalhistory2 last changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) implemented by: @mozilla.org/browser/nav-history-service;1. ...
...y. it adds functions used by the basic browser like, marking pages as typed in the url bar, and removing pages as from the history interface. inherits from: nsiglobalhistory2 last changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) implemented by: @mozilla.org/browser/nav-history-service;1. ...
..., and removing pages as from the history interface. inherits from: nsiglobalhistory2 last changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) implemented by: @mozilla.org/browser/nav-history-service;1. ...

nsIWebBrowserChrome
embedding/browser/webbrowser/nsiwebbrowserchrome.idlscriptable corresponds to the top-level, outermost window containing an embedded gecko web browser. 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. ...
...us(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. webbrowser nsiwebbrowser the currently loaded webbrowser. the browser chrome may be told to set the webbrowser object to a new object by setting this attribute. in this case the implementer is responsible for taking the new webbrowser object and doing any necessary initialization or setup as if it had created the webbrowser itself. this includes positioning setting up listeners etc. constants ...
... affects the way the window looks and does not mean it's actually modal. chrome_openas_dialog 1073741824 represent special cases. chrome_openas_chrome 2147483648 represent special cases. chrome_all 4094 represent special cases. chrome_remote_window 1048576 whether this window should use remote (out-of-process) tabs. methods destroybrowserwindow() asks the implementer to destroy the window associated with this webbrowser object. void destroybrowserwindow(); parameters none. exitmodaleventloop() exit a modal event loop if we're in one. the implementation should also exit out of the loop if the window is destroyed. void exitmodaleventloop( in nsresult astatus ); parameters astatus the result code to return from showasm...
... statustype, in wstring status ); parameters statustype indicates what is setting the text. status status string. null is an acceptable value meaning no status. showasmodal() shows the window as a modal window. void showasmodal(); parameters none. return value note: the function error code returned by this corresponds to the status value specified in exitmodaleventloop. sizebrowserto() tells the chrome to size itself such that the browser will be the specified size. void sizebrowserto( in long acx, in long acy ); parameters acx new width of the browser. acy new height of the browser. ...

nsIWebBrowserFindInFrames
attributes attribute type description currentsearchframe nsidomwindow frame at which to start the search. once the search is done, this will be set to be the last frame searched, whether or not a result was found. has to be equal to or contained within the rootsearchframe. rootsearchframe nsidomwindow frame within which to confine the search (normally the content area frame). set this to only search a subtree of the frame hierarchy. ...
... the rootsearchframe. rootsearchframe nsidomwindow frame within which to confine the search (normally the content area frame). set this to only search a subtree of the frame hierarchy. ...
...the frame hierarchy. searchparentframes boolean whether to allow the search to propagate out of the currentsearchframe into its parent frame(s). search is always confined within the rootsearchframe. default is true. ...
... search to propagate out of the currentsearchframe into its parent frame(s). search is always confined within the rootsearchframe. default is true. setting nsiwebbrowserfind.searchframes to true sets this to true. ...

getBrowserAtIndex - Archive of obsolete content
...
... ...
... ...

getBrowserForDocument - Archive of obsolete content
...
... ...
... ...

getBrowserForTab - Archive of obsolete content
...
... ...
... ...

getTabForBrowser - Archive of obsolete content
...
... ...
... ...

selectedBrowser - Archive of obsolete content
...
... ...
... ...

webBrowserFind - Archive of obsolete content
...
... ...
... ...

XULBrowserWindow - Archive of obsolete content
method overview boolean hidechromeforlocation(in string alocation); attributes attribute type description incontentwhitelist string[] an array of url strings for which chrome is automatically hidden. ...
...pdate the user interface of the enclosing xul window. in order to do so it implements the following interfaces: nsisupports nsixulbrowserwindow nsiwebprogresslistener nsiwebprogresslistener2 nsisupportsweakreference note: this page is not complete at this time. see the linked interfaces for the definition of the implemented methods. you may also wish to refer to the implementation of xulbrowserwindow in browser/base/content/browser.js. method overview boolean hidechromeforlocation(in string alocation); attributes attribute type description incontentwhitelist string[] an array of url strings for which chrome is automatically hidden. defaults to about:addons but extensions can append specific urls to the array. methods hidechrome...
....js. method overview boolean hidechromeforlocation(in string alocation); attributes attribute type description incontentwhitelist string[] an array of url strings for which chrome is automatically hidden. defaults to about:addons but extensions can append specific urls to the array. methods hidechromeforlocation determines whether or not browser chrome should be hidden for the specified location. by default, chrome is hidden for about:addons and any other pages in the in content whitelist. you can augment the functionality of this method using chaining in order to hide chrome for other locations. see hiding browser chrome for details and an example. boolean hidechromeforlocation( in string alocation ); parameters alocation the...

Opening a Link in the Default Browser - Archive of obsolete content
this will often be an http or https uri, but can use any scheme for which an external handler exists. ...
...ternalprotocolservice); // now, open it! extps.loaduri(uritoopen, null); by default, the external protocol service will warn the user about opening the link in another application. to suppress this warning for particular protocols that are safe to open in the default application, you must set default prefs (thunderbird sets the following prefs): // suppress external-load warning for standard browser schemes pref("network.protocol-handler.warn-external.http", false); pref("network.protocol-handler.warn-external.https", false); pref("network.protocol-handler.warn-external.ftp", false); you can also check whether an external handler for a scheme exists. this is how you do it: var extps = components.classes["@mozilla.org/uriloader/external-protocol-service;1"] .getserv...
... ...

Browser - MDN Web Docs Glossary: Definitions of Web-related terms
a web browser or browser is a program that retrieves and displays pages from the web, and lets users access further pages through hyperlinks. a browser is the most familiar type of user agent. ...
... a web browser or browser is a program that retrieves and displays pages from the web, and lets users access further pages through hyperlinks. a browser is the most familiar type of user agent. ...
... a web browser or browser is a program that retrieves and displays pages from the web, and lets users access further pages through hyperlinks. a browser is the most familiar type of user agent. ...

Opera Browser - MDN Web Docs Glossary: Definitions of Web-related terms
opera is the fifth most used web browser, publicly released in 1996 and initially running on windows only. opera uses blink as its layout engine since 2013 (before that, presto). opera also exists in mobile and tablet versions. ...
... opera is the fifth most used web browser, publicly released in 1996 and initially running on windows only. opera uses blink as its layout engine since 2013 (before that, presto). opera also exists in mobile and tablet versions. ...
... opera is the fifth most used web browser, publicly released in 1996 and initially running on windows only. opera uses blink as its layout engine since 2013 (before that, presto). opera also exists in mobile and tablet versions. ...

mozbrowsererror
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsererror event is fired when an error occurs while trying to load content within a browser <iframe>. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bu...
...found connectionfailure netinterrupt nettimeout cspblocked phishingblocked malwareblocked unwantedblocked offline malformeduri redirectloop unknownsockettype netreset notcached isprinting deniedportaccess proxyresolvefailure proxyconnectfailure contentencodingfailure remotexul unsafecontenttype corruptedcontenterror certerror other example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsererror", function( event ) { console.log("an error occurred:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalpro...
...ment.queryselector("iframe"); browser.addeventlistener("mozbrowsererror", function( event ) { console.log("an error occurred:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

browser.download.lastDir.savePerSite
browser.download.lastdir.savepersite controls whether the directory preselected in the file picker for saving a file download is being remembered on a per-website (host) base. if set to true, the data is stored as content preference. type:boolean default value:true exists by default: no application support:firefox 11.0 status: active; last updated 2012-02-15 introduction: pushed to nightly on 2011-12-11 bugs: bug 702748 values true (default) the last used directory for the website (host) serving the file for download will be preselected in the file picker. if no download directory for the current website has been stored, browser.download.lastdir will be used. ...
...ast updated 2012-02-15 introduction: pushed to nightly on 2011-12-11 bugs: bug 702748 values true (default) the last used directory for the website (host) serving the file for download will be preselected in the file picker. ...
...lues true (default) the last used directory for the website (host) serving the file for download will be preselected in the file picker. if no download directory for the current website has been stored, browser.download.lastdir will be used. ...

HTMLTableElement.rows - Web APIs
the read-only htmltableelement property rows returns a live htmlcollection of all the rows in the table, including the rows contained within any <thead>, <tfoot>, and <tbody> elements. although the property itself is read-only, the returned object is live and allows the modification of its content. syntax htmlcollectionobject = table.rows; value an htmlcollection providing a live-updating list of the htmltablerowelement objects representing all of the <tr> elements contained in the table. this provides quick access to all of the table rows, without having to manually search for them. ...
...itself is read-only, the returned object is live and allows the modification of its content. syntax htmlcollectionobject = table.rows; value an htmlcollection providing a live-updating list of the htmltablerowelement objects representing all of the <tr> elements contained in the table. this provides quick access to all of the table rows, without having to manually search for them. example myrows = mytable.rows; firstrow = mytable.rows[0]; lastrow = mytable.rows.item(mytable.rows.length-1); this demonstrates how you can use both array syntax (line 2) and the htmlcollection.item() method (line 3) to obtain individual rows in the table. ...
...r them. example myrows = mytable.rows; firstrow = mytable.rows[0]; lastrow = mytable.rows.item(mytable.rows.length-1); this demonstrates how you can use both array syntax (line 2) and the htmlcollection.item() method (line 3) to obtain individual rows in the table. specifications specification status comment html living standardthe definition of 'htmltableelement: rows' in that specification. living standard ...

Accessibility: What users can do to browse more safely - Accessibility
10.3 and above (mobile and tablet) select the "reduce motion option" in os accessibility settings for apple (image source: developers.google.com from thomas steiner's article "move ya! or maybe, don't, if the user prefers-reduced-motion!"). this will not work on animated gifs; the source of the animation is self-contained within a gif and is not affected by these settings. use reader mode on browsers enable content blockers; gets rid of ads, reduces and/or removes distractions enables text-to-speech in certain browsers, enable fonts by choice enable page zoom turn off animated gifs in the browser browsers offer much power to their users; it's just a matter of knowing where to go. using firefox as an example, it explains that by changing the value the image.animation_mode from "nor...
...rs, enable fonts by choice enable page zoom turn off animated gifs in the browser browsers offer much power to their users; it's just a matter of knowing where to go. using firefox as an example, it explains that by changing the value the image.animation_mode from "normal" to "none", all animated images will be blocked. to reverse it, you will have to change the value back to "normal" use browser extensions gif blocker for chrome, gif blocker is an extension available at the web store. gif scrubber gif scrubber is a chrome extension that allows you to control gifs like a video player. ...
...blocked. to reverse it, you will have to change the value back to "normal" use browser extensions gif blocker for chrome, gif blocker is an extension available at the web store. gif scrubber gif scrubber is a chrome extension that allows you to control gifs like a video player. there is a github repository for it at https://github.com/0ui/gif-scrubber beeline reader beeline reader has a browser extension that allows you to set up for grayscale and dyslexi font, among other things take advantage operating system accessibility features most operating systems such as windows 10, have accessibility options that are surprisingly powerful. usually they are quite easy to find by simply typing ( or saying) in the word, "accessibility" in the search finder of the operating system. turn o...

Writing Web Audio API code that works in every browser - Developer guides
you probably have already read the announcement on the web audio api coming to firefox, and are totally excited and ready to make your until-now-webkit-only sites work with firefox, which uses the unprefixed version of the spec. unfortunately, chrome, safari and opera still use the webkitaudiocontext prefixed name. furthermore, as a result of the spec being still in flux, some browsers use deprecated properties and method names that are not present in standards-compliant browsers: safari uses the old method names, firefox uses the new ones, and chrome and opera use both. in addition, not all features of web audio are already implemented in firefox yet. what do we do!? we don't want to maintain two or more separate code bases, and feature detection code is cumbersome! plus we want to wr...
...rite code that reliably works in the future, or at least, works with a minimum amount of changes. is there a way to satisfy all these constraints at the same time? probably! writing for today (and tomorrow) first, get a copy of audiocontext-monkeypatch by chris wilson. this little library will "normalise" the interfaces for you and make it look as if your code is running in a standards compliant browser, by aliasing prefixed names to the unprefixed versions. and it won't do anything if the unprefixed versions are already present. once you include it in your page, you can write in "modern web audio api" style, and do things such as: var audiocontext = new audiocontext(); everywhere, including chrome/ium, opera, safari, and ---of course!--- firefox. also, if new methods such as start are not de...
... that node, depending on the build you used. today the support is already present in nightly, but not quite yet in aurora. in the meantime, you can explicitly specify 'equalpower' instead: var panner = new audiocontext.pannernode(); panner.panningmodel = 'equalpower'; note that there's a list of projects built with the web audio api, specifying which ones use the standard audiocontext and which browsers do they work on. if you're a person that learns by example, it might be interesting to have a look at their source and see how they have resolved the compatibility issues. ...

Hiding browser chrome - Archive of obsolete content
there are times in which an extension may find it useful to hide browser chrome (that is, toolbars, the location bar, and so forth), in order to reduce clutter when presenting a particular user interface. this is done, for example, by the about:addons page. this can be accomplished by augmenting the behavior of the xulbrowserwindow object's hidechromeforlocation() method. note: don't simply replace the hidechromeforlocation() method; this will likely hurt the functionality of firefox itself as well as other extensions. use the technique demonstrated here. ...
...ticular user interface. this is done, for example, by the about:addons page. this can be accomplished by augmenting the behavior of the xulbrowserwindow object's hidechromeforlocation() method. note: don't simply replace the hidechromeforlocation() method; this will likely hurt the functionality of firefox itself as well as other extensions. use the technique demonstrated here. var prevfunc = xulbrowserwindow.hidechromeforlocation; xulbrowserwindow.hidechromeforlocation = function(alocation) { return (/* your test goes here */) || prevfunc.apply(xulbrowserwindow, [alocation]); } this works by saving a reference to the current implementation of the hidechromeforlocation() method, then replacing it with a new method that calls through to the previous implementation. by chaining multiple imple...

getNumberOfVisibleRows - Archive of obsolete content
...
... ...

Browser-side plug-in API - Archive of obsolete content
for an overview of how these two sides of the plug-in api interact, see the how plug-ins work and overview of plug-in structure sections in the introduction. warning: you must only call these from the main thread; calling them from other threads is not supported and may have unpredictable results. ...
...for an overview of how these two sides of the plug-in api interact, see the how plug-ins work and overview of plug-in structure sections in the introduction. warning: you must only call these from the main thread; calling them from other threads is not supported and may have unpredictable results. ...

Supporting private browsing in plugins - Archive of obsolete content
firefox 3.5 introduced private browsing, a mode in which potentially private information is not recorded in any way. it also introduced a mechanism by which plugins can determine whether or not private browsing mode is in effect. plugins should be updated to monitor the state of private browsing mode and only save private information when private browsing is disabled. potentially private information may include (but is not necessarily limited to) history information for downloaded data. for example, if private browsing mode is in effect, video player plugins should not record the urls of watched videos in their histories. ...
...dated to monitor the state of private browsing mode and only save private information when private browsing is disabled. potentially private information may include (but is not necessarily limited to) history information for downloaded data. for example, if private browsing mode is in effect, video player plugins should not record the urls of watched videos in their histories. detecting private browsing mode plug-ins can detect whether or not private browsing mode is in effect by using the npn_getvalue() function to check the current value of the npnvprivatemodebool variable. ...

browser.dom.window.dump.file
browser.dom.window.dump.file redirects the ouput of window.dump() calls to a file whose address is specified in this preference if browser.dom.window.dump.enabled is set to true. changes require an application restart. type:string default value:none exists by default: no application support: gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) status: active; last updated 2012-03-18 introduction: pushed to nightly on 2009-04-24 bugs: bug 489938 values the value holds the file system path for the file in which the content of the window.dump() calls get written, e.g. c:\dump.txt . it will be created if it doesn't exist yet. the line breaks have to be in the argument of the dump function, else successive dump calls will get logged into the same line. ...
...2-03-18 introduction: pushed to nightly on 2009-04-24 bugs: bug 489938 values the value holds the file system path for the file in which the content of the window.dump() calls get written, e.g. c:\dump.txt . it will be created if it doesn't exist yet. the line breaks have to be in the argument of the dump function, else successive dump calls will get logged into the same line. related browser.dom.window.dump.enabled ...

Browser security
these articles provide important guides and references to ensuring the code you write is secure, including both design recommendations and testing guidelines. a web pki x509 certificate primerx.509 (in this document referred as x509) is an itu standard to describe certificates. ...
... secure development guidelinesthe following content will likely see significant revision, though can be used as a reference for security best practices to follow when developing code for mozilla.security and the jar protocolthis article discusses security concern...

nsIWebBrowserChrome2
embedding/browser/webbrowser/nsiwebbrowserchrome2.idlscriptable an extension to nsiwebbrowserchrome. 1.0 66 introduced gecko 1.9 inherits from: nsiwebbrowserchrome last changed in gecko 1.9 (firefox 3) method overview void setstatuswithcontext(in unsigned long statustype, in astring statustext, in nsisupports statuscontext); methods setstatuswithcontext() called when the status text in the chrome needs to be updated. this method may be called instead of nsiwebbrowserchrome.setstatus(). an implementor of this method, should still implement nsiwebbrowserchrome.setstatus(). void setstatuswithcontext( in unsigned long statustype, in astring statustext, in nsisupports statuscontext ); parameters statustype indicates what is setting th...
... parameters statustype indicates what is setting the text. statustext status string. null is an acceptable value meaning no status. statuscontext an object that provides context pertaining to the status type. if statustype is status_link, then this may be a dom node corresponding to the source of the link. this value can be null if there is no context. see also nsiwebbrowserchrome ...

nsIWebBrowserChrome3
astring onbeforelinktraversal( in astring originaltarget, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab ); parameters originaltarget the original link target. linkuri link destination uri. linknode link dom node. ...
... in astring originaltarget, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab ); parameters originaltarget the original link target. linkuri link destination uri. linknode link dom node. isapptab whether or not the link is in an application tab. return value a new link target, if appropriate. otherwise returns originaltarget. see also nsiwebbrowserchrome2 ...

Flash Activation: Browser Comparison - Plugins
each of the major browsers has now implemented a feature where adobe flash content does not run by default, but each of the browsers has implemented this feature and the user interface in slightly different ways. this guide will help outline the similarities and differences between the browsers so web developers can provide the best user experience. in each browser, the decision to enable flash is made by users on a per-site basis. when a site attempts to use flash, the browser will prompt the user in some way and give the user an opportunity to enable flash for that site. flash-blocking extensions are no longer necessary because this functionality is now built into the browser. mozilla firefox google chrome microsoft edge setting name ask to activ...
...the firefox flash roadmap includes links to roadmaps and posts from other vendors. ui comparison mozilla firefox in-page ui is displayed when the site attempts to use flash. an icon also appears on the left side of the location bar. the user can click on the flash object or the location bar icon to activate f...

xml:base support in old browsers - Archive of obsolete content
these two functions aim to allow some support for xml:base. note however, that this code is not based on a thorough examination of the specs related to forming base uris and could well have a number of errors. however, it is working in some of the cases tested. ...

Safe Browsing - Archive of obsolete content
...

browserid - Archive of obsolete content
« xul reference home browserid type: string the id of the browser element to which the findbar is attached. this attribute is only used when the findbar is constructed. you should use the browser property to get and set this value from a script. ...

maxrows - Archive of obsolete content
« xul reference home maxrows type: integer the number of rows to show in the results list at a time. a scrollbar will appear so the user can scroll through the remaining items. ...

rows - Archive of obsolete content
« xul reference home rows type: integer the number of rows to display in the element. if the element contains more than this number of rows, a scrollbar will appear which the user can use to scroll to the other rows. to get the actual number of rows in the element, use the getrowcount method. ...

getBrowserIndexForDocument - Archive of obsolete content
« xul reference home getbrowserindexfordocument( document ) return type: integer returns the index of the browser for the specified document in the tabbrowser the method was invoked on. the returned index is dependent on the tabs in the tabbrowser and is invalidated when the tab ordering changes. it should not be used to track per-tab data during a session; the use of linkedpanel on the corresponding tab is preferred instead. ...

browser - Archive of obsolete content
« xul reference browser type: browser element lets you set and get the browser in which the findbar is located. ...

browsers - Archive of obsolete content
« xul reference browsers type: nodelist of browser elements holds a list of the browser elements inside the tabbrowser. ...

maxRows - Archive of obsolete content
« xul reference maxrows type: integer gets and sets the value of the maxrows attribute. ...

tabbrowser.tabs - Archive of obsolete content
this is a shortcut for looking at the tabs in the tabcontainer. ...

rows - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] defines the rows of a grid. child row elements define the individual rows to appear in the grid. each child of a rows element should be a row element. the rows element may be nested inside another rows element. the children of these nested rows are counted as normal rows as if they were part of the parent. however, nesting rows elements allows groups of rows to have a separate appearance such as a different border, or separate scrolling may be defined for these rows. non-row related elements placed inside a rows element occupy the full width of the grid and are placed in their corresponding positions between the rows. more information is available in the xul tutorial. example see grid for ...

Browsing context - MDN Web Docs Glossary: Definitions of Web-related terms
a browsing context is the environment a browser displays a document. in modern browsers, it usually is a tab, but can be a window or even only parts of a page, like a frame or an iframe. each browsing context has a specific origin, the origin of the active document and a history that memorize all the displayed documents, in order. communication between browsing context is severaly constrained. between browsing context of the same origin, a broadcastchannel can be opened and used. learn more see origin ...

browser.altClickSave
type:boolean default value: false exists by default: yes application support:firefox 13.0 status: active; last updated 2012-03-19 introduction: pushed to nightly on 2012-03-02 bugs: bug 713052 values true clicking a link while holding the alt key starts the download of that link. false (default) no action triggered (see bug 736985). ...

browser.dom.window.dump.enabled
this setting enables the dump function, which sends messages to the system console. set it to true to enable it, or false to disable it. related browser.dom.window.dump.file window.dump ...

browser.pagethumbnails.capturing_disabled
type:boolean default value:true exists by default: no application support: firefox 14.0 status: active; last updated 2012-09-17 introduction: pushed to nightly on 2012-04-13 bugs: bug 726347 values false the application creates screenshots of visited web pages. true (default) the application doesn't create screenshots of visited web pages. ...

browser.search.context.loadInBackground
type:boolean default value:false exists by default: yes application support: firefox 13.0 status: active; last updated 2012-02-17 introduction: pushed to nightly on 2012-02-15 bugs: bug 727131 values true new tab with search results will be opened in the background, focus stays on the current tab. false (default) new tab with search results will be opened in the foreground. ...

browser.urlbar.formatting.enabled
type:boolean default value: true exists by default: yes application support:firefox 6.0 status: active; last updated 2012-04-03 introduction: pushed to nightly on 2011-05-03 bugs: bug 451833 values true (default) the domain name including the top level domain is highlighted in the address bar by coloring it black and the other parts grey. false all parts of the url are given the same color: black. ...

browser.urlbar.trimURLs
type:boolean default value: true exists by default: yes application support:firefox 7.0 status: active; last updated 2012-04-03 introduction: pushed to nightly on 2011-06-23 bugs: bug 665580 values true (default) if the active url is exactly the domain name, the trailing slash (/) behind the top level domain will be hidden. if the address starts with http:// and neither starts with a ftp. subdomain nor contains @ (usually for ftp login information), the http:// prefix will be hidden. ...

nsIBrowserBoxObject
layout/xul/base/public/nsibrowserboxobject.idlscriptable please add a summary to this article. inherits from: nsicontainerboxobject last changed in gecko 1.9 (firefox 3) the boxobject belonging to a xul browser element implements this interface. note: please consider using nsicontainerboxobject instead. attributes attribute type description docshell nsidocshell read only. obsolete since gecko 1.9 the nsidocshell object that manages the contained document. the browser.xml binding uses this property to gain access to the webnavigation, contentdocument, contentwindow, webbrowserfind, webprogress and sessionhistory properties. ...

nsIWebBrowserChromeFocus
it represents the focus up-calls from mozilla to the embedding chrome. inherits from: nsisupports last changed in gecko 1.7 method overview void focusnextelement(); void focusprevelement(); methods focusnextelement() set the focus at the next focusable element in the chrome. void focusnextelement(); parameters none. focusprevelement() set the focus at the previous focusable element in the chrome. void focusprevelement(); parameters none. see also see bug 70224 for gratuitous information. ...

nsIXULBrowserWindow
xpfe/appshell/public/nsixulbrowserwindow.idlscriptable provides methods that may be called from the internals of the browser area to tell the containing xul window to update its user interface. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) the xulbrowserwindow attribute exists on the nsixulwindow interface although both firefox and seamonkey also store their nsixulbrowserwindow reference in the global xulbrowserwindow object accessible from javascript code. note: the xulbrowserwindow object offered to javascript code provides a great many more methods and attributes than those listed here, which are only the ones available to c++ code. see the documentation for xulbrowserwindow for details. method overview astring onbeforel...

Browser Differences - Web APIs
ie 5.0 and 5.5 (both windows) supported only the working draft of xslt, and thus are not compatible with xslt 1.0 stylesheets. netscape 6.x only partially supported xslt 1.0. ...

Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
this article provides a set of mixins for those who want to mess around with flexbox using the native support of current browsers. this set uses: fallbacks using 2009 'box' syntax (ff and older webkit) and prefixed syntaxes (ie10, webkit browsers without flex wrapping) final standards syntax (ff, safari, chrome, ie11+, edge, opera) this was inspired by: http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ with help from: http://w3.org/tr/css3-flexbox/ http://the-echoplex.net/flexyboxes/ http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx http://css-tricks.com/using-flexbox/ a complete guide to flexbox | css-tricks visual guide to css3 flexbox: flexbox playground | note: mixins are not currently supported natively in browsers. instead, you will...

Index - Web APIs
ollowing rules. this can be somewhat controlled by setting the audionode.channelinterpretation property to speakers or discrete: 160 audionode.connect() api, audio, audionode, media, method, reference, web audio api, connect if the destination is a node, connect() returns a reference to the destination audionode object, allowing you to chain multiple connect() calls. in some browsers, older implementations of this interface return undefined. 161 audionode.context api, audionode, context, property, reference, web audio api the read-only context property of the audionode interface returns the associated baseaudiocontext, that is the object representing the processing graph the node is participating in. 162 audionode.disconnect() api, audio...
...b audio api, defaultvalue the defaultvalue read-only property of the audioparam interface represents the initial value of the attributes as defined by the specific audionode creating the audioparam. 170 audioparam.exponentialramptovalueattime() api, audioparam, method, reference, web audio api, exponentialramptovalueattime a reference to this audioparam object. in some browsers older implementations of this interface return void. 171 audioparam.linearramptovalueattime() api, audio, audioparam, method, reference, web audio api, linearramptovalueattime a reference to this audioparam object. in some browsers older implementations of this interface return void. 172 audioparam.maxvalue api, audio, audioparam, property, reference, web au...
... 207 audioworkletnode.onprocessorerror api, audio, audioworkletnode, audioworkletprocessor, event handler, property, reference, web audio api, onprocessorerror the onprocessorerror property of the audioworkletnode interface defines an event handler function to be called when the processorerror event fires. this occurs when the underlying audioworkletprocessor behind the node throws an exception in its constructor, the process method, or any user-defined class method. 208 audioworkletnode.parameters api, audio, audioparam, audioworkletnode, experimental, property, reference, web audio api the read-only parameters property of the audioworkletnode interface returns the associated audioparammap — that is, a map-like collection of audioparam objects. they ...
...And 268 more matches

Index - Archive of obsolete content
found 3833 pages: # page tags and summary 1 archive of obsolete content archive, landing here at mdn, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. or for "reasons," your company is required to use very old software and you need to build web content that runs on that software. or perhaps you're just curious about the history of an obsolete feature or api, and how it worked. 2 .htaccess ( hypertext access ) 301 redirect, cache control, custom error pages, htaccess, permanent redirect, redirect file accessing : htac...
...rn. 50 page-worker add-on sdk create a permanent, invisible page and access its dom. 51 panel add-on sdk, add-ons, extensions creates transient dialogs to implement part of an add-on's user interface. 52 passwords add-on sdk interact with firefox's password manager to add, retrieve and remove stored credentials. 53 private-browsing add-on sdk check whether a given object is private, so an add-on can respect private browsing 54 querystring add-on sdk utility functions for working with query strings. 55 request needsupdate, sdk, add-on make simple network requests. 56 selection add-on sdk get and set text and html selections in the current web page. ...
...ic timers. 63 ui add-on sdk, add-ons, extensions, reference provides access to button, toolbar, and sidebar ui objects. 64 url add-on sdk construct, validate, and parse urls. 66 widget add-on sdk create a simple user interface for an add-on in firefox's add-on bar. 67 windows add-on sdk enumerate and examine open browser windows, open new windows, and listen for window events. 68 low-level apis no summary! 69 /loader create commonjs module loaders. 70 chrome the chrome module gives an add-on sdk add-on access to the components object, which in turn gives it access to a large set of privileged low-level firefox apis. 71 console/plain-te...
...And 160 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
the accessibility tree, or accessibility object model (aom), contains accessibility-related information for most html elements. 13 adobe flash adobe, codingscripting, flash, glossary, infrastructure flash is an obsolescent technology developed by adobe for viewing expressive web applications, multimedia content, and streaming media. adobe flash can run from supporting web browsers via a browser plug-in. 14 ajax ajax, codingscripting, glossary, infrastructure, l10n:priority ajax, which initially stood for asynchronous javascript and xml, is a programming practice of building complex, dynamic webpages using a technology known as xmlhttprequest. 15 algorithm codingscripting, glossary an algorithm is a self-contained series of instr...
... in a typical image file, the color channels describe how much red, green, and blue are used to make up the final color. to represent a color through which the background can be seen to some extent, a fourth channel is added to the color: the alpha channel. the alpha channel specifies how opaque the color is. 19 apple safari glossary, navigation, webmechanics safari is a web browser developed by apple and bundled with both macos and ios. it's based on the open source webkit engine. 20 application context codingscripting, glossary an application context is a top-level browsing context that has a manifest applied to it. 21 argument codingscripting, glossary, javascript an argument is a value (primitive or object) passed as input to a...
... glossary, javascript, reference, arbitrary precision format in javascript, bigint is a numeric data type that can represent integers in the arbitrary precision format. in other programming languages different numeric types can exist, for examples: integers, floats, doubles, or bignums. 31 blink glossary, infrastructure, layout, rendering engine blink is an open-source browser layout engine developed by google as part of chromium (and therefore part of chrome as well). specifically, blink began as a fork of the webcore library in webkit, which handles layout, rendering, and dom, but now stands on its own as a separate rendering engine. 32 block disambiguation, glossary the term block can have several meanings depending on the context. it may refe...
...And 72 more matches

Handling common JavaScript problems - Learn web development
previous overview: cross browser testing next now we'll look at common cross-browser javascript problems and how to fix them. this includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern javascript features working in older browsers, and more. prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high-level principles of cross browser testing. objective: to be able to diagnose common javascript cross-browser problems, and use appropriate tools and techniques to fix them. ...
...rowsers, and more. prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high-level principles of cross browser testing. objective: to be able to diagnose common javascript cross-browser problems, and use appropriate tools and techniques to fix them. ...
... the core html, css, and javascript languages; an idea of the high-level principles of cross browser testing. objective: to be able to diagnose common javascript cross-browser problems, and use appropriate tools and techniques to fix them. ...
...And 54 more matches

Introduction to automated testing - Learn web development
previous overview: cross browser testing next manually running tests on several browsers and devices, several times per day, can get tedious, and time-consuming. to handle this efficiently, you should become familiar with automation tools. in this article, we look at what is available, how to use task runners, and how to use the basics of commercial browser test automation apps such as lambdatest, sauce labs, browserstack, and testingbot. prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high level principles of cross-browser testing. objective: to provide an understanding of what automated testing entails, how it can make your life easier, and how to make use of some of the commercial products that make th...
...testing. objective: to provide an understanding of what automated testing entails, how it can make your life easier, and how to make use of some of the commercial products that make things easier. automation makes things easy throughout this module we have detailed loads of different ways in which you can test your websites and apps, and explained the sort of scope your cross-browser testing efforts should have in terms of what browsers to test, accessibility considerations, and more. sounds like a lot of work, doesn't it? we agree — testing all the things we've looked at in previous articles manually can be a real pain. fortunately, there are tools to help us automate some of this pain away. there are two main ways in which we can automate the tests we've been talking a...
...ate some of this pain away. there are two main ways in which we can automate the tests we've been talking about in this module: use a task runner such as grunt or gulp, or npm scripts to run tests and clean up code during your build process. ...
...And 45 more matches

Handling common HTML and CSS problems - Learn web development
previous overview: cross browser testing next with the scene set, we'll now look specifically at the common cross-browser problems you will come across in html and css code, and what tools can be used to prevent problems from happening, or fix problems that occur. this includes linting code, handling css prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more. prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high level principles of cross browser testing. objective: to be able to diagnose common html and css cross browser problems, and use appropriate tools and techniques to fix them. the trouble with html and css s...
... seriously, in terms of making sure the code is well-crafted, efficient, and semantically describes the purpose of the features on the page. in the worst cases, javascript is used to generate the entire web page content and style, which makes your pages inaccessible, and less performant (generating dom elements is expensive). ...
...s, javascript is used to generate the entire web page content and style, which makes your pages inaccessible, and less performant (generating dom elements is expensive). in other cases, nascent features are not supported consistently across browsers, which can make some features and styles not work for some users. responsive design problems are also common — a site that looks good in a desktop browser might provide a terrible experience on a mobile device, because the content is too small to read, or perhaps the site is slow because of expensive animations. let's go forth and look at how we can reduce cross browser errors that result from html/css. first things first: fixing general problems we said in the first article of this series that a good strategy to begin with is to test in a cou...
...And 42 more matches

Setting up your own test automation environment - Learn web development
previous overview: cross browser testing in this article, we will teach you how to install your own automation environment and run your own tests using selenium/webdriver and a testing library such as selenium-webdriver for node. we will also look at how to integrate your local testing environment with commercial tools like the ones discussed in the previous article. prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high-level principles of cross browser testing, and automated testing. 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. selenium selenium is the most popular brow...
...this is ideal for running automated tests. ...
...ronment you want to use to write and run your tests. most popular environments have available a package or framework that will install webdriver and the bindings required to communicate with webdriver using this language, for example, java, c#, ruby, python, javascript (node), etc. see setting up a selenium-webdriver project for more details of selenium setups for different languages. different browsers require different drivers to allow webdriver to communicate with and control them. see platforms supported by selenium for more information on where to get browser drivers from, etc. we will cover writing and running selenium tests using node.js, as it is quick and easy to get started, and a more familiar environment for front end devs. note: if you want to find out how to use webdriver wit...
...And 41 more matches

Gecko Compatibility Handbook - Archive of obsolete content
** notes ** - the solution quick reference needs more attention. - i'm also looking for a way to organize all that information. - some inline examples were removed because of technical limitations. they are actually replaced by ''-(example removed)-'' the goal of this handbook is to help you update websites to work with standards-based browsers and properly detect gecko. if you're new to standards, you may find using web standards in your web pages a helpful introduction. gecko is an embeddable browser, developed as part of the mozilla open source project and based on w3 standards rather than the proprietary approaches of the past. adhering to web standards simplifies cross-browser web development and enables accessibility. 4.x vs. gecko since 1997, much of the web's content has be...
...n. gecko is an embeddable browser, developed as part of the mozilla open source project and based on w3 standards rather than the proprietary approaches of the past. adhering to web standards simplifies cross-browser web development and enables accessibility. 4.x vs. gecko since 1997, much of the web's content has been developed for microsoft internet explorer 4 or netscape navigator 4. these browsers were developed before the relevant w3c recommendations for html, css, and the dom existed. these earlier, non-standards based browsers differed in several ways from gecko: these browsers use proprietary (non-standard) html, css, and javascript. internet explorer 4 and netscape navigator 4 share support for a large part of the html 3.2 standard and basic javascript. while they support the...
...use proprietary (non-standard) html, css, and javascript. internet explorer 4 and netscape navigator 4 share support for a large part of the html 3.2 standard and basic javascript. while they support the css 1 standard to some degree, the implementations are not complete and have non-standard features added. neither internet explorer 4 or netscape navigator 4 support the w3 dom. instead, each browser supports its own proprietary api for manipulating the content, style and position of html elements in a web page. in addition, internet explorer 4 and netscape navigator 4 use completely different methods of embedding third-party software into the browser. gecko is a cross-platform browser engine, compatible with a number of windows versions including windows xp, as well as mac and linux. be...
...And 39 more matches

Index - Archive of obsolete content
no summary! 25 autofill xul attributes, xul reference no summary! 26 autoscroll xul attributes, xul reference no summary! 27 backdrag xul, xul attribute no summary! 28 beforeselected xul attributes, xul reference no summary! 29 bottom xul attribute, xul reference no summary! 30 browser.type xul attributes, xul reference type: one of the values below.the type of browser, which can be used to set access of the document loaded inside the browser. 31 browserid xul, xul reference no summary! 32 button.type xul attributes, xul reference no summary! 33 buttonaccesskeyaccept xul attributes, xul reference no summ...
... 57 close xul attributes, xul reference no summary! 58 closebutton xul attributes, xul reference no summary! 59 closemenu xul attributes, xul reference no summary! 60 coalesceduplicatearcs xul attributes, xul reference no summary! 61 collapse xul attri...
...ference no summary! 181 matchcaseaccesskey no summary! 182 max xul attributes, xul reference no summary! 183 maxheight xul attributes, xul reference no summary! 184 maxlength xul attributes, xul reference no summary! 185 maxpos xul attributes, xul reference no summary! 186 maxrows xul attributes, xul reference no summary! 187 maxwidth xul attributes, xul reference no summary! 188 member xul attributes, xul reference no summary! 189 menu xul attributes, xul reference no summary! 190 menuactive xul attributes, xul reference no summary! 191 menuitem.key xul attributes,...
...And 38 more matches

Theme changes in Firefox 2 - Archive of obsolete content
this article covers the changes that need to be made to update a firefox theme to work properly in firefox 2. note: we could use an article called updating themes for firefox 2 that would serve as a how-to guide for updating themes. if anyone with theming experience would like to write one, please do! browser changes requiring theme updates there are a number of changed and deleted files in the browser that may require you to make changes to your theme. the table lists both the changed xul file and the theme's corresponding css file that you might need to update. filename css file details browser/base/searchdialog.xul browser/base/content/searchdialog.css removed from firefox 2. feeds/addfeedreader.xul feeds/addfeedreader.css new file that p...
...rom firefox 2. feeds/addfeedreader.xul feeds/addfeedreader.css new file that presents ui for adding a new feed reader. feeds/subscribe.xhtml feeds/subscribe.css new file that presents the ui for subscribing to an rss feed. preferences/downloads.xul - removed from firefox 2. preferences/general.xul - removed from firefox 2. safebrowsing/warning-overlay.xul safebrowsing/browser-protection.css new file containing the overlay that's drawn over the browser when you browse to a suspected phishing site. search/enginemanager.xul enginemanager.css new file containing the ui for the search engine manager window. toolkit/mozapps/preferences/fontscaling.xul - removed from firefox 2. changes to ...
...taining the ui for the search engine manager window. toolkit/mozapps/preferences/fontscaling.xul - removed from firefox 2. changes to the default theme the table below lists all the changes made in the default theme for firefox 2; you can use this information as a starting point for figuring out the changes you need to make. ...
...And 38 more matches

Index - Learn web development
odule learning some html, css, and javascript is useful if you want to become a web developer. beyond mechanical use, it's important to learn how to use these technologies responsibly so that all readers might use your creations on the web. to help you achieve this, this module will cover general best practices (which are demonstrated throughout the html, css, and javascript topics), cross browser testing, and some tips on enforcing accessibility from the start. we'll cover accessibility in special detail. 3 accessible multimedia accessibility, article, audio, beginner, codingscripting, html, images, javascript, learn, multimedia, video, captions, subtitles, text tracks this chapter has provided a summary of accessibility concerns for multimedia content, along with s...
...and navigating to the html file. there are many ways to achieve this. 21 how do you upload your files to a web server? beginner, ftp, github, uploading, webmechanics, hosting, rsync, sftp if you have built a simple web page (see html basics for...
...and navigating to the html file. ...
...And 37 more matches

HTTP Index - HTTP
this page lists all mdn http pages along with their summary and tags. found 277 pages: # page tags and summary 1 http http, hypertext, reference, tcp/ip, web, web development, l10n:priority hypertext transfer protocol (http) is an application-layer protocol for transmitting hypermedia documents, such as html. it was designed for communication between web browsers and web servers, but it can also be used for other purposes. http follows a classical client-server model, with a client opening a connection to make a request, then waiting until it receives a response. http is a stateless protocol, meaning that the server does not keep any data (state) between two requests. though often based on a tcp/ip layer, it can be used on any reliable transport layer, th...
... suitable alternative. 2 a typical http session http in client-server protocols, like http, sessions consist of three phases: 3 an overview of http html, http, overview, webmechanics, l10n:priority http isthe foundation of any data exchange on the web and it is a client-server protocol, which means requests are initiated by the recipient, usually the web browser. a complete document is reconstructed from the different sub-documents fetched, for instance text, layout description, images, videos, scripts, and more 4 basics of http guide, http, overview http is a pretty extensible protocol. it relies on a few basic concepts like the notion of resources and uris, a simple structure of messages, and a client-server structure for the com...
... 10 incomplete list of mime types audio, file types, files, http, mime, mime types, php, reference, text, types, video here is a list of mime types, associated by type of documents, ordered by their common extensions. ...
...And 37 more matches

List of Mozilla-Based Applications - Archive of obsolete content
ry server ldap server uses nss a380 seatback entertainment system media software this blog post mentions a reference to mozilla being used but i couldn't find more information about it. ...
...ed to use nss with mod_nss ssl module apicawatch site performance monitoring tool uses firefox as part of its monitoring package astyle css editor editing tool atmail webmail client aviva for java mainframe connectivity product uses mozilla rhino babelgum internet tv service basilisk pre-servo xul-based web browser uses most of the firefox 55 source code batik java-based toolkit uses mozilla rhino bitbox security focused browser seemingly based on firefox blackbird browser for african american community bluegriffon wysiwyg editor next generation version of composer buzzbird twitter client built on xulrunner camino b...
...er uses most of the firefox 55 source code batik java-based toolkit uses mozilla rhino bitbox security focused browser seemingly based on firefox blackbird browser for african american community bluegriffon wysiwyg editor next generation version of composer buzzbird twitter client built on xulrunner camino browser 2.5m downloads and ~400,000 active users ... ...
...And 35 more matches

Strategies for carrying out testing - Learn web development
previous overview: cross browser testing next this article starts the module off by providing an overview of the topic of (cross) browser testing, answering questions such as "what is cross-browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?" prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high level principles of cross-browser testing. objective: to gain an understanding of the high-level concepts involved in cross-browser testing. gotta test 'em all? when doing cross-browser testing, you need to work out a list of browsers you will need to test on to start with. there is no way you can test on e...
...css, and javascript languages; an idea of the high level principles of cross-browser testing. objective: to gain an understanding of the high-level concepts involved in cross-browser testing. gotta test 'em all? when doing cross-browser testing, you need to work out a list of browsers you will need to test on to start with. there is no way you can test on every combination of browser and device your users might use to view your site — there are just too many, and new ones appear all the time. instead, you should try to make sure your site works on the most important target browsers and devices, and then code defensively to give your site the widest support reach it can be expected to have. by coding defensively, we mean trying to build in intelligent fallbacks so that i...
...ew your site — there are just too many, and new ones appear all the time. instead, you should try to make sure your site works on the most important target browsers and devices, and then code defensively to give your site the widest support reach it can be expected to have. by coding defensively, we mean trying to build in intelligent fallbacks so that if a feature or style doesn't work in a browser, the site will be able to downgrade to something less exciting that still provides an acceptable user experience — the core information is still accessible, for example, even if it doesn't look quite as nice. the aim is to build up a chart of browsers/devices you can refer to as you test. you can make this as simple or as complex as you like — for example a common approach is to have multi...
...And 33 more matches

Streams - Plugins
« previousnext » this chapter describes using plug-in api functions to receive and send streams. streams are objects that represent urls and the data they contain, or data sent by a plug-in without an associated url. although a single stream is associated with one specific instance of a plug-in, a plug-in can have more than one stream object per instance. ...
... send streams. streams are objects that represent urls and the data they contain, or data sent by a plug-in without an associated url. although a single stream is associated with one specific instance of a plug-in, a plug-in can have more than one stream object per instance. streams can be produced by the browser and consumed by a plug-in instance, or produced by an instance and consumed by the browser. ...
...ciated url. although a single stream is associated with one specific instance of a plug-in, a plug-in can have more than one stream object per instance. streams can be produced by the browser and consumed by a plug-in instance, or produced by an instance and consumed by the browser. each stream has an associated mime type identifying the format of the data in the stream. streams produced by the browser can be automatically sent to or requested by the plug-in instance. the browser calls the plug-in methods npp_newstream, npp_writeready, npp_write, and npp_destroystream to, respectively, create a stream, find out how much data the plug-in can handle, push data into the stream, and delete it. the plug-in instance selects a transmission mode for streams produced by the browser. stream data can b...
...And 32 more matches

HTML documentation index - HTML: Hypertext Markup Language
select and access specific elements via the class selectors or functions like the dom method document.getelementsbyclassname. 11 contenteditable editing, global attributes, html, reference, text editing, contenteditable, text entry, text input the contenteditable global attribute is an enumerated attribute indicating if the element should be editable by the user. if so, the browser modifies its widget to allow editing. 12 contextmenu deprecated, global attributes, html, reference, contextmenu the contextmenu global attribute is the id of a <menu> to use as the contextual menu for this element. 13 data-* global attributes, html, reference the data-* global attributes form a class of attributes called custom data attributes, that al...
...resentation by scripts. 14 dir bidi, global attributes, html, reference the dir global attribute is an enumerated attribute that indicates the directionality of the element's text. 15 draggable global attributes, html, reference the draggable global attribute is an enumerated attribute that indicates whether the element can be dragged, either with native browser behavior or the html drag and drop api. 16 dropzone deprecated, global attributes, html, reference the dropzone global attribute is an enumerated attribute indicating what types of content can be dropped on an element, using the html drag and drop api. it can have the following values: 17 hidden global attributes, html, reference the hidden global attri...
...the keyword any. 51 the html autocomplete attribute addresses, attribute, email addresses, forms, html, input, phone numbers, reference, select, text, usernames, autocomplete, form, passwords, textarea autocomplete lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field. 52 disabled attribute, attributes, constraint validation, forms, required the boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. the user can neither edit nor focus on the control, nor it's form control descendants. 53 html documentation index ...
...And 31 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
try to avoid using it. draft this page is not complete. « previousnext » this document was authored by taiga (gomita) gomibuchi and was originally published in japanese for the firefox developers conference summer 2007. gomita-san won "most useful upgraded extension" award in mozilla's 2006 "extend firefox" competition for scrapbook, and was runner-up in the "extend firefox 2" contest for firegestures. the chapters so far have each focused on technologies in isolation—xul, javascript, css, and xpcom. ...
... by teesoft). setting up your development environment in order to develop (and test) extensions in a most convenient way it is recommended to apply some changes to firefox. in the following you will find a brief description how to do so; a more detailed one can be found under setting up an extension development environment. create a development profile if you want to partition your everyday browsing environment from your development environment in firefox, set up a second profile for development. to create this dev profile start firefox with firefox.exe -no-remote -p dev on the first start the profile manager will appear, where you can create the dev profile and configure its home-path. change your preferences for more efficient development before you get to work developing your exten...
...end it as a way to work more efficiently. preference description value nglayout.debug.disable_xul_cache (not present in firefox 3.5+) ordinarily, firefox will cache xul documents after they have been read in once, to speed subsequent displays. disabling this cache forces xul documents to be reloaded any every time they are displayed. true browser.dom.window.dump.enabled (not present in firefox 3.5+) enables use of the dump method for debugging. refer to the “javascript debugging methods” sidebar. true javascript.options.showinconsole (present in firefox 3.5+) outputs javascript errors to the error console. true javascript.options.strict (present in firefox 3.5+) enforces strict error out...
...And 30 more matches

Drawing and Event Handling - Plugins
ne the plug-in itself. a windowed plug-in is drawn into its own native window (or portion of a native window) on a web page. a windowed plug-in is opaque, hiding the part of the page beneath its display window. this type of plug-in determines when it draws itself. a windowless plug-in does not require a native window. it is drawn in a target called a drawable, which corresponds to either the browser window or an off-screen bitmap. a drawable can be defined in several ways, depending on the platform. windowless plug-ins can be opaque or transparent. a windowless plug-in draws itself only in response to a paint message from the browser. for information about the way html determines plug-in display mode, see using html to display plug-ins. note: windowless plug-ins were not supported on t...
...e represents either the native window or a drawable. this structure contains information about coordinate position, size, the state of the plug-in (windowed or windowless), and some platform-specific information. note: when a plug-in is drawn to a window, the plug-in is responsible for preserving state information and ensuring that the original state is restored. for windowless plug-ins, the browser calls the npp_setwindow method with an npwindow structure that represents a drawable. for windowed plug-ins, the browser calls the npp_setwindow method with an npwindow structure that represents a window. //the npwindow structure typedef enum { npwindowtypewindow = 1, npwindowtypedrawable } npwindowtype; typedef struct _npwindow { void* window; /* platform-specific handle */ ui...
...on mac os, window is a pointer to an np_port. the x and y fields specify the top-left corner of the plug-in relative to the page. the width and height fields specify the dimensions of the plug-in area. these values should not be modified by the plug-in. the cliprect field defines the clipping rectangle of the plug-in in a coordinate system where the orig...
...And 30 more matches

Index
, xpcom this function provides a safe way to expose a function from a privileged scope to a less-privileged scope. 37 components.utils.forcegc needscontent, xpcom, xpcom:language bindings, xpconnect components.utils.forcegc lets scripts force a garbage collection cycle. the mozilla javascript engine will perform garbage collection automatically when the javascript heap grows beyond a certain size. this mechanism doesn't account for any native (c++) xpcom objects hanging off javascript objects though. in many cases a javascript application will have internal knowledge of javascript objects referencing large (trees of) xpcom objects and know when they are no longer reachable. in this case it can be important to be able to force a garbage collection cycle from javascrip...
...ting weblock xpcom in this chapter, we begin to design and implement the web locking functionality itself. we have already created a module that implements most of the generic component functionality (e.g. registration). this chapter will focus on the functionality that actually handles the web locking. 111 using xpcom components xpcom applications like the mozilla browser are sophisticated, modularized clients of xpcom components. in fact, virtually all of the functionality that you associate with a browser - navigation, window management, managing cookies, bookmarks, security, searching, rendering, and other features - is defined in xpcom components and accessed by means of those component interfaces. mozilla is made of xpcom components. 112 using xp...
...this macro is meant for critical errors; like assertions, ns_errors should not be reachable. 148 ns_if_addref xpcom, xpcom_macros macro 149 ns_if_release xpcom, xpcom_macros macro 150 ns_release xpcom, xp...
...And 29 more matches

Overview of Mozilla embedding APIs
ger exposes all of the available xpcom services - each service represents a global object which provides some piece of functionality. the component manager allows new instances of registered xpcom components to be instantiated. the embedding layer consists of several components built on top of xpcom and its services. much of the gecko functionality is exposed through a component called the nswebbrowser. embedding applications can leverage this component to easily access many of gecko's features. each webbrowser instance represents the "client-area" of a typical browser window. the webbrowser exposes a set of interfaces which allow the embedding application to control activity and respond to changes within this client area. using these interfaces an embedding application can build up its own u...
... public classes the following utility classes are available from the xpcom dll. they provide some basic functionality which should be leveraged when building new xpcom components. nscomptr<interface-type> these are templatized smart pointers which transparently deal with xpcom reference counting issues. ...
...nch related interfaces: nsipreflistener profile manager service contract-id: implemented interfaces: document loader service (webprogress) eventually, this service will be replaced by thewebprogress service... contract-id: ns_document_loader_service_contractid implemented interfaces: nsiwebprogress nsidocumentloader related interfaces: nsiwebprogresslistener public components nswebbrowser the nswebbrowser is the main embedding component which gecko exposes. conceptually, each nswebbrowser instance represents a html content area. conceptually, for each document being rendered, gecko creates a container called a domwindow. each webbrowser exposes a tree of domwindows - representing the frame hierarchy for the current document. as such, access to individual document frames is done ...
...And 28 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
introduction when netscape started the mozilla browser, it made the conscious decision to support w3c standards. as a result, mozilla is not fully backwards-compatible with netscape navigator 4.x and microsoft internet explorer legacy code; for example, mozilla does not support <layer> as i will discuss later. browsers, like internet explorer 4, that were built before the conception of w3c standards inherited many quirks. in this article, i will describe mozilla's quirks mode, which provides strong backwards html compatibility with internet explorer and other legacy browsers. i'll also cover nonstandard technologies, such as xmlhttprequest and rich text editing, that mozilla does support because no w3c equivalent existed at the time. they include: html 4.01, xhtml 1.0 and xhtml 1.
... before i go into the differences between mozilla and internet explorer, i'll cover some basic wa...
... before i go into the differences between mozilla and internet explorer, i'll cover some basic ways you can make a web application extensible in order to add new br...
...And 27 more matches

Using XPInstall to Install Plugins - Archive of obsolete content
deprecated and as of gecko 1.9 no longer available. extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest. in particular plugin developers should see how to package a plugin as an extension. xpinstall is a javascript-based installer technology that works across all the platforms that mozilla and netscape browsers based on mozilla (such as netscape 7) are deployed. it can be a way to ensure a smooth user-experience when obtaining plugins, without obliging the user to exit the browsing environment to launch a binary installer (the classic setup.exe experience on windows) or obliging the user to restart their browser. for plugin vendors who have already written a native code (e.g. exe) installer, xpinstal...
...mooth user-experience when obtaining plugins, without obliging the user to exit the browsing environment to launch a binary installer (the classic setup.exe experience on windows) or obliging the user to restart their browser. for plugin vendors who have already written a native code (e.g. exe) installer, xpinstall can wrap this native installer and run it so that the user never has to leave the browsing environment and click on the exe to run it. this article presents a guideline for improving the plugin installation experience for netscape gecko browsers using xpinstall. a definition of terms xpinstall is an installer technology, and the name itself stands for "cross platform install" (hence "xp" -- an abbreviation for "cross platform"). an xpinstall package is usually called an xpi packa...
...an xpi package is in fact a zip file with the xpi file extension (e.g. myplugininstaller.xpi), and can be created on windows by utilities such as winzip. xpi packages, like zip files, "contain" other files, typically: the software component to be installed. in our case, this is the plugin software. ...
...And 27 more matches

Places Developer Guide
this document is for extension and application developers who want to use the bookmarks and history apis in firefox 3. it provides code samples for many common use-cases, such as crud operations, searching, and observing. overview places is the umbrella term for a set of apis for managing browsing history and uri metadata first introduced in firefox 3. it encompasses history, bookmarks, tags, favicons, and annotations. ...
...asses history, bookmarks, tags, favicons, and annotations. there are two models of identity in the system: uris, and unique integer identifiers for items in the bookmark system. some of the apis are uri-centric, some use item ids. the api signature and context usually make clear which is required. bookmarks the toolkit bookmarks service is nsinavbookmarksservice: var bookmarks = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); this service provides methods for adding, editing and deleting items in the bookmarks collection. types in the bookmark system there are the four types of items in the bookmarks system, and their identifiers in the idl: bookmark: nsinavbookmarksservice.type_bookmark folder: nsinavbookmarksservice.type_folder...
...rvice.unfiledbookmarksfolder - items that have been "starred", but not places in any folder. nsinavbookmarksservice.tagsfolder - subfolders of this folder are tags, and their children are uris that have been tagged with that folder's name. other bookmarks apis note: this document covers the toolkit places services. ...
...And 27 more matches

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
s (mostly students) who share computers in labs and "self service" computer rooms. hence a single computer might connect many different users all day long. computers are dual-boot (windows 7 and linux fedora 19 by 2013). all users have a personal account on a windows server (ad) and an ldap account for linux authentication. objective the objective is to provide users with a mailer agent, a web browser, and a news reader which are automatically configured (preferences) at startup to the current user connected on the computer. choosing mozilla products allow us to use the same apps while running either windows or linux systems (i suspect mac osx would be fine too). instead of configuring end user individual preferences files (~/.mozilla/default/randomdir/prefs.js) we now use a centralized def...
...are not available by default in the environment variables). however i could be useful to get ldap values for firefox extra config, for example to set the default home page to the labeleduri ldap attribute of the user. firefox 22 omni.jar archive file became omni.ja since http://blog.ffextensionguru.com/2011/11/16/omni-jar-to-become-omni-ja/ [root@localhost firefox]# unzip -l /usr/lib/firefox/browser/omni.ja | grep defaults/pr warning [/usr/lib/firefox/browser/omni.ja]: 3598815 extra bytes at beginning or within zipfile (attempting to process anyway) error [/usr/lib/firefox/browser/omni.ja]: reported length of central directory is -3598815 bytes too long (atari stzip zipfile? j.h.holm zipsplit 1.1 zipfile?). compensating... 3850 01-01-2010 00:00 defaults/profile/bookmarks.
...l.config.obscure_value', 0); pref('general.config.filename', 'firefox.cfg'); then specify our set of preferences for firefox in firefox.cfg as named in ff-autoconf.js just above. ...
...And 26 more matches

Plug-in Basics - Plugins
next » how plug-ins are used plug-ins offer a rich variety of features that can increase the flexibility of gecko-based browsers. 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. ...
...n 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. with the plug-in api, you can create dynamically loaded plug-ins that can: register one or more mime types draw into a part of a browser window receive keyboard and mouse events obtain data from the network using urls post data to urls add hyperlinks or hotspots that link to new urls draw into sections on an html page communicate with javascript/dom from native code you can see which plug-ins are installed on your system and have been properly associated with the browser by consulting the installed plug-ins page. go to t...
...w-source that this information is simply gathered from the javascript. because plug-ins are platform-specific, you must port them to every operating system and processor platform upon which you want to deploy your plug-in. plug-ins and helper applications before plug-ins, there were helper applications. a helper application is a separate, free-standing application that can be started from the browser. like a plug-in, the browser starts a helper application when the browser encounters a mime type that is mapped to it. unlike a plug-in, a helper application runs separately from the browser in its own application space and does not interact with the browser or the web. when the browser encounters a mime type, it always searches for a registered plug-in first. if there are no matches for the m...
...And 26 more matches

jspage - Archive of obsolete content
value)?"textnode":"whitespace";}}else{if(typeof a.length=="number"){if(a.callee){return"arguments"; }else{if(a.item){return"collection";}}}}return typeof a;}function $unlink(c){var b;switch($type(c)){case"object":b={};for(var e in c){b[e]=$unlink(c[e]); }break;case"hash":b=new hash(c);break;case"array":b=[];for(var d=0,a=c.length;d<a;d++){b[d]=$unlink(c[d]);}break;default:return c;}return b;}var browser=$merge({engine:{name:"unknown",version:0},platform:{name:(window.orientation!=undefined)?"ipod":(navigator.platform.match(/mac|win|linux/i)||["other"])[0].tolowercase()},features:{xpath:!!(document.evaluate),air:!!(window.runtime),query:!!(document.queryselector)},plugins:{},engines:{presto:function(){return(!window.opera)?false:((arguments.callee.caller)?960:((document.getelementsbyclassname)?
...!(document.evaluate),air:!!(window.runtime),query:!!(document.queryselector)},plugins:{},engines:{presto:function(){return(!window.opera)?false:((arguments.callee.caller)?960:((document.getelementsbyclassname)?950:925)); },trident:function(){return(!window.activexobject)?false:((window.xmlhttprequest)?((document.queryselectorall)?6:5):4);},webkit:function(){return(navigator.taintenabled)?false:((browser.features.xpath)?((browser.features.query)?525:420):419); },gecko:function(){return(!document.getboxobjectfor&&window.mozinnerscreenx==null)?false:((document.getelementsbyclassname)?19:18);}}},browser||{});browser.platform[browser.platform.name]=true; browser.detect=function(){for(var b in this.engines){var a=this.engines[b]();if(a){this.engine={name:b,version:a};this.engine[b]=this.engine[b+a]=...
...y)?525:420):419); },gecko:function(){return(!document.getboxobjectfor&&window.mozinnerscreenx==null)?false:((document.getelementsbyclassname)?19:18);}}},browser||{});browser.platform[browser.platform.name]=true; browser.detect=function(){for(var b in this.engines){var a=this.engines[b]();if(a){this.engine={name:b,version:a};this.engine[b]=this.engine[b+a]=true; break;}}return{name:b,version:a};};browser.detect();browser.request=function(){return $try(function(){return new xmlhttprequest();},function(){return new activexobject("msxml2.xmlhttp"); },function(){return new activexobject("microsoft.xmlhttp");});};browser.features.xhr=!!(browser.request());browser.plugins.flash=(function(){var a=($try(function(){return navigator.plugins["shockwave flash"].description; },function(){return new activexo...
...And 25 more matches

Window.open() - Web APIs
the window interface's open() method loads the specified resource into the new or existing browsing context (window, <iframe> or tab) with the specified name. if the name doesn't exist, then a new browsing context is opened in a new tab or a new window, and the specified resource is loaded into it. syntax var window = window.open(url, windowname, [windowfeatures]); parameters url a domstring indicating the url of the resource to be loaded. this can be a path or url to an html page, image file, or any other resource that is supported by the browser. if the empty string ("") is specified as url, a blank page is opened into the targeted browsing context. ...
...open(url, windowname, [windowfeatures]); parameters url a domstring indicating the url of the resource to be loaded. this can be a path or url to an html page, image file, or any other resource that is supported by the browser. if the empty string ("") is specified as url, a blank page is opened into the targeted browsing context. windowname optional a domstring specifying the name of the browsing context (window, <iframe> or tab) into which to load the specified resource; if the name doesn't indicate an existing context, a new window is created and is given the name specified by windowname. this name can be used as the target for the target attribute of <a> or <form> elements. the name should not contain whitespace. keep in mind that this will not be used as the window's title. win...
...ally a thin wrapper for the window object representing the newly created window, and has all its features available. if the window couldn't be opened, the returned value is instead null. the returned reference can be used to access properties and methods of the new window as long as it complies with same-origin policy security requirements. description the open() method creates a new secondary browser window, similar to choosing new window from the file menu. the url parameter specifies the url to be fetched and loaded in the new window. if url is an empty string, then a new blank, empty window (url about:blank) is created with the default toolbars of the main window. note that remote urls won't load immediately. when window.open() returns, the window always contains about:blank. the actual...
...And 25 more matches

Media container formats (file types) - Web media technologies
eb, covering basics about their specifications as well as their benefits, limitations, and ideal use cases. webrtc does not use a container at all. instead, it streams the encoded audio and video tracks directly from one peer to another using mediastreamtrack objects to represent each track. see codecs used by webrtc for information about codecs commonly used for making webrtc calls, as well as browser compatibility information around codec support in webrtc. common container formats while there are a vast number of media container formats, the ones listed below are the ones you are most likely to encounter. some support only audio while others support both audio and video. the mime types and extensions for each are listed.the most commonly used containers for media on the web are probably ...
...likely to encounter. some support only audio while others support both audio and video. the mime types and extensions for each are listed.the most commonly used containers for media on the web are probably mpeg-4 (mp4), quicktime movie (mov), and the wavefile audio file format (wav). however, you may also encounter mp3, ogg, webm, avi, and other formats. not all of these are broadly supported by browsers, however; some combinations of container and codec are sometimes given their own file extensions and mime types as a matter of convenience, or because of their ubiquity. for example, an ogg file with only an opus audio track is sometimes referred to as an opus file, and might even have the extension .opus. but it's still actually just an ogg file. in other cases, a particular codec, stored in...
...1 audio layer iii encoding. these files use the audio/mp3 mime type and the .mp3 extension, even though their containers are just mpeg. ...
...And 25 more matches

Audio and Video Delivery - Developer guides
we can deliver audio and video on the web in a number of ways, ranging from 'static' media files to adaptive live streams. this article is intended as a starting point for exploring the various delivery mechanisms of web based media and compatibility with popular browsers. the audio and video elements whether we are dealing with pre-recorded audio files or live streams, the mechanism for making them available through the browser's <audio> and <video> elements remains pretty much the same. currently, to support all browsers we need to specify two formats, although with the adoption of mp3 and mp4 formats in firefox and opera, this is changing fast. you can find compatibility information in the guide to media types and formats on the web. to deliver video and audio, the general work...
... identify how you want to play/instantiate the media (e.g. ...
...y two formats, although with the adoption of mp3 and mp4 formats in firefox and opera, this is changing fast. you can find compatibility information in the guide to media types and formats on the web. to deliver video and audio, the general workflow is usually something like this: check what format the browser supports via feature detection (usually a choice of two, as stated above). if the browser doesn't support playback of any of the provided formats natively, either present a still image or use a fallback technology to present the video. identify how you want to play/instantiate the media (e.g. a <video> element, or document.createelement('video') perhaps?) deliver the media file to the player. html audio <audio controls preload="auto"> <source src="audiofile.mp3" type="audio/m...
...And 24 more matches

windows - Archive of obsolete content
enumerate and examine open browser windows, open new windows, and listen for window events. usage the windows module provides basic functions for working with browser windows. with this module, you can: enumerate the currently opened browser windows open new browser windows listen for common window events such as open and close private windows if your add-on has not opted into private browsing, then you won't see any private browser windows. private browser windows won't appear in the browserwindows property, you won't receive any window events, and you won't be able to open private windows. to learn more about private windows, how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. converting to chrome w...
... private browser windows. private browser windows won't appear in the browserwindows property, you won't receive any window events, and you won't be able to open private windows. to learn more about private windows, how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. converting to chrome windows to convert from the browserwindow objects used in this api to the chrome window objects used in the window/utils api, use the viewfor() function exported by the viewfor module. to convert back the other way, from a chrome window to a browserwindow object, use the modelfor() function, exported by the modelfor module. ...
... converting to chrome windows to convert from the browserwindow objects used in this api to the chrome window objects used in the window/utils api, use the viewfor() function exported by the viewfor module. to convert back the other way, from a chrome window to a browserwindow object, use the modelfor() function, exported by the modelfor module. ...
...And 23 more matches

Using the Right Markup to Invoke Plugins - Archive of obsolete content
this article is about how to invoke a plugin with the correct use of html. it discusses the object element and the embed element, with details about using the most apt html to invoke java in a web page as well. the object element: w3c standards and cross-browser issues the object element is part of the html 4.01 specification, and is the recommended mechanism to invoke plugins. its use is subject to a few caveats that this section outlines. traditionally, the object element has been used differently by microsoft internet explorer and by mozilla-based browsers such as netscape 7. in ie, the object element is used to invoke a plugin that is built on the activex architecture. here's an example of this kind of usage for ie: <!-- ie only code --> <object classid="clsid:d27cdb6e-ae6d-11c...
... the flash plugin. for instance, the param name="movie" tells the flash plugin the location of the swf file to start playing. with the release of netscape 7.1, this kind of activex use of the object element is supported for use with the microsoft® windows media player. only the windows media player is supported as an activex control in netscape 7.1. the details are covered in another article. ...
...s media player. only the windows media player is supported as an activex control in netscape 7.1. the details are covered in another article. browsers such as netscape 7 will not render the flash plugin if the above kind of markup is used, because netscape 7 does not support activex or activex-based component invocations, with the exception of windows media player in netscape 7.1. mozilla-based browsers support the netscape plugin architecture, which is not com based like activex (and thus, not invoked via a unique identifier) but rather, mime type based. mozilla-based browsers support the use of the object element along with a mime type. here is an example of this usage, once again for the macromedia flash plugin: <object type="application/x-shockwave-flash" data="javascript-to-flash.swf" w...
...And 23 more matches

Event reference
additional custom fields and/or functions used to get additional information about what happened. events can represent everything from basic user interactions to automated notifications of things happening in the rendering model. this article offers a list of events that can be sent; some are standard events defined in official specifications, while others are events used internally by specific browsers; for example, mozilla-specific events are listed so that add-ons can use them to interact with the browser. most common categories resource events event name fired when error a resource failed to load. abort the loading of a resource has been aborted. load a resource and its dependent resources have finished loading. beforeunl...
... abort the loading of a resource has been aborted. load a resource and its dependent resources have finished loading. beforeunload the window, the document and its resources are about to be unloaded. unload the document or a dependent resource is being unloaded. network events event name fired when online the browser has gained access to the network. offline the browser has lost access to the network. focus events event name fired when focus an element has received focus (does not bubble). blur an element has lost focus (does not bubble). focusin an element is about to receive focus (does bubble). focusout an element is ...
... leaves a valid drop target. dragover an element or text selection is being dragged over a valid drop target (fired continuously every 350ms). drop an element is dropped on a valid drop target. media events event name fired when audioprocess the input buffer of a scriptprocessornode is ready to be processed. canplay the browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. canplaythrough the browser estimates it can play the media up to its end without stopping for content buffering. complete the rendering of an offlineaudiocontext is terminated. durationchange the durat...
...And 23 more matches

<input type="time"> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. ...
... the source for this interactive example is stored in a github repository. ...
... the source for this interactive example is stored in a github repository. ...
...And 23 more matches

Codecs used by WebRTC - Web media technologies
the webrtc api makes it possible to construct web sites and apps that let users communicate in real time, using audio and/or video as well as optional data and other information. to communicate, the two devices need to be able to agree upon a mutually-understood codec for each track so they can successfully communicate and present the shared media. this guide reviews the codecs that browsers are required to implement as well as other codecs that some or all browsers support for webrtc. containerless media webrtc uses bare mediastreamtrack objects for each track being shared from one peer to another, without a container or even a mediastream associated with the tracks. which codecs can be within those tracks is not mandated by the webrtc specification. however, rfc 7742 specifies that all we...
... as well as other codecs that some or all browsers support for webrtc. containerless media webrtc uses bare mediastreamtrack objects for each track being shared from one peer to another, without a container or even a mediastream associated with the tracks. which codecs can be within those tracks is not mandated by the webrtc specification. however, rfc 7742 specifies that all webrtc-compatible browsers must support vp8 and h.264's constrained baseline profile for video, and rfc 7874 specifies that browsers must support at least the opus codec as well as g.711's pcma and pcmu formats. these two rfcs also lay out options that must be supported for each codec, as well as specific user comfort features such as echo cancelation. ...
... while compression is always a necessity when dealing with media on the web, it's of additional importance when videoconferencing in order to ensure that the participants are able to communicate without lag or interruptions. ...
...And 23 more matches

CSS property compatibility table for form controls - Learn web development
css support for html forms. due to the complexity of css and html forms, these tables can't be considered a perfect reference. however, they will give you good insight into what can and can't be done, which will help you learn how to do things. how to read the tables values for each property, there are four possible values: yes there's reasonably consistent support for the property across browsers. you may still face strange side effects in certain edge cases. partial while the property works, you may frequently face strange side effects or inconsistencies. you should probably avoid these properties unless you master those side effects first. no the property simply doesn't work or is so inconsistent that it's not reliable. n.a. the property has no meaning for this type of widget. ...
... text-decoration this property is not supported by opera on form widgets. text-overflow ...
... * { /* turn off the native look and feel */ -webkit-appearance: none; appearance: none; /* for internet explorer */ background: none; } compatibility tables global behaviors some behaviors are common to many browsers at a global level: border, background, border-radius, height using one of these properties can partially or fully turn off the native look & feel of widgets on some browsers. be careful when you use them. line-height this property is supported inconsistently across browsers and you should avoid it. text-decoration this property is not supported by opera on form widgets. text-overflow opera, safari, and ie9 do not support this property on form widgets. text-shadow opera does not support text-shadow on form widgets and ie9 does not support it at all. text ...
...And 22 more matches

Web video codec guide - Web media technologies
are actually ignored at this time when performing software decoding, and the decoder just does the best it can to play the video given the settings provided. for compatibility's sake going forward, however, you should stay within the limits of the level you choose. the primary drawback to av1 at this time is that it is very new, and support is still in the process of being integrated into most browsers. additionally, encoders and decoders are still being optimized for performance, and hardware encoders and decoders are still mostly in development rather than production. for this reason, encoding a video into av1 format takes a very long time, since all the work is done in software. for the time being, because of these factors, av1 is not yet ready to be your first choice of video codec, but...
...roma subsampling main 8 or 10 4:0:0 (greyscale) or 4:2:0 high 8 or 10 4:0:0 (greyscale), 4:2:0, or 4:4:4 professional 8, 10, or 12 4:0:0 (greyscale), 4:2:0, 4:2:2, or 4:4:4 hdr support yes variable frame rate (vfr) support yes browser compatibility feature chrome edge firefox internet explorer opera safari av1 support 70 75 67 no 57 no container support isobmff[1], mpeg-ts, mp4, webm rtp / webrtc compatible yes supporting/maintaining organ...
...g), which allows, among other things, the production of stereoscopic video. avc is a proprietary format, however, and numerous patents are owned by multiple parties regarding its technologies. commercial use of avc media requires a license, though the mpeg la patent pool does not require license fees for streaming internet video in avc format as long as the video is free for end users. non-web browser implementations of webrtc (any implementation which doesn't include the javascript apis) are required to support avc as a codec in webrtc calls. while web browsers are not required to do so, some do. in html content for web browsers, avc is broadly compatible and many platforms support hardware encoding and decoding of avc media. however, be aware of its licensing requirements before choosing ...
...And 22 more matches

Bootstrapping a new locale
at level making sure you are *not* inside mozilla-1.9.x/ and then run the following commands. warning: don't copy and paste these commands; you need to replace "ab-cd" with your language identifier first and 1.9.x with the most current release branch. for instance, firefox 3.6 is released from the 1.9.2 branch. ...
... sure you are *not* inside mozilla-1.9.x/ and then run the following commands. warning: don't copy and paste these commands; you need to replace "ab-cd" with your language identifier first and 1.9.x with the most current release branch. for instance, firefox 3.6 is released from the 1.9.2 branch. ...
...nd then run the following commands. warning: don't copy and paste these commands; you need to replace "ab-cd" with your language identifier first and 1.9.x with the most current release branch. for instance, firefox 3.6 is released from the 1.9.2 branch. ...
...And 21 more matches

Common Firefox theme issues and solutions - Archive of obsolete content
llazine for solutions to this issue: http://forums.mozillazine.org/viewtopic.php?f=18&t=2131121 http://forums.mozillazine.org/viewtopic.php?f=18&t=1953371&start=60 windows 7 aero not going into full screen mode properly on win7 with aero glass support firefox doesn't always go to full screen mode from a normal window properly. the resolution to this issue is to add the following code to your browser.css file somewhere below where the main-window is made transparent to support aero glass. @media all and (-moz-windows-compositor) { /* make transition to fullscreen mode seamlessly in firefox 10+ */ #main-window[infullscreen="true"] { -moz-appearance: none; background-color: -moz-dialog!important; } } for more information about this issue please see bug 732757 and bug 732757 an...
...more information about this issue please see bug 732757 and bug 732757 and this mozillazine thread. mac os x os x lion missing toolbar button icons due to firefox bug 679708 and bug 702558, some toolbar buttons icons may be missing on firefox 8 and later running on mac os x lion. ...
...ad. mac os x os x lion missing toolbar button icons due to firefox bug 679708 and bug 702558, some toolbar buttons icons may be missing on firefox 8 and later running on mac os x lion. in order to work around this issue, you need to either rename any of the following files that are in your chrome://browser/skin/ folder and fix any references to those files, or copy them to the folder chrome://browser/skin/lion/: keyhole-circle.png toolbar.png toolbarbutton-dropmarker.png tabbrowser/alltabs-box-bkgnd-icon.png tabview/tabview.png places/toolbar.png linux linux select box fields are showing both drop arrow and spinner arrows on linux: the styling of drop down select box fields may show both a drop arrow and up/down spinner arrows. the problem is commonly caused by a -moz-appearanc...
...And 20 more matches

Finding window handles - Archive of obsolete content
vehandle provides the handle (hwnd [widows], gdkwindow* [linux], nswindow* [macosx],...) of a top-level window, for all plateforms, as a string. when working on windows platforms, many apis and frameworks require a window handle (hwnd type). since mozilla tries to be as cross-platform as possible, it can be difficult to get the handle you need. note: starting in gecko 2.0, only the top level browser window has an hwnd. web content windows (in tabs) do not have their own hwnds. typically the top level browser window hwnd has no children, although if there are windowed plugins (such as flash) visible in the window, they will have hwnds whose parent is the top level browser window hwnd. here is some simple code that can get access to mozilla window handles. this code can be used from extern...
...here are windowed plugins (such as flash) visible in the window, they will have hwnds whose parent is the top level browser window hwnd. here is some simple code that can get access to mozilla window handles. this code can be used from external application or from an xpcom component within an extension. ...
... recall that nsibasewindow -> nativehandle returns the following in the different operating systems: windows - hwnd mac os x - nswindow* linux - gdkwindow* (it will be gdkwindow* no matter what desktop/window manager) is in use, for explanation why see the article: standard os libraries...
...And 19 more matches

Implementing feature detection - Learn web development
previous overview: cross browser testing next feature detection involves working out whether a browser supports a certain block of code, and running different code depending on whether it does (or doesn't), so that the browser can always provide a working experience rather than crashing/erroring in some browsers. this article details how to write your own simple feature detection, how to use a library to speed up implementation, and native features for feature detection such as @supports. prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high-level principles of cross-browser testing. objective: to understand what the concept of feature detection is, and be able to implement suitable solutions in css and javascript. ...
...s, and javascript languages; an idea of the high-level principles of cross-browser testing. objective: to understand what the concept of feature detection is, and be able to implement suitable solutions in css and javascript. the concept of feature detection the idea behind feature detection is that you can run a test to determine whether a feature is supported in the current browser, and then conditionally run code to provide an acceptable experience both in browsers that do support the feature, and browsers that don't. if you don't do this, browsers that don't support the features you are using in your code won't display your sites properly and will just fail, creating a bad user experience. let's recap and look at the example we touched on in our handling common javascr...
...port the feature, and browsers that don't. if you don't do this, browsers that don't support the features you are using in your code won't display your sites properly and will just fail, creating a bad user experience. let's recap and look at the example we touched on in our handling common javascript problems — the geolocation api (which exposes available location data for the device the web browser is running on) has the main entry point for its use, a geolocation property available on the global navigator object. ...
...And 19 more matches

Using the application cache - HTML: Hypertext Markup Language
s of being removed from the web platform. as of firefox 44+, when appcache is used to provide offline support for a page, a warning message displays in the console advising developers to use service workers instead (bug 1204581). introduction html5 provides an application caching mechanism that lets web applications run offline. ...
...ad (bug 1204581). introduction html5 provides an application caching mechanism that lets web applications run offline. this application cache (appcache) interface lists resources that browsers should cache to be available offline. applications that are cached load and work correctly offline, even if users press the refresh button. an application cache gives the following benefits: offline browsing users can navigate a site even when they are offline. speed cached resources are local, and therefore load faster. reduced server load the browser only downloads resources that have changed from the server. how the application cache works enabling the application cache to enable the application cache for an application, include the manifest attribute in the <html> element: <html mani...
... the browser only downloads resources that have changed from the server. how the application cache works enabling the application cache to enable the application cache for an application, include the manifest attribute in the <html> element: <html manifest="/example.appcache"> … </html> the manifest attribute references a url for a cache manifest file: a text file that lists urls that browsers should cache for your application. you should include the manifest attribute on each page of your site that you want cached. the browser does not cache pages without the manifest attribute, unless such pages are listed in the manifest file. ...
...And 19 more matches

Image file type and format guide - Web media technologies
in this guide, we'll cover the image file types generally supported by web browsers, and provide insights that will help you select the most appropriate formats to use for your site's imagery. common image file types there are many image file formats in the world. however, the ones listed below are generally recognized as usable on the web, though bmp is generally not recommended as browser support is potentially constrained; it should usually be avoided for web content. ...
...rmats to use for your site's imagery. common image file types there are many image file formats in the world. however, the ones listed below are generally recognized as usable on the web, though bmp is generally not recommended as browser support is potentially constrained; it should usually be avoided for web content. ...
... in the tables below, the term bits per component refers to the number of bits used to represent each color component. for ex...
...And 19 more matches

requiredFeatures - SVG: Scalable Vector Graphics
this provides a way to design svg that gracefully falls back when features aren't available. if the attribute is not present, then its implicit evaluated value is true. ...
... <text x="20" y="27">requiredfeatures not supported</text> </g> </svg> usage notes value <list-of-features> default value true if not defined, false if null or empty string as value animatable no <list-of-features> this is a list of feature strings, separated using white space. determines whether all of the named features are supported by the browser. see feature strings below for a list of allowed values. feature strings the following are the feature strings for the requiredfeatures attribute. these same feature strings apply to the hasfeature method call that is part of the svg dom's support for the domimplementation interface. in some cases the feature strings map directly to a set of attributes, properties or elements, in others they...
...st of allowed values. feature strings the following are the feature strings for the requiredfeatures attribute. these same feature strings apply to the hasfeature method call that is part of the svg dom's support for the domimplementation interface. in some cases the feature strings map directly to a set of attributes, properties or elements, in others they represent some functionality of the browser. note that the format and naming for feature strings changed from svg 1.0 to svg 1.1. the svg 1.0 feature strings are not listed here but can be found in the svg specification. some browser support svg 1.0 feature strings for compatibility reasons. however, the svg 1.0 feature strings are considered deprecated. http://www.w3.org/tr/svg11/feature#svg at least one of the following feature i...
...And 19 more matches

SVG documentation index - SVG: Scalable Vector Graphics
3 compatibility sources svg the following sources are used for the compatibility tables on svg elements and attributes: 4 content type needstechnicalreview, svg, types, data types svg makes use of a number of data types. this article lists these types along with their synta...
... 6 namespaces crash course svg, xml as an xml dialect, svg is namespaced. it is important to understand the concept of namespaces and how they are used if you plan to author svg content. versions of svg viewers prior to the release of firefox 1.5 unfortunately paid scant attention to namespaces, but they are essential to multi-xml dialect supporting user agents such as gecko-based browsers which must be very strict. take some time to understand namespaces now and it will save you all sorts of headaches in the future. 7 example svg, xml in this example, we use xhtml, svg, javascript, and the dom to animate a swarm of "motes". these motes are governed by two simple principles. first, each mote tries to move towards the mouse cursor, and second each mote tries ...
...d attribute assigns a unique name to an element. 106 ideographic deprecated, svg, svg attribute the ideographic attribute indicates the alignment coordinate for glyphs to achieve ideographic baseline alignment for horizontally oriented glyph layouts. 107 image-rendering needsexample, svg, svg attribute the image-rendering attribute provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing. 108 in filters, needscompattable, svg, svg attribute the in attribute identifies input for the given filter primitive. 109 in2 filters, needscompattable, needsexample, svg, svg attribute the in2 attribute identifies the second input for the given filter primitive. it works ex...
...And 19 more matches

The Essentials of an Extension - Archive of obsolete content
s having one skin entry for the global skin, classic/1.0, and multiple locale entries, one for each translation. finally, the location is specified. there are some additional options that can be included in the entries of a chrome.manifest file. they are documented in the chrome registration page. notably, we can have entries that are os-specific. this is important because the appearance of the browser is very different for each operating system. if our extension needed to look differently on different systems, we could change the manifest file so that it looks like this: content xulschoolhello content/ skin xulschoolhello classic/1.0 skin/unix/ skin xulschoolhello classic/1.0 skin/mac/ os=darwin skin xulschoolhello classic/1.0 skin/win/ os=winnt locale ...
... that replace skins, and translators to create localizations in different languages, all of this without having to change your extension or your code. this gives firefox extensions a great deal of flexibility. chrome files are accessed through the chrome protocol. this is what a chrome uri looks like: chrome://packagename/section/path/to/file so, for instance, if i want to access the file browseroverlay.xul in the extension, the chrome uri would be chrome://xulschoolhello/content/browseroverlay.xul. if you have too many files in the content and you want to organize them in subdirectories, there's nothing you need to change in chrome.manifest, all you need is to add the right path after content in the uri. skin and locale files work in the same way, and you don't need to specify skin n...
...files in the content and you want to organize them in subdirectories, there's nothing you need to change in chrome.manifest, all you need is to add the right path after content in the uri. skin and locale files work in the same way, and you don't need to specify skin names or locale names. so, to access the dtd file in the hello world extension, the chrome path is chrome://xulschoolhello/locale/browseroverlay.dtd. firefox knows what locale to look for. here's an interesting experiment. open a new firefox tab, type chrome://mozapps/content/downloads/downloads.xul on your location bar and press enter. surprised? you just opened the downloads window in a firefox tab! you can access any chrome file by just typing its uri in the location bar. this can come in handy if you want to inspect script f...
...And 18 more matches

Plug-in Development Overview - Gecko Plugin API Reference
« previousnext » writing plug-ins once you decide what you want your plug-in to do, creating it is a simple process. a basic overview of the plug-in development process is given in the following steps. plan your plug-in: decide on the services you want the plug-in software to provide and how it will interact with the browser and the special media for which the plug-in is created. decide the mime type for the plug-in (see registering plug-ins). set up your development environment properly. you can use a variety of environments to create a plug-in, but make sure that you have the necessary files from the plugin sdk. create a plug-in project. write your plug-in code and implement the appropriate plug-in api methods for basic plug-in operation. you'll find an overview of ...
...e plugin sdk. create a plug-in project. write your plug-in code and implement the appropriate plug-in api methods for basic plug-in operation. you'll find an overview of the plug-in api methods in this chapter, as well as separate chapters for all of the major functional areas of the plug-in api. also see making plug-ins scriptable for more information about making plug-ins accessible from the browser. build the plug-in for your operating system. see "building plug-ins". install the plug-in in the plug-in directory for your operating system. see installing plug-ins. test your plug-in and debug as necessary. create an html page and embed the plug-in object. for information about the html elements to use, see using html to display plug-ins. to see your plug-in in action, simply display the...
...perating system. see "building plug-ins". install the plug-in in the plug-in directory for your operating system. see installing plug-ins. test your plug-in and debug as necessary. create an html page and embed the plug-in object. for information about the html elements to use, see using html to display plug-ins. to see your plug-in in action, simply display the html page that calls it in the browser. registering plug-ins gecko identifies a plug-in by the mime type it supports. when it needs to display data of a particular mime type, the browser finds and invokes the plug-in object that supports that type. the data can come from either an object element in an html file (where the object or embed element either specifies the mime type directly or references a file of that type), from a se...
...And 18 more matches

Beginner's guide to media queries - Learn web development
media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. ...
...ow css works (study css first steps and css building blocks.) objective: to understand how to use media queries, and the most common approach for using them to create responsive designs. media query basics the simplest media query syntax looks like this: @media media-type and (media-feature-rule) { /* css rules go here */ } it consists of: a media type, which tells the browser what kind of media this code is for (e.g. print, or screen). a media expression, which is a rule, or test that must be passed for the contained css to be applied. a set of css rules that will be applied if the test passes and the media type is correct. media types the possible types of media you can specify are: all print screen speech the following media query will only set the bo...
..., which is a rule, or test that must be passed for the contained css to be applied. a set of css rules that will be applied if the test passes and the media type is correct. media types the possible types of media you can specify are: all print screen speech the following media query will only set the body to 12pt if the page is printed. it will not apply when the page is loaded in a browser. @media print { body { font-size: 12pt; } } note: the media type here is different from the so-called mime type. note: there were a number of other media types defined in the level 3 media queries specification; these have been deprecated and should be avoided. note: media types are optional; if you do not indicate a media type in your media query then the media query w...
...And 18 more matches

Plug-in Development Overview - Plugins
« previousnext » writing plug-ins once you decide what you want your plug-in to do, creating it is a simple process. a basic overview of the plug-in development process is given in the following steps. plan your plug-in: decide on the services you want the plug-in software to provide and how it will interact with the browser and the special media for which the plug-in is created. decide the mime type for the plug-in (see registering plug-ins). set up your development environment properly. you can use a variety of environments to create a plug-in, but make sure that you have the necessary files from the plugin sdk. create a plug-in project. write your plug-in code and implement the appropriate plug-in api methods for basic plug-in operation. you'll find an overview of ...
...e plugin sdk. create a plug-in project. write your plug-in code and implement the appropriate plug-in api methods for basic plug-in operation. you'll find an overview of the plug-in api methods in this chapter, as well as separate chapters for all of the major functional areas of the plug-in api. also see making plug-ins scriptable for more information about making plug-ins accessible from the browser. build the plug-in for your operating system. see "building plug-ins". install the plug-in in the plug-in directory for your operating system. see installing plug-ins. test your plug-in and debug as necessary. create an html page and embed the plug-in object. for information about the html elements to use, see using html to display plug-ins. to see your plug-in in action, simply display the...
...perating system. see "building plug-ins". install the plug-in in the plug-in directory for your operating system. see installing plug-ins. test your plug-in and debug as necessary. create an html page and embed the plug-in object. for information about the html elements to use, see using html to display plug-ins. to see your plug-in in action, simply display the html page that calls it in the browser. registering plug-ins gecko identifies a plug-in by the mime type it supports. when it needs to display data of a particular mime type, the browser finds and invokes the plug-in object that supports that type. the data can come from either an object element in an html file (where the object or embed element either specifies the mime type directly or references a file of that type), from a se...
...And 18 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
a push button with no default behavior displaying the value of the value attribute, empty by default. <input type="button" name="button" /> checkbox a check box allowing single values to be selected/deselected. <input type="checkbox" name="checkbox"/> color a control for specifying a color; opening a color picker when active in supporting browsers. <input type="color" name="color"/> html5 date a control for entering a date (year, month, and day, with no time). opens a date picker or numeric wheels for year, month, day when active in supporting browsers. <input type="date" name="date"/> html5 datetime-local a control for entering a date and time, with no time zone. opens a date pick...
... a control for entering a date (year, month, and day, with no time). opens a date picker or numeric wheels for year, month, day when active in supporting browsers. <input type="date" name="date"/> html5 datetime-local a control for entering a date and time, with no time zone. opens a date picker or numeric wheels for date- and time-components when active in supporting browsers. <input type="datetime-local" name="datetime-local"/> html5 email a field for editing an email address. looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. <input type="email" name="email"/> html5 file a control that lets the user select a file. use the acc...
... <input type="range" name="range" min="0" max="25"/> html5 reset a button that resets the contents of the form to default values. not recommended. <input type="reset" name="reset"/> search a single-line text field for entering search strings. line-breaks are automatically removed from the input value. may include a delete icon in supporting browsers that can be used to clear the field. displays a search icon instead of enter key on some devices with dynamic keypads. <input type="search" name="search"/> html5 submit a button that submits the form. <input type="submit" name="submit"/> tel a control for entering a telephone number. displays a telephone keypad in some devices with dynami...
...And 18 more matches

<textarea> - HTML: Hypertext Markup Language
e examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the above example demonstrates a number of features of <textarea>: an id attribute to allow the <textarea> to be associated with a <label> element for accessibility purposes a name attribute to set the name of the associated data point submitted to the server when the form is submitted. rows and cols attributes to allow you to specify an exact size for the <textarea> to take. setting these is a good idea for consistency, as browser defaults can differ. default content entered between the opening and closing tags. <textarea> does not support the value attribute. the <textarea> element also accepts several attributes common to form <input>s, such as autocomplete, autofocus, disabled...
... opening and closing tags. <textarea> does not support the value attribute. the <textarea> element also accepts several attributes common to form <input>s, such as autocomplete, autofocus, disabled, placeholder, readonly, and required. attributes this element includes the global attributes. autocapitalize this is a non-standard attribute supported by webkit on ios (therefore nearly all browsers running on ios, including safari, firefox, and chrome), which controls whether and how the text value should be automatically capitalized as it is entered/edited by the user. the non-deprecated values are available in ios 5 and later. possible values are: none: completely disables automatic capitalization. sentences: automatically capitalize the first letter of sentences. words: automa...
...isables automatic capitalization. sentences: automatically capitalize the first letter of sentences. words: automatically capitalize the first letter of words. characters: automatically capitalize all characters. on: deprecated since ios 5. off: deprecated since ios 5. autocomplete this attribute indicates whether the value of the control can be automatically completed by the browser. possible values are: off: the user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry. on: the browser can automatically complete the value based on values that the user has entered during previous uses. if the autocomplete attribute is not specified on a <textarea...
...And 18 more matches

XUL Structure - Archive of obsolete content
the mozilla rendering engine takes the content in the form of html source and transforms it into a document tree. the tree is then converted into a set of objects that can be displayed on the screen. ...
...the mozilla rendering engine takes the content in the form of html source and transforms it into a document tree. the tree is then converted into a set of objects that can be displayed on the screen. ...
...l, the files receive elevated privileges to access local files, access preferences and bookmarks and perform other privileged operations. obviously, web pages do not get these privileges, unless they are signed with a digital certificate and the user has granted permission to perform these operations. ...
...And 17 more matches

Windows Media in Netscape - Archive of obsolete content
windows media player 6.4 activex control as well as versions 7 through 9. this article explains how to embed the windows media player activex control in web pages to support netscape 7.1, how to control the windows media player activex control using javascript and provides working examples. this article deals uniquely with netscape 7.1 running on the windows operating system. detecting the right browser like internet explorer, netscape 7.1 and later versions can play windows media files using the popular windows media player activex control. this control is widely used to provide inline media support for web pages that provide sound, video and other media. controls such as windows media player also interact closely with the scripts in a web page. netscape 7.1 is the first netscape gecko™ bro...
...es using the popular windows media player activex control. this control is widely used to provide inline media support for web pages that provide sound, video and other media. controls such as windows media player also interact closely with the scripts in a web page. ...
...support the windows media player as an activex control -- previous netscape browsers did not support any activex controls, and thus detecting which versions of netscape support the windows media activex control is an important first step towards building multimedia experiences using html, javascript, and the windows media activex control. the windows media 9 series sdk documentation for netscape browsers says that versions of netscape (including 6.2 and 7.0) support the embedding of the windows media player control using a java applet. while that approach works with browsers older than netscape 7.1, this section introduces the use of the objects that enable deployment of the windows media player directly as an activex control within netscape 7.1. this section presents two mechanisms to detect ...
...And 17 more matches

Anatomy of a video game - Game development
nkfully makes it easy to develop an efficient, execute-once-per-frame main loop. of course, your game will only be as optimized as you make it. if something looks like it should be attached to a more infrequent event then it is often a good idea to break it out of the main loop (but not always). building a main loop in javascript javascript works best with events and callback functions. ...
...ts and callback functions. modern browsers strive to call methods right as they are needed and idle (or do their other tasks) in the gaps. it is an excellent idea to attach your code to the moments that are appropriate for them. think about whether your function really needs to be called on a strict interval of time, every frame, or only after something else happens. being more specific with the browser about when your function needs to be called allows the browser to optimize when it is called. also, it will probably make your job easier. some code needs to be run frame-by-frame so why attach that function to anything other than the browser's redraw schedule? on the web, window.requestanimationframe() will be the foundation of most well-programmed per-frame main loops. a callback function m...
...in loop: window.main = function () { window.requestanimationframe( main ); // whatever your main loop needs to do }; main(); // start the cycle note: in each of the main() methods discussed here, we schedule a new requestanimationframe before performing our loop contents. that is not by accident and it is considered best practice. calling the next requestanimationframe early ensures the browser receives it on time to plan accordingly even if your current frame misses its vsync window. the above chunk of code has two statements. the first statement creates a function as a global variable called main(). this function does some work and also tells the browser to call itself next frame with window.requestanimationframe(). the second statement calls the main() function, defined in the fi...
...And 17 more matches

Responsive images - Learn web development
ics, patterns, interface elements, etc., but it starts to get very complex to create a vector-based image with the kind of detail that you'd find in say, a photo. raster image formats such as jpegs are more suited to the kind of images we see in the above example. ...
...it starts to get very complex to create a vector-based image with the kind of detail that you'd find in say, a photo. raster image formats such as jpegs are more suited to the kind of images we see in the above example. this kind of problem didn't exist when the web first existed, in the early to mid 90s — back then the only devices in existence to browse the web were desktops and laptops, so browser engineers and spec writers didn't even think to implement solutions. 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). ...
... 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). note: the new features discussed in this article — srcset/sizes/<picture> — are all supported in release versions of modern desktop and mobile browsers (including microsoft's edge browser, although not internet explorer.) how do you create responsive images? in this section, we'll look at the two problems illustrated above and show how to solve them using html's responsive image features. you should note that we will be focusing on the html <img>s for this section, as seen in the content area of the example above — the image in the site...
...And 17 more matches

Video and audio content - Learn web development
r ready-made code for embedding video/audio in your webpages; if you use that route, you can avoid some of the difficulties we discuss in this article. we'll be discussing this kind of service a bit more in the next article. the <video> element the <video> element allows you to embed a video very easily. a really simple example looks like this: <video src="rabbit320.webm" controls> <p>your browser doesn't support html5 video. here is a <a href="rabbit320.webm">link to the video</a> instead.</p> </video> the features of note are: src in the same way as for the <img> element, the src (source) attribute contains a path to the video you want to embed. it works in exactly the same way. controls users must be able to control video and audio playback (it's especially critical for people ...
...video</a> instead.</p> </video> the features of note are: src in the same way as for the <img> element, the src (source) attribute contains a path to the video you want to embed. it works in exactly the same way. ...
...itical for people who have epilepsy.) you must either use the controls attribute to include the browser's own control interface, or build your interface using the appropriate javascript api. at a minimum, the interface must include a way to start and stop the media, and to adjust the volume. the paragraph inside the <video> tags this is called fallback content — this will be displayed if the browser accessing the page doesn't support the <video> element, allowing us to provide a fallback for older browsers. this can be anything you like; in this case, we've provided a direct link to the video file, so the user can at least access it some way regardless of what browser they are using. the embedded video will look something like this: you can try the example live here (see also the sour...
...And 17 more matches

IAccessibleTable
te and if it is not present then iaccessible2.indexinparent() can be used as in the typical case where cells are direct children of the table. the range of valid coordinates for this interface are implementation dependent. however, that range includes at least the intervals from the from the first row or column with the index 0 up to the last (but not including) used row or column as returned by nrows() and ncolumns(). method overview [propget] hresult accessibleat([in] long row, [in] long column, [out] iunknown accessible ); [propget] hresult caption([out] iunknown accessible ); [propget] hresult childindex([in] long rowindex, [in] long columnindex, [out] long cellindex ); [propget] hresult columndescription([in] long column, [out] bstr description ); [propget] hresult columnextent...
...escription ); [propget] hresult columnextentat([in] long row, [in] long column, [out] long ncolumnsspanned ); [propget] hresult columnheader([out] iaccessibletable accessibletable, [out] long startingrowindex ); [propget] hresult columnindex([in] long cellindex, [out] long columnindex ); [propget] hresult iscolumnselected([in] long column, [out] boolean isselected ); [propget] hresult isrowselected([in] long row, [out] boolean isselected ); [propget] hresult isselected([in] long row, [in] long column, [out] boolean isselected ); [propget] hresult modelchange([out] ia2tablemodelchange modelchange ); [propget] hresult ncolumns([out] long columncount ); [propget] hresult nrows([out] long rowcount ); [propget] hresult nselectedchildren([out] long cellcount ); [propget] hresul...
...elected([in] long row, [in] long column, [out] boolean isselected ); [propget] hresult modelchange([out] ia2tablemodelchange modelchange ); [propget] hresult ncolumns([out] long columncount ); [propget] hresult nrows([out] long rowcount ); [propget] hresult nselectedchildren([out] long cellcount ); [propget] hresult nselectedcolumns([out] long columncount ); [propget] hresult nselectedrows([out] long rowcount ); [propget] hresult rowcolumnextentsatindex([in] long index, [out] long row, [out] long column, [out] long rowextents, [out] long columnextents, [out] boolean isselected ); [propget] hresult rowdescription([in] long row, [out] bstr description ); [propget] hresult rowextentat([in] long row, [in] long column, [out] long nrowsspanned ); [propget] hresult rowheader([out]...
...And 17 more matches

nsISessionStore
starting in firefox 3.5, this preference is no longer used. ...
...starting in firefox 3.5, this preference is no longer used. ...
...starting in firefox 3.5, this preference is no longer used. ...
...And 17 more matches

<tr>: The Table Row element - HTML: Hypertext Markup Language
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. to provide additional control over how cells fit into (or span across) columns, both <th> and <td> support the colspan attribute, which lets you specify how many columns wide the cell should be, with the default being 1. similarly, you can use the rowspan attribute on cells to indicate they should span more than one table row. this can take a little practice to get right when building your tables. we have some examples below, but for more examples and an in-depth tutorial, see the html tables series in our learn web development area, where you'll learn how to use the table elements and their attributes to get just the right layout and formatti...
...pment area, where you'll learn how to use the table elements and their attributes to get just the right layout and formatting for your tabular data. attributes this element includes the global attributes. there are also several deprecated attributes, which you should avoid but may need to know when reading older code. deprecated attributes the following attributes may still be implemented in browsers but are no longer part of the html specification and may be missing or may not work as expected. they should be avoided. alignobsolete since html5 a domstring which specifies how the cell's context should be aligned horizontally within the cells in the row; this is shorthand for using align on every cell in the row individually. possible values are: left align the content of each cel...
...se the obsolete valign attribute. instead, add the css vertical-align property to the row. examples see <table> for examples on <tr>. basic example this simple example shows a table listing people's names along with various information about membership in a club or service. html this html demonstrates the most basic structure of a table. there are no groups, no cells that span multiple rows or columns, no captions, and only the most basic styling to create lines around the components of the table for something resembling clarity. there are just four rows (including one header row), each with four columns (including one header column). not even the table section elements are used; instead, the browser is allowed to determine this automatically. we'll add <thead>, <tbody>, and <tfoot...
...And 17 more matches

Grids - Archive of obsolete content
« previousnext » xul has a set of elements for creating tabular grids. xul tabular layout xul has a set of elements for doing layout of elements in a grid-like manner using the grid element. it has some similarities to the html table tag. the grid does not display anything itself; it is used only to position elements in a tabular form with rows and columns. a grid contains elements that are aligned in rows just like tables. inside a grid, you declare two things, the columns that are used and the rows that are used. just like html tables, you put content such as labels and buttons inside the rows. however, the grid allows either row or column based organization so you may put content in either rows or in columns. it is most common to use rows, as with a table. however, you ...
...inside that you should add row elements, which are used for each row. ...
...inside that you should add row elements, which are used for each row. inside the row element, you should place the content that you want inside that row. similarly, the columns are declared with the columns element, which should be placed as a child element of the grid. ...
...And 16 more matches

Advanced form styling - Learn web development
hat historically, styling of web form controls was largely taken from the underlying operating system, which is part of the problem with customizing the look of these controls. the appearance property was created as a way to control what os- or system-level styling was applied to web form controls. unfortunately, the behavior of this property's original implementations was very different across browsers, making it not very usable. newer implementations are more consistent in behavior; interestingly enough, both chromium-based browsers (chrome, opera, edge), safari, and firefox all support the -webkit- prefixed version (-webkit-appearance). firefox settled on this because web developers mostly seemed to be using the -webkit- prefixed version, so it was better for compatibility. if you look a...
...type="submit" value="submit"></p> <p><input type="button" value="button"></p> </form> applying the following css to them removes system-level styling. input { -webkit-appearance: none; appearance: none; } note: it is a good idea to always include both declarations — prefixed and unprefixed — when using a prefixed property. prefixed usually means "work in progress", so in the future browser vendors may come to a consensus to drop the prefix. the above code is good for future-proofing against such an eventuality. 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). in most cases, the effect is to remove the stylized border, which ...
... in most cases, the effect is to remove the stylized border, which makes css styling a bit easier, but isn't really essential. in a couple of cases — search and radio buttons/checkboxes, it becomes way more useful. we'll look at those now. taming search boxes <input type="search"> is basically just a text input, so why is appearance: none; useful here? the answer is that in chromium-based browsers on macos, search boxes have some styling restrictions — you can't adjust their height or font-size freely, for example. this is because non-macos chrome browsers no longer use the webkit rendering engine, which enabled aqua appearance by default for certain form controls. with aqua enabled, some form controls are not scalable. this can be fixed using our friend appearance: none;, which dis...
...And 16 more matches

Writing forward-compatible websites - Developer guides
this is especially important for intranets and other non-public websites; if we can't see your code, we can't see that it broke. it's not always possible to follow all of these, but following as many of them as possible will help future-proof your website. ...
... div. this happens even if there is a var ownerdocument declared in global scope. what this means is that any time you access a global variable in an event handler content attribute, including calling any function declared globally, you can end up with a name collision if a specification adds a new dom property to elements or documents which has the same name as your function or variable, and a browser implements it. if that happens, then suddenly your function stops being called. this has happened multiple times to various sites already during the evolution of html5. to avoid this, fully qualify global variable access using "window.", like so: <script> function localname() { alert('function localname has been called'); } </script> <div onclick="window.localname()">clicking me shoul...
...ers of your favorite libraries that they follow these guidelines too. if they don't, you can't rely on that library not breaking in the future. unfortunately, libraries are common transgressors of these guidelines. sniffing sniff for specific features if you plan to use some feature, use object-detection to sniff for that exact feature, if possible. ...
...And 16 more matches

<input type="datetime-local"> - HTML: Hypertext Markup Language
hat let the user easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the control's ui varies in general from browser to browser; at the moment support is patchy, with only chrome/opera and edge on desktop and most modern versions of mobile browsers having usable implementations. in other browsers, these degrade gracefully to simple <input type="text"> controls. the control is intended to simply represent a local date and time, not necessarily the user's local date and time. in other words, an implementation ...
...text"> controls. the control is intended to simply represent a local date and time, not necessarily the user's local date and time. in other words, an implementation should allow any valid combination of year, month, day, hour, and minute - even if such a combination is invalid in the user's local time zone (such as times within a daylight saving time spring-forward transition gap). some mobile browsers (particularly on ios) do not currently implement this correctly. because of the limited browser support for datetime-local, and the variations in how the inputs work, it may currently still be best to use a framework or library to present these, or to use a custom input of your own. another option is to use separate date and time inputs, each of which is more widely supported than datetime-lo...
...larly on ios) do not currently implement this correctly. because of the limited browser support for datetime-local, and the variations in how the inputs work, it may currently still be best to use a framework or library to present these, or to use a custom input of your own. another option is to use separate date and time inputs, each of which is more widely supported than datetime-local. some browsers may resort to a text-only input element that validates that the results are legitimate date/time values before letting them be delivered to the server, as well, but you shouldn't rely on this behavior since you can't easily predict it. for those of you not using a supporting browser, the chrome/opera datetime-local control looks like the below screenshot. clicking the down arrow on the right ...
...And 16 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
in this article we will discuss the main essential components of responsive design, with some links to further information where necessary. for web developers, it is now fairly common to be called upon to create a web site or app that changes its user interface depending on the browser or device accessing the site to provide an optimized experience. one approach to this is to create different versions of your site/app for different platforms or browsers and serve them appropriately after detecting which browser or platform is looking at your site. but this is increasingly inefficient: browser sniffing is inherently error prone, and maintaining multiple copies of your code can turn out to be a nightmare. it is usually much better to create a single version of your code which doesn't...
...this tends to be termed responsive design or adaptive design, two related but different approaches. ...
...platform is looking at your site. but this is increasingly inefficient: browser sniffing is inherently error prone, and maintaining multiple copies of your code can turn out to be a nightmare. it is usually much better to create a single version of your code which doesn't care about what browser or platform is accessing the site, but instead uses feature tests to find out what code features the browser supports or what the values of certain browser features are, and then adjusts the code appropriately. this tends to be termed responsive design or adaptive design, two related but different approaches. this is much more reliable, more maintainable, and more future proof. ...
...And 16 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
refox developers conference summer 2007. shimoda-san is a co-author of firefox 3 hacks (o'reilly japan, 2008). before you learn how to develop extensions, let's learn about xul, the xml-based user-interface language, which is one of the building blocks for extensions. introduction an overview of xul xul is an xml-based language, and was developed to be the gui markup language for the mozilla browser. there are earlier experiments going back a long way in developing user interfaces using a combination of html and scripting languages, and xul could be considered an evolutionary step from that. similar approaches are found in xaml, which is used in windows vista, and flex, which is used in adobe flash. like web pages, which display the same regardless of platform, applications marked up in xu...
...ll illustrate it with a source code example. you can type these examples up and open them in firefox to see how they behave and appear. you can download a file with all the source code examples from: fixme: attache the translated tarball - paul task !. ...
...pear. you can download a file with all the source code examples from: fixme: attache the translated tarball - paul task !. xul display methods xul is used almost exclusively in mozilla applications like firefox and thunderbird, and extensions for them, but other web browsers based on firefox or the gecko engine, and even web-based content also used xul. for example, there is the mozilla amazon browser, which helps with shopping at amazon, and the presentation method in xul, a tool for writing and displaying presentations to try out the code samples in this chapter, save them as text files with .xul extensions and drag and drop them into the firefox browser window. fixme: explain how setting this option and use next listings if we want to run firefox displaying none of its gui and only the...
...And 15 more matches

Manifest Files - Archive of obsolete content
ient permissions to write into it. note: starting in gecko 2.0, only the file named chrome.manifest is read automatically; if you need to read multiple manifest files, use the manifest command in that file to import additional manifests. use manifest flags to configure the scenarios in which the secondary manifest is imported. if you just want to try testing privileged xul code in the firefox browser, you can do this easily by just using a manifest with only one line in it: create a new directory somewhere. for example, on a windows machine, you might use c:\testfiles create a new ascii1 file called test.manifest in the chrome directory. it doesn't actually matter what the file is called as long as it has the .manifest extension. ( 1. doesn't work with utf-8 with bom.) add the followin...
...cii1 file called test.manifest in the chrome directory. it doesn't actually matter what the file is called as long as it has the .manifest extension. ( 1. doesn't work with utf-8 with bom.) add the following line to it: content tests file:///c:/testfiles/ the file path in that line should point to the directory created above. if you aren't sure what the file path is, open that directory in a browser and copy the url from the address field. that's it! now, all you need to do is add some xul files into that new directory, and you will be able to load them by typing in a chrome url of the form chrome://tests/content/<filename>. of course, you will need to restart the browser for the changes to take effect. if the file doesn't load, make sure that the file path is correct. the basic syntax of ...
...ic syntax of the lines in the manifest file for content packages is: 'content <packagename> <filepath>' the first field 'content' indicates a content package. for themes, 'skin' is used while 'locale' is used for locales. the packagename in the example above is 'tests', which means that the first field in the chrome url is 'tests' as in chrome://tests/content/sample.xul. ...
...And 15 more matches

Client-side storage - Learn web development
this lets you persist data for long-term storage, save sites or documents for offline use, retain user-specific settings for your site, and more. this article explains the very basics of how these work. prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how to use client-side storage apis to store application data. ...
...age? elsewhere in the mdn learning area we talked about the difference between static sites and dynamic sites. most major modern web sites are dynamic — they store data on the server using some kind of database (server-side storage), then run server-side code to retrieve needed data, insert it into static page templates, and serve the resulting html to the client to be displayed by the user's browser. client-side storage works on similar principles, but has different uses. it consists of javascript apis that allow you to store data on the client (i.e. on the user's machine) and then retrieve it when needed. this has many distinct uses, such as: personalizing site preferences (e.g. showing a user's choice of custom widgets, color scheme, or font size). persisting previous site activity ...
...pplication), store them inside a client-side database, and play them as needed. the user would only have to download the music files once — on subsequent visits they would be retrieved from the database instead. note: there are limits to the amount of data you can store using client-side storage apis (possibly both per individual api and cumulatively); the exact limit varies depending on the browser and possibly based on user settings. see browser storage limits and eviction criteria for more information. old school: cookies the concept of client-side storage has been around for a long time. since the early days of the web, sites have used cookies to store information to personalize user experience on websites. they're the earliest form of client-side storage commonly used on the web. ...
...And 15 more matches

What is JavaScript? - Learn web development
ogramming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and then put them together to make a bookshelf. they generally fall into two categories. browser apis are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. for example: the dom (document object model) api allows you to manipulate html and css, creating, removing and changing html, dynamically applying new styles to your page, etc. every time you see a popup window appear on a page, or some new content display...
...hnologies —see chrome experiments and webglsamples. audio and video apis like htmlmediaelement and webrtc allow you to do really interesting things with multimedia, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else's computer (try our simple snapshot demo to get the idea). ...
...video apis like htmlmediaelement and webrtc allow you to do really interesting things with multimedia, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else's computer (try our simple snapshot demo to get the idea). note: many of the above demos won't work in an older browser — when experimenting, it's a good idea to use a modern browser like firefox, chrome, edge or opera to run your code in. you will need to consider cross browser testing in more detail when you get closer to delivering production code (i.e. real code that real customers will use). third party apis are not built into the browser by default, and you generally have to grab their code and information from somewhere on the web. for example: the twitter api a...
...And 15 more matches

Handling common accessibility problems - Learn web development
objective: to be able to diagnose common accessibility problems, and use appropriate tools and techniques to fix them. ...
... objective: to be able to diagnose common accessibility problems, and use appropriate tools and techniques to fix them. ...
.../subtitles or other text alternatives for audio/video content. however, it is wrong to say that accessibility is just about disabilities. really, the aim of accessibility is to make your websites/apps usable by as many people in as many contexts as possible, not just those users using high-powered desktop computers. some examples might include: users on mobile devices. users on alternative browsing devices such as tvs, watches, etc. users of older devices that might not have the latest browsers. users of lower spec devices that might have slow processors. in a way, this whole module is about accessibility — cross browser testing makes sure that your sites can be used by as many people as possible. what is accessibility? defines accessibility more completely and thoroughly than this...
...And 15 more matches

Application Translation with Mercurial
rora. next check what is still untranslated by going to localization status page and click on the page for your language. in the section "applications & sign-offs", you will find different products and branches which are currently in translation. gaia-* denotes branches of firefox os, the operating system for mobile devices. firefox and fx-* denote branches of firefox for desktop, the browser for desktops and notebooks running, windows, mac os or linux. fennec and fennec-* denote branches of firefox for mobile, the firefox browser for the android operating system. thunderbird and tb-* denote branches of thunderbird, the mail client, newsgroup and feed reader and chat client. the localization of the lightning calendar add-on also takes place on these branches. seamonkey and ...
... lightning and cal-* denote branches of lightning, the calendar add-on for thunderbird. the localization of lightning now happens on thunderbird's tb-* branches, the cal-* branches have been retired. ...
...ing part follows below as list of missing texts. the first line shows the locale for which the texts are being translated (in this example: de - german). with the second line start the file paths of the files which require changes. the file paths follow the directory structure of the locale repository downloaded for translation. ...
...And 15 more matches

Index - Firefox Developer Tools
add-ons web development, web development:tools developer tools that are not built into firefox, but ship as separate add-ons. 6 dom inspector dom, dom:tools, dom_inspector, extensions, extensions:tools, themes, themes:tools, tools, web development, web development:tools, xul, xul:tools the dom inspector (also known as domi) is a developer tool used to inspect, browse, and edit the document object model of documents - usually web pages or xul windows. the dom hierarchy can be navigated using a two-paned window that allows a variety of different views on the document and all nodes within. 7 dom inspector faq dom_inspector the file menu contains approaches which will allow you to inspect a document. 8 dom inspector internals ...
...ice workers application, devtools, firefox, guide, service workers in this article we will look at debugging service workers using the firefox devtools application panel. 13 inspecting web app manifests application, devtools, firefox, guide, manifest in this article we will look at inspecting app manifests using the firefox devtools application panel. ...
...ication, devtools, firefox, guide, service workers in this article we will look at debugging service workers using the firefox devtools application panel. 13 inspecting web app manifests application, devtools, firefox, guide, manifest in this article we will look at inspecting app manifests using the firefox devtools application panel. ...
...And 15 more matches

Using IndexedDB - Web APIs
because it lets you create web applications with rich query abilities regardless of network availability, your applications can work both online and offline. about this document this tutorial walks you through using the asynchronous api of indexeddb. if you are not familiar with indexeddb, you should first read basic concepts about indexeddb. for the reference documentation on the indexeddb api, see the indexeddb article and its subpages. this article documents the types of objects used by indexeddb, as well as the methods of the asynchronous api (the synchronous api was removed from spec). ...
...on, like adding or retrieving data. wait for the operation to complete by listening to the right kind of dom event. do something with the results (which can be found on the request object). with these big concepts under our belts, we can get to more concrete stuff. creating and structuring the store using an experimental version of indexeddb in case you want to test your code in browsers that still use a prefix, you can use the following code: // in the following line, you should include the prefixes of implementations you want to test. window.indexeddb = window.indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function. // moreover, you may need references to some window.idb* objects: win...
....webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function. // moreover, you may need references to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction || {read_write: "readwrite"}; // this line should only be needed if it is needed to support the object's constants for older browsers window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need window.mozidb*) beware that implementations that use a prefix may be buggy, or incomplete, or following an old version of the specification. therefore, it is not recommended to use it in production code. it may be preferable to not support...
...And 15 more matches

Key Values - Web APIs
ilable. learn how to use these key values in javascript using keyboardevent.key special values | modifier keys | whitespace keys | navigation keys | editing keys | ui keys | device keys | ime and composition keys | function keys | phone keys | multimedia keys | audio control keys | tv control keys | media controller keys | speech recognition keys | document keys | application selector keys | browser control keys | numeric keypad keys special values values of key which have special meanings other than identifying a specific key or character. keyboardevent.key value description virtual keycode windows mac linux android "unidentified" the user agent wasn't able to map the event's virtual keycode to a specific key value. this can ha...
...mand or ⌘ key on mac keyboards. vk_lwin (0x5b) vk_rwin (0x5c) kvk_command (0x37) kvk_rightcommand (0x36) gdk_key_meta_l (0xffe7) gdk_key_meta_r (0xffe8) qt::key_meta (0x01000022) keycode_meta_left (117) keycode_meta_right (118) "numlock" the numlock (number lock) key. toggles the numeric keypad between number entry some other mode (often directional arrows). vk_numlock (0x90) gdk_key_num_lock (0xff7f) qt::key_numlock (0x01000025) keycode_num_lock (143) "scrolllock" [2] the scroll lock key. toggles between scrolling and cursor movement modes. vk_scroll (0x91) gdk_key_scroll_lock (0xff14) qt::key_scrolllock (0x01000026) keycode_scroll_lock (116) "shift" the shift key. modifies keystrokes to al...
... tab key, tab. vk_tab (0x09) kvk_tab (0x30) gdk_key_tab (0xff09) gdk_key_kp_tab (0xff89) gdk_key_iso_left_tab (0xfe20) qt::key_tab (0x01000001) keycode_tab (61) " " [1] the space key, space bar. vk_space (0x20) kvk_space (0x31) gdk_key_space (0x20) gdk_key_kp_space (0xff80) qt::key_space (0x20) keycode_space (62) [1] older browsers may return "spacebar" instead of " " for the space bar key. firefox did so until version 37, as did internet explorer 9, 10, and 11. navigation keys keyboardevent.key value description virtual keycode windows mac linux android "arrowdown" [1] the down arrow key. vk_down (0x28) kvk_downarrow (0x7d) gdk_key_down (0xff54) gdk_key_kp_...
...And 15 more matches

MediaDevices.getUserMedia() - Web APIs
syntax var promise = navigator.mediadevices.getusermedia(constraints); parameters constraints a mediastreamconstraints object specifying the types of media to request, along with any requirements for each type. the constraints parameter is a mediastreamconstraints object with two members: video and audio, describing the media types requested. either or both must be specified. if the browser cannot find all media tracks with the specified types that meet the constraints given, then the returned promise is rejected with notfounderror. the following requests both audio and video without any specific requirements: { audio: true, video: true } if true is specified for a media type, the resulting stream is required to have that type of track in it. if one cannot be included for an...
...the call to getusermedia() will result in an error. while information about a user's cameras and microphones are inaccessible for privacy reasons, an application can request the camera and microphone capabilities it needs and wants, using additional constraints. the following expresses a preference for 1280x720 camera resolution: { audio: true, video: { width: 1280, height: 720 } } the browser will try to honour this, but may return other resolutions if an exact match is not available, or the user overrides it. to require a capability, use the keywords min, max, or exact (a.k.a. min == max). the following demands a minimum resolution of 1280x720: { audio: true, video: { width: { min: 1280 }, height: { min: 720 } } } if no camera exists with this resolution or high...
...prompted. the reason for the difference in behaviour is that the keywords min, max, and exact are inherently mandatory. whereas plain values and a keyword called ideal are not. here's a full example: { audio: true, video: { width: { min: 1024, ideal: 1280, max: 1920 }, height: { min: 576, ideal: 720, max: 1080 } } } an ideal value, when used, has gravity, which means that the browser will try to find the setting (and camera, if you have more than one), with the smallest fitness distance from the ideal values given. plain values are inherently ideal, which means that the first of our resolution examples above could have been written like this: { audio: true, video: { width: { ideal: 1280 }, height: { ideal: 720 } } } not all constraints are numbers. for e...
...And 15 more matches

Window - Web APIs
ript code. the window interface is home to a variety of functions, namespaces, objects, and constructors which are not necessarily directly associated with the concept of a user interface window. however, the window interface is a suitable place to include these items that need to be globally available. many of these are documented in the javascript reference and the dom reference. in a tabbed browser, each tab is represented by its own window object; the global window seen by javascript code running within a given tab always represents the tab in which the code is running. that said, even in a tabbed browser, some properties and methods still apply to the overall window that contains the tab, such as resizeto() and innerheight. generally, anything that can't reasonably pertain to a tab pert...
... the windoworworkerglobalscope and windoweventhandlers mixins. note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below. window.closed read only this property indicates whether the current window is closed or not. window.console read only returns a reference to the console object which provides access to the browser's debugging console. window.controllers read only returns the xul controller objects for the current chrome window. window.customelements read only returns a reference to the customelementregistry object, which can be used to register new custom elements and get information about previously registered custom elements. window.crypto read only returns the browser crypto object. window...
... which the window is embedded, or null if the window is not embedded. window.frames read only returns an array of the subframes in the current window. window.fullscreen this property indicates whether the window is displayed in full screen or not. window.history read only returns a reference to the history object. window.innerheight read only gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar. window.innerwidth read only gets the width of the content area of the browser window including, if rendered, the vertical scrollbar. window.issecurecontext read only indicates whether a context is capable of using features that require secure contexts. window.length read only returns the number of frames in the window. see also...
...And 15 more matches

<input type="date"> - HTML: Hypertext Markup Language
ng value includes the year, month, and day, but not the time. the time and datetime-local input types support time and date+time input. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...cludes the year, month, and day, but not the time. the time and datetime-local input types support time and date+time input. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ar, month, and day, but not the time. the time and datetime-local input types support time and date+time input. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 15 more matches

<video>: The Video Embed element - HTML: Hypertext Markup Language
ithub.com/mdn/interactive-examples and send us a pull request. 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. attributes like all other html elements, this element supports the global attributes. autoplay a boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loa...
... useful when creating media elements whose source will be set at a later time, under user control. see our autoplay guide for additional information about how to properly use autoplay. to disable video autoplay, autoplay="false" will not work; the video will autoplay if the attribute is there in the <video> tag at all. to remove autoplay, the attribute needs to be removed altogether. in some browsers (e.g. chrome 70.0) autoplay doesn't work if no muted attribute is present. autopictureinpicture a boolean attribute which if true indicates that the element should automatically toggle picture-in-picture mode when the user switches back and forth between this document and another document or application. buffered an attribute you can read to determine the time ranges of the buffered me...
...icture a boolean attribute which if true indicates that the element should automatically toggle picture-in-picture mode when the user switches back and forth between this document and another document or application. buffered an attribute you can read to determine the time ranges of the buffered media. this attribute contains a timeranges object. controls if this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback. controlslist the controlslist attribute, when specified, helps the browser select what controls to show on the media element whenever the browser shows its own set of controls (e.g. when the controls attribute is specified). the allowed values are nodownload, nofullscree...
...And 15 more matches

Cross-Origin Resource Sharing (CORS) - HTTP
for example, xmlhttprequest and the fetch api follow the same-origin policy. ...
...to selected resources from a different origin. a web application executes a cross-origin http request when it requests a resource that has a different origin (domain, protocol, or port) from its own. an example of a cross-origin request: the front-end javascript code served from https://domain-a.com uses xmlhttprequest to make a request for https://domain-b.com/data.json. for security reasons, browsers restrict cross-origin http requests initiated from scripts. for example, xmlhttprequest and the fetch api follow the same-origin policy. this means that a web application using those apis can only request resources from the same origin the application was loaded from unless the response from other origins includes the right cors headers. the cors mechanism supports secure cross-origin reque...
...equests initiated from scripts. for example, xmlhttprequest and the fetch api follow the same-origin policy. this means that a web application using those apis can only request resources from the same origin the application was loaded from unless the response from other origins includes the right cors headers. the cors mechanism supports secure cross-origin requests and data transfers between browsers and servers. modern browsers use cors in apis such as xmlhttprequest or fetch to mitigate the risks of cross-origin http requests. who should read this article? everyone, really. more specifically, this article is for web administrators, server developers, and front-end developers. modern browsers handle the client side of cross-origin sharing, including headers and policy enforcement. but ...
...And 15 more matches

Strict mode - JavaScript
sometimes you'll see the default, non-strict mode referred to as "sloppy mode". this isn't an official term, but be aware of it, just in case. javascript's strict mode, introduced in ecmascript 5, is a way to opt in to a restricted variant of javascript, thereby implicitly opting-out of "sloppy mode". strict mode isn't just a subset: it intentionally has different semantics from normal code. browsers not supporting strict mode will run strict mode code with different behavior from browsers that do, so don't rely on strict mode without feature-testing for support for the relevant aspects of strict mode. strict mode code and non-strict mode code can coexist, so scripts can opt into strict mode incrementally. strict mode makes several changes to normal javascript semantics: eliminates some ...
...g a variable in an assignment creates a new property on the global object and continues to "work" (although future failure is possible: likely, in modern javascript). assignments, which would accidentally create global variables, instead throw an error in strict mode: 'use strict'; // assuming no global variable mistypedvariable exists mistypevariable = 17; // this line throws a referenceerror due to the // misspelling of variable second, strict mode makes assignments which would otherwise silently fail to throw an exception. for example, nan is a non-writable global variable. in normal code assigning to nan does nothing; the developer receives no failure feedback. in strict mode assigning to nan throws an exception. any assignment that silentl...
...; the developer receives no failure feedback. in strict mode assigning to nan throws an exception. ...
...And 15 more matches

HTML to DOM - Archive of obsolete content
the code snippets on this page will let your site work until these new features are more widely available. safely parsing simple html to dom when using xmlhttprequest to get the html of a remote webpage, it is often advantageous to turn that html string into dom for easier manipulation. however, there are potential dangers involved in injecting remote content in a privileged context in your extension, so it can be desirable to parse the html safely. ...
...l be something as simple as the following: doc.body.textcontent = "this is inside the body!"; using a hidden iframe element to parse html to a window's dom sample code may need more work. create your own function using unique name, id, and so forth. ...
... // skip blank page or frame if (doc.location.href == "about:blank" || doc.defaultview.frameelement) return; // do something with the dom of doc alert(doc.location.href); // when done remove frame or set location "about:blank" settimeout(function (){ var frame = document.getelementbyid("sample-frame"); // remove frame // frame.destroy(); // if using browser element instead of iframe frame.parentnode.removechild(frame); // or set location "about:blank" // frame.contentdocument.location.href = "about:blank"; },10); }, true); } // load a page frame.contentdocument.location.href = "http://www.mozilla.org/"; // or // frame.webnavigation.loaduri("http://www.mozilla.org/",components.interfaces.nsiwebnavigation,null,null,null...
...And 14 more matches

Mozilla Application Framework in Detail - Archive of obsolete content
r ui (elements that may change after you have completed the application, such as a "history" menu item). xslt could be used to translate information from web services, rss, soap, or other xml-based languages and convert them into a form that you might display in your user interface. the gecko rendering engine gecko is the revolutionary rendering engine that offers advanced features for internet browsing anywhere across applications, computing platforms and devices. this innovation in browser technology offers small size, speed and industry leading standards support. gecko is the premier cross-platform, full-featured, mature and well-tested layout engine available, providing robust and high quality support for a massive array of standards. its ability to render web content correctly is excepti...
...igh quality support for a massive array of standards. its ability to render web content correctly is exceptional. gecko consists roughly of an html parser and xml parser, a dom implementation, a css parser and style system, and the code for css-based and html-based layout and rendering. as personal connectivity expands from the desktop computer to new web-enabled products and devices, gecko is a browser engine that has been designed from the ground up to power a new generation of desktop browsers and browsing devices and to accelerate the growth and development of the next-generation internet. small, fast and standards compliant, gecko is easily embeddable across platforms in browsers, desktop applications and browsing devices and delivers full-functionality browsing to them all. innovative ge...
... power a new generation of desktop browsers and browsing devices and to accelerate the growth and development of the next-generation internet. small, fast and standards compliant, gecko is easily embeddable across platforms in browsers, desktop applications and browsing devices and delivers full-functionality browsing to them all. innovative gecko technologies it supports make the development of browsers, applications and devices faster and easier than ever before. gecko is the first browser engine ever to deliver the full web standards support that developers have been calling for. this robust standards support for the first time makes it possible to implement powerful web applications with rich user interfaces without using proprietary or platform dependent code. because gecko has a cross-pl...
...And 14 more matches

Trees - Archive of obsolete content
« previousnext » xul provides a way to create tabular or hierarchical lists using a tree. the tree one of the more complex elements in xul is the tree. a tree may be used to display rows of text in columns. it can be used with rows either in a flat list or arranged into a hierarchy. a tree also allows the user to rearrange, resize and hide individual columns. some examples of trees include the list of messages in a mail application, or the bookmarks window in mozilla. in some ways, a tree has some similarities with the listbox. both can be used to create tables of data with multiple rows and columns, and both may contain column headers. the tree also supports nested rows, whereas the listbox does not. however, listboxes may contain any type of content, whereas trees may on...
.... each column will appear as a header at the top of the tree. the second part, the tree body, contains the data to appear in the tree and is created with a treechildren tag. the tree is unique in that the body of the tree consists only of a single widget which draws all of the data in the tree. this contrasts with the listbox, where individual listitem and listcell tags are used to specify the rows in the listbox. in a tree, all of the data to be displayed is supplied by a separate object, called a tree view. when it comes time to display a cell, the tree widget will call out to this tree view to determine what to display, which in turn will be drawn by the tree. the tree is smart enough to only ask for information from the view for those rows that need to be displayed. this allows the view...
...s time to display a cell, the tree widget will call out to this tree view to determine what to display, which in turn will be drawn by the tree. the tree is smart enough to only ask for information from the view for those rows that need to be displayed. this allows the view to be optimized such that it only needs to load the data for displayed content. for instance, a tree might have thousands of rows, yet most of them will be scrolled off the border of the tree, hidden from view. this means that the tree is scalable to any number of rows without any performance problems. of course, this is independant of the performance of the view object itself. a tree view is an object which implements the nsitreeview interface. this interface contains thirty properties and functions which you may implemen...
...And 14 more matches

Legacy layout methods - Learn web development
how these older methods work, in order that you understand how they were used if you work on an older project. prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css and styling boxes.) objective: to understand the fundamental concepts behind the grid layout systems used prior to css grid layout being available in browsers. layout and grid systems before css grid layout it may seem surprising to anyone coming from a design background that css didn’t have an inbuilt grid system until very recently, and instead we seemed to be using a variety of sub-optimal methods to create grid-like designs. we now refer to these as "legacy" methods. for new projects, in most cases css grid layout will be used in comb...
...using these legacy methods from time to time. it is worth understanding how they work, and why they are different to css grid layout. this lesson will explain how grid systems and grid frameworks based on floats and flexbox work. having studied grid layout you will probably be surprised how complicated this all seems! this knowledge will be helpful to you if you need to create fallback code for browsers that do not support newer methods, in addition to allowing you to work on existing projects which use these types of systems. it is worth bearing in mind, as we explore these systems, that none of them actually create a grid in the way that css grid layout creates a grid. they work by giving items a size, and pushing them around to line them up in a way that looks like a grid. a two column l...
...div:nth-of-type(1) { width: 48%; float: left; } div:nth-of-type(2) { width: 48%; float: right; } you'll notice here that we are using percentages for all the widths — this is quite a good strategy, as it creates a liquid layout, one that adjusts to different screen sizes and keeps the same proportions for the column widths at smaller screen sizes. try adjusting the width of your browser window to see for yourself. this is a valuable tool for responsive web design. note: you can see this example running at 0_two-column-layout.html (see also the source code). creating simple legacy grid frameworks the majority of legacy frameworks use the behavior of the float property to float one column up next to another in order to create something that looks like a grid. working throug...
...And 14 more matches

Client-side form validation - Learn web development
xx" (a specific data format is required for it to be considered valid). "please enter a valid email address" (the data you entered is not in the right format). "your password needs to be between 8 and 30 characters long and contain one uppercase letter, one symbol, and a number." (a very specific data format is required for your data). this is called form validation. when you enter data, the browser and/or the web server will check to see that the data is in the correct format and within the constraints set by the application. validation done in the browser is called client-side validation, while validation done on the server is called server-side validation. in this chapter we are focusing on client-side validation. if the information is correctly formatted, the application allows the da...
... the entered data needs to follow. if the data entered in a form field follows all of the rules specified by the above attributes, it is considered valid. if not, it is considered invalid. when an element is valid, the following things are true: the element matches the :valid css pseudo-class, which lets you apply a specific style to valid elements. if the user tries to send the data, the browser will submit the form, provided there is nothing else stopping it from doing so (e.g., javascript). when an element is invalid, the following things are true: the element matches the :invalid css pseudo-class, and sometimes other ui pseudo-classes (e.g., :out-of-range) depending on the error, which lets you apply a specific style to invalid elements. if the user tries to send the data, the...
... will submit the form, provided there is nothing else stopping it from doing so (e.g., javascript). when an element is invalid, the following things are true: the element matches the :invalid css pseudo-class, and sometimes other ui pseudo-classes (e.g., :out-of-range) depending on the error, which lets you apply a specific style to invalid elements. if the user tries to send the data, the browser will block the form and display an error message. note: there are several errors that will prevent the form from being submitted, including a badinput, patternmismatch, rangeoverflow or rangeunderflow, stepmismatch, toolong or tooshort, typemismatch, valuemissing, or a customerror. built-in form validation examples in this section, we'll test out some of the attributes that we discussed a...
...And 14 more matches

Other form controls - Learn web development
tion in the previous article), and progress bars. prerequisites: basic computer literacy, and a basic understanding of html. objective: to understand the non-<input> form features, and how to implement them using html. multi-line text fields a multi-line text field is specified using a <textarea> element, rather than using the <input> element. <textarea cols="30" rows="8"></textarea> this renders like so: the main difference between a <textarea> and a regular single line text field is that users are allowed to include hard line breaks (i.e. pressing return) that will be included when the data is submitted. <textarea> also takes a closing tag, and any default text you want it to contain should be put between the opening and closing tags. in contrast, the <...
...hat even though you can put anything inside a <textarea> element (including other html elements, css, and javascript), because of its nature, it is all rendered as if it was plain text content. (using contenteditable on non-form controls provides an api for capturing html/"rich" content instead of plain text). visually, the text entered wraps and the form control is by default resizable. modern browsers provide a drag handle that you can drag to increase/decrease the size of the text area. 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. note: you can find a slightly more interesting example of text area usage in the example we put together in the first a...
...e code also). controlling multi-line rendering <textarea> accepts three attributes to control its rendering across several lines: cols specifies the visible width (columns) of the text control, measured in average character widths. this is effectively the starting width, as it can be changed by resizing the <textarea>, and overriden using css. the default value if none is specified is 20. ...
...And 14 more matches

Introduction to events - Learn web development
events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. for example, if the user selects a button on a webpage, you might want to respond to that action by displaying an information box. in this article, we discuss some important concepts surrounding events, and look at how they work in browsers. this won't be an exhaustive study; just what you need to know at this stage. prerequisites: basic computer literacy, a basic understanding of html and css, javascript first steps. objective: to understand the fundamental theory of events, how they work in browsers, and how events may differ in different programming environments. a series of fortunate events as...
...ystem produces (or "fires") a signal of some kind when an event occurs, and provides a mechanism by which an action can be automatically taken (that is, some code running) when the event occurs. for example, in an airport, when the runway is clear for take off, a signal is communicated to the pilot. as a result, the plane can safely takeoff. in the case of the web, events are fired inside the browser window, and tend to be attached to a specific item that resides in it — this might be a single element, set of elements, the html document loaded in the current tab, or the entire browser window. there are many different types of events that can occur. for example: the user selects a certain element or hovers the cursor over a certain element. the user chooses a key on the keyboard. the ...
... a web page finishes loading. a form is submitted. a video is played, paused, or finishes. an error occurs. ...
...And 14 more matches

CSUN Firefox Materials
websites such as online magazines with sophisticated audiences are now reporting upwards of 25% firefox usage. ...
...websites such as online magazines with sophisticated audiences are now reporting upwards of 25% firefox usage. ...
...websites such as online magazines with sophisticated audiences are now reporting upwards of 25% firefox usage. ...
...And 14 more matches

Embedding Tips
g files, displaying prompt or password dialog boxes and so on. embedders may wish to override some of the default service implementations with their own. for example, the default prompt service uses xul to render prompt dialogs and embedders may wish to render them in a way more appropriate for their application and platform.. how do i load a page? get thensiwebnavigation interface on your webbrowser and call the loaduri method with the appropriate uri and flags. this interface also has methods for reloading, stopping a load and going back and forward in the history. how do i block a load? implement the nsiwebprogresslistener interface and register it with the appropriate web browser object via the nsiwebbrowser::addwebbrowserlistener() method. use the callbacks for after-the-fact cancell...
...watch for changes in nsiuricontentlistener::onstarturiopen(). you can abort the uri load at this point if you don't want it to proceed. ...
...watch for changes in nsiuricontentlistener::onstarturiopen(). you can abort the uri load at this point if you don't want it to proceed. ...
...And 14 more matches

nsIContentPrefService2
our use case. domain parameters many methods of this interface accept a "domain" parameter. domains may be specified either exactly, like "example.com", or as full urls, like "http://example.com/foo/bar". in the latter case the api extracts the full domain from the url, so if you specify "http://foo.bar.example.com/baz", the domain is taken to be "foo.bar.example.com", not "example.com". private-browsing context parameters many methods also accept a "context" parameter. this parameter relates to private browsing and determines the kind of storage that a method uses, either the usual permanent storage or temporary storage set() aside for private browsing sessions. pass null to unconditionally use permanent storage. pass an nsiloadcontext to use storage appropriate to the context's useprivatebro...
...a context can be obtained from the window or channel whose content pertains to the preferences being modified or retrieved. callbacks the methods of callback objects are always called asynchronously. ...
...a context can be obtained from the window or channel whose content pertains to the preferences being modified or retrieved. callbacks the methods of callback objects are always called asynchronously. see nsicontentprefcallback2 for more information about callbacks. ...
...And 14 more matches

Basic Concepts of grid layout - CSS: Cascading Style Sheets
used to lay out major page areas or small user interface elements. this article introduces the css grid layout and the new terminology that is part of the css grid layout level 1 specification. the features shown in this overview will then be explained in greater detail in the rest of this guide. what is a grid? a grid is a set of intersecting horizontal and vertical lines defining columns and rows. elements can be placed onto the grid within these column and row lines. css grid layout has the following features: fixed and flexible track sizes you can create a grid with fixed track sizes – using pixels for example. this sets the grid to the specified pixel which fits to the layout you desire. you can also create a grid using flexible sizes with percentages or with the new fr unit design...
...ment you can place items into a precise location on the grid using line numbers, names or by targeting an area of the grid. grid also contains an algorithm to control the placement of items not given an explicit position on the grid. creation of additional tracks to hold content you can define an explicit grid with grid layout. the grid layout specification is flexible enough to add additional rows and columns when needed. features such as adding “as many columns that will fit into a container” are included. alignment control grid contains alignment features so we can control how the items align once placed into a grid area, and how the entire grid is aligned. control of overlapping content more than one item can be placed into a grid cell or area and, they can partially overlap ea...
...iv> </div> i make the .wrapper a grid container. .wrapper { display: grid; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } all the direct children are now grid items. in a web browser, you won’t see any difference to how these items are displayed before turning them into a grid, as grid has created a single column grid for the items. at this point, you may find it useful to work with the grid inspector, available as part of firefox's developer tools. if you view this example in firefox and inspect the grid, you will see a small icon next to the value grid. click this and t...
...And 14 more matches

Index - HTTP
ing white space before the value is ignored. 2 accept http, http header, reference, request header the accept request http header advertises which content types, expressed as mime types, the client is able to understand. using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice with the content-type response header. browsers set adequate values for this header depending on the context where the request is done: when fetching a css stylesheet a different value is set for the request than when fetching an image, video or a script. 3 accept-charset content negotiation, http, http header, reference, request header the accept-charset request http header advertises which character set the client is ...
...ng an image, video or a script. 3 accept-charset content negotiation, http, http header, reference, request header the accept-charset request http header advertises which character set the client is able to understand. using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice within the content-type response header. browsers usually don't set this header as the default value for each content type is usually correct and transmitting it would allow easier fingerprinting. 4 accept-encoding content negotiation, http, http header, reference, request header the accept-encoding request http header advertises which content encoding, usually a compression algorithm, the client is able to understand. us...
... the accept-language request http header advertises which languages the client is able to understand, and which locale variant is preferred. (by languages, we mean natural languages, such as english, and not programming languages.) using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice with the content-language response header. browsers set adequate values for this header according to their user interface language and even if a user can change it, this happens rarely (and is frowned upon as it leads to fingerprinting). 6 accept-ranges http, http header, range requests, reference, response header the accept-ranges response http header is a marker used by the server to advertise its support of partial reque...
...And 14 more matches

Building a Theme - Archive of obsolete content
ing up the development environment themes and extensions are packaged and distributed in zip files or bundles, with the xpi (pronounced “zippy”) file extension. an example of the content within a typical xpi file for a theme: example.xpi: /install.rdf /chrome.manifest /preview.png /icon.png /chrome/ browser/ communicator/ global/ mozapps/ we'll want to create a file structure similar to the one above for our tutorial, so let's begin by creating a folder for your theme somewhere on your hard disk (e.g. c:\themes\my_theme\ or ~/themes/my_theme/). inside your new theme folder, create two new empty text files, one called chrome.manifest...
...ader and others. the files we will be needing are located under the chrome\toolkit\skin\classic folder. create a folder called chrome in your theme's folder. next, the contents of the following directories to their respective folders into the folder. ...
...nder the chrome\toolkit\skin\classic folder. create a folder called chrome in your theme's folder. next, the contents of the following directories to their respective folders into the folder. global to chrome/global mozapps to chrome/mozapps now that you've copied the global and mozapps folders, a handful of other folders from the browser/omni.ja archive are required. it is located in the browser folder in the location mentioned above. ...
...And 13 more matches

The Business Benefits of Web Standards - Archive of obsolete content
caught between a rock and a hard place, web designers face a formidable challenge. yet they are finding an unsuspected ally in the battle: web standards. this article discusses how adhering to web standards, and leaving behind proprietary markup and technologies, can contribute to a company's business goals. ...
...o render titles instead of graphics also helps in this regard. there are very significant differences in how search engines operate. instead of worrying about each engine and attempting to artificially manipulate the results, web standards pages index and rank properly (where they deserve to) across all search engines. ...
...o have for browser differences, they also reduce the differences between the way search engines rank pages. there should be little need to plunge into the increasing costs and uncertain quality and integrity of proprietary pay per click campaigns. increase website traffic maintain contact with your user on multiple platforms standards-based code and cross-platform go hand in hand. while some browsers have quirks that cause different behavior by platform, mozilla-based browsers are designed to behave identically on all supported platforms (mac, linux, unix, windows...) web content is increasingly being accessed by a growing number of user agents other than browsers, or by browsers on different platforms - for example mobile telephones. feed content such as rss and atom simply will not work...
...And 13 more matches

Client-Server Overview - Learn web development
as most website server-side code handles requests and responses in similar ways, this will help you understand what you need to do when writing most of your own code. prerequisites: basic computer literacy. a basic understanding of what a web server is. ...
...s need to be performed by server-side code. there is no real code in the discussion because we haven't yet chosen a web framework to use to write our code! this discussion is however still very relevant, because the described behaviour must be implemented by your server-side code, irrespective of which programming language or web framework you select. web servers and http (a primer) web browsers communicate with web servers using the hypertext transfer protocol (http). when you click a link on a web page, submit a form, or run a search, the browser sends an http request to the server. this request includes: a url identifying the target server and resource (e.g. an html file, a particular data point on the server, or a tool to run). a method that defines the required action (for e...
...he server. post data. post requests add new resources, the data for which is encoded within the request body. client-side cookies. cookies contain session data about the client, including keys that the server can use to determine their login status and permissions/accesses to resources. web servers wait for client request messages, process them when they arrive, and reply to the web browser with an http response message. the response contains an http response status code indicating whether or not the request succeeded (e.g. "200 ok" for success, "404 not found" if the resource cannot be found, "403 forbidden" if the user isn't authorised to see the resource, etc). the body of a successful response to a get request would contain the requested resource. when an html page is returne...
...And 13 more matches

Embedding API for Accessibility
g code: #include "nsipref.h"; nsresult rv; nscomptr<nsipref> prefs(do_getservice(ns_pref_contractid, &rv)); prefs->setboolpref("bool.pref.name", pr_true /* or pr_false */); prefs->setintpref("int.pref.name", newvalue); prefs->setcharpref("string.pref.name", newcharstarvalue); to manually add a pref to your settings, add a line like the following to your prefs.js: user_pref("accessibility.browsewithcaret", true); accessibility prefs reference the following is a description of what accessibility prefs give us (or will give us), for accessibility: functionality implementation works as of images setintpref("network.image.imagebehavior", behavior); /* behavior: ...
...ntpref("font.size.fixed.x-western", newfontsize); setintpref("font.size.variable.x-western", newfontsize); /* for other i18n charsets, change the name as explained above for font face*/ setcharpref("font.default","serif"); /* or "sans-serif" */ setintpref("browser.use_document_fonts", whichfonts); /* whichfonts: 0=no, 1=yes */ moz 0.8 fonts from operating system? setboolpref("browser.use_system_fonts", usesystemfonts); no colors for page setcharpref("browser.display.foreground_color", "#abcde...
...hichfonts: 0=no, 1=yes */ moz 0.8 fonts from operating system? ...
...And 13 more matches

Localizing without a specialized tool
-u compare-locales to start, be sure to open your command line interface and change your directory to where you are keeping your localization files, the en-us sources $ cd /path/to/your/working/directory now, you will need run compare locales. to do this, enter the following commands, keeping sure to change "x-testing" to the actual locale code of your locale. ...
...w, you will need run compare locales. to do this, enter the following commands, keeping sure to change "x-testing" to the actual locale code of your locale. $ compare-locales mozilla-1.9.2/browser/locales/l10n.ini l10n-mozilla-1.9.2 x-testing for convenience, try saving the output of this command to a text file on your desktop so you can review it as you go. run: $ compare-locales mozilla-1.9.2/browser/locales/l10n.ini l10n-mozilla-1.9.2 x-testing > ~/desktop/x-testing.compare open the x-testing.compare file that is on your desktop. ...
...rowser/locales/l10n.ini l10n-mozilla-1.9.2 x-testing for convenience, try saving the output of this command to a text file on your desktop so you can review it as you go. run: $ compare-locales mozilla-1.9.2/browser/locales/l10n.ini l10n-mozilla-1.9.2 x-testing > ~/desktop/x-testing.compare open the x-testing.compare file that is on your desktop. ...
...And 13 more matches

Mozilla Web Developer FAQ
this document answers questions that web authors ask frequently specifically in connection with firefox and other gecko-based browsers. there are links to more general web authoring faqs at the end of this document. what are the quirks mode and the standards mode? gecko has two and a half layout modes: quirks, almost standards and standards. in the standards mode gecko aims to treat documents authored in compliance with the applicable web format specifications. in the quirks mode—for the purpose of backwards compatibility—gecko mimics some behaviors of legacy browsers in ways that are spec violations. the almost standards mode is like the standards mode except it addresses the issue of the next question by rendering table cells with images in the traditional way. the mode is pick...
...uments served as text/html. documents sent as xml always activate the standards layout mode. this includes documents sent as application/xhtml+xml. the consequence is that xhtml 1.0 transitional documents are rendered in the almost standards mode when served as text/html under pretext of the appendix c but in the standards mode when served as application/xhtml+xml. ...
...cludes documents sent as application/xhtml+xml. the consequence is that xhtml 1.0 transitional documents are rendered in the almost standards mode when served as text/html under pretext of the appendix c but in the standards mode when served as application/xhtml+xml. ...
...And 13 more matches

Building the WebLock UI
an be installed in any gecko application. the xpcom interfaces and tools you've used have been general, cross-platform, and available in the gecko runtime environment or in any gecko-based application after mozilla 1.2 (when the gre began to be used). ...
... gecko application. the xpcom interfaces and tools you've used have been general, cross-platform, and available in the gecko runtime environment or in any gecko-based application after mozilla 1.2 (when the gre began to be used). in this chapter, however, we are going to be building a user interface for the weblock component that's meant to be added to the existing mozilla browser[other-mozlike-browsers]. ...
...'s meant to be added to the existing mozilla browser[other-mozlike-browsers]. it uses xul, which is an xml language that gecko knows how to render as user interface, but it also interacts with particular parts of the mozilla user interface, where it must install itself as an extension to the ui. specifically, the user interface we create in this chapter will be overlaid into the statusbar of the browser component, where it will provide a small icon the user can click to access the web lock interface. weblock indicator in browser user interface package list the user interface described in this section is comprised of four files: weblockoverlay.xul is the file that defines the little status icon in the browser. weblock.xul defines the web lock manager dialog. weblock.css provides style...
...And 13 more matches

imgIContainer
obsolete since gecko 2.0 kblendsource 0 all color components of the frame, including alpha, const long kblendover = 1; // the frame should be composited onto the output buffer. obsolete since gecko 2.0 methods native code only!addrestoredata obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. void addrestoredata( [array, size_is(acount), const] in char data, in unsigned long acount ); parameters data missing description acount missing description exceptions thrown missing exception missing description native code only!appendframe obsolete since gecko 2.0 (firefox...
...estoredata( [array, size_is(acount), const] in char data, in unsigned long acount ); parameters data missing description acount missing description exceptions thrown missing exception missing description native code only!appendframe obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. adds to the end of the list of frames. void appendframe( in print32 ax, in print32 ay, in print32 awidth, in print32 aheight, in gfximageformat aformat, [array, size_is(imagelength)] out pruint8 imagedata, out unsigned long imagelength ); parameters ax missing description ay mi...
...escription aheight missing description aformat missing description imagedata missing description imagelength missing description exceptions thrown missing exception missing description native code only!appendpalettedframe obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. void appendpalettedframe( in print32 ax, in print32 ay, in print32 awidth, in print32 aheight, in gfximageformat aformat, in pruint8 apalettedepth, [array, size_is(imagelength)] out pruint8 imagedata, out unsigned long imagelength, [array, size_is(palettelength)] out pruint32 palettedata, ...
...And 13 more matches

Capabilities, constraints, and settings - Web APIs
historically, writing scripts for the web that work intimately with web apis has had a well-known challenge: often, your code needs to know whether or not an api exists and if so, what its limitations are on the user agent it's running on. figuring this out has often been difficult, and has usually involved looking at some combination of which user agent (or browser) you're running on, which version it is, looking to see if certain objects exist, trying to see whether various things work or not and determining what errors occur, and so forth. the result has been a lot of very fragile code, or a reliance on libraries which figure this stuff out for you, then implement polyfills to patch the holes in the implementation on your behalf. the twin concepts of constraints and capabilities let the b...
...it is, looking to see if certain objects exist, trying to see whether various things work or not and determining what errors occur, and so forth. the result has been a lot of very fragile code, or a reliance on libraries which figure this stuff out for you, then implement polyfills to patch the holes in the implementation on your behalf. the twin concepts of constraints and capabilities let the browser and web site or app exchange information about what constrainable properties the browser's implementation supports and what values it supports for each one. this article discusses capabilities and constraints, as well as media settings, and includes an example we call the constraint exerciser. the constraint exerciser lets you experiment with the results of different constraint sets being appli...
...th the results of different constraint sets being applied to the audio and video tracks coming from the computer's a/v input devices (such as its webcam and microphone). overview the process works like this (using mediastreamtrack as an example): if needed, call mediadevices.getsupportedconstraints() to get the list of supported constraints, which tells you what constrainable properties the browser knows about. this isn't always necessary, since any that aren't known will simply be ignored when you specify them—but if you have any that you can't get by without, you can start by checking to be sure they're on the list. once the script knows whether the property or properties it wishes to use are supported, it can then check the capabilities of the api and its implementation by examining...
...And 13 more matches

Using feature queries - CSS: Cascading Style Sheets
feature queries are created using the css at-rule @supports, and are useful as they give web developers a way to test to see if a browser has support for a certain feature, and then provide css that will only run based on the result of that test. in this guide you will learn how to implement progressive enhancement using feature queries. syntax css feature queries are part of the css conditional rules module, which also contains the media query @media rule; when you use feature queries, you will find they behave in a similar way to media queries. the difference is that with a media query you are testing something about the environment in which the web page is running, whereas with feature queries you are testing browser support for css features. a feature query consists of the @supports ru...
...age is running, whereas with feature queries you are testing browser support for css features. a feature query consists of the @supports rule, followed by the property name and value you would like to test for. you may not test for a bare property name such as display; the rule requires a property name and a value: @supports (property: value) { css rules to apply } if you want to check if a browser supports the row-gap property, for example, you would write the following feature query. it doesn't matter which value you use in a lot of cases: if all you want is to check that the browser supports this property, then any valid value will do. the value part of the property value pair matters more if you are testing for new values of a particular property. a good example would be the displa...
...ow-gap property, for example, you would write the following feature query. it doesn't matter which value you use in a lot of cases: if all you want is to check that the browser supports this property, then any valid value will do. the value part of the property value pair matters more if you are testing for new values of a particular property. a good example would be the display property. all browsers support display, as display: block dates back to css1. however the values display: flex and display: grid are newer. ...
...And 13 more matches

Line-based placement with CSS Grid - CSS: Cascading Style Sheets
ering the basic concepts of grid layout, we started to look at how to position items on a grid using line numbers. in this article we will fully explore how this fundamental feature of the specification works. starting your exploration of grid with numbered lines is the most logical place to begin, as when you use grid layout you always have numbered lines. the lines are numbered for columns and rows, and are indexed from 1. note that grid is indexed according to the writing mode of the document. in a left to right language such as english line 1 is on the left-hand side of the grid. if you are working in a right-to-left language then line 1 will be the far right of the grid. we will learn more about the interaction between writing modes and grids in a later guide. a basic example as a very...
...xample we can take a grid with 3 column tracks and 3 row tracks. this gives us 4 lines in each dimension. inside our grid container i have four child elements. if we do not place these on to the grid in any way they will lay out according to the auto-placement rules, one item in each of the first four cells. if you use the firefox grid highlighter you can see how the grid has defined columns and rows. ...
...id has defined columns and rows. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> positioning items by line number we can use line-based placement to control where these items sit on the grid. i would like the first item to start on the far left of the grid and span a single column track. it shou...
...And 13 more matches

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
it can also be the destination for streamed media, using a mediastream. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the above example shows simple usage of the <audio> element. ...
...ct, please clone https://github.com/mdn/interactive-examples and send us a pull request. 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. attributes this element's attributes include the global attributes. autoplay a boolean attribute: if specified, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to fi...
...should be avoided when possible. if you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). however, this can be useful when creating media elements whose source will be set at a later time, under user control. see our autoplay guide for additional information about how to properly use autoplay. controls if this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback. crossorigin this enumerated attribute indicates whether to use cors to fetch the related audio file. cors-enabled resources can be reused in the <canvas> element without being tainted. the allowed values are: anonymous sends a cross-origin request without a credential. ...
...And 13 more matches

MIME types (IANA media types) - HTTP
o known as a multipurpose internet mail extensions or mime type) is a standard that indicates the nature and format of a document, file, or assortment of bytes. it is defined and standardized in ietf's rfc 6838. the internet assigned numbers authority (iana) is responsible for all official mime types, and you can find the most up-to-date and complete list at their media types page. important: browsers use the mime type, not the file extension, to determine how to process a url, so it's important that web servers send the correct mime type in the response's content-type header. if this is not correctly configured, browsers are likely to misinterpret the contents of files and sites will not work correctly, and downloaded files may be mishandled. structure of a mime type the simplest mime t...
... email scenarios — to represent multiple, separate files which are all part of the same transaction. they represent a composite document. with the exception of multipart/form-data, used in the post method of html forms, and multipart/byteranges, used with 206 partial content to send part of a document, http doesn't handle multipart documents in a special way: the message is transmitted to the browser (which will likely show a "save as" window if it doesn't know how to display the document). there are two multipart types: message list at iana a message that encapsulates other messages. this can be used, for instance, to represent an email that includes a forwarded message as part of its data, or to allow sending very large messages in chunks as if it were multiple messages. examples inc...
...data (for data produced using the formdata api) and multipart/byteranges (defined in rfc 7233: 5.4.1 and used with http's 206 "partial content" response returned when the fetched data is only part of the content, such as is delivered using the range header). important mime types for web developers application/octet-stream this is the default for binary files. as it means unknown binary file, browsers usually don't execute it, or even ask if it should be executed. they treat it as if the content-disposition header was set to attachment, and propose a "save as" dialog. text/plain this is the default for textual files. even if it really means "unknown textual file," browsers assume they can display it. note that text/plain does not mean "any kind of textual data." if they expect a specifi...
...And 13 more matches

Proxy - JavaScript
in this example, we are using a native javascript object to which our proxy will forward all operations that are applied to it. const target = {}; const p = new proxy(target, {}); p.a = 37; // operation forwarded to the target console.log(target.a); // 37 // (the operation has been properly forwarded!) note that while this "no-op" works for javascript objects, it does not work for native browser objects like dom elements. validation with a proxy, you can easily validate the passed value for an object. this example uses the set handler. let validator = { set: function(obj, prop, value) { if (prop === 'age') { if (!number.isinteger(value)) { throw new typeerror('the age is not an integer'); } if (value > 200) { throw new rangeerror('the age seem...
...this example uses the construct and apply handlers. function extend(sup, base) { var descriptor = object.getownpropertydescriptor( base.prototype, 'constructor' ); base.prototype = object.create(sup.prototype); var handler = ...
...this example uses the construct and apply handlers. function extend(sup, base) { var descriptor = object.getownpropertydescriptor( base.prototype, 'constructor' ); base.prototype = object.create(sup.prototype); var handler = { construct: function(target, args) { ...
...And 13 more matches

Web audio codec guide - Web media technologies
tions. see codecs used by webrtc for details. for information about the fundamental concepts behind how digital audio works, see the article digital audio concepts. common codecs the list below denotes the codecs most commonly used on the web and which containers (file types) support them. if all you need to know is which codecs are even possible to use, this is for you. of course, individual browsers may or may not choose to support all of these codecs, and their support for which container types can use them may vary as well. in addition, browsers may choose to support additional codecs not included on this list. codec name (short) full codec name container support aac advanced audio coding mp4, adts, 3gp alac apple lossless audio codec mp...
...supported sample rates 8 khz - 96 khz recommended minimum bit rate for stereo sound 96 kbps at 48 khz sample rate compression lossy maximum audio channels 48 (plus 16 low frequency enhancement channels) audio frequency bandwidth 0 hz - 96 khz (standard audio channels) 0 hz - 120 hz (lfe channels) latency 20 ms to 405 ms browser compatibility feature chrome edge firefox internet explorer opera safari aac support yes[2] yes yes[1] 9 yes 3.1 container support mp4, adts, 3gp rtp / webrtc compatible yes licensing for streaming or dist...
... macos 35 [2] chrome supports aac only in mp4 containers, and only supports aac's main profile. in addition, aac is not available in chromium builds. alac (apple lossless audio codec) the apple lossless audio codec (alac or apple lossless) is a lossless codec developed by apple. after initially being a closed format, apple opened it up under an apache license. cross-platform and browser support for alac is not very strong, making it a less than ideal choice for general usage. however, if your target is primarily macos and ios users, it may be worth considering, as the operating systems have integrated support for alac. otherwise, flac is likely a better choice, if you must use a lossless codec. keep in mind, however, that lossless codecs require substantially more bandwidth a...
...And 13 more matches

Listening to events in Firefox extensions - Archive of obsolete content
that may wish to know about them. there are several different categories of events; this article will help you learn about them and direct you to more specific documentation covering each of them. it also provides some use cases that may be of specific interest. ...
...w about them. there are several different categories of events; this article will help you learn about them and direct you to more specific documentation covering each of them. it also provides some use cases that may be of specific interest. ...
...fications from <xul:browser> and <xul:tabbrowser> elements to hear about changes relating to loads of the content contained within them. simple dom events registering for a dom event is done using with code such as the following: function callback(evt) { // do your processing here. check evt.target for the target of the event. } b.addeventlistener("event", callback, false) where b is the browser or tabbrowser you wish to watch for events from. keep in mind that the events may come from any frame within the browser or, for a tabbrowser, any of the browsers within it. some of the more interesting dom events you may wish to monitor are listed here: event description domlinkadded dispatched when a new html <link> element is detected in the document. domti...
...And 12 more matches

Index of archived content - Archive of obsolete content
ion guide high-level apis addon-page base64 clipboard context-menu hotkeys indexed-db l10n notifications page-mod page-worker panel passwords private-browsing querystring request selection self simple-prefs simple-storage system tabs timers ui url widget windows low-level apis /loader ...
...a running applications svg animation svg general scrollbar sidebar stringview tabbox toolbar tree uri parsing view source for xul applications windows xml-related code snippets xml:base support in old browsers xpath getattributens common pitfalls communication between html and your extension creating custom firefox extensions with the mozilla build system custom about: urls default preferences deploying a plugin as an extension developing add-ons d...
...nloading json and javascript in extensions enhanced extension installation extension etiquette extension library extension packaging extension samples extension theming guidelines extension versioning, update and compatibility extensions support in seamonkey 2 firefox addons developer guide hiding browser chrome hotfix extension how to convert an overlay extension to restartless inline options install manifests installing extensions and themes from web pages interaction between privileged and non-privileged pages jetpack processes legacy add-ons legacy extensions for firefox for android ...
...And 12 more matches

Content Panels - Archive of obsolete content
ithin the window. it has the advantage that it can be placed anywhere and the contents can be loaded from a different file. set the url to appear in the frame with the src attribute. this url may point to any kind of file, although it will usually point to an html file or another xul file. you can use a script to change the contents of the iframe without affecting the main window. in the mozilla browser window, the area where the web page is displayed is created by using an iframe. when the user enters a url or clicks on a link in a document, the source of the frame is changed. iframe example example 1 : source view <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton label="back" /> <toolbarbutton label="forward" /> <textbox id="urlfield" /> </toolbar> </toolbox> <iframe ...
...document, the source of the frame is changed. iframe example example 1 : source view <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton label="back" /> <toolbarbutton label="forward" /> <textbox id="urlfield" /> </toolbar> </toolbox> <iframe id="content-body" src="http://www.mozilla.org/index.html" flex="1" /> the example here has created a very simple interface for a web browser. a box has been created containing two elements: a toolbox and an iframe. a back button, a forward button and a field for typing is urls has been added to the only toolbar (we'll learn about toolbar in a later section). the web pages would appear inside the iframe. in this case, the file index.html would appear by default. this example isn't functionally complete. next, we would want to add scr...
... a field for typing is urls has been added to the only toolbar (we'll learn about toolbar in a later section). the web pages would appear inside the iframe. in this case, the file index.html would appear by default. this example isn't functionally complete. next, we would want to add script which changes the src attribute at the desired time, for example when the user presses the enter key. ...
...And 12 more matches

tree - Archive of obsolete content
unlike other elements, the data to display inside the tree is not specified using tags, but is determined from a view object. the view object implements the nsitreeview interface. the view is queried for the data to appear in the tree. ...
...unlike other elements, the data to display inside the tree is not specified using tags, but is determined from a view object. the view object implements the nsitreeview interface. the view is queried for the data to appear in the tree. ...
...atasource. it is used when a tree has a datasources attribute, and has dont-build-content in its flags attribute. for this tree, the data comes directly from the rdf datasource. dom treeitems are not created. even though the template uses treeitem elements to define the content, dom nodes for these elements are not created. this is the type that should be used for rdf generated trees with lots of rows. rdf content tree nsitreeview, nsixultreebuilder, nsitreecontentview yes this tree is generated from an rdf datasource. it is similar to the previous type but is used when the tree does not have dont-build-content in its flags attribute. dom treeitems are created, so you can access the data using rdf functions or dom functions. this type is suitable for rdf generated trees with ...
...And 12 more matches

Adobe Flash - Archive of obsolete content
ity for access via javascript. it can also access javascript methods from within the plugin. this article explains how javascript can be used to access methods from within the flash plugin, as well as how a feature called fscommands can be used to access javascript functions from within the flash animation. the focus of this article is to present tips on scripting flash within gecko™-based web browsers. detecting the right flash plugin (and browser) adobe flash has exposed the scriptability feature in netscape gecko browsers since flash 6r49 and later. versions of flash prior to flash 6r49 (such as flash 5) are not scriptable in netscape gecko browsers. thus client-side detection for the right version of flash is an important aspect of creating a scripted flash experience. on mac os x, the...
...the example below shows a detection heuristic in action. ...
...the example below shows a detection heuristic in action. ...
...And 12 more matches

WAI-ARIA basics - Learn web development
here we'll show how to use it at a basic level to improve accessiblity. ...
...tion</a> but this is still not very precise, and can only be used when the screenreader is reading from the top of the page. as another example, apps started to feature complex controls like date pickers for choosing dates, sliders for choosing values, etc. html5 provides special input types to render such controls: <input type="date"> <input type="range"> these are not well-supported across browsers, and it is also difficult to style them, making them not very useful for integrating with website designs. as a result, developers quite often rely on javascript libraries that generate such controls as a series of nested <div>s or table elements with classnames, which are then styled using css and controlled using javascript. the problem here is that visually they work, but screenreaders can...
...led="true", which specifies to a screenreader that a form input is currently disabled. states differ from properties in that properties don't change throughout the lifecycle of an app, whereas states can change, generally programmatically via javascript. an important point about wai-aria attributes is that they don't affect anything about the web page, except for the information exposed by the browser's accessibility apis (where screenreaders get their information from). wai-aria doesn't affect webpage structure, the dom, etc., although the attributes can be useful for selecting elements by css. note: you can find a useful list of all the aria roles and their uses, with links to futher information, in the wai-aria spec — see definition of roles. the spec also contains a list of all the ...
...And 12 more matches

Limitations of chrome scripts
he fix is generally some variant of "do that in a frame script loaded into the content process". this is one of a pair of articles: the other one lists limitations of frame scripts. compatibility shims for many of the patterns described here we've implemented compatibility shims so the patterns still work. for example: whenever extensions try to access web content from the chrome process, the browser will return a cross process object wrapper that gives the chrome code synchronous access to the content. you'll get the shims for your add-on by default, unless you set the multiprocesscompatible flag in your add-on's install manifest. however, these shims are not a substitute for migrating extensions: they are only a temporary measure, and will be removed eventually they can have a bad e...
... without the shim all apis in the ch...
...y setting the dom.ipc.shims.enabledwarnings preference and watching the browser console as you use the add-on. the rest of this page documents patterns that don't work in multiprocess firefox as well as how are shims try to paper over the problem. for each pattern we've noted: whether a shim exists and what kind of behavior it provides how to update your add-on so you don't need the shim gbrowser.contentwindow, window.content... without the shim all apis in the chrome process that provide direct access to content objects will no longer work. ...
...And 12 more matches

WebRequest.jsm
st. you can use this api to implement a content policy in an add-on (for example, an ad or script blocker), as you could using nsicontentpolicy. more generally, you can also use this api instead of http request observers. you can use webrequest.jsm in either the chrome or content processes. the webrequest api is modeled on chrome's webrequest extension api, which makes it easier to write cross-browser add-on code. there are some differences between this api and chrome's, though: see chrome incompatibilities for the details. usage to import webrequest, use code like: let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); the webrequest object has the following properties, each of which corresponds to a specific stage in executing a web request: onbeforerequest onbe...
...ainfospec array of string the optional opt_extrainfospec argument lets you pass extra instructions for the handling of events. the instructions you can pass here vary depending on the event you're listening to: see the event-specific documentation for details. in particular, "blocking" may be passed to several event types, and will make the event dispatch synchronous, so the browser will wait for the event listener to return before continuing with the request. this then enables the event listener to modify or cancel the request. see modifying & canceling requests. some examples of using addlistener(). to remove a listener for an event, call removelistener on the event in question, passing it the listener to remove. filtering the filter argument is the second ...
... listener to modify or cancel the request. see modifying & canceling requests. some examples of using addlistener(). to remove a listener for an event, call removelistener on the event in question, passing it the listener to remove. filtering the filter argument is the second argument to addlistener(). if you don't pass filter, then the listener is invoked for every web request the browser makes that triggers that particular event. filter is an object that may contain up to two properties: urls and types. name type description urls matchpattern only invoke the listener for urls that match one of the patterns. types array of strings. an array of resource types. only invoke the listener for resource types that match one of the type...
...And 12 more matches

nsIAnnotationService
toolkit/components/places/public/nsiannotationservice.idlscriptable stores arbitrary data about a web page. supported for use from trusted code, such as extensions, but not from web content. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) implemented by: "@mozilla.org/browser/annotation-service;1". to use this service, use: var annotationservice = components.classes["@mozilla.org/browser/annotation-service;1"] .getservice(components.interfaces.nsiannotationservice); note: the annotation service is not thread-safe. you should only use it from the main thread. method overview void setpageannotation(in nsiuri auri, in autf8string aname, in...
...e annotation name. avalue the annotation value. aflags should be "0" for now, some flags will be defined in the future. aexpiration one of the expire_* constant value defined above. note: all page annotations will get deleted when the page is removed from history if the page is not bookmarked. this means that if you create an annotation on an unvisited uri, it will get deleted when the browser shuts down. otherwise, uris can exist in history as annotations but the user has no way of knowing it, potentially violating their privacy expectations about actions such as clear history. if there is an important annotation that the user or extension wants to keep, you should add a bookmark for the page and use an expire_never annotation. this will ensure the annotation exists until the item i...
...e annotation name. avalue the annotation value. aflags should be "0" for now, some flags will be defined in the future. aexpiration one of the expire_* constant value defined above. note: all page annotations will get deleted when the page is removed from history if the page is not bookmarked. this means that if you create an annotation on an unvisited uri, it will get deleted when the browser shuts down. otherwise, uris can exist in history as annotations but the user has no way of knowing it, potentially violating their privacy expectations about actions such as clear history. if there is an important annotation that the user or extension wants to keep, you should add a bookmark for the page and use an expire_never annotation. this will ensure the annotation exists until the item i...
...And 12 more matches

WebGL best practices - Web APIs
webgl is a complicated api, and it's often not obvious what the recommended ways to use it are. this page tackles recommendations across the spectrum of expertise, and not only highlights dos and don'ts, but also details why. you can rely on this document to guide your choice of approach, and ensure you're on the right track no matter what browser or hardware your users run. general topics address and eliminate webgl errors your application should run without generating any webgl errors (as returned by geterror). every webgl error is reported in the web console as a javascript warning with a descriptive message. after too many errors (32 in firefox), webgl stops generating descriptive messages, which really hinders debugging. the only errors a well-formed page generates are out_of_memory ...
...ers ahead of time. in firefox, setting the pref webgl.perf.max-warnings to -1 in about:config will enable performance warnings that include warnings about fb completeness invalidations. and to a lesser degree, vao attachments (vertexattribpointer, disable/enablevertexattribarray) drawing from static, unchanging vaos is faster than mutating the same vao for every draw call. for unchanged vaos, browsers can cache the fetch limits, whereas when vaos change, browsers must revalidate and recalculate limits. the overhead for this is relatively low, but re-using vaos means fewer vertexattribpointer calls too, so it's worth doing wherever it's easy. delete objects eagerly don't wait for the garbage collector/cycle collector to realize objects are orphaned and destroy them. implementations track t...
...void blocking api calls in production (e.g. geterror, getparameter) certain webgl entry points cause synchronous stalls on the calling thread. even basic requests can take as long as 1ms, but they can take even longer if they need to wait for all graphics work to be completed (with an effect similar to glfinish() in native opengl). in production code, avoid such entry points, especially on the browser main thread where they can cause the entire page to jank (often including scrolling or even the whole browser). geterror(): causes a flush + round-trip to fetch errors from the gpu process). for example, within firefox, the only time glgeterror is checked is after allocations (bufferdata, *teximage*, texstorage*) to pick up any gl_out_of_memory errors. getshader/programparameter(...
...And 12 more matches

CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
in spring of 2017, we saw for the first time a major specification like grid being shipped into browsers almost simultaneously, and we now have css grid layout support in the public versions of firefox, chrome, opera, safari and edge. however, while evergreen browsers mean that many of us are going to see the majority of users having grid layout support very quickly, there are also old or non-supporting browsers to contend with. in this guide we will walk through a variety of strategies for support. the supporting browsers other than in internet explorer, css grid layout is unprefixed in safari, chrome, opera, firefox and edge. support for all the properties and values detailed in these guides is interoperable across browsers. this means that if you write some grid layout code in fi...
... in ie10 and the current specification, even where the properties and values appear the same. this early implementation is also the version of grid layout implemented in edge up to version 15. the ie/edge (≤15) version of the specification is prefixed with an -ms prefix and the properties implemented in ie/edge (≤15) are as follows: grid-template-columns as -ms-grid-columns grid-template-rows as -ms-grid-rows grid-row-start as -ms-grid-row grid-column-start as -ms-grid-column align-self as -ms-grid-row-align justify-self as -ms-grid-column-align the ie version has additional properties not required in the new specification of -ms-grid-column-span and -ms-grid-row-span. this version does not include auto-placement capability, or grid template areas. some simple grid layouts could...
...-ms-grid-column-align the ie version has additional properties not required in the new specification of -ms-grid-column-span and -ms-grid-row-span. this version does not include auto-placement capability, or grid template areas. some simple grid layouts could be implemented for ie10, through to edge 15, using the -ms properties. as these properties are vendor prefixed, they will not effect any browser supporting the up to date and unprefixed specification. autoprefixer grid layout support the popular tool autoprefixer has been updated to support the -ms- grid version. by default, grid prefixes are disabled, but you can enable it with grid: true option. autoprefixer({ grid: 'autoplace' }) grid prefixes are disabled by default because some properties can’t be prefixed. is it safe to use...
...And 12 more matches

Overview of events and handlers - Developer guides
this overview of events and event handling explains the code design pattern used to react to incidents occurring when a browser accesses a web page, and it summarizes the types of such incidents modern web browsers can handle. events and event handling provide a core technique in javascript for reacting to incidents occurring when a browser accesses a web page, including events from preparing a web page for display, from interacting with the content of the web page, relating to the device on which the browser is running, and from many other causes such as media stream playback or animation timing. ...
... to incidents occurring when a browser accesses a web page, including events from preparing a web page for display, from interacting with the content of the web page, relating to the device on which the browser is running, and from many other causes such as media stream playback or animation timing. events and event handling become central to web programming with the addition of the language to browsers, accompanying a switch in the rendering architecture of browsers from fetch and load page rendering to event driven, reflow based, page rendering. initially, browsers wait, until they receive all of the resources associated with a page, to parse, process, draw, and present the page to the user. the displayed page remains unchanged until the browser requests a new page. with the change to dynam...
...switch in the rendering architecture of browsers from fetch and load page rendering to event driven, reflow based, page rendering. initially, browsers wait, until they receive all of the resources associated with a page, to parse, process, draw, and present the page to the user. the displayed page remains unchanged until the browser requests a new page. with the change to dynamic page rendering, browsers loop continuously between processing, drawing, presenting content, and waiting for some new event trigger. ...
...And 12 more matches

<input type="month"> - HTML: Hypertext Markup Language
tered. the value is a string whose value is in the format "yyyy-mm", where yyyy is the four-digit year and mm is the month number. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the control's ui varies in general from browser to browser; at the moment support is patchy, with only chrome/opera and edge on desktop — and most modern mobile browser versions — having usable implementations. in browsers that don't support month inputs, the control degrades gracefully to a simple <input type="text">, although there may be automatic validation of the entered text to ensure it's formatted as expected. for those of you u...
...clicking the down arrow on the right hand side brings up a date picker that lets you select the month and year. ...
...e the underlying numeric value is also in months). the default value of step is 1 month. using month inputs date-related inputs (including month) sound convenient at first glance; they promise an easy ui for choosing dates, and they normalize the data format sent to the server, regardless of the user's locale. however, there are issues with <input type="month"> because at this time, many major browsers don't yet support it. we'll look at basic and more complex uses of <input type="month">, then offer advice on mitigating the browser support issue in the section handling browser support). basic uses of month the simplest use of <input type="month"> involves a basic <input> and <label> element combination, as seen below: <form> <label for="bday-month">what month were you born in?</label>...
...And 12 more matches

Web Performance
is section: key performance guides animation performance and frame rateanimation on the web can be done via svg, javascript, including <canvas> and webgl, css animation, <video>, animated gifs and even animated pngs and other image types. the performance cost of animating a css property can vary from one property to another, and animating expensive css properties can result in jank as the browser struggles to hit a smooth frame rate.critical rendering paththe critical rendering path is the sequence of steps the browser goes through to convert the html, css, and javascript into pixels on the screen. optimizing the critical render path improves render performance.the critical rendering path includes the document object model (dom), css object model (cssom), render tree and layout.css and ...
...in summary, we should always try to create our animations using css transitions/animations where possible. ...
...ions are really complex, you may have to rely on javascript-based animations instead.lazy loadinglazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. it is a way of shorten the critical rendering path length, what would translate into improved page load times. navigation and resource timingsnavigation timings are metrics measuring a browser's document navigation events. resource timings are detailed network timing measurements regarding the loading of an application's resources.optimizing startup performanceregardless of platform, it's always a good idea to start up as quickly as possible. since that's a universal issue, we won't be focusing on it too much here. instead, we're going to look at a more important issue when building ...
...And 12 more matches

ui/frame - Archive of obsolete content
rame hosting it and add the frame to a toolbar like this: var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url: "./city-info.html" }); var toolbar = toolbar({ name: "city-info", title: "city info", items: [frame] }); the toolbar is positioned between the address bar and the content window. it occupies the whole width of the browser window and is 18 pixels high on a normal-resolution display or 36 pixels high on a high-resolution (hidpi) display. this toolbar might look something like: scripting frames to add scripts to frames, include them directly from the frame's html content, as with a normal web page: <script type="text/javascript" src="frame.js"></script> as usual, the path to the script is relative to the html...
... to add scripts to frames, include them directly from the frame's html content, as with a normal web page: <script type="text/javascript" src="frame.js"></script> as usual, the path to the script is relative to the html file's location. messages logged from a frame script using the console will not appear in the terminal when you run the add-on using jpm run. however, they will appear in the browser console. this issue is being tracked as bug 982385. communicating with frames you can exchange messages between the main add-on code and scripts loaded into the frame using an api modeled on window.postmessage(). a frame creates a separate iframe instance for each browser window. so there are three cases to consider: sending messages from a frame script to the main add-on code sending me...
...h frames you can exchange messages between the main add-on code and scripts loaded into the frame using an api modeled on window.postmessage(). a frame creates a separate iframe instance for each browser window. so there are three cases to consider: sending messages from a frame script to the main add-on code sending messages from the main add-on code to all instances of a frame, across all browser windows sending messages from the main add-on code to a single instance of a frame, attached to a specific browser window in all cases, postmessage() takes two arguments: the message itself and a targetorigin. the targetorigin argument can be either the uri of the document hosted by the target, or the wildcard "*". if you use the uri, then the message will only be dispatched to the window wh...
...And 11 more matches

Intercepting Page Loads - Archive of obsolete content
also, the different techniques tap into different steps of the load process. ...
...nt steps of the load process. which one you should use solely depends on your needs. we will start with the simplest one, which is also the most common to use. note: performance is very important when it comes to add-ons and page loads. read the recommendations in appendix a regarding performance if you're planning on implementing any of these. the easy way: load events this comes from the tabbrowser code snippets page. in a nutshell, from the chrome code in the overlay we add an event listener for the load event. this._loadhandler = function() {that._onpageload(); }; gbrowser.addeventlistener("load", this._loadhandler, true); gbrowser is a global object that corresponds to the tabbrowser element in the main browser window. it is full of useful functions, so you should always keep it in...
... for the load event. this._loadhandler = function() {that._onpageload(); }; gbrowser.addeventlistener("load", this._loadhandler, true); gbrowser is a global object that corresponds to the tabbrowser element in the main browser window. it is full of useful functions, so you should always keep it in mind when you want to handle tabs and web content windows. attaching the load event handler to gbrowser allows us to listen to these events for all tabs, without having to worry how many tabs are open. gbrowser exists in every browser window. we store the handler function in a private variable because later we want to remove it when we do not need it anymore. ...
...And 11 more matches

Extensions support in SeaMonkey 2 - Archive of obsolete content
m:maxversion>2.*</em:maxversion> </description> </em:targetapplication> the install.js is not supported any more and should be removed. differences as compared to other toolkit/-based applications you need to overlay/open different chrome urls as compared to firefox. ...
...</em:maxversion> </description> </em:targetapplication> the install.js is not supported any more and should be removed. differences as compared to other toolkit/-based applications you need to overlay/open different chrome urls as compared to firefox. ...
...ll.js is not supported any more and should be removed. differences as compared to other toolkit/-based applications you need to overlay/open different chrome urls as compared to firefox. ...
...And 11 more matches

Download Manager preferences - Archive of obsolete content
there are several preferences used by the download manager. this article provides a list of them. preference description browser.download.antivirus.dontclean note: in gecko 1.9.1. a boolean value that indicates whether the anti virus software should try to clean a downloaded file when a virus is detected. default value is false. browser.download.manager.addtorecentdocs a boolean value that indicates whether or not new downloads should be added to the recent documents list. default value is true. browser.download.manager.alertonexeopen a boolean value that indicates whether the ui should alert the user about the dangers of opening (executing) an exe. the user may check a "don't ask" box on the ui to toggle this. ...
...boolean value that indicates whether or not new downloads should be added to the recent documents list. default value is true. browser.download.manager.alertonexeopen a boolean value that indicates whether the ui should alert the user about the dangers of opening (executing) an exe. the user may check a "don't ask" box on the ui to toggle this. default value is true. browser.download.manager.closewhendone a boolean value indicating whether or not the downloads window should close automatically when downloads are completed. in thunderbird the default value is true. in other applications the default value is false. ...
... opening (executing) an exe. the user may check a "don't ask" box on the ui to toggle this. default value is true. browser.download.manager.closewhendone a boolean value indicating whether or not the downloads window should close automatically when downloads are completed. in thunderbird the default value is true. in other applications the default value is false. browser.download.manager.flashcount indicates the number of times the appropriate user interface element should be "flashed" to get the user's attention when a download completes. default value is 2. browser.download.manager.focuswhenstarting a boolean value that indicates whether or not to focus the download manager window when a download begins. in firefox,thunderbird and seamo...
...And 11 more matches

Introduction to CSS layout - Learn web development
normal flow the display property flexbox grid floats positioning table layout multiple-column layout each technique has its uses, advantages, and disadvantages, and no technique is designed to be used in isolation. by understanding what each method is designed for you will be in a good place to understand which is the best layout tool for each task. ...
...is designed for you will be in a good place to understand which is the best layout tool for each task. normal flow normal flow is how the browser lays out html pages by default when you do nothing to control page layout. let's look at a quick html example: <p>i love my cat.</p> <ul> <li>buy cat food</li> <li>exercise</li> <li>cheer up friend</li> </ul> <p>the end!</p> by default, the browser will display this code as follows: note here how the html is displayed in the exact order in which it appears in the source code, with elements stacked up on top of one another — the first paragraph, followed by the unordered list, followed by the second paragraph. the elements that appear one below the other are described as block elements, in contrast to inline elements, which appear on...
...ments to wrap alongside one side of an element, like the way images sometimes have text floating around them in magazine layouts. the position property — allows you to precisely control the placement of boxes inside other boxes. static positioning is the default in normal flow, but you can cause elements to be laid out differently using other values, for example always fixed to the top of the browser viewport. table layout — features designed for styling the parts of an html table can be used on non-table elements using display: table and associated properties. multi-column layout — the multi-column layout properties can cause the content of a block to layout in columns, as you might see in a newspaper. the display property the main methods of achieving page layout in css are all v...
...And 11 more matches

How CSS works - Learn web development
previous overview: first steps next we have learned the basics of css, what it is for and how to write simple stylesheets. in this lesson we will take a look at how a browser takes css and html and turns that into a webpage. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, and html basics (study introduction to html.) objective: to understand the basics of how css and html are parsed by the browser, and what happens when a browser encounters css it does not understand. how does css actually work? when a browser displays a document, it must combine the document's content with its style information. it processes the document in a number of stages, which we've listed below. bear in mind tha...
...ss and html are parsed by the browser, and what happens when a browser encounters css it does not understand. how does css actually work? ...
...hat happens when a browser encounters css it does not understand. how does css actually work? ...
...And 11 more matches

React interactivity: Events and state - Learn web development
t. the onclick attribute has special meaning here: it tells react to run a given function when the user clicks on the button. there are a couple of other things to note: the camel-cased nature of onclick is important — jsx will not recognize onclick (again, it is already used in javascript for a specific purpose, which is related but different — standard onclick handler properties). all browser events follow this format in jsx – on, followed by the name of the event. let's apply this to our app, starting in the form.js component. handling form submission at the top of the form() component function, create a function named handlesubmit(). this function should prevent the default behavior of the submit event. after that, it should trigger an alert(), which can say whatever you’d...
...submit event. after that, it should trigger an alert(), which can say whatever you’d like. 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. callback props in react applications, interactivity is rarely confined to just one component: events that happen in one component will affect other parts of the app. when we start giving ourselves the power to make new tasks, things that happen in ...
...it matches the name of the function as well as what the function will do. your <form /> component call should be updated as follows: <form addtask={addtask} /> finally, you can use this prop inside the handlesubmit() function in your <form /> component! 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! this is what we'll do next. note: we decided to name our callback prop addtask to make it easy to understand what the prop will do. another common convention you may well come across in react code is to prefix callback prop names with the word on, ...
...And 11 more matches

IAccessibleTable2
you should also support the iaccessibletable interface. ...
... cell ); [propget] hresult columndescription([in] long column, [out] bstr description ); [propget] hresult iscolumnselected([in] long column, [out] boolean isselected ); [propget] hresult isrowselected([in] long row, [out] boolean isselected ); [propget] hresult modelchange([out] ia2tablemodelchange modelchange ); [propget] hresult ncolumns([out] long columncount ); [propget] hresult nrows([out] long rowcount ); [propget] hresult nselectedcells([out] long cellcount ); [propget] hresult nselectedcolumns([out] long columncount ); [propget] hresult nselectedrows([out] long rowcount ); [propget] hresult rowdescription([in] long row, [out] bstr description ); hresult selectcolumn([in] long column ); [propget] hresult selectedcells([out, size_is(, nselectedcells,)] iunknown c...
...the returned object could be an iaccessible or an iaccessible2. ...
...And 11 more matches

Accessibility documentation index - Accessibility
een readers developers' need to try different things. the intention is to strike a balance between providing useful guidance on how to use the markup's intended meaning while supporting live regions as an area for screen readers to innovate and compete. 4 aria test cases aria, accessibility for each example we test the "expected" results with assistive technologies, for each browser that at supports wai-aria in. where a failure occurs we will test the browser for api incorrectness, using tools such as msaa inspect. this must be done in order to determine where to file a bug (browser or at). 5 aria annotations aria, accessibility, wai-aria, annotations, comments, details, suggestions wai-aria version 1.3 sees the addition of a set of new features, colle...
...hese divided into roles (defining a type of user interface element) and states and properties that are supported by a role. authors must assign an aria role and the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate aria semantics (via use of an appropriate html element). addition of aria semantics only exposes extra information to a browser's accessibility api, and does not affect a page's dom. 14 aria technique template accessibility no summary! 15 using the alert role aria, accessibility, advanced, css, example, html, needscontent, alert, alert role, alertrole, alerts, assitive technology, role configuration, wcag1.2.1, wcag3.3.1 the alert role is used to communicate an important and usu...
...e template accessibility no summary! 15 using the alert role aria, accessibility, advanced, css, example, html, needscontent, alert, alert role, alertrole, alerts, assitive technology, role configuration, wcag1.2.1, wcag3.3.1 the alert role is used to communicate an important and usually time-sensitive message to the user. when this role is added to an element, the browser will send out an accessible alert event to assistive technology products which can then notify the user about it. the alert role is most useful for information that requires the user's immediate attention, for example: 16 using the alertdialog role aria, accessibility, codingscripting, html, needscontent, role(2), web development, agent, alertdialog, alerts, modal, user, useragen...
...And 11 more matches

Index - Developer guides
ed. 5 wai aria live regions/api support ajax, accessibility firefox 3 contains important improvements to the way the mozilla engine exposes live changes in a document. 6 audio and video delivery audio, guide, html, html5, media, video whether we are dealing with pre-recorded audio files or live streams, the mechanism for making them available through the browser's <audio> and <video> elements remains pretty much the same. currently, to support all browsers we need to specify two formats, although with the adoption of mp3 and mp4 formats in firefox and opera, this is changing fast. you can find compatibility information in the guide to media types and formats on the web. 7 adding captions and subtitles to html5 video html5, media, webvtt,...
...ll browsers we need to specify two formats, although with the adoption of mp3 and mp4 formats in firefox and opera, this is changing fast. you can find compatibility information in the guide to media types and formats on the web. 7 adding captions and subtitles to html5 video html5, media, webvtt, captions, subtitles, track in other articles we looked at how to build a cross browser video player using the htmlmediaelement and window.fullscreen apis, and also at how to style the player. this article will take the same player and show how to add captions and subtitles to it, using the webvtt format and the <track> element. ...
... video html5, media, webvtt, captions, subtitles, track in other articles we looked at how to build a cross browser video player using the htmlmediaelement and window.fullscreen apis, and also at how to style the player. this article will take the same player and show how to add captions and subtitles to it, using the webvtt format and the <track> element. 8 creating a cross-browser video player apps, html5, video, full screen this article describes a simple html5 video player that uses the media and fullscreen apis and works across most major desktop and mobile browsers. as well as working fullscreen, the player features custom controls rather than just using the browser defaults. the player controls themselves won't be styled beyond the basics required to get t...
...And 11 more matches

HTML attribute: rel - HTML: Hypertext Markup Language
esentations of the current document. link link not allowed author author of the current document or article. link link not allowed bookmark permalink for the nearest ancestor section. not allowed link not allowed canonical preferred url for the current document. link not allowed not allowed dns-prefetch tells the browser to preemptively perform dns resolution for the target resource's origin external resource not allowed not allowed external referenced document is not part of the same site as the current document. not allowed annotation annotation help link to context-sensitive help. link link link icon icon representing the current document. ext...
... link icon icon representing the current document. external resource not allowed not allowed license indicates that the main content of the current document is covered by the copyright license described by the referenced document. link link link manifest web app manifest link not allowed not allowed modulepreload tells to browser to preemptively fetch the script and store it in the document's module map for later evaluation. optionally, the module's dependencies can be fetched as well. external resource not allowed not allowed next indicates that the current document is a part of a series, and that the next document in the series is the referenced document. link link link nofollow ...
... not allowed next indicates that the current document is a part of a series, and that the next document in the series is the referenced document. link link link nofollow indicates that the current document's original author or publisher does not endorse the referenced document. not allowed annotation annotation noopener creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those to begin with (i.e., has an appropriate target attribute value). not allowed annotation annotation noreferrer no referer header will be included. additionally, has the same effect as noopener. not allowed annotation annotation opener creates an auxiliary bro...
...And 11 more matches

<input type="week"> - HTML: Hypertext Markup Language
week create input fields allowing easy entry of a year plus the iso 8601 week number during that year (i.e., week 1 to 52 or 53). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the control's user interface varies from browser to browser; cross-browser support is currently a bit limited, with only chrome/opera and microsoft edge supporting it at this time. in non-supporting browsers, the control degrades gracefully to function identically to <input type="text">. in chrome/opera the week control provides slots to fill in week and year values, a pop-up calendar interface to select them more visually, and an "x" button...
...can set a default value for the input by including a value inside the value attribute, like so: <label for="week">what week would you like to start?</label> <input id="week" type="week" name="week" value="2017-w01"> one thing to note is that the displayed format may differ from the actual value, which is always formatted yyyy-www. when the above value is submitted to the server, for example, browsers may display it as week 01, 2017, but the submitted value will always look like week=2017-w01. you can also get and set the value in javascript using the input element's value property, for example: var weekcontrol = document.queryselector('input[type="week"]'); weekcontrol.value = '2017-w45'; additional attributes in addition to the attributes common to <input> elements, week inputs offer ...
...nning of the first week of 1970 ("1970-w01"). at this time, it's unclear what a value of "any" means for step when used with week inputs. this will be updated as soon as that information is determined. using week inputs week inputs sound convenient at first glance, since they provide an easy ui for choosing weeks, and they normalize the data format sent to the server, regardless of the user's browser or locale. however, there are issues with <input type="week"> because browser support is not guaranteed across all browsers. we'll look at basic and more complex uses of <input type="week">, then offer advice on mitigating the browser support issue later on (see handling browser support). basic uses of week the simplest use of <input type="week"> involves a basic <input> and <label> element ...
...And 11 more matches

HTML elements reference - HTML: Hypertext Markup Language
lement description <html> the html <html> element represents the root (top-level element) of an html document, so it is also referred to as the root element. all other elements must be descendants of this element. document metadata metadata contains information about the page. this includes information about styles, scripts and data to help software (search engines, browsers, etc.) use and render the page. metadata for styles and scripts may be defined in the page or link to another file that has the information. element description <base> the html <base> element specifies the base url to use for all relative urls in a document. <head> the html <head> element contains machine-readable information (metadata) about the ...
...s. <meta> the html <meta> element represents metadata that cannot be represented by other html meta-related elements, like <base>, <link>, <script>, <style> or <title>. <style> the html <style> element contains style information for a document, or part of a document. <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. sectioning root element description <body> the html <body> element represents the content of an html document. there can be only one <body> element in a document. content sectioning content sectioning elements allow you to organize the document content into logical pieces. use the sectioning elements to create a broad...
...ent (<abbr>) represents an abbreviation or acronym; the optional title attribute can provide an expansion or description for the abbreviation. <b> the html bring attention to element (<b>) is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. <bdi> the html bidirectional isolate element (<bdi>) tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text. <bdo> the html bidirectional text override element (<bdo>) overrides the current directionality of text, so that the text within is rendered in a different direction. <br> the html <br> element produces a line break in text (carriage-return). it is useful for writing a poe...
...And 11 more matches

Downloading Files - Archive of obsolete content
the following methods of downloading files may not work as expected after firefox 26, and should no longer be used. please use downloads.jsm instead. downloading files to download a file, create an instance of nsiwebbrowserpersist and call its nsiwebbrowserpersist.saveuri() method, passing it a url to download and an nsifile instance representing the local file name/path. ...
...ot work as expected after firefox 26, and should no longer be used. please use downloads.jsm instead. downloading files to download a file, create an instance of nsiwebbrowserpersist and call its nsiwebbrowserpersist.saveuri() method, passing it a url to download and an nsifile instance representing the local file name/path. ...
...ox 26, and should no longer be used. please use downloads.jsm instead. downloading files to download a file, create an instance of nsiwebbrowserpersist and call its nsiwebbrowserpersist.saveuri() method, passing it a url to download and an nsifile instance representing the local file name/path. components.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); const webbrowserpersist = components.constructor("@mozilla.org/embedding/browser/nswebbrowserpersist;1", "nsiwebbrowserpersist"); var persist = webbrowserpersist(); var targetfile = services.dirsvc.get("desk", ci.nsifile); targetfile.append("file.bin"); // obtain the privacy context of the browser window that the url // we are downloading comes from. if, and o...
...And 10 more matches

Venkman Introduction - Archive of obsolete content
this article provides an overview and some practical examples of using the javascript debugger in web applications and web page scripting. ...
...ly in firefox and other gecko-based products, such as thunderbird and netscape 7.x. fortunately, the xpinstall technology makes it possible to install new application modules in firefox by just clicking a hyperlink. if you don't already have venkman or would like to upgrade, you can easily get the latest version from firefox add-ons. the installation process is two steps. ...
...y just clicking a hyperlink. if you don't already have venkman or would like to upgrade, you can easily get the latest version from firefox add-ons. the installation process is two steps. first, from within the browser you want to host the debugger application, visit the firefox add-ons page and click on the "install" link for the most recent version. when the download is complete, restart your browser (some windows users may also need to restart their computer as well). you can then access the debugger via a new, dynamically created menuitem in the tools menu of that browser, or else restart the browser with a special debugger option. to see which version of venkman you have, type /version in the interactive session view. for more information about the latest improvements and versions, see ...
...And 10 more matches

Tree View Details - Archive of obsolete content
eating a hierarchical custom view in the last section, we created a simple tree view that implemented only a minimum amount of functionality. next, let's look at some additional functions that views may implement. here, we will examine how to create a hierarchical set of items using the view. this is a fairly tricky process as it involves keeping track of which items have children and also which rows are open and closed. nesting level every row in the tree has a nesting level. the topmost rows are at level 0, the children of those rows are at level 1, their children at level 2 and so on. the tree will query the view for each row by calling its getlevel method to find out the level of that row. the view will need to return 0 for the outermost rows and higher values for inner rows. the tree w...
... in addition to the getlevel method, there is a hasnextsibling function which, given a row, should return true if there is another row afterwards at the same level. this function is used, specifically, to draw the nesting lines along the side of the tree. ...
...d should return true if a row is an empty container, for instance, a directory with no files in it. the iscontaineropen method is used to determine which items are opened and closed. the view is required to keep track of this. the tree will call this method to determine which containers are open and which are closed. note that the tree will call neither iscontainerempty nor iscontaineropen for rows that are not containers as indicated by the return value of the iscontainer method. a container may be rendered differently than a non-container. for instance, a container may have a folder icon beside it. a style sheet may be used to style items based on various properties such as whether a row is open. this is described in a later section. a non-empty container will be displayed with a twisty ...
...And 10 more matches

NPAPI plugin reference - Archive of obsolete content
the articles below describe each of the apis related to npapi plugins. browser-side plug-in api this chapter describes methods in the plug-in api that are provided by the browser; these allow call back to the browser to request information, tell the browser to repaint part of the window, and so forth. the names of all of these methods begin with npn_ to indicate that they are implemented by the browser and called by the plug-in. np_getmimedescription np_getmimedescription returns a supported mime type list for your plugin. it works on unix (linux) and macos. on windows you have to define supported mimetypes in the dll resource file. np_getvalue allows the browser to query the plug-in for information. np_initialize provides global initialization for a plug-in. np_port contains ...
...ug-in. np_port contains information required by the window field of an npwindow structure. np_shutdown provides global deinitialization for a plug-in. npanycallbackstruct contains information required during embedded mode printing. npapi plug-in side api this chapter describes methods in the plug-in api that are available from the plug-in object; these allow plug-ins to interact with the browser. the names of all of these methods begin with npp_ to indicate that they are implemented by the plug-in and called by the browser. npbyterange represents a particular range of bytes from a stream. npclass npclass is a structure that holds a set of pointers to functions that make up the behavior of an instance of an npclass (i.e. an npobject). npembedprint substructure of npprint that cont...
...ess plug-in. npfullprint substructure of npprint that contains platform-specific information used during full-page mode printing. npidentifier npidentifier is an opaque type used for method and property identifiers, such as strings or integers. npidentifiers are unique, in that for any given string or integer, there is only one npidentifier. the lifetime of npidentifiers is controlled by the browser. npn newstream requests the creation of a new data stream produced by the plug-in and consumed by the browser. npn_createobject allocates a new npobject. npn_destroystream closes and deletes a stream. npn_enumerate gets the names of the properties and methods of the specified npobject. npn_evaluate evaluates a script in the scope of the specified npobject. npn_forceredraw asks the p...
...And 10 more matches

Choosing the right approach - Learn web development
h level of nesting, whereas with promises you can just use a single .catch() block to handle the errors for the entire chain. async callbacks just aren't very graceful. promise callbacks are always called in the strict order they are placed in the event queue; async callbacks aren't. async callbacks lose full control of how the function will be executed when passed to a third-party library. browser compatibility really good general support, although the exact support for callbacks in apis depends on the particular api. refer to the reference documentation for the api you're using for more specific support info. further information introducing asynchronous javascript, in particular async callbacks settimeout() settimeout() is a method that allows you to run a function after an arbi...
...t, in particular async callbacks settimeout() settimeout() is a method that allows you to run a function after an arbitrary amount of time has passed. useful for... single delayed operation repeating operation multiple sequential operations multiple simultaneous operations yes yes (recursive timeouts) yes (nested timeouts) no code example here the browser will wait two seconds before executing the anonymous function, then will display the alert message (see it running live, and see the source code): let mygreeting = settimeout(function() { alert('hello, mr. universe!'); }, 2000) pitfalls you can use recursive settimeout() calls to run a function repeatedly in a similar fashion to setinterval(), using code like this: let i = 1; settimeout(f...
...n. let's say that the code takes 40 milliseconds to run — the interval then ends up being only 60 milliseconds. when your code has the potential to take longer to run than the time interval you’ve assigned, it’s better to use recursive settimeout() — this will keep the time interval constant between executions regardless of how long the code takes to execute, and you won't get errors. ...
...And 10 more matches

Drawing graphics - Learn web development
this article provides an introduction to canvas, and further resources to allow you to learn more. prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn the basics of drawing on <canvas> elements using javascript. ...
...animate (and otherwise manipulate) svg vector images — as they are represented by markup — there was still no way to do the same for bitmap images, and the tools available were rather limited. the web still had no way to effectively create animations, games, 3d scenes, and other requirements commonly handled by lower level languages such as c++ or java. the situation started to improve when browsers began to support the <canvas> element and associated canvas api — apple invented it in around 2004, and other browsers followed by implementing it in the years that followed. as you'll see below, canvas provides many useful tools for creating 2d animations, games, data visualizations, and other types of app, especially when combined with some of the other apis the web platform provides. the...
......
...And 10 more matches

Message manager overview
in multiprocess firefox there are (at least) two processes: the chrome process, also called the parent process, runs the browser ui (chrome) code and code inserted by extensions one or more content processes, also called child processes. these processes run web content. message managers are designed to enable chrome-privileged javascript code in one process to communicate with chrome-privileged javascript code in a different process. this article describes the different types of message manager, how to access them, and at a high level, what sorts of things you can use them for. ...
...de in one process to communicate with chrome-privileged javascript code in a different process. this article describes the different types of message manager, how to access them, and at a high level, what sorts of things you can use them for. at the top level, there are two different sorts of message managers: frame message managers: these enable chrome process code to load a script into a browser frame (essentially, a single browser tab) in the content process. these scripts are called frame scripts, and as the name suggests, they are scoped to a specific browser frame. if chrome code wants to run code in the content process so it can access web content, this is usually the sort of message manager to use. process message managers: these correspond to process boundaries, and enable code...
...ate with the frame script some older articles on multiprocess firefox and the message manager might refer to "content scripts" instead of "frame scripts". this usage is deprecated because the add-on sdk uses "content script" to refer to a similar but different kind of script. so fundamentally, frame message managers enable chrome code to: load a script into a frame (essentially, a single browser tab) in the content process. these scripts are called "frame scripts". communicate with frame scripts using message-passing apis there are various types of frame message managers, as depicted in this diagram: this diagram shows the setup when there are 2 browser windows open, one with 2 tabs open and one with 1 tab open. chrome process in the chrome process, there's a hierarchy of frame...
...And 10 more matches

Initialization and Destruction - Plugins
« previousnext » this chapter describes the methods that provide the basic processes of initialization, instance creation and destruction, and shutdown. initialization: the browser calls the plug-in api function np_initialize when the plug-in code is first loaded. instance creation: the browser calls the plug-in api function npp_new when the instance is created. instance destruction: the plug-in instance is deleted when the user leaves the instance page or closes the instance window; the browser calls the function npp_destroy to tell the plug-in that the instance is being deleted. shutdown: when the last instance of a plug-in is deleted, the plug-in code is unloaded from memory and the browser calls the function np_shutdown. plug-ins consume no resources, other than dis...
...g-in that the instance is being deleted. shutdown: when the last instance of a plug-in is deleted, the plug-in code is unloaded from memory and the browser calls the function np_shutdown. plug-ins consume no resources, other than disk space, if not referenced. this chapter ends with initialize and shutdown example, which includes the np_initialize and np_shutdown methods. initialization the browser calls np_initialize when a plug-in is loaded and before the first instance is created. use this function to allocate the memory and resources shared by all instances of your plug-in. nperror np_initialize(void) { }; after the last plug-in instance is deleted, the browser calls np_shutdown, which releases the memory or resources allocated by np_initialize. for an example that shows the use o...
...he memory and resources shared by all instances of your plug-in. nperror np_initialize(void) { }; after the last plug-in instance is deleted, the browser calls np_shutdown, which releases the memory or resources allocated by np_initialize. for an example that shows the use of both the np_initialize and np_shutdown methods, see initialize and shutdown example. during initialization, when the browser encounters data of a mime type registered for a plug-in (either embedded in an html page or in a separate file), it loads the plug-in code into memory (if it hasn't been loaded already) and creates a new instance of the plug-in. for more information, see registering plug-ins. plug-ins are native code libraries: .dll files on windows, .so or .dso files on unix, and powerpc shared library files ...
...And 10 more matches

Using Service Workers - Web APIs
ts first, thus providing a default experience even when offline, before then getting more data from the network (commonly known as offline first). this is already available with native apps, which is one of the main reasons native apps are often chosen over web apps. ...
...ain reasons native apps are often chosen over web apps. setting up to play with service workers many service workers features are now enabled by default in newer versions of supporting browsers. if however you find that demo code is not working in your installed versions, you might need to enable a pref: firefox nightly: go to about:config and set dom.serviceworkers.enabled to true; restart browser. chrome canary: go to chrome://flags and turn on experimental-web-platform-features; restart browser (note that some features are now enabled by default in chrome.) opera: go to opera://flags and enable support for serviceworker; restart browser. microsoft edge: go to about:flags and tick enable service workers; restart browser. you’ll also need to serve your code via https — service w...
... basic architecture with service workers, the following steps are generally observed for basic set up: the service worker url is fetched and registered via serviceworkercontainer.register(). ...
...And 10 more matches

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
s="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> default rules for auto-placement as you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell. the default flow is to arrange items by row. grid will lay an item out into each cell of row 1. if you have created additional rows using the grid-template-rows property then grid will continue placing items in these rows. if the grid does not have enough rows in the explicit grid to place all of the items new implicit rows will be created. sizing rows in the implicit grid the default for automatically created rows in the implicit grid is for them to be auto-sized. this means that they will contain the content added to them...
...ems in these rows. if the grid does not have enough rows in the explicit grid to place all of the items new implicit rows will be created. sizing rows in the implicit grid the default for automatically created rows in the implicit grid is for them to be auto-sized. this means that they will contain the content added to them without causing an overflow. you can however control the size of these rows with the property grid-auto-rows. ...
...the explicit grid to place all of the items new implicit rows will be created. sizing rows in the implicit grid the default for automatically created rows in the implicit grid is for them to be auto-sized. this means that they will contain the content added to them without causing an overflow. you can however control the size of these rows with the property grid-auto-rows. ...
...And 10 more matches

<img>: The Image Embed element - HTML: Hypertext Markup Language
e of the image, allowing it to take up space before it loads, to mitigate content layout shifts. responsive image hints with sizes and srcset (see also the <picture> element and our responsive images tutorial). supported image formats the html standard doesn't list what image formats to support, so each user agent supports different formats. ...
... to support, so each user agent supports different formats. a complete guide to image formats supported by web browsers is available. below is a list of the image formats that are most commonly used on the web, as well as some older formats that should no longer be used, despite existing content possibly still using them. ...
... image loading errors if an error occurs while loading or rendering an image, and an onerror event handler has been set on the error event, that event handler will get called. this can happen in a number of situations, including: the src attribute is empt...
...And 10 more matches

Firefox user agent string reference - HTTP
. for a breakdown of changes to the string in gecko 2.0, see final user agent string for firefox 4 (blog post). see also this document on user agent sniffing and this hacks blog post. general form the ua string of firefox itself is broken down into four components: mozilla/5.0 (platform; rv:geckoversion) gecko/geckotrail firefox/firefoxversion mozilla/5.0 is the general token that says the browser is mozilla compatible, and is common to almost every browser today. platform describes the native platform the browser is running on (e.g. windows, mac, linux or android), and whether or not it's a mobile phone. firefox os phones simply say "mobile"; the web is the platform. note that platform can consist of multiple "; "-separated tokens. see below for further details and examples. t...
...es simply say "mobile"; the web is the platform. note that platform can consist of multiple "; "-separated tokens. see below for further details and examples. though fixed in firefox 69, previous 32-bit versions of firefox running on 64-bit processors would report that the system is using a 32-bit cpu. rv:geckoversion indicates the release version of gecko (such as "17.0"). ...
... "; "-separated tokens. see below for further details and examples. though fixed in firefox 69, previous 32-bit versions of firefox running on 64-bit processors would report that the system is using a 32-bit cpu. rv:geckoversion indicates the release version of gecko (such as "17.0"). in recent browsers, geckoversion is the same as firefoxversion. gecko/geckotrail indicates that the browser is based on gecko. ...
...And 10 more matches

Autoplay guide for media and Web Audio APIs - Web media technologies
automatically starting the playback of audio (or videos with audio tracks) immediately upon page load can be an unwelcome surprise to users. while autoplay of media serves a useful purpose, it should be used carefully and only when needed. in order to give users control over this, browsers often provide various forms of autoplay blocking. in this guide, we'll cover autoplay functionality in the various media and web audio apis, including a brief overview of how to use autoplay and how to work with browsers to handle autoplay blocking gracefully. autoplay blocking is not applied to <video> elements when the source media does not have an audio track, or if the audio track is muted. media with an active audio track are considered to be audible, and autoplay blocking applies to them. inau...
...autoplay refers to any feature that causes audio to begin to play without the user specifically requesting that playback begin. this includes both the use of html attributes to autoplay media as well as the user of javascript code to start playback outside the context of handling user input. ...
...rowser's autoplay blocking policy: <audio src="/music.mp4" autoplay> and audioelement.play(); the following web features and apis may be affected by autoplay blocking: the html <audio> and <video> elements the web audio api from the user's perspective, a web page or app that spontaneously starts making noise without warning can be jarring, inconvenient, or off-putting. because of that, browsers generally only allow autoplay to occur successfully under specific circumstances. autoplay availability as a general rule, you can assume that media will be allowed to autoplay only if at least one of the following is true: the audio is muted or its volume is set to 0 the user has interacted with the site (by clicking, tapping, pressing keys, etc.) if the site has been whitelisted; this...
...And 10 more matches

XUL Migration Guide - Archive of obsolete content
t of what it needs using the supported apis, then it might still be worth migrating: we'll add more supported apis in future releases to meet important use cases. user interface components xul-based add-ons typically implement a user interface using a combination of two techniques: xul overlays and xul windows. xul overlays xul overlays are used to modify existing windows such as the main browser window. in this way an extension can integrate its user interface into the browser: for example, adding menu items, buttons, and toolbars. because sdk-based extensions are restartless, they can't use xul overlays. to add user interface components to the browser, there are a few different options. in order of complexity, the main options are: the sdk includes modules that implement some b...
...owser, there are a few different options. in order of complexity, the main options are: the sdk includes modules that implement some basic user interface components including buttons, dialogs, and context menu items. there is a collection of community-developed modules that includes various user interface components. by using the sdk's low-level apis you can directly modify the browser chrome. xul windows xul windows are used to define completely new windows to host user interface elements specific to the add-on. the sdk generally expects you to specify your user interface using html, not xul. however, you can include a chrome.manifest file in your add-on and it will be included in the generated xpi. my-addon/ chrome/ content/ locale/ skin/ ...
...ectory you can keep your "content", "locale", and "skin" subdirectories: this allows you to refer to objects in these directories from "chrome.manifest" using a relative path, like "chrome/content". this is provided only as a migration aid, and it's still a good idea to port xul windows to html. content scripts in a xul-based add-on, code that uses xpcom objects, code that manipulates the browser chrome, and code that interacts with web pages all runs in the same context. but the sdk makes a distinction between: add-on scripts, which can use the sdk apis, but are not able to interact with web pages content scripts, which can access web pages, but do not have access to the sdk's apis content scripts and add-on scripts communicate by sending each other json messages: in fact, the ab...
...And 9 more matches

window/utils - Archive of obsolete content
functions for working with browser windows. usage private windows with this module your add-on will see private browser windows even if it has not explicitly opted into private browsing, so you need to take care not to store any user data derived from private browser windows. the exception is the windows() function which returns an array of currently opened windows. private windows will not be included in this list if your add-on has not opted into private browsing. to learn more about private windows, how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. globals functions getmostrecentbrowserwindow() get the topmost browser window, as an nsidomwindow instance. ...
... getinnerid(window) returns the id of the specified window's current inner window. this function wraps nsidomwindowutils.currentinnerwindowid. parameters window : nsidomwindow the window whose inner window we are interested in. returns id: the given window's id. ...
...f the specified window's outer window. this function wraps nsidomwindowutils.outerwindowid. parameters window : nsidomwindow the window whose outer window we are interested in. returns id: the outer window's id. ...
...And 9 more matches

CSS3 - Archive of obsolete content
nt-feature-values at-rule. the control of the automatic generation of an oblique or bold face when none are found via the css font-synthesis property. css basic user interface module level 3 recommendation since june 21st, 2018 adds: the ability to tweak the box model using the css box-sizing property. at risk: due to insufficient browser support, standardization of the padding-box value may be postponed to the next iteration of this module. allow the styling of forms according their content using the css :indeterminate, :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, and :read-write pseudo-classes and the ::value, ::choices, ::repeat-item, and ::repeat-index pseudo-elements. a...
...f the padding-box value may be postponed to the next iteration of this module. allow the styling of forms according their content using the css :indeterminate, :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, and :read-write pseudo-classes and the ::value, ::choices, ::repeat-item, and ::repeat-index pseudo-elements. ...
... support for the css outline-offset property giving more control on the position of the outline. support for the css resize property allowing web authors to control if and how elements should be resized. ...
...And 9 more matches

Images, Tables, and Mysterious Gaps - Archive of obsolete content
the techniques described this article are no longer best practices for web-based development. it is now preferable to use css for layout. however, these techniques may be relevant when the developer cannot assume that users have a modern browser, such as for html-based e-mail messages. almost no matter when you started creating web pages, odds are pretty high you have one or more designs based on the classic "convoluted tables and lots of images" paradigm. whether you've sliced up a logo so it fits in well with the design, or used tons of single-pixel spacer gifs, the principles (and perils) remain largely the same. back in the early days, this approach worked, because browsers would usually make a table cell exactly as wide and tall as an image it contained. fast forward to 2001, ...
...bles and lots of images" paradigm. whether you've sliced up a logo so it fits in well with the design, or used tons of single-pixel spacer gifs, the principles (and perils) remain largely the same. back in the early days, this approach worked, because browsers would usually make a table cell exactly as wide and tall as an image it contained. fast forward to 2001, and the rise of standards-based browsers that lay out pages using html and css instead of their own private layout algorithms. ...
...we start with a simple case, illustrated in figure 1: a one-cell table containing an image. ...
...And 9 more matches

Learn XPI Installer Scripting by Example - Archive of obsolete content
age show the use of the xpinstall api. the majority of this api is now deprecated and as of gecko 1.9 no longer available. extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest. in particular plugin developers should see how to package a plugin as an extension. this article uses the installer script from browser.xpi install package as the basis for discussing xpi installations in general. this installer script is relatively short, but it exercises most of the important features of the xpinstall api, and it can easily be used as a template for other more general software installations. in this article, we use the unix install file, but the installers for all the platforms are quite similar, and you can ...
...atively short, but it exercises most of the important features of the xpinstall api, and it can easily be used as a template for other more general software installations. in this article, we use the unix install file, but the installers for all the platforms are quite similar, and you can easily take what you learn here and apply it to installations on any platform that mozilla supports. about browser.xpi browser.xpi is the xpi archive in which the main components of the mozilla browser are archived for installation. mozilla cross-platform installations use the xpi format as a way to organize, compress, and automate software installations and software updates. a xpi is a pkzip-compressed archive (like zip and jar files) with a special script at the highest level that manages the installatio...
...taller script , usually named install.js, is the subject of this article. first, a quick scan of the contents of the xpi file (which you can open using with any unzip utility) reveals the following high-level directory structure: install.js bin\ chrome\ components defaults\ icons\ plugins\ res\ note that this high-level structure parallels the directory structure of the installed browser very closely: as you will see in the installation script, the contents of the archive are installed onto the file system in much the same way that they are stored in the archive itself, though it's possible to rearrange things arbitrarily upon installation--to create new directories, to install files in system folders and other areas. overview of the install script xpi install scripts are ...
...And 9 more matches

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
avascript engines used server-side and both are from the minds at mozilla: mozilla rhino and mozilla spidermonkey. rhino is a javascript interpreter written in java that can also bridge javascript to java server-side. steve yegge of google has been doing interesting work with this engine. spidermonkey on the other hand is the javascript engine (written in c) in the highly popular mozilla firefox browser. spidermonkey is what will evolve to become tracemonkey. in addition, the jaxer “ajax server” (a project i work on at aptana) is an example of ssjs that uses not only spidermonkey, but also embeds the entire firefox browser engine in the application server such that you can do server-side dom manipulation and other ajaxy things server-side that rhino was not built to do. ...
...ool to the developer. however, taking advantage of frameworks such as aptana jaxer (spidermonkey) and helma (rhino) can reveal even greater rewards as a great deal of work has already been done for you. all you need to do is implement the javascript. let’s take a closer look on the spidermonkey side with jaxer. ...
...tated earlier, aptana jaxer is built using the mozilla browser engine engine that powers mozilla firefox, which includes spidermonkey as its javascript interpreter, but lots more features beyond ssjs alone such as dom, db, file io, css, server sessions, e4x, etc...] this is a great advantage to the developer as it presents a consistent server-side and client-side development environment for both browser and server contexts that is centered on open source and web standards. also since you know which engine you're targeting, you're free to confidently use advanced built in controls such as xml processing via e4x, xpath, and xslt. let's take a tour through some of the top features of jaxer through code examples. ...
...And 9 more matches

Common causes of memory leaks in extensions - Extensions
these leaks, as the fix causes many add-ons which would have otherwise caused a leak to instead throw errors when attempting to access nodes from documents which no longer exist. storing references to window objects and dom nodes the most common problem is extensions holding onto references to content windows for too long. for example, in xul overlay code: var contentwindows = []; function inbrowserxuloverlay(contentwindow) { // forgetting or failing to pop the content window thing again contentwindows.push(contentwindow); } this will keep the content window compartments alive until the browser window is closed. users often only open a single browser window per session and use tabs, in which case the leaked compartments will live for the whole life of the session. a similar problem ...
...o dom nodes in foreign document should instead be stored in an object which is specific to that document, and cleaned up when the document is unloaded, or stored as weak references. be careful with setinterval/settimeout using window.setinterval() or window.settimeout() can be problematic, too, when it comes to zombie compartments. ...
...document should instead be stored in an object which is specific to that document, and cleaned up when the document is unloaded, or stored as weak references. be careful with setinterval/settimeout using window.setinterval() or window.settimeout() can be problematic, too, when it comes to zombie compartments. ...
...And 9 more matches

Audio for Web games - Game development
audio is an important part of any game; it adds feedback and atmosphere. web-based audio is maturing fast, but there are still many browser differences to navigate. we often need to decide which audio parts are essential to our games' experience and which are nice to have but not essential, and devise a strategy accordingly. this article provides a detailed guide to implementing audio for web games, looking at what works currently across as wide a range of platforms as possible. mobile audio caveats by far the most difficult platforms to provide web audio support for are mobile platforms. ...
...provides a detailed guide to implementing audio for web games, looking at what works currently across as wide a range of platforms as possible. mobile audio caveats by far the most difficult platforms to provide web audio support for are mobile platforms. unfortunately these are also the platforms that people often use to play games. there are a couple of differences between desktop and mobile browsers that may have caused browser vendors to make choices that can make web audio difficult for game developers to work with. let's look at these now. autoplay browser autoplay policy now affects desktop and mobile browsers. there is further information about it here from the google developers site. it is worth noting that autoplay with sound is allowed if: the user has interacted with the do...
...this means you will have to structure your audio playback to take account of that. ...
...And 9 more matches

Flexbox - Learn web development
previous overview: css layout next flexbox is a one-dimensional layout method for laying out items in rows or columns. items flex to fill additional space and shrink to fit into smaller spaces. this article explains all the fundamentals. prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css.) objective: to learn how to use the flexbox layout system to create web layouts. why flexbox? for a long time, the only reliable cross browser-compatible tools available for creating css layouts were things like floats and positioning. these are fine and they work, but in some ways they are also rather limiting and frustrating. the following simple layout requirements are either difficult or impossible to...
...f content. as you'll see in subsequent sections, flexbox makes a lot of layout tasks much easier. let's dig in! introducing a simple example in this article we are going to get you to work through a series of exercises to help you understand how flexbox works. to get started, you should make a local copy of the first starter file — flexbox0.html from our github repo — load it in a modern browser (like firefox or chrome), and have a look at the code in your code editor. you can see it live here also. you'll see that we have a <header> element with a top level heading inside it, and a <section> element containing three <article>s. we are going to use these to create a fairly standard three column layout. specifying what elements to lay out as flexible boxes to start with, we need to...
...n in more detail what this means. note also that you can use a display value of inline-flex if you wish to lay out an element's children as flex items, but have that element behave like an inline element. the flex model when elements are laid out as flex items, they are laid out along two axes: the main axis is the axis running in the direction the flex items are being laid out in (e.g. as rows across the page, or columns down the page.) the start and end of this axis are called the main start and main end. the cross axis is the axis running perpendicular to the direction the flex items are being laid out in. the start and end of this axis are called the cross start and cross end. the parent element that has display: flex set on it (the <section> in our example) is called the flex con...
...And 9 more matches

Responsive design - Learn web development
quisites: html basics (study introduction to html), and an idea of how css works (study css first steps and css building blocks.) objective: to understand the fundamental concepts and history of responsive design. historic website layouts at one point in history you had two options when designing a website: you could create a liquid site, which would stretch to fill the browser window or a fixed width site, which would be a fixed size in pixels. these two approaches tended to result in a website that looked its best on the screen of the person designing the site! the liquid site resulted in a squashed design on smaller screens (as seen below) and unreadably long line lengths on larger ones. note: see this simple liquid layout: example, source code. when viewi...
... site, which would be a fixed size in pixels. these two approaches tended to result in a website that looked its best on the screen of the person designing the site! the liquid site resulted in a squashed design on smaller screens (as seen below) and unreadably long line lengths on larger ones. note: see this simple liquid layout: example, source code. when viewing the example, drag your browser window in and out to see how this looks at different sizes. the fixed-width site risked a horizontal scrollbar on screens smaller than the site width (as seen below), and lots of white space at the edges of the design on larger screens. note: see this simple fixed-width layout: example, source code. again, observe the result as you change the browser window size. note: the screenshot...
...rm to make designing responsive sites easier. the rest of this article will point you to the various web platform features you might want to use when creating a responsive site. media queries responsive design was only able to emerge due to the media query. the media queries level 3 specification became a candidate recommendation in 2009, meaning that it was deemed ready for implementation in browsers. media queries allow us to run a series of tests (e.g. whether the user's screen is greater than a certain width, or a certain resolution) and apply css selectively to style the page appropriately for the user's needs. for example, the following media query tests to see if the current web page is being displayed as screen media (therefore not a printed document) and the viewport is at least 8...
...And 9 more matches

What is a URL? - Learn web development
ators (urls), explaining what they are and how they're structured. prerequisites: you need to first know how the internet works, what a web server is and the concepts behind links on the web. objective: you will learn what a url is and how it works on the web. summary with hypertext and http, url is one of the key concepts of the web. it is the mechanism used by browsers to retrieve any published resource on the web. url stands for uniform resource locator. a url is nothing more than the address of a given unique resource on the web. in theory, each valid url points to a unique resource. such resources can be an html page, a css document, an image, etc. in practice, there are some exceptions, the most common being a url pointing to a resource that no longer e...
...b server, it is up to the owner of the web server to carefully manage that resource and its associated url. active learning there is no active learning available yet. deeper dive basics: anatomy of a url here are some examples of urls: https://developer.mozilla.org https://developer.mozilla.org/docs/learn/ https://developer.mozilla.org/search?q=url any of those urls can be typed into your browser's address bar to tell it to load the associated page (resource). a url is composed of different parts, some mandatory and others optional. let's see the most important parts using the following url: http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#somewhereinthedocument http is the protocol. the first part of the url indicates which protocol the browser must use. a p...
... www.example.com is the domain name. ...
...And 9 more matches

What’s in the head? Metadata in HTML - Learn web development
it contains information such as the page <title>, links to css (if you choose to style your html content with css), links to custom favicons, and other metadata (data about the html, such as the author, and important keywords that describe the document.) in this article we'll cover all of the above and more, in order to give you a good basis for working with markup. prerequisites: basic html familiarity, as covered in getting started with html. ...
...instead, the head's job is to contain metadata about the document. in the above example, the head is quite small: <head> <meta charset="utf-8"> <title>my test page</title> </head> in larger pages however, the head can get quite full. try going to some of your favorite websites and use the developer tools to check out their head contents. ...
...t's get started. adding a title we've already seen the <title> element in action — this can be used to add a title to the document. this however can get confused with the <h1> element, which is used to add a top level heading to your body content — this is also sometimes referred to as the page title. ...
...And 9 more matches

From object to iframe — other embedding technologies - Learn web development
, and <iframe>, like flash movies and other webpages. a short history of embedding a long time ago on the web, it was popular to use frames to create websites — small parts of a website stored in individual html pages. these were embedded in a master document called a frameset, which allowed you to specify the area on the screen that each frame filled, rather like sizing the columns and rows of a table. these were considered the height of coolness in the mid to late 90s, and there was evidence that having a webpage split up into smaller chunks like this was better for download speeds — especially noticeable with network connections being so slow back then. they did however have many problems, which far outweighed any positives as network speeds got faster, so you don't see them bei...
...eful thinking. let's explore the code in a bit more detail. ...
...0 removes the border. using this isn't really recommended any more, as the same effect can be better achieved using border: none; in your css. ...
...And 9 more matches

Fetching data from the server - Learn web development
ajax), because it tended to use xmlhttprequest to request xml data. this is normally not the case these days (you'd be more likely to use xmlhttprequest or fetch to request json), but the result is still the same, and the term "ajax" is still often used to describe the technique. the ajax model involves using a web api as a proxy to more intelligently request data rather than just having the browser reload the entire page. let's think about the significance of this: go to one of your favorite information-rich sites, like amazon, youtube, cnn, etc., and load it. now search for something, like a new product. the main content will change, but most of the surrounding information, like the header, footer, navigation menu, etc., will stay the same. this is a really good thing because: p...
...cation, we'd be more likely to use a server-side language like php, python, or node to request our data from a database. here, however, we want to keep it simple and concentrate on the client-side part of this. xmlhttprequest xmlhttprequest (which is frequently abbreviated to xhr) is a fairly old technology now — it was invented by microsoft in the late '90s, and has been standardized across browsers for quite a long time. to begin this example, make a local copy of ajax-start.html and the four text files — verse1.txt, verse2.txt, verse3.txt, and verse4.txt — in a new directory on your computer. in this example, we will load a different verse of the poem (which you may well recognize) via xhr when it's selected in the drop-down menu. just inside the <script> element, add th...
... 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. this is because of security restrictions (for more on web security, read website security). to get around this, we need to test the example by running it through a local web server. to find out how to do this, read how do you set up a local testing server? fetch the fetch api is basically a modern replacement for xhr; ...
...And 9 more matches

Communicating with frame scripts
e message manager's addmessagelistener() api. the message passed to the listener is an object containing the following properties: name string containing the message name. sync boolean declaring whether the message was send synchronously or aynchronously. data the json object passed as the second parameter to sendasyncmessage(). target the xul <browser> element from which this message was sent. objects an object whose properties are any cpows exposed by the sender as the third argument to sendasyncmessage() in the example below the listener just logs all the messages details: // chrome script messagemanager.addmessagelistener("my-addon@me.org:my-e10s-extension-message", listener); function listener(message) { console.lo...
... synchronous messaging to send a sync...
...message.name); console.log(message.sync); console.log(message.data); console.log(message.target); console.log(message.objects); } so combining this message listener with the message above will give console output somewhat like this, when the user clicks a <div>: "my-addon@me.org:my-e10s-extension-message" false object { details: "they clicked", tag: "div" } <xul:browser anonid="initialbrowser" ... > { target: <div#searchcontainer> } if your code requires access to a window (for example to run window.opendialog), and your message listener is run from somewhere without access to a window (e.g. an xpcom component), you can access the window of the browser that sent the message with message.target.ownerdocument.defaultview. synchronous messaging to send a synchronous message, the fr...
...And 9 more matches

MathML Accessibility in Mozilla
start, a over b, end of fraction, end of root c plus d root of fraction start. a over b. fraction end. root end. a numerator b denominator fraction base c + d root-index root ab __________ the b root of a __________ b root of a, end of root b root of a. root end. a base b root index root abcdef __________ table with 2 rows and 3 columns row 1 column 1 a column 2 b column 3 c row 2 column 1 d column 2 e column 3 f end table __________ table start, row 1, column 1, a, row 1, column 2, b, row 1, column 3, c, row 2, column 1, d, row 2, column 2, e, row 2, column 3, f, table end math table with 2 rows 3 columns. row 1. a. b. ...
... 3 f end table __________ table start, row 1, column 1, a, row 1, column 2, b, row 1, column 3, c, row 2, column 1, d, row 2, column 2, e, row 2, column 3, f, table end math table with 2 rows 3 columns. row 1. a. b. c. row 2. d. e. f. table end. a column 1 row 1 b column 2 c column 3 d column 1 row 2 e column 2 f column 3 math table with 3 columns and 2 rows abcde __________ multi-scripts with base a and 1 prescript and 1 post-script pre-scripts lower d upper e post-scripts lower b upper c end multi-scripts __________ not supported yet. see bug 1176983 and webkit's bug 146454 a. pre-subscript d pre-superscript e subscript b.superscript...
... cap d of d x d y __________ ∬, subscript d, dxdy webkit's bug 146505 double integral. subscript d. d x d y torture test 18: f ( x ) = { 1 / 3 if 0 ≤ x ≤ 1 ; 2 / 3 if 3 ≤ x ≤ 4 ; 0 elsewhere. ...
...And 9 more matches

Bytecode Descriptions
ately preceding jsop::getname or jsop::getgname instruction! this is how we implement typeof step 2, making typeof nonexistingvariable return "undefined" instead of throwing a referenceerror. in a global scope: typeof x compiles to getgname "x"; typeof. typeof (0, x) compiles to getgname "x"; typeofexpr. emitting the same bytecode for these two expressions would be a bug. per spec, the latter throws a referenceerror if x doesn't exist. format: jof_ic pos stack: val ⇒ (+val) the unary + operator. +val doesn't do any actual math. it just calls tonumber(val). the conversion can call .tostring()/.valueof() methods and can throw. the result on success is always a number. (per spec, unary - supports bigints, but unary + does not.) format: jof_ic neg stack: val ⇒ (-val) the unary - operat...
...lt, gt, le, ge stack: lval, rval ⇒ (lval op rval) relative operators (<, >, <=, >=). pop two values, compare them, and push the boolean result. the comparison may perform conversions that call .tostring()/.valueof() methods and can throw. implements: relational operators: evaluation. format: jof_ic instanceof stack: value, target ⇒ (value instanceof target) the instanceof operator. this throws a typeerror if target is not an object. it calls target[symbol.hasinstance](value) if the method exists. on success, the result is always a boolean value. format: jof_ic in stack: id, obj ⇒ (id in obj) the in operator. push true if obj has a property with the key id. otherwise push false. this throws a typeerror if obj is not an object. this can fire proxy hooks and can throw. on success, th...
...he conversion can call .tostring()/.valueof() methods and can throw. on success, the result is always numeric. format: jof_ic pow stack: lval, rval ⇒ (lval ** rval) the exponentiation operator (**). pop two values, convert them to numeric values, do exponentiation, and push the result. the top value is the exponent. the conversion can call .tostring()/.valueof() methods and can throw. this throws a rangeerror if both values are bigints and the exponent is negative. format: jof_ic conversions topropertykey stack: propertynamevalue ⇒ propertykey convert a value to a property key. implements: topropertykey, except that if the result would be the string representation of some integer in the range 0..2^31, we push the corresponding int32 value instead. this is because the spec insists t...
...And 9 more matches

Using XPCOM Components
« previousnext » one of the best ways to begin working with xpcom - especially when you are designing the interface to a component that will be used by others, as we do in starting weblock - is to look at how clients are already using xpcom components. applications like the mozilla browser are sophisticated, modularized clients of xpcom components. in fact, virtually all of the functionality that you associate with a browser - navigation, window management, managing cookies, bookmarks, security, searching, rendering, and other features - is defined in xpcom components and accessed by means of those component interfaces. mozilla is made of xpcom components. this chapter demonstrates how mozilla uses some of these xpcom objects, such as the cookiemanager, and shows how access ...
...monstrates how mozilla uses some of these xpcom objects, such as the cookiemanager, and shows how access to the weblock component will be defined. component examples you can find out more about how you can use the particular components described here in the xpcom api reference. for now, what's important to see is how components like the ones in this section are obtained and used by the mozilla browser. cookie manager cookie management is one of the many sets of functionality that is made available to the browser in the form of an xpcom component and that can be reused by developers who want similar functionality in their applications. whenever a user accesses the cookie manager dialog to view, organize, or remove cookies that have been stored on the system, they are using the cookiemanager...
... user interface uses javascript that has been given access to xpcom components in the application core with a technology called xpconnect. xpconnect allows interface methods defined via xpidl to be called from javascript, as part of javascript objects that represent instances of components like the cookiemanager. xpconnect is what binds the application code to the user interface of the mozilla browser, to other gecko-based xul, and to javascript environments like xpcshell, which is a command-line javascript interpreter and xpcom tool is built with mozilla. see http://www.mozilla.org/scriptable/ for more information about xpconnect and javascript. this isn't quite all there is to it, of course, but this shows an important aspect of xpcom. the contractual arrangements that xpcom enforces op...
...And 9 more matches

nsIHttpServer
maryport } } } reference : mozilla-release/netwerk/test/httpserver/nsihttpserver.idl [scriptable, uuid(cea8812e-faa6-4013-9396-f9936cbb74ec)] interface nsihttpserver : nsisupports { /** * starts up this server, listening upon the given port. ...
...ver/nsihttpserver.idl [scriptable, uuid(cea8812e-faa6-4013-9396-f9936cbb74ec)] interface nsihttpserver : nsisupports { /** * starts up this server, listening upon the given port. * * @param port * the port upon which listening should happen, or -1 if no specific port is * desired * @throws ns_error_already_initialized * if this server is already started * @throws ns_error_not_available * if the server is not started and cannot be started on the desired port * (perhaps because the port is already in use or because the process does * not have privileges to do so) * @note * behavior is undefined if this method is called after stop() has been * called on this but before the provided callback function has been * called. */ ...
...n has been * called. */ void start(in long port); /** * shuts down this server if it is running (including the period of time after * stop() has been called but before the provided callback has been called). * * @param callback * an asynchronous callback used to notify the user when this server is * stopped and all pending requests have been fully served * @throws ns_error_null_pointer * if callback is null * @throws ns_error_unexpected * if this server is not running */ void stop(in nsihttpserverstoppedcallback callback); /** * associates the local file represented by the string file with all requests * which match request. * * @param path * the path which is to be mapped to the given file; must begin with "/" and ...
...And 9 more matches

Background Tasks API - Web APIs
the cooperative scheduling of background tasks api (also referred to as the background tasks api or simply the requestidlecallback() api) provides the ability to queue tasks to be executed automatically by the user agent when it determines that there is free time to do so. concepts and usage the main thread of a web browser is centered around its event loop. this code draws any pending updates to the document currently being displayed, runs any javascript code the page needs to run, accepts events from input devices, and dispatches those events to the elements that should receive them. in addition, the event loop handles interactions with the operating system, updates to the browser's own user interface, and so forth. it's an extremely busy chunk of code, and your main javascript ...
...es, it's important for your code to be a good citizen of the web and help to prevent stalls in the execution of the event loop. in the past, there's been no way to do this reliably other than by writing code that's as efficient as possible and by offloading as much work as possible to workers. window.requestidlecallback() makes it possible to become actively engaged in helping to ensure that the browser's event loop runs smoothly, by allowing the browser to tell your code how much time it can safely use without causing the system to lag. if you stay within the limit given, you can make the user's experience much better. getting the most out of idle callbacks because idle callbacks are intended to give your code a way to cooperate with the event loop to ensure that the system is utilized to i...
... know how often your callback will be run (unless you specify a timeout. there's no guarantee that every pass through the event loop (or even every screen update cycle) will include any idle callbacks being executed; if the event loop uses all available time, you're out of luck (again, unless you've used a timeout). idle callbacks should do their best not to overrun the time allotted. while the browser, your code, and the web in general will continue to run normally if you go over the specified time limit (even if you go way over it), the time restriction is intended to ensure that you leave the system enough time to finish the current pass through the event loop and get on to the next one without causing other code to stutter or animation effects to lag. currently, timeremaining() has an upp...
...And 9 more matches

Basic concepts - Web APIs
because it lets you create web applications with rich query abilities regardless of network availability, these applications can work both online and offline. indexeddb is useful for applications that store a large amount of data (for example, a catalog of dvds in a lending library) and applications that don't need persistent internet connectivity to work (for example, mail clients, to-do lists, and notepads). about this document this introduction discusses essential concepts and terminology in indexeddb. it gives you the big picture and explains key concepts. ...
...the design and structure of indexeddb, see big concepts. to learn more about indexeddb terms, see the definitions section. for a detailed tutorial on how to use the api, see using indexeddb. for the reference documentation on the indexeddb api, refer back to the main indexeddb api article and its subpages, which document the types of objects used by indexeddb. for more information on how the browser handles storing your data in the background, read browser storage limits and eviction criteria. overview of indexeddb indexeddb lets you store and retrieve objects that are indexed with a "key." all changes that you make to the database happen within transactions. like most web storage solutions, indexeddb follows a same-origin policy. so while you can access stored data within a domain, you...
...ng you do in indexeddb always happens in the context of a transaction. the indexeddb api provides lots of objects that represent indexes, tables, cursors, and so on, but each of these is tied to a particular transaction. thus, you cannot execute commands or open cursors outside of a transaction. transactions have a well-defined lifetime, so attempting to use a transaction after it has completed throws exceptions. also, transactions auto-commit and cannot be committed manually. this transaction model is really useful when you consider what might happen if a user opened two instances of your web app in two different tabs simultaneously. without transactional operations, the two instances could interfere with each other's modifications. if you are not familiar with transactions in a database, ...
...And 9 more matches

Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
flexbox is very well supported across modern browsers, however there are a few issues that you might run into. in this guide we will look at how well flexbox is supported in browsers, and look at some potential issues, resources and methods for creating workarounds and fallbacks. the history of flexbox as with all css specifications the flexbox specification went through a large number of changes before it became the candidate recommendation that we have today. as a candidate recommendation we should not see large changes at this point to the spec, however this has not been the case with past flexbox iterations. flexbox was implemented in an experimental way in several web browsers. at the time the method of creating experimental implementations was to use a vendor prefix. the idea of thes...
...the idea was not to use the experimental implementations in production code. ...
...ked quite different. to create a flex container you would use display: box and there were a number of box-* properties, which did things that you will recognise from flexbox today. there was an update to the spec that updated the syntax to display: flexbox — this was again vendor-prefixed. ultimately the specification was updated to define display: flex as the way to create a flex container. ...
...And 9 more matches

Viewport concepts - CSS: Cascading Style Sheets
this article explains the concept of the viewport — what it is, its impact in terms of css, svg, and mobile devices — and differentiates between the visual viewport and the layout viewport. what is a viewport? a viewport represents the area in computer graphics being currently viewed. in web browser terms, it is generally the same as the browser window, excluding the ui, menu bar, etc. that is, the part of the document you are viewing. documents like this article may be very long. your viewport is everything that is currently visible, notably, the "what is a viewport section", and perhaps some of the navigation menu. the size of the viewport depends on the size of the screen, whether the browser is in fullscreen mode or not, and whether or not the user zoomed in. content outside the vi...
...enu. the size of the viewport depends on the size of the screen, whether the browser is in fullscreen mode or not, and whether or not the user zoomed in. content outside the viewport, such as the see also section in this document, is likely to not be visible onscreen until scrolled into view. on larger monitors where applications aren't necessarily full screen, the viewport is the size of the browser window. on most mobile devices and when the browser is in fullscreen mode, the viewport is the entire screen. in fullscreen mode, the viewport is the device screen, the window is the browser window, which can be as big as the viewport or smaller, and the document is the website, which can be much taller or wider than the viewport. to recap, the viewport is basically the part of the document...
...00 */ window.outerheight /* 900 */ there are several dom properties that can help you query viewport size, and other similar lengths: the document element's element.clientwidth is the inner width of a document in css pixels, including padding (but not borders, margins, or vertical scrollbars, if present). this is the viewport width. ...
...And 9 more matches

background-size - CSS: Cascading Style Sheets
it's stretched to the specified dimension. the unspecified dimension is computed using the image's corresponding intrinsic dimension, if there is one. if there is no such intrinsic dimension, it becomes the corresponding dimension of the background positioning area. note: background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all browsers. be careful about relying on the behavior described above, and test in multiple browsers to be sure the results are acceptable. working with gradients if you use a <gradient> as the background and specify a background-size to go with it, it's best not to specify a size that uses a single auto component, or is specified using only a width value (for example, background-size: 50%). rendering ...
...ure the results are acceptable. working with gradients if you use a <gradient> as the background and specify a background-size to go with it, it's best not to specify a size that uses a single auto component, or is specified using only a width value (for example, background-size: 50%). rendering of <gradient>s in such cases changed in firefox 8, and at present is generally inconsistent across browsers, which do not all implement rendering in full accordance with the css3 background-size specification and with the css3 image values gradient specification. .gradient-example { width: 50px; height: 100px; background-image: linear-gradient(blue, red); /* not safe to use */ background-size: 25px; background-size: 50%; background-size: auto 50px; background-size: auto 50%; /* ...
... formal definition initial valueauto autoapplies toall elements. it also applies to ::first-letter and ::first-line.inheritednopercentagesrelative to the background positioning areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimat...
...And 9 more matches

grid - CSS: Cascading Style Sheets
note: you can only specify the explicit or the implicit grid properties in a single grid declaration. the sub-properties you don’t specify are set to their initial value, as normal for shorthands. also, the gutter properties are not reset by this shorthand. ...
...properties in a single grid declaration. the sub-properties you don’t specify are set to their initial value, as normal for shorthands. also, the gutter properties are not reset by this shorthand. ...
...umns grid-auto-flow grid-auto-rows grid-template-areas grid-template-columns grid-template-rows syntax /* <'grid-template'> values */ grid: none; grid: "a" 100px "b" 1fr; grid: [linename1] "a" 100px [linename2]; grid: "a" 200px "b" min-content; grid: "a" minmax(100px, max-content) "b" 20%; grid: 100px / 200px; grid: minmax(400px, min-content) / repeat(auto-fill, 50px); /* <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? values */ grid: 200px / auto-flow; grid: 30% / auto-flow dense; grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px; grid: [line1] minmax(20em, max-content) / auto-flow dense 40%; /* [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'> values */ grid: auto-flow / 200px; grid: auto-flow dense / 30%; grid: auto-fl...
...And 9 more matches

Live streaming web audio and video - Developer guides
more generally tv and radio programmes that are output live. often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. this is a fairly complex and nascent subject with a lot of variables, so in this article, we'll introduce you to the subject and let you know how you can get started. the key consideration when streaming media to a browser is the fact that rather than playing a finite file we are relaying a file that is being created on the fly and has no pre-determined start or end. key differences between streamed and static media in this case, we are using static media to describe media that is represented by a file, whether it be an mp3 or webm file. this file sits on a server and can be delivered — like most other files ...
...ct that rather than playing a finite file we are relaying a file that is being created on the fly and has no pre-determined start or end. key differences between streamed and static media in this case, we are using static media to describe media that is represented by a file, whether it be an mp3 or webm file. this file sits on a server and can be delivered — like most other files — to the browser. this is often known as a progressive download. live streamed media lacks a finite start and end time as rather than a static file, it is a stream of data that the server passes on down the line to the browser and is often adaptive (see below). usually, we require different formats and special server-side software to achieve this. adaptive streaming one of the main priorities for live stream...
...pted), rtmps (secure over ssl/tls) and rtmpt (encapsulated within http requests). rtsp real time streaming protocol (rtsp) controls media sessions between endpoints and is often used together with real-time transport protocol (rtp) and with real-time control protocol (rtcp) for media stream delivery. using rtp with rtcp allows for adaptive streaming. ...
...And 9 more matches

<input type="url"> - HTML: Hypertext Markup Language
ject, please clone https://github.com/mdn/interactive-examples and send us a pull request. the input value is automatically validated to ensure that it's either empty or a properly-formatted url before the form can be submitted. the :valid and :invalid css pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid url or not. on browsers that don't support inputs of type url, a url input falls back to being a standard text input. value a domstring representing a url, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value, selectionend, selectiondirection ...
...ag is specified when compiling the regular expression, so that the pattern is treated as a sequence of unicode code points, instead of as ascii. no forward slashes should be specified around the pattern text. if the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely. tip: use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. you should also include other explanatory text nearby. see the section pattern validation for details and an example. placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. it should be a word or short phrase that de...
... setting or other factors. an input field can have spell checking enabled if it doesn't have the readonly attribute set and is not disabled. the value returned by reading spellcheck may not reflect the actual state of spell checking within a control, if the user agent's preferences override the setting. non-standard attributes the following non-standard attributes are also available on some browsers. as a general rule, you should avoid using them unless it can't be helped. attribute description autocorrect a string indicating whether or not autocorrect is on or off. safari only. mozactionhint a string indicating the type of action that will be taken when the user presses the enter or return key while editing the field; this is used to determine an ...
...And 9 more matches

Link types - HTML: Hypertext Markup Language
<a>, <area> <link>, <form> canonical from wikipedia, the free encyclopedia: canonical_link_element a canonical link element is an html element that helps webmasters prevent duplicate content issues by specifying the "canonical" or "preferred" version of a web page as part of search engine optimization. <link> <a>, <area>, <form> dns-prefetch hints to the browser that a resource is needed, allowing the browser to do a dns lookup and protocol handshaking before a user clicks the link. <link> <a>, <area>, <form> external indicates that the hyperlink leads to a resource outside the site of the current page; that is, following the link will make the user leave the site. <a>, <area>, <form> <link> first indicates that th...
...ds to a resource giving further help about the parent of the element, and its descendants. if the element is <link> it indicates that the hyperlink leads to a resource giving further help about the page as a whole. <a>, <area>, <form>, <link> none. icon defines a resource for representing the page in the user interface, usually an icon (auditory or visual). ...
...ment is <link> it indicates that the hyperlink leads to a resource giving further help about the page as a whole. <a>, <area>, <form>, <link> none. icon defines a resource for representing the page in the user interface, usually an icon (auditory or visual). in the browser, it is usually referred to as the favicon. if there are multiple <link rel="icon">s, the browser uses their media, type, and sizes attributes to select the most appropriate icon. if several icons are equally appropriate, the last one is used. if the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on. note: apple's ios does not use this link type, nor the sizes att...
...And 9 more matches

Types of attacks - Web security
which allows an attacker to inject into a website malicious client-side code. this code is executed by the victims and lets the attackers bypass access controls and impersonate users. according to the open web application security project, xss was the seventh most common web app vulnerability in 2017. these attacks succeed if the web app does not employ enough validation or encoding. the user's browser cannot detect the malicious script is untrustworthy, and so gives it access to any cookies, session tokens, or other sensitive site-specific information, or lets the malicious script rewrite the html content. cross-site scripting attacks usually occur when 1) data enters a web app through an untrusted source (most often a web request) or 2) dynamic content is sent to a web user without being v...
...te-specific information, or lets the malicious script rewrite the html content. cross-site scripting attacks usually occur when 1) data enters a web app through an untrusted source (most often a web request) or 2) dynamic content is sent to a web user without being validated for malicious content. the malicious content often includes javascript, but sometimes html, flash, or any other code the browser can execute. the variety of attacks based on xss is almost limitless, but they commonly include transmitting private data like cookies or other session information to the attacker, redirecting the victim to a webpage controlled by the attacker, or performing other malicious operations on the user's machine under the guise of the vulnerable site. xss attacks can be put into three categories: st...
... or performing other malicious operations on the user's machine under the guise of the vulnerable site. xss attacks can be put into three categories: stored (also called persistent), reflected (also called non-persistent), or dom-based. stored xss attacks the injected script is stored permanently on the target servers. ...
...And 9 more matches

Miscellaneous - Archive of obsolete content
mproving this situation by providing a simple method to restart the application. example for firefox: services.startup.quit(services.startup.eforcequit|services.startup.erestart); mouse and keyboard detecting mouse wheel events when scrolling the mouse wheel on an element, the dommousescroll event fires. event.detail contains the number of lines to scroll. this event is mozilla-only; other browsers may support window.onmousewheel. <div id="scrollarea" style="overflow: scroll; height: 6em; width: 10em;"> this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scrolling area. this is the scro...
...it also ...
...erfaces.nsidomwindowutils); utils.sendmouseevent("mousedown", 10, 10, 0, 1, 0); utils.sendmouseevent("mouseup", 10, 10, 0, 1, 0); getting the currently selected text from browser.xul overlay context: var selectedtext = document.commanddispatcher.focusedwindow.getselection().tostring(); or: content.getselection(); // |window| object is implied; i.e., window.content.getselection() or: getbrowserselection(); // |window| object is implied; i.e., window.getbrowserselection() this final option massages the selection to remove leading and trailing whitespace. it also collapses consecutive whitespaces into a single whitespace, and returns at most 150 characters, making it ideal to display text in context menus. it is defined at //github.com/realityripple/pale-moon/blob/master/palemoon/base...
...And 8 more matches

Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
indow while you can use javascript to get child windows opened from the parent window, you cannot get dialogs or windows that have no relation to that window. to overcome this limitation, nsiwindowmediator makes it possible to access all of firefox's windows. get active window one thing that nsiwindowmediator is often used for is to get the active window. listing 4 shows how to get the active browser window and the number of open tabs. passing the name of the window type as the parameter of the nsiwindowmediator.getmostrecentwindow() method returns the most recently active window from among the root element's windows with that type set for the windowtype attribute value. setting the parameter to null returns the active window from among all windows, including dialogs, etc. listing 4: get ...
...w and the number of open tabs. passing the name of the window type as the parameter of the nsiwindowmediator.getmostrecentwindow() method returns the most recently active window from among the root element's windows with that type set for the windowtype attribute value. setting the parameter to null returns the active window from among all windows, including dialogs, etc. ...
... windowtype attribute value. setting the parameter to null returns the active window from among all windows, including dialogs, etc. ...
...And 8 more matches

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
nt [sic] of redundant <font> tags inside every cell was probably enough to double file size. my initial attempts at the markup and css for the wired news design eliminated the majority of our tables, but left one master table to control the primary columns of each page. that approach meant that the content of every column would have to be loaded and calculated before it would be rendered in the browser window. that wasn't good enough. around that time, i started discovering great sites like glish.com and bluerobot.com. both presented and documented viable means of producing multi-column layouts without a single table. despite some initial setbacks with those approaches due to our own unique scenarios, it wasn't long before i discovered a variation of one of their methods that worked for the w...
...or two weeks, and finally narrowed in on positioned divs as the choice for wired news. why did you choose positioning over floats? floats had a few disadvantages from my perspective. one was the required order of content within generic markup. for wired news, the center (or main) column usually contains the most important content for each page. i wanted center column content to appear first in browsers that got the un-styled version. with floats, either the left column or the right column always had to be drawn first. for sites that rely on a left or right column for primary navigation, this content order requirement of float usage may produce desired and advantageous behavior. i also found a lot of trouble ensuring a consistent vertical start position of columns using floats. two column la...
...wn first. for sites that rely on a left or right column for primary navigation, this content order requirement of float usage may produce desired and advantageous behavior. i also found a lot of trouble ensuring a consistent vertical start position of columns using floats. two column layouts using floats seemed easy. but adding a third column to the mix created too many width variables for some browsers to dynamically calculate a total. resizing the browser window often resulted in one column getting pushed to the bottom of another. using absolute positioning for left and right columns allowed the markup for each column to fall in any order. there are some technicalities in the order of our markup and some ad units that would require too much to cover here. but positioning did allow the cent...
...And 8 more matches

More Tree Features - Archive of obsolete content
« previousnext » here, we'll see more features of trees. hierarchical trees the tree element is also used to create hierarchical lists, like that found in a file manager or a browser's bookmarks list. the tree view has a number of functions which specify the hierarchy of the items in a tree. each item in the tree has a level starting at 0. the topmost items in the tree will have a level of 0, the children of those items will have a level of 1, the children below that will have a level of 2, and so on. ...
...the tree view has a number of functions which specify the hierarchy of the items in a tree. each item in the tree has a level starting at 0. the topmost items in the tree will have a level of 0, the children of those items will have a level of 1, the children below that will have a level of 2, and so on. the tree will query the view for the level of each item in order to determine how to draw the rows. the tree will draw the open and close icons to open and close a parent item as well as lines connecting the children to their parents. the tree will also handle drawing the rows with the right level of indenting. however, the view will need to make sure it keeps track of the level of the rows as necessary. this can sometimes be quite tricky, but fortunately, the built-in content tree view does a...
...and close a parent item as well as lines connecting the children to their parents. the tree will also handle drawing the rows with the right level of indenting. however, the view will need to make sure it keeps track of the level of the rows as necessary. this can sometimes be quite tricky, but fortunately, the built-in content tree view does all of the hard work for us. to create a set of nested rows, all we need to do is add a second treechildren element inside the parent treeitem. you can then add items inside that to specify the child rows of an item. don't put the inner treechildren element inside the treerow as this won't work. ...
...And 8 more matches

Styling a Tree - Archive of obsolete content
to be applied to the column but only to the header. the body of the tree must be styled in a somewhat different way than other elements. this is because the tree body is stored in a different way to other elements. the outer treechildren is the only real element in the tree body. the inner elements are just placeholders. setting properties instead, you must use the properties attribute on the rows or cells to set one or more named properties. this can be used with trees with static content, rdf built content or with those with a custom view. let's say we want a particular row to have a blue background color. this would be used to implement mozilla mail's labels feature. we'll use a property called 'makeitblue'. you can use whatever name you want. you can set multiple properties by separati...
...x to use in a style sheet. this is because you can specify the style for a number of parts of the cell individually. you can style not only the cell and its text, but the twisty and indentation. the following is the syntax that needs to be used: treechildren::-moz-tree-row(makeitblue) { background-color: blue; } this style which has a complex selector is used to style the background color of rows that have the 'makeitblue' property. this special syntax is needed because the cells themselves are not separate elements. all of the content inside the tree's body is rendered by the treechildren element. however, css has a concept to access parts of elements considering them to be pseudo-elements. this selector matches some tree rows inside the treechildren element as pseudo-elements. the style...
... the text '::-moz-tree-row' specifies what content area is desired, which in this case is a row. you can also use the following values: ::-moz-tree-cell: a cell. ...
...And 8 more matches

XULRunner tips - Archive of obsolete content
useful chrome urls most of these require branding. window url w...
... useful chrome urls most of these require branding. ...
... var windowds = components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"] .getservice(components.interfaces.nsiwindowdatasource); var tmpnamespace = {}; var sl = components.classes["@mozilla.org/moz/jssubscript-loader;1"] .createinstance(componen...
...And 8 more matches

The First Install Problem - Archive of obsolete content
this is an old working document; see en/gecko_plugin_api_reference/plug-in_development_overview for current information. problem definition the first install problem is the name given to the conditions arising when a plugin or embeddable software installs itself on a system first, before any other gecko-based browser. ...
... this is an old working document; see en/gecko_plugin_api_reference/plug-in_development_overview for current information. problem definition the first install problem is the name given to the conditions arising when a plugin or embeddable software installs itself on a system first, before any other gecko-based browser. ...
...ising when a plugin or embeddable software installs itself on a system first, before any other gecko-based browser. if this happens, gecko-based browsers often won't be able to discover the plugin, and will prompt the user to download the plugin again if the affiliated mime type is encountered on the web. unless gecko does a pre-emptive scan upon startup for desirable plugins that are not in the browser's plugins directory first, the best way to solve this problem is to encourage plugin vendors to leave dlls (and xpt files, if applicable) in a location that gecko can discover at runtime. this document presents a consistent way to do that. ...
...And 8 more matches

Gecko FAQ - Gecko Redirect 1
what is gecko? ...
... what is gecko? ...
...new name was chosen following a trademark infringement dispute. for more information see the wikipedia article on gecko. what is a layout engine? basically, a layout engine takes content (such as html, xml, image files, applets, and so on) and formatting information (such as cascading style sheets, presentational html tags, etc.) and displays the formatted content on the screen. it paints the browser's content area, which is the blank area inside the browser window's chrome. formally, a layout engine defines the placement policy for a document and places content on a page. gecko's core is a very fast layout engine. gecko also offers the ability to parse various document types (html, xml, svg, etc), advanced rendering capabilities including compositing and transformations, and support for e...
...And 8 more matches

Debugging CSS - Learn web development
blocks next sometimes when writing css you will encounter an issue where your css doesn't seem to be doing what you expect. perhaps you believe that a certain selector should match an element, but nothing happens, or a box is a different size than you expected. 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. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn the basics of what browser devtools are, and how to do simple inspection and editing of css. how to ...
...help you to find out what is going on. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn the basics of what browser devtools are, and how to do simple inspection and editing of css. how to access browser devtools the article what are browser developer tools is an up-to-date guide explaining how to access the tools in various browsers and platforms. while you may choose to mostly develop in a particular browser, and therefore will become most familiar with the tools included in that browser, it is worth knowing how to access them in other browsers. this will help if you are seeing different ren...
...what are browser developer tools is an up-to-date guide explaining how to access the tools in various browsers and platforms. while you may choose to mostly develop in a particular browser, and therefore will become most familiar with the tools included in that browser, it is worth knowing how to access them in other browsers. this will help if you are seeing different rendering between multiple browsers. you will also find that browsers have chosen to focus on different areas when creating their devtools. for example in firefox there are some excellent tools for working visually with css layout, allowing you to inspect and edit grid layouts, flexbox, and shapes. however, all of the different browsers have similar fundamental tools, e.g. for inspecting the properties and values applied to ele...
...And 8 more matches

Grids - Learn web development
this article will give you all you need to know to get started with page layout. prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css and styling boxes.) objective: to understand the fundamental concepts behind grid layout systems, and how to implement a grid layout using css grid. ...
...d how to implement a grid layout using css grid. what is grid layout? a grid is a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements. they help us to create designs where elements don’t jump around or change width as we move from page to page, providing greater consistency on our websites. a grid will typically have columns, rows, and then gaps between each row and column — commonly referred to as gutters. creating your grid in css having decided on the grid that your design needs, you can use css grid layout to create that grid in css and place items onto it. we will look at the basic features of grid layout first and then explore how to create a simple grid system for your project. the following video provides a ...
...ign needs, you can use css grid layout to create that grid in css and place items onto it. we will look at the basic features of grid layout first and then explore how to create a simple grid system for your project. the following video provides a nice visual explanation of using css grid: defining a grid as a starting point, download and open the starting point file in your text editor and browser (you can also see it live here). you will see an example with a container, which has some child items. by default these display in normal flow so the boxes display one below the other. we will be working with this file for the first part of this lesson, making changes to see how grid behaves. to define a grid we use the grid value of the display property. as with flexbox, this switches on grid...
...And 8 more matches

What is the difference between webpage, website, web server, and search engine? - Learn web development
ese terms sometimes since they refer to related but different functionalities. in fact, you'll sometimes see these terms misused in news reports and elsewhere, so getting them mixed up is understandable! we'll cover these terms and technologies in more detail as we explore further, but these quick definitions will be a great start for you: web page a document which can be displayed in a web browser such as firefox, google chrome, opera, microsoft internet explorer or edge, or apple's safari. these are also often called just "pages." website a collection of web pages which are grouped together and usually connected together in various ways. often called a "web site" or simply a "site." web server a computer that hosts a website on the internet. search engine a web service that helps ...
...led just "pages." website a collection of web pages which are grouped together and usually connected together in various ways. often called a "web site" or simply a "site." web server a computer that hosts a website on the internet. search engine a web service that helps you find other web pages, such as google, bing, yahoo, or duckduckgo. search engines are normally accessed through a web browser (e.g. you can perform search engine searches directly in the address bar of firefox, chrome, etc.) or through a web page (e.g. bing.com or duckduckgo.com). let's look at a simple analogy — a public library. this is what you would generally do when visiting a library: find a search index and look for the title of the book you want. make a note of the catalog number of the book. go to th...
...ch engine. each book has its own unique location in the library (two books cannot be kept at the same place) which is specified by the catalog number. active learning there is no active learning available yet. deeper dive so, let's dig deeper into how those four terms are related and why they are sometimes confused with each other. ...
...And 8 more matches

How to build custom form controls - Learn web development
full width. beautification so now that we have the basic functionality in place, the fun can start. the following is just an example of what is possible, and will match the screenshot at the beginning of this article. however, you should feel free to experiment and see what you can come up with. .select { /* the computations are made assuming 1em == 16px which is the default value in most browsers. if you are lost with px to em conversion, try http://riddle.pl/emcalc/ */ font-size : 0.625em; /* this (10px) is the new font size context for em value in this context */ font-family : verdana, arial, sans-serif; box-sizing : border-box; /* we need extra room for the down arrow we will add */ padding : .1em 2.5em .2em .5em; width : 10em; /* 100px */ border : .
...*/ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { /* because the value can be wider than our control, we have to make sure it will not change the control's width. if the content overflows, we display an ellipsis */ display : inline-block; width : 100%; overflow : hidden; w...
...ve state open state check out the source code bringing your control to life with javascript now that our design and structure are ready, we can write the javascript code to make the control actually work. warning: the following is educational code, not production code, and should not be used as-is. ...
...And 8 more matches

JavaScript basics - Learn web development
ript is versatile and beginner-friendly. with more experience, you'll be able to create games, animated 2d and 3d graphics, comprehensive database-driven apps, and much more! javascript itself is relatively compact, yet very flexible. developers have written a variety of tools on top of the core javascript language, unlocking a vast amount of functionality with minimum effort. these include: browser application programming interfaces (apis) built into web browsers, providing functionality such as dynamically creating html and setting css styles; collecting and manipulating a video stream from a user's webcam, or generating 3d graphics and audio samples. third-party apis that allow developers to incorporate functionality in sites from other content providers, such as twitter or facebook. ...
...nd applications. it's outside the scope of this article—as a light introduction to javascript—to present the details of how the core javascript language is different from the tools listed above. you can learn more in mdn's javascript learning area, as well as in other parts of mdn. the section below introduces some aspects of the core language, and offers an opportunity to play with a few browser api features too. have fun! a hello world! example javascript is one of the most popular modern web technologies! as your javascript skills grow, your websites will enter a new dimension of power and creativity. however, getting comfortable with javascript is more challenging than getting comfortable with html and css. you may have to start small, and progress gradually. to begin, let's exam...
... this is doing the same job as the <link> element for css. it applies the javascript to the page, so it can have an effect on the html (along with the css, and anything else on the page). add this code to the main.js file: const myheading = document.queryselector('h1'); myheading.textcontent = 'hello world!'; make sure the html and javascript files are saved. then load index.html in your browser. you should see something like this: note: the reason the instructions (above) place the <script> element near the bottom of the html file is that the browser reads code in the order it appears in the file. if the javascript loads first and it is supposed to affect the html that hasn't loaded yet, there could be problems. placing javascript near the bottom of an html page is one way to acco...
...And 8 more matches

The web and web standards - Learn web development
formation management: a proposal and hypertext at cern; these two publications together provided the background for how the web would work. they received a fair amount of interest, enough to convince timbl's bosses to allow him to go ahead and create a global hypertext system. by late 1990, timbl had created all the things needed to run the first version of the web — http, html, the first web browser, which was called worldwideweb, an http server, and some web pages to look at. in the next few years that followed, the web exploded, with multiple browsers being released, thousands of web servers being set up, and millions of web pages being created. ok, that's a very simple summary of what happened, but i did promise you a brief summary. one last significant data point to share is that in ...
...s we use to build web sites. these standards exist as long technical documents called specifications, which detail exactly how the technology should work. these documents are not very useful for learning how to use the technologies they describe (this is why we have sites like mdn web docs), but instead are intended to be used by software engineers to implement these technologies (usually in web browsers). for example, the html living standard describes exactly how html (all the html elements, and their associated apis, and other surrounding technologies) should be implemented. web standards are created by standards bodies — institutions that invite groups of people from different technology companies to come together and agree on how the technologies should work in the best way to fulfill...
...e possibilities it brings. you're a digital creative now. enjoy the experience, and the potential for earning a living. overview of modern web technologies there are a number of technologies to learn if you want to be a front-end web developer. in this section we will describe them briefly. for a more detailed explanation of how some of them work together, read our article how the web works. browsers you are probably reading these words inside a web browser in this very moment (unless you've printed it out, or are using assistive technology, such as a screenreader to read it out to you). web browsers are the software programs people use to consume the web, and include firefox, chrome, opera, safari, and edge. http hypertext transfer protocol, or http, is a messaging protocol that allows...
...And 8 more matches

Tips for authoring fast-loading HTML pages - Learn web development
n "compress" javascript by reformatting the source or by obfuscating the source and replacing long identifiers with shorter versions. minimize the number of files reducing the number of files referenced in a web page lowers the number of http connections required to download a page, thereby reducing the time for these requests to be sent, and for their responses to be received. ...
... if you use background images a lot in your css, you can reduce the number of http lookups needed by combining the images into one, known as an image sprite. ...
... of inline scripts inline scripts can be expensive for page loading since the parser must assume that an inline script could modify the page structure while parsing is in progress. reducing the use of inline scripts in general, and reducing the use of document.write() to output content in particular, can improve overall page loading. ...
...And 8 more matches

Adding vector graphics to the Web - Learn web development
r seo). svgs lend themselves well to styling/scripting, because each component of the image is an element that can be styled via css or scripted via javascript. ...
...ia javascript. so why would anyone want to use raster graphics over svg? well, svg does have some disadvantages: svg can get complicated very quickly, meaning that file sizes can grow; complex svgs can also take significant processing time in the browser. svg can be harder to create than raster images, depending on what kind of image you are trying to create. svg is not supported in older browsers, so may not be suitable if you need to support older versions of internet explorer with your web site (svg started being supported as of ie9.) raster graphics are arguably better for complex precision images such as photos, for the reasons described above. note: in inkscape, save your files as plain svg to save space. also, please refer to this article describing how to prepare svgs for th...
... you have not already done so, please read images in html. <img src="equilateral.svg" alt="triangle with all three sides equal" height="87" width="100" /> pros quick, familiar image syntax with built-in text equivalent available in the alt attribute. you can make the image into a hyperlink easily by nesting the <img> inside an <a> element. the svg file can be cached by the browser, resulting in faster loading times for any page that uses the image loaded in the future. cons you cannot manipulate the image with javascript. if you want to control the svg content with css, you must include inline css styles in your svg code. (external stylesheets invoked from the svg file take no effect.) you cannot restyle the image with css pseudoclasses (like :focus). troublesho...
...And 8 more matches

Functions — reusable blocks of code - Learn web development
ery much. now is the time, however, for us to start talking about functions explicitly, and really exploring their syntax. pretty much anytime you make use of a javascript structure that features a pair of parentheses — () — and you're not using a common built-in language structure like a for loop, while or do...while loop, or if...else statement, you are making use of a function. built-in browser functions we've made use of functions built in to the browser a lot in this course. every time we manipulated a text string, for example: let mytext = 'i am a string'; let newstring = mytext.replace('string', 'sausage'); console.log(newstring); // the replace() string function takes a source string, // and a target string and replaces the source string, // with the target string, and returns ...
...e join() function takes an array, joins // all the array items together into a single // string, and returns this new string or every time we generated a random number: let mynumber = math.random(); // the random() function generates a random number between // 0 and up to but not including 1, and returns that number ...we were using a function! ...
...using a function! ...
...And 8 more matches

Manipulating documents - Learn web development
th some other interesting apis that can alter your environment in interesting ways. prerequisites: basic computer literacy, a basic understanding of html, css, and javascript — including javascript objects. objective: to gain familiarity with the core dom apis, and the other apis commonly associated with dom and document manipulation the important parts of a web browser web browsers are very complicated pieces of software with a lot of moving parts, many of which can't be controlled or manipulated by a web developer using javascript. you might think that such limitations are a bad thing, but browsers are locked down for good reasons, mostly centering around security. imagine if a web site could get access to your stored passwords or other sensitive informatio...
...d get access to your stored passwords or other sensitive information, and log into websites as if it were you? despite the limitations, web apis still give us access to a lot of functionality that enable us to do a great many things with web pages. there are a few really obvious bits you'll reference regularly in your code — consider the following diagram, which represents the main parts of a browser directly involved in viewing web pages: the window is the browser tab that a web page is loaded into; this is represented in javascript by the window object. using methods available on this object you can do things like return the window's size (see window.innerwidth and window.innerheight), manipulate the document loaded into that window, store data specific to that document on the client...
...able on this object you can do things like return the window's size (see window.innerwidth and window.innerheight), manipulate the document loaded into that window, store data specific to that document on the client-side (for example using a local database or other storage mechanism), attach an event handler to the current window, and more. the navigator represents the state and identity of the browser (i.e. the user-agent) as it exists on the web. in javascript, this is represented by the navigator object. you can use this object to retrieve things like the user's preferred language, a media stream from the user's webcam, etc. the document (represented by the dom in browsers) is the actual page loaded into the window, and is represented in javascript by the document object. you can use this...
...And 8 more matches

Useful string methods - Learn web development
operties and methods available to it. you can see this if you go to the string object page and look down the list on the side of the page! now, before your brain starts melting, don't worry! you really don't need to know about most of these early on in your learning journey. but there are a few that you'll potentially use quite often that we'll look at here. let's enter some examples into the browser developer console. finding the length of a string this is easy — you simply use the length property. try entering the following lines: let browsertype = 'mozilla'; browsertype.length; this should return the number 7, because "mozilla" is 7 characters long. this is useful for many reasons; for example, you might want to find the lengths of a series of names so you can display them in order...
...if it is over a certain length. retrieving a specific string character on a related note, you can return any character inside a string by using square bracket notation — this means you include square brackets ([]) on the end of your variable name. ...
...u want to return, so for example to retrieve the first letter you'd do this: browsertype[0]; remember: computers count from 0, not 1! you could use this to, for example, find the first letter of a series of strings and order them alphabetically. to retrieve the last character of any string, we could use the following line, combining this technique with the length property we looked at above: browsertype[browsertype.length-1]; the length of "mozilla" is 7, but because the count starts at 0, the character position is 6; using length-1 gets us the last character. finding a substring inside a string and extracting it sometimes you'll want to find if a smaller string is present inside a larger one (we generally say if a substring is present inside a string). this can be done using the index...
...And 8 more matches

Cross Process Object Wrappers
add-on code is still allowed to use cpows "unsafely". ...
... add-on code is still allowed to use cpows "unsafely". ...
... add-on code is still allowed to use cpows "unsafely". ...
...And 8 more matches

Using the Places history service
plemented the older interfaces, resulting in functionality spread across many interfaces. the places history service ("navhistory") implements these history interfaces: nsiglobalhistory2: basic add page, is visited functionality used by the docshell when visiting and rendering pages. nsiglobalhistory3: adds extra functions for dealing with redirects and hints for rendering (gecko flags). nsibrowserhistory: adds functions used by the basic browser like marking pages as typed in the url bar, and removing pages as from the history interface. nsinavhistoryservice: complex query functions, more fine-grained getters and setters. nsiautocompletesearch: url-bar autocomplete from history from 1.9.1 (firefox3.1) on, don't use any places service on (or after) quit-application has been notified, ...
...t contains a reference to the url table for the page, the visit date, the transition type (typed, click, redirect, bookmark, etc.), a reference to the referring visit, and the session id. this separation of the global page information and the visit allows us to store information about each time the page was visited instead of just the last time. using the referrer information in each visit, the browsing path can be reconstructed at any time. the "session id" allows these paths to be reconstructed more easily. when the user starts browsing (for example, by typing in a link or following a bookmark), a new session id is created. new visits get the same session id as their referrer. this means that one "session" is comprised of going to a new page, and following a bunch of links or redirects. a ...
...heir referrer. this means that one "session" is comprised of going to a new page, and following a bunch of links or redirects. a session is ended when a new url is typed in or selected from bookmarks. these session ids allow the dotted lines separating related pages in the history view to be easily computed. ...
...And 8 more matches

Observer Notifications
register with nsicategorymanager to receive this notification. prior to firefox 3.5, this was available to observers observing the app-startup/xpcom-startup notification. final-ui-startup triggered just before the first window for the application is displayed. sessionstore-windows-restored sent by the session restore process to indicate that all initial browser windows have opened. note that while the window are open and the chrome loaded the tabs in the windows may still be being restored after this notification. note: this notification is specific to firefox and seamonkey 2.0 applications application shutdown these are the topics that you can observe on shutdown, in order of appearance. topic description quit-a...
...in event loop. xpcom-shutdown assortment of critical services stop operating. many things will not be available here. web-workers-shutdown called inside xpcom-shutdown. this shuts down all web workers. xpcom-shutdown-threads shuts down the thread manager, causing all nsthreads to finish processing any events already queued and stop accepting new events. browser these topics indicate interesting things that happen that the browser alerts you to. topic description browser:purge-session-history sent when the sanitizer runs to purge all history and other information. browser:purge-domain-data sent after domain-specific history and other information have been purged. the data value is a string form of the domain. ...
...hese topics indicate interesting things that happen that the browser alerts you to. topic description browser:purge-session-history sent when the sanitizer runs to purge all history and other information. browser:purge-domain-data sent after domain-specific history and other information have been purged. the data value is a string form of the domain. browser-lastwindow-close-requested sent when the browser wishes to close the last open browser window. when this is sent, it is possible that other windows may still be open, such as the download manager or preferences. the data value is an nsisupportsprbool. recipients may set this to true to abort the close. ...
...And 8 more matches

nsINavBookmarksService
the bookmarksservice interface provides methods for managing bookmarked history items. bookmarks consist of a set of user-customizable folders. a uri in history can be contained in one or more such folders. ...
...er-customizable folders. a uri in history can be contained in one or more such folders. 1.0 67 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11) implemented by: @mozilla.org/browser/nav-bookmarks-service;1. ...
... in nsiuri olduri, obsolete since gecko 1.9 in long long aitemid, in nsiuri anewuri ); parameters olduri obsolete since gecko 1.9 the uri of the item to be changed. aitemid the item whose bookmark uri needs to be changed. anewuri the new uri. obsolete since gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this method creates a dynamic container under the given parent folder. long long createdynamiccontainer( in long long aparentfolder, in autf8string aname, in astring acontractid, in long aindex ); parameters aparentfolder the id of the parent folder. aname the name of the new folder. acontr...
...And 8 more matches

In depth: Microtasks and the JavaScript runtime environment - Web APIs
in the computing world. a vast number of the most popular applications are based at least in part on javascript code. to support this, it was necessary to find ways to allow for projects to escape the limitations of a single-threaded language. starting with the addition of timeouts and intervals as part of the web api (settimeout() and setinterval()), the javascript environment provided by web browsers has gradually advanced to include powerful features that enable scheduling of tasks, multi-threaded application development, and so forth. to understand where queuemicrotask() comes into play here, it's helpful to understand how the javascript runtime operates when scheduling and running code. javascript execution contexts note: the details here are generally not important to most javascrip...
...reate the new context. run, javascript, run to run javascript code, the runtime engine maintains a set of agents in which to execute javascript code. each agent is made up of a set of execution contexts, the execution context stack, a main thread, a set for any additional threads that may be created to handle workers, a task queue, and a microtask queue. other than the main thread—which some browsers share across multiple agents—each component of an agent is unique to that agent. here we look at how the runtime functions in slightly more detail. event loops each agent is driven by an event loop, which collects any user and other events, enqueuing tasks to handle each callback. it then runs any pending javascript tasks, then any pending microtasks, then performs any needed rendering...
...nt is driven by an event loop, which collects any user and other events, enqueuing tasks to handle each callback. it then runs any pending javascript tasks, then any pending microtasks, then performs any needed rendering and painting before looping again to check for pending tasks. ...
...And 8 more matches

KeyboardEvent: code values - Web APIs
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. only keys which generate scan codes on windows are listed. ...
...xe02c "unidentified" "eject" 0xe02d "unidentified" "" 0xe02e "audiovolumedown" "volumedown" (was "volumedown" until chrome 50) 0xe02f "unidentified" "" 0xe030 "audiovolumeup" "volumeup" (was "volumeup" until chrome 50) 0xe031 "unidentified" "" 0xe032 "browserhome" "browserhome" 0xe033, 0xe034 "unidentified" "" 0xe035 "numpaddivide" "numpaddivide" 0xe036 "unidentified" "" 0xe037 "printscreen" "printscreen" 0xe038 "altright" "altright" 0xe039, 0xe03a "unidentified" "" 0xe03b "unidentified" "help" 0xe0...
... 0xe052 "insert" "insert" 0xe053 "delete" "delete" 0xe054 ～ 0xe05a "unidentified" "" 0xe05b "metaleft" "osleft" 0xe05c "metaright" "osright" 0xe05d "contextmenu" "contextmenu" 0xe05e "power" "" 0xe05f ～ 0xe064 "unidentified" "" 0xe065 "browsersearch" "browsersearch" 0xe066 "browserfavorites" "browserfavorites" 0xe067 "browserrefresh" "browserrefresh" 0xe068 "browserstop" "browserstop" 0xe069 "browserforward" "browserforward" 0xe06a "browserback" "browserback" 0xe06b "launchapp1" "" 0xe06c "launchmail" "" 0xe06d "lau...
...And 8 more matches

Web Authentication API - Web APIs
with an existing account. navigator.credentials.get() - when used with the publickey option, uses an existing set of credentials to authenticate to a service, either logging a user in or as a form of second-factor authentication. please note: both create() and get() require a secure context (e.g. - the server is connected by https or is the localhost), and will not be available for use if the browser is not operating in a secure context. in their most basic forms, both create() and get() receive a very large random number called a challenge from the server and they return the challenge signed by the private key back to the server. this proves to the server that a user is in possession of the private key required for authentication without revealing any secrets over the network. in order t...
... they return the challenge signed by the private key back to the server. this proves to the server that a user is in possession of the private key required for authentication without revealing any secrets over the network. in order to understand how the create() and get() methods fit into the bigger picture, it is important to understand that they sit between two components that are outside the browser: server - the web authentication api is intended to register new credentials on a server (also referred to as a service or a relying party) and later use those same credentials on that same server to authenticate a user. authenticator - the credentials are created and stored in a device called an authenticator. this is a new concept in authentication: when authenticating using passwords, th...
...ound in the publickeycredential interface (where publickeycredential.response is the authenticatorattestationresponse interface). note most javascript programmers that are creating an application will only really care about steps 1 and 5 where the create() function is called and subsequently returns; however, steps 2, 3, and 4 are essential to understanding the processing that takes place in the browser and authenticator and what the resulting data means. figure 1 - a diagram showing the sequence of actions for a web authentication registration and the essential data associated with each action. the registration steps are: application requests registration - the application makes the initial registration request. the protocol and format of this request is outside of the scope of the web...
...And 8 more matches

ARIA Test Cases - Accessibility
introduction the information on this page is out of date: it was last updated november 2010. however, the information might still be useful for some readers. for more up-to-date examples, see the openajaxalliance aria examples page. ...
...te: it was last updated november 2010. however, the information might still be useful for some readers. for more up-to-date examples, see the openajaxalliance aria examples page. or copy-paste: http://oaa-accessibility.org/examples/ for each example we test the "expected" results with assistive technologies, for each browser that at supports wai-aria in. where a failure occurs we will test the browser for api incorrectness, using tools such as msaa inspect. ...
...xamples, see the openajaxalliance aria examples page. or copy-paste: http://oaa-accessibility.org/examples/ for each example we test the "expected" results with assistive technologies, for each browser that at supports wai-aria in. where a failure occurs we will test the browser for api incorrectness, using tools such as msaa inspect. this must be done in order to determine where to file a bug (browser or at). there are several purposes for providing this information: help browser vendors provide correct implementations help at vendors provide correct implementations inform authors as to what actually works reliably in general we're testing with the latest public releases. however, where things don't work we may test with nightly builds if they are available, in order to show what is ...
...And 8 more matches

ARIA: row role - Accessibility
w within a grid, table or treegrid, and optionally within a rowgroup, that is a container for one or more cells, gridcells, columnheaders, or rowheaders within a static tabular structure. using native html <tr> elements, whenever possible, is strongly encouraged. to create an aria row, add role="row" to the container element. that row should be nested within a grid, table or treegrid. a group of rows can be nested within a grid, table or treegrid directly, or within a rowgroup in one of those containers. each row contains child cells. these cells can be of different types, depending on whether they are column or row headers, or grid or regular cells. a row can contain a number of attributes clarifying the row's role, including aria-colindex, aria-level, aria-rowindex, and aria-selected. if ...
...table or treegrid directly, or within a rowgroup in one of those containers. each row contains child cells. these cells can be of different types, depending on whether they are column or row headers, or grid or regular cells. a row can contain a number of attributes clarifying the row's role, including aria-colindex, aria-level, aria-rowindex, and aria-selected. if the row is within a treegrid, rows can include the aria-expanded attribute, using the attribute to indicate the present status. this is not the case for an ordinary table or grid, in which the aria-expanded attribute is not present. to create an interactive widget that has a tabular structure, use the grid pattern instead. if the interaction provides for the selection state of individual cells, if left to right and top to botton ...
... changing individual cell order such as through drag and drop, use grid or treegrid instead. note: using the native html table element (<table>) along with the table row element (<tr>) whenever possible is strongly encouraged. associated wai-aria roles, states, and properties context roles role="rowgroup" an optional contextual row parent, it establishes a relationship between descendant rows. it is a structural equivalent to the thead, tfoot, and tbody elements in an html table element. role="table" one of the three possible contexts (along with grid and treegrid) in which you'll find a row, it identifies the row as being part of a non-interactive table structure containing data arranged in rows and columns, similar to the native <table> html element. role="grid" one of the thre...
...And 8 more matches

Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
same standard flexbox uses for aligning items in its flex container. this specification details how alignment should work in all the different layout methods. layout methods will conform to the specification where possible and implement individual behavior based on their differences (features and constraints). while the specification currently specifies alignment details for all layout methods, browsers have not fully implemented all of the specification; however, the css grid layout method has been widely adopted. this guide presents demonstrations of how box alignment in grid layout works. you will see many similarities in how these properties and values work in flexbox. due to grid being two-dimensional and flexbox one-dimensional there are some small differences that you should watch out...
...seline last baseline * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; align-items: start; } .item1 { grid-area: a; } .item2 { grid-area: b; } .item3 { grid-area: c; } .item4 { grid-area: d; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <div class="item3">item 3</div> <div class="item4">...
...and the fourth center. ...
...And 8 more matches

<input type="email"> - HTML: Hypertext Markup Language
eractive-examples and send us a pull request. the input value is automatically validated to ensure that it's either empty or a properly-formatted e-mail address (or list of addresses) before the form can be submitted. the :valid and :invalid css pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid e-mail address or not. on browsers that don't support inputs of type email, a email input falls back to being a standard text input. value a domstring representing an e-mail address, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, multiple, name,pattern, placeholder, readonly, required, size, and type idl attributes list and ...
...ag is specified when compiling the regular expression, so that the pattern is treated as a sequence of unicode code points, instead of as ascii. no forward slashes should be specified around the pattern text. if the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely. tip: use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. you should also include other explanatory text nearby. see the section pattern validation for details and an example. placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. it should be a word or short phrase that de...
... is properly formatted to be an e-mail address. note: it's also crucial to remember that a user can tinker with your html behind the scenes, so your site must not use this validation for any security purposes. you must verify the e-mail address on the server side of any transaction in which the provided text may have any security implications of any kind. a simple email input currently, all browsers which implement this element implement it as a standard text input field with basic validation features. the specification does, however, allow browsers latitude on this. for example, the element could be integrated with the user's device's built-in address book to allow picking e-mail addresses from that list. in its most basic form, an email input can be implemented like this: <input id="em...
...And 8 more matches

An overview of HTTP - HTTP
http is a protocol which allows the fetching of resources, such as html documents. it is the foundation of any data exchange on the web and it is a client-server protocol, which means requests are initiated by the recipient, usually the web browser. a complete document is reconstructed from the different sub-documents fetched, for instance text, layout description, images, videos, scripts, and more. clients and servers communicate by exchanging individual messages (as opposed to a stream of data). the messages sent by the client, usually a web browser, are called requests and the messages sent by the server as an answer are called responses. designed in the early 1990s, http is an extensible protocol which has evolved over time. it is an application layer protocol that is sent over tcp, o...
...sed to not only fetch hypertext documents, but also images and videos or to post content to servers, like with html form results. http can also be used to fetch parts of documents to update web pages on demand. components of http-based systems http is a client-server protocol: requests are sent by one entity, the user-agent (or a proxy on behalf of it). most of the time the user-agent is a web browser, but it can be anything, for example a robot that crawls the web to populate and maintain a search engine index. each individual request is sent to a server, which handles it and provides an answer, called the response. between the client and the server there are numerous entities, collectively called proxies, which perform different operations and act as gateways or caches, for example. in...
...t that crawls the web to populate and maintain a search engine index. each individual request is sent to a server, which handles it and provides an answer, called the response. between the client and the server there are numerous entities, collectively called proxies, which perform different operations and act as gateways or caches, for example. in reality, there are more computers between a browser and the server handling the request: there are routers, modems, and more. thanks to the layered design of the web, these are hidden in the network and transport layers. http is on top, at the application layer. although important to diagnose network problems, the underlying layers are mostly irrelevant to the description of http. client: the user-agent the user-agent is any tool that acts on ...
...And 8 more matches

Critical rendering path - Web Performance
layout determines the size and location of everything on the page. once layout is determined, pixels are painted to the screen. ...
...g the critical render path improves render performance.the critical rendering path includes the document object model (dom), css object model (cssom), render tree and layout. the document object model is created as the html is parsed. the html may request javascript, which may, in turn, alter the dom. the html includes or makes requests for styles, which in turn builds the css object model. the browser engine combines the two to create the render tree. layout determines the size and location of everything on the page. once layout is determined, pixels are painted to the screen. optimizing the critical rendering path improves the time to first render. understanding and optimizing the critical rendering path is important to ensure reflows and repaints can happen at 60 frames per second, to ens...
...eflows and repaints can happen at 60 frames per second, to ensure performant user interactions and avoid jank. understanding crp web performance includes the server requests and responses, loading, scripting, rendering, layout, and the painting of the pixels to the screen. a request for a web page or app starts with an html request. the server returns the html - response headers and data. ...
...And 8 more matches

findbar - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] in gecko 1.9, the findbar widget moved into toolkit, so it's available to any xul application, as well as extensions. ...
... « xul reference home [ examples | attributes | properties | methods | related ] in gecko 1.9, the findbar widget moved into toolkit, so it's available to any xul application, as well as extensions. ...
...ce home [ examples | attributes | properties | methods | related ] in gecko 1.9, the findbar widget moved into toolkit, so it's available to any xul application, as well as extensions. ...
...And 7 more matches

Archived Mozilla and build documentation - Archive of obsolete content
alifiletype interface provides information about a specific file type. chromeless [this project may not be active — check github https://github.com/mozilla/chromeless] creating a firefox sidebar extension this article describes how to create a registered sidebar for firefox 2 or greater. see the references section for information on creating extension in earlier browsers. creating a hybrid cd creating a microsummary a microsummary generator is a set of instructions for creating a microsummary from the content of a page. web pages can reference generators via <link rel="microsummary"> elements in their <head> elements. generators can also be independently downloaded and installed by users if they include a lis...
...osummary from the content of a page. web pages can reference generators via <link rel="microsummary"> elements in their <head> elements. generators can also be independently downloaded and installed by users if they include a list of pages to which they apply. creating a mozilla extension a mozilla extension is an installable enhancement to the mozilla browser that provides additional functionality (for example linky, which adds an item to the context menu for opening multiple links in a document or selection). this tutorial walks you through the process of building a mozilla extension that adds an icon to mozilla's status bar showing the current status of the mozilla source code (i.e. whether or not the latest version of the code i...
...m generators for their favorite sites -- obtain a reference to the nsimicrosummaryservice interface implemented by the nsimicrosummaryservice component, then call its installgenerator() method, passing it an xml document containing the generator. migrate apps from internet explorer to mozilla when netscape started the mozilla browser, it made the conscious decision to support w3c standards. as a result, mozilla is not fully backwards-compatible with netscape navigator 4.x and microsoft internet explorer legacy code; for example, mozilla does not support <layer> as i will discuss later. browsers, like internet explorer 4, that were built before the conception of w3c standards inherited many quirks. in this article, ...
...And 7 more matches

HTML: A good basis for accessibility - Learn web development
screen readers can guess the difference between table layouts and data tables). you'll then likely (depending on which screen reader you're using) have to go down into the table as an object and look at its features separately, then get out of the table again to carry on navigating the content. table layouts are a relic of the past — they made sense back when css support was not widespread in browsers, but now they just create confusion for screen reader users. additionally, their source code requires more markup, which makes them less flexible and more difficult to maintain. you can verify these claims by comparing your previous experience with a more modern website structure example, which could look something like this: <header> <h1>header</h1> </header> <nav> <!-- main navigation ...
... controls, we mean the main parts of web documents that users interact with — most commonly buttons, links, and form controls. in this section, we'll look at the basic accessibility concerns to be aware of when creating such controls. later articles on wai-aria and multimedia will look at other aspects of ui accessibility. ...
... you can then press enter/return to follow a focused link or press a button (we've included some javascript to make the buttons alert a message), or start typing to enter text in a text input. ...
...And 7 more matches

HTML: A good basis for accessibility - Learn web development
screen readers can guess the difference between table layouts and data tables). you'll then likely (depending on which screen reader you're using) have to go down into the table as an object and look at its features separately, then get out of the table again to carry on navigating the content. table layouts are a relic of the past — they made sense back when css support was not widespread in browsers, but now they just create confusion for screen reader users. additionally, their source code requires more markup, which makes them less flexible and more difficult to maintain. you can verify these claims by comparing your previous experience with a more modern website structure example, which could look something like this: <header> <h1>header</h1> </header> <nav> <!-- main navigation ...
... controls, we mean the main parts of web documents that users interact with — most commonly buttons, links, and form controls. in this section, we'll look at the basic accessibility concerns to be aware of when creating such controls. later articles on wai-aria and multimedia will look at other aspects of ui accessibility. ...
... you can then press enter/return to follow a focused link or press a button (we've included some javascript to make the buttons alert a message), or start typing to enter text in a text input. ...
...And 7 more matches

The HTML5 input types - Learn web development
types, which were added in html5 to allow collection of specific types of data. prerequisites: basic computer literacy, and a basic understanding of html. objective: to understand the newer input type values available to create native form controls, and how to implement them using html. note: most of the features discussed in this article have wide support across browsers. we'll note any exceptions. if you want more detail on browser support, you should consult our html forms element reference, and in particular our extensive <input> types reference. because html form control appearance may be quite different from a designer's specifications, web developers sometimes build their own custom form controls. we cover this in an advanced tutorial: how to build cus...
... web developers sometimes build their own custom form controls. we cover this in an advanced tutorial: how to build custom form widgets. e-mail address field this type of field is set using the value email for the type attribute: <input type="email" id="email" name="email"> when this type is used, the user is required to type a valid email address into the field. any other content causes the browser to display an error when the form is submitted. you can see this in action in the below screenshot. you can also use the multiple attribute in combination with the email input type to allow several email addresses to be entered in the same input (separated by commas): <input type="email" id="email" name="email" multiple> on some devices — notably, touch devices with dynamic keyboards lik...
... note: you can find examples of the basic text input types at basic input examples (see the source code also). this is another good reason for using these newer input types — improving the user experience for users of these devices. client-side validation as you can see above, email, along with other newer input types, provides built-in client-side error validation — performed by the browser before the data gets sent to the server. it is a helpful aid to guide users to fill out a form accurately, and it can save time — it is useful to know that your data is not correct immediately, rather than having to wait for a round trip to the server. but it should not be considered an exhaustive security measure! your apps should always perform security checks on any form-submitted data on...
...And 7 more matches

Introduction to web APIs - Learn web development
note: see also the api glossary entry for further description. apis in client-side javascript client-side javascript, in particular, has many apis available to it — these are not part of the javascript language itself, rather they are built on top of the core javascript language, providing you with extra superpowers to use in your javascript code. ...
... for further description. apis in client-side javascript client-side javascript, in particular, has many apis available to it — these are not part of the javascript language itself, rather they are built on top of the core javascript language, providing you with extra superpowers to use in your javascript code. they generally fall into two categories: browser apis are built into your web browser and are able to expose data from the browser and surrounding computer environment and do useful complex things with it. for example, the web audio api provides javascript constructs for manipulating audio in the browser — taking an audio track, altering its volume, applying effects to it, etc. in the background, the browser is actually using some complex lower-level code (e.g. c++ or rust) to...
...for example, the twitter api allows you to do things like displaying your latest tweets on your website. it provides a special set of constructs you can use to query the twitter service and return specific information. ...
...And 7 more matches

Introduction to client-side frameworks - Learn web development
he data underlying the application. in software development, this underlying data is known as state. each of our goals is theoretically simple in isolation. we can iterate over the data to render it; we can add to an object to make a new task; we can use an identifier to find, edit, or delete a task. ...
...to do all of these things through the browser, however, some cracks start to show. the real problem is this: every time we change our application’s state, we need to update the ui to match. we can examine the difficulty of this problem by looking at just one feature of our todo list app: rendering a list of tasks. the verbosity of dom changes building html elements and rendering them in the browser at the appropriate time takes a surprising amount of code. let's say that our state is an array of objects structured like this: const state = [ { id: 'todo-0', name: 'learn some frameworks!' } ] how do we show one of those tasks to our user? we want to represent each task as a list item – an html <li> element inside of an unordered list element (a <ul>). how do we make it? that...
...javascript developers, if left to their own devices, could end up with all the code related to one part of the ui being spread out all over a file — or in another file altogether. routing the most essential feature of the web is that it allows users to navigate from one page to another – it is, after all, a network of interlinked documents. when you follow a link on this very website, your browser communicates with a server and fetches new content to display for you. as it does so, the url in your address bar changes. you can save this new url and come back to the page later on, or share it with others so they can easily find the same page. your browser remembers your navigation history and allows you to navigate back and forth, too. this is called server-side routing. modern web applic...
...And 7 more matches

Framework main features - Learn web development
this article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level, and the differences between them. prerequisites: familiarity with the core html, css, and javascript languages. objective: to understand the main code features of frameworks. ...
...le ember utilizes handlebars. unlike html, these languages know how to read data variables, and this data can be used to streamline the process of writing your ui. angular apps often make heavy use of typescript. typescript is not concerned with the writing of user interfaces, but it is a domain-specific language, and has significant differences to vanilla javascript. dsls can't be read by the browser directly; they must be transformed into javascript or html first. transformation is an extra step in the development process, but framework tooling generally includes the required tools to handle this step, or can be adjusted to include this step. while it is possible to build framework apps without using these domain-specific languages, embracing them will streamline your development process a...
...nt inside. the curly braces around subject on line 4 tell the application to read the value of the subject constant and insert it into our <h1>. when used with react, the jsx from the previous snippet would be compiled into this: var subject = "world"; var header = react.createelement("header", null, react.createelement("h1", null, "hello, ", subject, "!") ); when ultimately rendered by the browser, the above snippet will produce html that looks like this: <header> <h1>hello, world!</h1> </header> handlebars the handlebars templating language is not specific to ember applications, but it is heavily utilized in ember apps. handlebars code resembles html, but it has the option of pulling data in from elsewhere. this data can be used influence the html that an application ultimately bui...
...And 7 more matches

Getting started with React - Learn web development
r computer) that the multiple lines of code inside are part of the same expression. you could just as well write the header expression like this: const header = <header> <h1>mozilla developer network</h1> </header> however, this looks kind of awkward, because the <header> tag that starts the expression is not indented to the same position as its corresponding closing tag. of course, your browser can't read jsx without help. when compiled (using a tool like babel or parcel), our header expression would look like this: const header = react.createelement("header", null, react.createelement("h1", null, "mozilla developer network") ); it's possible to skip the compilation step and use react.createelement() to write your ui yourself. in doing this, however, you lose the declarative benef...
... unix/macos terminal in order to use the terminal commands mentioned in this tutorial. gitbash (which comes as part of the git for windows toolset) or windows subsystem for linux (wsl) are both suitable. see command line crash course for more information on these, and on terminal commands in general. also bear in mind that react and reactdom produce apps that only work on a fairly modern set of browsers — ie9+ by way of some polyfills. it is recommended that you use a modern browser like firefox, safari, or chrome when working through these tutorials. also, see the following for more information: "what is npm" on nodejs.org "introducing npx" on the npm blog the create-react-app documentation initializing your app create-react-app takes one argument: the name you'd like to give your...
...app will display a number of messages in your terminal while it works; this is normal! this might take a few minutes, so now might be a good time to go make a cup of tea. when the process is complete, cd into the moz-todo-react directory and run the command npm start. the scripts installed by create-react-app will start being served at a local server at localhost:3000, and open the app in a new browser tab. your browser will display something like this: application structure create-react-app gives us everything we need to develop a react application. its initial file structure looks like this: moz-todo-react ├── readme.md ├── node_modules ├── package.json ├── package-lock.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.
...And 7 more matches

Introducing a complete toolchain - Learn web development
ng the software development experience stable and more efficient. we might also refer to this as our development environment. transformation: tooling that allows us to use the latest features of a language (e.g. javascript) or another language entirely (e.g. jsx or typescript) in our development process, and then transforms our code so that the production version still runs on a wide variety of browsers, modern and older. post development: tooling that comes into play after you are done with the body of development to ensure that your software makes it to the web and continues to run. in this case study we'll look at adding tests to your code, and deploying your app using netlify so it is available for all the web to see. let's start working on these, beginning with our development environ...
... your will-it-miss directory called .prettierrc.json. ...
... your quoted values, and it won't use trailing commas (a newer feature of ecmascript that will cause errors in older browsers). you can find more about configuring prettier in its documentation. ...
...And 7 more matches

Creating reftest-based unit tests
e reftest harness compares the display of two web pages. if the bitmaps resulting from displaying the two files in an 800x1000 window are identical, the test passes. if they differ, the test fails. or, alternatively, the conditions can be reversed (a != test rather than an == test). the power of the tool comes from the fact that there is more than one way to achieve any given visual effect in a browser. so, if the effect of complex markup is being tested, put that complex markup into a page and create another page that uses simple markup to achieve the same visual effect. reftest will then compare them and verify whether they produce the same bitmap. this idea can seem odd when first encountered. automated testing usually compares output against an invariant, a "gold standard", that is deter...
...m odd when first encountered. automated testing usually compares output against an invariant, a "gold standard", that is determined to be correct. 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. but an operating system does change with time. it is not invariant. ...
...but the test should not fail, unless the "<blockquote>" element did not cause any indentation at all. ...
...And 7 more matches

Listening to events on all tabs
firefox 3.5 adds support for listening to progress events on all tabs. adding a listener to listen to progress events on all tabs, call the browser's addtabsprogresslistener() method: gbrowser.addtabsprogresslistener(myprogresslistener); myprogresslistener is an object that implements the callbacks used to provide notifications of progress events. ...
... all tabs. adding a listener to listen to progress events on all tabs, call the browser's addtabsprogresslistener() method: gbrowser.addtabsprogresslistener(myprogresslistener); myprogresslistener is an object that implements the callbacks used to provide notifications of progress events. removing a listener to remove a previously installed progress listener, call removetabsprogresslistener(): gbrowser.removetabsprogresslistener(myprogresslistener); implementing a listener the listener object itself has five methods it can implement to handle various events: onlocationchange called when the uri of the document displayed in the tab changes. ...
... awebprogress the progress instance responsible for handling the events. ...
...And 7 more matches

Displaying Places information using views
and will save you a lot of time writing basic functionality so that you can focus on building your extension or application. places provides the following built-in views: tree menu toolbar instantiating the three built-in views are simply standard xul elements with a special type attribute whose value is "places". every xul document containing a built-in view must import the stylesheet browser/components/places/content/places.css and overlay the file browser/components/places/content/placesoverlay.xul: <?xml-stylesheet href="chrome://browser/content/places/places.css" ?> <?xul-overlay href="chrome://browser/content/places/placesoverlay.xul" ?> it's this stylesheet that binds elements with the special type attribute to one of the views. the overlay contains javascript required by th...
...ritten as entity reference &amp; and not simply &. <tree type="places" place="place:terms=mozilla&amp;onlybookmarked=1&amp;querytype=1"> <treecols> <treecol id="title" label="my bookmarks" flex="1" primary="true" /> </treecols> <treechildren /> </tree> the next example does the same as the last but uses javascript to set the tree's place attribute: var histserv = cc["@mozilla.org/browser/nav-history-service;1"]. getservice(ci.nsinavhistoryservice); var query = histserv.getnewquery(); query.searchterms = "mozilla"; query.onlybookmarked = true; var opts = histserv.getnewqueryoptions(); opts.querytype = opts.query_type_bookmarks; var uri = histserv.queriestoquerystring([query], 1, opts); var tree = document.getelementbyid("mytree"); tree.place = uri; these two examples use t...
... replaced by the more powerful nsinavhistoryresultobserver. tree view create a built-in tree view by setting the type attribute to "places" on a tree element. the treechildren element should be empty: <tree type="places"> <treecols> <treecol id="title" flex="1" primary="true" /> <treecol id="url" flex="1" /> </treecols> <treechildren /> </tree> the tree view is implemented in browser/components/places/content/tree.xml. see the tree reference and trees tutorial for general information about trees. if you would like your tree view to be styled in the same manner that firefox styles its uses of the view, you should include the following stylesheet. note that this stylesheet is different from the one given above, which must be included if you use a built-in places view. the fo...
...And 7 more matches

Message manager overview
in the initial version of multiprocess firefox there are two processes: the chrome process, also called the parent process, runs the browser ui (chrome) code and code inserted by extensions the content processes, also called the child processes, run all web content. different tabs may run in different processes. message managers are designed to enable code in one process to communicate with code in a different process. at the top level, there are two different sorts of message managers: frame message managers: these enable chrome process code to load a script into a browser frame (essentially, a single browser tab) in the content process. these scripts are called frame scripts, and as the name suggests, they are scoped to a specific browser frame. if chrome code wants to run code in ...
... frame script some older articles on multiprocess firefox and the message manager might refer to "content scripts" instead of "frame scripts", but this usage is deprecated because the add-on sdk uses "content script" to refer to a similar but different kind of script. ...
... manager, the window message manager, and the browser message manager. all three enable chrome code to: load a script into a frame in the content the content process using a loadframescript() function. these scripts are called "frame scripts". communicate with frame scripts using addmessagelistener() and broadcastasyncmessage() or sendasyncmessage() functions. note that in this context, "browser" refers to the xul <browser> object, which is a frame that hosts a single web document. it does not refer to the more general sense of a web browser. global message manager the global message manager operates on every <browser> (that is, every open content tab). loadframescript() loads the given script into every <browser> in every browser window. broadcastasyncmessage() sends the mess...
...And 7 more matches

Hacking Tips
illa/contrib-push/js/src/jit/ion.cpp, line 3196. (gdb) continue compiling self-hosted:650:20470-21501 bailout from self-hosted:20:403-500 invalidate self-hosted:20:403-500 note: the line 3196, listed above, corresponds to the location of the jit spew inside jit::invalidate function. hacking tips benchmarking (shell) arewefastyet.com display the benchmark results of the javascript shell, and browser for b2g. these benchmarks are publicly recognized benchmarks suggested by other companies and are used as a metric to evaluate how fast javascript engines. this tool is maintained by the javascript team, to find regressions and to compare spidermonkey with other javascript engines when possible. to run these benchmarks localy, you can clone arewefastyet sources and look inside the benchmarks...
...anies and are used as a metric to evaluate how fast javascript engines. this tool is maintained by the javascript team, to find regressions and to compare spidermonkey with other javascript engines when possible. to run these benchmarks localy, you can clone arewefastyet sources and look inside the benchmarks directory to run individual benchmarks with your js shell. using the gecko profiler (browser / xpcshell) see the section dedicated to profiling with the gecko profiler. this method of profiling has the advantage of mixing the javascript stack with the c++ stack, which is useful to analyze library function issues. one tip is to start looking at a script with an inverted js stack to locate the most expensive js function, then to focus on the frame of this js function, and to remove the...
...ng the javascript stack with the c++ stack, which is useful to analyze library function issues. one tip is to start looking at a script with an inverted js stack to locate the most expensive js function, then to focus on the frame of this js function, and to remove the inverted stack and look at c++ part of this function to determine from where the cost is coming from. ...
...And 7 more matches

Working with windows in chrome code
lly loaded, so some calls, like win.document.getelementbyid() will fail. to overcome this difficulty, you can move the initialization code to a load handler of the window being opened or pass a callback function, as described below. you can get a window object from a document using document.defaultview. content windows when a xul window contains a widget capable of displaying a page, such as <browser> or <iframe>, the document in that widget is, naturally, separate from the document of the chrome window itself. there also is a window object for each sub-document, although there's no window in a common sense for the sub-document. the same holds for chrome windows opened inside a tab of <tabbrowser>. the elements above the chrome document opened in the tab are separate from your chrome docum...
... in the tab are separate from your chrome document. the following two subsections describe how to cross chrome-content boundaries in either way, i.e. accessing elements which are ancestors of your chrome document, or accessing elements which are descendants of your chrome document (but nevertheless in a different context). accessing content documents assume you have a document loaded in a <tabbrowser>, <browser>, or <iframe> element inside your document. you can use browser.contentdocument to access that document and browser.contentwindow to access the window object of that document. you should be aware of xpcnativewrappers when working with untrusted content. with xpcnativewrappers turned on (which is the default in firefox 1.5+), your extension can safely access the dom of the content do...
...wrappers turned on (which is the default in firefox 1.5+), your extension can safely access the dom of the content document, but not the content javascript. bypassing xpcnativewrapper to work with content javascript directly can lead to security problems. see interaction between privileged and non-privileged pages if you need to interact with the content page. the content shortcut in case of <browser type="content-primary" />, you can use the content shortcut property to accesss the window object of the content document. for example: // alerts the title of the document displayed in the content-primary widget alert(content.document.title); for example, you can use content.document in a browser.xul overlay to access the web page in the selected tab in a firefox window. some examples use _...
...And 7 more matches

Version, UI, and Status Information - Plugins
« previousnext » this chapter describes the functions that allow a plug-in to display a message on the status line, get agent information, and check on the current version of the plug-in api and the browser. displaying a status line message users are accustomed to checking the ui status line at the bottom of the browser window for updates on the progress of an operation or the url of a link on the page. you can also use the status line to notify the user of plug-in-related information. the user might appreciate seeing the percentage completed of the current operation or the url of a button or other link object when the cursor is over it, all of which the browser shows. in fact, your plug-in interface should be consistent with the rest of the browser in this way. to accomplish...
...for this reason, your message is always displayed, but you have no control over how long it stays in the status line before another message replaces it. you should use a different method to display messages that the user needs to see, such as error messages. ...
... displays the last status line message it receives, regardless of the message source. for this reason, your message is always displayed, but you have no control over how long it stays in the status line before another message replaces it. you should use a different method to display messages that the user needs to see, such as error messages. getting agent information a plug-in can check which browser is running on the user's current system. browsers communicate with http servers, which store agent software name, version, and operating system in a user_agent field. if you want to gather usage statistics or just find out the version of your plug-in's host browser, this information can help you. the plug-in calls the npn_useragent method to retrieve the contents of the user_agent field. cons...
...And 7 more matches

Gecko Plugin API Reference - Plugins
formation displaying a status line message getting agent information getting the current version finding out if a feature exists reloading a plug-in plug-in side plug-in api this chapter describes methods in the plug-in api that are available from the plug-in object. ...
...for an overview of how these two sides of the plug-in api interact, see the how plug-ins work and overview of plug-in structure sections in the introduction. ...
... overview of plug-in structure sections in the introduction. npp_destroy npp_destroystream npp_getvalue np_getvalue npp_handleevent np_initialize npp_new npp_newstream npp_print npp_setvalue npp_setwindow np_shutdown npp_streamasfile npp_urlnotify npp_write npp_writeready browser side plug-in api this chapter describes methods in the plug-in api that are available from the browser. the names of all of these methods begin with npn_ to indicate that they are implemented by the browser and called by the plug-in. for an overview of how these two sides of the plug-in api interact, see the how plug-ins work and overview of plug-in structure sections in the introduction. warning: you must only call these from the main thread; calling them from other threads is not supported an...
...And 7 more matches

EventTarget.addEventListener() - Web APIs
ner will never call preventdefault(). if a passive listener does call preventdefault(), the user agent will do nothing other than generate a console warning. see improving scrolling performance with passive listeners to learn more. mozsystemgroup a boolean indicating that the listener should be added to the system group. available only in code running in xbl or in the chrome of the firefox browser. usecapture optional a boolean indicating whether events of this type will be dispatched to the registered listener before being dispatched to any eventtarget beneath it in the dom tree. events that are bubbling upward through the tree will not trigger a listener designated to use capture. event bubbling and capturing are two ways of propagating events that occur in an element that is nes...
...s to false. note: for event listeners attached to the event target, the event is in the target phase, rather than the capturing and bubbling phases. events in the target phase will trigger all listeners on an element in the order they were registered, regardless of the usecapture parameter. note: usecapture has not always been optional. ideally, you should include it for the widest possible browser compatibility. wantsuntrusted a firefox (gecko)-specific parameter. if true, the listener receives synthetic events dispatched by web content (the default is false for browser chrome and true for regular web pages). this parameter is useful for code found in add-ons, as well as the browser itself. return value undefined usage notes the event listener callback the event listener can ...
...cating whether or not to use capture. over time, it became clear that more options were needed. rather than adding more parameters to the function (complicating things enormously when dealing with optional values), the third parameter was changed to an object that can contain various properties defining the values of options to configure the process of removing the event listener. because older browsers (as well as some not-too-old browsers) still assume the third parameter is a boolean, you need to build your code to handle this scenario intelligently. you can do this by using feature detection for each of the options you're interested in. for example, if you want to check for the passive option: let passivesupported = false; try { const options = { get passive() { // this function ...
...And 7 more matches

Working with the History API - Web APIs
he referrer will be the url of the document whose window is this at the time of creation of the xmlhttprequest object. example of pushstate() method suppose http://mozilla.org/foo.html executes the following javascript: let stateobj = { foo: "bar", } history.pushstate(stateobj, "page 2", "bar.html") this will cause the url bar to display http://mozilla.org/bar.html, but won't cause the browser to load bar.html or even check that bar.html exists. suppose now that the user navigates to http://google.com, then clicks the back button. at this point, the url bar will display http://mozilla.org/bar.html and history.state will contain the stateobj. the popstate event won't be fired because the page has been reloaded. the page itself will look like bar.html. if the user clicks back once ag...
...'t change the document's contents from what they were in the previous step, although the document might update its contents manually upon receiving the popstate event. note: calling history.back() normally behaves the same way as clicking the back button. but there is one important exception: after using history.pushstate(), calling history.back() does not raise a popstate event. clicking the browser's back button (still) does. the pushstate() method pushstate() takes three parameters: a state object; a title (currently ignored); and (optionally), a url. let's examine each of these three parameters in more detail. state object the state object is a javascript object which is associated with the new history entry created by pushstate(). whenever the user navigates to the new state, ...
... which is associated with the new history entry created by pushstate(). whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object. the state object can be anything that can be serialized. ...
...And 7 more matches

Using the Notifications API - Web APIs
tion to a user even if the application is idle or in the background. this article looks at the basics of using this api in your own apps. typically, system notifications refer to the operating system's standard notification mechanism: think for example of how a typical desktop system or mobile device broadcasts notifications. the system notification system will vary of course by platform and browser, but this is ok, and the notifications api is written to be general enough for compatibility with most system notification systems. examples one of the most obvious use cases for web notifications is a web-based mail or irc application that needs to notify the user when a new message is received, even if the user is doing something else with another application. many examples of this now exis...
...er must grant the application the right to do so. this is a common requirement when an api tries to interact with something outside a web page — at least once, the user needs to specifically grant that application permission to present notifications, thereby letting the user control which apps/sites are allowed to display notifications. ...
...firefox is already doing this from version 72, for example, and safari has done it for some time. in addition, in chrome and firefox you cannot request notifications at all unless the site is a secure context (i.e. ...
...And 7 more matches

ARIA: cell role - Accessibility
column or row header information, use the colheader or rowheader roles, respecitively. if the cell does not contain header information and is nested in a grid or treegrid, the role of gridcell may be more appropriate. a cell can contain a number of property attributes clarifying the cell's position within the tabular data structure, including aria-colindex, aria-colspan, aria-rowindex, and aria-rowspan. using the native html table element (<table>) along with the table row element (<tr>) and table cell element (<td>) whenever possible is strongly encouraged. associated wai-aria roles, states, and properties context roles role="row" an element with role="row" is a row of cells within a tabular structure. a row contains one or more cells, grid cells, column headers, or row headers w...
...rties context roles role="row" an element with role="row" is a row of cells within a tabular structure. a row contains one or more cells, grid cells, column headers, or row headers within a grid, table or treegrid, and optionally within a rowgroup. role="rowgroup" row is a required cell parent. rowgroup is an optional contextual row parent. it establishes a relationship between descendant rows. it is a structural equivalent to the thead, tfoot, and tbody elements in an html table element. role="table" one of the three possible contexts (along with grid and treegrid) in which you'll find a row containing cells. table identifies the cell as being part of a non-interactive table structure containing data arranged in rows and columns, similar to the native html <table> element. role="g...
... subclass roles role="gridcell" a cell in a row within a grid or treegrid. ...
...And 7 more matches

Web applications and ARIA FAQ - Accessibility
ria enables dynamic, javascript-driven applications and widgets to interoperate with a variety of desktop-based assistive technologies. for more information about how to create accessible widgets with aria, see the overview of accessible web applications and widgets. where is aria supported? aria is a relatively new specification, but support for it is growing. a wide variety of commonly-used browsers, assistive technologies, javascript toolkits, and applications now support aria. however, many users may still be using older versions of these technologies. you may want to consider implementing aria using progressive enhancement techniques—such as adding aria using javascript, not directly to your markup—in order to more gracefully support older browsers and assistive technologies. brow...
...olkits, and applications now support aria. however, many users may still be using older versions of these technologies. you may want to consider implementing aria using progressive enhancement techniques—such as adding aria using javascript, not directly to your markup—in order to more gracefully support older browsers and assistive technologies. browsers aria is supported in the following browsers: browser minimum version notes firefox 3.0+ works with nvda, jaws 10+, and orca chrome latest screen reader support still experimental as of chrome 15 safari 4+ safari 5 support is much improved. live region support requires safari 5 with voiceover on ios5 or os x lion opera 9.5+ requires voiceover on os x. tbd: ho...
.... live region support requires safari 5 with voiceover on ios5 or os x lion opera 9.5+ requires voiceover on os x. tbd: how well does this currently work? internet explorer 8+ works with jaws 10+ and nvda. no live region support in nvda. ie9 support is much improved. in some cases, earlier versions may support only some features of aria. more detailed browser compatibility charts are available from multiple sources: caniuse.com the paciello group assistive technologies assistive technologies are increasingly adopting aria. some of them include: assistive technology minimum version for basic aria minimum version for live region and alert support nvda 2010.2 (nvda is always a free upgrade) 2011.1 for firefox, ...
...And 7 more matches

Variable fonts guide - CSS: Cascading Style Sheets
width combinations throughout the publication — giving a much wider range of styles than currently typical on the web (or indeed practical for performance reasons alone). a note about font families, weights, and variants you might notice that we have been talking about having a specific font file for every weight and style (i.e. ...
... you may also find that some variable fonts come split into two files: one for uprights and all their variations, and one containing the italic variations. ...
...typographic terms) the letterforms can be. this is typically set in css using the font-stretch property, with values expressed as a percentage above or below ‘normal’ (100%), any number greater than 0 is technically valid—though it is far more likely that the range would fall closer to the 100% mark, such as 75%-125%. if a number value supplied is outside the range encoded in the font, the browser should render the font at the closest value allowed. note: the % symbol is not used when utilizing font-variation-settings. font-stretch: 115%; font-variation-settings: 'wdth' 115; the following live example's css can be edited to allow you to play with font width values. italic the italic (ital) axis works differently in that it is either on or off; there is no in-between. italic de...
...And 7 more matches

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
ngside other parts of css, as part of a complete system for doing the layout. in this guide, i will explain how a grid fits together with other techniques you may already be using. grid and flexbox the basic difference between css grid layout and css flexbox layout is that flexbox was designed for layout in one dimension - either a row or a column. grid was designed for two-dimensional layout - rows, and columns at the same time. the two specifications share some common features, however, and if you have already learned how to use flexbox, the similarities should help you get to grips with grid. one-dimensional vs. two-dimensional layout a simple example can demonstrate the difference between one- and two-dimensional layouts. in this first example, i am using flexbox to lay out a set of b...
...u want to control the alignment by row and column, and this is where grid comes in. the same layout with css grids in this next example, i create the same layout using grid. this time we have three 1fr column tracks. we do not need to set anything on the items themselves; they will lay themselves out one into each cell of the created grid. as you can see they stay in a strict grid, lining up in rows and columns. with five items, we get a gap on the end of row two. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</d...
...the fr unit, when combined with the minmax() function can give us very similar behavior to the flex properties in flexbox while still enabling the creation of a layou...
...And 7 more matches

Subgrid - CSS: Cascading Style Sheets
introduction to subgrid when you add display: grid to a grid container, only the direct children become grid items and can then be placed on the grid that you have created. the children of these items display in normal flow. you can "nest" grids by making a grid item a grid container. ...
... introduction to subgrid when you add display: grid to a grid container, only the direct children become grid items and can then be placed on the grid that you have created. the children of these items display in normal flow. you can "nest" grids by making a grid item a grid container. ...
...e children of these items display in normal flow. you can "nest" grids by making a grid item a grid container. these grids however are independent of the parent grid and of each other, meaning that they do not take their track sizing from the parent grid. this makes it difficult to line nested grid items up with the main grid. if you set the value subgrid on grid-template-columns, grid-template-rows or both, instead of creating a new track listing the nested grid uses the tracks defined on the parent. for example, if you use grid-template-columns: subgrid and the nested grid spans three column tracks of the parent, the nested grid will have three column tracks of the same size as the parent grid. gaps are inherited but can also be overridden with a different gap value. line names can be pas...
...And 7 more matches

grid-template - CSS: Cascading Style Sheets
the grid-template css property is a shorthand property for defining grid columns, rows, and areas. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...lumns, rows, and areas. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ed in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 7 more matches

Event developer guide - Developer guides
events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types. the overview page provides an introduction to the design pattern and a summary of the types of incidents which are defined and reacted to by modern web browsers. the custom events page describes how the event code design pattern can be used in custom code to define new event types emitted by user objects, register listener functions to handle those events, and trigger the events in user code. the remaining pages describe how to use events of different kinds defined by web browsers. unfortunately, these events have been defined piece by piece as web br...
...ted by user objects, register listener functions to handle those events, and trigger the events in user code. the remaining pages describe how to use events of different kinds defined by web browsers. unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers. ...
...functions to handle those events, and trigger the events in user code. the remaining pages describe how to use events of different kinds defined by web browsers. unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers. the device on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the page on orientation coordinate systems and the page on the use of 3d transforms. ...
...And 7 more matches

Using HTML sections and outlines - Developer guides
important: there are no implementations of the proposed outline algorithm in web browsers nor assistive technology; it was never part of a final w3c specification. therefore the outline algorithm should not be used to convey document structure to users. authors are advised to use heading rank (h1-h6) to convey document structure. the html5 specification introduced several semantic sectioning elements to help organize the structure of documents. semantic sectioning elements are specifically designed to communicate structural meaning to browsers and other technologies interpreting the document on behalf of users, such as screen readers and voice assistants. semantic sectioning elements clarify the larger-scale structures within a document. they are intended to enhance the limited semantics ...
...f of users, such as screen readers and voice assistants. semantic sectioning elements clarify the larger-scale structures within a document. they are intended to enhance the limited semantics of earlier versions of html, which included only the <div> tag as a generic mechanism for grouping related content. for example, <div class="navigation"> does not suggest any meaning about its content to a browser; only a human reading the html source can divine the meaning of a class like navigation. by contrast, the <nav> sectioning element more clearly describes to browsers and other devices the content contained: links or other navigational structures to help users move through and understand where they are in a site's or page's content. new semantic elements were added to html5 to improve and clari...
...tional structures to help users move through and understand where they are in a site's or page's content. new semantic elements were added to html5 to improve and clarify the sectioning of websites into meaningful areas of content. it is important for developers to use these semantic elements in line with their intended purposes. many accessibility tools as well as reader views provided by some browsers rely on semantic sectioning elements. so don't simply swap out an existing tangle of <div> elements for a bunch of <section> elements. section elements in html5 html navigational element (<nav>) defines a section that contains navigation links that appear often on a site. you can have primary and secondary menus, but you cannot nest a <nav> element inside another <nav> element. html artic...
...And 7 more matches

<input type="range"> - HTML: Hypertext Markup Language
y box like the number input type. because this kind of widget is imprecise, it shouldn't typically be used unless the control's exact value isn't important. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. if the user's browser doesn't support type range, it will fall back and treat it as a text input. value a domstring containing the string representation of the selected numeric value; use valueasnumber to get the value as a number. events change and input supported common attributes autocomplete, list, max, min, and step idl attributes list, value, and valueasnumber ...
...fined values to suggest to the user for this input. any values in the list that are not compatible with the type are not included in the suggested options. the values provided are suggestions, not requirements: users can select from this predefined list or provide a different value. see the range control with hash marks below for an example of how the options on a range are denoted in supported browsers max the greatest value in the range of permitted values. if the value entered into the element exceeds this, the element fails constraint validation. if the value of the max attribute isn't a number, then the element has no maximum value. this value must be greater than or equal to the value of the min attribute. see the html max attribute. min the lowest value in the range of permitted v...
...0.01"> if you want to accept any value regardless of how many decimal places it extends to, you can specify a value of any for the step attribute: <input type="range" min="0" max="3.14" step="any"> this example lets the user select any value between 0 and π without any restriction on the fractional part of the value selected. adding hash marks and labels the html specification gives browsers some flexibility on how to present the range control. nowhere is this flexibility more apparent than in the area of hash marks and, to a lesser degree, labels. the specification describes how to add custom points to the range control using the list attribute and a <datalist> element, but does not have any requirements or even recommendations for standardized hash or tick marks along the length...
...And 7 more matches

<link>: The External Resource Link element - HTML: Hypertext Markup Language
co"> there are a number of other icon rel values, mainly used to indicate special icon types for use on various mobile platforms, e.g.: <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png"> the sizes attribute indicates the icon size, while the type contains the mime type of the resource being linked. these provide useful hints to allow the browser to choose the most appropriate icon available. you can also provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true. for example: <link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"> some interesting new performance and security features have...
...: <link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"> some interesting new performance and security features have been added to the <link> element too. take this example: <link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> a rel value of preload indicates that the browser should preload this resource (see preloading content with rel="preload" for more details), with the as attribute indicating the specific class of content being fetched. the crossorigin attribute indicates whether the resource should be fetched with a cors request. other usage notes: a <link> element can occur either in the <head> or <body> element, depending on whether it has a link type th...
...e linked resource. a url can be absolute or relative. hreflang this attribute indicates the language of the linked resource. it is purely advisory. allowed values are determined by bcp47. use this attribute only if the href attribute is present. importance indicates the relative importance of the resource. priority hints are delegated using the values: auto: indicates no preference. the browser may use its own heuristics to decide the priority of the resource. high: indicates to the browser that the resource is of high priority. low: indicates to the browser that the resource is of low priority. note: the importance attribute may only be used for the <link> element if rel="preload" or rel="prefetch" is present. integrity contains inline metadata — a base64-encoded cr...
...And 7 more matches

Content negotiation - HTTP
the server (agent-driven negotiation or reactive negotiation), that are used as fallback mechanisms. over the years, other content negotiation proposals, like transparent content negotiation and the alternates header, have been proposed. they failed to get traction and got abandoned. server-driven content negotiation in server-driven content negotiation, or proactive content negotiation, the browser (or any other kind of user-agent) sends several http headers along with the url. these headers describe the preferred choice of the user. the server uses them as hints and an internal algorithm chooses the best content to serve to the client. the algorithm is server-specific and not defined in the standard. see, for example, the apache negotiation algorithm. the http/1.1 standard defines lis...
...to add more headers to the list of available headers, called client hints. client hints advertise what kind of device the user agent runs on (for example, if it is a desktop computer or a mobile device). even if server-driven content negotiation is the most common way to agree on a specific representation of a resource, it has several drawbacks: the server doesn't have total knowledge of the browser. even with the client hints extension, it has not a complete knowledge of the capabilities of the browser. unlike reactive content negotiation where the client makes the choice, the server choice is always somewhat arbitrary. the information by the client is quite verbose (http/2 header compression mitigates this problem) and a privacy risk (http fingerprinting) as several representations of ...
...ed caches are less efficient and server implementations are more complex. the accept header the accept header lists the mime types of media resources that the agent is willing to process. it is comma-separated lists of mime types, each combined with a quality factor, a parameter indicating the relative degree of preference between the different mime types. ...
...And 7 more matches

Using HTTP cookies - HTTP
it remembers stateful information for the stateless http protocol. cookies are mainly used for three purposes: session management logins, shopping carts, game scores, or anything else the server should remember personalization user preferences, themes, and other settings tracking recording and analyzing user behavior cookies were once used for general client-side storage. ...
...e are the web storage api (localstorage and sessionstorage) and indexeddb. to see stored cookies (and other storage that a web page can use), you can enable the storage inspector in developer tools and select cookies from the storage tree. creating cookies after receiving an http request, a server can send one or more set-cookie headers with the response. the cookie is usually stored by the browser, and then the cookie is sent with requests made to the same server inside a cookie http header. an expiration date or duration can be specified, after which the cookie is no longer sent. additional restrictions to a specific domain and path can be set, limiting where the cookie is sent. for details about the header attributes mentioned below, refer to the set-cookie reference article. the set-...
... header sends cookies from the server to the user agent. a simple cookie is set like this: set-cookie: <cookie-name>=<cookie-value> this shows the server sending headers to tell the client to store a pair of cookies: http/2.0 200 ok content-type: text/html set-cookie: yummy_cookie=choco set-cookie: tasty_cookie=strawberry [page content] then, with every subsequent request to the server, the browser sends back all previously stored cookies to the server using the cookie header. get /sample_page.html http/2.0 host: www.example.org cookie: yummy_cookie=choco; tasty_cookie=strawberry note: here's how to use the set-cookie header in various server-side applications: php node.js python ruby on rails define the lifetime of a cookie the lifetime of a cookie can be defined in two ways:...
...And 7 more matches

Inheritance and the prototype chain - JavaScript
d of the prototype chain is reached. following the ecmascript standard, the notation someobject.[[prototype]] is used to designate the prototype of someobject. since ecmascript 2015, the [[prototype]] is accessed using the accessors object.getprototypeof() and object.setprototypeof(). this is equivalent to the javascript property __proto__ which is non-standard but de-facto implemented by many browsers. it should not be confused with the func.prototype property of functions, which instead specifies the [[prototype]] to be assigned to all instances of objects created by the given function when used as a constructor. the object.prototype property represents the object prototype object. here is what happens when trying to access a property: // let's create an object o from function f with i...
...ed prototype. please note that the code below is free-standing (it is safe to assume there is no other javascript on the webpage other than the below code). for the best learning experience, it is highly recommended that you open a console, navigate to the "console" tab, copy-and-paste in the below javascript code, and run it by pressing the enter/return key. (the console is included in most web browser's developer tools. more information is available for firefox developer tools, chrome devtools, and edge devtools.) function dosomething(){} console.log( dosomething.prototype ); // it does not matter how you declare the function, a // function in javascript will always have a default // prototype property. // (ps: there is one exception that arrow function doesn't have a default prototype ...
... isprototypeof: ƒ isprototypeof(), propertyisenumerable: ƒ propertyisenumerable(), tolocalestring: ƒ tolocalestring(), tostring: ƒ tostring(), valueof: ƒ valueof() } } } as seen above, the __proto__ of dosomeinstancing is dosomething.prototype. but, what does this do? when you access a property of dosomeinstancing, the browser first looks to see if dosomeinstancing has that property. if dosomeinstancing does not have the property, then the browser looks for the property in the __proto__ of dosomeinstancing (a.k.a. dosomething.prototype). if the __proto__ of dosomeinstancing has the property being looked for, then that property on the __proto__ of dosomeinstancing is used. otherwise, if the __proto__ of dosomeinstan...
...And 7 more matches

Performance fundamentals - Web Performance
what is performance? ultimately, user-perceived performance is the only performance that matters. users provide inputs to the system through touch, movement, and speech. in return, they perceive outputs through sight, touch, and hearing. performance is the quality of system outputs in response to user inputs. ...
...r more of the application performance factors discussed above. use css animations and transitions instead of using some library’s animate() function, which probably currently uses many badly performing technologies (window.settimeout() or top/left positioning, for example) use css animations. in many cases, you can actually use css transitions to get the job done. this works well because the browser is designed to optimize these effects and use the gpu to handle them smoothly with minimal impact on processor performance. another benefit is that you can define these effects in css along with the rest of your app's look-and-feel, using a standardized syntax. css animations give you very granular control over your effects using keyframes, and you can even watch events fired during the animat...
...if you want to create animations on the fly or modify them in javascript, james long has written a simple library for that called css-animations.js. use css transforms instead of tweaking absolute positioning and fiddling with all that math yourself, use the transform css property to adjust the position, scale, and so forth of your content. the reason is, once again, hardware acceleration. the browser can do these tasks on your gpu, letting the cpu handle other things. in addition, transforms give you capabilities you might not otherwise have. not only can you translate elements in 2d space, but you can transform in three dimensions, skew and rotate, and so forth. paul irish has an in-depth analysis of the benefits of translate() from a performance point of view. in general, however, you ha...
...And 7 more matches

Privacy, permissions, and information security
in this article, we examine how to create web content that minimizes the risk of users' personal information or imagery being obtained unexpectedly by third parties. ...
...rity practices aim to prevent unauthorized access to systems or data, regardless of what the target is. ...
...what the target is. personal and private information <what kind of information is private or personal?> privacy risks <what are ways personal information can be gotten by third parties?> fingerprinting fingerprinting is a technique used to gather a variety of information that's made available by a user's browser and collating it until it becomes possible to uniquely identify that user's browser. ...
...And 7 more matches

How to make PWAs installable - Progressive web apps (PWAs)
an go even further and allow users to install the web app on mobile and desktop browers that support doing so. the installed web app can then be launched by users just as if it were any native app. this article explains how to achieve this using the web app's manifest. ...
...be launched directly from the device's home screen, rather than the user having to open the browser and then navigate to the site by using a bookmark or typing the url. your web app can sit next to native applications as first class citizens. this makes the web app easier to access; additionally, you can specify that the app be launched in fullscreen or standalone mode, thus removing the default browser user interface that would otherwise be present, creating an even more seamless and native-like feel. requirements to make the web site installable, it needs the following things in place: a web manifest, with the correct fields filled in the web site to be served from a secure (https) domain an icon to represent the app on the device a service worker registered, to allow the app to work...
... the manifest file the key element is a web manifest file, which lists all the information about the website in a json format. it usually resides in the root folder of a web app. it contains u...
...And 7 more matches

Introduction to progressive web apps - Progressive web apps (PWAs)
e than to install an application, and you can also share web apps by simply sending a link. on the other hand, native apps are better integrated with the operating system and therefore offer a more seamless experience for the users. you can install a native app so that it works offline, and users love tapping their icons to easily access their favorite apps, rather than navigating to it using a browser. pwas give us the ability to create web apps that can enjoy these same advantages. it's not a brand new concept—such ideas have been revisited many times on the web platform with various approaches in the past. progressive enhancement and responsive design already allow us to build mobile friendly websites. pwas, however, provide all this and more without losing any of the existing feature...
... to observe to be identified as a pwa. it should be: discoverable, so the contents can be found through search engines. installable, so it can be available on the device's home screen or app launcher. linkable, so you can share it by simply sending a url. network independent, so it works offline or with a poor network connection. progressive, so it's still usable on a basic level on older browsers, but fully-functional on the latest ones. re-engageable, so it's able to send notifications whenever there's new content available. responsive, so it's usable on any device with a screen and a browser—mobile phones, tablets, laptops, tvs, refrigerators, etc. safe, so the connections between the user, the app, and your server are secured against any third parties trying to get access to se...
...ll worth trying out a pwa approach, so you can see for yourself if it works for your app. advantages of web applications a fully-capable progressive web application should provide all of the following advantages to the user. discoverability the eventual aim is that web apps should have better representation in search engines, be easier to expose, catalog and rank, and have metadata usable by browsers to give them special capabilities. some of the capabilities have already been enabled on certain web-based platforms by proprietary technologies like open graph, which provides a format for specifying similar metadata in the html <head> block using <meta> tags. the relevant web standard here is the web app manifest, which defines features of an app such as name, icon, splash screen, and them...
...And 7 more matches

How to turn off form autocompletion - Web security
this article explains how a website can disable autocomplete for form fields. by default, browsers remember information that the user submits through <input> fields on websites. this enables the browser to offer autocompletion (that is, suggest possible completions for fields that the user has started typing in) or autofill (that is, pre-populate certain fields upon load). these features are usually enabled by default, but they can be a privacy concern for users, so browsers can let users disable them. ...
... load). these features are usually enabled by default, but they can be a privacy concern for users, so browsers can let users disable them. however, some data submitted in forms either are not useful in the future (for example, a one-time pin) or contain sensitive information (for example, a unique government identifier or credit card security code). as website author, you might prefer that the browser not remember the values for such fields, even if the browser's autocomplete feature is enabled. note that the wcag 2.1 success criterion 1.3.5: identify input purpose does not require that autocomplete/autofill actually work - merely that form fields that relate to specific personal user information are programmatically identified. this means that the criterion can be passed (by adding the rel...
...when form data is cached in session history, the information filled in by the user is shown in the case where the user has submitted the form and clicked the back button to go back to the original f...
...And 7 more matches

jpm - Archive of obsolete content
in the process of developing) in the branded release or beta versions of firefox. thus, you will need to download and install a different version of firefox. assuming you don't want an old version of firefox, your options are firefox developer edition, firefox nightly, unbranded beta, or unbranded release. when testing your add-on, you will need to use the -b option to jpm run. see selecting a browser version. problems? if you do not see this, ask for help. sdk users and project team members discuss problems and proposals on the project mailing list. someone else may have had the same problem you do, so try searching the list. you are welcome to post a question, too. you can also chat with other sdk users in #jetpack on mozilla's irc network. command reference jpm supports the following ...
... test-index.js jpm run this command runs a new instance of firefox with the add-on installed: jpm run jpm run accepts the following options: -b --binary binary use the version of firefox specified in binary. binary may be specified as a full path or as a path relative to the current directory. ...
... -b --binary binary use the version of firefox specified in binary. binary may be specified as a full path or as a path relative to the current directory. jpm run -b /path/to/firefox/nightly see selecting a browser version. --binary-args cmdargs pass extra arguments to firefox. for example, to pass the -jsconsole argument to firefox and launch the browser console, try the following: jpm run --binary-args -jsconsole to pass multiple arguments, or arguments containing spaces, quote them: jpm run --binary-args '-url mzl.la -jsconsole' --debug run the add-on debugger attached to the add-on. -o --overload path rather than use the sdk modules built into firefox, use the modules found at path. if -o is sp...
...And 6 more matches

Plug-n-Hack - Archive of obsolete content
overview plug-n-hack (pnh) is a proposed standard from the mozilla security team for defining how security tools can interact with browsers in a more useful and usable way. security researchers commonly use security tools in conjunction with browsers, but until now direct integration has required writing platform and browser specific extensions. configuring a browser to work with a security tool can be a non-trivial process, and this can discourage people with less experience from using such tools. ...
...but until now direct integration has required writing platform and browser specific extensions. configuring a browser to work with a security tool can be a non-trivial process, and this can discourage people with less experience from using such tools. ...
...owser to work with a security tool can be a non-trivial process, and this can discourage people with less experience from using such tools. ...
...And 6 more matches

Table Cellmap - Archive of obsolete content
ame. now that union uses the fact all addresses of real tablecellframes are aligned at even boundaries, or in other words they cant have an odd address. if the address is odd then it holds some other info (mbits). easy table cellmap just imagine a 2x2 table. <table> <tr><td>cell 1</td><td>cell 2</td></tr> <tr><td>cell 3</td><td>cell 4</td></tr> </table> this would create a cellmap with two rows and in each row 2 entries. each entry in the cellmap wold have a direct link to the corresponding tablecellframes. tables with footers, headers etc. take the same table and adder a header <table> <thead> <tr><td>head cell 1</td><td>head cell 2</td></tr> </thead> <tbody> <tr><td>cell 1</td><td>cell 2</td></tr> <tr><td>cell 3</td><td>cell 4</td></tr> </tbody> </table> now we have two...
...entry in the cellmap wold have a direct link to the corresponding tablecellframes. tables with footers, headers etc. take the same table and adder a header <table> <thead> <tr><td>head cell 1</td><td>head cell 2</td></tr> </thead> <tbody> <tr><td>cell 1</td><td>cell 2</td></tr> <tr><td>cell 3</td><td>cell 4</td></tr> </tbody> </table> now we have two different rowgroups and and the rowspans can not cross the borders between the different rowgroups. (ref xhtml-2.0). further the table header and footer will be repeated on every page when printed out. due to this behind the cellmap for the table we will find a cellmap for every rowgroup. in this low level cellmap the row count begins every time with 0. a typical code segment to come from the table level down to the rowgroup level ...
...is low level cellmap the row count begins every time with 0. a typical code segment to come from the table level down to the rowgroup level nscellmap* map = mfirstmap; while (map) { if (map->getrowcount() > rowindex) { // add your action here } rowindex -= map->getrowcount(); map = map->getnextsibling(); } data entry the usual way to populate the cellmap is via nstableframe::insertrows. ...
...And 6 more matches

ContextMenus - Archive of obsolete content
bute should be the id of a context menu within the same document. in the example, a context menu is attached to a grid. ...
...ld be the id of a context menu within the same document. in the example, a context menu is attached to a grid. ...
...ttached to a grid. <window id="main-window"> <popupset> <menupopup id="ins-del-menu"> <menuitem label="insert"/> <menuitem label="delete"/> </menupopup> </popupset> </window> <grid context="ins-del-menu"> <columns> <column/> <column flex="1"/> </columns> <rows id="rows"> <row align="center"> <label value="name:"/> <textbox/> </row> </rows> </grid> the same context menu can be attached to multiple elements. just set the context attribute on those elements you want the context menu to apply to. one technique is to attach a context menu to an entire document area. for instance, the firefox browser applies a single context menu to the browser area which displays web pages. for example, the following will attach a context menu with ...
...And 6 more matches

List Controls - Archive of obsolete content
ents to create lists, a listbox element to create multi-row list boxes, and a menulist element to create drop-down list boxes. they work similar to the html select element, which performs both functions, but the xul elements have additional features. the simplest list box uses the listbox element for the box itself, and the listitem element for each item. for example, this list box will have four rows, one for each item. example 1 : source view <listbox> <listitem label="butter pecan" /> <listitem label="chocolate chip" /> <listitem label="raspberry ripple" /> <listitem label="squash swirl" /> </listbox> like with the html option element, you can assign a value for each item using the value attribute. you can then use the value in a script. the list box will default to a suitable...
... <listbox> <listitem label="butter pecan" /> <listitem label="chocolate chip" /> <listitem label="raspberry ripple" /> <listitem label="squash swirl" /> </listbox> like with the html option element, you can assign a value for each item using the value attribute. you can then use the value in a script. ...
... pecan" /> <listitem label="chocolate chip" /> <listitem label="raspberry ripple" /> <listitem label="squash swirl" /> </listbox> like with the html option element, you can assign a value for each item using the value attribute. you can then use the value in a script. the list box will default to a suitable size, but you can control the size with the rows attribute. set it to the number of rows to display in the list box. ...
...And 6 more matches

Tree Box Objects - Archive of obsolete content
d to handle how a tree is displayed. about the tree box object box objects were described in an earlier section. the tree box object is a specialized box object used specifically for trees. the tree box implements the treeboxobject interface. redrawing the tree we already saw the rowcountchanged() function of the tree box object in the previous section. it is used to indicate that one or more rows have been added to the tree or removed from the tree. the tree will redraw the affected area. you don't need to call the rowcountchanged() function when a row has simply changed in some way, for example if a cell's label changes. in this case, there are other drawing functions that can be used. the simplest is to call invalidaterow() which will redraw a specific row in the tree. the tree will cal...
...se, there are other drawing functions that can be used. the simplest is to call invalidaterow() which will redraw a specific row in the tree. the tree will call the view to get the updated data and update the contents of the tree on screen. other redrawing functions are invalidatecell() to redraw only a single cell invalidatecolumn() to redraw a column invalidaterange() to redraw a range of rows invalidate() to redraw the entire tree. note that redrawing does not occur until the calling script ends since mozilla does not redraw in the background. note: it is not necessary to run tree.boxobject.queryinterface(components.interfaces.nsitreeboxobject) as shown in the code examples on this page because: let boxobject = tree.treeboxobject; note: is equivalent to: let boxobject = tree.b...
...ction may be used to scroll to a particular row. here is a simple example. ...
...And 6 more matches

Using Remote XUL - Archive of obsolete content
ce(components.interfaces.nsipermissionmanager) .add(uri, 'allowxulxbl', components.interfaces.nsipermissionmanager.allow_action); xul (pronounced like "zool"), which is short for xml-based user interface language, is an xml-based language for describing application interfaces. it contains elements for all common ui widgets (menus, buttons, toolbars, etc.) and many sophisticated ones (trees, browsers, color pickers). xul is often used by desktop applications like mozilla but can also be loaded from a web server and rendered inside the content pane of a compatible browser. xul loaded and rendered in this way is called remote xul and can be used for basic functions like web site navigation as well as to build sophisticated web-based applications. [***aw: we should have a screenshot here of...
...o much space, dhtml menus are slow and buggy, and site maps make you go to an intermediate page to find the information you want. xul's navigation-oriented widgets, like toolbars, menus, and trees, are a better way to provide web site navigation because they can fit a lot of navigation into a small space, render quickly, and work well. note: the downside to using xul is that it only works with browsers that understand it. this isn't a problem inside an organization that uses mozilla-based browsers exclusively, but for other sites you may need to provide another form of navigation as well. prerequisites to understand this tutorial you should have experience with tag-based languages like html along with basic javascript, css, and the dom. knowledge of xml and its syntax is useful but not req...
... if you build a xul file along with this tutorial and put it onto a web server, you need to configure your web server to specify the content type of xul files as application/vnd.mozilla.xul+xml. ...
...And 6 more matches

What is CSS? - Learn web development
vers some key terms about the language. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, and html basics (study introduction to html.) objective: to learn what css is. in the introduction to html module we covered what html is, and how it is used to mark up documents. ...
... to learn what css is. in the introduction to html module we covered what html is, and how it is used to mark up documents. these documents will be readable in a web browser. headings will look larger than regular text, paragraphs break onto a new line and have space between them. links are colored and underlined to distinguish them from the rest of the text. what you are seeing is the browser's default styles — very basic styles that the browser applies to html to make sure it will be basically readable even if no explicit styling is specified by the author of the page. however, the web would be a boring place if all websites looked like that. using css you can control exactly how html elements look in the browser, presenting your markup using whatever design you like. for mor...
...efault styles — very basic styles that the browser applies to html to make sure it will be basically readable even if no explicit styling is specified by the author of the page. however, the web would be a boring place if all websites looked like that. using css you can control exactly how html elements look in the browser, presenting your markup using whatever design you like. for more on browser/default styles, check out the following video: what is css for? as we have mentioned before, css is a language for specifying how documents are presented to users — how they are styled, laid out, etc. a document is usually a text file structured using a markup language — html is the most common markup language, but you may also come across other markup languages such as svg or xml. pr...
...And 6 more matches

Fundamental text and font styling - Learn web development
) color the color property sets the color of the foreground content of the selected elements (which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the text-decoration property). color can accept any css color unit, for example: p { color: red; } this will cause the paragraphs to become red, rather than the standard browser default black, like so: <h1>tommy the cat</h1> <p>well i remember it as though it were a meal ago...</p> <p>said tommy the cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. truly a wonder of nature this urban pr...
...its demise while staring point blank down the cavernous barrel of this awesome prowling machine. truly a wonder of nature this urban predator — tommy the cat had many a story to tell. but it was a rare occasion such as this that he did.</p> font families to set a different font on your text, you use the font-family property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. the browser will only apply a font if it is available on the machine the website is being accessed on; if not, it will just use a browser default font. a simple example looks like so: p { font-family: arial; } this would make all paragraphs on a page adopt the arial font, which is found on any computer. web safe fonts speaking of font availability, there...
...age, to allow you to customize your font usage in any way you want: web fonts. this is a little bit more complex, and we will be discussing this in a separate article later on in the module. default fonts css defines five generic names for fonts: serif, sans-serif, monospace, cursive and fantasy. those are very generic and the exact font face used when using those generic names is up to each browser and can vary for each operating system they are running on. it represents a worst case scenario where the browser will try to do its best to provide at least a font that looks appropriate. serif, sans-serif and monospace are quite predictable and should provide something reasonable. on the other hand, cursive and fantasy are less predictable and we recommend using them very carefully, testing a...
...And 6 more matches

How can we design for all types of users? - Learn web development
y-impaired people to read this page. font size you can specify font size on a website either through relative units or absolute units. absolute units absolute units are not proportionally calculated but refer to a size set in stone, so to speak, and are expressed most of the time in pixels (px). for instance, if in your css you declare this: body { font-size:16px; } … you are telling the browser that whatever happens, the font size must be 16 pixels. modern browsers get around this rule by pretending that you're asking for "16 pixels when the user sets a zoom factor of 100%". yet, for many years internet explorer adamantly displayed 16 pixels as 16 pixels. in this case, zooming did nothing, even as late as internet explorer 8, which we still have to cater to because it's still around.
...n as late as internet explorer 8, which we still have to cater to because it's still around. relative units also called proportional units, relative units are computed relative to a parent element. relative units are friendlier to accessibility because they respect the settings on the user's system. relative units are expressed in em, % and rem: percent-based sizes: % this unit tells your browser that an element's font size must be n% of the previous element whose font size was expressed. if no parent can be found, the default font size within the browser is considered as the base size for the calculation (usually the equivalent of 16 pixels). em-based sizes: em this unit is calculated the same way as percents, except that you compute in portions of 1 and not portions of 100. it is sa...
...the default font size (usually 16px). ...
...And 6 more matches

Sending form data - Learn web development
ver-side programming. objective: to understand what happens when form data is submitted, including getting a basic idea of how data is processed on the server first we'll discuss what happens to the data when a form is submitted. client/server architecture at it's most basic, the web uses a client/server architecture that can be summarized as follows. a client (usually a web browser) sends a request to a server (most of the time a web server like apache, nginx, iis, tomcat, etc.), using the http protocol. the server answers the request using the same protocol. an html form on a web page is nothing more than a convenient user-friendly way to configure an http request to send data to a server. this enables the user to provide information to be delivered in the http reques...
...e that the form is present on: <form> note: it's possible to specify a url that uses the https (secure http) protocol. when you do this, the data is encrypted along with the rest of the request, even if the form itself is hosted on an insecure page accessed using http. on the other hand, if the form is hosted on a secure page but you specify an insecure http url with the action attribute, all browsers display a security warning to the user each time they try to send data because the data will not be encrypted. the names and values of the non-file form controls are sent to the server as name=value pairs joined with ampersands. the action value should be a file on the server that can handle the incoming data, including ensuring server-side validation. the server then responds, generally han...
...ribute the method attribute defines how data is sent. the http protocol provides several ways to perform a request; html form data can be transmitted via a number of different methods, the most common being the get method and the post method to understand the difference between those two methods, let's step back and examine how http works. ...
...And 6 more matches

Styling web forms - Learn web development
previous overview: forms next in the previous few articles we looked at all the html you'll need to create and structure your web forms. in this article we will move on to looking at how to use css to style your form controls. this has historically been difficult — form controls vary greatly in how easy they are to customize with css — but it is getting easier as old browsers are retired and modern browsers give us more features to use. prerequisites: basic computer literacy, and a basic understanding of html and css. objective: to understand the issues behind styling forms, and learn some of the basic styling techniques that will be useful to you. why is styling form widgets challenging? form controls were added to html in the html 2 speci...
...c computer literacy, and a basic understanding of html and css. objective: to understand the issues behind styling forms, and learn some of the basic styling techniques that will be useful to you. why is styling form widgets challenging? form controls were added to html in the html 2 specification in 1995; css wasn't released until late 1996, and wasn't supported very well by browsers for a few years after that. browsers relied on the underlying operating system to manage and render form controls. and even with css available to style html, browser vendors have historically been reluctant to make form controls stylable because users were so accustomed to the visual appearance of their respective platforms. but this has changed. website owners want form styles that fit in wi...
... you really have to create your own using html, css, and javascript. this is beyond the scope of the core form articles, but we do look at this in an advanced article how to build custom form controls. note: there are some proprietary css pseudo-elements available that allow you to style internal components of these form controls, such as ::-moz-range-track, but these are not consistent across browsers, so can't be relied upon. we will mention these later as well. the good to style form controls that are easy to style with css, you shouldn't face much if any difficulties, since they mostly behave like any other html element. we already looked at some simple form styling in your first form, and the css building blocks module contains some useful form styling essentials too. as well as the...
...And 6 more matches

Getting started with HTML - Learn web development
ere will be an opportunity to play with html too! prerequisites: basic computer literacy, basic software installed, and basic knowledge of working with files. objective: to gain basic familiarity with html, and practice writing a few html elements. what is html? html (hypertext markup language) is not a programming language. it is a markup language that tells web browsers how to structure the web pages you visit. it can be as complicated or as simple as the web developer wants it to be. html consists of a series of elements, which you use to enclose, wrap, or mark up different parts of content to make it appear or act in a certain way. the enclosing tags can make content into a hyperlink to connect to another page, italicize words, and so on. for example, cons...
...ove, we opened the p element first, then opened the strong element. for proper nesting, we should close the strong element first, before closing the p. the following is an example of the wrong way to do nesting: <p>my cat is <strong>very grumpy.</p></strong> the tags have to open and close in a way that they are inside or outside one another. with the kind of overlap in the example above, the browser has to guess at your intent. this kind of guessing can result in unexpected results. block versus inline elements there are two important categories of elements to know in html: block-level elements and inline elements. block-level elements form a visible block on a page. a block-level element appears on a new line following the content that precedes it. any content that follows a block-le...
...ider the following example: <em>first</em><em>second</em><em>third</em> <p>fourth</p><p>fifth</p><p>sixth</p> <em> is an inline element. as you see below, the first three elements sit on the same line, with no space in between. on the other hand, <p> is a block-level element. each p element appears on a new line, with space above and below. (the spacing is due to default css styling that the browser applies to paragraphs.) note: html5 redefined the element categories: see element content categories. while these definitions are more accurate and less ambiguous than their predecessors, the new definitions are a lot more complicated to understand than block and inline. this article will stay with these two terms. note: the terms block and inline, as used in this article, should not be ...
...And 6 more matches

HTML table basics - Learn web development
overview: tables next this article gets you started with html tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes. prerequisites: the basics of html (see introduction to html). objective: to gain basic familiarity with html tables. what is a table ? a table is a structured set of data made up of rows and columns (tabular data). a table allows you to quickly and easily look up values that indicate some kind of connection between different types of data, for example a person and their age, or a day of the week, or the timetable for a local swimming pool. tables are very commonly used in human society, and have been for...
...be used for tabular data — this is what they are designed for. unfortunately, a lot of people used to use html tables to lay out web pages, e.g. one row to contain the header, one row to contain the content columns, one row to contain the footer, etc. you can find more details and an example at page layouts in our accessibility learning module. this was commonly used because css support across browsers used to be terrible; table layouts are much less common nowadays, but you might still see them in some corners of the web. in short, using tables for layout rather than css layout techniques is a bad idea. the main reasons are as follows: layout tables reduce accessibility for visually impaired users: screenreaders, used by blind people, interpret the tags that exist in an html page and re...
... example as you saw above. to recognize the table headers as headers, both visually and semantically, you can use the <th> element ('th' stands for 'table header'). this works in exactly the same way as a <td>, except that it denotes a header, not a normal cell. go into your html, and change all the <td> elements surrounding the table headers into <th> elements. save your html and load it in a browser, and you should see that the headers now look like headers. note: you can find our finished example at dogs-table-fixed.html on github (see it live also). why are headers useful? we have already partially answered this question — it is easier to find the data you are looking for when the headers clearly stand out, and the design just generally looks better. note: table headings come w...
...And 6 more matches

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
tedly execute a block of code asynchronously until you tell it to stop. these functions are: settimeout() execute a specified block of code once after a specified time has elapsed. setinterval() execute a specified block of code repeatedly with a fixed time delay between each call. requestanimationframe() the modern version of setinterval(). executes a specified block of code before the browser next repaints the display, allowing an animation to be run at a suitable framerate regardless of the environment it is being run in. the asynchronous code set up by these functions runs on the main thread (after their specified timer has elapsed). it's important to know that you can (and often will) run other code before a settimeout() call executes, or between iterations of setinterval(). ...
...llbacks you pass to these functions cannot run until the stack on the main thread is empty. as a consequence, code like settimeout(fn, 0) will execute as soon as the stack is empty, not immediately. if you execute code like settimeout(fn, 0) but then immediately after run a loop that counts from 1 to 10 billion, your callback will be executed after a few seconds. in the following example, the browser will wait two seconds before executing the anonymous function, then will display the alert message (see it running live, and see the source code): let mygreeting = settimeout(function() { alert('hello, mr. universe!'); }, 2000) the functions you specify don't have to be anonymous. you can give your function a name, and even define it somewhere else and pass a function reference to the setti...
...emo').textcontent = time; } const createclock = setinterval(displaytime, 1000); just like settimeout(), setinterval() returns an identifying value you can use later when you need to clear the interval. clearing intervals setinterval() keeps running a task forever, unless you do something about it. you'll probably want a way to stop such tasks, otherwise you may end up getting errors when the browser can't complete any further versions of the task, or if the animation being handled by the task has finished. you can do this the same way you stop timeouts — by passing the identifier returned by the setinterval() call to the clearinterval() function: const myinterval = setinterval(myfunction, 2000); clearinterval(myinterval); active learning: creating your own stopwatch! with this all sa...
...And 6 more matches

Accessibility Features in Firefox
linux currently boasts the best onscreen keyboard support in the industry via gok, the gnome onscreen keyboard. basic screen reader accessibility is available via the fire vox extension. fire vox can also be used on windows or os x. for more detailed information, please check the assistive technology compatibility guide is kept on an editable wiki. ...
...available via the fire vox extension. fire vox can also be used on windows or os x. for more detailed information, please check the assistive technology compatibility guide is kept on an editable wiki. keyboard support "mozilla firefox is a web-browser with superior keyboard support." alan cantor, cantor access consulting firefox includes keyboard access to all of its amazing features: browse with caret allows users to select arbitrary content with the keyboard and move through content as if inside a read-only editor. ...
...eb-browser with superior keyboard support." alan cantor, cantor access consulting firefox includes keyboard access to all of its amazing features: browse with caret allows users to select arbitrary content with the keyboard and move through content as if inside a read-only editor. this allows copying arbitrary pieces of text to the clipboard. the f7 key toggles this feature on/off. tabbed browsing helps keyboard users by putting all of the browsed documents in one firefox application window rather than cluttering the alt+tab order which makes keyboard navigation within the entire windows os much simpler. both history and bookmarks can be searched with a "quick search" field that quickly narrows the list down via a substring search. bookmarks can have a keyword assigned to them which c...
...And 6 more matches

Adding phishing protection data providers
vider for phishing protection, it's necessary to set a series of preferences to provide details about the provider. each data provider has a unique id number. the data provider with the id number 0 is the default data provider shipped with firefox. when installing a new provider, you should use the next unused number. ...
...ishing protection, it's necessary to set a series of preferences to provide details about the provider. each data provider has a unique id number. the data provider with the id number 0 is the default data provider shipped with firefox. when installing a new provider, you should use the next unused number. ...
...ry to set a series of preferences to provide details about the provider. each data provider has a unique id number. the data provider with the id number 0 is the default data provider shipped with firefox. when installing a new provider, you should use the next unused number. ...
...And 6 more matches

Command line options
e: since firefox 9, this does really mean what its name implies on all platforms, i.e. instances created with this parameter do not accept or send remote commands, see bug 650078. that means that such instances won't be re-used. also when using this argument a new instance is created in any case. -override /path/to/override.ini load the specified override.ini file to override application.ini (browser/app/application.ini). this can be used to suppress the migration wizard at startup by loading the following override.ini. firefox only. [xre] enableprofilemigrator=0 -profilemanager start with profile manager. short form: -p without a profile name. -p "profile_name" bypass profile manager and launch application with the profile named profile_name. useful for dealing with multiple profiles.
...tforms accept both upper and lower case. -profile "profile_path" start with the profile with the given path. firefox, thunderbird and seamonkey2.x only. "profile_path" can either be an absolute path ("/path/to/profile") or a relative path ("path/to/profile"). note: on mac os x specifying a relative path is not supported anymore from firefox 4.0 and up due to a regression, see bug 673955. browser -browser start with the browser component. firefox and seamonkey only. -foreground make this instance the active application. -new-tab url open url in a new tab. firefox and seamonkey2.x only. -new-window url open url in a new window. firefox and seamonkey2.x only. --kiosk url open url full screen without user interface. firefox 71 and later. -preferences open options/preferences wi...
...ound make this instance the active application. -new-tab url open url in a new tab. firefox and seamonkey2.x only. -new-window url open url in a new window. firefox and seamonkey2.x only. --kiosk url open url full screen without user interface. firefox 71 and later. -preferences open options/preferences window. firefox and seamonkey2.x only. ...
...And 6 more matches

Creating a Language Pack
fox-source-docs. to create a language pack, or a localization repack, you first need to go through the initial setup process. pre-build steps in the .mozconfig, you want to have mk_add_options moz_objdir=@topsrcdir@/obj-firefox-build ac_add_options --disable-compile-environment ac_add_options --with-l10n-base=../l10n-central # path relative to moz_objdir ac_add_options --enable-application=[browser or mail] the given path should have your localization directory as child (i.e., a subdirectory ab-cd where ab-cd is your locale code). you still need to specify which application you're localizing (e.g., for firefox, that's browser, thunderbird would be mail). configure step you need to prepare the build directory, which is done with ./mach configure you only need to run this if the ver...
...ectory, which is done with ./mach configure you only need to run this if the version number of firefox changes. windows: replace make with mozmake in the commands below! creating a langpack we will now merge the localized files from x-testing locale with the en-us files from the original source. every time you want to create a langpack, you need to be in the directory obj-firefox-build/browser/locales. it is likely that you will continue to generate language packs as your progress just to test your work. while in that directory, issue the following command: $ make merge-x-testing locale_mergedir=$(pwd)/mergedir x-testing: browser chrome browser aboutcerterror.dtd // add and localize this file ... // lots of notifications about missi...
...ergedir. you'll see that it contains the files which in your localization were missing some entities. all other files will be taken from x-testing directly. it's now time to create a langpack with: $ make langpack-x-testing locale_mergedir=$(pwd)/mergedir each time you need to generate a new langpack, you need to run this command. remember that you need to be in the directory obj-firefox-build/browser/locales. $ make langpack-x-testing locale_mergedir=$(pwd)/mergedir now go to the dist directory to find your langpack ready to use! $ cd ../../dist the xpi file can be found in the directory win32/xpi on windows, linux-i686/xpi or linux-x86_64 on linux or mac/xpi on mac. open the xpi file contained in this directory with firefox to see your work. you have to set your selected language sti...
...And 6 more matches

HTTP Cache
e about the intermediate cache below) nsiloadcontextinfo distinguishes the scope of the storage demanded to open. mandatory argument to *storage methods of nsicachestorageservice. ...
... to open. mandatory argument to *storage methods of nsicachestorageservice. //github.com/realityripple/uxp/blob/master/netwerk/base/public/nsiloadcontextinfo.idl it is a helper interface wrapping following four arguments into a single one: private-browsing boolean flag anonymous load boolean flag app id number (0 for no app) is-in-browser boolean flag helper functions to create nsiloadcontextinfo objects: c++ consumers: functions at loadcontextinfo.h exported header js consumers: resource://gre/modules/loadcontextinfo.jsm module methods two storage objects created with the same set of nsiloadcontextinfo arguments are identical, containing the same cache entries. two s...
...ored in it). the anew argument in oncacheentryavailable is true for and only for new entries. only one consumer (the so called "writer") may have such an entry available (obtained via oncacheentryavailable). other parallel openers of the same cache entry are blocked (wait) for invocation of their oncacheentryavailable until one of the following occurs: the writer simply throws the entry away: other waiting opener in line gets the entry again as "new", the cycle repeats. this applies in general, writers throwing away the cache entry means a failure to write the cache entry and a new writer is being looked for again, the cache entry remains empty (a.k.a. "new"). the writer stored all necessary meta data in the cache entry and called metadataready on...
...And 6 more matches

CustomizableUI.jsm
hese widgets are shown. note that it is expressly not really aware about the specific ui used by users to make customizations. this is handled by customizemode.jsm, which interacts with customizableui through a listener mechanism. areas areas are parts of the user interface in which customizable widgets can be placed. customizableui assumes that each area it is told about is present in every browser window. customizableui is aware of two types of areas: toolbars and the menu panel. areas are registered using the registerarea method and unregistered using the unregisterarea method. when a customizable toolbar's xbl binding is constructed (generally, that is when a <toolbar customizable="true"/> node is appended to the document and isn't invisible), the binding will call into customizableui...
...end(awindow) fired when exiting customize mode in awindow. onwidgetoverflow(anode, acontainer) fired when a widget's dom node is overflowing its container, a toolbar, and will be displayed in the overflow panel. onwidgetunderflow(anode, acontainer) fired when a widget's dom node is not overflowing its container, a toolbar, anymore. onwindowopened(awindow) fired when a new customizable (ie browser) window is opened. onwindowclosed(awindow) fired when a customizable (ie browser) window is closed. method overview void addlistener(alistener); void removelistener(alistener); void registerarea(aareaid, aproperties); void registertoolbarnode(atoolbar, aexistingchildren); void registermenupanel(apanel); void unregisterarea(aareaid, ades...
... defaultcollapsed (internal only) only applied to type_toolbar areas. set to true if the toolbar should be collapsed by default. defaults to true. set to null to ensure that reset/indefaultstate don't care about the toolbar's collapsed state. registertoolbarnode() register a concrete node for a registered area. this method is automatically called from any toolbar in the main browser window that has its customizable attribute set to true. there should normally be no need to call it yourself. note that ideally, you should register your toolbar using registerarea before any of the toolbars have their xbl bindings constructed (which will happen when they're added to the dom and are not hidden). if you don't, and your toolbar has a defaultset attribute, customizableui will reg...
...And 6 more matches

Index
r set of rules for issuing certificates for web site certificates. instead of simply verifying that the requester of a certificate is in control of an administrative email address at the desired web site's domain, it's required that the ca performs a verification of real world identity documents (such as a company registration document with the country's authority), and it's also required that a browser software performs a revocation check with the ca, prior to granting validity to the certificate. in order to distinguish an ev certificate, cas will embed a policy oid in the certificate, and the browser is expected to verify that a trust chain permits the end entity (ee) certificate to make use of the policy. only the apis of the newer libpkix engine are capable of performing a policy verifica...
...at's a good opportunity to talk about ssl/tls connections to servers in general (not just ev, not just websites). whenever this document mentions ssl, it refers to either ssl or tls. (tls is a newer version of ssl with enhanced features.) when establishing an ssl connection to a server, (at least) a server certificate (and its trust chain) is exchanged from the server to the client (e.g., the browser), and the client verifies that the certificate can be verified (including matching the name of the expected destination server). another part of the handshake between both parties is a key exchange. because public key encryption is more expensive (more calculations required) than symmetric encryption (where both parties use the same key), a key agreement protocol will be executed, where the pub...
...me to a certificate when importing it, making it easier for you to refer to it later. it should be noted that the first database format that can be accessed simultaneously by multiple applications is key4.db/cert9.db – database files with lower numbers will most likely experience unrecoverable corruption if you access them with multiple applications at the same time. in other words, if your browser or your server operates on an older nss database format, don't use the nss tools to operate on it while the other software is executing. at the time of writing nss and the mozilla applications still use the older database file format by default, where each application has its own nss database. if you require a copy of a certificate stored in an nss database, including its private key, you ca...
...And 6 more matches

Embedded Dialog API
posing gecko dialogs in embedding applications problem statement an application embedding gecko cannot tightly control its own windows and still allow gecko to be a fully functional web browser. in any single window, gecko can be expected to play nicely within its given boundaries. but it must be allowed to create additional windows at times perhaps unexpected by the containing appliction. these new windows can be entire new browser windows opened in response to web page script, or dialogs or alerts which may arise from script or merely during normal operation of the browser. part of gecko's embedding api is callbacks into the embedding application for creating new windows. the complete windowing portion of the api is large and complex, but it need not be entirely implemented. its si...
...gecko can use the latter to pose dialogs built from xul. xul dialogs are part of the gecko package; they are the default dialog posing mechanism. many embedding applications will find them entirely sufficient. ...
...ons which implement merely the simplest, base gecko windowing api will then have a mixture of xul and native windows. applications concerned with presenting a consistent dialog appearance have the option of implementing the complete dialog posing api. responsibilities of the embedding application basic windowing api to be able to respond to script requests to open new windows, an embedded gecko browser must have a way of opening new windows. this is accomplished using a callback into the embedding application. this basic api will by itself provide the minimal functionality gecko needs to create new windows, and an embedding application must implement at least this much. applications concerned with a consistent overall dialog appearance will probably choose to implement the complete api as wel...
...And 6 more matches

WebIDL bindings
g context() on it. the name of the c++ method is simply the name of the webidl operation with the first letter converted to uppercase. webidl overloads are turned into c++ overloads: they simply call c++ methods with the same name and different signatures. ...
...the webidl operation with the first letter converted to uppercase. webidl overloads are turned into c++ overloads: they simply call c++ methods with the same name and different signatures. ...
...owning unions, and variadic arguments become nsstring. nullable strings are represented by the same types as non-nullable ones, but the string will return true for domstringisnull(). returning null as a string value can be done using setdomstringtonull on the out param if it's an nsastring or calling setnull() on a domstring. ...
...And 6 more matches

Working with data
of the new type is undefined or larger than the size of the original object's data block, typeerror is thrown. this works very much like a standard c type cast or c++ reinterpret_cast. example: cast an array this example shows how to cast an array of a certain type to another type. ...
...([ctypes.int64("1"), ctypes.int64("2"), ctypes.int64("3"), ctypes.int64("4")])"` my.addressofelement(1).contents; // this outputs `int64 { }` my.addressofelement(1).contents.tostring(); // outputs: `"2"` // now this is how to get the array of long's cast to array of int's var mycasted = ctypes.cast(my.address(), ctypes.int.array(my.length).ptr).contents; mycasted.tostring(); // this outputs to browser console: `"ctypes.int.array(4)([1, 2, 3, 4])"` mycasted.addressofelement(1).contents; // this outputs `2` mycasted.addressofelement(1).contents.tostring(); // outputs: `"2"` source of this, and to see wrong ways of casting, and explanation on why this is the right way to cast an array (explained by matching constructor's) see here: githubgist :: _ff-addon-tutorial-jsctypes_castingarrays dat...
...r to an 8-bit or 16-bit array of characters). you'll have to convert those yourself, as covered above. making non-null terminated strings if for some reason non-null terminated strings are needed, this can also be accomplished. 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. to make a non-null terminated string this is how it is done: var...
...And 6 more matches

URLs - Plugins
s chapter describes retrieving urls and displaying them on specified target pages, posting data to an http server, uploading files to an ftp server, and sending mail. uniform resource locator (url) protocols provide a means for locating and accessing resources that are available on the internet and on intranets. plug-ins can request and receive the data associated with urls of any type that the browser can handle, including http, ftp, news, mailto, and gopher. the table below summarizes urls supported by gecko. in addition, gecko may support urls not listed on this table. url scheme description about locates browser information or "fun" pages. file (host-specific filenames) locates files on a specific host computer rather than an internet resource. ...
...items on a gopher server. obsolete since gecko 2.0 http (hypertext transfer protocol) locates resources on the internet. javascript executes javascript code that follows the url. netscape-specific. mailto (electronic mail address) locates the internet mailing address of an individual or service. nethelp displays a nethelp topic in a nethelp window. browser-specific. news (usenet news) locates usenet news groups or individual usenet articles. nntp (usenet news using nntp access) locates usenet news groups or individual usenet articles; alternate to news. prospero (prospero directory service) locates a resource on a prospero directory server. telnet (reference to interactive sessions) locates an inter...
...ce identifier (uri): generic syntax", and the iana uri scheme registry. getting urls posting urls getting urls to retrieve a url and display it on a specified target page, use the npn_geturl, npn_geturlnotify, and npp_urlnotify functions. this section describes the methods and procedures used for getting the url and displaying the page. ...
...And 6 more matches

DevTools API - Firefox Developer Tools
is currently a work-in-progress, there are usable portions of page inspector and debugger that may be used currently. introduction the devtools api provides a way to register and access developer tools in firefox. in terms of user interface, each registered tool lives in its own tab (we call one tab a panel). these tabs are located in a box we call a toolbox. a toolbox can be hosted within a browser tab (at the bottom or on the side), or in its own window (we say that the toolbox is undocked). a toolbox (and all the tools it contains) is linked to a target, which is the object the tools are debugging. a target is usually a web page (a tab), but can be other things (a chrome window, a remote tab,…). in terms of code, each tool has to provide a tooldefinition object. a definition is a js ...
...et. the target this toolbox is debugging. hosttype toolbox.hosttype. the type of the host this toolbox is docked to. the value is one of the toolbox.hosttype constants. zoomvalue the current zoom level of the toolbox. constants the toolbox constructor contains following constant properties. toolbox.hosttype.bottom host type for the default toolbox host at the bottom of the browser window. toolbox.hosttype.side host type for the host at the side of the browser window. toolbox.hosttype.window host type for the separate toolbox window. toolbox.hosttype.custom host type for a custom frame host. methods getcurrentpanel() get the currently active toolpanel. return value: the toolpanel object that was returned from toolpanel.build(). getpanel(...
...board shortcut for the tool is activated while the tool is the active tool. parameters: panel {toolpanel} - the toolpanel for the tool. toolbox {toolbox} - the toolbox for the shortcut was triggered for. return value: undefined. properties the tooldefinition object can contain following properties. most of them are optional and can be used to customize the presense of the tool in the browser and the toolbox. id string, required. an unique identifier for the tool. it must be a valid id for an html element. url string, required. an url of the panel document. label string, optional. the tool's name. if undefined the icon should be specified. tooltip string, optional. the tooltip for the tool's tab. panellabel string, optional. an accessibility label for...
...And 6 more matches

Console messages - Firefox Developer Tools
the context menu for network messages includes a few extra items in addition the globally-available ones: copy link location acts as you would expect, copying the url into the clipboard open in network panel switches context to the network tab, selects the request and shows you the details resend request sends the network request again. open url in new tab opens the url in a new browser tab. if the resource is an image, the image will be opened in a new tab. if the resource is a stylesheet, you will see the css rules, etc. js javascript errors contain a "learn more" link that takes you to the javascript error reference containing additional advice for fixing issues: source maps the web console understands source maps. this means that if your javascript sources are co...
...rformance reasons (see bug 1452143). use the filtering feature to show them. some css messages contain a disclosure triangle at the left of the message. click it to view more information about the error, as well as which dom nodes are affected by the error. reflow events the web console also logs reflow events under the css category. a reflow is the name given to the operation in which the browser calculates the layout of all or part of the page. reflows occur when a change has happened to a page that the browser thinks affects the layout. many events can trigger reflows, including: resizing the browser window, activating pseudoclasses like :hover, or manipulating the dom in javascript. because reflows can be computationally expensive and directly affect the user interface, they can hav...
...ecting "reflows". each message is labeled "reflow" and shows the time taken to execute the reflow. if the reflow is a synchronous reflow triggered from javascript, it also shows a link to the line of code that triggered the reflow. click the link to open the file in the debugger. synchronous and asynchronous reflows if a change is made that invalidates the current layout — for example, the browser window is resized or some javascript modifies an element's css — the layout is not recalculated immediately. instead, the reflow happens asynchronously, the next time the browser decides it needs to be done (generally, the next time the browser repaints). in this way the browser can save up a collection of invalidating changes and recalculate their effect at once. however, if some javascript...
...And 6 more matches

Navigator - Web APIs
he read-only window.navigator property. properties doesn't inherit any properties, but implements those defined in navigatorid, navigatorlanguage, navigatoronline, navigatorcontentutils, navigatorstorage, navigatorstorageutils, navigatorconcurrenthardware, navigatorplugins, and navigatorusermedia. standard navigatorid.appcodename read only returns the internal "code" name of the current browser. do not rely on this property to return the correct value. navigatorid.appname read only returns a domstring with the official name of the browser. do not rely on this property to return the correct value. navigatorid.appversion read only returns the version of the browser as a domstring. do not rely on this property to return the correct value. navigator.battery read only returns a ...
...nly returns false if setting a cookie will be ignored and true otherwise. navigator.geolocation read only returns a geolocation object allowing accessing the location of the device. navigatorconcurrenthardware.hardwareconcurrency read only returns the number of logical processor cores available. navigatorplugins.javaenabled read only returns a boolean flag indicating whether the host browser is java-enabled or not. navigator.keyboard read only returns a keyboard object which provides access to functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard. navigatorlanguage.language read only returns a domstring representing the preferred language of the user, usually the language of the browser ui. the null value is returned whe...
... returns a mediacapabilities object that can expose information about the decoding and encoding capabilities for a given format and output capabilities. navigator.maxtouchpoints read only returns the maximum number of simultaneous touch contact points are supported by the current device. navigatorplugins.mimetypes read only returns an mimetypearray listing the mime types supported by the browser. navigator.online read only returns a boolean indicating whether the browser is working online. navigator.permissions read only returns a permissions object that can be used to query and update permission status of apis covered by the permissions api. navigatorid.platform read only returns a string representing the platform of the browser. do not rely on this function to return a sig...
...And 6 more matches

Pointer events - Web APIs
s when the pen is lifted or moved. digitizer a sensing device with a surface that can detect contact. most commonly, the sensing device is a touch-enabled screen that can sense input from an input device such as a pen, stylus, or finger. some sensing devices can detect the close proximity of the input device, and the state is expressed as a hover following the mouse. hit test the process the browser uses to determine a target element for a pointer event. typically, this is determined by considering the pointer's location and also the visual layout of elements in a document on screen media. pointer a hardware-agnostic representation of input devices that can target a specific coordinate (or set of coordinates) on a screen. examples of pointer input devices are mouse, pen/stylus, and touch...
... pointerdown onpointerdown fired when a pointer becomes active buttons state. pointermove onpointermove fired when a pointer changes coordinates. this event is also used if the change in pointer state can not be reported by other events. pointerup onpointerup fired when a pointer is no longer active buttons state. pointercancel onpointercancel a browser fires this event if it concludes the pointer will no longer be able to generate events (for example the related device is deactived). pointerout onpointerout fired for several reasons including: pointer is moved out of the hit test boundaries of an element; firing the pointerup event for a device that does not support hover (see pointerup); after firing the pointercancel event (s...
...element 'target' will receive/capture further events el.setpointercapture(ev.pointerid); } function init() { let el = document.getelementbyid("target"); el.onpointerdown = downhandler; } </script> <body onload="init();"> <div id="target"> touch me ... </div> </body> </html> the following example shows a pointer capture being released (when a pointercancel event occurs. the browser does this automatically when a pointerup or pointercancel event occurs. <html> <script> function downhandler(ev) { let el = document.getelementbyid("target"); // element "target" will receive/capture further events el.setpointercapture(ev.pointerid); } function cancelhandler(ev) { let el = document.getelementbyid("target"); // release the pointer ca...
...And 6 more matches

Using XMLHttpRequest - Web APIs
-------------314911788813839 content-disposition: form-data; name="baz" the first line. the second line. -----------------------------314911788813839-- however, if you are using the get method, a string like the following will be simply added to the url: ?foo=bar&baz=the%20first%20line.%0athe%20second%20line. a little vanilla framework all these effects are done automatically by the web browser whenever you submit a <form>. if you want to perform the same effects using javascript you have to instruct the interpreter about everything. therefore, how to send forms in pure ajax is too complex to be explained here in detail. for this reason, here we place a complete (yet didactic) framework, able to use all four ways to submit, and to upload files: <!doctype html> <html> <head> <meta ht...
...e="submit" value="submit" /> </p> </fieldset> </form> <h3>enctype: text/plain</h3> <form action="register.php" method="post" enctype="text/plain" onsubmit="ajaxsubmit(this); return false;"> <fieldset> <legend>registration example</legend> <p> your name: <input type="text" name="user" /> </p> <p> your message:<br /> <textarea name="message" cols="40" rows="8"></textarea> </p> <p> <input type="submit" value="submit" /> </p> </fieldset> </form> <h3>enctype: multipart/form-data</h3> <form action="register.php" method="post" enctype="multipart/form-data" onsubmit="ajaxsubmit(this); return false;"> <fieldset> <legend>upload example</legend> <p> first name: <input type="text" name="firstname" /><br /> last...
...le name="photos[]"> </p> <p> <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="bike" /> <label for="vehicle_bike">i have a bike</label><br /> <input id="vehicle_car" type="checkbox" name="vehicle[]" value="car" /> <label for="vehicle_car">i have a car</label> </p> <p> describe yourself:<br /> <textarea name="description" cols="50" rows="8"></textarea> </p> <p> <input type="submit" value="submit" /> </p> </fieldset> </form> </body> </html> to test this, create a page named register.php (which is the action attribute of these sample forms), and put the following minimalistic content: <?php /* register.php */ header("content-type: text/plain"); /* note: you should never use `print_r()` in production scrip...
...And 6 more matches

CSS Containment - CSS: Cascading Style Sheets
the specification defines a single css property contain. this document describes the basic aims of the specification. basic example many webpages contain a number of sections which are independent of each other. for example a listing of article headlines and content, as in the mark-up below. ...
...ice article</h2> <p>content here.</p> </article> <article> <h2>another heading of another article</h2> <p>more content here.</p> </article> each article has the contain property with a value of content applied in the css. ...
...</p> </article> <article> <h2>another heading of another article</h2> <p>more content here.</p> </article> each article has the contain property with a value of content applied in the css. article { contain: content; } each article is independent of the other articles on the page, and so they have been given contain: content in order to indicate to the browser that this is the case. ...
...And 6 more matches

WebKit CSS extensions - CSS: Cascading Style Sheets
curity -webkit-text-stroke-color -webkit-text-stroke-width -webkit-text-stroke -webkit-text-zoom -webkit-transform-origin-x -webkit-transform-origin-y -webkit-transform-origin-z u -webkit-user-drag -webkit-user-modify * a few are on the standards, unprefixed track ** new syntax has been standardized. property links to the new synax. old prefixed syntax is still supported in some browsers. webkit-prefixed properties on the standards track -webkit-appearance -webkit-font-size-delta -webkit-mask-composite -webkit-mask-position-x -webkit-mask-position-y -webkit-mask-repeat-x -webkit-mask-repeat-y formerly proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the pre...
...n-span -webkit-column-width -webkit-columns f -webkit-filter -webkit-flex -webkit-flex-basis -webkit-flex-direction -webkit-flex-flow -webkit-flex-grow -webkit-flex-shrink -webkit-flex-wrap -webkit-font-feature-settings -webkit-font-kerning -webkit-font-variant-ligatures g-j -webkit-grid -webkit-grid-area -webkit-grid-auto-columns -webkit-grid-auto-flow -webkit-grid-auto-rows -webkit-grid-column -webkit-grid-column-end -webkit-grid-column-gap -webkit-grid-column-start -webkit-grid-gap -webkit-grid-row -webkit-grid-row-end -webkit-grid-row-gap -webkit-grid-row-start -webkit-grid-template -webkit-grid-template-areas -webkit-grid-template-columns -webkit-grid-template-rows h-l -webkit-hyphens -webkit-justify-content -webkit-justify-items -webkit-just...
... -webkit-mask-position-x* -webkit-mask-position-y* * supported unprefixed in firefox, with prefix in safari. supported in firefox with -webkit- prefix the following properties are supported with the -webkit- prefix in firefox. many of...
...And 6 more matches

touch-action - CSS: Cascading Style Sheets
the touch-action css property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser). /* keyword values */ touch-action: auto; touch-action: none; touch-action: pan-x; touch-action: pan-left; touch-action: pan-right; touch-action: pan-y; touch-action: pan-up; touch-action: pan-down; touch-action: pinch-zoom; touch-action: manipulation; /* global values */ touch-action: inherit; touch-action: initial; touch-action: unset; by default, panning (scrolling) and pinching gestures are handled exclusively by the browser. ...
...n: pan-right; touch-action: pan-y; touch-action: pan-up; touch-action: pan-down; touch-action: pinch-zoom; touch-action: manipulation; /* global values */ touch-action: inherit; touch-action: initial; touch-action: unset; by default, panning (scrolling) and pinching gestures are handled exclusively by the browser. an application using pointer events will receive a pointercancel event when the browser starts handling a touch gesture. ...
... touch-action: manipulation; /* global values */ touch-action: inherit; touch-action: initial; touch-action: unset; by default, panning (scrolling) and pinching gestures are handled exclusively by the browser. an application using pointer events will receive a pointercancel event when the browser starts handling a touch gesture. by explicitly specifying which gestures should be handled by the browser, an application can supply its own behavior in pointermove and pointerup listeners for the remaining gestures. ...
...And 6 more matches

<button>: The Button element - HTML: Hypertext Markup Language
switch, tab dom interface htmlbuttonelement attributes this element's attributes include the global attributes. autofocus html5 this boolean attribute specifies that the button should have input focus when the page loads. only one element in a document can have this attribute. autocomplete this attribute on a <button> is nonstandard and firefox-specific. unlike other browsers, firefox persists the dynamic disabled state of a <button> across page loads. setting autocomplete="off" on the button disables this feature; see bug 654072. disabled this boolean attribute prevents the user from interacting with the button: it cannot be pressed or focused. firefox, unlike other browsers, persists the dynamic disabled state of a <button> across page loads. use the autoco...
...errides the novalidate attribute of the button's form owner. this attribute is also available on <input type="image"> and <input type="submit"> elements. formtarget html5 if the button is a submit button, this attribute is a author-defined name or standardized, underscore-prefixed keyword indicating where to display the response from submitting the form. ...
...thor-defined name or standardized, underscore-prefixed keyword indicating where to display the response from submitting the form. this is the name of, or keyword for, a browsing context (a tab, window, or <iframe>). if this attribute is specified, it overrides the target attribute of the button's form owner. the following keywords have special meanings: _self: load the response into the same browsing context as the current one. this is the default if the attribute is not specified. _blank: load the response into a new unnamed browsing context — usually a new tab or window, depending on the user’s browser settings. _parent: load the response into the parent browsing context of the current one. if there is no parent, this option behaves the same way as _self. _top: load the respons...
...And 6 more matches

<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
the html inline frame element (<iframe>) represents a nested browsing context, embedding another html page into the current one. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. each embedded browsing context has its own session history and document. the browsing context that embeds the others is called the parent browsing context. the topmost browsing context — the one with no parent — is usually the browser window, represented by the window object. because each browsing context is a complete document environment, every <iframe> in a page requires increased memory and other computing resources. while theoreti...
...this attribute is considered a legacy attribute and redefined as allow="payment". csp a content security policy enforced for the embedded resource. see htmliframeelement.csp for details. height the height of the frame in css pixels. default is 150. importance the download priority of the resource in the <iframe>'s src attribute. allowed values: auto (default) no preference. ...
...nload priority of the resource in the <iframe>'s src attribute. allowed values: auto (default) no preference. the browser uses its own heuristics to decide the priority of the resource. high the resource should be downloaded before other lower-priority page resources. low the resource should be downloaded after other higher-priority page resources. loading indicates how the browser should load the iframe: eager: load the iframe immediately, regardless if it is outside the visible viewport (this is the default value). lazy: defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser. name a targetable name for the embedded browsing context. this can be used in the target attribute of the <a>, <form>, or <base>...
...And 6 more matches

<input type="image"> - HTML: Hypertext Markup Language
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 use...
...e form should not be validated before submission to the server. this overrides the value of the novalidate attribute on the element's owning form. this attribute is also available on <input type="submit"> and <button> elements. formtarget a string which specifies a name or keyword that indicates where to display the response received after submitting the form. the string must be the name of a browsing context (that is, a tab, window, or <iframe>. a value specified here overrides any target given by the target attribute on the <form> that owns this input. in addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used: _self loads the response into the same browsing context as the one that contains the form. this will replace the cur...
...t owns this input. in addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used: _self loads the response into the same browsing context as the one that contains the form. this will replace the current document with the received data. this is the default value used if none is specified. _blank loads the response into a new, unnamed, browsing context. this is typically a new tab in the same window as the current document, but may differ depending on the configuration of the user agent. ...
...And 6 more matches

<input type="search"> - HTML: Hypertext Markup Language
ag is specified when compiling the regular expression, so that the pattern is treated as a sequence of unicode code points, instead of as ascii. no forward slashes should be specified around the pattern text. if the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely. tip: use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. you should also include other explanatory text nearby. see the section specifying a pattern for details and an example. placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. it should be a word or short phrase that ...
...e enter or return key while editing the field. this information is used to decide what kind of label to use on the enter key on the virtual keyboard. note: this has been standardized as the global attribute enterkeyhint, but is not yet widely implemented. to see the status of the change being implemented in firefox, see bug 1490661. permitted values are: go, done, next, search, and send. the browser decides, using this hint, what label to put on the enter key. results the results attribute—supported only by safari—is a numeric value that lets you override the maximum number of entries to be displayed in the <input> element's natively-provided drop-down menu of previous search queries. the value must be a non-negative decimal number. if not provided, or an invalid value is given, ...
...cides, using this hint, what label to put on the enter key. results the results attribute—supported only by safari—is a numeric value that lets you override the maximum number of entries to be displayed in the <input> element's natively-provided drop-down menu of previous search queries. the value must be a non-negative decimal number. if not provided, or an invalid value is given, the browser's default maximum number of entries is used. using search inputs <input> elements of type search are very similar to those of type text, except that they are specifically intended for handling search terms. they are basically equivalent in behavior, but user agents may choose to style them differently by default (and, of course, sites may use stylesheets to apply custom styles to them). bas...
...And 6 more matches

<source>: The Media or Image Source element - HTML: Hypertext Markup Language
the html <source> element specifies multiple media resources for the <picture>, the <audio> element, or the <video> element. it is an empty element, meaning that it has no content and does not have a closing tag. it is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories none. permitted content none, it is an empty element. tag omission it must have a start...
... attributes this element includes the global attributes. media media query of the resource's intended media; this should be used only in a <picture> element. sizes is a list of source sizes that describes the final rendered width of the image represented by the source. each source size consists of a comma-separated list of media condition-length pairs. this information is used by the browser to determine, before laying the page out, which image defined in srcset to use. please note that sizes will have its effect only if width dimension descriptors are provided with srcset instead of pixel ratio values (200w instead of 2x for example). the sizes attribute has an effect only when the <source> element is the direct child of a <picture> element. src required for <audio> and <vid...
...te has an effect only when the <source> element is the direct child of a <picture> element. src required for <audio> and <video>, address of the media resource. the value of this attribute is ignored when the <source> element is placed inside a <picture> element. srcset a list of one or more strings separated by commas indicating a set of possible images represented by the source for the browser to use. each string is composed of: one url specifying an image. a width descriptor, which consists of a string containing a positive integer directly followed by "w", such as 300w. the default value, if missing, is the infinity. a pixel density descriptor, that is a positive floating number directly followed by "x". the default value, if missing, is 1x. each string in the list mus...
...And 6 more matches

Preloading content with rel="preload" - HTML: Hypertext Markup Language
this ensures they are available earlier and are less likely to block the page's render, improving performance. this article provides a basic guide to how <link rel="preload"> works. ...
...yle.css" as="style"> <link rel="preload" href="main.js" as="script"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>bouncing balls</h1> <canvas></canvas> <script src="main.js" defer></script> </body> here we preload our css and javascript files so they will be available as soon as they are required for the rendering of the page later on. this example is trivial, as the browser probably discovers the <link rel="stylesheet"> and <script> elements in the same chunk of html as the preloads, but the benefits can be seen much more clearly the later resources are discovered and the larger they are. for example: resources that are pointed to from inside css, like fonts or images. resources that javascript can request, like json, imported scripts, or web workers. larger ...
...its can be seen much more clearly the later resources are discovered and the larger they are. for example: resources that are pointed to from inside css, like fonts or images. resources that javascript can request, like json, imported scripts, or web workers. larger images and video files. preload has other advantages too. using as to specify the type of content to be preloaded allows the browser to: prioritize resource loading more accurately. store in the cache for future requests, reusing the resource if appropriate. apply the correct content security policy to the resource. set the correct accept request headers for it. what types of content can be preloaded? many different content types can be preloaded. the possible as attribute values are: audio: audio file, as typica...
...And 6 more matches

Evolution of HTTP - HTTP
renamed to world wide web during its implementation in 1990. built over the existing tcp and ip protocols, it consisted of 4 building blocks: a textual format to represent hypertext documents, the hypertext markup language (html). a simple protocol to exchange these documents, the hyperttext transfer protocol (http). a client to display (and accidentally edit) these documents, the first web browser called worldwideweb. a server to give access to the document, an early version of httpd. these four building blocks were completed by the end of 1990, and the first servers were already running outside of cern by early 1991. on august 6th 1991, tim berners-lee's post on the public alt.hypertext newsgroup is now considered as the official start of the world wide web as a public project. the ...
... page </html> unlike subsequent evolutions, there were no http headers, meaning that only html files could be transmitted, but no other type of documents. there were no status or error codes: in case of a problem, a specific html file was send back with the description of the problem contained in it, for human consumption. ...
...send back with the description of the problem contained in it, for human consumption. http/1.0 – building extensibility http/0.9 was very limited and both browsers and servers quickly extended it to be more versatile: versioning information is now sent within each request (http/1.0 is appended to the get line) a status code line is also sent at the beginning of the response, allowing the browser itself to understand the success or failure of the request and to adapt its behavior in consequence (like in updating or using its local cache in a specific way) the notion of http headers has been introduced, both for the requests and the responses, allowing metadata to be transmitted and making the protocol extremely flexible and extensible. with the help of the new http headers, the abilit...
...And 6 more matches

Animation performance and frame rate - Web Performance
animation on the web can be done via svg, javascript, including <canvas> and webgl, css animation, <video>, animated gifs and even animated pngs and other image types. the performance cost of animating a css property can vary from one property to another, and animating expensive css properties can result in jank as the browser struggles to hit a smooth frame rate. for animated media, such as video and animated gifs, the main performance concern is file size - downloading the file size fast enough to not negatively impact performance is the greatest issue. code based animations, be it css, svg, <canvas>, webgl or other javascript animations, can cause performance issues even if the bandwidth footprint is small. these animations can consume cpu and/or cause jank. while performance is sensit...
...gh to not negatively impact performance is the greatest issue. code based animations, be it css, svg, <canvas>, webgl or other javascript animations, can cause performance issues even if the bandwidth footprint is small. these animations can consume cpu and/or cause jank. while performance is sensitive to the particular system and its load, performance tools can help you understand the work the browser's doing to render your site, and help you prevent and diagnose problems when they occur. users expect all interface interactions to be smooth and all user interfaces to be responsive. animation can help make a site feel faster and responsive, but animations can also make a site feel slower and janky if not done correctly. responsive user interfaces have a frame rate of 60 frames per second (fp...
... to be responsive. animation can help make a site feel faster and responsive, but animations can also make a site feel slower and janky if not done correctly. responsive user interfaces have a frame rate of 60 frames per second (fps). while it is not always possible to maintain 60fps, it is important to maintain a high and steady frame rate for all animations. let's take a look at how we can use browser tools to inspect the frame rate. we'll also discuss some tips to create and maintain a fast and steady frame rate. the developer tool's frame rate and waterfall charts provide insight into the work the browser is performing to animate code. using these tools you can measure an application's animation frame rate, and diagnose performance bottlenecks if any are found. with css animations you sp...
...And 6 more matches

On page load - Archive of obsolete content
this article is for xul/javascript developers who want to have custom code executed each time a new page is loaded in browser/mail. if you need finer control over custom code execution—for example, as documents are loading or when tabs are switched—see progress listeners. progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events. progress listeners implement the nsiwebprogresslistener interface. ...
...sions to be notified of events associated with documents loading in the browser and with tab switching events. progress listeners implement the nsiwebprogresslistener interface. ...
...fied of events associated with documents loading in the browser and with tab switching events. progress listeners implement the nsiwebprogresslistener interface. ...
...And 5 more matches

List of Former Mozilla-Based Applications - Archive of obsolete content
aintained. a list of actively maintained mozilla-based applications is also available. ...
...tion angelsoft tools for startups, vcs, and angel investors switched from xulrunner-based client to a web application autodesk maya 3d modeling tool switched off of gecko for help browser in version 8.5 blam feed reader switched to webkit in version 1.8.6 boxee media center software switched to webkit in version 1.0 epiphany browser switched from gecko to webkit flock social browsing flock switched from being firefox-based to chromium-based when it released a new beta on june 16, 2010 jolicloud web operating system as of march 2010, rw/w reports jolicloud is on chrome/chrome os joost tv over internet switched from xulrunner-based client to a web application liferea ...
...flock switched from being firefox-based to chromium-based when it released a new beta on june 16, 2010 jolicloud web operating system as of march 2010, rw/w reports jolicloud is on chrome/chrome os joost tv over internet switched from xulrunner-based client to a web application liferea news aggregator switched to webkit in version 1.6 manyone browser browser originally mozilla-based but now i believe the have a web-based tool (need reference for that) miro (formerly democracy player) video switched from xulrunner to webkit in version 3.0.2 moblin browser browser when moblin became meego it switched from a custom gecko-based browser to chrome nautilus file manager hasn't used mozilla code si...
...And 5 more matches

Creating a Firefox sidebar extension - Archive of obsolete content
introduction this article is a quick start for the creation of a new sidebar for firefox. ...
...ifierskey "shift accel"> the content folder includes our sidebar, the emptysidebar.xul is shown in example 3. it creates a page holding one label. other elements can be included, please read the xul tutorials for more information. example 3. ...
...ift accel"> the content folder includes our sidebar, the emptysidebar.xul is shown in example 3. it creates a page holding one label. other elements can be included, please read the xul tutorials for more information. example 3. ...
...And 5 more matches

Install script template - Archive of obsolete content
/** doron rosenberg -- doronatnospamallowedherenetscape.com arun k. ranganathan -- aruneratnospamallowedherenetscape.com petter ericson -- petteratnospamallowedherecycore.com this is an install.js file that does the following -- 1. installs to the current browser that is invoking the installation 2. additionally installs to a secondary location on the windows desktop, in this case c:\winnt\system32\myplugin\ 3. writes registry keys exposing the above secondary install location for other browsers to find. the keys are written according to the specification: http://mozilla.org/projects/plugins/first-install-problem.html and follows the plid specification: http://mozilla.org/projects/plugins/plugin-identifier.html **/ // define some global variables var plugin_file =...
...se will be used when the win32 registry keys are written var hkey_local_machine = "hkey_local_machine"; var hkey_current_user = "hkey_current_user"; var reg_moz_path = "software\\mozillaplugins"; // my own error code in case secondary installation fails var nosecondaryinstall = 1; // error return codes need some memory var err; // error return codes when we try and install to the current browser var errblock1; // error return codes when we try and do a secondary installation var errblock2 = 0; // global variable containing our secondary install location var secondaryfolder; //special error values used by the cycore developers (www.cycore.com) who helped make this install script var exceptionoccurederror = -4711; var winregisnullerror = -4712; var invalidrootkeyer...
...ncel the installation // initinstall is quite an overloaded method, but i have invoked it here with three strings // which are globally defined err = initinstall(software_name, plid, version); if (err != 0) { // call initinstall again in case illegal characters in plid err = initinstall(software_name, software_name, version); if (err != 0) cancelinstall(err); } //addfiles to current browser block var pluginsfolder = getfolder("plugins"); //verify disk space if(verifydiskspace(pluginsfolder, plugin_size+component_size)) { // start installing plugin shared library reseterror(); // install the plugin shared library to the current browser's plugin directory errblock1 = addfile (plid, version, plugin_file, pluginsfolder, null); if (errblock1!=0) { logcomment("could not ad...
...And 5 more matches

Building accessible custom components in XUL - Archive of obsolete content
sed to build the control; they had no way of knowing that a particular collection of div and span elements should be treated as a single cohesive control (such as a tab bar or a treeview). by implementing dhtml accessibility techniques, web developers can declare that generic html elements are really acting as specific gui controls (such as a treeitem within a treeview). firefox 1.5 is the first browser to support dhtml accessibility; it maps the declarations within the html page to the underlying accessibility architecture so that assistive technologies can "read" a web page and know how to present these complex controls to the end user. this has all been well-documented for some time. however, it is less well-known that the same dhtml accessibility techniques can be applied to xul, mozilla's...
...ssible out-of-the-box. however, if you are building custom controls in xul, you may need to use dhtml accessibility techniques to ensure that your custom controls are equally accessible. a super-simple spreadsheet download stage-1.zip install stage-1.xpi to build our xul spreadsheet, we'll use three built-in xul controls: a single grid element to contain the other elements and position them in rows and columns. description elements for each row and column header. label elements for each cell in the spreadsheet. the xul markup is straightforward. we define the grid, then define the headers for each row (numbered 1 through 7), then define the column header and cells for each column. the label for each header and cell is defined in the value attribute. the flex attributes are simply for layou...
...e simply for layout. note: the row and column headers are denoted by description elements, and individual cells are denoted by label elements. this is not an accessibility requirement; as we'll see in the next section, the actual xul elements are irrelevant because we will define the role of each element in a separate attribute. ...
...And 5 more matches

Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
r button toolkit applications have customizable toolbars; therefore, it's common practice for extensions to add their toolbar buttons to the toolbar palette, rather than adding them directly to the toolbar. the latter is possible, but is not recommended and is harder to implement. adding a button to the toolbar palette is very easy. just add code like this to your overlay: <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="myextension-button" class="toolbarbutton-1" label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;" oncommand="myextension.ontoolbarbuttoncommand(event);"/> </toolbarpalette> notes: the id of the palette (browsertoolbarpalette in the example) depends on the window (the parent window of the toolbar you wish to insert a button). see b...
...ctly in icons and text mode; it also adjusts padding. set the command to be executed when the button is clicked in the oncommand attribute. if you need to handle middle-click, add this line after the oncommand line. ...
...sion.onclick(event);"/> </toolbarpalette> onclick: function(event) { switch(event.button) { case 0: // left click break; case 1: // middle click break; case 2: // right click break; } } to add more buttons, put more <toolbarbutton> elements inside the <toolbarpalette> element. wrap elements other than <toolbarbutton> in <toolbaritem>. adding the button bootstrap style adding a button to the browserpalette on runtime in a bootstrap addon is a bit different because the browserpalette is indirectly reached. a simple document.getelementbyid('browsertoolbarpalette') will not work. this is the code to create and add it in. let button = doc.createelement("toolbarbutton"); button.setattribute("id", button_id); button.setattribute("label", "replace bookmark"); button.setattribute("class", "toolba...
...And 5 more matches

Tree Selection - Archive of obsolete content
« previousnext » the section will describe how to get and set the selected items in a tree. getting the selected tree items each item in a tree (that corresponds to treeitem element, if using content tree view) may be selected individually. if you add the seltype attribute to the tree, set to the value single, the user may only select one row at a time. otherwise, the user may select multiple rows, which will not necessarily be contiguous. the tree provides a number of functions which can be used to determine whether an item is selected. handling the select event first, let's see how we can determine when an item is selected. the onselect() event handler may be added to the tree element. when the user selects an item from the tree, the event handler is called. the user may also change the ...
...ncluded in the count just after their parents. this means that if there are 3 top-level items and each has two child items, there will be a total of 9 items. the first item (at index 0) will be the first top-level item. the next item at index 1 will be its first child. the second child will be at index 2 and the second parent item will be at position 3 and so on. in the image, there are eight rows displayed, of which two are selected. the first selected row has an index of 4 and the second has an index of 7. the rows that are not displayed are not included in the index count. multiple selection for trees that allow multiple selection, getting the list of selected rows is a bit more complicated. the tree's view has a selection property which holds information about the selected rows. this s...
...just want to find out if a specific row is selected, use can use the isselected() function. it takes a row index as an argument and returns true if that row is selected. alert(tree.view.selection.isselected(3)); modifying the tree selection the selection object has a number of functions which may be used to change the selection. ...
...And 5 more matches

XUL Questions and Answers - Archive of obsolete content
the current issue is a person exploring if it is possible to have checkbox support for multi column lists. ...
...if user wants checkbox support for...
...hange a xul tree cell/row/item background color with javascript? to set the background color you need to set the property for the cell/row and not for the item. an example of this is: var tree = document.getelementbyid('treeid'); selectedtreeitem = tree.view.getitematindex(tree.currentindex); selectedtreeitem.firstchild.setattribute('style', 'background: #ff0000'); what is an example of tab browser in xul? an example of tab browswer in xul how can i get uris on open tabs? using the following code sample, // get browsers object var browsers=document.getelementbyid('content').browsers; var numbrowsers=browsers.length; for (var i=0; numbrowsers>i; i++) { var thisuri=browsers[i].currenturi.spec; // do something with it. } the person can get the titles too using the .contentti...
...And 5 more matches

iframe - Archive of obsolete content
examples | attributes | properties | methods | related ] an inner frame that works much like the html <iframe> element. the src attribute can be used to specify the content of the frame. this content is a separate document. the children of the iframe are ignored. currently, xul iframes running in remote processes are not supported. if you want to run content in a remote process, use a xul browser element. warning: when used in chrome-privileged documents (either html or xul) such as firefox addons, the contents of the frame may have the same permissions as firefox itself. this can be a serious security vulnerability, for example if you use src="http://...". when used in this case, please see displaying web content in an extension without security issues. more information is availabl...
...ecurity vulnerability, for example if you use src="http://...". when used in this case, please see displaying web content in an extension without security issues. more information is available in the xul tutorial. ...
...he firstchild is the menupopup element document.getelementbyid('myframe').setattribute('src', url); } </script> attributes showcaret type: boolean whether or not to cause a typing caret to be visible in the content area. default is false. src type: uri the uri of the content to appear in the element. type type: one of the values below. ...
...And 5 more matches

listbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used to create a list of items where one or more of the items may be selected. a listbox may contain multiple columns. there are numerous methods which allow the items in the listbox to be retrieved and modified. you may specify the number of rows to display in the list using the rows attribute. additional rows can be viewed using a scroll bar. a listbox is expected to contain listitem elements. all the rows in the listbox are the same height, which is the height of the tallest item in the list. if you wish to create a list with variable height rows, or with non-text content, you should instead use the richlistbox element. see list controls for more information. attributes ...
...g a scroll bar. a listbox is expected to contain listitem elements. all the rows in the listbox are the same height, which is the height of the tallest item in the list. if you wish to create a list with variable height rows, or with non-text content, you should instead use the richlistbox element. see list controls for more information. ...
... properties accessibletype, currentindex, currentitem, disabled, disablekeynavigation, itemcount, listboxobject, selectedcount, selectedindex, selecteditem, selecteditems, seltype, suppressonselect, tabindex, value methods additemtoselection, appenditem, clearselection, ensureelementisvisible, ensureindexisvisible, getindexoffirstvisiblerow, getindexofitem, getitematindex, getnumberofvisiblerows, getrowcount, getselecteditem, insertitemat, invertselection, movebyoffset, removeitemat, removeitemfromselection, scrolltoindex, selectall, selectitem, selectitemrange, timedselect, toggleitemselection examples <listbox id="thelist"> <listitem label="ruby"/> <listitem label="emerald"/> <listitem label="sapphire" selected="true"/> <listitem label="diamond"/> </listbox> <listbox i...
...And 5 more matches

Debugging a XULRunner Application - Archive of obsolete content
ure that the information you need to know is displayed on them. see also debugging javascript prefs setting the following prefs will make your debugging life much easier! preferences should be in a .js file in the directory %appname%/defaults/preferences/. it doesn't matter what the file is called (as long as the extension is .js), so debug.js is as good as any! /* 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. see: pr...
...erformance and usability. see: preference reference for more information about these preferences. console to enable a console on windows, start xulrunner with the -console argument. note that -console goes after the application.ini argument: e.g. xulrunner.exe /path/to/application.ini -console to output text to the console, use dump("my text here\n");. this will only work if the pref pref("browser.dom.window.dump.enabled", true) is enabled. to output dump calls instead to a file, set browser.dom.window.dump.file to the file destination where the log should be created and restart the application. if you would like the console messages to appear in the console you used to launch the application, you can use the gecko console redirector. precompiled binaries are available in the zipped a...
... with the red stop icon next to it). jsdump(str) (function defined below) will output str as a "message" with a speech bubble icon next to it: function jsdump(str) { components.classes['@mozilla.org/consoleservice;1'] .getservice(components.interfaces.nsiconsoleservice) .logstringmessage(str); } for more information about the error console see the error console and browser console article. browser debugger as of gecko 44, it is no longer possible to start the devtools server from xul apps. see bug 1244163. starting with xulrunner 24, you should use the firefox browser debugger to debug your xulrunner apps. add the following code to your xul app: components.utils.import('resource://gre/modules/devtools/dbg-server.jsm'); if (!debuggerserver.initialized) { d...
...And 5 more matches

External resources for plugin creation - Archive of obsolete content
s there are several open source projects designed to assist with the creation of npapi plugins. please note that even when using these, it is still a good idea to have an understanding of what is going on under the hood, regardless of the level of abstraction provided. framework: firebreath project home page project history description (from the project creators): firebreath is a cross-platform browser plugin framework written in c++. plugins created with firebreath work on all major browsers, including firefox 3.0 and later. platforms supported include windows, linux, and mac os x (intel). feature highlights include thread safety checks, unicode support (with std::wstring), activex support, built-in drawing model negotiation for mac, automatic type conversion (including javascript arrays ...
...script arrays and objects), advanced security features, and more. supported development environments are visual studio on windows, xcode on mac, and gcc on linux. all platforms rely on cmake for easy cross-platform builds. project: nixysa project home page description (from the home page): nixysa is a framework written in python to automatically generate glue code for npapi plugins (plugins for browsers such as google chrome or firefox), letting you easily expose c++ classes to javascript from a simple idl representation. nixysa was originally conceived for the needs of o3d, but is flexible enough to support a wide range of use cases. project: juce project home page description (from the home page): juce (jules' utility class extensions) is an all-encompassing c++ class library for developing...
...class extensions) is an all-encompassing c++ class library for developing cross-platform applications. it contains pretty much everything you're likely to need to create most applications, and is particularly good for creating highly-specialised uis and for handling graphics and sound. ...
...And 5 more matches

Theme changes in Firefox 4 - Archive of obsolete content
impact theme developers, since many of the files that they need to pull out and work with are now in a new place. in particular, the new file omni.jar contains most of the resources, including the skin. it's also important to note that skin files are now split into two subfolders within the omni.jar file, and you'll need to look in both places to find all the skin resources you need. /chrome/browser/skin contains application-specific skin resource files. /chrome/toolkit/skin contains toolkit skin files. note: when extracting omni.jar, you may incorrectly get false warnings from some virus protection software. in addition, due to the way the archive is optiimized, some zip utilities don't work with it. controlling the actual icon size used by add-on toolbar buttons the iconsize att...
...ns application-specific skin resource files. /chrome/toolkit/skin contains toolkit skin files. note: when extracting omni.jar, you may incorrectly get false warnings from some virus protection software. in addition, due to the way the archive is optiimized, some zip utilities don't work with it. ...
... use of the iconsize attribute on toolbar elements add-ons use the iconsize attribute to determine which icon they should display when a button is placed in a specific toolbar. ...
...And 5 more matches

Using the W3C DOM - Archive of obsolete content
« previousnext » the document object has properties for accessing collections of elements, such as document.images and document.forms. some browsers have non-standard properties, such as internet explorer's document.all[], that are not part of the w3c document object model (dom) standards and may cause javascript errors in standards-compliant browsers. the w3c document object model provides interfaces dom elements to scriptable objects. w3c dom standards are well supported by modern browsers, however the standards are moving target so support for newer features should be tested before use. ...
...ent object model (dom) standards and may cause javascript errors in standards-compliant browsers. the w3c document object model provides interfaces dom elements to scriptable objects. w3c dom standards are well supported by modern browsers, however the standards are moving target so support for newer features should be tested before use. using w3c standards means that code will run in compliant browsers with minimal need for cross-browser support, whereas code based on proprietary standards requires much more effort to be compatible with multiple user agents. unsupported dom-related properties the following ie proprietary document object properties are not supported in the w3c document object model: document.layers[] id_attribute_value document.all document.all.id_attribute_value doc...
...the method returns a reference to the uniquely ...
...And 5 more matches

Vendor Prefix - MDN Web Docs Glossary: Definitions of Web-related terms
browser vendors sometimes add prefixes to experimental or nonstandard css properties and javascript apis, so developers can experiment with new ideas while—in theory—preventing their experiments from being relied upon and then breaking web developers' code during the standardization process. developers should wait to include the unprefixed property until browser behavior is standardized. browser vendors are working to stop using vendor prefixes for experimental features. web developers have been using them on production web sites, despite their experimental nature. ...
...d upon and then breaking web developers' code during the standardization process. developers should wait to include the unprefixed property until browser behavior is standardized. browser vendors are working to stop using vendor prefixes for experimental features. web developers have been using them on production web sites, despite their experimental nature. this has made it more difficult for browser vendors to ensure compatibility and to work on new features; it's also been harmful to smaller browsers who wind up forced to add other browsers' prefixes in order to load popular web sites. lately, the trend is to add experimental features behind user-controlled flags or preferences, and to create smaller specifications which can reach a stable state much more quickly. css prefixes the maj...
...endors to ensure compatibility and to work on new features; it's also been harmful to smaller browsers who wind up forced to add other browsers' prefixes in order to load popular web sites. lately, the trend is to add experimental features behind user-controlled flags or preferences, and to create smaller specifications which can reach a stable state much more quickly. ...
...And 5 more matches

CSS and JavaScript accessibility best practices - Learn web development
. most of the css you'll write for forms will be for sizing the elements, lining up labels and inputs, and getting them looking neat and tidy. you shouldn't however deviate too much from the expected visual feedback form elements receive when they are focused, which is basically the same as links (see above). you could style form focus/hover states to make this behaviour more consistent across browsers or fit in better with your page design, but don't get rid of it altogether — again, people rely on these clues to help them know what is going on. tables tables for presenting tabular data. you can see a good, simple example of table html and css in our table-css.html example (see it live also). table css generally serves to make the table fit better into your design and look less ugly. ...
...p them know what is going on. tables tables for presenting tabular data. you can see a good, simple example of table html and css in our table-css.html example (see it live also). table css generally serves to make the table fit better into your design and look less ugly. it is a good idea to make sure the table headers stand out (normally using bold), and use zebra striping to make different rows easier to parse. color and color contrast when choosing a color scheme for your website, make sure that the text (foreground) color contrasts well with the background color. your design might look cool, but it is no good if people with visual impairments like color blindness can't read your content. there is an easy way to check whether your contrast is large enough to not cause problems. ther...
...keeping it unobtrusive you should keep unobtrusive javascript in mind when creating your content. the idea of unobtrusive javascript is that it should be used wherever possible to enhance functionality, not build it in entirely — basic functions should ideally work without javascript, although it is appreciated that this is not always an option. but again, a large part of it is using built-in browser functionality where possible. good example uses of unobtrusive javascript include: providing client-side form validation, which alerts users to problems with their form entries quickly, without having to wait for the server to check the data. if it isn't available, the form will still work, but validation might be slower. providing custom controls for html5 <video>s that are accessible to ...
...And 5 more matches

Web fonts - Learn web development
roduction to css), css text and font fundamentals. objective: to learn how to apply web fonts to a web page, using either a third party service, or by writing your own code. font families recap as we looked at in fundamental text and font styling, the fonts applied to your html can be controlled using the font-family property. this takes one or more font family names, and the browser travels down the list until it finds a font it has available on the system it is running on: p { font-family: helvetica, "trebuchet ms", verdana, sans-serif; } this system works well, but traditionally web developers' font choices were limited. there are only a handful of fonts that you can guarantee to be available across all common systems — the so-called web-safe fonts. you can use the...
... web-safe alternatives, followed by the default system font, but this adds overhead in terms of testing to make sure that your designs look ok with each font, etc. web fonts but there is an alternative, which works very well, right back to ie version 6. web fonts are a css feature that allows you to specify font files to be downloaded along with your website as it is accessed, meaning that any browser that supports web fonts can have exactly the fonts you specify available to it. amazing! the syntax required looks something like this: first of all, you have a @font-face block at the start of the css, which specifies the font file(s) to download: @font-face { font-family: "myfont"; src: url("myfont.woff"); } below this you can then use the font family name specified inside @font-face t...
...ily: "myfont"; src: url("myfont.woff"); } below this you can then use the font family name specified inside @font-face to apply your custom font to anything you like, as normal: html { font-family: "myfont", "bitstream vera serif", serif; } the syntax does get a bit more complex than this; we'll go into more detail below. ...
...And 5 more matches

Debugging HTML - Learn web development
ses can look a little intimidating to someone who doesn't know anything about rust. debugging doesn't have to be scary though — the key to being comfortable with writing and debugging any programming language or code is familiarity with both the language and the tools. html and debugging html is not as complicated to understand as rust. html is not compiled into a different form before the browser parses it and shows the result (it is interpreted, not compiled). and html's element syntax is arguably a lot easier to understand than a "real programming language" like rust, javascript, or python. the way that browsers parse html is a lot more permissive than how programming languages are run, which is both a good and a bad thing. permissive code so what do we mean by permissive? well, gen...
... language's syntax and know what the error messages mean. logic errors: these are errors where the syntax is actually correct, but the code is not what you intended it to be, meaning that the program runs incorrectly. these are often harder to fix than syntax errors, as there isn't an error message to direct you to the source of the error. html itself doesn't suffer from syntax errors because browsers parse it permissively, meaning that the page still displays even if there are syntax errors. browsers have built-in rules to state how to interpret incorrectly written markup, so you'll get something running, even if it is not what you expected. this, of course, can still be a problem! note: html is parsed permissively because when the web was first created, it was decided that allowing peop...
...it is today, if it had been more strict from the very beginning. active learning: studying permissive code it's time to study the permissive nature of html code. first, download our debug-example demo and save it locally. this demo is deliberately written with some built-in errors for us to explore (the html markup is said to be badly-formed, as opposed to well-formed). next, open it in a browser. you will see something like this: this immediately doesn't look great; let's look at the source code to see if we can work out why (only the body contents are shown): <h1>html debugging examples</h1> <p>what causes errors in html? <ul> <li>unclosed elements: if an element is <strong>not closed properly, then its effect can spread to areas you didn't intend <li>badly nested elem...
...And 5 more matches

Images in HTML - Learn web development
e this: <img src="images/dinosaur.jpg"> and so on. note: search engines also read image filenames and count them towards seo. therefore, you should give your image a descriptive filename; dinosaur.jpg is better than img835.png. you could embed the image using its absolute url, for example: <img src="https://www.example.com/images/dinosaur.jpg"> but this is pointless, as it just makes the browser do more work, looking up the ip address from the dns server all over again, etc. you'll almost always keep the images for your website on the same server as your html. warning: most images are copyrighted. do not display an image on your webpage unless: you own the image. you have received explicit, written permission from the image owner. you have ample proof that the image is, in fact,...
...s a long time to render because of a slow internet connection. for example, our above code could be modified like so: <img src="images/dinosaur.jpg" alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"> the easiest way to test your alt text is to purposely misspell your filename. if for example our image name was spelled dinosooooor.jpg, the browser wouldn't display the image, and would display the alt text instead: so, why would you ever see or need alt text? it can come in handy for a number of reasons: the user is visually impaired, and is using a screen reader to read the web out to them. in fact, having alt text available to describe images is useful to most users. as described above, the spelling of the file or path name might...
...ay the image, and would display the alt text instead: so, why would you ever see or need alt text? it can come in handy for a number of reasons: the user is visually impaired, and is using a screen reader to read the web out to them. in fact, having alt text available to describe images is useful to most users. as described above, the spelling of the file or path name might be wrong. the browser doesn't support the image type. some people still use text-only browsers, such as lynx, which displays the alt text of images. you may want to provide text for search engines to utilize; for example, search engines can match alt text with search queries. users have turned off images to reduce data transfer volume and distractions. this is especially common on mobile phones, and in countries w...
...And 5 more matches

A first splash into JavaScript - Learn web development
the game logic and ui are completely reset, then go back to step 1. let's now move forward, looking at how we can turn these steps into code, building up the example, and exploring javascript features as we go. initial setup to begin this tutorial, we'd like you to make a local copy of the number-guessing-game-start.html file (see it live here). open it in both your text editor and your web browser. at the moment you'll see a simple heading, paragraph of instructions and form for entering a guess, but the form won't currently do anything. the place where we'll be adding all our code is inside the <script> element at the bottom of the html: <script> // your javascript goes here </script> adding variables to store our data let's get started. first of all, add the following lines in...
...have defined a function by using the keyword function, followed by a name, with parentheses put after it. after that we put two curly braces ({ }). inside the curly braces goes all the code that we want to run whenever we call the function. when we want to run the code, we type the name of the function followed by the parentheses. let's try that now. save your code and refresh the page in your browser. then go into the developer tools javascript console, and enter the following line: checkguess(); after pressing return/enter, you should see an alert come up that says "i am a placeholder"; we have defined a function in our code that creates an alert whenever we call it. note: you'll learn a lot more about functions later in the course. operators javascript operators allow us to perform...
...ould see an alert come up that says "i am a placeholder"; we have defined a function in our code that creates an alert whenever we call it. note: you'll learn a lot more about functions later in the course. operators javascript operators allow us to perform tests, do math, join strings together, and other such things. if you haven't already done so, save your code, refresh the page in your browser, and open the developer tools javascript console. 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. first let's look at arithmetic operators, for example: operator name example + addition 6 + 9 - subtraction ...
...And 5 more matches

Inheritance in JavaScript - Learn web development
pt basics (see first steps and building blocks) and oojs basics (see introduction to objects). objective: to understand how it is possible to implement inheritance in javascript. prototypal inheritance so far we have seen some inheritance in action — we have seen how prototype chains work, and how members are inherited going up a chain. but mostly this has involved built-in browser functions. how do we create an object in javascript that inherits from another object? let's explore how to do this with a concrete example. getting started first of all, make yourself a local copy of our oojs-class-inheritance-start.html file (see it running live also). inside here you'll find the same person() constructor example that we've been using all the way through the module, with a...
...pe and will therefore inherit, if and when needed, all the methods available on person.prototype. we need to do one more thing before we move on. after adding the last line, teacher.prototype's constructor property is now equal to person(), because we just set teacher.prototype to reference an object that inherits its properties from person.prototype! try saving your code, loading the page in a browser, and entering teacher.prototype.constructor into the console to verify. this can become a problem, so we need to set this right. you can do so by going back to your source code and adding the following line at the bottom: object.defineproperty(teacher.prototype, 'constructor', { value: teacher, enumerable: false, // so that it does not appear in 'for in' loop writable: true }); ...
... here is not the only way to create inheriting classes in javascript, but it works ok, and it gives you a good idea about how to implement inheritance in javascript. you might also be interested in checking out some of the new ecmascript features that allow us to do inheritance more cleanly in javascript (see classes). we didn't cover those here, as they are not yet supported very widely across browsers. all the other code constructs we discussed in this set of articles are supported as far back as ie9 or earlier, and there are ways to achieve earlier support than that. a common way is to use a javascript library — most of the popular options have an easy set of functionality available for doing inheritance more easily and quickly. coffeescript for example provides class, extends, etc. a ...
...And 5 more matches

Debugging JavaScript
la itself, but it may also be useful for web developers. it should give pointers to tools, aids and tricks which make debugging your code easier. web console this is the first place to go when you're debugging a web page; open the web console using the web console option in the web developer menu. this shows any javascript errors in your app, as well as any logging calls from the console api. browser console the browser console lets you see all javascript errors and logging in the browser, including from firefox code. to enable it, go to about:config in the url bar and set devtools.chrome.enabled to true, or set the "enable chrome and add-on debugging" option in the developer tool settings. activate it through with the menu tools > web developer > browser console. you can also start the b...
...er console the browser console lets you see all javascript errors and logging in the browser, including from firefox code. to enable it, go to about:config in the url bar and set devtools.chrome.enabled to true, or set the "enable chrome and add-on debugging" option in the developer tool settings. activate it through with the menu tools > web developer > browser console. ...
...he url bar and set devtools.chrome.enabled to true, or set the "enable chrome and add-on debugging" option in the developer tool settings. activate it through with the menu tools > web developer > browser console. ...
...And 5 more matches

Performance best practices for Firefox front-end engineers
n that can be done off of the main thread. if you need more elevated privileges than a standard worker allows, consider using a chromeworker, which is a firefox-only api which lets you create workers with more elevated privileges. use requestidlecallback() if you simply cannot avoid doing some kind of long job on the main thread, try to break it up into smaller pieces that you can run when the browser has a free moment to spare, and the user isn't doing anything. you can do that using requestidlecallback() and the cooperative scheduling of background tasks api, and doing it only when we have a free second where presumably the user isn’t doing something. see also the blog post collective scheduling with requestidlecallback. as of bug 1353206, you can also schedule idle events in non-dom c...
... <xul:panel> to a document, set the hidden attribute to true by default. by doing so, you cause the binding applied on demand rather than at load time, which makes initial construction of the xul document faster. get familiar with the pipeline that gets pixels to the screen learn how pixels you draw make their way to the screen. knowing the path they will take through the various layers of the browser engine will help you optimize your code to avoid pitfalls. the rendering process goes through the following steps: the above image is used under creative commons attribution 3.0, courtesy of this page from our friends at google, which itself is well worth the read. for a very down-to-earth explanation of the style, layout, paint and composite steps of the pipeline, this hacks blog post do...
..., in a single frame tick, instead of across multiple frames. see detecting and avoiding synchronous reflow below for more information. this also means that requestanimationframe() is not a good place to put queries for layout or style information. detecting and avoiding synchronous style flushes what are style flushes? when css is applied to a document (html or xul, it doesn’t matter), the browser does calculations to figure out which css styles will apply to each element. this happens the first time the page loads and the css is initially applied, but can happen again if javascript modifies the dom. javascript code might, for example, change dom node attributes (either directly or by adding or removing classes from elements), and can also add, remove, or delete dom nodes. because style...
...And 5 more matches

How to Report a Hung Firefox
use the menu button to find the crash me icon and click the icon. firefox crash report ui should appear. please check the box to send the crash report to mozilla start firefox. type "about:crashes" in the url bar and click on the top listing. create a new bug report at bugzilla.mozilla.org using this link. ...
...s" in the url bar and click on the top listing. create a new bug report at bugzilla.mozilla.org using this link. another way to trigger a crash in a hung tab is to run the following script in the browser console (opened after selecting the hung tab): let wm = cc["@mozilla.org/appshell/window-mediator;1"]. ...
...ar and click on the top listing. create a new bug report at bugzilla.mozilla.org using this link. another way to trigger a crash in a hung tab is to run the following script in the browser console (opened after selecting the hung tab): let wm = cc["@mozilla.org/appshell/window-mediator;1"]. ...
...And 5 more matches

L10n Checks
nstall running it mercurial source (source) mode l10n checks gathers the directories to compare from an ini file, usually found in $app/locales/l10n.ini. you pass both the path to the ini file and the parent directory of the localizations as first arguments, followed by the locale codes of the locales you want to compare. if you want to test the localization for de, run: check-l10n-completeness browser/locales/l10n.ini ../l10n/ de add-ons (xpi) mode l10n checks gathers the locales to compare from the chrome.manifest file inside the xpi file. you pass the path to the xpi file (optionally) followed by the locale codes of the locales you want to compare. if you want to test the localization for de, run: check-l10n-completeness -i xpi my-extension.xpi de to check all locales in an extension: ch...
...s can compare two locales found in different directories. you pass both paths to the directories, e.g.: check-l10n-completeness -i dir en-us/ my/ files (file) mode l10n checks can compare two files. 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. ...
...ocales found in different directories. you pass both paths to the directories, e.g.: check-l10n-completeness -i dir en-us/ my/ files (file) mode l10n checks can compare two files. 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. ...
...And 5 more matches

Places utilities for JavaScript
warning: the content of this article may be out of date. utils.js is accessible at the following url: http://mxr.mozilla.org/mozilla-centr...ntent/utils.js this file includes utility functions used by a lot of the bookmarking, tagging, and annotation services that are built into firefox. by default its only included in browser.xul. its not an interface, and as such it will never be frozen, but it provides some easy to use functions that can save you from reinventing the wheel and cluttering up your own classes/functions when you need it. global objects there are a few global objects and constants defined in utils.js. these are: qi_node qi_node(anode, aiid) runs a query interface on a bookmark node to expose the interface available to that type. if the interface isn't ...
... organizer_query_anno - this annotation is used by the places organizer to decide what nodes should be shown in the left pane. warning : placesutils class since firefox 3 beta 5 has been split into: placesutils: can be used in any toolkit application placesuiutils: only in firefox placesutils this is a gigantic object full of usefulness if you need to do any bookmark work from within browser.xul. as such, it gets its own special section. placesutils method overview nsiuri createfixeduri(string aspec); string getformattedstring(string key, string params); string getstring(string key); boolean nodeisfolder(nsinavhistoryresultnode anode); boolean nodeisbookmark(nsinavhistoryresultnode anode); boolean nodeisseparator(nsinavhistor...
...oz-place-separator", type_x_moz_place: "text/x-moz-place", type_x_moz_url: "text/x-moz-url", type_html: "text/html", type_unicode: "text/unicode", services there's easy access to some of the common services used in bookmarks or history navigation here. for instance, normally in order to get access to the bookmarks service, you have to run something like: components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); with places utils all you need to write is: placesutils.bookmarks this should save on the number of references to the service that are needed, and can help clean up interfaces that are already fairly cluttered. there are currently 11 services defined in here. bookmarks nsinavbookmarksservice histo...
...And 5 more matches

nsIPrintingPrompt
the parentage is hidden by the getinterface though which it is gotten. inherits from: nsisupports last changed in gecko 1.7 this interface is identical to nsipintingpromptservice but without the parent nsidomwindow parameter. see nsiprintingpromptservice for all documentation. this service enables embedders to implement their own print and progress dialogs. each platform has a "base" or "backstop" implementation of the service. the service is automatically registered at start up. ...
...vice to display at least the print dialog and a print progress dialog or you may implement just one of the dialogs and pass back ns_error_not_implemented for any of the others. for the print dialog: you may stub out this service by having all the methods return ns_error_not_implemented. you can then fly you own dialog and then properly fill in the printsettings object before calling nsiwebbrowserprint's print method. if you stub out this service you must set "printsilent" to true, if you do not, printing will terminate and an error dialog will be displayed. mac: the gfx layer still supports default toolkit behavior for displaying the print dialog. if an embedder implemented service returns ns_error_not_implemented for "showprintdialog" the toolkit will display the native print d...
...howprogress() - not implemented (provided by os) gtk: there are no native dialogs for gtk. ...
...And 5 more matches

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. gecko runs javascript from a variety of different sources and at a variety of different privilege levels. the javascript code that along with the c++ core, implements the browser itself is called chrome code and runs using system privileges. if chrome-privileged code is compromised, the attacker can take over the user's computer. javascript loaded from normal web pages is called content code. because this code is being loaded from arbitrary web pages, it is regarded as untrusted and potentially hostile, both to other websites and to the user. as well as these two levels of privilege, chrome cod...
...me privileges. so this is not a straightforward privilege escalation attack, although it might lead to one if the chrome code is sufficiently confused. how you get xray vision privileged code automatically gets xray vision whenever it accesses objects belonging to less-privileged code. 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. waiving xray vision xray vision is a kind of security heuristic, designed to make most common operations on untrusted objects simple and safe. however, there a...
...ive xray protection, but then you can no longer rely on any properties or functions being, or doing, what you expect. any of them, even setters and getters, could have been redefined by untrusted code. ...
...And 5 more matches

Using popup notifications
then clicking on the notification icon to bring it back again. a popup notification can include a text message, a button action, and zero or more additional actions provided in a drop-down menu accessed through the notification's button. creating a popup notification popup notifications can be created using the popupnotifications.jsm javascript code module. ...
...ons provided in a drop-down menu accessed through the notification's button. creating a popup notification popup notifications can be created using the popupnotifications.jsm javascript code module. this code module is imported by the browser, so you don't need to do it explicitly yourself. ...
...a drop-down menu accessed through the notification's button. creating a popup notification popup notifications can be created using the popupnotifications.jsm javascript code module. this code module is imported by the browser, so you don't need to do it explicitly yourself. ...
...And 5 more matches

Type conversion
e if src == 1: true var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.bool } ])(); mystruct.v = true; console.log(mystruct.v.tostring()); // 'true' mystruct.v = false; console.log(mystruct.v.tostring()); // 'false' mystruct.v = 1; console.log(mystruct.v.tostring()); // 'true' mystruct.v = 0; console.log(mystruct.v.tostring()); // 'false' mystruct.v = 10; // throws error mystruct.v = "a"; // throws error integer types target type source converted value ctypes.char16_t js string (only if its length == 1) src.charcodeat(0) any integer types js number (only if fits to the size) src js boolean if src == true: 1 if src == false: 0 var mystruct = ctypes.structtype("mystructtype"...
... note that the...
... note that the following table does not contain environment dependent types (ctypes.long, etc.). ...
...And 5 more matches

Mozilla
ting the most recent cache version from the most recent cache group containing the entry under the url or a matching namespace. benchmarking debug builds (--enable-debug) and non-optimized builds (--disable-optimize) are much slower. any performance metrics gathered by such builds are largely unrelated to what would be found in a release browser. browser chrome tests the browser chrome test suite is an automated testing framework designed to allow testing of application chrome windows using javascript. it currently allows you to run javascript code in the same scope as the main firefox browser window and report results using the same functions as the mochitest test framework. a...
...s an automated testing framework designed to allow testing of application chrome windows using javascript. it currently allows you to run javascript code in the same scope as the main firefox browser window and report results using the same functions as the mochitest test framework. as all tests, they won't work in a build with tests disabled (--disable-tests). browser security an important aspect of developing code for any browser, including firefox, as well as any web-oriented project, is its security. these articles provide important guides and references to ensuring the code you write is secure, including both design recommendations and testing guidelines. bugzilla bugzilla...
...arness compares the display of two web pages. if the bitmaps resulting from displaying the two files in an 800x1000 window are identical, the test passes. if they differ, the test fails. or, alternatively, the conditions can be reversed (a != test rather than an == test). the power of the tool comes from the fact that there is more than one way to achieve any given visual effect in a browser. so, if the effect of complex markup is being tested, put that complex markup into a page and create another page that uses simple markup to achieve the same visual effect. reftest will then compare them and verify whether they produce the same bitmap. creating sandboxed http connections starting with gecko 1.8.1 (firefox 2), it is poss...
...And 5 more matches

Accessibility Inspector - Firefox Developer Tools
y have, or any other personal circumstances such as the device they are using, the speed of their network connection, or their geographic location or locale. you can find more extensive information in the accessibility section of mdn web docs. here we are mainly talking about exposing information to people with visual disabilities — this is done via the accessibility apis available inside web browsers, which expose information on what roles the different elements on your page play (e.g., are they just text, or are they buttons, links, form elements, etc.?). semantic dom elements have roles assigned to them by default that hint at what their purpose is. sometimes, however, you need to use some non-semantic markup (e.g., <div>s) to build a complex custom control, and the control won't have a...
...antic dom elements have roles assigned to them by default that hint at what their purpose is. sometimes, however, you need to use some non-semantic markup (e.g., <div>s) to build a complex custom control, and the control won't have a default role that reflects its purpose. in such a situation, you can use wai-aria role attributes to provide your own roles. roles and other information exposed by browser accessibility apis are presented in a hierarchical structure called the accessibility tree. this is a bit like the dom tree, except that it contains a more limited set of elements and slightly different information about them. assistive technologies like screenreaders use this information to find out what's on a web page, tell their users what's there, and enable them to interact with the page...
... page, tell their users what's there, and enable them to interact with the page. the accessibility inspector also uses this information to provide valuable accessibility debugging capabilities in the devtools. accessing the accessibility inspector when you first open any of the other developer tools, the accessibility features are turned off (unless you've already got them turned on in another browser tab, or got the firefox accessibility engine started already, e.g., you might be a screenreader user or tester). this is because the accessibility engine runs in the background when the accessibility features are turned on. while it’s running, it slows performance and takes up memory; therefore it interferes with the metrics from other panels such as memory and performance as well as overall ...
...And 5 more matches

Debugger - Firefox Developer Tools
a snapshot when the debugger is enabled, and output the difference. setting this to false prevents this debugger instance from requiring any code coverage instrumentation, but it does not guarantee that the instrumentation is not present. uncaughtexceptionhook either null or a function that spidermonkey calls when a call to a debug event handler, breakpoint handler, or similar function throws some exception, which we refer to asdebugger-exception here. exceptions thrown in the debugger are not propagated to debuggee code; instead, spidermonkey calls this function, passingdebugger-exception as its sole argument and the debugger instance as the this value. this function should return a resumption value, which determines how the debuggee should continue. if the uncaught exception hook ...
...eption, which we refer to asdebugger-exception here. exceptions thrown in the debugger are not propagated to debuggee code; instead, spidermonkey calls this function, passingdebugger-exception as its sole argument and the debugger instance as the this value. this function should return a resumption value, which determines how the debuggee should continue. ...
...tions thrown in the debugger are not propagated to debuggee code; instead, spidermonkey calls this function, passingdebugger-exception as its sole argument and the debugger instance as the this value. this function should return a resumption value, which determines how the debuggee should continue. if the uncaught exception hook itself throws an exception,uncaught-hook-exception, spidermonkey throws a new error object,confess-to-debuggee-exception, to the debuggee whose message blames the debugger, and includes textual descriptions ofuncaught-hook-exception and the originaldebugger-exception. if uncaughtexceptionhook’s value is null, spidermonkey throws an exception to the debuggee whose message blames the debugger, and includes a textual description ofdebugger-exception. assigning any...
...And 5 more matches

Animating CSS properties - Firefox Developer Tools
the performance cost of animating a css property can vary from one property to another, and animating expensive css properties can result in jank as the browser struggles to hit a smooth frame rate. the frame rate and waterfall can give you insight into the work the browser's doing in a css animation, to help diagnose performance problems. with css animations you specify a number of keyframes, each of which uses css to define the appearance of the element at a particular stage of the animation. the browser creates the animation as a transition from each keyframe to the next. ...
...roblems. with css animations you specify a number of keyframes, each of which uses css to define the appearance of the element at a particular stage of the animation. the browser creates the animation as a transition from each keyframe to the next. compared with animating elements using javascript, css animations can be easier to create. they can also give better performance, as they give the browser more control over when to render frames, and to drop frames if necessary. however, the performance cost of modifying a css property can vary from one property to another. ...
...the next. compared with animating elements using javascript, css animations can be easier to create. they can also give better performance, as they give the browser more control over when to render frames, and to drop frames if necessary. however, the performance cost of modifying a css property can vary from one property to another. animating expensive css properties can result in jank as the browser struggles to hit a smooth frame rate. ...
...And 5 more matches

Introduction to the File and Directory Entries API - Web APIs
lets you ask for more storage and manage your storage quota. sample use cases the following are just a few examples of how you can use the file and directory entries api: apps with persistent uploader when a file or directory is selected for upload, you can copy the file into a local sandbox and upload a chunk at a time. the app can restart uploads after an interruption, such as the browser being closed or crashing, connectivity getting interrupted, or the computer getting shut down. video game or other apps with lots of media assets the app downloads one or several large tarballs and expands them locally into a directory structure. the app pre-fetches assets in the background, so the user can go to the next task or game level without waiting for a download. audio ...
... web mail client the client downloads attachments and stores them locally. the client caches attachments for later upload. ...
...pi is case-sensitive the file and directory entries api is a virtual representation of a file system the api doesn't give you access to the local file system, nor is the sandbox really a section of the file system. instead, it is a virtualized file system that looks like a full-fledged file system to the web app. it does not necessarily have a relationship to the local file system outside the browser. what this means is that a web app and a desktop app cannot share the same file at the same time. the api does not let your web app reach outside the browser to files that desktop apps can also work on. you can, however, export a file from a web app to a desktop app. for example, you can use the file api, create a blob, redirect an iframe to the blob, and invoke the download manager. the fil...
...And 5 more matches

Fullscreen API - Web APIs
the fullscreen api adds methods to present a specific element (and its descendants) in full-screen mode, and to exit full-screen mode once it is no longer needed. this makes it possible to present desired content—such as an online game—using the user's entire screen, removing all browser user interface elements and other applications from the screen until full-screen mode is shut off. see the article guide to the fullscreen api for details on how to use the api. note: support for this api varies somewhat across browsers, with many requiring vendor prefixes and/or not implementing the latest specification. see the browser compatibility section below for details on support for this api. you may wish to consider using a library such as fscreen for vendor agnostic access to the fullscreen ...
...e document.exitfullscreen() requests that the user agent switch from full-screen mode back to windowed mode. returns a promise which is resolved once full-screen mode has been completely shut off. methods on the element interface element.requestfullscreen() asks the user agent to place the specified element (and, by extension, its descendants) into full-screen mode, removing all of the browser's ui elements as well as all other applications from the screen. returns a promise which is resolved once full-screen mode has been activated. properties the document interface provides properties that can be used to determine if full-screen mode is supported and available, and if full-screen mode is currently active, which element is using the screen. documentorshadowroot.fullscreeneleme...
...reenoptions provides optional settings you can specify when calling requestfullscreen(). controlling access the availability of full-screen mode can be controlled using feature policy. the full-screen mode feature is identified by the string "fullscreen", with a default allow-list value of "self", meaning that full-screen mode is permitted in top-level document contexts, as well as to nested browsing contexts loaded from the same origin as the top-most document. see using feature policy to learn more about using feature policy to control access to an api. usage notes users can choose to exit full-screen mode simply by pressing the esc (or f11) key, rather than waiting for the site or app to programmatically do so. make sure you provide, somewhere in your user interface, appropriate user...
...And 5 more matches

HTMLTextAreaElement - Web APIs
nt's placeholder attribute, containing a hint to the user about what to enter in the control. readonly boolean: returns / sets the element's readonly attribute, indicating that the user cannot modify the value of the control. required boolean: returns / sets the element's required attribute, indicating that the user must specify a value before submitting the form. rows unsigned long: returns / sets the element's rows attribute, indicating the number of visible text lines for the control. selectiondirection string: returns / sets the direction in which selection occurred. this is "forward" if selection was performed in the start-to-end direction of the current locale, or "backward" for the opposite direction. this can also be "none" if the directi...
...'enter the full url for the link');if(newurl){insertmetachars('&lt;a href=\u0022'+newurl+'\u0022&gt;','&lt;\/a&gt;');}else{document.myform.mytxtarea.focus();}">url</span> | <span class="intlink" onclick="insertmetachars('\n&lt;code&gt;\n','\n&lt;\/code&gt;\n');">code</span> | <span class="intlink" onclick="insertmetachars(' :-)');">smile</span> | etc. etc.&nbsp;]</p> <p><textarea name="mytxtarea" rows="10" cols="50">lorem ipsum dolor sit amet, consectetur adipiscing elit. ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. praesent tristique commodo lorem quis fringilla. sed ac tellus eros. sed consectetur eleifend felis vitae luctus. praesent sagittis, est eget bibendum tincidunt, ligula diam tincidunt augue, a fermentum odio velit eget...
...mollis interdum eget lorem. </textarea></p> </form> maximum length and number of lines example create a textarea with a maximum number of characters per line and a maximum number of lines: first, create a function that takes the text field and a key event as input and determines if any of the limits have been reached. if the limit has not been reached, it will return the key. ...
...And 5 more matches

HTML Drag and Drop API - Web APIs
the user may select draggable elements with a mouse, drag those elements to a droppable element, and drop them by releasing the mouse button. a translucent representation of the draggable elements follows the pointer during the drag operation. for web sites, extensions, and xul applications, you can customize which elements can become draggable, the type of feedback the draggable elements produce, and the droppable elements. this overview of html drag and drop includes a description of the interfaces, basic steps to add drag-and-drop support to an application, and an interoperability summary of the interfaces. ...
...ragover …a dragged item is being dragged over a valid drop target, every few hundred milliseconds. dragstart ondragstart …the user starts dragging an item. (see starting a drag operation.) drop ondrop …an item is dropped on a valid drop target. (see performing a drop.) note: neither dragstart nor dragend events are fired when dragging a file into the browser from the os. interfaces the html drag and drop interfaces are dragevent, datatransfer, datatransferitem and datatransferitemlist. the dragevent interface has a constructor and one datatransfer property, which is a datatransfer object. datatransfer objects include the drag event's state, such as the type of drag being done (like copy or move), the drag's data (one or more items), and the mim...
...o add a drag item to the list, remove a drag item from the list, and clear the list of all drag items. a key difference between the datatransfer and datatransferitem interfaces is that the former uses the synchronous getdata() method to access a drag item's data, but the latter instead uses the asynchronous getasstring() method. note: dragevent and datatransfer are broadly supported on desktop browsers. however, the datatransferitem and datatransferitemlist interfaces have limited browser support. see interoperability for more information about drag-and-drop interoperability. gecko-specific interfaces mozilla and firefox support some features not in the standard drag-and-drop model. these are convenience functions to help with dragging multiple items or non-string data (such as files). for...
...And 5 more matches

RTCDataChannel - Web APIs
to create a data channel and ask a remote peer to join you, call the rtcpeerconnection's createdatachannel() method. ...
... to create a data channel and ask a remote peer to join you, call the rtcpeerconnection's createdatachannel() method. ...
...id returns an id number (between 0 and 65,534) which uniquely identifies the rtcdatachannel.label read only the read-only rtcdatachannel property label returns a domstring containing a name describing the data channel. ...
...And 5 more matches

RTCPeerConnection - Web APIs
remote peer. ...
...agent since the offer or answer represented by the description was first instantiated.getdefaulticeservers() the getdefaulticeservers() method of the rtcpeerconnection interface returns an array of objects based on the rtciceserver dictionary, which indicates what, if any, ice servers the browser will use by default if none are provided to the rtcpeerconnection in its rtcconfiguration. ...
...instead of using this obsolete method, you should instead use addtrack() once for each track you wish to send to the remote peer.addtrack()the rtcpeerconnection method addtrack() adds a new media track to the set of t...
...And 5 more matches

Using DTMF with WebRTC - Web APIs
incoming dtmf. webrtc currently ignores these payloads; this is because webrtc's dtmf support is primarily intended for use with legacy telephone services that rely on dtmf tones to perform tasks such as: teleconferencing systems menu systems voicemail systems entry of credit card or other payment information passcode entry note: while the dtmf is not sent to the remote peer as audio, browsers may choose to play the corresponding tone to the local user as part of their user experience, since users are typically used to hearing their phone play the tones audibly. sending dtmf on an rtcpeerconnection a given rtcpeerconnection can have multiple media tracks sent or received on it. when you wish to transmit dtmf signals, you first need to decide which track to send them on, since dtm...
...enting the caller and the receiver, respectively. these will be initialized when the call starts up, in our connectanddial() function, as shown in starting the connection process below. dtmfsender the rtcdtmfsender object for the connection. this will be obtained while setting up the connection, in the gotstream() function shown in adding the audio to the connection. hasaddtrack because some browsers have not yet implemented rtcpeerconnection.addtrack(), therefore requiring the use of the obsolete addstream() method, we use this boolean to determine whether or not the user agent supports addtrack(); if it doesn't, we'll fall back to addstream(). this gets figured out in connectanddial(), as shown in starting the connection process. mediaconstraints an object conforming to the mediaconstr...
...pc.onaddstream = handlereceiveraddstreamevent; } navigator.mediadevices.getusermedia(mediaconstraints) .then(gotstream) .catch(err => log(err.message)); } after creating the rtcpeerconnection for the caller (callerpc), we look to see if it has an addtrack() method. if it does, we set hasaddtrack to true; otherwise, we set it to false. this variable will let the example operate even on browsers not yet implementing the newer addtrack() method; we'll do so by falling back to the older addstream() method. next, the event handlers for the caller are established. we'll cover these in detail later. then a second rtcpeerconnection, this one representing the receiving end of the call, is created and stored in receiverpc; its onicecandidate event handler is set up too. if addtrack() is su...
...And 5 more matches

Window.navigator - Web APIs
the window.navigator read-only property returns a reference to the navigator object, which has methods and properties about the application running the script. syntax navigatorobject = window.navigator examples example #1: browser detect and return a string var sbrowser, susrag = navigator.useragent; // the order matters here, and this may report false positives for unlisted browsers. ...
...ty returns a reference to the navigator object, which has methods and properties about the application running the script. syntax navigatorobject = window.navigator examples example #1: browser detect and return a string var sbrowser, susrag = navigator.useragent; // the order matters here, and this may report false positives for unlisted browsers. ...
... = window.navigator examples example #1: browser detect and return a string var sbrowser, susrag = navigator.useragent; // the order matters here, and this may report false positives for unlisted browsers. ...
...And 5 more matches

WindowOrWorkerGlobalScope.setTimeout() - Web APIs
in either case, the actual delay may be longer than intended; see reasons for delays longer than specified below. arg1, ..., argn optional additional arguments which are passed through to the function specified by function. note: passing additional parameters to the function in the first syntax does not work in internet explorer 9 and below. if you want to enable this functionality on that browser, you must use a polyfill (see the polyfill section). return value the returned timeoutid is a positive integer value which identifies the timer created by the call to settimeout(); this value can be passed to cleartimeout() to cancel the timeout. it may be helpful to be aware that settimeout() and setinterval() share the same pool of ids, and that cleartimeout() and clearinterval() can tech...
...aralert();">cancel alert before it happens</button> javascript var timeoutid; function delayedalert() { timeoutid = window.settimeout(window.alert, 2*1000, 'that was really slow!'); } function clearalert() { window.cleartimeout(timeoutid); } result see also cleartimeout() example. polyfill if you need to pass one or more arguments to your callback function, but need it to work in browsers which don't support sending additional arguments using either settimeout() or setinterval() (e.g., internet explorer 9 and below), you can include this polyfill to enable the html5 standard arguments-passing functionality. just add this code to the top of your script: /*\ |*| |*| polyfill which enables the passage of arbitrary arguments to the |*| callback functions of javascript timers (ht...
...l = function(vcallback, ndelay /*, argumenttopass1, argumenttopass2, etc. ...
...And 5 more matches

ARIA: grid role - Accessibility
the position of each cell is significant and can be focused using keyboard input. ...
...while it does not imply a specific visual presentation, it implies a relationship among elements. uses fall into two categories: presenting tabular information (data grids) and grouping other widgets (layout grids). even though both data grids and layout grids employ the same aria roles, states, and properties, differences in the...
...roles, states, and properties, differences in their content and purpose surface factors that are important to consider in keyboard interaction design. see aria authoring practices for more details cell elements have the role gridcell, unless they are a row or column header. then the elements are rowheader and columnheader, respectively. cell elements need to be owned by elements with a row role. rows can be grouped using rowgroups. if the grid is used as an interactive widget, keyboard interactions need to be implemented. associated aria roles, states, and properties roles treegrid (subclass) if a grid has columns that can expanded or collapsed, a treegrid can be used. row a row inside the grid. rowgroup a group containing one or multiple rows. states and properties aria-l...
...And 5 more matches

ARIA: table role - Accessibility
the table value of the aria role attribute identifies the element containing the role as having a non-interactive table structure containing data arranged in rows and columns, similar to the native <table> html element. <div role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <div id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="none">aria role</span> <span role="columnheader" aria-sort="none">semantic element</span> </div> </div> <div role="rowgroup"> <div role="row" aria-rowindex="11"> <span role="cell">header</span> <span role="cell">h1</span> </div> <div role="row...
...the cells are not focusable or selectable, though widgets within individual cells of the table can be interactive. using a native html table element whenever possible is strongly encouraged. if a table maintains a selection state, has two-dimensional navigation, or allows the user to rearrange cell order use grid or treegrid instead. to create an aria table, add role="table"...
... possible is strongly encouraged. if a table maintains a selection state, has two-dimensional navigation, or allows the user to rearrange cell order use grid or treegrid instead. to create an aria table, add role="table" to the container element. within that container, each row has role="row" set and contains child cells. each cell has a role of either columnheader, rowheader, or simply cell. ...
...And 5 more matches

Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
properties are usually expressed as the shorthand flex property. the following code would set the flex-grow property to 2, flex-shrink to 1 and flex-basis to auto. .item { flex: 2 1 auto; } if you have read the article basic concepts of flexbox, then you will have already had an introduction to the properties. here we will explore them in depth in order that you can fully understand what the browser is doing when you use them. important concepts when working on the main axis there are a few concepts worth digging into before looking at how the flex properties work to control ratios along the main axis. these relate to the natural size of flex items before any growing or shrinking takes place, and to the concept of free space. flex item sizing in order to work out how much space there i...
...t concepts when working on the main axis there are a few concepts worth digging into before looking at how the flex properties work to control ratios along the main axis. these relate to the natural size of flex items before any growing or shrinking takes place, and to the concept of free space. flex item sizing in order to work out how much space there is available to lay out flex items, the browser needs to know how big the item is to start with. how is this worked out for items that don’t have a width or a height applied using an absolute length unit? there is a concept in css of min-content and max-content — these keywords are defined in the css intrinsic and extrinsic sizing specification, and can be used in place of a length unit. in the live example below for instance i have tw...
...idth or a height applied using an absolute length unit? there is a concept in css of min-content and max-content — these keywords are defined in the css intrinsic and extrinsic sizing specification, and can be used in place of a length unit. in the live example below for instance i have two paragraph elements that contain a string of text. the first paragraph has a width of min-content. in a browser that supports this keyword you should be able to see that the text has taken all of the soft wrapping opportunities available to it, becoming as small as it can be without overflowing. this then, is the min-content size of that string. essentially, the longest word in the string is dictating the size. the second paragraph has a value of max-content and so it does the opposite. it gets as big a...
...And 5 more matches

CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
hysical properties of margin-left, padding-left, and so on. we call these keywords and properties physical because they relate to the screen you are looking at. left is always left, no matter what direction your text is running. this can become an issue when developing a site that has to work in multiple languages, including languages that have text starting on the right, rather than the left. browsers are pretty good at dealing with text direction, and you don’t even need to be working in a rtl language to take a look. in the example below, i have two paragraphs. one has no text-align property set, the second has text-align set to left. i have added dir="rtl" to the html element, which switches the writing mode from the default for an english language document of ltr. you can see that the...
... element, which switches the writing mode from the default for an english language document of ltr. you can see that the first paragraph remains left to right, due to the text-align value being left . the second however, switches direction and the text runs from right to left . this is a very simple example of the problem with physical values and properties being used in css. they prevent the browser being able to do the work to switch writing mode, as they make the assumption that the text is flowing left to right and top to bottom. logical properties and values logical properties and values do not make an assumption about text direction. which is why in grid layout we use the keyword start when aligning something to the start of the container. for me, working in english, start may well ...
...the block o...
...And 5 more matches

Grid template areas - CSS: Cascading Style Sheets
grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } having defined these names i then create my layout. this time, instead of placing my items using line numbers specified on the items themselves, i create the whole layout on the grid container. ...
... . . ft ft ft ft ft ft"; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> </div> in order to make the layou...
...} <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> </div> in order to make the layout neater i can use multiple . characters. as long as there is no white space between the full stops it will be counted as one cell. for a complex layout there is a benefit to having the rows and columns neatly aligned. it means that you can actually see, right there in the css, what this layout looks like. spanning multiple cells in our example each of the areas spans multiple grid cells and we achieve this by repeating the name of that grid area multiple times with white space between. you can add extra white space in order to keep your columns neatly lined up in the value of grid...
...And 5 more matches

<color> - CSS: Cascading Style Sheets
he <color> data type in detail. to learn more about using color in html, see applying color to html elements using css. syntax the <color> data type is specified using one of the options listed below. note: although <color> values are precisely defined, their actual appearance may vary (sometimes significantly) from device to device. this is because most devices are not calibrated, and some browsers do not support output devices' color profiles. color keywords color keywords are case-insensitive identifiers that represent a specific color, such as red, blue, black, or lightseagreen. although the names more or less describes their respective colors, they are essentially artificial, without a strict rationale behind the names used. there are a few caveats to consider when using color ke...
...re. note: the list of accepted keywords has undergone many changes during the evolution of css: css level 1 only included 16 basic colors, called the vga colors as they were taken from the set of displayable colors on vga graphics cards. css level 2 added the orange keyword. although various colors not in the specification (mostly adapted from the x11 colors list) were supported by early browsers, it wasn't until svg 1.0 and css colors level 3 that they were formally defined. they are called the extended color keywords, the x11 colors, or the svg colors. css colors level 4 added the rebeccapurple keyword to honor web pioneer eric meyer. specification keyword rgb hex value live keyword css level 1 black #000000 silver #c0c0c0 ...
...ransparent keyword represents a fully transparent color. this makes the background behind the colored item completely visible. technically, transparent is a shortcut for rgba(0,0,0,0). compatibility note: to prevent unexpected behavior, such as in a <gradient>, the current css spec states that transparent should be calculated in the alpha-premultiplied color space. however, be aware that older browsers may treat it as black with an alpha value of 0. historical note: transparent wasn't a true color in css level 2 (revision 1). it was a special keyword that could be used instead of a regular <color> value on two css properties: background and border. it was essentially added to allow developers to override an inherited solid color. with the advent of alpha channels in css colors level 3, tr...
...And 5 more matches

quotes - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...itial valuedepends on user agentapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax none | auto | [ <string> <string> ]+ examples basic quote marks html <q>to be or not to be. that's the question!</q> css q { quotes: '"' '"' "'" "'"; } q::before { content: open-quote; } q::after { content: close-quote; } result auto quotes for most browsers, the default value of quotes is auto (firefox 70+), or the browser otherwise had this default behavior (chromiums, safari, edge), so this example works without it being explicitly being set. html <div lang="fr"> <q>ceci est une citation française.</q> <div> <hr> <div lang="ru"> <q>Это русская цитата</q> <div> <hr> <div lang="de"> <q>dies ist ein deutsches zitat</q> <...
...> <q>this is an english quote.</q> <div> css /*q { quotes: auto; }*/ result specifications specification status comment css generated content module level 3the definition of 'quotes' in that specification. working draft css level 2 (revision 1)the definition of 'quotes' in that specification. recommendation initial definition browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetquoteschrome ...
...And 5 more matches

will-change - CSS: Cascading Style Sheets
these kinds of optimizations can increase the responsiveness of a page by doing potentially expensive work before they are actually required. important: will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. it should not be used to anticipate performance problems. ...
...nts; will-change: transform; /* example of <custom-ident> */ will-change: opacity; /* example of <custom-ident> */ will-change: left, top; /* example of two <animateable-feature> */ /* global values */ will-change: inherit; will-change: initial; will-change: unset; proper usage of this property can be a bit tricky: don't apply will-change to too many elements. ...
... don't apply will-change to too many elements. the browser already tries as hard as it can to optimize everything. some of the stronger optimizations that are likely to be tied to will-change end up using a lot of a machine’s resources, and when overused like this can cause the page to slow down or consume a lot of resources. use sparingly. the normal behavior for optimizations that the browser make is to remove the optimizations as soon as it can and revert back to normal. but adding will-change directly in a stylesheet implies that the targeted elements are always a few moments away from changing and the browser will keep the optimizations for much longer time than it would have otherwise. so it is a good practice to switch will-change on and off using script code before and after t...
...And 5 more matches

HTML5 - Developer guides
time>, <output>, <progress>, or <meter> and <main>, increasing the number of valid html5 elements. improvement in <iframe> using the sandbox and srcdoc attributes, authors can now be precise about the level of security and the wished rendering of an <iframe> element. mathml allows directly embedding mathematical formulas. introduction to html5 this article introduces how to indicate to the browser that you are using html5 in your web design or web application. html5 reference guide quick-reference html5 sheet containing markup generators, code examples and web developer tools. the guide is downloadable for ease of use and access. this page was created with help from the w3c as a quick guide for those who have some basic familiarity and experience using html5. downloadable html5 guide ...
...tml 5 cheat sheet for beginners who want to master html 5, its elements, event attributes and compatibility. html5-compliant parser the parser, which turns the bytes of an html document into a dom, has been extended and now precisely defines the behavior to use in all cases, even when faced with invalid html. this leads to far greater predictability and interoperability between html5-compliant browsers. connectivity web sockets allows creating a permanent connection between the page and the server and to exchange non-html data through that means. server-sent events allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client's request. webrtc this technology, where rtc stands for real-time communication...
...page and the server and to exchange non-html data through that means. server-sent events allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client's request. webrtc this technology, where rtc stands for real-time communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application. offline & storage offline resources: the application cache firefox fully supports the html5 offline resource specification. most others have offline resource support at some level. online and offline events firefox 3 supports whatwg online and offline events, which let applications and extensions detect whether or not there's an...
...And 5 more matches

The HTML autocomplete attribute - HTML: Hypertext Markup Language
the html autocomplete attribute is available on <input> elements that take a text or numeric value as input, <textarea> elements, <select> elements, and <form> elements. autocomplete lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field. ...
...at take a text or numeric value as input, <textarea> elements, <select> elements, and <form> elements. autocomplete lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field. the source of the suggested values is generally up to the browser; typically values come from past values entered by the user, but they may also come from pre-configured values. for instance, a browser might let the user save their name, address, phone number, and email addresses for autocomplete purposes. perhaps the browser offers the ability to save encrypted credit card information, for autocompletion following an authentication procedure. if an <input>,...
... for more information, see the autocomplete attribute in <form>. ...
...And 5 more matches

<input type="number"> - HTML: Hypertext Markup Language
<input> elements of type number are used to let the user enter a number. they include built-in validation to reject non-numerical entries. the browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. on browsers that don't support inputs of type number, a number input falls back to type text. value any floating-point number, or empty. events change and input supported common attributes autocomplete, list, placeholder, readonly idl attr...
...the <datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the type are not included in the suggested options. the values provided are suggestions, not requir...
...s into a form. when you create a number input with the proper type value, number, you get automatic validation that the entered text is a number, and usually a set of up and down buttons to step the value up and down. important: bear in mind that, logically, you should not be able to enter characters inside a number input other than numbers. ...
...And 5 more matches

Standard metadata names - HTML: Hypertext Markup Language
ent can be used to provide document metadata in terms of name-value pairs, with the name attribute giving the metadata name, and the content attribute giving the value. standard metadata names defined in the html specification the html specification defines the following set of standard metadata names: application-name: the name of the application running in the web page. ...
... generator: the identifier of the software that generated the page. keywords: words relevant to the page's content separated by commas. ...
... color that user agents should use to customize the display of the page or of the surrounding user interface. the content attribute contains a valid css <color>. standard metadata names defined in other specifications the css color adjustment specification defines the following metadata name: color-scheme: specifies one or more color schemes with which the document is compatible. the browser will use this information in tandem with the user's browser or device settings to determine what colors to use for everything from background and foregrounds to form controls and scrollbars. the primary use for <meta name="color-scheme"> is to indicate compatibility with—and order of preference for—light and dark color modes. the value of the content property for color-scheme may be one ...
...And 5 more matches

<script>: The Script element - HTML: Hypertext Markup Language
will be fetched in parallel to parsing and evaluated as soon as it is available. for module scripts, if the async attribute is present then the scripts and all their dependencies will be executed in the defer queue, therefore they will get fetched in parallel to parsing and evaluated as soon as they are available. this attribute allows the elimination of parser-blocking javascript where the browser would have to load and evaluate scripts before continuing to parse. defer has a similar effect in this case. this is a boolean attribute: the presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value. see browser compatibility for notes on browser support. see also async scripts for asm.js. crossorigin normal scr...
... for asm.js. crossorigin normal script elements pass minimal information to the window.onerror for scripts which do not pass the standard cors checks. to allow error logging for sites which use a separate domain for static media, use this attribute. see cors settings attributes for a more descriptive explanation of its valid arguments. defer this boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing domcontentloaded. scripts with the defer attribute will prevent the domcontentloaded event from firing until the script has loaded and finished evaluating. this attribute must not be used if the src attribute is absent (i.e. for inline scripts), in this case it would have no effect. the defer a...
...ing. this attribute must not be used if the src attribute is absent (i.e. for inline scripts), in this case it would have no effect. the defer attribute has no effect on module scripts — they defer by default. scripts with the defer attribute will execute in the order in which they appear in the document. this attribute allows the elimination of parser-blocking javascript where the browser would have to load and evaluate scripts before continuing to parse. async has a similar effect in this case. integrity this attribute contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. see subresource integrity. nomodule this boolean attribute is set to indicate that the script should not be executed in ...
...And 5 more matches

Content Security Policy (CSP) - HTTP
etect and mitigate certain types of attacks, including cross site scripting (xss) and data injection attacks. these attacks are used for everything from data theft to site defacement to distribution of malware. csp is designed to be fully backward compatible (except csp version 2 where there are some explicitly-mentioned inconsistencies in backward compatibility; more details here section 1.1). browsers that don't support it still work with servers that implement it, and vice-versa: browsers that don't support csp simply ignore it, functioning as usual, defaulting to the standard same-origin policy for web content. if the site doesn't offer the csp header, browsers likewise use the standard same-origin policy. to enable csp, you need to configure your web server to return the content-securit...
...ader, but that's an older version and you don't need to specify it anymore.) alternatively, the <meta> element can be used to configure a policy, for example: <meta http-equiv="content-security-policy" content="default-src 'self'; img-src https://*; child-src 'none';"> threats mitigating cross site scripting a primary goal of csp is to mitigate and report xss attacks. ...
...element can be used to configure a policy, for example: <meta http-equiv="content-security-policy" content="default-src 'self'; img-src https://*; child-src 'none';"> threats mitigating cross site scripting a primary goal of csp is to mitigate and report xss attacks. xss attacks exploit the browser's trust of the content received from the server. ...
...And 5 more matches

HTTP caching - HTTP
red properly as not all resources stay identical forever: it is important to cache a resource only until it changes, not longer. there are several kinds of caches: these can be grouped into two main categories: private or shared caches. a shared cache is a cache that stores responses for reuse by more than one user. a private cache is dedicated to a single user. ...
...hes. a shared cache is a cache that stores responses for reuse by more than one user. a private cache is dedicated to a single user. this page will mostly talk about browser and proxy caches, but there are also gateway caches, cdn, reverse proxy caches and load balancers that are deployed on web servers for better reliability, performance and scaling of web sites and web applications. private browser caches a private cache is dedicated to a single user. you might have seen "caching" in your browser's settings already. a browser cache holds all documents downloaded via http by the user. ...
... shared proxy caches a shared cache is a cache that stores responses to be reused by more than one user. for example, an isp or your company might have set up a web proxy as part of its local network infrastructure to serve many users so that popular resources are reused a number of times, reducing network traffic and latency. ...
...And 5 more matches

Using Feature Policy - HTTP
allows you to control which origins can use which features, both in the top-level page and in embedded frames. essentially, you write a policy, which is an allowed list of origins for each feature. for every feature controlled by feature policy, the feature is only enabled in the current document or frame if its origin matches the allowed list of origins. for each policy-controlled feature, the browser maintains a list of origins for which the feature is enabled, known as an allowlist. if you do not specify a policy for a feature, then a default allowlist will be used. the default allowlist is specific to each feature. the feature-policy header is still in an experimental state, and is subject to change at any time. be wary of this when implementing feature policy on your website. writi...
... using a set of individual policy directives. a policy directive is a combination of a defined feature name, and an allowlist of origins that can use the feature. features within a policy are separated by semicolons. allowlist an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. 'none': the feature is disabled...
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com). origins should be separated by a space. ...
...And 5 more matches

HTTP headers - HTTP
authenticate defines the authentication method that should be used to access a resource behind a proxy server. proxy-authorization contains the credentials to authenticate a user agent with a proxy server. caching age the time, in seconds, that the object has been in a proxy cache. cache-control directives for caching mechanisms in both requests and responses. clear-site-data clears browsing data (e.g. cookies, storage, cache) associated with the requesting website. expires the date/time after which the response is considered stale. pragma implementation-specific header that may have various effects anywhere along the request-response chain. used for backwards compatibility with http/1.0 caches where the cache-control header is not yet present. warning general warning inform...
... which would otherwise be reported as zero due to cross-origin restrictions. do not track dnt expresses the user's tracking preference. tk indicates the tracking status of the corresponding response. downloads content-disposition indicates if the resource transmitted should be displayed inline (default behavior without the header), or if it should be handled like a download and the browser should present a “save as” dialog. message body information content-length the size of the resource, in decimal number of bytes. content-type indicates the media type of the resource. content-encoding used to specify the compression algorithm. content-language describes the human language(s) intended for the audience, so that it allows a user to differentiate according to the us...
...ect-ct allows sites to opt in to reporting and/or enforcement of certificate transparency requirements, which prevents the use of misissued certificates for that site from going unnoticed. when a site enables the expect-ct header, they are requesting that chrome check that any certificate for that site appears in public ct logs. feature-policy provides a mechanism to allow and deny the use of browser features in its own frame, and in iframes that it embeds. strict-transport-security (hsts) force communication using https instead of http. upgrade-insecure-requests sends a signal to the server expressing the client’s preference for an encrypted and authenticated response, and that it can successfully handle the upgrade-insecure-requests directive. x-content-type-options disables mime ...
...And 5 more matches

Link prefetching FAQ - HTTP
what is link prefetching? link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future. a web page provides a set of prefetching hints to the browser, and after the browser is finished loading the page, it begins silently prefetching specified documents and stores them in its cache. when the user visits one of the prefetched documents, it can be served up quickly out of the browser's cache. does prefetching work with https? starting in gecko 1.9.1 (firefox 3.5), https content can be prefetched. what are the prefetching hints? the browser looks for either an html <link> or an http link: header with a relation type of either next or prefetch. an example using the link tag follows: <link rel=...
...there can be multiple hints per page, as it might make sense to prefetch multiple documents. for example, the next document might contain several large images. ...
...h a relation type of either next or prefetch. an example using the link tag follows: <link rel="prefetch" href="/images/big.jpeg"> the same prefetching hint using an http link: header: link: </images/big.jpeg>; rel=prefetch the format for the link: header is described in rfc 5988 section 5. the browser observes all of these hints and queues up each unique request to be prefetched when the browser is idle. there can be multiple hints per page, as it might make sense to prefetch multiple documents. for example, the next document might contain several large images. some more examples follow: <link rel="prefetch alternate stylesheet" title="designed for mozilla" href="mozspecific.css"> <link rel="next" href="2.html"> are anchor (<a>) tags prefetched? no, only <link> tags with a relatio...
...And 5 more matches

JavaScript modules - JavaScript
ves you all you need to get started with javascript module syntax. a background on modules javascript programs started off pretty small — most of its usage in the early days was to do isolated scripting tasks, providing a bit of interactivity to your web pages where needed, so large scripts were generally not needed. fast forward a few years and we now have complete applications being run in browsers with a lot of javascript, as well as javascript being used in other contexts (node.js, for example). it has therefore made sense in recent years to start thinking about providing mechanisms for splitting javascript programs up into separate modules that can be imported when needed. node.js has had this ability for a long time, and there are a number of javascript libraries and frameworks that...
...ing about providing mechanisms for splitting javascript programs up into separate modules that can be imported when needed. node.js has had this ability for a long time, and there are a number of javascript libraries and frameworks that enable module usage (for example, other commonjs and amd-based module systems like requirejs, and more recently webpack and babel). ...
...is ability for a long time, and there are a number of javascript libraries and frameworks that enable module usage (for example, other commonjs and amd-based module systems like requirejs, and more recently webpack and babel). the good news is that modern browsers have started to support module functionality natively, and this is what this article is all about. ...
...And 5 more matches

Add to Home screen - Progressive web apps (PWAs)
add to home screen (or a2hs for short) is a feature available in modern browsers that allows a user to "install" a web app, ie. add a shortcut to their home screen representing their favorite web app (or site) so they can subsequently access it with a single tap. this guide explains how a2hs is used, and what you need to do as a developer to allow your users to take advantage of it. why a2hs? a2hs is thought to be part of the progressive web app philosophy — giving web apps the same user experience advantages as native apps so they can compete in today's ecosystem wars. part of this is the simple gesture of accessing an app by tapping its icon on your home screen, and then having it appear neatly in its own window. a2hs makes this possible. what browsers support a2hs? a2hs is sup...
...e part of the progressive web app philosophy — giving web apps the same user experience advantages as native apps so they can compete in today's ecosystem wars. part of this is the simple gesture of accessing an app by tapping its icon on your home screen, and then having it appear neatly in its own window. a2hs makes this possible. what browsers support a2hs? a2hs is supported in all mobile browsers, except ios webview. it's also supported in some chromium desktop browsers. firefox has had mobile support since v58 and is working on desktop support. see caniuse.com for exact details. how do you use it? we've written a very simple example web site (see our demo live, and also see the source code) that doesn't do much, but was developed with the necessary code to allow it to be added to ...
...ent; upon loading our site, you'll see an install banner pop up asking whether you want to add this app to your home screen. note: you can find out a lot more about chrome install banners from the article web app install banners. if you choose not to add it to your home screen at this point, you can do so later using the add to home screen icon in the main chrome menu. regardless of which browser you are using, when you choose to add the app to your home screen, you'll see it appear along with a short title, in the same way that native apps do. tapping this icon opens it up, but as a fullscreen app, you'll no longer see the browser ui around it. how do you make an app a2hs-ready? to enable your app to be added to a home screen, it needs the following: to be served over https —...
...And 5 more matches

Installing and uninstalling web apps - Progressive web apps (PWAs)
this guide explains how installation is performed, what it means, and what you need to do as a developer to let your users take advantage of it. ...
...this guide explains how installation is performed, what it means, and what you need to do as a developer to let your users take advantage of it. ...
...ing web apps the same user experience advantages as native apps so they can be competitive. installed applications are more conveniently invoked as they have a presence in a device’s home screen or app list or bar. this makes it simple for a user to use a gesture to access an app by tapping or clicking its icon. the application itself may then manifest as in a chromeless view (without the full browser chrome) but it nevertheless is executing effectively as a tab within the browser. for users, the experience of a seemingly-native pwa is more comfortable and convenient than a typical web site. by reducing the user experience differential between the web app and native apps on the user's device, you reduce both the loss of any muscle memory they have revolving around the native interface of th...
...And 5 more matches

widget - Archive of obsolete content
panel = require("sdk/panel").panel({ width:215, height:160, contenturl: data.url("clock.html") }); require("sdk/widget").widget({ id: "open-clock-btn", label: "clock", contenturl: data.url("history.png"), panel: clockpanel, onclick: function() { // will not be anchored this.panel.show(); } }); see bug 638142. private windows if your add-on has not opted into private browsing, then your widget will not appear in any private browser windows. to learn more about private windows, how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. examples for conciseness, these examples create their content scripts as strings and use the contentscript property. in your own add-ons, you will probably wan...
...w.yahoo.com/favicon.ico"; } }); // a widget that updates content on a timer. widgets.widget({ id: "auto-update-widget", label: "widget that updates content on a timer", content: "0", contentscript: 'settimeout(function() {' + ' document.body.innerhtml++;' + '}, 2000)', contentscriptwhen: "ready" }); // a widget created with a specified width, that grows. var mywidget = widgets.widget({ id: "widget-effect", label: "wide widget that grows wider on a timer", content: "i'm getting longer.", width: 50, }); require("sdk/timers").setinterval(function() { mywidget.width += 10; }, 1000); // a widget communicating bi-directionally with a content script. var widget = widgets.widget({ id: "message-test", label: "bi-directional communication!"...
...w widget. the widget is immediately added to the add-on bar. parameters options : object required options: name type label string a string description of the widget used for accessibility, title bars, and error reporting. id string a string used to identify your widget in order to save its location when the user moves it in the browser. this string has to be unique and must not be changed over time. optional options: name type content string an optional string value containing the displayed content of the widget. it may contain html. widgets must have either the content property or the contenturl property set. if the content is an image, it is automatically scaled to b...
...And 4 more matches

tabs/utils - Archive of obsolete content
functions for working with xul tabs and the xul tabbrowser object. globals functions activatetab(tab, window) set the specified tab as the active, or selected, tab. parameters tab : tab a xul tab element to activate. window : window a browser window. gettabbrowser(window) get the tabbrowser element for the given browser window. parameters window : window a browser window. returns tabbrowser : gettabcontainer(window) get the tabbrowser's tabcontainer property. parameters window : window a browser window. returns tabcontainer : gettabs(window) returns the tabs for the specified window. if you omit window, this function will return tabs across all the browser's windows. ...
...window : window a browser window. returns tabbrowser : gettabcontainer(window) get the tabbrowser's tabcontainer property. parameters window : window a browser window. returns tabcontainer : gettabs(window) returns the tabs for the specified window. if you omit window, this function will return tabs across all the browser's windows. however, if your add-on has not opted into private browsing, then the function will exclude all tabs that are hosted by private browser windows. to learn more about private windows, how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. parameters window : nsiwindow optional. returns array : an array of tab elements. ...
...pted into private browsing, then the function will exclude all tabs that are hosted by private browser windows. to learn more about private windows, how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. parameters window : nsiwindow optional. returns array : an array of tab elements. getactivetab(window) given a browser window, get the active, or selected, tab. parameters window : window a browser window. returns tab : the currently selected tab. getownerwindow(tab) get the browser window that owns the specified tab. parameters tab : tab a browser tab. returns window : a browser window. opentab(window, url, options) open a new tab in the specified browser window. parameters window : window the...
...And 4 more matches

Progress Listeners - Archive of obsolete content
firefox 3.5 includes a way to set up a listener for all tabs, selected and not: listening to events on all tabs. ...
...firefox 3.5 includes a way to set up a listener for all tabs, selected and not: listening to events on all tabs. ...
... tab/window which triggered the change. ...
...And 4 more matches

Session store API - Archive of obsolete content
using the nsisessionstore interface. knowing when to restore each time firefox is about to restore a tab, an event of type sstabrestoring is sent. ...
...refox 3 note in firefox 3 and later, if you need to detect when a tab is about to be closed so that you can update data associated with the tab before it is closed, you can watch for the "sstabclosing" event, which is sent to the tab. restoring without restarting firefox 3.6 note this section applies to firefox 3.6 and later. firefox 3.6 knows how to save session store data when the last browser window closes, even if there are still other windows open. similarly, it can now restore the user's session while in that state. in other words, it's now possible for sessions to be restored even without the browser quitting and being relaunched. this is something you may need to keep in mind if you rely on the behavior of the session store system. the session restore process the exact sequen...
...een restored unless you determine how many tabs need to be restored then count the sstabrestored events. this section provides a few simple examples of how to make use of the session store api. saving a value with a tab the following code will attach a key/value pair to a tab, so that when the tab is restored, that pair is still associated with it. var ss = components.classes["@mozilla.org/browser/sessionstore;1"] .getservice(components.interfaces.nsisessionstore); var currenttab = gbrowser.selectedtab; var datatoattach = "i want to attach this"; ss.settabvalue(currenttab, "key-name-here", datatoattach); this code sets the value of the key "key-name-here" to datatoattach. you may use any javascript object as the data. fetching a saved value you can fetch a value as...
...And 4 more matches

Source code directories overview - Archive of obsolete content
box (cocoa). beos contains source code for beos. qt contains source code for the qt toolkit, a c class library which runs on x-windows on unix, windows 95, windows 98 and window nt 4.0. photon contains source code for photon, a microkernel windowing system used in several real-time operating systems from qnx software systems ltd. seamonkey seamonkey is the development name for the mozilla browser suite. accessible contains code to support microsoft active accessibility and sun's atk accessibility api for linux. browser contains the code for firefox. this will be covered below. build contains scripts (usually perl) and programs used by the mozilla build team for building and managing the mozilla code base. these programs coordinate the running of makefiles and the creation of the di...
...mpletion feature on the url edit box (stored in netscape.hst in mozilla classic) and for the cached pages index (stored in fat.db in mozilla classic). this code originated at uc berkeley. directory contains the ldap sdk. docshell contains c interfaces and code for loading and displaying a single web page (e.g. scroll). the [#seamonkey-embedding embedding] code wraps this code with higher level browser functions like forward, back and history. dom contains c interfaces and code for implementing and tracking dom (document object model) objects in javascript. it forms the c substructure which creates, destroys and manipulates built-in and user-defined objects according to the javascript script. for example, if the javascript script adds a user-defined attribute to the document (e.g. document.g...
..."document" node and manipulate it according to any later javascript commands. editor contains c interfaces, c code and xul for the embeddable editor component which can edit both plain text and html. it is used for the html editor (i.e. composer in mozilla classic), for plain text and html mail composition and for text fields and text areas throughout the product. the editor is designed like a "browser window with editing features" with extra classes for editing text and managing undo/redo. embedding contains c interfaces and code for generic high-level browser functions (e.g. forward, back, history). the [#seamonkey-webshell webshell] code wraps these interfaces according to the particular platform and way (e.g. activex) that is being supported. extensions contains c interfaces, c code, xu...
...And 4 more matches

Plug-n-Hack Phase1 - Archive of obsolete content
plug-n-hack (pnh) phase 1 allows easier integration and defines how security tools can advertise their capabilities to browsers. security tool manifest to support pnh-1 security tools provide a manifest over http(s) which defines the capabilities that the browser can make use of. it is up to the tool authors to decide how the url of the manifest is published. the tool configures itself by serving an html document (we’ll call this the configuration document) to the browser. this can cause the browser to inspect the manifest and register the tool by firing a customevent with the type configuresectool and a properties object which specifies the url of the tool manifest. for example: var manifest = {"detail":{"url":"http://localhost:8080/manifest"}}; var evt = new customevent('con...
...e configuration document) to the browser. this can cause the browser to inspect the manifest and register the tool by firing a customevent with the type configuresectool and a properties object which specifies the url of the tool manifest. for example: var manifest = {"detail":{"url":"http://localhost:8080/manifest"}}; var evt = new customevent('configuresectool', manifest); it is suggested that browsers wishing to support pnh restrict handling of customevents such that they’re ignored where the event happens outside of user initiated actions. ...
...ost:8080/manifest"}}; var evt = new customevent('configuresectool', manifest); it is suggested that browsers wishing to support pnh restrict handling of customevents such that they’re ignored where the event happens outside of user initiated actions. the configuration document should then listen for a number of other events: configuresectoolstarted - this notifies the document that the browser is processing the configuration; if this event is not received within a reasonable amount of time after the configuresectool event has been fired, you might want to warn the user that pnh does not seem to be supported by this browser (perhaps prompting them to install the appropriate addon). configuresectoolfailed - this notifies the document that configuration has failed for some reason. the...
...And 4 more matches

Prism - Archive of obsolete content
prism is no longer developed by mozilla labs. there are now no alternatives. prism is a simple xulrunner-based browser that hosts web applications without the normal web browser user interface. prism is based on a concept called site-specific browsers (ssb). an ssb is designed to work exclusively with a single web application. it doesn’t have the menus, toolbars and other accoutrements of a traditional web browser. an ssb also offers tighter integration with the operating system and desktop than a typical web application running through a web browser. applications running in an ssb are therefore able to benefit from many of the advantages of the desktop and of the web at the same time. benefits separate process: web apps can hog memory or processor cycles or even bring down th...
...tional web browser. an ssb also offers tighter integration with the operating system and desktop than a typical web application running through a web browser. applications running in an ssb are therefore able to benefit from many of the advantages of the desktop and of the web at the same time. benefits separate process: web apps can hog memory or processor cycles or even bring down the whole browser in extreme cases. by running each app in its own process, we minimize the impact of any mishaps. we can also benefit from operating system tools that lets us view the memory/cpu consumption of a specific application. minimal user interface: a general-purpose browser ui is not necessary or appropriate for most web apps. it is more efficient to provide a ui that is specific to the application. ...
...mize the impact of any mishaps. we can also benefit from operating system tools that lets us view the memory/cpu consumption of a specific application. minimal user interface: a general-purpose browser ui is not necessary or appropriate for most web apps. it is more efficient to provide a ui that is specific to the application. this also cuts down on ui clutter (hence the term distraction-free browser). basic desktop integration: support of desktop features can make using the app more natural and convenient for end users. ...
...And 4 more matches